/* ==========================================================================
   Harcourts Dapto | Albion Park | Shellharbour
   Brand Stylesheet — single source of truth
   --------------------------------------------------------------------------
   Every Atlas-generated page links this file.
   Never override these tokens inline. If a new pattern is needed, add it
   here as a class first, then use the class on the page.

   Brand reference: Harcourts International Brand Standards
   Primary: Harcourts Blue #001f49 | Accent: Harcourts Cyan #00aeef
   Typography: Source Sans Pro
   ========================================================================== */

/* ---------- Fonts (self-host in /assets/fonts) ----------------------------- */
/* Primary: Source Sans 3 (formerly Source Sans Pro) — self-hosted.
   Every page must link static/fonts/brand-fonts.css BEFORE this file
   (deployed estate-wide via integrations/deploy_brand_fonts.py).
   No CDN font loads — the old Google @import was removed 12/06/2026. */
/* Secondary: Harcourts Script — licensed font, self-hosted from assets/fonts/ */

@font-face {
  font-family: 'HarcourtsScript';
  /* Path resolves relative to where harcourts.css is served. Each app
     symlinks the font into its static/fonts/ dir so this works everywhere. */
  src: url('./fonts/HarcourtsScript.woff') format('woff'),
       url('./fonts/HarcourtsScript.ttf')  format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens -------------------------------------------------- */
:root {
  /* Brand colours — primary */
  --h-blue:        #001f49;   /* Harcourts Blue — dominant */
  --h-blue-90:     #0a2a55;
  --h-blue-80:     #1a3a65;
  --h-blue-20:     #cdd4de;
  --h-blue-10:     #e6e9ee;

  /* Brand colours — accent (use sparingly, never majority) */
  --h-cyan:        #00aeef;   /* Harcourts Cyan (Pantone Process Cyan C, RGB 0/174/239) — accents only */
  --h-cyan-90:     #0098d1;

  /* Neutrals */
  --h-black:       #000000;
  --h-charcoal:    #1a1a1a;
  --h-ink:         #2a2a2a;   /* body text */
  --h-grey-70:     #4a4a4a;
  --h-grey-50:     #8a8a8a;
  --h-grey-30:     #c8c8c8;   /* Harcourts Mid Grey (PDF spec: RGB 200/200/200) */
  --h-grey-10:     #ececec;
  --h-paper:       #f7f7f5;   /* off-white page bg */
  --h-white:       #ffffff;

  /* Status (used sparingly, never compete with brand) */
  --h-success:     #008752;
  --h-warning:     #fbb040;
  --h-error:       #d11242;

  /* Status — soft tint + ink pairs, for badges/alerts/row highlights.
     Tint is ~10% of the status colour on white; ink passes AA on its tint.
     Use these instead of inventing #dcfce7-style Tailwind pairs. */
  --h-success-soft: #e6f3ee;
  --h-success-ink:  #005835;
  --h-warning-soft: #fff7ec;
  --h-warning-ink:  #7a4d00;
  --h-error-soft:   #fae7ec;
  --h-error-ink:    #920d2e;
  --h-info-soft:    #e6f7fd;
  --h-info-ink:     #006a91;

  /* Dark surfaces — navy-derived set for dark-chrome dashboards (Pulse).
     Never mix with off-brand darks (#0f172a etc.). */
  --h-dark-surface: #001233;   /* page background */
  --h-dark-raise:   #002a63;   /* cards / raised panels */
  --h-dark-line:    #1a3a5c;   /* hairlines on dark */
  --h-dark-text:    #e6e9ee;   /* body text on dark */
  --h-dark-muted:   #98a8c3;   /* secondary text on dark */

  /* Typography */
  --h-font-sans:    'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --h-font-display: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  --h-font-script:  'HarcourtsScript', cursive;  /* Secondary — personality/single words only */
  --h-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;  /* figures/code — NOT JetBrains (that's the Wealth brand) */

  --h-fs-xs:       0.75rem;   /* 12 */
  --h-fs-sm:       0.875rem;  /* 14 */
  --h-fs-base:     1rem;      /* 16 */
  --h-fs-lg:       1.125rem;  /* 18 */
  --h-fs-xl:       1.375rem;  /* 22 */
  --h-fs-2xl:      1.75rem;   /* 28 */
  --h-fs-3xl:      2.25rem;   /* 36 */
  --h-fs-4xl:      3rem;      /* 48 */
  --h-fs-5xl:      4rem;      /* 64 */

  --h-fw-light:    300;
  --h-fw-regular:  400;
  --h-fw-semibold: 600;
  --h-fw-bold:     700;

  --h-lh-tight:    1.15;
  --h-lh-snug:     1.35;
  --h-lh-base:     1.6;

  --h-tracking-tight: -0.025em;  /* -25 per brand spec, used for headings */
  --h-tracking-body:  -0.01em;   /* -10 per brand spec, used for body */
  --h-tracking-wide:  0.08em;

  /* Spacing scale (4px base) */
  --h-s-1:  0.25rem;
  --h-s-2:  0.5rem;
  --h-s-3:  0.75rem;
  --h-s-4:  1rem;
  --h-s-5:  1.5rem;
  --h-s-6:  2rem;
  --h-s-8:  3rem;
  --h-s-10: 4rem;
  --h-s-12: 6rem;
  --h-s-16: 8rem;

  /* Layout */
  --h-container:   1200px;
  --h-container-narrow: 880px;

  /* Radius — Harcourts is restrained; keep small */
  --h-radius-sm:   2px;
  --h-radius:      4px;
  --h-radius-lg:   8px;
  --h-radius-pill: 999px;    /* ONLY for circles and the toggle switch — never for badges, chips, tabs or counts (MG standard 04/09/2026) */

  /* Borders */
  --h-border:      1px solid var(--h-grey-10);
  --h-border-strong: 1px solid var(--h-grey-30);

  /* Shadows — subtle only */
  --h-shadow-sm:   0 1px 2px rgba(0, 31, 73, 0.06);
  --h-shadow:      0 2px 8px rgba(0, 31, 73, 0.08);
  --h-shadow-lg:   0 12px 32px rgba(0, 31, 73, 0.12);

  /* Motion */
  --h-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --h-duration:    180ms;

  /* Z-index scale — always use these, never invent magic numbers.
     nav < dropdown < backdrop < modal < toast. */
  --h-z-nav:      100;
  --h-z-dropdown: 300;
  --h-z-backdrop: 800;
  --h-z-modal:    900;
  --h-z-toast:    1000;

  /* Focus — keyboard ring (cyan is reserved for focus/accent) */
  --h-focus-ring: 2px solid var(--h-cyan);
  --h-focus-glow: 0 0 0 3px rgba(0, 174, 239, 0.15);
}

/* ---------- Reset / base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-base);
  font-weight: var(--h-fw-regular);
  line-height: var(--h-lh-base);
  color: var(--h-ink);
  background: var(--h-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: var(--h-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--h-duration) var(--h-ease);
}
a:hover { color: var(--h-cyan); }

/* ---------- Typography classes -------------------------------------------- */
.h-display {
  font-family: var(--h-font-display);
  font-weight: var(--h-fw-light);
  font-size: var(--h-fs-5xl);
  line-height: var(--h-lh-tight);
  letter-spacing: var(--h-tracking-tight);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-5);
}

.h-h1 {
  font-weight: var(--h-fw-semibold);
  font-size: var(--h-fs-3xl);
  line-height: var(--h-lh-tight);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-4);
}

.h-h2 {
  font-weight: var(--h-fw-semibold);
  font-size: var(--h-fs-2xl);
  line-height: var(--h-lh-snug);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-3);
}

/* An h1 styled at the h2 size is a PAGE TITLE — house spec says page titles
   are bold (700), matching .page-title across Calls/ECR/PAR/Patch/Issues. */
h1.h-h2 {
  font-weight: var(--h-fw-bold);
}

.h-h3 {
  font-weight: var(--h-fw-semibold);
  font-size: var(--h-fs-xl);
  line-height: var(--h-lh-snug);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-3);
}

.h-eyebrow {
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  color: var(--h-cyan);
  margin: 0 0 var(--h-s-2);
}

.h-lead {
  font-size: var(--h-fs-lg);
  font-weight: var(--h-fw-light);
  line-height: var(--h-lh-snug);
  color: var(--h-grey-70);
}

.h-list {
  margin: 0 0 var(--h-s-3);
  padding-left: var(--h-s-4);
  color: var(--h-ink);
  line-height: var(--h-lh-snug);
}
.h-list li { margin-bottom: var(--h-s-2); }
.h-list--tight li { margin-bottom: 0; }

.h-muted { color: var(--h-grey-50); }
.h-meta  { font-size: var(--h-fs-sm); color: var(--h-grey-50); }

/* ---------- Signature brand patterns -------------------------------------- */

/* The Harcourts Script — secondary font for personality, single words only.
   Never use for body, headings, or buttons. Reserved for accent words like
   "Welcome", "Home", "Sold" used as personal/emotional callouts. */
.h-script {
  font-family: var(--h-font-script);
  font-weight: 400;
  font-style: italic;
}

/* The cyan underline — Harcourts' signature headline treatment.
   Apply to the LAST word of a headline (wrap that word in <span class="h-underline">).
   Height = ~50% of cap height, sits ~50% from top, cyan colour. */
.h-underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  /* Own stacking context so the z-index:-1 bar sits behind the text but can
     never disappear behind an ancestor's background (apps that paint `html`
     AND `body` — PAR/Patch/Flow — were swallowing it otherwise). */
  isolation: isolate;
}
.h-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.42em;
  background: var(--h-cyan);
  z-index: -1;
}

/* The H mark — placeholder for the standalone H symbol.
   Drop the official SVG into assets/ and reference it where you'd use this class. */
.h-mark {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: var(--h-blue);
  color: var(--h-white);
  font-weight: var(--h-fw-bold);
  text-align: center;
  line-height: 1.5em;
  border-radius: var(--h-radius-sm);
}

/* ---------- Layout primitives --------------------------------------------- */
.h-container {
  width: 100%;
  max-width: var(--h-container);
  margin: 0 auto;
  padding: 0 var(--h-s-5);
}

.h-container--narrow { max-width: var(--h-container-narrow); }

.h-section {
  padding: var(--h-s-10) 0;
}

.h-section--tight { padding: var(--h-s-6) 0; }

.h-grid {
  display: grid;
  gap: var(--h-s-5);
}

.h-grid--2 { grid-template-columns: repeat(2, 1fr); }
.h-grid--3 { grid-template-columns: repeat(3, 1fr); }
.h-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .h-grid--2, .h-grid--3, .h-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Brand stripe (signature texture) ------------------------------ */
/* RETIRED 04/09/2026 — MG: 'not Harcourts'. Kept only so legacy markup doesn't break. Never add to a page. */
.h-stripe {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--h-blue) 0,
    var(--h-blue) 24px,
    var(--h-white) 24px,
    var(--h-white) 48px
  );
}

.h-stripe--thin { height: 3px; }
.h-stripe--vertical {
  width: 6px;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    var(--h-blue) 0,
    var(--h-blue) 24px,
    var(--h-white) 24px,
    var(--h-white) 48px
  );
}

/* ---------- Buttons -------------------------------------------------------- */
.h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--h-s-2);
  padding: var(--h-s-3) var(--h-s-5);
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-base);
  font-weight: var(--h-fw-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--h-radius);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--h-duration) var(--h-ease);
  min-height: 44px;
}

.h-btn-primary {
  background: var(--h-blue);
  color: var(--h-white);
}
.h-btn-primary:hover {
  background: var(--h-blue-90);
  color: var(--h-white);
  transform: translateY(-1px);
  box-shadow: var(--h-shadow);
}

.h-btn-secondary {
  background: var(--h-white);
  color: var(--h-blue);
  border-color: var(--h-blue);
}
.h-btn-secondary:hover {
  background: var(--h-blue);
  color: var(--h-white);
}

.h-btn-ghost {
  background: transparent;
  color: var(--h-blue);
}
.h-btn-ghost:hover {
  background: var(--h-blue-10);
  color: var(--h-blue);
}

.h-btn-accent {
  background: var(--h-cyan);
  color: var(--h-white);
}
.h-btn-accent:hover {
  background: var(--h-cyan-90);
  color: var(--h-white);
}

/* Confirm / destructive actions — use sparingly; most actions are primary. */
.h-btn-success {
  background: var(--h-success);
  color: var(--h-white);
}
.h-btn-success:hover {
  background: var(--h-success-ink);
  color: var(--h-white);
}

.h-btn-danger {
  background: var(--h-error);
  color: var(--h-white);
}
.h-btn-danger:hover {
  background: var(--h-error-ink);
  color: var(--h-white);
}

.h-btn--sm { padding: var(--h-s-2) var(--h-s-4); font-size: var(--h-fs-sm); min-height: 36px; }
.h-btn--lg { padding: var(--h-s-4) var(--h-s-6); font-size: var(--h-fs-lg); min-height: 52px; }
.h-btn--block { width: 100%; }

/* A full-width clickable ROW that is still a real button — for "here are three
   things needing you, tap one to jump to it" lists. Keeps the brand's focus ring,
   font, radius and transition; only the layout changes: left-aligned, wrapping,
   growing to its content instead of a single centred line. Use with a colour
   variant (usually .h-btn-secondary) like any other button. */
.h-btn--row {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
  min-height: 0;
  font-weight: var(--h-fw-regular);
  line-height: var(--h-lh-snug);
  white-space: normal;
  gap: var(--h-s-3);
}

/* Disabled buttons read as disabled, whatever the variant. */
.h-btn:disabled, .h-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- Cards ---------------------------------------------------------- */
.h-card {
  background: var(--h-white);
  border: var(--h-border);
  border-radius: var(--h-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--h-duration) var(--h-ease),
              transform var(--h-duration) var(--h-ease);
}

.h-card:hover { box-shadow: var(--h-shadow-lg); transform: translateY(-2px); }

/* Sign-in card variant — used on the login page of every internal app.
   Canonical look (modelled on the flow sign-in page): flat navy page, one
   compact white card — icon tile, app name, tagline, single primary button. */
.h-card--login {
  position: relative;
  width: 360px;
  max-width: 90vw;
  margin: var(--h-s-12) auto;
  padding: var(--h-s-8) var(--h-s-6);
  background: var(--h-white);
  border-radius: var(--h-radius-lg);
  box-shadow: var(--h-shadow-lg);
  text-align: center;
}
.h-card--login:hover { transform: none; box-shadow: var(--h-shadow-lg); }

/* ── Full-page login layout ────────────────────────────────────────────────
   Flat Harcourts navy with a single centred sign-in card. */
.h-login-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--h-s-6);
  font-family: var(--h-font-sans);
  color: var(--h-white);
  background: var(--h-blue);
}

/* Card sits centred; reset any auto-margin from .h-card--login default */
.h-login-page > .h-card--login {
  margin: 0;
}

/* App mark — small cyan tile with a navy line icon (the flow-logo pattern).
   Drop a 24×24 stroke SVG inside; it inherits currentColor. */
.h-login-card__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--h-radius-lg);
  background: var(--h-cyan);
  color: var(--h-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--h-s-4);
}
.h-login-card__mark svg { width: 22px; height: 22px; }

/* App name beneath the mark */
.h-login-card__title {
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-2xl);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-tight);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-1);
}

/* Subtitle beneath the app title — full meaning of the abbreviation */
.h-login-card__subtitle {
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-regular);
  color: var(--h-grey-50);
  margin: 0 0 var(--h-s-5);
  letter-spacing: 0.01em;
}

/* Inline error notice above the sign-in button */
.h-login-card__error {
  background: var(--h-blue-10);
  color: var(--h-blue);
  border-radius: var(--h-radius-lg);
  padding: var(--h-s-3);
  font-size: var(--h-fs-sm);
  margin: 0 0 var(--h-s-4);
}

/* Cyan accent — thin bar that visually links the title to the brand mark */
.h-login-card__accent {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--h-cyan);
  border: 0;
  border-radius: 2px;
  margin: 0 auto var(--h-s-4);
}

.h-card__media {
  aspect-ratio: 4 / 3;
  background: var(--h-grey-10);
  overflow: hidden;
}
.h-card__media img { width: 100%; height: 100%; object-fit: cover; }

.h-card__body  { padding: var(--h-s-5); }
.h-card__title { font-weight: var(--h-fw-semibold); color: var(--h-blue); margin: 0 0 var(--h-s-2); font-size: var(--h-fs-lg); }
.h-card__meta  { font-size: var(--h-fs-sm); color: var(--h-grey-50); margin: 0; }

/* ---------- Tile (property listing standard) ------------------------------ */
.h-tile {
  display: flex;
  flex-direction: column;
  background: var(--h-white);
  border-radius: var(--h-radius-lg);
  overflow: hidden;
  border: var(--h-border);
  transition: box-shadow var(--h-duration) var(--h-ease);
}
.h-tile:hover { box-shadow: var(--h-shadow-lg); }

.h-tile__image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--h-grey-10);
  overflow: hidden;
}
.h-tile__image img { width: 100%; height: 100%; object-fit: cover; }

.h-tile__badge {
  position: absolute;
  top: var(--h-s-3);
  left: var(--h-s-3);
  background: var(--h-blue);
  color: var(--h-white);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  padding: var(--h-s-1) var(--h-s-3);
  border-radius: var(--h-radius-sm);
}

.h-tile__body { padding: var(--h-s-5); flex: 1; display: flex; flex-direction: column; }

.h-tile__price {
  font-size: var(--h-fs-xl);
  font-weight: var(--h-fw-bold);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-2);
}

.h-tile__address {
  font-size: var(--h-fs-base);
  color: var(--h-ink);
  margin: 0 0 var(--h-s-4);
  line-height: var(--h-lh-snug);
}

.h-tile__features {
  display: flex;
  gap: var(--h-s-4);
  padding-top: var(--h-s-3);
  border-top: var(--h-border);
  margin-top: auto;
  font-size: var(--h-fs-sm);
  color: var(--h-grey-70);
}

.h-tile__features span {
  display: inline-flex;
  align-items: center;
  gap: var(--h-s-1);
  font-weight: var(--h-fw-semibold);
}

/* ---------- Header / nav --------------------------------------------------- */
.h-header {
  background: var(--h-white);
  border-bottom: var(--h-border);
}

/* Dark variant for internal apps where the header sits on a navy band
   above a light body (hub, calls, ecr, par all use this pattern). */
.h-header--dark {
  background: var(--h-blue);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--h-white);
}
.h-header--dark .h-header__logo { color: var(--h-white); }
.h-header--dark .h-nav a        { color: rgba(255,255,255,0.85); }
.h-header--dark .h-nav a:hover  { color: var(--h-cyan); }
.h-header--dark .h-nav a.active { color: var(--h-white); border-bottom: 2px solid var(--h-cyan); }

.h-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--h-s-4) var(--h-s-6);
}

.h-header__logo {
  font-family: var(--h-font-display);
  font-weight: var(--h-fw-bold);
  font-size: var(--h-fs-xl);
  color: var(--h-blue);
  text-decoration: none;
  letter-spacing: var(--h-tracking-tight);
  display: inline-flex;
  align-items: center;
  gap: var(--h-s-2);
}
.h-header__logo-accent { color: var(--h-cyan); }
.h-header__logo-sub {
  font-style: italic;
  font-weight: var(--h-fw-regular);
  font-size: var(--h-fs-sm);
  opacity: 0.7;
  margin-left: var(--h-s-2);
}

/* Brand logo image — pair with the canonical PNGs in ~/Atlas/brand/assets/
   (logo-horizontal-{blue,white}.png, logo-stacked-{blue,white}.png).
   Use the BLUE variant on light backgrounds, WHITE on dark. */
.h-logo {
  display: block;
  height: auto;
  max-width: 100%;
  user-select: none;
}
.h-logo--sm   { height: 28px; width: auto; }
.h-logo--md   { height: 40px; width: auto; }
.h-logo--lg   { height: 64px; width: auto; }
.h-logo--login {
  /* For sign-in cards — STACKED logo (Harcourts wordmark + DAS locations).
     Native 2636×1105 PNG; 120px display height = 286px wide, fits in the
     wider 480px login card with breathing room. */
  display: block;
  height: 120px;
  width: auto;
  max-width: 320px;
  margin: 0 auto var(--h-s-5);
  object-fit: contain;
}

/* User chip — avatar + first name + sign-out, sits on the right of .h-header */
.h-user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--h-s-3);
  font-size: var(--h-fs-sm);
}
.h-user-chip__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--h-cyan);
  color: var(--h-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--h-fw-bold);
  font-size: var(--h-fs-xs);
}
.h-user-chip__name { font-weight: var(--h-fw-semibold); }
.h-user-chip__logout {
  color: var(--h-cyan);
  text-decoration: none;
  font-weight: var(--h-fw-semibold);
}
.h-user-chip__logout:hover { text-decoration: underline; }

.h-nav { display: flex; gap: var(--h-s-5); }
.h-nav a {
  color: var(--h-ink);
  text-decoration: none;
  font-weight: var(--h-fw-semibold);
  font-size: var(--h-fs-sm);
  letter-spacing: 0.02em;
}
.h-nav a:hover { color: var(--h-cyan); }

/* ---------- Internal-tool top bar (sticky 60px) ---------------------------
   Canonical chrome shared by every authenticated internal app (Hub, Calls,
   Issues, ECR, PAR). Place at the top of <body>. Pair with .h-app-nav__brand
   on the left, optional middle nav, and .h-user-chip on the right. */
.h-app-nav {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 var(--h-s-6);
  background: var(--h-blue);
  color: var(--h-white);
  gap: var(--h-s-4);
  position: sticky;
  top: 0;
  z-index: var(--h-z-nav);
  flex-shrink: 0;
}
.h-app-nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--h-s-3);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.h-app-nav__brand-img {
  height: 28px;
  width: auto;
  display: block;
  position: relative;
  top: 7px;
}
.h-app-nav__brand-suffix {
  color: var(--h-cyan);
  font-family: var(--h-font-sans);
  font-weight: var(--h-fw-semibold);
  font-size: var(--h-fs-2xl);
  letter-spacing: -0.01em;
  line-height: 1;
}
.h-app-nav__spacer { flex: 1; }
.h-app-nav__right  { display: flex; align-items: center; gap: var(--h-s-3); }
.h-app-nav__links  { display: flex; align-items: center; gap: var(--h-s-2); }
.h-app-nav__links a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-semibold);
  padding: var(--h-s-2) var(--h-s-3);
  border-radius: var(--h-radius);
  transition: background var(--h-duration) var(--h-ease),
              color var(--h-duration) var(--h-ease);
}
.h-app-nav__links a:hover  { color: var(--h-white); background: rgba(255,255,255,0.08); }
.h-app-nav__links a.active { color: var(--h-white); background: rgba(0,174,239,0.2); }

/* Back-to-Studio in the top bar — the .h-app-nav counterpart of
   .h-sidebar__back, for apps that haven't moved to the Studio shell. Sits at
   the head of .h-app-nav__right, left of the user chip, and stays quieter than
   a nav link: it leaves the app rather than moving around inside it. */
.h-app-nav__back {
  display: inline-flex;
  align-items: center;
  gap: var(--h-s-2);
  color: rgba(255,255,255,0.6);
  font-size: var(--h-fs-sm);
  padding: var(--h-s-2) var(--h-s-3);
  border-radius: var(--h-radius);
  text-decoration: none;
  transition: background var(--h-duration) var(--h-ease),
              color var(--h-duration) var(--h-ease);
}
.h-app-nav__back:hover { background: rgba(255,255,255,0.1); color: var(--h-white); }
.h-app-nav__back svg { width: 15px; height: 15px; flex: none; }
/* Phones keep the arrow, drop the word — same trade the user-name chip makes. */
@media (max-width: 640px) { .h-app-nav__back span { display: none; } }

/* User chip used inside .h-app-nav__right — avatar + first name + sign-out */
.h-app-nav__user {
  display: flex;
  align-items: center;
  gap: var(--h-s-2);
  color: var(--h-white);
}
.h-app-nav__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--h-cyan);
  color: var(--h-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-bold);
  flex-shrink: 0;
  overflow: hidden;
}
.h-app-nav__avatar img { width: 100%; height: 100%; object-fit: cover; }
.h-app-nav__user-name { font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold); }
.h-app-nav__logout {
  color: rgba(255,255,255,0.6);
  font-size: var(--h-fs-sm);
  padding: var(--h-s-2) var(--h-s-3);
  border-radius: var(--h-radius);
  text-decoration: none;
  transition: background var(--h-duration) var(--h-ease),
              color var(--h-duration) var(--h-ease);
}
.h-app-nav__logout:hover { background: rgba(255,255,255,0.1); color: var(--h-white); }

@media (max-width: 640px) {
  .h-app-nav { padding: 0 var(--h-s-4); gap: var(--h-s-2); }
  .h-app-nav__user-name { display: none; }
  /* Drop the wide horizontal logo on phones — the cyan app name carries the
     brand. Keeps Sign out on-screen even with extra nav controls. */
  .h-app-nav__brand-img { display: none; }
  .h-app-nav__brand-suffix { font-size: var(--h-fs-xl); }
  .h-app-nav__right { gap: var(--h-s-2); }
}

