/* hierarchy.css: visual hierarchy layer for the overhaul (20 Oct 2026).
   Loaded last. Squint test on the home screen found four dark shapes competing (Next bar, active tab,
   chat button, first tile) and all text squeezed between 11 and 13.5px. The fix is four clear levels:

   L1  What's next      the Next bar: the only dark block on the screen, biggest type
   L2  Today            day title, first time, the to-dos (things someone must do)
   L3  Getting around   block tabs, section buttons, weather, directions
   L4  Small print      brand line, crew names, flight detail

   Type scale (px): 30 clock · 22 title · 17 lead · 15 body · 13 meta · 11 label (one per section)
   Spacing scale (px): 4 · 8 · 12 · 16 · 24 · 32 · 48. Inside a group 8, between groups 24, between sections 32. */

:root {
  --t-clock: 30px; --t-title: 22px; --t-lead: 17px; --t-body: 15px; --t-meta: 13px; --t-label: 11px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
}

/* ---------- buttons take the page ink. A <button> does not inherit colour, so at night the check-in
   names stayed browser black on the espresso cards (found 20 Oct, 375 wide). ---------- */
button, select, textarea, input { color: inherit; }

/* ---------- L1: the Next bar ---------- */
.now-title { font-size: var(--t-lead); line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; }  /* wrap, never cut the time off */
.nc-time { font-family: var(--font-display); font-size: var(--t-clock); font-weight: 600; letter-spacing: 0; }

/* ---------- L4: header brand line, quieter ---------- */
#headSubtitle { font-size: var(--t-meta); letter-spacing: 0.02em; text-transform: none; color: var(--muted); }

/* ---------- L3: block tabs. Active = ink text + underline, not a second dark slab ---------- */
.brand-strip-seg { font-size: var(--t-meta); }
.brand-strip-seg.on { background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

/* ---------- the developer note is not for the crew ---------- */
.placeholder-note { display: none; }

/* ---------- L2: today's card ---------- */
.tp-card { padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; }
.tp-header { order: -2; }
.tp-header { margin-bottom: var(--s-4); }
.tp-date { font-family: var(--font-display); font-size: var(--t-title); font-weight: 600; letter-spacing: 0; line-height: 1.1; }
.tp-type { font-size: var(--t-meta); letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: var(--s-1); }
.tp-info { display: grid; gap: var(--s-4); }
.tp-row { font-size: var(--t-body); line-height: 1.4; }
.tp-row strong { font-weight: 650; }
/* detail drops to its own quiet line instead of grey italics in brackets */
.tp-row em { display: block; font-style: normal; font-size: var(--t-meta); color: var(--muted); margin-top: 2px; }

/* the to-do is an action: full body size, warn colour, a box to tick, and it sits first */
.tp-todo {
  order: -1; font-style: normal; font-size: var(--t-body); color: var(--ink);
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-3); margin: 0 0 var(--s-4);
  border: 1px solid var(--warn); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 7%, transparent);
}
.tp-todo::before { content: ""; flex: 0 0 16px; height: 16px; border: 1.5px solid var(--warn); border-radius: var(--r-xs); }

