/* ============================================================
   Solstice — design tokens (single source of truth)
   ------------------------------------------------------------
   Every page links this file instead of carrying its own copy.
   Before this existed the :root block was pasted into 38 pages
   and had already drifted (board.html shipped a different gold,
   kiosk.html a different ink). Page-local :root blocks are still
   allowed, but only for values that genuinely differ from these.
   ============================================================ */
:root {
  /* The site has one palette and no dark variant. Declaring it keeps the UA
     surfaces we never style — scrollbars, the native date and select popups,
     autofill — on the light side, and keeps force-dark heuristics off a page
     that already has its own contrast budget. Every page carried this before
     the tokens moved here; it belongs with them. */
  color-scheme: light;

  /* ---- Brand: Solstice teal-navy (primary) ---- */
  --solstice-950: #04222F;   /* ink / deepest */
  --solstice-900: #052E42;
  --solstice-800: #063A55;
  --solstice-700: #084868;   /* ◆ core brand — logo color */
  --solstice-600: #0E5A80;
  --solstice-500: #1C6E96;
  --solstice-400: #4F90AE;
  --solstice-300: #8FB6CB;
  --solstice-200: #C3D8E2;
  --solstice-100: #E1ECF1;
  --solstice-50:  #F0F5F8;

  /* ---- Accent: Solstice brass / gold (warm zenith light) ---- */
  --gold-700: #7E5A24;
  --gold-600: #946B2E;
  --gold-500: #B98A45;   /* ◆ core accent */
  --gold-400: #CBA463;
  --gold-300: #DBBE8A;
  --gold-200: #EAD9B9;
  --gold-100: #F4EBD9;

  /* ---- Warm neutrals: ivory · sand · stone ---- */
  --paper:      #FFFFFF;
  --ivory:      #FBF8F2;   /* page background */
  --sand:       #F1EADD;
  --stone-100:  #ECE6DA;
  --stone-200:  #DED6C7;
  --stone-300:  #C9BEAB;
  --stone-400:  #AB9F8A;
  --stone-500:  #776E5C;
  --stone-600:  #6A6151;
  --stone-700:  #4C463A;
  --stone-800:  #322E27;
  --ink:        #20211F;   /* primary text */

  /* ---- Status (kept warm + restrained) ---- */
  --success-600: #356B4C;  --success-500: #4A8463;  --success-100: #DDEBE2;
  --warning-600: #7A5416;  --warning-500: #C28A2E;  --warning-100: #F4E7CC;
  --danger-600:  #8E3A2C;  --danger-500:  #AD4A38;  --danger-100:  #F0DCD6;
  --info-600:    #0E5A80;  --info-500:    #1C6E96;  --info-100:    #E1ECF1;

  /* Surfaces */
  --surface-page:    var(--ivory);
  --surface-card:    var(--paper);
  --surface-sunken:  var(--sand);
  --surface-raised:  var(--paper);
  --surface-deep:    var(--solstice-800);   /* dark sections / hero */
  --surface-deepest: var(--solstice-950);
  --surface-gold:    var(--gold-100);

  /* Text */
  --text-primary:    var(--ink);
  --text-secondary:  var(--stone-600);
  --text-tertiary:   var(--stone-500);
  --text-on-deep:    var(--ivory);
  --text-on-deep-dim:#A9C2CF;
  --text-accent:     var(--gold-600);
  --text-brand:      var(--solstice-700);

  /* Lines & borders */
  --border-subtle:   var(--stone-200);
  --border-default:  var(--stone-300);
  --border-strong:   var(--stone-400);
  --border-on-deep:  rgba(255,255,255,0.16);
  --hairline-gold:   var(--gold-400);

  /* Interactive */
  --accent:          var(--gold-500);
  --accent-hover:    var(--gold-600);
  --brand:           var(--solstice-700);
  --brand-hover:     var(--solstice-800);
  --focus-ring:      var(--solstice-500);

  /* ============================================================
     Solstice — Typography tokens
     Display: Cormorant Garamond · UI/body: Jost
     ============================================================ */
  --font-serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-sans:  'Jost', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);

  --text-2xs:  12px;   /* functional floor: nothing interactive or informational goes below this */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  50px;
  --text-5xl:  66px;
  --text-6xl:  88px;
  --text-display: 120px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:  1.04;
  --leading-snug:   1.18;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-label:   0.16em;
  --tracking-eyebrow: 0.30em;

  /* ============================================================
     Solstice — Spacing & layout tokens
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --gutter:        clamp(20px, 5vw, 80px);
  --section-y:     clamp(64px, 9vw, 144px);

  /* ============================================================
     Solstice — Elevation: radius, borders, shadows, motion
     ============================================================ */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);

  --border-hair: 1px;
  --border-thick: 1.5px;

  --shadow-xs:  0 1px 2px rgba(8, 40, 58, 0.06);
  --shadow-sm:  0 1px 3px rgba(8, 40, 58, 0.07), 0 1px 2px rgba(8, 40, 58, 0.05);
  --shadow-md:  0 4px 14px rgba(8, 40, 58, 0.08), 0 1px 4px rgba(8, 40, 58, 0.05);
  --shadow-lg:  0 12px 32px rgba(8, 40, 58, 0.10), 0 4px 10px rgba(8, 40, 58, 0.05);
  --shadow-xl:  0 28px 64px rgba(8, 40, 58, 0.14), 0 8px 20px rgba(8, 40, 58, 0.06);
  --shadow-deep: 0 24px 60px rgba(4, 18, 26, 0.40);

  --ring: 0 0 0 3px #1C6E96;
  --ring-gold: 0 0 0 3px rgba(185, 138, 69, 0.30);

  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0.05, 0.30, 0.95);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   Target size floor — 44px (PRODUCT.md accessibility floor)
   ------------------------------------------------------------
   These components are declared per page. The floor lives here
   so it cannot drift back out on a single page, and it sets
   min-height only, so page-local padding, colour and type still
   win. Everything listed measured under 44px on a 375px screen.
   ============================================================ */