/* ---------- Footer --------------------------------------------------------- */
.h-footer {
  background: var(--h-blue);
  color: var(--h-white);
  padding: var(--h-s-8) 0 var(--h-s-5);
  margin-top: var(--h-s-12);
}
.h-footer a { color: var(--h-white); }
.h-footer__meta {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: var(--h-s-6);
  padding-top: var(--h-s-4);
  font-size: var(--h-fs-sm);
  opacity: 0.8;
}

/* ---------- Forms ---------------------------------------------------------- */
.h-label {
  display: block;
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-semibold);
  color: var(--h-blue);
  margin-bottom: var(--h-s-1);
}

.h-input, .h-textarea, .h-select {
  width: 100%;
  padding: var(--h-s-3) var(--h-s-4);
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-base);
  color: var(--h-ink);
  background: var(--h-white);
  border: var(--h-border-strong);
  border-radius: var(--h-radius);
  transition: border-color var(--h-duration) var(--h-ease);
}

.h-input:focus, .h-textarea:focus, .h-select:focus {
  outline: none;
  border-color: var(--h-cyan);
  box-shadow: var(--h-focus-glow);
}

.h-textarea { min-height: 120px; resize: vertical; }

/* Styled native <select> with consistent chevron — drop into any app for a
   uniform dropdown look (no browser-default arrow). The chevron uses the
   navy hex inline so it renders without depending on CSS-variable resolution. */
.h-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: calc(var(--h-s-4) + 18px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23001f49' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--h-s-3) center;
}
.h-select--pill {
  border: 1px solid var(--h-grey-10);
  border-radius: var(--h-radius);
  padding: var(--h-s-2) calc(var(--h-s-4) + 18px) var(--h-s-2) var(--h-s-4);
  font-weight: var(--h-fw-semibold);
  color: var(--h-blue);
  font-size: var(--h-fs-sm);
  background-color: var(--h-white);
}

/* ---------- Live indicator -------------------------------------------------
   Marks a surface that keeps itself up to date, so nobody sits in front of a
   stale screen wondering whether to hit refresh. Pair the dot with a short
   plain-English note saying how often it checks — the dot alone doesn't tell
   anyone what it means.
     <span class="h-live-flag"><span class="h-live-flag__dot"></span>Live — …</span>
   Reveal it from JS once polling is actually running, and hide it if polling
   gives up: a flag that lies is worse than no flag.                           */
.h-live-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--h-s-2);
  font-size: var(--h-fs-sm);
  color: var(--h-grey-50);
}
.h-live-flag__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--h-success);
  flex: none;
  animation: hLivePulse 2.4s var(--h-ease) infinite;
}
@keyframes hLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .h-live-flag__dot { animation: none; }
}

/* ---------- Badges / pills ------------------------------------------------- */
.h-badge {
  display: inline-block;
  padding: var(--h-s-1) var(--h-s-3);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--h-radius-sm);
  background: var(--h-blue-10);
  color: var(--h-blue);
}
.h-badge--accent  { background: var(--h-cyan); color: var(--h-white); }
.h-badge--solid   { background: var(--h-blue); color: var(--h-white); }
.h-badge--success { background: var(--h-success); color: var(--h-white); }
.h-badge--warning { background: var(--h-warning); color: var(--h-charcoal); }
.h-badge--error   { background: var(--h-error); color: var(--h-white); }
/* Soft variants — tinted background + status ink; the default choice for
   in-table status chips where solid blocks would shout. */
.h-badge--success-soft { background: var(--h-success-soft); color: var(--h-success-ink); }
.h-badge--warning-soft { background: var(--h-warning-soft); color: var(--h-warning-ink); }
.h-badge--error-soft   { background: var(--h-error-soft);   color: var(--h-error-ink); }
.h-badge--info-soft    { background: var(--h-info-soft);    color: var(--h-info-ink); }

/* ---------- Notices -------------------------------------------------------- */
/* A block-level message attached to the thing it's about — distinct from
   .h-badge, which labels a status inline. Left rule carries the status colour
   so the tint can stay light enough to read a paragraph against. */
.h-notice {
  padding: var(--h-s-4) var(--h-s-5);
  border-radius: var(--h-radius-sm);
  border-left: 3px solid var(--h-blue);
  background: var(--h-blue-10);
  color: var(--h-blue);
  font-size: var(--h-fs-sm);
}
.h-notice__title {
  font-weight: var(--h-fw-semibold);
  margin: 0 0 var(--h-s-2) 0;
}
.h-notice p:last-child { margin-bottom: 0; }
.h-notice--warning {
  border-left-color: var(--h-warning);
  background: var(--h-warning-soft);
  color: var(--h-warning-ink);
}
.h-notice--error {
  border-left-color: var(--h-error);
  background: var(--h-error-soft);
  color: var(--h-error-ink);
}
.h-notice--success {
  border-left-color: var(--h-success);
  background: var(--h-success-soft);
  color: var(--h-success-ink);
}

/* Filter / status / tab pills — clickable, with hover + active states.
   Different from .h-badge (one-shot uppercase label). Use .h-pill for
   the bars of "All / On Market / Coming Soon / Sold" style controls
   that appear across hub, brochure, calls, pulse, ecr. */
.h-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--h-s-2);
  padding: var(--h-s-2) var(--h-s-4);
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-semibold);
  color: var(--h-blue);
  background: var(--h-white);
  border: 1px solid var(--h-grey-10);
  border-radius: var(--h-radius);
  cursor: pointer;
  transition: background var(--h-duration) var(--h-ease),
              border-color var(--h-duration) var(--h-ease);
  text-decoration: none;
}
.h-pill:hover {
  background: var(--h-blue-10);
  border-color: var(--h-blue-20);
}
.h-pill.is-active,
.h-pill[aria-pressed="true"],
.h-pill--active {
  background: var(--h-blue);
  color: var(--h-white);
  border-color: var(--h-blue);
}
.h-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 var(--h-s-2);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-bold);
  background: var(--h-blue-10);
  color: var(--h-blue);
  border-radius: var(--h-radius);
}
.h-pill.is-active .h-pill__count,
.h-pill--active .h-pill__count {
  background: rgba(255,255,255,0.2);
  color: var(--h-white);
}

/* Modal close button — the ✕ in the corner of a dialog. Tiny, square,
   icon-only. Use INSIDE a .h-card or .h-modal as the dismiss control. */
.h-modal-close {
  position: absolute;
  top: var(--h-s-3);
  right: var(--h-s-3);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--h-grey-50);
  cursor: pointer;
  font-size: var(--h-fs-lg);
  line-height: 1;
  transition: background var(--h-duration) var(--h-ease),
              color var(--h-duration) var(--h-ease);
}
.h-modal-close:hover {
  background: var(--h-grey-10);
  color: var(--h-charcoal);
}

/* ---------- Modal ----------------------------------------------------------- */
/* Centred dialog over a navy scrim. Markup:
   <div class="h-modal-backdrop"></div>
   <div class="h-modal" role="dialog" aria-modal="true">
     <button class="h-modal-close">✕</button>
     <h3 class="h-modal__title">…</h3> … <div class="h-modal__footer">…</div>
   </div> */
.h-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 18, 51, 0.55);
  z-index: var(--h-z-backdrop);
}
.h-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - var(--h-s-6)));
  max-height: calc(100vh - var(--h-s-10));
  overflow: auto;
  padding: var(--h-s-6);
  background: var(--h-white);
  border-radius: var(--h-radius-lg);
  box-shadow: var(--h-shadow-lg);
  z-index: var(--h-z-modal);
}
.h-modal__title {
  margin: 0 0 var(--h-s-4);
  font-size: var(--h-fs-xl);
  font-weight: var(--h-fw-bold);
  color: var(--h-blue);
  letter-spacing: var(--h-tracking-tight);
}
.h-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--h-s-2);
  margin-top: var(--h-s-6);
}

/* ---------- Toast ----------------------------------------------------------- */
/* Transient confirmation, bottom-centre. Add/remove from JS; the reduced-motion
   block already neutralises any animation you attach. */
.h-toast {
  position: fixed;
  bottom: var(--h-s-5);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--h-s-3);
  padding: var(--h-s-3) var(--h-s-5);
  background: var(--h-blue);
  color: var(--h-white);
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-semibold);
  border-radius: var(--h-radius);
  box-shadow: var(--h-shadow-lg);
  z-index: var(--h-z-toast);
}
.h-toast--success { background: var(--h-success); }
.h-toast--error   { background: var(--h-error); }
/* An undoable action needs its way back inside the toast itself. A ghost or
   secondary button here would be navy-on-navy, so the action states its own
   colours against the toast's fill. (07/09/2026) */
.h-toast__action.h-btn {
  background: transparent;
  color: var(--h-white);
  border-color: var(--h-white);
}
.h-toast__action.h-btn:hover,
.h-toast__action.h-btn:focus-visible {
  background: var(--h-white);
  color: var(--h-blue);
}

/* ---------- Page header ----------------------------------------------------- */
/* Standard page-top row: title (+ optional subtitle) left, actions right. */
.h-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--h-s-4);
  margin: var(--h-s-6) 0 var(--h-s-5);
}
.h-page-header__title {
  margin: 0;
  font-size: var(--h-fs-2xl);
  font-weight: var(--h-fw-bold);
  color: var(--h-blue);
  letter-spacing: var(--h-tracking-tight);
}
.h-page-header__sub {
  margin: var(--h-s-1) 0 0;
  font-size: var(--h-fs-sm);
  color: var(--h-grey-50);
}
/* The title block gives way first, so the actions stay on the title's line
   instead of wrapping under it; and if they DO wrap on a narrow screen,
   margin-left:auto keeps them on the right rather than dropping them left. */
.h-page-header > :first-child { flex: 1 1 340px; min-width: 0; }
.h-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--h-s-2);
  margin-left: auto;
}
/* Workflow steps: Back · Workflow · Next, in three fixed slots so the buttons
   land in exactly the same place on every step of the run, whatever the labels
   say and whether or not a step has a Back or a Next. An absent one is an
   empty slot, not a gap that shifts the others. */
.h-page-header__actions--steps { display: grid; grid-template-columns: repeat(3, 190px); }
.h-page-header__actions--steps .h-btn { width: 100%; }
@media (max-width: 760px) {
  .h-page-header__actions--steps { display: flex; flex-wrap: wrap; }
  .h-page-header__actions--steps .h-btn { width: auto; }
  .h-page-header__actions--steps .h-page-header__slot { display: none; }
}

/* ---------- Segmented toggle ------------------------------------------------ */
/* 2–4 mutually exclusive options in one control (Add/Subtract, Day/Week/Month).
   Works on <button> or <a>; mark the active option with .is-active or
   aria-pressed="true". */
.h-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--h-white);
  border: 1px solid var(--h-grey-10);
  border-radius: var(--h-radius);
}
.h-segmented__option {
  padding: var(--h-s-2) var(--h-s-4);
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-semibold);
  color: var(--h-blue);
  background: transparent;
  border: 0;
  border-radius: var(--h-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--h-duration) var(--h-ease);
}
.h-segmented__option:hover { background: var(--h-blue-10); }
.h-segmented__option.is-active,
.h-segmented__option[aria-pressed="true"] {
  background: var(--h-blue);
  color: var(--h-white);
}

/* ---------- Empty state ----------------------------------------------------- */
/* Friendly zero-results block — use instead of a bare "No data" row. */
.h-empty {
  padding: var(--h-s-10) var(--h-s-6);
  text-align: center;
  color: var(--h-grey-50);
}
.h-empty__icon  { font-size: var(--h-fs-3xl); margin-bottom: var(--h-s-3); }
.h-empty__title {
  margin: 0 0 var(--h-s-1);
  font-size: var(--h-fs-lg);
  font-weight: var(--h-fw-semibold);
  color: var(--h-grey-70);
}
.h-empty__hint  { margin: 0; font-size: var(--h-fs-sm); }

/* ---------- Skeleton (loading shimmer) -------------------------------------- */
/* Functional gradient (loading state), not decorative — exempt from the
   no-gradients rule. Size it with width/height utilities or inline layout. */
.h-skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--h-radius);
  background: linear-gradient(90deg, var(--h-grey-10) 25%, var(--h-paper) 50%, var(--h-grey-10) 75%);
  background-size: 200% 100%;
  animation: h-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes h-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------- Tables --------------------------------------------------------- */
.h-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--h-fs-sm);
}
.h-table th {
  text-align: left;
  background: var(--h-blue);
  color: var(--h-white);
  font-weight: var(--h-fw-semibold);
  padding: var(--h-s-3) var(--h-s-4);
}
.h-table td {
  padding: var(--h-s-3) var(--h-s-4);
  border-bottom: var(--h-border);
}
.h-table tr:hover td { background: var(--h-blue-10); }

/* ---------- Utility -------------------------------------------------------- */
.h-divider { border: 0; border-top: var(--h-border); margin: var(--h-s-6) 0; }
.h-mt-0 { margin-top: 0; }
.h-text-center { text-align: center; }
.h-mono { font-family: var(--h-font-mono); font-variant-numeric: tabular-nums; }
.h-on-blue { background: var(--h-blue); color: var(--h-white); }
.h-on-blue .h-h1, .h-on-blue .h-h2, .h-on-blue .h-h3 { color: var(--h-white); }

/* ---------- Focus / motion / print ----------------------------------------- */
/* ── Keyboard focus — cyan ring (brand reserves cyan for focus states) ── */
:focus-visible {
  outline: var(--h-focus-ring);
  outline-offset: 2px;
}
/* inputs already show their own cyan border+glow on focus — no double ring */
.h-input:focus-visible, .h-textarea:focus-visible, .h-select:focus-visible { outline: none; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: var(--h-white); color: var(--h-black); }
  .h-btn, .h-nav, .h-app-nav { display: none; }
  .h-card, .h-tile { box-shadow: none; border: 1px solid var(--h-grey-30); }
  /* tables: ink-friendly — borders instead of navy fills */
  .h-table th {
    background: var(--h-white) !important;
    color: var(--h-black) !important;
    border-bottom: 2px solid var(--h-black);
  }
  .h-table td { border-bottom: 1px solid var(--h-grey-30); }
  a { color: var(--h-black); text-decoration: none; }
}

/* ---------- Studio shell (sidebar app layout) -------------------------------
   The Studio shell at studio.hdas.com.au: a full-height Harcourts Blue
   sidebar on the left, white content on the right. Sidebar carries the
   wordmark + cyan "Studio" extension, a search box, grouped nav, and the
   signed-in user card at the bottom. Added 04/09/2026. */
.h-shell {
  display: flex;
  min-height: 100vh;
  background: var(--h-paper);
}
.h-sidebar {
  width: 240px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--h-blue);
  color: var(--h-white);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.h-sidebar__brand {
  display: flex;
  align-items: baseline;
  gap: var(--h-s-2);
  padding: var(--h-s-5) var(--h-s-5) var(--h-s-5);
  text-decoration: none;
  color: var(--h-white);
  line-height: 1;
}
.h-sidebar__brand-img { height: 22px; width: auto; display: block; position: relative; top: 4px; }
.h-sidebar__brand-ext {
  font-family: var(--h-font-sans);
  font-weight: var(--h-fw-light);
  font-size: var(--h-fs-lg);
  color: var(--h-cyan);
  letter-spacing: 0;
  border-left: 1px solid rgba(255,255,255,0.25);
  padding-left: var(--h-s-2);
}
.h-sidebar__search {
  margin: 0 var(--h-s-4) var(--h-s-4);
  display: flex;
  align-items: center;
  gap: var(--h-s-2);
  padding: var(--h-s-2) var(--h-s-3);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--h-radius);
  color: rgba(255,255,255,0.55);
  font-size: var(--h-fs-sm);
}
.h-sidebar__search input {
  background: none;
  border: 0;
  color: var(--h-white);
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-sm);
  width: 100%;
  outline: none;
}
.h-sidebar__search input::placeholder { color: rgba(255,255,255,0.45); }
.h-sidebar__nav { flex: 1; padding: 0 var(--h-s-3); }
.h-sidebar__group {
  margin: var(--h-s-4) var(--h-s-2) var(--h-s-2);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.h-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  padding: var(--h-s-2) var(--h-s-3);
  border-radius: var(--h-radius);
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-regular);
  border-left: 2px solid transparent;
  transition: background var(--h-duration) var(--h-ease), color var(--h-duration) var(--h-ease);
}
.h-sidebar__link:hover { background: rgba(255,255,255,0.08); color: var(--h-white); }
.h-sidebar__link.is-active {
  background: rgba(255,255,255,0.1);
  color: var(--h-white);
  font-weight: var(--h-fw-semibold);
  border-left-color: var(--h-cyan);
}
.h-sidebar__link svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.h-sidebar__link--muted { color: rgba(255,255,255,0.35); cursor: default; }
.h-sidebar__link--muted:hover { background: none; color: rgba(255,255,255,0.35); }
.h-sidebar__badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--h-s-2);
  border-radius: var(--h-radius);
  background: var(--h-cyan);
  color: var(--h-blue);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Back-to-Studio link — for standalone apps (Calls, Issues, …) that wear the
   Studio shell but live on their own domain. Sits at the foot of the sidebar,
   under the nav and above the signed-in user, deliberately quieter than a nav
   link: it leaves the app rather than moving around inside it. */
.h-sidebar__back {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  margin: var(--h-s-3) var(--h-s-3) 0;
  padding: var(--h-s-2) var(--h-s-3);
  border-radius: var(--h-radius);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: var(--h-fs-sm);
  transition: background var(--h-duration) var(--h-ease), color var(--h-duration) var(--h-ease);
}
.h-sidebar__back:hover { background: rgba(255,255,255,0.08); color: var(--h-white); }
.h-sidebar__back svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }

.h-sidebar__user {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: var(--h-s-4) var(--h-s-5);
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
}
.h-sidebar__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--h-cyan);
  color: var(--h-blue);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-bold);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex: none;
}
.h-sidebar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.h-sidebar__user-name { font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold); color: var(--h-white); line-height: 1.2; }
.h-sidebar__user-role { font-size: var(--h-fs-xs); color: rgba(255,255,255,0.55); line-height: 1.2; }
.h-sidebar__user-meta { min-width: 0; }
.h-sidebar__signout {
  display: block;
  padding: 0 var(--h-s-5) var(--h-s-4);
  font-size: var(--h-fs-xs);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.h-sidebar__signout:hover { color: var(--h-white); }

.h-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.h-shell__content { padding: var(--h-s-6) var(--h-s-8) var(--h-s-10); max-width: 1320px; width: 100%; }
.h-shell__topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--h-s-3);
  padding: var(--h-s-3) var(--h-s-8);
  background: var(--h-white);
  border-bottom: 1px solid var(--h-grey-10);
  min-height: 52px;
}

/* View-as banner across the top of the content when a leader is previewing */
.h-viewas {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  padding: var(--h-s-2) var(--h-s-8);
  background: var(--h-info-soft);
  color: var(--h-info-ink);
  font-size: var(--h-fs-sm);
  border-bottom: 1px solid var(--h-grey-10);
}
.h-viewas form { margin-left: auto; }

/* Launcher tile — logo left, name right. For app/service launchers on Home.
   NOT the property .h-tile. */
.h-launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--h-s-3);
}
.h-launch {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  padding: var(--h-s-3) var(--h-s-4);
  min-height: 60px;
  background: var(--h-white);
  border: 1px solid var(--h-grey-10);
  border-radius: var(--h-radius);
  color: var(--h-ink);
  text-decoration: none;
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-semibold);
  line-height: 1.25;
  transition: box-shadow var(--h-duration) var(--h-ease), border-color var(--h-duration) var(--h-ease);
}
.h-launch:hover { box-shadow: var(--h-shadow); border-color: var(--h-blue-20); color: var(--h-blue); }
.h-launch__logo {
  width: 28px; height: 28px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--h-radius-sm);
  overflow: hidden;
  background: var(--h-white);
}
.h-launch__logo img { width: 100%; height: 100%; object-fit: contain; }
.h-launch__fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--h-blue);
  color: var(--h-white);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-bold);
}
.h-launch--placeholder {
  border-style: dashed;
  color: var(--h-grey-50);
  font-weight: var(--h-fw-regular);
  background: transparent;
}
.h-launch--placeholder:hover { box-shadow: none; border-color: var(--h-grey-10); color: var(--h-grey-50); }

/* Section eyebrow used between launcher groups on Home */
.h-home-section { margin: 0 0 var(--h-s-6); }
.h-home-section__title {
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-bold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  color: var(--h-grey-70);
  margin: 0 0 var(--h-s-3);
}

/* Toggle switch — on/off control for access switches. It's a <button
   role="switch" aria-checked>, so it's a clickable control, not a pill. */
.h-switch {
  position: relative;
  width: 40px; height: 22px;
  border-radius: var(--h-radius-pill);
  background: var(--h-grey-30);
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: none;
  transition: background var(--h-duration) var(--h-ease);
}
.h-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--h-white);
  transition: transform var(--h-duration) var(--h-ease);
}
.h-switch[aria-checked="true"] { background: var(--h-cyan); }
.h-switch[aria-checked="true"]::after { transform: translateX(18px); }
.h-switch:focus-visible { outline: 2px solid var(--h-cyan); outline-offset: 2px; }
.h-switch:disabled { opacity: 0.4; cursor: not-allowed; }
.h-switch-row { display: inline-flex; align-items: center; gap: var(--h-s-2); font-size: var(--h-fs-sm); }

/* Users table extras */
.h-user-cell { display: flex; align-items: center; gap: var(--h-s-3); }
.h-user-cell__avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--h-blue); color: var(--h-white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--h-fs-xs); font-weight: var(--h-fw-bold);
}
.h-user-cell__avatar img { width: 100%; height: 100%; object-fit: cover; }
.h-user-cell__name { font-weight: var(--h-fw-semibold); color: var(--h-blue); line-height: 1.2; }
.h-user-cell__sub { font-size: var(--h-fs-xs); color: var(--h-grey-50); line-height: 1.2; }
.h-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--h-s-3); margin: 0 0 var(--h-s-6); }
.h-stat {
  background: var(--h-white); border: 1px solid var(--h-grey-10); border-radius: var(--h-radius);
  padding: var(--h-s-3) var(--h-s-4);
}
.h-stat__label { font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); letter-spacing: var(--h-tracking-wide); text-transform: uppercase; color: var(--h-grey-50); margin: 0 0 var(--h-s-1); }
.h-stat__value { font-size: var(--h-fs-2xl); font-weight: var(--h-fw-bold); color: var(--h-blue); line-height: 1; margin: 0; }
.h-stat__sub { font-size: var(--h-fs-xs); color: var(--h-grey-50); margin: var(--h-s-1) 0 0; }

@media (max-width: 860px) {
  .h-shell { flex-direction: column; }
  .h-sidebar { width: 100%; height: auto; position: static; }
  .h-sidebar__nav { padding-bottom: var(--h-s-3); }
  .h-shell__content { padding: var(--h-s-4); }
  .h-shell__topbar, .h-viewas, .h-bday-banner { padding-left: var(--h-s-4); padding-right: var(--h-s-4); }
}

/* Studio shell fixes 04/09/2026 — [hidden] must beat display rules on these */
.h-toast[hidden], .h-launch__fallback[hidden], .h-form-card__actions[hidden] { display: none; }
.h-splash-backdrop[hidden] { display: none; }
.h-bday-banner[hidden] { display: none; }
/* .h-label is display:flex (stacked caption over control), which beats the UA
   stylesheet [hidden] rule -- so a JS-hidden field stayed on screen. The
   attendance form showed two date fields because of exactly this, and the one
   she filled in was the one thrown away. */
.h-label[hidden], .h-grid--2 > [hidden] { display: none !important; }
.h-sidebar__search svg { width: 16px; height: 16px; flex: none; }
.h-sidebar__brand-img { height: 18px; top: 3px; }
.h-shell__topbar label { white-space: nowrap; font-size: var(--h-fs-sm); }
.h-shell__topbar .h-select { width: auto; min-width: 200px; }
.h-launch--placeholder .h-launch__fallback { background: var(--h-grey-10); color: var(--h-grey-50); }

/* Sidebar brand: franchise-extension rule — "Studio" is Source Sans Light,
   cyan, tracking 0, CAP HEIGHT aligned to the Harcourts H (wordmark PNG has
   its cap top at row 0 and its baseline at 73.6% of its height; the cyan
   underscore below that is not part of the text). 04/09/2026 */
.h-sidebar__brand { align-items: flex-start; }
.h-sidebar__brand-img { height: 18px; top: 0; }
.h-sidebar__brand-ext { font-size: 20px; line-height: 1; margin-top: -4px; padding-left: var(--h-s-2); margin-left: var(--h-s-1); border-left-width: 1px; }

