/* ==========================================================================
   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:     #c4c4c4;
  --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;    /* pills/chips only — not a licence for big card radii */

  /* 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-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) ------------------------------ */
.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%; }

/* ---------- 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: 0 10px 40px rgba(0,0,0,0.25);
  text-align: center;
}
.h-card--login:hover { transform: none; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }

/* ── 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); }

/* 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-pill);
  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);
}

/* ---------- 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); }

/* 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-pill);
  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-pill);
}
.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); }

/* ---------- 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);
}
.h-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--h-s-2);
}

/* ---------- 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-pill);
}
.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-pill);
  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; }
}