/* one primary action per card: Directions. Maps becomes a quiet link */
.tp-actions { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.tp-actions a { font-size: var(--t-body); }
.tp-actions a:first-child { flex: none; white-space: nowrap; background: none; border: 0; padding: 0; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.tp-actions a:last-child { flex: 1; text-align: center; background: var(--ink); color: var(--peach); border: 0; border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-weight: 600; }

/* ---------- L3: weather heading reads as a heading, not a tag ---------- */
.weather-meta .label { font-size: var(--t-meta); letter-spacing: 0.02em; }
.weather-strip-wrap { margin-top: var(--s-6); }

/* ---------- L3: section buttons. No dark slab; the active one is ink-outlined ---------- */
.section-nav { margin-top: var(--s-6); }
.section-btn { font-size: var(--t-meta); }
.section-btn.active { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- chat button: smaller and clear of the weather hours ---------- */
.chat-fab { width: 48px; height: 48px; }
.app main, .app .content { padding-bottom: 88px; }

/* rows that became buttons: a button shrinks to its content, the old div/label filled the line */
.shot-check-row, .search-item, .camp-dress-name { width: 100%; }
.search-item .si-kind, .search-item .si-title, .search-item .si-sub { display: block; }  /* were divs; a button holds spans */

/* keyboard users can see where they are (there was no focus style anywhere) */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- night contrast fixes (20 Oct sweep at 375 wide) ---------- */
/* active sub-tab: page-ground text on the accent, never white (white on the night peach was 1.5:1) */
.sub-tab.active, [data-brand="evie"] .sub-tab.active { color: var(--peach); }
/* hourly weather: the white wash turned the night strip grey and sank the beige text to 3:1 */
.strip { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hr.night { background: color-mix(in srgb, var(--ink) 3%, transparent); color: var(--muted); }
.hr-uv.high, .hr-uv.extreme { color: var(--warn); }
/* golden-hour cells sit on the beige fill: their labels take the ink (warn sank to 3.9:1 there) */
.hr-marker, .hr.golden, .hr.golden .hr-uv { color: var(--ink); }

/* ---------- Evie days: Kindred (the F27 collection) leads the header, the Evie Young logo signs off small at the foot (his call, 20 Oct) ---------- */
.head-logo.is-collection { height: 30px; margin: 0; }
.brand-foot { display: flex; justify-content: center; padding: var(--s-6) 0 96px; }  /* 96: clear of the chat bubble */
.brand-foot[hidden] { display: none; }
.brand-foot img { height: 22px; width: auto; opacity: 0.8; }
html[data-night] .brand-foot img { filter: invert(1) hue-rotate(180deg); }

/* ---------- Instagram link: plain ink, not the Instagram gradient (his call, 20 Oct; white on the orange end was 2.3:1) ---------- */
.model-card-link.ig { background: var(--ink); color: var(--peach); }

/* ---------- Directions first, Maps link after: the floating chat bubble sat on top of the right-hand button ---------- */
.tp-actions { flex-direction: row-reverse; justify-content: flex-end; }

/* ===================================================================
   Web interface guidelines pass (21 Oct 2026). Behaviour and access only:
   no colour, type or layout changes, so the contrast sweep still holds.
   =================================================================== */

/* headings that used to be divs keep the look they had */
h1.role-prompt, h1.gate-title { font-weight: inherit; }
label.gate-msg { display: block; }

/* screen-reader-only page heading, and a skip link that appears on the first Tab */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: var(--s-2); left: var(--s-2); z-index: 10000; padding: var(--s-2) var(--s-4);
  background: var(--ink); color: var(--peach); border-radius: var(--r-sm); font-size: var(--t-meta); font-weight: 600; text-decoration: none;
  transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; }

/* focus rings the inline styles' "outline: none" had been beating on specificity */
.gate input:focus-visible, .form-row input:focus-visible, .form-row textarea:focus-visible, .form-row select:focus-visible,
.search-input:focus-visible, #notesArea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.input-wrap:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.input-wrap textarea:focus-visible { outline: none; }  /* the wrap carries the ring */

/* night: tell the browser the page is dark, so scrollbars and native pickers follow */
html[data-night] { color-scheme: dark; }

/* taps: no double-tap zoom wait on controls */
a, button, select, label, [role="button"] { touch-action: manipulation; }

/* scrolling inside a sheet or popup stays inside it */
.sheet-scroll, .popup-overlay, .popup-card, .chat-overlay-body, .scene-popup-scroll { overscroll-behavior: contain; }

/* bigger hit areas for the small round controls, without changing how they look */
.head-btn, .chat-overlay-close, button.send, .camp-tick, .mcard-links a, .list-actions button, .gate-back { position: relative; }
.head-btn::after, .popup-close::after, .sheet-close::after, .chat-overlay-close::after, button.send::after,
.dbd-check::after, .camp-tick::after, #dressesByDay .sc-tick::after, .scene-popup-close::after,
.mcard-links a::after, .list-actions button::after, .gate-back::after { content: ""; position: absolute; }
.head-btn::after { inset: -6px -4px; }                 /* 32 -> 40 x 44, the 8px gap is shared */
.popup-close::after { inset: -8px; }                   /* 28 -> 44 */
.sheet-close::after, .chat-overlay-close::after, button.send::after { inset: -6px; }   /* 32 -> 44 */
.dbd-check::after { inset: -10px; }                    /* 24 -> 44 */
.camp-tick::after { inset: -7px; }                     /* 30 -> 44 */
#dressesByDay .sc-tick::after { inset: -9px; }         /* 22 -> 40, kept clear of the silhouette it sits beside */
.scene-popup-close::after { inset: -4px; }             /* 36 -> 44 */
.mcard-links a::after { inset: -6px -2px; }            /* 24 -> 28 x 36 between its neighbour */
.list-actions button::after, .gate-back::after { inset: -8px -4px; }  /* text buttons with no padding */