/* ---------- Studio Projects / Ideas (04/09/2026) --------------------------- */
.h-seg-count { opacity: 0.7; font-weight: var(--h-fw-regular); margin-left: var(--h-s-1); }
.h-proj-toolbar { display: flex; gap: var(--h-s-2); align-items: center; margin: 0 0 var(--h-s-4); }
.h-proj-form { padding: var(--h-s-5); margin: 0 0 var(--h-s-5); }
.h-proj-form:hover { transform: none; box-shadow: var(--h-shadow); }
.h-proj-form--idea { padding: var(--h-s-4) var(--h-s-5); }
.h-proj-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--h-s-3) var(--h-s-4); }
.h-proj-form__wide { grid-column: 1 / -1; }
.h-proj-form .h-label { display: flex; flex-direction: column; gap: var(--h-s-1); }
.h-proj-form .h-textarea { min-height: 72px; }
.h-proj-form__actions { display: flex; justify-content: flex-end; gap: var(--h-s-2); margin-top: var(--h-s-4); }
.h-proj-list { display: flex; flex-direction: column; gap: var(--h-s-3); }
.h-proj, .h-idea {
  background: var(--h-white);
  border: 1px solid var(--h-grey-10);
  border-radius: var(--h-radius);
  padding: var(--h-s-4) var(--h-s-5);
}
.h-proj--done { opacity: 0.6; }
.h-proj__head, .h-idea__head { display: flex; align-items: center; gap: var(--h-s-3); }
.h-proj__title {
  flex: 1; margin: 0;
  font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); color: var(--h-blue);
  letter-spacing: var(--h-tracking-tight); outline: none; border-radius: var(--h-radius-sm);
}
.h-proj [contenteditable="true"]:hover { background: var(--h-blue-10); }
.h-proj [contenteditable="true"]:focus { background: var(--h-white); box-shadow: 0 0 0 2px var(--h-cyan); }
.h-proj [contenteditable="true"]:empty::before { content: attr(data-placeholder); color: var(--h-grey-50); }
.h-proj__summary { margin: var(--h-s-2) 0 0; color: var(--h-ink); font-size: var(--h-fs-base); line-height: var(--h-lh-snug); outline: none; border-radius: var(--h-radius-sm); }
.h-proj__next { display: flex; gap: var(--h-s-3); align-items: baseline; margin: var(--h-s-3) 0 0; padding: var(--h-s-2) var(--h-s-3); background: var(--h-paper); border-left: 2px solid var(--h-cyan); }
.h-proj__label { font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); letter-spacing: var(--h-tracking-wide); text-transform: uppercase; color: var(--h-grey-50); flex: none; }
.h-proj__next-text { flex: 1; font-size: var(--h-fs-sm); color: var(--h-ink); outline: none; }
.h-proj__foot { display: flex; align-items: center; gap: var(--h-s-2); margin-top: var(--h-s-3); flex-wrap: wrap; }
.h-proj__spacer { flex: 1; }
.h-idea__toggle { flex: 1; text-align: left; cursor: pointer; display: block; }
.h-idea__title { font-size: var(--h-fs-base); font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-idea__toggle:hover .h-idea__title { text-decoration: underline; }
.h-idea__meta { margin-top: var(--h-s-1); }
.h-idea__body { margin-top: var(--h-s-3); border-top: 1px solid var(--h-grey-10); padding-top: var(--h-s-3); }
.h-idea__text { font-family: var(--h-font-sans); font-size: var(--h-fs-sm); white-space: pre-wrap; margin: 0; color: var(--h-ink); line-height: var(--h-lh-base); max-height: 360px; overflow: auto; }
.h-idea__notes { list-style: none; padding: 0; margin: var(--h-s-3) 0 0; display: flex; flex-direction: column; gap: var(--h-s-2); font-size: var(--h-fs-sm); }
.h-idea__notes li { padding: var(--h-s-2) var(--h-s-3); background: var(--h-paper); border-radius: var(--h-radius-sm); }
.h-idea__note-form { display: flex; gap: var(--h-s-2); margin-top: var(--h-s-3); }
.h-idea__note-form .h-input { flex: 1; }
.h-idea__actions { display: flex; gap: var(--h-s-2); flex-wrap: wrap; margin-top: var(--h-s-3); }
@media (max-width: 700px) { .h-proj-form__grid { grid-template-columns: 1fr; } }

/* Project card sections (04/09/2026): heading → Description → Next step → Notes */
.h-proj__section { margin-top: var(--h-s-4); }
.h-proj__section > .h-proj__label { display: block; margin: 0 0 var(--h-s-1); }
.h-proj__count { display: inline-block; margin-left: var(--h-s-1); padding: 0 var(--h-s-2); background: var(--h-blue-10); color: var(--h-blue); border-radius: var(--h-radius); font-size: var(--h-fs-xs); letter-spacing: 0; text-transform: none; }
.h-proj__next-text { display: block; margin: 0; padding: var(--h-s-2) var(--h-s-3); background: var(--h-paper); border-left: 2px solid var(--h-cyan); font-size: var(--h-fs-sm); border-radius: var(--h-radius-sm); }
.h-proj__notes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--h-s-2); font-size: var(--h-fs-sm); }
.h-proj__notes:empty { display: none; }
.h-proj__notes li { padding: var(--h-s-2) var(--h-s-3); background: var(--h-paper); border-radius: var(--h-radius-sm); }
.h-proj__note-form { display: flex; gap: var(--h-s-2); margin-top: var(--h-s-2); }
.h-proj__note-form .h-input { flex: 1; }
.h-proj__foot { margin-top: var(--h-s-4); }

/* ---------- Studio: compact cards + pop-up card (Trello-style) 04/09/2026 -- */
.h-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--h-s-3); }
.h-mini {
  background: var(--h-white); border: 1px solid var(--h-grey-10); border-radius: var(--h-radius);
  padding: var(--h-s-3) var(--h-s-4); cursor: pointer; display: flex; flex-direction: column; gap: var(--h-s-2);
  transition: box-shadow var(--h-duration) var(--h-ease), border-color var(--h-duration) var(--h-ease);
}
.h-mini:hover, .h-mini:focus-visible { box-shadow: var(--h-shadow); border-color: var(--h-blue-20); outline: none; }
.h-mini--done { opacity: 0.6; }
.h-mini__head { display: flex; align-items: flex-start; gap: var(--h-s-2); }
.h-mini__title { flex: 1; margin: 0; font-size: var(--h-fs-base); font-weight: var(--h-fw-bold); color: var(--h-blue); line-height: var(--h-lh-snug); letter-spacing: var(--h-tracking-tight); }
.h-mini__next { margin: 0; font-size: var(--h-fs-sm); color: var(--h-ink); line-height: var(--h-lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h-mini__foot { margin-top: auto; }

body.h-modal-open { overflow: hidden; }
.h-modal--card { width: min(920px, calc(100vw - var(--h-s-6))); padding: 0; }
.h-modal--card .h-modal-close { position: absolute; top: var(--h-s-3); right: var(--h-s-3); z-index: 1; }
.h-cardm { display: grid; grid-template-columns: 1fr 220px; }
.h-cardm__main { padding: var(--h-s-6); min-width: 0; }
.h-cardm__side { padding: var(--h-s-6) var(--h-s-5); background: var(--h-paper); border-left: 1px solid var(--h-grey-10); display: flex; flex-direction: column; gap: var(--h-s-2); }
.h-cardm__side .h-btn { justify-content: center; }
.h-cardm__owner { margin-top: var(--h-s-4); }
.h-cardm__side .h-label { display: flex; flex-direction: column; gap: var(--h-s-1); font-size: var(--h-fs-xs); }
.h-cardm__title { margin: 0 0 var(--h-s-1); font-size: var(--h-fs-2xl); font-weight: var(--h-fw-bold); color: var(--h-blue); letter-spacing: var(--h-tracking-tight); line-height: var(--h-lh-tight); outline: none; border-radius: var(--h-radius-sm); }
.h-cardm__section { margin-top: var(--h-s-6); }
.h-cardm__label { margin: 0 0 var(--h-s-2); font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); letter-spacing: var(--h-tracking-wide); text-transform: uppercase; color: var(--h-grey-70); }
.h-cardm__text { font-size: var(--h-fs-base); line-height: var(--h-lh-base); color: var(--h-ink); outline: none; border-radius: var(--h-radius-sm); padding: var(--h-s-2) var(--h-s-3); margin: 0 calc(-1 * var(--h-s-3)); }
.h-cardm__text--pre { white-space: pre-wrap; font-size: var(--h-fs-sm); }
.h-cardm__next { font-size: var(--h-fs-sm); padding: var(--h-s-2) var(--h-s-3); background: var(--h-paper); border-left: 2px solid var(--h-cyan); border-radius: var(--h-radius-sm); outline: none; }
.h-cardm [contenteditable="true"]:hover { background: var(--h-blue-10); }
.h-cardm [contenteditable="true"]:focus { background: var(--h-white); box-shadow: 0 0 0 2px var(--h-cyan); }
.h-cardm [contenteditable="true"]:empty::before { content: attr(data-placeholder); color: var(--h-grey-50); }
.h-cardm__note-form { display: flex; flex-direction: column; gap: var(--h-s-2); align-items: flex-end; margin-bottom: var(--h-s-3); }
.h-cardm__note-input { width: 100%; min-height: 56px; }
.h-cardm__notes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--h-s-2); font-size: var(--h-fs-sm); }
.h-cardm__notes li { padding: var(--h-s-2) var(--h-s-3); background: var(--h-paper); border-radius: var(--h-radius-sm); white-space: pre-wrap; }
.h-attach { list-style: none; padding: 0; margin: 0 0 var(--h-s-3); display: flex; flex-direction: column; gap: var(--h-s-2); }
.h-attach:empty { margin: 0; }
.h-attach__item { display: flex; gap: var(--h-s-3); align-items: center; }
.h-attach__thumb { width: 72px; height: 52px; flex: none; background: var(--h-grey-10); border-radius: var(--h-radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.h-attach__thumb img { width: 100%; height: 100%; object-fit: cover; }
.h-attach__ext { font-size: var(--h-fs-xs); font-weight: var(--h-fw-bold); color: var(--h-blue); letter-spacing: var(--h-tracking-wide); }
.h-attach__meta { min-width: 0; }
.h-attach__name { display: block; font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold); color: var(--h-blue); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-attach__name:hover { text-decoration: underline; }
.h-attach__add { cursor: pointer; }
@media (max-width: 760px) {
  .h-cardm { grid-template-columns: 1fr; }
  .h-cardm__side { border-left: 0; border-top: 1px solid var(--h-grey-10); }
  .h-cardm__main { padding: var(--h-s-5) var(--h-s-4); }
}

/* Tiles / List toggle for card grids (04/09/2026) */
.h-view-toggle { flex: none; }
.h-cards--list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--h-grey-10); border-radius: var(--h-radius); background: var(--h-white); }
.h-cards--list .h-mini { flex-direction: row; align-items: center; gap: var(--h-s-3); border: 0; border-bottom: 1px solid var(--h-grey-10); border-radius: 0; padding: var(--h-s-2) var(--h-s-4); }
.h-cards--list .h-mini:last-child { border-bottom: 0; }
.h-cards--list .h-mini:hover { box-shadow: none; background: var(--h-blue-10); }
.h-cards--list .h-mini__head { flex: 1; align-items: center; min-width: 0; }
.h-cards--list .h-mini__title { font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-cards--list .h-mini__next { display: none; }
.h-cards--list .h-mini__foot { margin: 0; flex: none; white-space: nowrap; }
@media (max-width: 640px) { .h-cards--list .h-mini__foot { display: none; } }

/* Studio: phone layout — sidebar collapses to a top bar with a menu button (04/09/2026) */
.h-sidebar__top { display: flex; align-items: center; justify-content: space-between; }
.h-sidebar__menu { display: none; color: var(--h-white); margin-right: var(--h-s-3); padding: var(--h-s-2); }
.h-sidebar__menu svg { width: 22px; height: 22px; }
.h-sidebar__drawer { display: contents; }
.h-due--over { color: var(--h-error-ink); font-weight: var(--h-fw-semibold); }
@media (max-width: 860px) {
  .h-sidebar__menu { display: inline-flex; }
  .h-sidebar__drawer { display: none; flex-direction: column; padding-bottom: var(--h-s-2); }
  .h-sidebar__drawer.is-open { display: flex; }
  .h-sidebar__user { border-top: 1px solid rgba(255,255,255,0.12); }
  .h-sidebar__brand { padding: var(--h-s-4) var(--h-s-5); }
}
.h-sidebar__menu:hover, .h-sidebar__menu[aria-expanded="true"] { background: rgba(255,255,255,0.12); color: var(--h-white); }

/* Quiet filter box — icon + underline, no bulk (04/09/2026) */
.h-filter { display: inline-flex; align-items: center; gap: var(--h-s-2); color: var(--h-grey-50); border-bottom: 1px solid var(--h-grey-30); padding: var(--h-s-1) 0; margin-right: var(--h-s-3); transition: border-color var(--h-duration) var(--h-ease); }
.h-filter:focus-within { border-bottom-color: var(--h-cyan); color: var(--h-blue); }
.h-filter svg { width: 15px; height: 15px; flex: none; }
.h-filter__input { border: 0; background: none; outline: none; font-family: var(--h-font-sans); font-size: var(--h-fs-sm); color: var(--h-ink); width: 140px; padding: 0; }
.h-filter__input::placeholder { color: var(--h-grey-50); }
.h-filter__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.h-cardm__note-editrow { display: flex; justify-content: flex-end; gap: var(--h-s-2); margin-top: var(--h-s-2); }
.h-cardm__notes li .h-meta a { color: var(--h-grey-50); }
.h-cardm__notes li .h-meta a:hover { color: var(--h-blue); }
@media (max-width: 640px) { .h-filter__input { width: 90px; } }
.h-mini[hidden] { display: none; }

/* List view: fixed right-hand columns so badges and dates line up (04/09/2026) */
.h-mini__badges { display: inline-flex; gap: var(--h-s-1); flex: none; }
.h-mini__date { display: none; }
.h-cards--list .h-mini__date { display: inline-block; width: 92px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.h-cards--list .h-mini__badges { width: 96px; justify-content: flex-end; }
.h-cards--list .h-mini__badges .h-badge { min-width: 72px; text-align: center; }
.h-cards--list .h-mini__foot { display: none; }
@media (max-width: 640px) { .h-cards--list .h-mini__date { display: none; } }
.h-ref { display: inline-block; margin-right: var(--h-s-2); font-family: var(--h-font-mono); font-size: var(--h-fs-xs); font-weight: var(--h-fw-regular); color: var(--h-grey-50); letter-spacing: 0; vertical-align: 1px; }

/* ---------- Calculator page pattern (Break Lease Fee etc.) 04/09/2026 ------- */
.h-calc { max-width: 860px; padding: var(--h-s-6); }
.h-calc:hover { transform: none; box-shadow: var(--h-shadow); }
.h-calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--h-s-4); }
.h-calc__grid .h-label { display: flex; flex-direction: column; gap: var(--h-s-1); }
.h-calc__actions { margin-top: var(--h-s-5); }
.h-calc__result { margin-top: var(--h-s-5); }
.h-calc__result[hidden], .h-calc .h-notice[hidden] { display: none; }
.h-calc .h-notice { margin-top: var(--h-s-4); }
.h-calc__big { font-size: var(--h-fs-4xl); font-weight: var(--h-fw-bold); color: var(--h-blue); letter-spacing: var(--h-tracking-tight); line-height: 1; margin: 0 0 var(--h-s-2); }
.h-calc__tiers { margin-top: var(--h-s-5); }
.h-calc__tiers tr.is-active td { background: var(--h-blue); color: var(--h-white); font-weight: var(--h-fw-semibold); }
.h-calc__notes { max-width: 860px; margin: var(--h-s-6) 0 0; padding-left: var(--h-s-5); line-height: var(--h-lh-base); }
.h-calc__notes li { margin-bottom: var(--h-s-2); }
.h-launch__logo--icon { color: var(--h-blue); background: var(--h-blue-10); }
.h-launch__logo--icon svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .h-calc__grid { grid-template-columns: 1fr; } }

/* ---------- Simple form card (Shout Out etc.) 05/09/2026 -------------------- */
.h-form-card { max-width: 620px; padding: var(--h-s-6); }
.h-form-card:hover { transform: none; box-shadow: var(--h-shadow); }
.h-form-card .h-label { display: flex; flex-direction: column; gap: var(--h-s-1); margin-bottom: var(--h-s-4); }
.h-form-card__counter { text-align: right; }
.h-form-card__check { display: flex; align-items: center; gap: var(--h-s-3); padding: var(--h-s-3) var(--h-s-4); background: var(--h-paper); border-radius: var(--h-radius); font-size: var(--h-fs-sm); color: var(--h-grey-70); cursor: pointer; margin-bottom: var(--h-s-5); }
.h-form-card__check input { width: 16px; height: 16px; flex: none; }
.h-form-card__actions { display: flex; justify-content: flex-start; margin-top: var(--h-s-5); }
.h-form-card__done { text-align: center; padding: var(--h-s-4) 0; }
.h-form-card__done-title { font-size: var(--h-fs-lg); font-weight: var(--h-fw-semibold); color: var(--h-blue); margin: 0 0 var(--h-s-1); }
.h-form-card__done .h-btn { margin-top: var(--h-s-5); }
.h-feed { max-width: 620px; margin-top: var(--h-s-8); }
.h-feed__item { background: var(--h-white); border: 1px solid var(--h-grey-10); border-left: 2px solid var(--h-cyan); border-radius: var(--h-radius); padding: var(--h-s-3) var(--h-s-4); margin-bottom: var(--h-s-2); }
.h-feed__to { margin: 0 0 var(--h-s-1); font-weight: var(--h-fw-bold); color: var(--h-blue); font-size: var(--h-fs-sm); }
.h-feed__msg { margin: 0 0 var(--h-s-2); font-size: var(--h-fs-sm); line-height: var(--h-lh-base); }

/* Notification counts — the red number ball (05/09/2026) */
.h-sidebar__badge--alert { background: var(--h-error); color: var(--h-white); border-radius: 50%; min-width: 20px; height: 20px; padding: 0 6px; }
.h-launch { position: relative; }
.h-launch__badge { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 50%; background: var(--h-error); color: var(--h-white); font-size: var(--h-fs-xs); font-weight: var(--h-fw-bold); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--h-paper); }
.h-feed--you { margin-top: 0; margin-bottom: var(--h-s-6); }
.h-feed__item--you { border-left-color: var(--h-blue); }
.h-form-card__check { margin-bottom: var(--h-s-3); }
.h-form-card__check + .h-form-card__check { margin-bottom: var(--h-s-5); }

/* ---------- Usage report: bar chart + ranked bars (05/09/2026) -------------- */
.h-chart { position: relative; padding: var(--h-s-5) var(--h-s-5) var(--h-s-4); }
.h-chart:hover { transform: none; box-shadow: var(--h-shadow); }
.h-chart__bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; border-bottom: 1px solid var(--h-grey-10); }
.h-chart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; position: relative; cursor: default; }
.h-chart__col:hover .h-chart__bar { background: var(--h-cyan); }
.h-chart__bar { height: var(--h, 0%); min-height: 2px; background: var(--h-blue); border-radius: 4px 4px 0 0; transition: background var(--h-duration) var(--h-ease); }
.h-chart__col--dim .h-chart__bar { background: var(--h-blue-20); }
.h-chart__x { position: absolute; top: 100%; left: 0; margin-top: var(--h-s-1); font-size: var(--h-fs-xs); color: var(--h-grey-50); white-space: nowrap; }
.h-chart__bars { margin-bottom: var(--h-s-5); }
.h-chart__tip { position: absolute; top: var(--h-s-2); left: var(--x, 50%); transform: translateX(-50%); background: var(--h-blue); color: var(--h-white); font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); padding: var(--h-s-1) var(--h-s-3); border-radius: var(--h-radius); white-space: nowrap; pointer-events: none; }
.h-chart__tip[hidden] { display: none; }
.h-delta--down { color: var(--h-error-ink); font-weight: var(--h-fw-semibold); }
.h-delta--up { color: var(--h-success-ink); font-weight: var(--h-fw-semibold); }
.h-usage-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--h-s-5); align-items: start; }
.h-table--tight th, .h-table--tight td { padding: var(--h-s-2) var(--h-s-3); }
.h-bars { list-style: none; margin: 0; padding: var(--h-s-2) var(--h-s-4); }
.h-bars__row { display: grid; grid-template-columns: 130px 1fr 40px 70px; align-items: center; gap: var(--h-s-3); padding: var(--h-s-2) 0; border-bottom: 1px solid var(--h-grey-10); font-size: var(--h-fs-sm); }
.h-bars__row:last-child { border-bottom: 0; }
.h-bars__label { font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-bars__track { height: 8px; background: var(--h-grey-10); border-radius: 4px; overflow: hidden; }
.h-bars__fill { display: block; height: 100%; width: var(--w, 0%); background: var(--h-blue); border-radius: 4px; }
.h-bars__val { text-align: right; }
.h-people-list { list-style: none; margin: 0; padding: var(--h-s-2) var(--h-s-4); display: flex; flex-direction: column; gap: var(--h-s-2); }
.h-mt-6 { margin-top: var(--h-s-6); }
.h-mt-7 { margin-top: var(--h-s-7); }
.h-mb-6 { margin-bottom: var(--h-s-6); }
@media (max-width: 900px) { .h-usage-grid { grid-template-columns: 1fr; } .h-bars__row { grid-template-columns: 110px 1fr 36px; } .h-bars__sub { display: none; } }
@media (max-width: 640px) {
  .h-chart__col:last-child .h-chart__x { display: none; }
  .h-table--tight th:nth-child(3), .h-table--tight td:nth-child(3), .h-table--tight th:nth-child(4), .h-table--tight td:nth-child(4) { display: none; }
  .h-user-cell__sub { display: none; }
}

/* Sidebar call-to-action under the wordmark ("Make It Better") 05/09/2026 */
.h-sidebar__cta { margin: 0 var(--h-s-4) var(--h-s-4); justify-content: center; gap: var(--h-s-2); font-weight: var(--h-fw-bold); letter-spacing: 0.02em; }
.h-sidebar__cta svg { width: 16px; height: 16px; }

/* ---------- Issues: stars, thread, mentions, sharing (05/09/2026) ---------- */
.h-stars { display: inline-flex; align-items: center; gap: 2px; }
.h-stars__star { display: inline-flex; width: 28px; height: 28px; color: var(--h-grey-30); cursor: default; }
.h-stars__star svg { width: 100%; height: 100%; fill: currentColor; }
.h-stars__star.is-on { color: var(--h-blue); }
.h-stars--edit .h-stars__star, .h-form-card .h-stars__star { cursor: pointer; }
.h-stars--edit .h-stars__star:hover, .h-form-card .h-stars__star:hover { color: var(--h-cyan); }
.h-stars__label { margin-left: var(--h-s-2); }
.h-stars--tiny { vertical-align: -3px; margin-right: var(--h-s-2); }
.h-stars--tiny .h-stars__star { width: 13px; height: 13px; }
.h-form-card--wide { max-width: 760px; }
.h-form-card .h-label > .h-segmented, .h-form-card .h-label > .h-stars, .h-form-card .h-label > .h-attach__add { align-self: flex-start; margin-top: var(--h-s-1); }
.h-segmented--form .h-segmented__option { cursor: pointer; }
.h-thread { list-style: none; margin: 0 0 var(--h-s-3); padding: 0; display: flex; flex-direction: column; gap: var(--h-s-3); }
.h-thread__item { display: flex; gap: var(--h-s-3); align-items: flex-start; }
.h-thread__avatar { width: 28px; height: 28px; font-size: 10px; flex: none; }
.h-thread__body { flex: 1; background: var(--h-paper); border-radius: var(--h-radius); padding: var(--h-s-2) var(--h-s-3); font-size: var(--h-fs-sm); }
.h-thread__item--me .h-thread__body { background: var(--h-blue-10); }
.h-thread__text { white-space: pre-wrap; line-height: var(--h-lh-base); margin-top: 2px; }
.h-mention-host { position: relative; }
.h-mention { position: absolute; left: 0; bottom: calc(100% - 2px); background: var(--h-white); border: 1px solid var(--h-grey-10); border-radius: var(--h-radius); box-shadow: var(--h-shadow); z-index: 2; min-width: 200px; overflow: hidden; }
.h-mention[hidden] { display: none; }
.h-mention__item { display: block; padding: var(--h-s-2) var(--h-s-3); font-size: var(--h-fs-sm); color: var(--h-blue); text-decoration: none; }
.h-mention__item:hover { background: var(--h-blue-10); }
.h-share { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.h-share__row { display: flex; align-items: center; gap: var(--h-s-2); font-size: var(--h-fs-xs); padding: 3px 0; cursor: pointer; color: var(--h-ink); }
.h-share__row input { width: 14px; height: 14px; }
.h-btn svg { width: 16px; height: 16px; flex: none; }
.h-btn { white-space: nowrap; }

/* Wordmark + extension lockup, per the official horizontal logo (05/09/2026):
   no divider, Light weight, cap height = wordmark cap height, same baseline,
   gap about half a cap height. */
.h-sidebar__brand-ext { border-left: 0; padding-left: 0; margin-left: 7px; font-weight: var(--h-fw-light); }
.h-sidebar__brand { gap: 0; }

/* Person chip for @mentions (05/09/2026): photo + name inside the text */
.h-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 2px; margin: 0 1px; background: var(--h-info-soft); color: var(--h-info-ink); border-radius: var(--h-radius); font-weight: var(--h-fw-semibold); font-size: 0.95em; line-height: 1.5; vertical-align: baseline; white-space: nowrap; }
.h-chip img, .h-chip i { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; }
.h-chip i { display: inline-flex; align-items: center; justify-content: center; background: var(--h-blue); color: var(--h-white); font-style: normal; font-size: 8px; font-weight: var(--h-fw-bold); }
.h-mention__item { display: flex; align-items: center; }
.h-mention__item .h-chip { background: transparent; color: var(--h-blue); padding-left: 0; }
.h-mention__item:hover .h-chip { color: var(--h-blue); }

/* Issues: sent page, similar list, timeline, phone-only camera (05/09/2026) */
.h-sent { text-align: left; }
.h-sent__num { margin: 0; font-family: var(--h-font-mono); font-size: var(--h-fs-sm); color: var(--h-grey-50); }
.h-sent__title { margin: var(--h-s-1) 0 var(--h-s-2); font-size: var(--h-fs-3xl); font-weight: var(--h-fw-bold); color: var(--h-blue); letter-spacing: var(--h-tracking-tight); line-height: var(--h-lh-tight); }
.h-sent__what { margin: 0 0 var(--h-s-5); color: var(--h-grey-70); }
.h-sent__steps { list-style: none; margin: 0 0 var(--h-s-6); padding: 0; display: flex; flex-direction: column; gap: var(--h-s-3); font-size: var(--h-fs-sm); }
.h-sent__steps li { display: flex; gap: var(--h-s-3); align-items: flex-start; line-height: var(--h-lh-snug); }
.h-sent__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--h-cyan); flex: none; margin-top: 5px; }
.h-similar { margin: calc(-1 * var(--h-s-3)) 0 var(--h-s-4); padding: var(--h-s-3) var(--h-s-4); background: var(--h-warning-soft); border-radius: var(--h-radius); }
.h-similar[hidden] { display: none; }
.h-similar__list { list-style: none; margin: var(--h-s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--h-s-1); }
.h-similar__item { display: flex; align-items: center; gap: var(--h-s-2); text-decoration: none; color: var(--h-blue); font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold); }
.h-similar__item:hover .h-similar__title { text-decoration: underline; }
.h-similar__title { flex: 1; }
.h-timeline { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--h-s-6); }
.h-timeline li { display: flex; gap: var(--h-s-2); align-items: flex-start; font-size: var(--h-fs-sm); position: relative; }
.h-timeline li div { display: flex; flex-direction: column; line-height: 1.3; }
.h-timeline li strong { color: var(--h-grey-50); font-weight: var(--h-fw-semibold); }
.h-timeline li.is-done strong { color: var(--h-blue); }
.h-timeline__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--h-grey-30); background: var(--h-white); flex: none; margin-top: 3px; }
.h-timeline li.is-done .h-timeline__dot { background: var(--h-blue); border-color: var(--h-blue); }
.h-timeline li.is-parked .h-timeline__dot { background: var(--h-warning); border-color: var(--h-warning); }
.h-only-phone { display: none; }
@media (max-width: 640px) { .h-only-phone { display: inline-flex; } .h-timeline { flex-direction: column; gap: var(--h-s-3); } }