.sol-btn,
.ch-fab,
.cp-cat            { min-height: 44px; }

.sol-search-btn    { min-height: 44px; min-width: 44px; }

/* Block-level links and chips: they sit in flex rows, so they
   shrink-wrap and centring the text vertically is the only change. */
.sol-subnav a,
.pol-subnav a,
.sol-shell__futil a,
.cp-sort,
.hr-allbtn,
.gov-allbtn,
.fcard__pdf,
.fb-chip           { display: flex; align-items: center; min-height: 44px; }

/* Wordmark is a column (name over tagline), so centre on the block axis. */
.sol-shell__brand  { min-height: 44px; justify-content: center; }

/* Checkbox and radio rows: the label is the target, not the 13px box. */
.sol-check,
.nf-pref           { display: inline-flex; align-items: center; min-height: 44px; }

/* Accordion headers double as buttons. */
.hr-sec__head,
.gov-sec__title    { min-height: 44px; display: flex; align-items: center; }

/* Screen-reader-only text. */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Phone and email links in directories and hotline lists are dialled one-handed
   in a hurry: the number itself is the target, not a 19px line of text. Inline
   links inside a sentence are deliberately left alone (WCAG 2.5.8 exempts them,
   and forcing them to 44px breaks the line). */
.ct-phone a,
.ct-mail a,
.mi-jump a,
.ct-urgent .n a,
.mi-num b a       { display:flex; align-items:center; min-height:44px;
                    color:inherit; text-decoration:none; }
.ct-mail a        { text-decoration:none; }
.ct-phone a:hover, .ct-urgent .n a:hover, .mi-num b a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ct-phone a:focus-visible, .ct-urgent .n a:focus-visible, .mi-num b a:focus-visible{
  outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm); }

/* Below ~380px the header has to choose between the tagline and the controls
   that do something. The tagline is decoration; it goes. */
@media (max-width:380px){ .sol-shell__sub{ display:none; } }

/* ============================================================
   Narrow-screen guards (320px is the floor: an iPhone SE still
   has to work, and older residents are on older phones)
   ============================================================ */
/* Section sub-navigation wraps instead of pushing the page sideways.
   It broke at 1024 once the labels came up to the 12px floor. */
.sol-subnav__in, .pol-subnav__in{ flex-wrap:wrap; }

/* ============================================================
   Section sub-bar (two-tier nav)
   ------------------------------------------------------------
   Residents, Community and Policies have carried this bar inline
   since they were written — fourteen identical copies. Forms is
   the section that never got one, and rather than paste copy
   fifteen and sixteen the rules live here once.
   The older pages keep their inline block; it is byte-identical,
   so nothing moves. Deleting those is a separate tidy-up.
   ============================================================ */
.sol-subnav{ background:var(--solstice-900); border-bottom:1px solid rgba(255,255,255,0.07);
  position:sticky; top:62px; z-index:55; }
.sol-subnav__in{ max-width:1180px; margin:0 auto; padding:0 22px; display:flex; align-items:center;
  gap:4px; min-height:46px; }
.sol-subnav__lb{ font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-300); margin-right:14px; white-space:nowrap; }
.sol-subnav a{ font-family:var(--font-sans); font-weight:500; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,0.6); text-decoration:none; padding:9px 13px;
  border-radius:var(--radius-sm); white-space:nowrap;
  transition:color .14s ease, background .14s ease; }
.sol-subnav a:hover{ color:var(--ivory); background:rgba(255,255,255,0.07); }
.sol-subnav a:focus-visible{ outline:none; box-shadow:var(--ring); }
.sol-subnav a.is-active{ color:var(--ivory); background:rgba(255,255,255,0.10); }
@media (max-width:860px){
  /* Six labels will not wrap onto a phone without eating the screen, so the bar
     scrolls sideways instead — the scrollbar itself is hidden because a visible
     one under a nav reads as broken. */
  .sol-subnav__in{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:0 14px; }
  .sol-subnav__in::-webkit-scrollbar{ display:none; }
}

/* An anchor jump on a page with BOTH sticky bars lands the heading at y=0 —
   underneath 62px of header and 47px of sub-bar, so the section a resident just
   asked for is the one thing they cannot see. */
.sol-subnav ~ * [id]{ scroll-margin-top:124px; }

@media (max-width:380px){
  /* The wordmark, not the tagline, is what actually eats the header at 320px. */
  .sol-shell__logo{ height:15px; }
  /* A "Beta" pill is not worth a horizontal scrollbar. */
  .sol-shell__right .sol-badge{ display:none; }
}

/* Line-item grids are data: let them scroll in place rather than drag the page. */
.items{ overflow-x:auto; }
.items__head, .items__row{ min-width:300px; }

/* Three classic min-width floors that let a child push the whole page sideways: */
/* 1. the UA gives every <fieldset> min-width:min-content, which ignores overflow */
fieldset{ min-width:0; }
/* 2. flex items refuse to shrink past min-content unless told */
.sol-btn{ min-width:0; }
/* 3. anything long inside a flex/grid cell */
.sol-shell__main, .ac-main{ min-width:0; }