/* Issues: reactions, combine search, sticky reply on phone (05/09/2026) */
.h-react { display: flex; align-items: center; gap: var(--h-s-1); margin-top: var(--h-s-2); flex-wrap: wrap; }
.h-react__list { display: inline-flex; gap: var(--h-s-1); flex-wrap: wrap; }
.h-react__pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border: 1px solid var(--h-grey-10); border-radius: var(--h-radius); background: var(--h-white); font-size: var(--h-fs-xs); color: var(--h-ink); text-decoration: none; line-height: 1.6; }
.h-react__pill.is-mine { border-color: var(--h-cyan); background: var(--h-info-soft); color: var(--h-info-ink); }
.h-react__add { position: relative; }
.h-react__plus { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; border: 1px dashed var(--h-grey-30); border-radius: var(--h-radius); color: var(--h-grey-50); text-decoration: none; font-size: var(--h-fs-sm); line-height: 1; }
.h-react__plus:hover { color: var(--h-blue); border-color: var(--h-blue); }
.h-react__picker { position: absolute; left: 0; top: 100%; margin-top: 4px; display: flex; gap: 2px; padding: 4px; background: var(--h-white); border: 1px solid var(--h-grey-10); border-radius: var(--h-radius); box-shadow: var(--h-shadow); z-index: 3; }
.h-react__picker[hidden] { display: none; }
.h-react__picker a { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: var(--h-radius); text-decoration: none; font-size: 18px; }
.h-react__picker a:hover { background: var(--h-blue-10); }
.h-mention--down { top: calc(100% + 2px); bottom: auto; width: 100%; }
@media (max-width: 760px) {
  .h-cardm__note-form { position: sticky; bottom: 0; background: var(--h-white); padding: var(--h-s-3) 0 var(--h-s-2); margin-top: var(--h-s-3); border-top: 1px solid var(--h-grey-10); z-index: 2; }
}

/* Home v2 (05/09/2026): waiting-for-you, Today strip, external tiles */
.h-waiting { display: flex; flex-wrap: wrap; gap: var(--h-s-2); margin: calc(-1 * var(--h-s-2)) 0 var(--h-s-6); }
.h-waiting__item { display: inline-flex; align-items: center; gap: var(--h-s-2); padding: var(--h-s-2) var(--h-s-4) var(--h-s-2) var(--h-s-2); background: var(--h-white); border: 1px solid var(--h-grey-10); border-radius: var(--h-radius); color: var(--h-blue); font-weight: var(--h-fw-semibold); font-size: var(--h-fs-sm); text-decoration: none; }
.h-waiting__item:hover { border-color: var(--h-blue-20); box-shadow: var(--h-shadow); }
.h-waiting__count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 50%; background: var(--h-error); color: var(--h-white); font-size: var(--h-fs-xs); font-weight: var(--h-fw-bold); display: inline-flex; align-items: center; justify-content: center; }
.h-today { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--h-s-3); }
.h-today__tile { display: flex; flex-direction: column; gap: 2px; padding: var(--h-s-3) var(--h-s-4); background: var(--h-white); border: 1px solid var(--h-grey-10); border-left: 3px solid var(--h-blue); border-radius: var(--h-radius); text-decoration: none; color: var(--h-ink); min-height: 84px; transition: box-shadow var(--h-duration) var(--h-ease); }
.h-today__tile:hover { box-shadow: var(--h-shadow); }
.h-today__tile--cyan { border-left-color: var(--h-cyan); }
.h-today__tile--warn { border-left-color: var(--h-warning); }
.h-today__label { font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); letter-spacing: var(--h-tracking-wide); text-transform: uppercase; color: var(--h-grey-50); }
.h-today__value { font-size: var(--h-fs-xl); font-weight: var(--h-fw-bold); color: var(--h-blue); line-height: 1.15; letter-spacing: var(--h-tracking-tight); }
.h-today__sub { font-size: var(--h-fs-xs); color: var(--h-grey-70); line-height: 1.3; }
.h-launch__ext, .h-sidebar__ext { margin-left: auto; opacity: 0.45; }
.h-launch__ext svg, .h-sidebar__ext svg { width: 13px; height: 13px; }
.h-sidebar__link--ext .h-sidebar__ext { display: inline-flex; }

/* Home: quiet zero tiles, birthday tile, shortcuts (05/09/2026) */
.h-today__tile--quiet { border-left-color: var(--h-grey-30); background: var(--h-paper); }
.h-today__tile--quiet .h-today__value { color: var(--h-grey-50); font-size: var(--h-fs-lg); font-weight: var(--h-fw-semibold); }
.h-today__tile--quiet .h-today__sub { color: var(--h-grey-50); }
.h-today__tile--big { grid-column: span 2; background: var(--h-blue); border-color: var(--h-blue); }
.h-today__tile--big .h-today__label { color: var(--h-cyan); }
.h-today__tile--big .h-today__value { color: var(--h-white); font-size: var(--h-fs-2xl); }
.h-today__tile--big .h-today__sub { color: rgba(255,255,255,0.75); }
.h-launch-grid--shortcuts { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.h-launch--shortcut { border-color: var(--h-blue-20); background: var(--h-blue-10); }
.h-launch--shortcut .h-launch__logo--icon { background: var(--h-white); }

/* Page-lead headline: brand mixed-weight (Light + Bold on the key word) at a
   page size rather than the 64px hero. 05/09/2026 */
.h-display--page { font-size: var(--h-fs-4xl); margin-bottom: var(--h-s-5); }
.h-display strong { font-weight: var(--h-fw-bold); }
@media (max-width: 640px) { .h-display--page { font-size: var(--h-fs-3xl); } }
.h-home-section__title .h-live-flag { text-transform: none; letter-spacing: 0; font-weight: var(--h-fw-regular); margin-left: var(--h-s-2); }

/* Date calculator bits (05/09/2026) */
.h-calc__check { margin: var(--h-s-4) 0 0; }
.h-calc__alts { margin: var(--h-s-4) 0 var(--h-s-3); }
.h-calc__alt { font-size: var(--h-fs-lg); font-weight: var(--h-fw-semibold); color: var(--h-blue); margin: 0; }
.h-calc__presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--h-s-2); margin-top: var(--h-s-4); }
.h-calc + .h-calc { margin-top: var(--h-s-4); }

/* ---------- Drop zone (file upload) 05/09/2026 --------------------------- */
.h-drop {
  display: block;
  border: 2px dashed var(--h-border);
  border-radius: var(--h-radius);
  padding: var(--h-s-8) var(--h-s-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--h-duration) var(--h-ease), background var(--h-duration) var(--h-ease);
}
.h-drop:hover, .h-drop.is-drag { border-color: var(--h-blue); background: var(--h-grey-10); }
.h-drop input[type="file"] { display: none; }
.h-drop__icon { color: var(--h-grey-50); margin-bottom: var(--h-s-3); }
.h-drop__icon svg { width: 32px; height: 32px; }
.h-drop__title { font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-drop__sub { color: var(--h-grey-50); font-size: var(--h-fs-sm); margin-top: var(--h-s-1); }

/* ---------- File list (selected before upload) --------------------------- */
.h-filelist { margin-top: var(--h-s-5); }
.h-filelist:empty { display: none; }
.h-filelist__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--h-s-2) 0; border-top: 1px solid var(--h-border);
  font-size: var(--h-fs-sm); color: var(--h-grey-70);
}
.h-filelist__row:first-child { border-top: 0; }
.h-filelist__row a { color: var(--h-grey-50); text-decoration: none; }
.h-filelist__row a:hover { color: var(--h-error); }

/* ---------- Progress bar --------------------------------------------------- */
.h-progress { margin-top: var(--h-s-5); display: none; }
.h-progress.show { display: block; }
.h-progress__label { font-size: var(--h-fs-sm); color: var(--h-grey-50); margin-bottom: var(--h-s-2); }
.h-progress__track { background: var(--h-grey-10); border-radius: var(--h-radius); height: 8px; overflow: hidden; }
.h-progress__bar { background: var(--h-blue); height: 100%; width: 0%; transition: width var(--h-duration) var(--h-ease); border-radius: var(--h-radius); }
.h-progress__bar.is-indeterminate { width: 40%; animation: h-progress-indeterminate 1.1s ease-in-out infinite; }
@keyframes h-progress-indeterminate {
  0%   { margin-left: 0%; }
  50%  { margin-left: 60%; }
  100% { margin-left: 0%; }
}

/* ---------- Result row list (per-item outcome) ---------------------------- */
.h-resultlist__row {
  display: flex; align-items: center; gap: var(--h-s-2); padding: var(--h-s-2) 0;
  border-top: 1px solid var(--h-border); font-size: var(--h-fs-sm);
}
.h-resultlist__row:first-child { border-top: 0; }

/* ---------- Staff Directory (team cards) 05/09/2026 ------------------------ */
.h-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--h-s-5);
}
.h-team-card {
  background: var(--h-white);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  padding: var(--h-s-5);
  transition: box-shadow var(--h-duration) var(--h-ease), transform var(--h-duration) var(--h-ease);
}
.h-team-card:hover { box-shadow: var(--h-shadow-lg); transform: translateY(-2px); }
.h-team-card__top { display: flex; align-items: center; gap: var(--h-s-4); margin-bottom: var(--h-s-4); }
.h-team-card__photo {
  width: 64px; height: 64px; flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--h-blue);
  color: var(--h-white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--h-fs-xl);
  font-weight: var(--h-fw-bold);
}
.h-team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.h-team-card__name { margin: 0; font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); color: var(--h-blue); letter-spacing: var(--h-tracking-tight); line-height: var(--h-lh-tight); }
.h-team-card__role { margin: 2px 0 0; font-size: var(--h-fs-sm); color: var(--h-grey-50); }
.h-team-card__contact { display: flex; flex-direction: column; gap: var(--h-s-2); }
.h-team-card__link {
  display: flex; align-items: center; gap: var(--h-s-2);
  font-size: var(--h-fs-sm); color: var(--h-ink);
  text-decoration: none;
}
.h-team-card__link:hover { color: var(--h-blue); }
.h-team-card__link svg { width: 15px; height: 15px; flex: none; color: var(--h-grey-50); }
.h-team-card__link:hover svg { color: var(--h-blue); }
.h-team-card__tag { margin-left: auto; font-size: var(--h-fs-xs); color: var(--h-grey-50); text-transform: uppercase; letter-spacing: var(--h-tracking-wide); }
.h-team-card__bio { margin: var(--h-s-4) 0 0; padding-top: var(--h-s-4); border-top: 1px solid var(--h-border); font-size: var(--h-fs-sm); color: var(--h-grey-70); line-height: var(--h-lh-base); }

/* Edit mode: same card shell, form fields instead of static text */
.h-team-edit-card { display: flex; gap: var(--h-s-5); align-items: flex-start; }
.h-team-edit-card--archived { opacity: 0.55; }
.h-team-edit-photo { display: flex; flex-direction: column; align-items: center; gap: var(--h-s-2); flex: none; width: 96px; }
.h-team-edit-photo__img { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: var(--h-blue); color: var(--h-white); display: flex; align-items: center; justify-content: center; font-size: var(--h-fs-xl); font-weight: var(--h-fw-bold); }
.h-team-edit-photo__img img { width: 100%; height: 100%; object-fit: cover; }
.h-team-edit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--h-s-3) var(--h-s-4); flex: 1; }
.h-team-edit-fields .h-label { display: flex; flex-direction: column; gap: var(--h-s-1); font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); color: var(--h-grey-70); }
.h-team-edit-fields--bio, .h-team-edit-fields__actions { grid-column: 1 / -1; }
.h-team-edit-actions { display: flex; flex-direction: column; gap: var(--h-s-2); flex: none; }

/* ---------- Birthday splash -------------------------------------------------
   A once-a-day "moment", deliberately its own family rather than a reuse of
   .h-modal (a white card for editing things). Full-bleed navy scrim, a
   cyan-ringed photo circle, mixed-weight display headline.
   Markup: .h-splash-backdrop > .h-splash > .h-splash__photo, __eyebrow,
   __title (with <strong> for the name), __sub, .h-btn.h-btn-accent. */
.h-splash-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 18, 51, 0.82);
  z-index: var(--h-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--h-s-5);
}
.h-splash {
  width: min(440px, 100%);
  background: var(--h-dark-raise);
  border: 1px solid var(--h-dark-line);
  border-radius: var(--h-radius-lg);
  padding: var(--h-s-8) var(--h-s-6) var(--h-s-6);
  text-align: center;
  box-shadow: var(--h-shadow-lg);
}
.h-splash__photo {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--h-s-5);
  border-radius: 50%;
  border: 2px solid var(--h-cyan);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--h-blue);
  color: var(--h-cyan);
}
.h-splash__photo img { width: 100%; height: 100%; object-fit: cover; }
.h-splash__photo svg { width: 40px; height: 40px; }
.h-splash__eyebrow {
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  color: var(--h-cyan);
  margin: 0 0 var(--h-s-2);
}
.h-splash__title {
  font-family: var(--h-font-display);
  font-weight: var(--h-fw-light);
  font-size: var(--h-fs-3xl);
  line-height: var(--h-lh-tight);
  letter-spacing: var(--h-tracking-tight);
  color: var(--h-white);
  margin: 0 0 var(--h-s-3);
}
.h-splash__title strong { font-weight: var(--h-fw-bold); color: var(--h-cyan); }
.h-splash__sub {
  font-size: var(--h-fs-base);
  color: var(--h-dark-muted);
  line-height: var(--h-lh-base);
  margin: 0 0 var(--h-s-6);
}
.h-splash__action { min-width: 140px; }
.h-splash__actions { display: flex; gap: var(--h-s-2); justify-content: center; }

/* Quiet 7-day heads-up banner — sits above page content, dismissible for the
   day. Lower key than the splash: paper background, cyan rule, no scrim. */
.h-bday-banner {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  padding: var(--h-s-3) var(--h-s-8);
  background: var(--h-info-soft);
  border-bottom: 1px solid var(--h-grey-10);
  border-left: 3px solid var(--h-cyan);
  font-size: var(--h-fs-sm);
  color: var(--h-ink);
}
.h-bday-banner svg { width: 18px; height: 18px; flex: none; color: var(--h-blue); }
.h-bday-banner strong { font-weight: var(--h-fw-bold); }
.h-bday-banner__dismiss {
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--h-grey-50);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--h-radius);
}
.h-bday-banner__dismiss:hover { background: var(--h-grey-10); color: var(--h-charcoal); }

/* Ghost button on the dark splash card needs its own contrast — the global
   .h-btn-ghost is navy text for light surfaces and disappears on navy. */
.h-splash .h-btn-ghost {
  color: var(--h-dark-muted);
  border-color: var(--h-dark-line);
}
.h-splash .h-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--h-white);
}

/* Cake icon inline with the recipient name on the public birthday wall. */
.h-feed__to svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--h-cyan); }

/* ---------- Meeting Room ----------------------------------------------------
   Free/busy hero panel + a week of grouped bookings. Reuses .h-badge for the
   "Now" tag rather than a bespoke one. */
.h-mr-status {
  border-radius: var(--h-radius-lg);
  padding: var(--h-s-6) var(--h-s-6) var(--h-s-5);
  color: var(--h-white);
  margin-bottom: var(--h-s-6);
}
.h-mr-status--free { background: var(--h-success); }
.h-mr-status--busy { background: var(--h-error); }
.h-mr-status__label {
  display: flex;
  align-items: center;
  gap: var(--h-s-2);
  font-size: var(--h-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-wide);
  opacity: 0.85;
  margin: 0 0 var(--h-s-2);
}
.h-mr-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--h-white); box-shadow: 0 0 0 4px rgba(255,255,255,0.25); }
.h-mr-status__headline { font-size: var(--h-fs-2xl); font-weight: var(--h-fw-bold); margin: 0 0 var(--h-s-1); line-height: var(--h-lh-tight); }
.h-mr-status__detail { font-size: var(--h-fs-base); opacity: 0.95; margin: 0; }

.h-mr-day { margin-bottom: var(--h-s-5); }
.h-mr-day__title { font-size: var(--h-fs-xs); text-transform: uppercase; letter-spacing: var(--h-tracking-wide); color: var(--h-grey-50); font-weight: var(--h-fw-semibold); margin: 0 0 var(--h-s-2); }
.h-mr-events { border: var(--h-border); border-radius: var(--h-radius); overflow: hidden; background: var(--h-white); }
.h-mr-event { display: flex; align-items: center; gap: var(--h-s-3); padding: var(--h-s-3) var(--h-s-4); border-bottom: 1px solid var(--h-grey-10); }
.h-mr-event:last-child { border-bottom: none; }
.h-mr-event--now { background: var(--h-error-soft); }
.h-mr-event__time { flex: 0 0 130px; font-variant-numeric: tabular-nums; color: var(--h-blue); font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold); }
.h-mr-event__summary { flex: 1; color: var(--h-grey-70); font-size: var(--h-fs-sm); }

/* Trailing de-emphasised note inside a bold .h-label, e.g. "— optional". */
.h-label__note { font-weight: var(--h-fw-regular); }
/* Chrome's date field is 2px taller than a text field with the same padding,
   which is enough to break a row of inputs. Pin the line box and they match. */
.h-input[type="date"], .h-input[type="time"], .h-input[type="month"] { line-height: 1; }


/* Narrow a standalone .h-input that would otherwise stretch full-width
   inside a wide card (a date field sitting on its own, not in a grid). */
.h-input--narrow { max-width: 220px; }

/* ---------- Leave -----------------------------------------------------------
   Request form, this-year chips, the team month grid and the timeline.
   Encoding shared by grid + timeline + legend: cyan = annual/LSL/neutral
   leave, amber = sick, navy = leader away, mid-grey dashed = pending. */
.h-lv-form { padding: var(--h-s-6); margin-bottom: var(--h-s-6); }
.h-lv-form:hover { transform: none; box-shadow: var(--h-shadow); }
.h-lv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--h-s-4); }
.h-lv-grid .h-label { display: flex; flex-direction: column; gap: var(--h-s-1); margin: 0; }
.h-lv-grid--full { grid-column: 1 / -1; }
.h-lv-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.h-lv-calc { display: flex; flex-wrap: wrap; gap: var(--h-s-3); margin-top: var(--h-s-4); }
.h-lv-calc__item { flex: 1 1 140px; background: var(--h-paper); border-radius: var(--h-radius); padding: var(--h-s-3) var(--h-s-4); }
.h-lv-calc__label { display: block; font-size: var(--h-fs-xs); text-transform: uppercase; letter-spacing: var(--h-tracking-wide); color: var(--h-grey-50); }
.h-lv-calc__value { display: block; font-size: var(--h-fs-xl); font-weight: var(--h-fw-bold); color: var(--h-blue); line-height: var(--h-lh-tight); margin-top: 2px; }
.h-lv-calc__sub { display: block; font-size: var(--h-fs-xs); color: var(--h-grey-50); margin-top: 2px; }
.h-lv-form .h-notice { margin-top: var(--h-s-4); }
.h-lv-form .h-notice[hidden], .h-lv-calc[hidden] { display: none; }

.h-lv-year { display: flex; flex-wrap: wrap; gap: var(--h-s-2); margin: var(--h-s-2) 0 var(--h-s-5); }
.h-lv-year__chip { background: var(--h-white); border: var(--h-border); border-radius: var(--h-radius); padding: var(--h-s-2) var(--h-s-3); font-size: var(--h-fs-sm); color: var(--h-grey-70); }
.h-lv-year__chip strong { color: var(--h-blue); }

.h-lv-tablewrap { overflow-x: auto; border: var(--h-border); border-radius: var(--h-radius); background: var(--h-white); }
.h-lv-tablewrap .h-table th { white-space: nowrap; }
.h-lv-notes { color: var(--h-grey-50); font-size: var(--h-fs-xs); max-width: 260px; }
.h-lv-actions { white-space: nowrap; text-align: right; }
.h-lv-actions form { margin: 0; display: inline-flex; gap: var(--h-s-2); align-items: center; vertical-align: middle; }
.h-lv-actions form + form { margin-left: var(--h-s-2); }
.h-lv-days-input { width: 64px; text-align: center; padding: var(--h-s-2); font-size: var(--h-fs-sm); }
.h-lv-reason { width: 180px; padding: var(--h-s-2) var(--h-s-3); font-size: var(--h-fs-sm); }
.h-lv-coverage { display: flex; flex-wrap: wrap; gap: 3px; max-width: 260px; }
.h-lv-coverage .h-badge { cursor: default; }

.h-lv-sectionhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--h-s-4); flex-wrap: wrap; margin-bottom: var(--h-s-3); }

/* Month grid */
.h-cal__head { display: flex; align-items: center; gap: var(--h-s-2); margin-bottom: var(--h-s-3); }
.h-cal__title { font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); color: var(--h-blue); margin: 0 var(--h-s-2); min-width: 170px; text-align: center; }
.h-cal__legend { display: flex; flex-wrap: wrap; gap: var(--h-s-4); font-size: var(--h-fs-xs); color: var(--h-grey-50); margin-bottom: var(--h-s-3); }
.h-cal__leg { display: inline-flex; align-items: center; gap: 5px; }
.h-cal__swatch { width: 12px; height: 12px; border-radius: var(--h-radius-sm); display: inline-block; }
.h-cal__swatch--annual, .h-cal__swatch--leave { background: var(--h-cyan); }
.h-cal__swatch--sick { background: var(--h-warning); }
.h-cal__swatch--away { background: var(--h-blue); }
.h-cal__swatch--pending { background: var(--h-grey-30); outline: 1px dashed var(--h-grey-50); outline-offset: -1px; }
.h-cal__swatch--ph { background: var(--h-blue-10); border: 1px solid var(--h-blue-20); }
.h-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--h-white); border: var(--h-border); border-radius: var(--h-radius); overflow: hidden; }
.h-cal__dow { background: var(--h-blue-10); color: var(--h-blue); font-size: var(--h-fs-xs); font-weight: var(--h-fw-bold); text-transform: uppercase; letter-spacing: var(--h-tracking-wide); padding: var(--h-s-2); text-align: center; border-bottom: var(--h-border); }
.h-cal__day { min-height: 92px; padding: var(--h-s-1) var(--h-s-1) var(--h-s-1); border-right: 1px solid var(--h-grey-10); border-bottom: 1px solid var(--h-grey-10); display: flex; flex-direction: column; gap: 2px; position: relative; }
.h-cal__day:nth-child(7n) { border-right: 0; }
.h-cal__day--other { background: var(--h-paper); }
.h-cal__day--other .h-cal__num { color: var(--h-grey-30); }
.h-cal__day--weekend { background: var(--h-paper); }
.h-cal__day--ph { background: var(--h-blue-10); }
.h-cal__day--today { box-shadow: inset 0 0 0 2px var(--h-cyan); }
.h-cal__num { font-size: var(--h-fs-xs); font-weight: var(--h-fw-bold); color: var(--h-ink); padding: 1px 4px; align-self: flex-start; }
.h-cal__day--today .h-cal__num { background: var(--h-cyan); color: var(--h-white); border-radius: var(--h-radius-sm); }
.h-cal__ph { position: absolute; top: 4px; right: 4px; font-size: 9px; font-weight: var(--h-fw-bold); letter-spacing: var(--h-tracking-wide); color: var(--h-info-ink); text-transform: uppercase; }
.h-cal__chip { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; line-height: 1.2; color: var(--h-white); padding: 2px 5px; border-radius: var(--h-radius-sm); white-space: nowrap; overflow: hidden; cursor: default; }
.h-cal__chip > span { overflow: hidden; text-overflow: ellipsis; }
.h-cal__chip img, .h-cal__chip i { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex: none; }
.h-cal__chip i { display: inline-flex; align-items: center; justify-content: center; background: var(--h-blue); color: var(--h-white); font-style: normal; font-size: 7px; font-weight: var(--h-fw-bold); }
.h-cal__chip--pending i { background: var(--h-blue); }
.h-cal__chip--annual, .h-cal__chip--long_service, .h-cal__chip--leave { background: var(--h-cyan); }
.h-cal__chip--sick { background: var(--h-warning); color: var(--h-charcoal); }
.h-cal__chip--away { background: var(--h-blue); }
.h-cal__chip--pending { background: var(--h-grey-30); color: var(--h-blue); outline: 1px dashed rgba(0, 31, 73, .4); outline-offset: -1px; }
.h-cal__more { font-size: 11px; color: var(--h-grey-50); padding-left: 4px; }
@media (max-width: 720px) { .h-cal__day { min-height: 64px; } .h-cal__chip { font-size: 10px; padding: 2px 3px; } .h-cal__chip img, .h-cal__chip i { width: 14px; height: 14px; } }

/* Timeline (next 6 months) */
.h-tl { background: var(--h-white); border: var(--h-border); border-radius: var(--h-radius); padding: var(--h-s-4); overflow-x: auto; }
.h-tl__axis { position: relative; height: 18px; min-width: 760px; border-bottom: var(--h-border); margin-bottom: var(--h-s-2); }
.h-tl__month { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--h-fs-xs); color: var(--h-grey-50); white-space: nowrap; }
.h-tl__row { display: flex; align-items: center; gap: var(--h-s-3); margin: var(--h-s-1) 0; min-width: 760px; }
.h-tl__name { width: 120px; flex: none; font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-tl__track { flex: 1; height: 22px; position: relative; background: var(--h-paper); border-radius: var(--h-radius-sm); }
.h-tl__bar { position: absolute; top: 0; bottom: 0; border-radius: var(--h-radius-sm); font-size: 11px; color: var(--h-white); padding: 0 6px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.h-tl__bar--annual, .h-tl__bar--long_service, .h-tl__bar--leave { background: var(--h-cyan); }
.h-tl__bar--sick { background: var(--h-warning); color: var(--h-charcoal); }
.h-tl__bar--away { background: var(--h-blue); }
.h-tl__bar--pending { opacity: .6; outline: 1px dashed rgba(0, 31, 73, .5); outline-offset: -1px; }
.h-tl__today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--h-error); pointer-events: none; }
.h-lv-view[hidden] { display: none; }

/* Working days (patterns) */
.h-wd-check { display: inline-flex; cursor: pointer; margin: 0; }
.h-wd-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.h-wd-box { width: 22px; height: 22px; border: 1.5px solid var(--h-grey-30); border-radius: var(--h-radius); display: inline-block; position: relative; transition: all var(--h-duration) var(--h-ease); }
.h-wd-check input:checked + .h-wd-box { background: var(--h-cyan); border-color: var(--h-cyan); }
.h-wd-check input:checked + .h-wd-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--h-white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.h-wd-check input:focus-visible + .h-wd-box { box-shadow: var(--h-focus-glow); }
.h-wd-col { text-align: center; width: 56px; }
@media (max-width: 640px) { .h-lv-grid, .h-lv-grid--3 { grid-template-columns: 1fr; } }

/* Pending leave request card (approvals page) */
.h-lv-req { display: flex; gap: var(--h-s-5); align-items: flex-start; padding: var(--h-s-5); margin-bottom: var(--h-s-3); }
.h-lv-req:hover { transform: none; box-shadow: var(--h-shadow); }
.h-lv-req__main { flex: 1; min-width: 0; }
.h-lv-req__name { margin: 0; font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); color: var(--h-blue); }
.h-lv-req__meta { margin: 2px 0 var(--h-s-1); font-size: var(--h-fs-sm); color: var(--h-grey-70); }
.h-lv-req .h-lv-coverage { margin-top: var(--h-s-2); max-width: none; }
.h-lv-req__notes { margin-top: var(--h-s-3); background: var(--h-paper); border-left: 3px solid var(--h-cyan); border-radius: var(--h-radius); padding: var(--h-s-3) var(--h-s-4); font-size: var(--h-fs-sm); color: var(--h-grey-70); line-height: var(--h-lh-base); white-space: pre-wrap; }
.h-lv-req__actions { display: flex; flex-direction: column; gap: var(--h-s-2); flex: none; align-items: flex-end; }
.h-lv-req__actions form { display: inline-flex; gap: var(--h-s-2); align-items: center; margin: 0; }
.h-lv-req__days { display: inline-flex; align-items: center; gap: var(--h-s-2); font-size: var(--h-fs-xs); color: var(--h-grey-50); }
@media (max-width: 720px) { .h-lv-req { flex-direction: column; } .h-lv-req__actions { align-items: stretch; } }

/* Studio sign-in card: the official Harcourts Studio lockup, one line, one button. */
.h-login-card__lockup { display: block; height: 40px; width: auto; margin: var(--h-s-2) auto var(--h-s-5); }

/* Users page: one column grid shared by every department table, so the
   toggles line up down the whole page. */
.h-table--users { table-layout: fixed; }
.h-table--users th { white-space: nowrap; }
.h-table--users__name { width: 27%; }
.h-table--users__dept { width: 20%; }
.h-table--users__act { width: 12%; }
.h-table--users td:nth-child(6) { white-space: nowrap; }
.h-table--users .h-select { width: 100%; }
.h-table--users td:last-child { text-align: right; }
.h-table--users td:last-child form { display: inline; }
.h-table--users .h-user-cell__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Marketing Budget ------------------------------------------------
   A ledger page where the loudest thing is the deadline, not the balance:
   under use-it-or-lose-it the date is what costs money. */
.h-mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--h-s-4); margin-bottom: var(--h-s-5); align-items: start; }
.h-mk-grid--2 { grid-template-columns: 1fr 1fr; }
.h-mk-col { display: flex; flex-direction: column; gap: var(--h-s-4); }
.h-mk-form { margin-bottom: var(--h-s-5); }
.h-mk-agent .h-stat__label { margin-bottom: var(--h-s-3); }
.h-mk-agent .h-mk-table { margin-top: var(--h-s-4); }
.h-mk-rules { margin: 0; padding-left: var(--h-s-4); }
.h-mk-cats { margin-top: 0; }
@media (max-width: 860px) { .h-mk-grid--2 { grid-template-columns: 1fr; } }
.h-mk-agent { padding: var(--h-s-5); }
.h-mk-agent:hover { transform: none; box-shadow: var(--h-shadow); }
.h-mk-agent__head { display: flex; align-items: center; gap: var(--h-s-3); margin-bottom: var(--h-s-4); }
.h-mk-agent__photo { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--h-blue); color: var(--h-white); display: flex; align-items: center; justify-content: center; font-weight: var(--h-fw-bold); font-size: var(--h-fs-sm); flex: none; }
.h-mk-agent__photo img { width: 100%; height: 100%; object-fit: cover; }
.h-mk-agent__name { margin: 0; font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); color: var(--h-blue); }
.h-mk-agent__sub { margin: 0; font-size: var(--h-fs-xs); color: var(--h-grey-50); }
.h-mk-balance { display: flex; align-items: baseline; gap: var(--h-s-3); flex-wrap: wrap; }
.h-mk-balance__amt { font-size: var(--h-fs-4xl); font-weight: var(--h-fw-bold); color: var(--h-blue); line-height: 1; letter-spacing: var(--h-tracking-tight); font-variant-numeric: tabular-nums; }
.h-mk-balance__sub { font-size: var(--h-fs-sm); color: var(--h-grey-50); }
.h-mk-deadline { margin-top: var(--h-s-4); border-left: 3px solid var(--h-cyan); background: var(--h-paper); border-radius: var(--h-radius); padding: var(--h-s-3) var(--h-s-4); }
.h-mk-deadline--soon { border-left-color: var(--h-warning); background: var(--h-warning-soft); }
.h-mk-deadline--none { border-left-color: var(--h-grey-30); }
.h-mk-deadline__lead { font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); color: var(--h-blue); letter-spacing: var(--h-tracking-tight); }
.h-mk-deadline--none .h-mk-deadline__lead { font-size: var(--h-fs-base); font-weight: var(--h-fw-regular); color: var(--h-grey-70); }
.h-mk-deadline__note { font-size: var(--h-fs-xs); color: var(--h-grey-70); margin-top: 2px; }
.h-mk-table { width: 100%; border-collapse: collapse; margin-top: var(--h-s-3); font-size: var(--h-fs-sm); }
.h-mk-table th, .h-mk-table td { text-align: left; padding: var(--h-s-2) var(--h-s-3); border-bottom: 1px solid var(--h-grey-10); vertical-align: top; }
.h-mk-table th { font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); color: var(--h-grey-50); text-transform: uppercase; letter-spacing: var(--h-tracking-wide); background: var(--h-paper); }
.h-mk-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-mk-table tr:last-child td { border-bottom: 0; }
.h-mk-table tr.is-warn td { background: var(--h-warning-soft); }
.h-mk-table .amt-credit { color: var(--h-success-ink); font-weight: var(--h-fw-semibold); }
.h-mk-table .amt-debit { color: var(--h-error-ink); font-weight: var(--h-fw-semibold); }
.h-mk-table .empty td { text-align: center; color: var(--h-grey-50); padding: var(--h-s-5); }
.h-mk-scroll { overflow-x: auto; }
.h-mk-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.h-mk-days { display: block; font-size: var(--h-fs-xs); color: var(--h-grey-50); }
.h-mk-days--warn { color: var(--h-warning-ink); font-weight: var(--h-fw-semibold); }
.h-mk-file { display: inline-flex; align-items: center; gap: 4px; font-size: var(--h-fs-xs); color: var(--h-info-ink); text-decoration: none; margin-right: var(--h-s-2); }
.h-mk-file svg { width: 12px; height: 12px; }
.h-mk-cats { list-style: none; margin: var(--h-s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--h-s-2); }
.h-mk-cat { display: grid; grid-template-columns: 1fr auto; gap: var(--h-s-3); font-size: var(--h-fs-sm); align-items: center; }
.h-mk-cat__bar { grid-column: 1 / -1; height: 6px; background: var(--h-grey-10); border-radius: var(--h-radius-sm); overflow: hidden; }
.h-mk-cat__fill { height: 100%; background: var(--h-cyan); }
.h-mk-cat__amt { font-variant-numeric: tabular-nums; font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-mk-form { padding: var(--h-s-6); margin-bottom: var(--h-s-5); }
.h-mk-form:hover { transform: none; box-shadow: var(--h-shadow); }
.h-mk-form__grid { display: grid; grid-template-columns: 140px 1fr 150px 170px; gap: var(--h-s-4); }
.h-mk-form__grid .h-label { display: flex; flex-direction: column; gap: var(--h-s-1); margin: 0; }
.h-mk-form__grid--full { grid-column: 1 / -1; }
.h-mk-form__grid--two { grid-column: span 2; }
.h-mk-form__grid input[type="file"] { font-size: var(--h-fs-sm); }
.h-mk-details { margin-top: var(--h-s-5); border-top: var(--h-border); padding-top: var(--h-s-4); }
.h-mk-details summary { cursor: pointer; font-weight: var(--h-fw-semibold); color: var(--h-blue); font-size: var(--h-fs-sm); }
.h-mk-details[open] summary { margin-bottom: var(--h-s-3); }
.h-mk-rules { max-width: 70ch; }
.h-mk-rules li { margin-bottom: var(--h-s-1); }
@media (max-width: 860px) { .h-mk-form__grid { grid-template-columns: 1fr 1fr; } .h-mk-form__grid--two { grid-column: 1 / -1; } }
@media (max-width: 560px) { .h-mk-form__grid { grid-template-columns: 1fr; } .h-mk-balance__amt { font-size: var(--h-fs-3xl); } }

/* ---------- PM Referrals ----------------------------------------------------
   Two-step form: find the property in Rex, then the details. Step 2 sits
   dimmed until a property is picked (or manual entry is chosen). */
.h-rf-form { padding: var(--h-s-6); margin-bottom: var(--h-s-6); }
.h-rf-form:hover { transform: none; box-shadow: var(--h-shadow); }
.h-rf-step { display: flex; gap: var(--h-s-3); align-items: flex-start; margin-bottom: var(--h-s-3); }
.h-rf-step--2 { margin-top: var(--h-s-6); }
.h-rf-step__num { flex: none; width: 26px; height: 26px; border-radius: var(--h-radius); background: var(--h-blue); color: var(--h-white); display: flex; align-items: center; justify-content: center; font-size: var(--h-fs-xs); font-weight: var(--h-fw-bold); }
.h-rf-step__title { margin: 0; font-weight: var(--h-fw-bold); color: var(--h-blue); }
.h-rf-step--2, #rf-fields { opacity: .45; pointer-events: none; transition: opacity var(--h-duration) var(--h-ease); }
.h-rf-step--2.is-unlocked, #rf-fields.is-unlocked { opacity: 1; pointer-events: auto; }
.h-rf-search { position: relative; }
.h-rf-results { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--h-z-dropdown); background: var(--h-white); border: var(--h-border-strong); border-top: 0; border-radius: 0 0 var(--h-radius) var(--h-radius); box-shadow: var(--h-shadow); max-height: 260px; overflow: auto; }
.h-rf-results[hidden] { display: none; }
.h-rf-result { padding: var(--h-s-3) var(--h-s-4); font-size: var(--h-fs-sm); cursor: pointer; border-bottom: 1px solid var(--h-grey-10); }
.h-rf-result:last-child { border-bottom: 0; }
.h-rf-result:hover { background: var(--h-blue-10); }
.h-rf-result--empty { color: var(--h-grey-50); cursor: default; }
.h-rf-status { margin: var(--h-s-2) 0 0; }
.h-rf-status.is-ok { color: var(--h-success-ink); }
.h-rf-status.is-bad { color: var(--h-error-ink); }
.h-rf-manual-cta { display: flex; align-items: center; gap: var(--h-s-3); margin-top: var(--h-s-2); }
.h-rf-manual-cta[hidden] { display: none; }
.h-rf-form .h-notice { margin: var(--h-s-3) 0; }
.h-rf-form .h-notice[hidden] { display: none; }
.h-rf-form .h-notice .h-btn { margin-left: var(--h-s-2); vertical-align: middle; }
.h-rf-form .h-form-card__actions { align-items: center; gap: var(--h-s-3); }
.h-rf-form .h-form-card__actions .h-meta[hidden] { display: none; }

/* ---------- Studio Commissions: workflow shell -------------------------------- */
.h-cm-month { display: flex; align-items: center; gap: var(--h-s-3); flex-wrap: wrap; margin-bottom: var(--h-s-5); }
.h-cm-month .h-select { width: auto; min-width: 200px; }
.h-cm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--h-s-3); }
.h-cm-step { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--h-s-4); align-items: center; padding: var(--h-s-4) var(--h-s-5); }
.h-cm-step:hover { transform: none; box-shadow: var(--h-shadow); }
.h-cm-step__num { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--h-radius); background: var(--h-blue); color: var(--h-white); font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); }
.h-cm-step--hub .h-cm-step__num { background: var(--h-grey-10); color: var(--h-grey-70); }
.h-cm-step__title { margin: 0; font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); color: var(--h-blue); display: flex; align-items: center; gap: var(--h-s-2); flex-wrap: wrap; }
.h-cm-step__desc { margin: 2px 0 0; font-size: var(--h-fs-sm); color: var(--h-grey-70); }
.h-cm-step__count { font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); color: var(--h-grey-50); text-transform: uppercase; letter-spacing: var(--h-tracking-wide); margin-top: var(--h-s-1); }
.h-cm-step__count--live { color: var(--h-blue); }
.h-cm-step__act { display: flex; align-items: center; gap: var(--h-s-2); }
.h-cm-step__act svg { width: 14px; height: 14px; }
@media (max-width: 720px) { .h-cm-step { grid-template-columns: 36px 1fr; } .h-cm-step__act { grid-column: 1 / -1; } .h-cm-step__num { width: 36px; height: 36px; font-size: var(--h-fs-base); } }

/* ---------- Studio Commissions: PM Reviews ----------------------------------- */
.h-rv-section { margin-bottom: var(--h-s-6); }
.h-rv-list { display: grid; gap: var(--h-s-3); }
.h-rv { padding: var(--h-s-5); }
.h-rv:hover { transform: none; box-shadow: var(--h-shadow); }
.h-rv--pending { border-left: 4px solid var(--h-cyan); }
.h-rv__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--h-s-3); flex-wrap: wrap; }
.h-rv__who { margin: 0; font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); color: var(--h-blue); }
.h-rv__meta { margin: 2px 0 0; font-size: var(--h-fs-sm); color: var(--h-grey-50); display: flex; align-items: center; gap: var(--h-s-2); flex-wrap: wrap; }
.h-rv__stars { display: inline-flex; gap: 1px; color: var(--h-grey-20); }
.h-rv__stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.h-rv__stars .is-on { color: var(--h-warning); }
.h-rv__text { margin: var(--h-s-3) 0 0; padding: var(--h-s-3) var(--h-s-4); background: var(--h-paper); border-left: 3px solid var(--h-grey-10); border-radius: var(--h-radius); font-size: var(--h-fs-sm); color: var(--h-grey-70); line-height: var(--h-lh-base); white-space: pre-wrap; }
.h-rv__text--empty { font-style: italic; }
.h-rv-name { color: var(--h-blue); font-weight: var(--h-fw-bold); }
.h-rv__note { margin: var(--h-s-2) 0 0; font-size: var(--h-fs-sm); color: var(--h-warning-ink); }
.h-rv__pms { display: flex; flex-wrap: wrap; gap: var(--h-s-2); margin: var(--h-s-4) 0 0; }
.h-rv__pm { display: inline-flex; align-items: center; gap: var(--h-s-2); padding: var(--h-s-2) var(--h-s-3); border: 1px solid var(--h-grey-10); border-radius: var(--h-radius); font-size: var(--h-fs-sm); cursor: pointer; background: var(--h-white); }
.h-rv__pm:hover { border-color: var(--h-blue-20); background: var(--h-blue-10); }
.h-rv__pm input { margin: 0; accent-color: var(--h-blue); }
.h-rv__pm:has(input:checked) { border-color: var(--h-blue); background: var(--h-blue); color: var(--h-white); }
.h-rv__pm img, .h-rv__pm i { width: 20px; height: 20px; border-radius: var(--h-radius-pill); object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--h-blue-10); color: var(--h-blue); font-size: 10px; font-weight: var(--h-fw-bold); font-style: normal; }
.h-rv__pm:has(input:checked) i { background: rgba(255,255,255,0.2); color: var(--h-white); }
.h-rv__row { display: flex; align-items: center; gap: var(--h-s-3); flex-wrap: wrap; margin-top: var(--h-s-4); }
.h-rv__row .h-select { width: auto; }
.h-rv__row form { display: inline-flex; align-items: center; gap: var(--h-s-2); margin: 0; }
.h-rv__row .h-meta { margin: 0; }
.h-rv__pay { display: inline-flex; align-items: baseline; gap: var(--h-s-1); font-variant-numeric: tabular-nums; }
.h-rv__pay strong { color: var(--h-blue); }
.h-rv__paid-to { display: inline-flex; gap: var(--h-s-1); flex-wrap: wrap; }
.h-rv__lock { display: inline-flex; align-items: center; gap: var(--h-s-1); }
.h-rv__lock svg { width: 13px; height: 13px; }
.h-rv-picker { display: flex; align-items: center; gap: var(--h-s-3); flex-wrap: wrap; margin-bottom: var(--h-s-5); }
.h-rv-picker .h-select { width: auto; min-width: 200px; }

/* ---------- Studio Commissions: PM Referrals ledger -------------------------- */
.h-lg-section { margin-bottom: var(--h-s-6); }
.h-lg-group { margin-bottom: var(--h-s-4); }
.h-lg-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--h-s-3); padding: var(--h-s-2) 0; border-bottom: 2px solid var(--h-blue); margin-bottom: var(--h-s-2); }
.h-lg-group__title { margin: 0; font-size: var(--h-fs-base); font-weight: var(--h-fw-bold); color: var(--h-blue); display: flex; align-items: center; gap: var(--h-s-2); }
.h-lg-group__total { font-variant-numeric: tabular-nums; font-weight: var(--h-fw-bold); color: var(--h-blue); }
.h-lg-group__total small { font-weight: var(--h-fw-regular); color: var(--h-grey-50); margin-left: var(--h-s-2); }
.h-lg-chase { border-top: 1px dashed var(--h-grey-10); margin-top: var(--h-s-3); padding-top: var(--h-s-3); }
.h-lg-chase__note { max-width: 320px; }
.h-lg-chase__fail { color: var(--h-warning-ink); font-weight: var(--h-fw-semibold); }
/* Sales sign-off and PM sign-off are the same table twice, so they use one
   fixed column set: whatever the names are, Payable, Status, Sent, Opened,
   Signed and Payroll told sit on the same x in both. */
.h-cm-table { table-layout: fixed; }
/* Badges and the Open button set the row height, so plain text — the name, the
   figure, the dashes — sat at the top of a 53px row while the badges beside it
   looked centred. Everything centres against the row. */
.h-cm-table td { vertical-align: middle; }
.h-cm-col-amt { width: 110px; }
.h-cm-col-status { width: 190px; }
.h-cm-col-date { width: 130px; }
.h-cm-col-open { width: 84px; }
.h-cm-table td:first-child, .h-cm-table th:first-child { overflow: hidden; text-overflow: ellipsis; }
.h-cm-live { color: var(--h-grey-50); font-variant-numeric: tabular-nums; }
.h-cm-open .h-meta { font-size: var(--h-fs-xs); }
/* Past statement months and the Closed list fold away — the page opens on what's live. */
.h-lg-fold > summary { list-style: none; cursor: pointer; }
.h-lg-fold > summary::-webkit-details-marker { display: none; }
.h-lg-fold > summary:hover .h-lg-group__title, .h-lg-fold > summary:hover .h-home-section__title { color: var(--h-blue-80); }
.h-lg-fold > summary.h-lv-sectionhead { display: flex; }
.h-lg-fold > summary .h-lg-group__title svg:first-child,
.h-lg-fold > summary .h-home-section__title svg:first-child { width: 16px; height: 16px; color: var(--h-grey-50); transition: transform .15s; margin-right: var(--h-s-2); vertical-align: -3px; }
.h-lg-fold[open] > summary .h-lg-group__title svg:first-child,
.h-lg-fold[open] > summary .h-home-section__title svg:first-child { transform: rotate(180deg); }
.h-lg-list { display: grid; gap: var(--h-s-2); }
.h-lg-row { border: 1px solid var(--h-grey-10); border-radius: var(--h-radius); background: var(--h-white); }
.h-lg-row--ready { border-left: 4px solid var(--h-cyan); }
.h-lg-row--warn { border-left: 4px solid var(--h-warning); }
.h-lg-row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 100px minmax(120px, auto) 110px 24px; gap: var(--h-s-3); align-items: center; padding: var(--h-s-3) var(--h-s-4); }
.h-lg-row > summary > div:first-child { min-width: 0; }
.h-badge svg, .h-lg-group__title svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.h-lg-row > summary::-webkit-details-marker { display: none; }
.h-lg-row > summary:hover { background: var(--h-paper); }
.h-lg-row__addr { margin: 0; font-weight: var(--h-fw-bold); color: var(--h-blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-rf-addr { color: var(--h-blue); text-decoration: none; display: inline-flex; align-items: baseline; gap: 5px; }
.h-rf-addr:hover { color: var(--h-blue-80); text-decoration: underline; }
.h-rf-addr svg { width: 11px; height: 11px; color: var(--h-grey-50); align-self: center; }
.h-lg-row__addr a { color: inherit; text-decoration: none; }
.h-lg-row__addr a:hover { color: var(--h-blue-80); text-decoration: underline; }
.h-lg-row__sub { margin: 1px 0 0; font-size: var(--h-fs-xs); color: var(--h-grey-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-lg-row__cell { font-size: var(--h-fs-sm); color: var(--h-grey-70); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-lg-row__cell strong { color: var(--h-blue); }
.h-lg-row__cell--r { text-align: right; }
.h-lg-row__chev { width: 18px; height: 18px; color: var(--h-grey-50); transition: transform .15s; justify-self: end; }
.h-lg-row[open] > summary .h-lg-row__chev { transform: rotate(180deg); }
.h-lg-row__body { border-top: 1px solid var(--h-grey-10); padding: var(--h-s-4); background: var(--h-paper); }
.h-lg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--h-s-3) var(--h-s-4); }
.h-lg-grid .h-label { margin: 0; }
.h-lg-grid--full { grid-column: 1 / -1; }
.h-lg-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--h-s-3); flex-wrap: wrap; margin-top: var(--h-s-4); }
.h-lg-actions__left, .h-lg-actions__right { display: flex; align-items: center; gap: var(--h-s-2); flex-wrap: wrap; }
.h-lg-actions form { display: inline-flex; align-items: center; gap: var(--h-s-2); margin: 0; }
.h-lg-actions .h-select { width: auto; }
.h-lg-rex { display: inline-flex; align-items: center; gap: var(--h-s-1); font-size: var(--h-fs-sm); }
.h-lg-rex svg { width: 12px; height: 12px; }
.h-lg-link { position: relative; }
.h-lg-link .h-rf-results { top: 100%; }
.h-lg-tags { display: inline-flex; gap: var(--h-s-1); flex-wrap: wrap; }
.h-lg-empty { padding: var(--h-s-5); text-align: center; color: var(--h-grey-50); font-size: var(--h-fs-sm); border: 1px dashed var(--h-grey-10); border-radius: var(--h-radius); }
.h-lg-notes { white-space: pre-wrap; }
@media (max-width: 860px) {
  .h-lg-row > summary { grid-template-columns: minmax(0, 1fr) 90px 24px; }
  .h-lg-row__cell--hide { display: none; }
  .h-lg-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .h-lg-grid { grid-template-columns: 1fr; } }

/* ---------- Studio Commissions: Staff Deductions ----------------------------- */
.h-dd-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--h-s-4); margin-bottom: var(--h-s-6); align-items: start; }
.h-dd-card { padding: var(--h-s-5); }
.h-dd-card:hover { transform: none; box-shadow: var(--h-shadow); }
.h-dd-card > .h-meta { margin: 0 0 var(--h-s-4); }
.h-dd-fields { margin-bottom: var(--h-s-3); }
.h-dd-grouphead { margin: var(--h-s-4) 0 var(--h-s-2); font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); letter-spacing: var(--h-tracking-wide); text-transform: uppercase; color: var(--h-grey-50); }
.h-dd-people { margin-top: 0; }
.h-rv__pm.is-locked { opacity: .5; cursor: not-allowed; }
.h-rv__pm.is-locked:hover { background: var(--h-white); border-color: var(--h-grey-10); }
.h-dd-lock { display: inline-flex; color: var(--h-grey-50); }
.h-dd-lock svg { width: 12px; height: 12px; }
.h-dd-lock[hidden] { display: none; }
.h-dd-actions { align-items: center; gap: var(--h-s-3); }
.h-dd-actions .h-meta { margin: 0; }
.h-dd-list { display: grid; gap: var(--h-s-3); }
.h-dd-person { padding: var(--h-s-4) var(--h-s-5); }
.h-dd-person:hover { transform: none; box-shadow: var(--h-shadow); }
.h-dd-person__head { display: flex; align-items: center; gap: var(--h-s-3); }
.h-dd-person__head .h-meta { margin: 0; }
.h-dd-person__photo { width: 36px; height: 36px; border-radius: var(--h-radius-pill); object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.h-dd-person__photo--i { background: var(--h-blue-10); color: var(--h-blue); font-weight: var(--h-fw-bold); }
.h-dd-person__name { margin: 0; font-weight: var(--h-fw-bold); color: var(--h-blue); display: flex; align-items: center; gap: var(--h-s-2); }
.h-dd-person .h-mk-table { margin-top: var(--h-s-3); }
.h-dd-person .h-mk-table form { margin: 0; display: inline; }
@media (max-width: 900px) { .h-dd-grid { grid-template-columns: 1fr; } }

/* ---------- Studio Commissions: Sales statement --------------------------------- */
.h-sc-pick { display: flex; align-items: center; gap: var(--h-s-3); flex-wrap: wrap; margin-bottom: var(--h-s-5); }
.h-sc-pick .h-select { width: auto; min-width: 190px; }
.h-sc-pick .h-segmented__option { text-decoration: none; }
.h-stat--accent { border-color: var(--h-blue); background: var(--h-blue); }
.h-stat--accent .h-stat__label, .h-stat--accent .h-stat__sub { color: rgba(255,255,255,0.75); }
.h-stat--accent .h-stat__value { color: var(--h-white); }
.h-sc-neg { color: var(--h-error-ink); }
.h-sc-section { margin-bottom: var(--h-s-5); }
.h-sc-table { margin-top: 0; }
.h-sc-table tfoot td { border-top: 2px solid var(--h-blue); border-bottom: 0; font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-sc-table td a { color: var(--h-blue); text-decoration: none; font-weight: var(--h-fw-semibold); }
.h-sc-table td a:hover { text-decoration: underline; }
.h-sc-roles { display: inline-flex; gap: 2px; }
.h-sc-roles i { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; font-size: 10px; font-style: normal; font-weight: var(--h-fw-bold); border-radius: var(--h-radius-sm); background: var(--h-grey-10); color: var(--h-grey-50); }
.h-sc-roles i.is-on { background: var(--h-blue); color: var(--h-white); }
.h-sc-note { margin: var(--h-s-2) 0 0; }
.h-sc-prop { min-width: 220px; }
.h-sc-table .h-mk-days { white-space: normal; }
.h-sc-table .h-mk-days .h-badge { vertical-align: baseline; }
.h-sc-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: var(--h-s-4); align-items: start; margin-bottom: var(--h-s-5); }
.h-sc-card { padding: var(--h-s-4) var(--h-s-5); }
.h-sc-card:hover { transform: none; box-shadow: var(--h-shadow); }
.h-sc-card .h-mk-table { margin-top: var(--h-s-3); }
.h-sc-card tfoot td { border-top: 1px solid var(--h-grey-20); border-bottom: 0; }
.h-sc-sum tr.h-sc-sub td { font-weight: var(--h-fw-semibold); color: var(--h-blue); border-top: 1px solid var(--h-grey-20); }
.h-sc-sum tr.h-sc-net td { font-weight: var(--h-fw-bold); color: var(--h-blue); background: var(--h-paper); }
.h-sc-sum tr.h-sc-total td { font-weight: var(--h-fw-bold); color: var(--h-white); background: var(--h-blue); border-bottom: 0; }
.h-sc-quarter p { margin: var(--h-s-2) 0 0; line-height: var(--h-lh-base); }
.h-sc-quarter .h-badge { margin-left: var(--h-s-2); vertical-align: middle; }
@media (max-width: 1100px) { .h-sc-grid { grid-template-columns: 1fr 1fr; } .h-sc-grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 720px) { .h-sc-grid { grid-template-columns: 1fr; } }

.h-sc-editrow td { background: var(--h-paper); padding: var(--h-s-4) var(--h-s-5) !important; }
.h-sc-editrow[hidden] { display: none; }
.h-sc-edit__roles { display: flex; align-items: center; gap: var(--h-s-2); flex-wrap: wrap; margin-bottom: var(--h-s-3); }
.h-sc-edit__roles .h-label { margin: 0 var(--h-s-2) 0 0; }
.h-sc-edit__pcts { margin-bottom: var(--h-s-2); }
.h-sc-editcard { margin-bottom: var(--h-s-4); }
.h-sc-editcard > .h-meta { margin: 0 0 var(--h-s-3); }
.h-sc-editcard .h-lv-grid { margin-bottom: var(--h-s-2); }
.h-sc-grid--edit { grid-template-columns: 1fr 1fr 1fr; }
.h-sc-actions { white-space: nowrap; }
.h-sc-actions form, .h-sc-inline { display: inline-flex; margin: 0; vertical-align: middle; }
.h-sc-actions form + form, .h-sc-actions form + button { margin-left: var(--h-s-1); }
.h-sc-rejected td { color: var(--h-grey-50); }
/* The editing bench — Add an adjustment · Add a referral · Quarterly bonus.
   The three cards are meant to read as one row: equal height, one intro line
   each under the eyebrow, inputs on a shared baseline whatever the label
   wraps to, and each card's disclosure pinned to the same bottom rule. */
.h-sc-grid--edit { align-items: stretch; }
.h-sc-editcard { display: flex; flex-direction: column; }
.h-sc-editcard > .h-stat__label + .h-meta { margin: 0 0 var(--h-s-4); min-height: 2.6em; }
.h-sc-editcard > .h-sc-more:last-child { margin-top: auto; }
/* A row listing what's already there (an adjustment, a Westpac referral) sits
   directly under the fields that add one, so it lines up with them: no cell
   padding at the card's two edges, a money column of its own rather than one
   the widest label pushes around, and the row's Edit/Remove button flush right
   with the input above it. */
.h-sc-editcard .h-mk-table th:first-child, .h-sc-editcard .h-mk-table td:first-child { padding-left: 0; }
.h-sc-editcard .h-mk-table th:last-child, .h-sc-editcard .h-mk-table td:last-child { padding-right: 0; width: 1%; white-space: nowrap; }
.h-sc-editcard .h-mk-table td.num:not(:last-child) { width: 110px; }
.h-sc-editcard .h-mk-table td:last-child:not(.h-sc-actions) .h-btn-ghost { padding-left: 0; padding-right: 0; }
/* A queue row: the amount and the buttons centre against the event cell, which
   runs to two lines. Top-aligning them put the number on the address's line and
   the buttons' centre below it — the "off-centre" look. The last button in the
   row loses its right padding so the row of buttons ends on the same edge as
   the amounts and the header above them. */
.h-sc-editcard .h-mk-table td.num, .h-sc-editcard .h-mk-table td.h-sc-actions { vertical-align: middle; }
.h-sc-actions > * { vertical-align: middle; }
/* Only a BORDERLESS last button loses its right padding to sit flush with the
   column edge. Doing it to a bordered one (Save + approve) put the label on
   the border. */
.h-sc-editcard .h-sc-actions > :last-child.h-btn-ghost,
.h-sc-editcard .h-sc-actions > :last-child .h-btn-ghost { padding-right: 0; }

.h-sc-editcard > .h-sc-more { border-top: 1px solid var(--h-grey-10); padding-top: var(--h-s-3); }
/* Each field hugs the bottom of its row — label directly above its input —
   so a label that wraps to two lines eats into the space ABOVE it instead of
   pushing its field below its neighbour's. On the bench the rows have a floor
   height, which puts every input, every Add button and every disclosure on one
   line across all three cards. */
.h-lv-grid .h-label { justify-content: flex-end; }
.h-sc-editcard .h-lv-grid { grid-auto-rows: minmax(96px, auto); }

.h-sc-more { margin-top: var(--h-s-3); }
.h-sc-more summary { cursor: pointer; }
/* A brand caret instead of the browser's black triangle. */
.h-sc-more > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--h-s-2); }
.h-sc-more > summary::-webkit-details-marker { display: none; }
.h-sc-more > summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid var(--h-grey-50); border-bottom: 1.5px solid var(--h-grey-50);
  transform: rotate(-45deg); transition: transform .15s;
}
.h-sc-more[open] > summary::before { transform: rotate(45deg); }
.h-sc-more > summary:hover { color: var(--h-blue); }
.h-sc-more > summary:hover::before { border-color: var(--h-blue); }
.h-sc-more form { margin-top: var(--h-s-2); }
.h-sc-editcard .h-lg-actions { justify-content: flex-start; }
.h-sc-editcard .h-lg-actions form { gap: var(--h-s-2); flex-wrap: wrap; }
.h-sc-editcard .h-input--narrow { width: 120px; }
@media (max-width: 1100px) { .h-sc-grid--edit { grid-template-columns: 1fr; } }

/* ---------- Studio Commissions: public sign page + send controls ------------- */
.h-sign { background: var(--h-paper); margin: 0; min-height: 100vh; font-family: var(--h-font-sans); color: var(--h-blue); }
.h-sign__bar { background: var(--h-blue); padding: var(--h-s-4) var(--h-s-6); }
.h-sign__lockup { height: 26px; width: auto; display: block; }
.h-sign__wrap { max-width: 1000px; margin: var(--h-s-6) auto; padding: 0 var(--h-s-4); }
.h-sign__card { padding: var(--h-s-6); }
.h-sign__card:hover { transform: none; box-shadow: var(--h-shadow); }
.h-sign__pdf { width: 100%; height: 78vh; border: 1px solid var(--h-grey-20); border-radius: var(--h-radius); margin-top: var(--h-s-4); background: var(--h-white); }
.h-sign__form { margin-top: var(--h-s-5); background: var(--h-paper); border: 1px solid var(--h-grey-10); border-radius: var(--h-radius); padding: var(--h-s-5); display: grid; gap: var(--h-s-4); }
.h-sign__name { font-family: var(--h-font-script); font-size: 26px; padding: var(--h-s-3) var(--h-s-4); }
.h-sign__ack { display: flex; gap: var(--h-s-3); align-items: flex-start; font-size: var(--h-fs-sm); color: var(--h-grey-70); line-height: var(--h-lh-base); }
.h-sign__ack input { margin-top: 4px; accent-color: var(--h-blue); }
/* The last thing on a statement page: check everything above, then send.
   A blue rule closes the page off so it reads as the end of the job. */
.h-sc-signoff { border-top: 2px solid var(--h-blue); padding-top: var(--h-s-4); margin-top: var(--h-s-6); }
.h-sc-signoff .h-sc-send { margin-bottom: 0; }
.h-sc-send { display: flex; align-items: center; gap: var(--h-s-2); flex-wrap: wrap; margin: 0 0 var(--h-s-5); }
.h-sc-send form { display: inline-flex; align-items: center; gap: var(--h-s-2); margin: 0; }
.h-sc-send .h-input { width: 220px; }

.h-cm-status { margin-top: var(--h-s-6); }
.h-cm-status .h-mk-table { background: var(--h-white); border: 1px solid var(--h-grey-10); border-radius: var(--h-radius); }

/* Principal statement */
.h-pr-grid { grid-template-columns: 1fr 1fr; }
.h-pr-big { font-size: var(--h-fs-xl); font-weight: var(--h-fw-bold); }
.h-pr-table td:first-child { color: var(--h-grey-70); }
.h-pr-table .h-mk-days { display: inline; margin-left: var(--h-s-1); }
@media (max-width: 900px) { .h-pr-grid { grid-template-columns: 1fr; } }

/* ── Studio · PM commissions (steps 5–7) ─────────────────────────────────── */
.h-pe-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--h-s-4); align-items: start; margin-bottom: var(--h-s-5); }
.h-pe-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--h-s-4); min-width: 0; align-items: start; }
.h-pe-main { min-width: 0; }
.h-pe-name { min-width: 200px; }
.h-pe-row--paused td { color: var(--h-grey-50); }
.h-pe-in { width: 96px; text-align: right; padding: var(--h-s-1) var(--h-s-2); font-variant-numeric: tabular-nums; }
.h-pe-in--money { width: 120px; }
.h-pe-in[readonly], .h-pe-office input[readonly] { background: var(--h-paper); color: var(--h-grey-70); }
.h-pe-in.is-imported, .h-pe-office .is-imported { border-color: var(--h-cyan); font-weight: var(--h-fw-semibold); }
.h-pe-foot { justify-content: flex-start; align-items: center; margin-top: var(--h-s-3); }
.h-pe-import { display: grid; gap: var(--h-s-3); margin-top: var(--h-s-3); }
.h-pe-office { display: grid; gap: var(--h-s-3); margin-top: var(--h-s-3); }
.h-pe-office > .h-meta { margin: 0; }
.h-pe-person { border-top: 1px solid var(--h-grey-10); padding-top: var(--h-s-3); display: grid; gap: var(--h-s-2); }
.h-pe-person__head { display: flex; align-items: center; justify-content: space-between; gap: var(--h-s-2); flex-wrap: wrap; }
.h-pe-person__fields { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--h-s-3); }
.h-pe-person__fields .h-input--narrow { width: 100%; max-width: none; }
.h-pe-base { display: flex; align-items: center; gap: var(--h-s-3); flex-wrap: wrap; font-size: var(--h-fs-sm); }
.h-pe-base .h-mk-days { flex-basis: 100%; }
.h-pe-check { display: inline-flex; align-items: center; gap: var(--h-s-1); font-size: var(--h-fs-sm); color: var(--h-grey-70); cursor: pointer; }
.h-pe-check input { accent-color: var(--h-blue); }
.h-pq-table td { vertical-align: top; }
.h-pq-miss { color: var(--h-error-ink); font-weight: var(--h-fw-semibold); }
.h-pq-table tfoot td { border-top: 2px solid var(--h-blue); border-bottom: 0; font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-pq-rules { display: grid; gap: var(--h-s-3); margin-top: var(--h-s-3); justify-items: start; }
.h-pq-rules .h-pe-check { font-size: var(--h-fs-base); color: var(--h-blue); }
.h-pm-sublabel { margin-top: var(--h-s-4); }
@media (max-width: 900px) { .h-pe-side { grid-template-columns: 1fr; } }
.h-mk-days svg, .h-meta svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.h-pe-in { width: 72px; }
.h-pe-in--money { width: 110px; }
.h-pe-table .h-badge { white-space: nowrap; }
/* One row per portfolio, and it reads as one row: Save and Save + approve sit
   side by side at the right rather than stacked full-width (which turned the
   borderless Save into a line of floating centred text), and every cell centres
   against the name block, which is the tallest thing in the row. */
.h-pe-table .h-sc-actions { white-space: nowrap; text-align: right; min-width: 0; }
.h-pe-table .h-sc-actions button { display: inline-flex; width: auto; white-space: nowrap; margin: 0 0 0 var(--h-s-2); }
.h-pe-table .h-sc-actions form { display: inline-flex; margin: 0; }
.h-pe-table td { vertical-align: middle; }
.h-pe-table td.num .h-mk-days { white-space: normal; }

/* Office pool: the fees field stacks like every other field in the card, at the
   same width and the same left edge as Share % below it, and the two buttons
   sit together instead of at opposite ends of the card. */
.h-pe-office > .h-label > span { display: block; margin-bottom: var(--h-s-1); }
.h-pe-office > .h-label .h-input { width: 120px; }
.h-pe-office > .h-lg-actions { justify-content: flex-start; gap: var(--h-s-2); }
/* ── Studio · Fee Matrix ─────────────────────────────────────────────────── */
.h-fm-line { display: grid; grid-template-columns: 1fr auto; gap: var(--h-s-4); align-items: center; padding: var(--h-s-4) var(--h-s-5); margin-bottom: var(--h-s-4); }
.h-fm-line:hover { transform: none; box-shadow: var(--h-shadow); }
.h-fm-line__value { font-size: var(--h-fs-xl); font-weight: var(--h-fw-bold); color: var(--h-blue); margin: 0; font-variant-numeric: tabular-nums; }
.h-fm-line__form { display: flex; align-items: flex-end; gap: var(--h-s-2); }
.h-fm-line__form .h-input { width: 140px; }
.h-fm-line__hist { grid-column: 1 / -1; margin: 0; }
.h-fm-check { max-width: none; margin-bottom: var(--h-s-5); }
.h-fm-fields { grid-template-columns: 1fr 1fr auto; align-items: end; }
.h-fm-actions { margin-top: 0; }
.h-fm-verdict { margin-top: var(--h-s-4); }
.h-fm-verdict__head { font-size: var(--h-fs-xl); font-weight: var(--h-fw-bold); margin: 0 0 var(--h-s-1); color: var(--h-blue); }
.h-fm-verdict.is-yes .h-fm-verdict__head { color: var(--h-success-ink); }
.h-fm-verdict.is-no .h-fm-verdict__head { color: var(--h-error-ink); }
.h-fm-verdict__sub { margin: 0 0 var(--h-s-3); color: var(--h-grey-70); }
.h-fm-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--h-s-3); }
.h-fm-outcome { display: flex; align-items: center; gap: var(--h-s-2); flex-wrap: wrap; margin-top: var(--h-s-4); }
.h-fm-outcome form { margin: 0; }
.h-fm-grid-wrap { margin-bottom: var(--h-s-5); }
.h-fm-grid th:first-child, .h-fm-grid td:first-child { position: sticky; left: 0; background: var(--h-white); font-weight: var(--h-fw-semibold); }
.h-fm-grid thead th { position: sticky; top: 0; background: var(--h-paper); }
.h-fm-grid td { font-variant-numeric: tabular-nums; }
.h-fm-grid td.is-ok { background: var(--h-blue-10); color: var(--h-blue); font-weight: var(--h-fw-semibold); }
.h-fm-grid tr.is-hit td { box-shadow: inset 0 -2px 0 var(--h-cyan); }
.h-fm-grid tr.is-hit td:first-child { color: var(--h-cyan); }
.h-fm-full { margin-top: var(--h-s-3); }
.h-fm-full summary { display: inline-flex; cursor: pointer; list-style: none; }
.h-fm-full summary::-webkit-details-marker { display: none; }
.h-fm-scroll { max-height: 520px; overflow: auto; margin-top: var(--h-s-3); border: 1px solid var(--h-grey-10); }
.h-fm-ledger .h-mk-table { margin-top: var(--h-s-3); }
@media (max-width: 900px) { .h-fm-line { grid-template-columns: 1fr; } .h-fm-fields { grid-template-columns: 1fr; } }
.h-fm-line__fields { display: grid; grid-template-columns: 1fr 100px auto 1fr auto; gap: var(--h-s-2); align-items: end; }
.h-fm-line__fields .h-input { width: 100%; }
.h-fm-line__or { align-self: center; padding-bottom: var(--h-s-2); color: var(--h-grey-50); font-size: var(--h-fs-sm); }
.h-fm-line__hint { margin: 0 0 var(--h-s-2); }
.h-fm-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
.h-fm-line__form { display: block; }
.h-fm-more { margin-top: var(--h-s-3); }
.h-fm-more summary { cursor: pointer; }
.h-fm-fields--more { grid-template-columns: 1fr 1fr 1fr; margin-top: var(--h-s-3); }
.h-fm-outcome { display: flex; align-items: center; gap: var(--h-s-2); flex-wrap: wrap; margin-top: var(--h-s-4); }
.h-fm-outcome__note { flex: 1 1 260px; }
.h-fm-pending .h-notice__title { margin-bottom: var(--h-s-2); }
.h-fm-pending__row { display: flex; align-items: center; gap: var(--h-s-2); flex-wrap: wrap; padding: var(--h-s-1) 0; }
.h-fm-pending__row form { margin: 0; }
.h-fm-portfolio { margin-bottom: var(--h-s-5); }
.h-fm-portfolio__stats { margin: var(--h-s-3) 0; }
.h-fm-portfolio .h-mk-table { margin-top: var(--h-s-3); }
.h-fm-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--h-s-3); align-items: end; margin-top: var(--h-s-4); }
@media (max-width: 900px) { .h-fm-line__fields, .h-fm-fields--more, .h-fm-upload { grid-template-columns: 1fr; } }
/* ── Studio · Meeting Agenda + Sales Meeting ─────────────────────────────── */
.h-ag-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--h-s-4); align-items: start; }
.h-ag-side { display: grid; gap: var(--h-s-4); min-width: 0; }
.h-ag-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--h-s-3); align-items: end; margin: var(--h-s-3) 0 var(--h-s-4); }
.h-ag-add__text { grid-column: 1 / -1; }
.h-ag-add textarea, .h-ag-add .h-select { width: 100%; }
.h-ag-add .h-label { display: flex; flex-direction: column; gap: var(--h-s-1); }
.h-ag-add textarea { resize: vertical; }
.h-ag-list { list-style: none; margin: 0; padding: 0; }
.h-ag-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--h-s-3); padding: var(--h-s-3) 0; border-top: 1px solid var(--h-grey-10); align-items: start; }
.h-ag-item.is-closed .h-ag-item__text { color: var(--h-grey-50); }
.h-ag-item__text { margin: 0 0 2px; color: var(--h-blue); font-weight: var(--h-fw-semibold); line-height: var(--h-lh-base); }
.h-ag-item__main .h-meta { margin: 0; }
.h-ag-item__actions { display: flex; gap: var(--h-s-1); flex-wrap: wrap; justify-content: flex-end; }
.h-ag-item__actions form { margin: 0; }
.h-ag-edit { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: var(--h-s-2); align-items: start; }
.h-ag-edit[hidden] { display: none; }
.h-ag-list--compact .h-ag-item { padding: var(--h-s-2) 0; }
.h-ag-list--compact .h-ag-item__text { font-weight: var(--h-fw-regular); font-size: var(--h-fs-sm); }
.h-sm-new { max-width: none; }
.h-sm-dates { margin-bottom: var(--h-s-3); flex-wrap: wrap; }
.h-sm-dates .h-segmented__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.h-sm-dates .h-segmented__option { cursor: pointer; }
.h-sm-other { max-width: 260px; margin-bottom: var(--h-s-3); }
.h-sm-transcript { font-family: var(--h-font-mono, ui-monospace, monospace); font-size: var(--h-fs-sm); }
.h-sm-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--h-s-4); align-items: start; }
.h-sm-card { margin-bottom: var(--h-s-4); }
.h-sm-list { margin: var(--h-s-3) 0 0; padding-left: 0; list-style: none; }
.h-sm-list li { padding: var(--h-s-2) 0; border-top: 1px solid var(--h-grey-10); line-height: var(--h-lh-base); }
.h-sm-list li:first-child { border-top: 0; }
.h-sm-list--num { list-style: decimal; padding-left: var(--h-s-5); }
.h-sm-card--wins .h-sm-list li strong { color: var(--h-blue); }
.h-sm-commit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--h-s-3); align-items: start; }
.h-sm-commit.is-closed .h-sm-commit__text { color: var(--h-grey-50); }
.h-sm-commit__text { margin: 0; }
.h-sm-commit .h-meta { margin: 2px 0 0; }
.h-sm-transcript-box { margin-top: var(--h-s-3); }
.h-sm-transcript-box summary { display: inline-flex; cursor: pointer; list-style: none; }
.h-sm-transcript-box summary::-webkit-details-marker { display: none; }
.h-sm-pre { white-space: pre-wrap; font-family: var(--h-font-sans); font-size: var(--h-fs-sm); color: var(--h-grey-70); background: var(--h-white); border: 1px solid var(--h-grey-10); padding: var(--h-s-4); max-height: 420px; overflow: auto; margin-top: var(--h-s-2); }
.h-sm-delete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--h-s-3); margin-top: var(--h-s-4); }
.h-sm-edit { margin-top: var(--h-s-4); }
.h-sm-edit[hidden] { display: none; }
.h-sm-edit textarea { resize: vertical; }
@media (max-width: 1000px) { .h-ag-grid, .h-sm-grid { grid-template-columns: 1fr; } .h-ag-add, .h-ag-edit { grid-template-columns: 1fr; } }

/* ── Studio · phone + form polish (06/09) ────────────────────────────────── */
.h-page-header__actions { flex-wrap: wrap; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--h-blue); }
.h-sc-pick .h-badge, .h-sc-pick .h-select { max-width: 100%; }
@media (max-width: 640px) { .h-page-header__actions .h-btn { flex: 1 1 auto; text-align: center; } .h-stat-row { grid-template-columns: 1fr 1fr; } }

/* ── Studio · What needs you ─────────────────────────────────────────────────
   The Home panel that answers "what is outstanding for me". A list, not a
   feed: one row per thing, the count first, one plain sentence, one way in.
   The left rule carries the urgency so it reads before the words do — the
   same idea as .h-notice, sized down to sit many rows deep. */
.h-att { padding: var(--h-s-5); }
.h-att:hover { box-shadow: none; transform: none; }

.h-att__title {
  margin: 0 0 var(--h-s-4);
  font-size: var(--h-fs-lg);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-tight);
  color: var(--h-blue);
}

.h-att__list { list-style: none; margin: 0; padding: 0; }

.h-att__row {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  padding: var(--h-s-3);
  padding-left: var(--h-s-4);
  border-left: 3px solid var(--h-grey-30);
  border-bottom: 1px solid var(--h-grey-10);
}
.h-att__row:last-child { border-bottom: 0; }
.h-att__row--error   { border-left-color: var(--h-error); }
.h-att__row--warning { border-left-color: var(--h-warning); }
.h-att__row--info    { border-left-color: var(--h-cyan); }
.h-att__row--muted   { border-left-color: var(--h-grey-30); }

/* Counts line up down the left edge whether they read 1 or 24. */
.h-att__count { flex: none; min-width: 2.25rem; text-align: center; }

.h-att__text {
  flex: 1;
  min-width: 0;
  font-size: var(--h-fs-sm);
  line-height: var(--h-lh-snug);
  color: var(--h-ink);
}
.h-att__row--muted .h-att__text { color: var(--h-grey-70); }

.h-att__open { flex: none; }

.h-att__empty { margin: 0; font-size: var(--h-fs-sm); color: var(--h-grey-50); }

@media (max-width: 640px) {
  .h-att__row { flex-wrap: wrap; }
  .h-att__text { flex: 1 1 100%; order: 3; }
}

/* The collapsed form: one line on Home instead of the full list. The bar
   carries the count and the worst tone; the list itself moves into .h-modal.
   Home is a launcher — outstanding work announces itself, it doesn't occupy
   the fold. .h-att (the open card) is unchanged and still used inside the
   modal, so both forms read identically row for row. */
.h-att-bar {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  width: 100%;
  margin: 0 0 var(--h-s-5);
  padding: var(--h-s-3) var(--h-s-4);
  font: inherit;
  text-align: left;
  color: var(--h-ink);
  background: var(--h-white);
  border: var(--h-border-strong);
  border-left: 3px solid var(--h-grey-30);
  border-radius: var(--h-radius);
  box-shadow: var(--h-shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--h-duration) var(--h-ease),
              border-color var(--h-duration) var(--h-ease);
}
.h-att-bar:hover { box-shadow: var(--h-shadow); }
.h-att-bar:focus-visible { outline: var(--h-focus-ring); outline-offset: 2px; }
.h-att-bar--error   { border-left-color: var(--h-error); }
.h-att-bar--warning { border-left-color: var(--h-warning); }
.h-att-bar--info    { border-left-color: var(--h-cyan); }
.h-att-bar--muted   { border-left-color: var(--h-grey-30); }

.h-att-bar__icon { flex: none; display: inline-flex; color: var(--h-blue); }
.h-att-bar__icon svg { width: 18px; height: 18px; }

.h-att-bar__label {
  flex: 1;
  min-width: 0;
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-semibold);
  color: var(--h-blue);
}
/* The headline row, so the bar still says something when it is closed. */
.h-att-bar__lead { font-weight: var(--h-fw-regular); color: var(--h-grey-70); }

.h-att-bar__count { flex: none; }
.h-att-bar__chev { flex: none; display: inline-flex; color: var(--h-grey-50); }
.h-att-bar__chev svg { width: 16px; height: 16px; transform: rotate(-90deg); }

/* Cleared state — a sentence, not a card. */
.h-att-clear {
  margin: 0 0 var(--h-s-5);
  font-size: var(--h-fs-sm);
  color: var(--h-grey-50);
}

/* Inside the modal the card chrome is already supplied by .h-modal. */
.h-modal .h-att { padding: 0; border: 0; box-shadow: none; background: transparent; }

@media (max-width: 640px) {
  .h-att-bar__lead { display: none; }
}

/* ── Studio · My Week ─────────────────────────────────────────────────────────
   /my-week (sales) and /my-day (property management). Phone-first: one column
   at 390px, nothing wider than the screen, and the only loud elements are the
   single action that is owed and the pace badge on a number. Everything else
   is quiet navy on paper. */

.h-mw-sec { margin: 0 0 var(--h-s-6); }
.h-mw-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--h-s-3); margin: 0 0 var(--h-s-3); flex-wrap: wrap; }
.h-mw-sec__title { font-size: var(--h-fs-lg); font-weight: var(--h-fw-semibold); color: var(--h-blue); margin: 0; }

/* The one-line "nothing needs you" statement — deliberately not a stat tile,
   because a $0 tile reads as a failure and a sentence reads as an answer. */
.h-mw-quiet { margin: 0; color: var(--h-grey-70); font-size: var(--h-fs-sm); line-height: var(--h-lh-base); }

/* Action strip: what is owed, and the button that finishes it. */
.h-mw-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--h-s-4); flex-wrap: wrap; }
.h-mw-strip__text { margin: 0; min-width: 0; }
.h-mw-strip__actions { display: flex; gap: var(--h-s-2); flex-wrap: wrap; }

/* A row with words on the left and one control on the right. Collapses to a
   stack on a phone so the button never squeezes the text to two characters. */
.h-mw-list { list-style: none; margin: 0; padding: 0; }
.h-mw-list > li { padding: var(--h-s-3) 0; border-top: 1px solid var(--h-grey-10); }
.h-mw-list > li:first-child { border-top: 0; }
.h-mw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--h-s-3); align-items: start; }
.h-mw-row__text { margin: 0; line-height: var(--h-lh-base); }
.h-mw-row__actions { display: flex; gap: var(--h-s-2); align-items: center; }
.h-mw-row__brief { margin: var(--h-s-2) 0 0; padding-left: var(--h-s-3); border-left: 2px solid var(--h-grey-10); color: var(--h-grey-70); font-size: var(--h-fs-sm); white-space: pre-line; }

/* Numbers: label, actual vs target, a thin bar, a pace badge. The bar's width
   comes from data-pct via the page script — never an inline style attribute. */
.h-mw-num { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--h-s-1) var(--h-s-3); align-items: baseline; }
.h-mw-num__label { font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold); color: var(--h-blue); margin: 0; }
.h-mw-num__value { font-size: var(--h-fs-sm); color: var(--h-grey-70); margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-mw-num__value strong { color: var(--h-blue); font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); }
.h-mw-num__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--h-s-3); flex-wrap: wrap; margin: var(--h-s-1) 0 0; }
.h-mw-bar { grid-column: 1 / -1; height: 6px; background: var(--h-grey-10); border-radius: var(--h-radius); overflow: hidden; margin: var(--h-s-2) 0 0; }
.h-mw-bar__fill { display: block; height: 100%; width: 0; background: var(--h-blue); border-radius: var(--h-radius); }
.h-mw-bar__fill.is-ahead { background: var(--h-success); }
.h-mw-bar__fill.is-behind { background: var(--h-warning); }

/* Who's away, and my own leave. */
.h-mw-away { list-style: none; margin: 0; padding: 0; }
.h-mw-away > li { display: flex; justify-content: space-between; gap: var(--h-s-3); padding: var(--h-s-2) 0; border-top: 1px solid var(--h-grey-10); font-size: var(--h-fs-sm); }
.h-mw-away > li:first-child { border-top: 0; }
.h-mw-away__who { font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-mw-away__when { color: var(--h-grey-50); white-space: nowrap; }

/* Inline "raise something" / "what happened" forms. */
.h-mw-form { display: grid; gap: var(--h-s-2); margin: var(--h-s-3) 0 0; }
.h-mw-form__actions { display: flex; gap: var(--h-s-2); flex-wrap: wrap; }

/* Footer: the full pages this one summarises. */
.h-mw-foot { display: flex; flex-wrap: wrap; gap: var(--h-s-2); padding-top: var(--h-s-4); border-top: 1px solid var(--h-grey-10); }

@media (max-width: 560px) {
  .h-mw-row { grid-template-columns: 1fr; }
  .h-mw-row__actions { justify-content: flex-start; }
  .h-mw-strip__actions .h-btn { flex: 1 1 auto; text-align: center; }
}

/* ── Studio · Notifications ───────────────────────────────────────────────────
   /notifications — the record of what Studio has told one person, and how they
   want to be told next time. A dated list, not a feed: every row keeps its own
   read state, because opening a page marks a whole category read and surviving
   that is the entire point of the page.

   Unread carries a navy left rule, a cyan dot and heavier text; read fades to
   grey and keeps its place in the list. Cyan appears twice — the dot and the
   link hover — so the surface stays navy-and-paper. */

.h-nt-day {
  margin: var(--h-s-5) 0 var(--h-s-2);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-bold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  color: var(--h-grey-50);
}
.h-nt-day:first-child { margin-top: 0; }

.h-nt { list-style: none; margin: 0; padding: 0; }

.h-nt__row {
  display: flex;
  align-items: flex-start;
  gap: var(--h-s-3);
  padding: var(--h-s-3) var(--h-s-4);
  margin: 0 0 var(--h-s-2);
  background: var(--h-white);
  border: 1px solid var(--h-grey-10);
  border-left: 3px solid var(--h-grey-30);
  border-radius: var(--h-radius);
}
.h-nt__row--unread { border-left-color: var(--h-blue); }

/* The dot repeats the left rule at row level so a scan down the page finds
   the unread items without reading a word. */
.h-nt__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--h-grey-30);
}
.h-nt__row--unread .h-nt__dot { background: var(--h-cyan); }

.h-nt__body { flex: 1; min-width: 0; }

.h-nt__label {
  margin: 0 0 var(--h-s-1);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  color: var(--h-grey-50);
}
.h-nt__row--unread .h-nt__label { color: var(--h-blue); }

.h-nt__text {
  margin: 0;
  font-size: var(--h-fs-sm);
  line-height: var(--h-lh-snug);
  color: var(--h-grey-70);
}
.h-nt__row--unread .h-nt__text { color: var(--h-ink); font-weight: var(--h-fw-semibold); }

/* Every row links to the thing itself, so the whole sentence is the target. */
.h-nt__link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--h-grey-30); }
.h-nt__link:hover { border-bottom-color: var(--h-cyan); }
.h-nt__link:focus-visible { outline: var(--h-focus-ring); outline-offset: 2px; }

.h-nt__time {
  flex: none;
  font-size: var(--h-fs-xs);
  color: var(--h-grey-50);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.h-nt__act { flex: none; display: flex; align-items: center; gap: var(--h-s-2); }
.h-nt__act form { margin: 0; }
.h-nt__done { font-size: var(--h-fs-xs); color: var(--h-grey-50); }

/* On a phone the sentence keeps the dot's company and the time and the one
   action drop underneath, right-aligned — never a lone dot on its own line. */
@media (max-width: 640px) {
  .h-nt__row { flex-wrap: wrap; }
  .h-nt__dot { order: 1; }
  .h-nt__body { order: 2; flex: 1 1 calc(100% - 1.25rem); }
  .h-nt__time { order: 3; margin-left: auto; }
  .h-nt__act { order: 4; }
}

/* How Studio contacts you — one choice, described in the words a person would
   use themselves, not the channel's brand name alone. */
.h-nt-choices { display: grid; gap: var(--h-s-2); margin: 0 0 var(--h-s-5); }

.h-nt-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--h-s-1) var(--h-s-3);
  padding: var(--h-s-3) var(--h-s-4);
  background: var(--h-paper);
  border: 1px solid var(--h-grey-10);
  border-radius: var(--h-radius);
  cursor: pointer;
}
.h-nt-choice input { grid-row: span 2; width: 16px; height: 16px; margin-top: 0.2rem; }
.h-nt-choice:has(input:checked) { background: var(--h-white); border-color: var(--h-blue); }
.h-nt-choice:has(input:disabled) { cursor: default; }
.h-nt-choice__name { font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-nt-choice__desc { grid-column: 2; font-size: var(--h-fs-sm); color: var(--h-grey-70); }

.h-nt-mutes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--h-s-2); }
.h-nt-mutes .h-form-card__check { margin: 0; }

/* ---------- Pill + tile modifiers for filter/flag rows (added 06/09/2026) ---
   Purely additive — nothing above is changed. Added for the Call Log queue,
   available to any app.

   .h-pill--xs   an in-table size, so a pill can sit inside a table row
                 without pushing the row height around.
   .h-pill--warn a pill that FLAGS something rather than selects it (Calls'
                 repeat-caller marker, the Unassigned filter). It stays a
                 .h-pill because it's clickable — a tappable thing must never
                 masquerade as a .h-badge, which is a status label only. */
.h-pill--xs { padding: 1px var(--h-s-2); font-size: var(--h-fs-xs); gap: var(--h-s-1); }
.h-pill--warn { background: var(--h-warning-soft); color: var(--h-warning-ink); border-color: var(--h-warning); }
.h-pill--warn:hover { background: var(--h-warning); color: var(--h-charcoal); border-color: var(--h-warning); }
.h-pill--warn.h-pill--active,
.h-pill--warn.is-active { background: var(--h-warning); color: var(--h-charcoal); border-color: var(--h-warning); }

/* Selected state for a .h-today__tile that doubles as a filter control (the
   Call Log stat tiles are also the status filters). Only the three outer
   borders move, so the tile keeps the left rule that carries its category. */
.h-today__tile.is-active {
  border-top-color: var(--h-blue);
  border-right-color: var(--h-blue);
  border-bottom-color: var(--h-blue);
  box-shadow: var(--h-shadow);
}

/* ---------- Generic primitives, promoted from app-specific ones (06/09/2026)
   Purely additive — nothing above is changed.

   These three patterns existed only under a feature's own prefix, so a second
   app that needed the same shape had to borrow the first app's class. That
   couples them: restyling Studio's reviews would silently restyle the Call Log
   email-action page. Same visuals, feature-neutral names, so neither app owns
   the other's look.

   .h-quote     verbatim text quoted back to the reader — a caller's message,
                a note, anything typed by a human that we're echoing, not
                editing. (Was .h-rv__text, Studio reviews.)
   .h-choice    a radio option with a name and a supporting line, in a
                .h-choices list. (Was .h-nt-choice, Studio notifications.)
   .h-actions   a row of buttons that WRAPS. .h-form-card__actions has neither
                gap nor wrap, so two buttons collide on a narrow phone.

   Studio's .h-rv__text and .h-nt-choice are left in place and unchanged; they
   should migrate onto these later so there is one definition, not two. */

.h-quote {
  margin: var(--h-s-3) 0 0;
  padding: var(--h-s-3) var(--h-s-4);
  background: var(--h-paper);
  border-left: 3px solid var(--h-grey-10);
  border-radius: var(--h-radius);
  font-size: var(--h-fs-sm);
  color: var(--h-grey-70);
  line-height: var(--h-lh-base);
  white-space: pre-wrap;
}
.h-quote--empty { font-style: italic; }

.h-choices { display: grid; gap: var(--h-s-2); margin: 0 0 var(--h-s-5); }
.h-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--h-s-1) var(--h-s-3);
  padding: var(--h-s-3) var(--h-s-4);
  background: var(--h-paper);
  border: 1px solid var(--h-grey-10);
  border-radius: var(--h-radius);
  cursor: pointer;
}
.h-choice input { grid-row: span 2; width: 16px; height: 16px; margin-top: 0.2rem; }
.h-choice:has(input:checked) { background: var(--h-white); border-color: var(--h-blue); }
.h-choice:has(input:disabled) { cursor: default; }
.h-choice__name { font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-choice__desc { grid-column: 2; font-size: var(--h-fs-sm); color: var(--h-grey-70); }

.h-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--h-s-3);
  margin-top: var(--h-s-5);
}

/* .h-badge is inline-flex, which overrides the `hidden` attribute — a badge
   markup-hidden by a script stayed visible. */
.h-badge[hidden] { display: none; }

/* ---------- Call report (Calls /report) 06/09/2026 ------------------------ */
/* Additive only. .h-bars__track/.h-bars__fill are reused as-is; the modifier
   below exists because a track dropped into a table cell (rather than the
   .h-bars grid) stays inline, so its 8px height never applies. Modifier rather
   than an edit to .h-bars__track — five apps share that rule. */
.h-bars__track--cell { display: block; width: 100%; min-width: 60px; }

/* The sentence between the headline tiles and the tables: what the number
   means, said once, before the detail starts. */
.h-report-lead {
  margin: var(--h-s-4) 0 var(--h-s-6);
  font-size: var(--h-fs-base);
  line-height: var(--h-lh-base);
  color: var(--h-grey-70);
}

/* Method note at the foot of the report — what each period actually covers. */
.h-report-foot {
  margin: var(--h-s-6) 0 var(--h-s-8);
  padding-top: var(--h-s-4);
  border-top: var(--h-border);
  line-height: var(--h-lh-base);
}

/* .h-table--tight drops columns 3 and 4 below 640px. On the report that would
   take "Completed" and "Rate" off the assignee table — the two things the page
   exists to show. This modifier keeps them and drops the last column instead
   (the share bar, and the oldest period on the source table), which is the
   decoration rather than the substance. Additive: the base rule is untouched. */
@media (max-width: 640px) {
  .h-table--report th:nth-child(3), .h-table--report td:nth-child(3),
  .h-table--report th:nth-child(4), .h-table--report td:nth-child(4) { display: table-cell; }
  .h-table--report th:last-child,  .h-table--report td:last-child  { display: none; }
}

/* ---------- Quiet + informational variants (06/09/2026) ---------------------
   Purely additive — nothing above is changed.

   Colour should mark the exception, not the rule. Two surfaces had drifted the
   other way: the Call Log queue was flagging repeat callers, unassigned rows
   and the Assign action all in the same warning amber as a genuinely overdue
   message, so four different meanings shouted equally; and the call report
   showed a wall of success-green because nearly every rate is 100%.

   .h-badge--quiet  the expected, unremarkable value. Recedes so the
                    exceptions beside it are the thing you see.
   .h-pill--info    a clickable pill carrying a FACT, not an alert — the
                    repeat-caller marker. Amber now means only "chase this".  */
.h-badge--quiet { background: var(--h-grey-10); color: var(--h-grey-70); }
.h-pill--info { background: var(--h-blue-10); color: var(--h-blue); border-color: var(--h-blue-20); }
.h-pill--info:hover { background: var(--h-blue-20); color: var(--h-blue); border-color: var(--h-blue); }

/* .h-btn--xs — a button at badge height (06/09/2026). BRAND.md: anything you
   tap is a .h-btn, never a badge class; but a small action sitting in a row
   of badges has to match their box or the row looks ragged. Same padding,
   size, tracking and case as .h-badge, still a rectangular button. */
.h-btn--xs { padding: var(--h-s-1) var(--h-s-3); font-size: var(--h-fs-xs); min-height: 0; line-height: 1.45;
             letter-spacing: var(--h-tracking-wide); text-transform: uppercase; white-space: nowrap; }
/* ...but `min-height: 0` opts out of the 44px floor, and on a phone that is not
   a style choice, it is a 27px tap target (06/09/2026: the Delete on the ECR
   review screen measured 71 x 27.4). Matching a badge box only matters on a
   pointer device; two ECR surfaces had already re-added the floor by hand,
   which is the tell that the base rule was wrong. Restore it here so nothing
   else has to remember. */
@media (max-width: 768px) {
  .h-btn--xs { min-height: 44px; }
}

/* ---------- Chart axis: a label under every column (06/09/2026) -------------
   Purely additive. The base .h-chart__x is left-aligned and meant for the
   occasional marker — one date every seventh bar. When every column carries a
   label it has to be centred under its own bar, and it needs room for two
   lines: the weekday on every column, the date only where the week turns.  */
.h-chart--axis .h-chart__bars { margin-bottom: var(--h-s-6); }
.h-chart__x--each { left: 50%; transform: translateX(-50%); text-align: center; line-height: 1.35; }
.h-chart__dow { display: block; font-weight: var(--h-fw-semibold); color: var(--h-grey-70); }
.h-chart__date { display: block; color: var(--h-grey-50); }

/* ---------- .h-col--optional: a table column the phone can do without -------
   Purely additive (06/09/2026). Added for the Call report's assignee table,
   which gained two time-to-close columns: on a 390px screen six columns turn
   into a horizontal scroll and the last two get clipped. Mark the columns that
   are detail rather than substance — the header cell AND every body cell — and
   the phone falls back to the layout it had before. The aggregate figures stay
   visible in the tiles above, so nothing is only-on-desktop. */
@media (max-width: 640px) {
  .h-col--optional { display: none; }
}

/* ---------- Condition report primitives (ECR → Studio port) 06/09/2026 ------
   Purely additive — nothing above is changed. These are the ten patterns the
   ECR spec (studio/spec/ecr/01_screens.md §11.9) found had no existing .h-*
   equivalent. Names are deliberately feature-neutral, not .h-ecr-*: the same
   shapes are wanted elsewhere (.h-evidence is a before/after reading,
   .h-commitbar is any sticky commit bar), and the file's convention since
   06/09/2026 is to promote app-specific classes to neutral names rather than
   make a second app borrow the first app's prefix.

   Phone first throughout. ECR is used one-handed, standing in a property,
   between inspections; the desktop layout is the secondary case.
   -------------------------------------------------------------------------- */

/* === 1. .h-roomgrid — the NSW Schedule 2 room grid ==========================
   A per-room card with a tinted header band and a Y/N/comment table inside it.
   Used by the report grid and by carry-forward, which share a row shape.

   The desktop table is genuinely a table — seven columns of one-word answers
   read as a grid and nothing else. Below 768px it stops being one: the row
   becomes a three-column block card so each Y/N control keeps its own caption
   above it. That is the whole point of the rewrite. The old stylesheet stacked
   the Y/N cells inline and printed the caption from attr(data-label), but the
   template never emitted data-label — so on an iPhone the Clean / Undamaged /
   Working controls sat side by side with no captions at all and Michelle had
   to count columns. data-label is now REQUIRED on every stacking cell; the
   guard at the end of the phone block makes a missing one visible instead of
   silent. */
.h-roomgrid {
  background: var(--h-white);
  border: 1px solid var(--h-grey-10);
  border-radius: var(--h-radius);
  overflow: hidden;
  margin-bottom: var(--h-s-4);
  box-shadow: var(--h-shadow-sm);
}
.h-roomgrid__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--h-s-3);
  padding: var(--h-s-3) var(--h-s-4);
  background: var(--h-blue-10);
  border-bottom: 1px solid var(--h-grey-10);
}
.h-roomgrid__name {
  margin: 0;
  font-size: var(--h-fs-base);
  font-weight: var(--h-fw-bold);
  letter-spacing: var(--h-tracking-tight);
  color: var(--h-blue);
}

/* The navy band above already carries the room, so the column headings inside
   it stay quiet — a navy .h-table header repeated once per room would make the
   page a stack of navy bars and break 60/30/10. */
.h-roomgrid__table { margin: 0; }
.h-roomgrid__table th {
  background: var(--h-paper);
  color: var(--h-grey-70);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-wide);
  padding: var(--h-s-2) var(--h-s-3);
  border-bottom: 1px solid var(--h-grey-10);
}
.h-roomgrid__table td {
  padding: var(--h-s-2) var(--h-s-3);
  vertical-align: top;
  border-bottom: 1px solid var(--h-grey-10);
}
.h-roomgrid__table tbody tr:last-child td { border-bottom: 0; }
.h-roomgrid__table tr:hover td { background: transparent; }
.h-roomgrid .h-select {
  padding: var(--h-s-2) var(--h-s-3);
  font-size: var(--h-fs-sm);
  min-width: 96px;
}

/* Schedule 2 column widths. Scoped to .h-roomgrid on purpose — "sub" and "yn"
   mean nothing on any other table, and a bare .h-col--yn utility would be a
   width with no subject. */
.h-roomgrid .h-col--sub {
  width: 28%;
  font-weight: var(--h-fw-semibold);
  color: var(--h-blue);
}
.h-roomgrid .h-col--yn       { width: 6%; }
.h-roomgrid .h-col--disc     { width: 12%; }
.h-roomgrid .h-col--resolved { width: 16%; }
.h-roomgrid .h-col--copy     { width: 44px; text-align: center; }
/* .h-col--comment takes whatever is left — no width. */

/* Row states. Tint carries the exit tag; it sits on the row so the whole line
   reads as one thing, and it is built on the existing soft tokens — no new
   colours. */
/* Tint sits on the ROW, not the cells: .h-table paints td on hover, which
   would otherwise wipe the tag colour off the line you are pointing at. */
.h-roomgrid__row--cleaning { background: var(--h-warning-soft); }
.h-roomgrid__row--damage   { background: var(--h-error-soft); }
.h-roomgrid__row.is-uncertain .h-col--sub { box-shadow: inset 3px 0 0 var(--h-warning); }
.h-roomgrid__row.is-empty .h-col--sub {
  color: var(--h-grey-50);
  font-weight: var(--h-fw-regular);
  font-style: italic;
}

@media (max-width: 768px) {
  .h-roomgrid__table thead { display: none; }
  .h-roomgrid__table,
  .h-roomgrid__table tbody,
  .h-roomgrid__table td { display: block; width: 100%; }

  /* The Y/N answers sit in a band, each under its own caption; everything else
     spans the full width.

     06/09/2026 — this was `repeat(3, minmax(0, 1fr))`, which forced all three
     answers into one 332px band on a 390px phone: each group got 102.7px, so
     each of its three options measured 30.9 x 44. That is 30% under the 44px
     floor D4/T9 asks for, on the control a property manager taps most, with
     one hand, standing up — the ergonomics this port was justified on.
     minmax(0, 1fr) is the culprit: a 0 minimum lets a track shrink below the
     size of the thing in it, silently.

     auto-fit + a REAL minimum (3 x 44px option + hairlines) lets the band
     reflow instead: two groups per row at 390-430px (160px each, so ~53 x 44
     per option), three across from ~520px, and the desktop table is untouched
     because none of this applies above 768px. */
  .h-roomgrid__table tbody tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--h-s-2) var(--h-s-3);
    padding: var(--h-s-3);
    border-bottom: 1px solid var(--h-grey-10);
  }
  .h-roomgrid__table td { padding: 0; border-bottom: 0; }
  .h-roomgrid .h-col--sub,
  .h-roomgrid .h-col--comment,
  .h-roomgrid .h-col--disc,
  .h-roomgrid .h-col--resolved,
  .h-roomgrid .h-col--copy { grid-column: 1 / -1; width: auto; }
  .h-roomgrid .h-col--yn { grid-column: auto; width: auto; }

  .h-roomgrid .h-col--sub {
    font-size: var(--h-fs-base);
    line-height: var(--h-lh-snug);
    margin-bottom: var(--h-s-1);
  }
  /* The caption every control must have. */
  .h-roomgrid__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--h-s-1);
    font-size: var(--h-fs-xs);
    font-weight: var(--h-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--h-tracking-wide);
    color: var(--h-grey-50);
  }
  .h-roomgrid .h-col--sub[data-label]::before { content: none; }
  .h-roomgrid .h-select { padding: var(--h-s-3) var(--h-s-4); font-size: var(--h-fs-base); min-height: 44px; }
  /* The uncertain marker runs down the whole block card here, not one cell. */
  .h-roomgrid__row.is-uncertain { box-shadow: inset 3px 0 0 var(--h-warning); }
  .h-roomgrid__row.is-uncertain .h-col--sub { box-shadow: none; }
  .h-roomgrid .h-col--copy { text-align: left; }
  .h-roomgrid .h-col--copy .h-btn,
  .h-roomgrid__head .h-btn { min-height: 44px; }
  .h-roomgrid .h-col--resolved .h-pe-check { min-height: 44px; font-size: var(--h-fs-base); }
  .h-roomgrid .h-col--resolved .h-pe-check input { width: 22px; height: 22px; }

  /* A Y/N cell with no data-label is the defect this component exists to kill.
     Leave it visible rather than silent — an unlabelled control in a property
     is worse than an ugly one. */
  .h-roomgrid .h-col--yn:not([data-label]) { outline: 2px dashed var(--h-error); }
}

/* === 2. .h-segmented--yn — a two-option answer, not a dropdown ==============
   Clean / Undamaged / Working are yes-or-no. A <select> costs a tap, a native
   sheet, a scroll and a confirm for a binary answer; two buttons cost one tap.
   Sized down to sit in a table cell on desktop, 44px and full width on a
   phone. Works with <button> (mark .is-active) or with a <label> wrapping a
   hidden radio, which is what a form post wants. A third option ("—", clear)
   fits without any change: the columns are auto-flow. */
.h-segmented--yn {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 108px;
}
.h-segmented--yn .h-segmented__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: var(--h-s-1) var(--h-s-2);
  position: relative;
}
.h-segmented--yn .h-segmented__option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.h-segmented--yn .h-segmented__option:has(input:checked) {
  background: var(--h-blue);
  color: var(--h-white);
}
@media (max-width: 768px) {
  .h-segmented--yn { max-width: none; }
  /* min-WIDTH as well as min-height (06/09/2026). A 44px floor on one axis is
     not a 44px tap target: the height was right and the width was 30.9px. If a
     future container is too narrow to give every option its 44px the group now
     overflows visibly rather than shrinking silently, which is the failure you
     want — you can see it in a screenshot. */
  .h-segmented--yn .h-segmented__option {
    min-width: 44px;
    min-height: 44px;
    font-size: var(--h-fs-base);
  }
}
/* Every segmented option is a tap target, not just the Y/N ones. 44px is the
   floor for anything used one-handed in a property. */
@media (max-width: 768px) {
  .h-segmented__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* === 3. .h-cellinput — a borderless textarea inside a table cell ============
   The comment column is the only free-text field in a row of one-word answers,
   so it stays invisible until you touch it: transparent, no resize handle, no
   scrollbar (the JS grows it to scrollHeight). On a phone it becomes the
   primary edit target, so it gets a real border and a 44px floor. */
.h-cellinput {
  width: 100%;
  min-height: 2rem;
  padding: var(--h-s-2);
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-sm);
  line-height: var(--h-lh-snug);
  color: var(--h-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--h-radius);
  resize: none;
  overflow: hidden;
}
.h-cellinput:hover { background: var(--h-paper); }
.h-cellinput:focus {
  outline: none;
  background: var(--h-white);
  border-color: var(--h-cyan);
  box-shadow: var(--h-focus-glow);
}
.h-cellinput:disabled { background: var(--h-paper); color: var(--h-grey-70); }

/* A .h-textarea the script grows to fit: no handle, no scrollbar, no 120px
   floor. The full-size sibling of .h-cellinput — same behaviour, but it keeps
   its border because it is the main field on its screen, not a table cell. */
.h-textarea--auto { min-height: 0; resize: none; overflow: hidden; }
@media (max-width: 768px) {
  .h-cellinput {
    min-height: 44px;
    font-size: var(--h-fs-base);
    background: var(--h-white);
    border-color: var(--h-grey-10);
  }
}

/* === 4. .h-notice--muted / --check + a list and footnote body ===============
   .h-notice already carries a status colour on a left rule. These two add the
   remaining tones the attendance screen needs — muted for "nothing here yet",
   check for "read these before you file it" — and a body that can hold a list
   of flagged items plus the line explaining why they were flagged. The list
   itself is .h-att__list / .h-att__row, unchanged, with a stacked variant for
   a headline over its reason. */
.h-notice--muted {
  border-left-color: var(--h-grey-30);
  background: var(--h-grey-10);
  color: var(--h-grey-70);
}
.h-notice--check {
  border-left-color: var(--h-warning);
  background: var(--h-warning-soft);
  color: var(--h-warning-ink);
}
.h-notice__foot {
  margin: var(--h-s-3) 0 0;
  padding-top: var(--h-s-3);
  border-top: 1px solid var(--h-grey-30);
  font-size: var(--h-fs-xs);
  line-height: var(--h-lh-base);
  color: var(--h-grey-70);
}
.h-notice .h-att__list { margin: var(--h-s-2) 0 0; }
.h-notice .h-att__row { border-left: 0; padding-left: 0; border-bottom-color: var(--h-grey-30); }
/* order: 0 is not redundant — the base .h-att__row sends .h-att__text to
   order 3 below 640px so a count and an action can lead. A stacked row is a
   headline over its reason; the headline has to stay first. */
.h-att__row--stack { flex-direction: column; align-items: flex-start; gap: var(--h-s-1); }
.h-att__row--stack .h-att__text { order: 0; flex: 1 1 auto; width: 100%; font-weight: var(--h-fw-semibold); }
.h-att__row--stack .h-textarea,
.h-att__row--stack .h-evidence { width: 100%; }
.h-att__why { font-size: var(--h-fs-sm); line-height: var(--h-lh-snug); color: var(--h-grey-70); }

/* === 5. .h-charcount — a live counter beside a .h-textarea ==================
   Pairs with a label row. Tabular figures so the number doesn't jiggle the
   row on every keystroke; warning ink, not error, once it is over the limit —
   being over a paste limit is a nuisance, not a failure. */
.h-charcount {
  font-size: var(--h-fs-sm);
  color: var(--h-grey-50);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.h-charcount--over { color: var(--h-warning-ink); font-weight: var(--h-fw-semibold); }

/* .h-labelbar — the row that pairs a field label with a live counter or state
   on the right, above the control they belong to. The counter has to sit
   beside the label, not under the box: under the box it is below the fold on
   a long note, which is exactly when the count matters. Below 640px the
   label, its hint and the count fought each other for one line and wrapped
   through each other, so the count takes its own row. */
.h-labelbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--h-s-3);
  flex-wrap: wrap;
  margin-bottom: var(--h-s-1);
}
.h-labelbar .h-label { margin-bottom: 0; }
@media (max-width: 640px) {
  .h-labelbar { display: block; }
  .h-labelbar .h-charcount { display: block; margin-top: var(--h-s-1); }
}

/* === 6. .h-divider--label — "— or —" ======================================== */
.h-divider--label {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  border: 0;
  margin: var(--h-s-4) 0;
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-wide);
  color: var(--h-grey-50);
}
.h-divider--label::before,
.h-divider--label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--h-grey-10);
}

/* === 7. .h-optional-panel — an alternate path through a form ================
   A dashed edge says "you can skip this" without a colour saying "warning".
   Holds a .h-choices list of candidate records, or a second way of supplying
   the same thing (link an existing report, or upload the PDF). */
.h-optional-panel {
  padding: var(--h-s-4);
  margin: 0 0 var(--h-s-5);
  background: var(--h-paper);
  border: 1px dashed var(--h-grey-30);
  border-radius: var(--h-radius);
}
.h-optional-panel__title {
  margin: 0 0 var(--h-s-2);
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-semibold);
  color: var(--h-blue);
}
.h-optional-panel .h-choices { margin-bottom: 0; }

/* A numbered .h-filelist — the upload queue is ordered, and the order is the
   order the recordings get transcribed in, so it has to be on screen. */
.h-filelist--numbered .h-filelist__row { justify-content: flex-start; gap: var(--h-s-3); }
.h-filelist__index {
  flex: none;
  min-width: 1.75rem;
  font-weight: var(--h-fw-bold);
  color: var(--h-grey-50);
  font-variant-numeric: tabular-nums;
}
.h-filelist__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-filelist__size { flex: none; font-size: var(--h-fs-xs); color: var(--h-grey-50); }
@media (max-width: 768px) {
  .h-filelist--numbered .h-filelist__row { flex-wrap: wrap; }
  .h-filelist--numbered .h-filelist__row .h-btn { min-height: 44px; }
}

/* === 8. .h-stat--warning-soft / --error-soft + the panel button =============
   Soft-tinted .h-stat tiles, for a count that is itself the problem (items
   needing cleaning, items needing repair). Tint and ink only — same box.
   .h-btn--panel is the wide, wrapping, left-aligned button that carries a
   sentence rather than a verb ("N items need checking against the ingoing
   report"); .h-btn-warning is its amber skin. It is a .h-btn because it is
   tapped — BRAND.md: a tappable thing is never a badge or a tile. */
.h-stat--warning-soft { background: var(--h-warning-soft); border-color: var(--h-warning-soft); }
.h-stat--warning-soft .h-stat__value,
.h-stat--warning-soft .h-stat__label { color: var(--h-warning-ink); }
.h-stat--error-soft { background: var(--h-error-soft); border-color: var(--h-error-soft); }
.h-stat--error-soft .h-stat__value,
.h-stat--error-soft .h-stat__label { color: var(--h-error-ink); }

.h-btn--panel {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  width: 100%;
  text-align: left;
  padding: var(--h-s-4) var(--h-s-5);
  font-weight: var(--h-fw-regular);
  line-height: var(--h-lh-snug);
  letter-spacing: var(--h-tracking-body);
  text-transform: none;
  white-space: normal;
}
.h-btn--panel .h-btn__go { flex: none; font-weight: var(--h-fw-semibold); }
/* On a phone the sentence needs the full width, so the call to action drops
   to its own line underneath rather than squeezing the words into a column. */
@media (max-width: 640px) {
  .h-btn--panel { flex-wrap: wrap; }
  .h-btn--panel .h-btn__go { width: 100%; }
}
.h-btn-warning {
  background: var(--h-warning-soft);
  color: var(--h-warning-ink);
  border: 1px solid var(--h-warning);
}
.h-btn-warning:hover {
  background: var(--h-white);
  color: var(--h-warning-ink);
  border-color: var(--h-warning);
}

/* === 9. .h-sectionrule — a label with a hairline to the right edge ==========
   Groups rows under a heading without spending a card on it. Used for the room
   name above a list of items. */
.h-sectionrule {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  margin: 0 0 var(--h-s-3);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-wide);
  color: var(--h-blue);
}
.h-sectionrule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--h-grey-10);
}

/* Two row states for .h-att__row. .is-flash marks the row you were just sent
   to; .is-dropped is a row you removed — it stays on screen, faded, with its
   editable parts gone, so you can see what you took out. */
.h-att__row.is-flash { background: var(--h-warning-soft); box-shadow: var(--h-shadow); }
.h-att__row.is-dropped { opacity: 0.45; }
.h-att__row.is-dropped .h-cellinput,
.h-att__row.is-dropped .h-textarea,
.h-att__row.is-dropped .h-evidence { display: none; }

/* === 10. .h-evidence — the Ingoing / Final label column =====================
   A fixed label column beside a value, stacked. Two readings of the same thing
   at two points in time, side by side and always on screen: what was recorded
   going in, what was recorded at the end. Deliberately quiet — the eye should
   land on the editable line above and come down here only to check it.
   Nothing about it is ECR-specific: any before/after pair fits (appraisal then
   sale price, quoted then invoiced, first then latest reading). */
.h-evidence {
  margin-top: var(--h-s-2);
  padding-top: var(--h-s-2);
  border-top: 1px solid var(--h-grey-10);
}
.h-evidence__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--h-s-2);
  align-items: baseline;
}
.h-evidence__row + .h-evidence__row { margin-top: var(--h-s-1); }
.h-evidence__label {
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-wide);
  color: var(--h-grey-50);
}
.h-evidence__value {
  margin: 0;
  font-size: var(--h-fs-sm);
  line-height: var(--h-lh-snug);
  color: var(--h-grey-70);
}
.h-evidence__value--now { color: var(--h-ink); }
.h-evidence__value--empty { font-style: italic; color: var(--h-grey-50); }

/* === 11. .h-commitbar — the sticky bottom commit bar ========================
   One irreversible action, always reachable, with the save state beside it.
   Not .h-sign__bar, which is a navy header band. Below 860px the buttons go
   full width — this is the last thing tapped before walking out of a property,
   and it should be a thumb-sized target. */
.h-commitbar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: var(--h-s-6);
  background: var(--h-white);
  border-top: 2px solid var(--h-blue);
  box-shadow: var(--h-shadow-lg);
}
.h-commitbar__in {
  max-width: var(--h-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--h-s-4);
  flex-wrap: wrap;
  padding: var(--h-s-3) var(--h-s-4);
}
.h-commitbar__state { font-size: var(--h-fs-sm); color: var(--h-grey-70); }
@media (max-width: 860px) {
  .h-commitbar__in { padding: var(--h-s-2) var(--h-s-3); }
  .h-commitbar__in .h-btn { flex: 1 1 auto; min-height: 48px; }
}

/* .h-sr-only — text for screen readers only. A column of icon-only buttons
   still needs a heading; this is where it goes, rather than an empty <th>. */
.h-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* === 12. .h-table--stack — a table that becomes card rows on a phone ========
   Added 06/09/2026 with the ECR list. A .h-table of records side-scrolls on an
   iPhone: the ECR dashboard did exactly that, and the columns that fell off the
   right were status and who it belonged to — the two the property manager was
   scanning for. Below 640px each row becomes a bordered card, the first cell is
   its heading, and every other cell carries its column name from data-label.

   Same discipline as .h-roomgrid: data-label is REQUIRED on every cell except
   the first, and a missing one is outlined rather than silently unlabelled. */
.h-table--stack .h-table__lead { font-weight: var(--h-fw-semibold); color: var(--h-blue); }
@media (max-width: 640px) {
  .h-table--stack thead { display: none; }
  .h-table--stack,
  .h-table--stack tbody,
  .h-table--stack td { display: block; width: 100%; }
  .h-table--stack tbody tr {
    display: block;
    margin-bottom: var(--h-s-3);
    padding: var(--h-s-3) var(--h-s-4);
    background: var(--h-white);
    border: 1px solid var(--h-grey-10);
    border-radius: var(--h-radius);
    box-shadow: var(--h-shadow-sm);
  }
  .h-table--stack tbody tr:hover td { background: transparent; }
  .h-table--stack td {
    padding: var(--h-s-1) 0;
    border-bottom: 0;
    display: flex;
    gap: var(--h-s-3);
    align-items: baseline;
    justify-content: space-between;
  }
  .h-table--stack td[data-label]::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--h-fs-xs);
    font-weight: var(--h-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--h-tracking-wide);
    color: var(--h-grey-50);
  }
  .h-table--stack .h-table__lead {
    display: block;
    font-size: var(--h-fs-base);
    line-height: var(--h-lh-snug);
    padding-bottom: var(--h-s-2);
    margin-bottom: var(--h-s-2);
    border-bottom: 1px solid var(--h-grey-10);
  }
  .h-table--stack .h-table__act { justify-content: stretch; padding-top: var(--h-s-3); }
  .h-table--stack .h-table__act .h-btn { width: 100%; min-height: 44px; }
  /* The .h-roomgrid rule, for the same reason: an unlabelled value in a stack
     of values is a number with no name. */
  .h-table--stack td:not([data-label]):not(.h-table__lead):not(.h-table__act) {
    outline: 2px dashed var(--h-error);
  }
}


/* === 13. .h-roomjump — jump to a room, and fold the ones you are done with ==
   Report 83 is 66,010px tall: 78 phone screens, and "Garage" is 63 swipes from
   the top. A condition report is not read top to bottom — a property manager
   opens it to find ONE room. So the rooms fold, and there is a jump control
   that stays on screen while she scrolls.

   A <select> rather than a scroller of chips: on a phone it opens the native
   wheel, which is one tap and reachable with a thumb, and it does not eat a
   second line of a 390px screen when a property has fourteen rooms. */
.h-roomjump {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  padding: var(--h-s-3) 0;
  margin-bottom: var(--h-s-4);
  background: var(--h-paper);
  border-bottom: 1px solid var(--h-grey-10);
}
.h-roomjump__label {
  flex: none;
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-wide);
  color: var(--h-grey-50);
}
.h-roomjump .h-select { flex: 1 1 auto; min-height: 44px; }
.h-roomjump__fold { flex: none; min-height: 44px; }

/* The room card as a <details>. The head is the <summary>, so the whole band
   is the 44px target rather than a chevron she has to hit. */
.h-roomgrid > summary.h-roomgrid__head {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.h-roomgrid > summary.h-roomgrid__head::-webkit-details-marker { display: none; }
.h-roomgrid__fold {
  flex: none;
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  color: var(--h-blue);
}
.h-roomgrid[open] > summary .h-roomgrid__fold::after { content: "\2212"; }
.h-roomgrid:not([open]) > summary .h-roomgrid__fold::after { content: "\002B"; }

/* === 14. .h-searchbox — filter a list in place ==============================
   Twenty-nine reports on one page and no way to find the one you did this
   morning except by reading every address. Client-side: the rows are already
   on the phone, and a round trip on 4G to filter them is a round trip for
   nothing. */
.h-searchbox {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  margin-bottom: var(--h-s-5);
}
.h-searchbox .h-input { flex: 1 1 auto; min-height: 44px; margin: 0; }
.h-searchbox__count {
  flex: none;
  font-size: var(--h-fs-sm);
  color: var(--h-grey-50);
  white-space: nowrap;
}
.h-searchbox__empty {
  font-size: var(--h-fs-sm);
  color: var(--h-grey-70);
  padding: var(--h-s-5) 0;
}

/* A filtered-out row has to actually go. .h-table--stack sets display:block on
   the table, the tbody and every row for the phone layout, and .h-sectionrule
   is display:flex — all of which beat the UA stylesheet [hidden] rule. Same
   trap as .h-label[hidden]: the element stays on screen and the code that
   hid it looks correct. */
.h-table[hidden],
.h-table--stack tbody tr[hidden],
.h-sectionrule[hidden] { display: none !important; }
/* .h-btn is display:inline-flex, so a button toggled with [hidden] stayed on
   screen — the Call Log's "Add a name" hint showed under every real name, and
   Studio's ECR "Copy" button under every empty comment. (07/09/2026) */
.h-btn[hidden] { display: none !important; }

/* ---------- Card modal: phone sheet + pinned actions (07/09/2026) ----------
   Opt-in modifiers for .h-modal--card, added for the Call Log message card.
   Additive only: without .h-modal--sheet the card behaves exactly as before.

   .h-cardm__actionbar  — the stack of primary actions in the side rail.
   .h-modal--sheet      — at phone width the 920px card stops being a dialog
                          cropped to the viewport and becomes a full-height
                          sheet, with the action bar pinned to the bottom edge
                          so "call them back" is always one thumb away. The
                          sheet clears the transform on .h-modal so the fixed
                          bar positions against the viewport, not the card. */
.h-cardm__actionbar { display: flex; flex-direction: column; gap: var(--h-s-2); }
.h-cardm__actionbar:empty { display: none; }

@media (max-width: 760px) {
  .h-modal--sheet {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    overscroll-behavior: contain;
  }
  /* Clears a two-row action bar — the last thing in the rail must not sit
     under it. */
  .h-modal--sheet .h-cardm__side {
    padding-bottom: calc(var(--h-s-10) + var(--h-s-10));
  }
  .h-modal--sheet .h-cardm__actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    flex-wrap: wrap;
    padding: var(--h-s-3) var(--h-s-4);
    padding-bottom: calc(var(--h-s-3) + env(safe-area-inset-bottom, 0px));
    background: var(--h-white);
    border-top: 1px solid var(--h-grey-10);
    box-shadow: var(--h-shadow-lg);
    z-index: 2;
  }
  .h-modal--sheet .h-cardm__actionbar .h-btn { flex: 1 1 40%; }
}

/* ---------- Modal stacked over another modal (07/09/2026) ------------------
   A confirm opened FROM an already-open .h-modal. Both sat at --h-z-modal, so
   the winner was whichever came later in the DOM — in the Call Log that was
   the message card, which painted over its own Rex confirm: you pressed
   "Rex Appraisal" and got a dim screen you could not click through. Order in
   the document decides a tie, and relying on that is how it broke; these say
   it out loud. Additive — only a dialog that opts in moves up.

   The backdrop keys off --h-z-modal, not --h-z-backdrop: it has to cover the
   modal it was opened from, or the dialog paints on top while the modal
   underneath still wins every click — backdrop-to-dismiss does nothing and the
   fields behind stay editable. Same bug wearing a different hat. */
.h-modal-backdrop--over { z-index: calc(var(--h-z-modal) +  5); }
.h-modal--over          { z-index: calc(var(--h-z-modal) + 10); }