/* ==========================================================================
   screens.css — per-screen layout that is not a reusable component.
   ========================================================================== */

/* ---- Home ---------------------------------------------------------------- */

.home-hero {
  padding: var(--s-7) var(--gutter) var(--s-5);
}

.home-hero h1 {
  /* Must exceed 2.5rem at 375px. Measured, not eyeballed. */
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--w-regular);
  font-variation-settings: 'opsz' 144, 'WONK' 1;
}

.home-hero .home-sub {
  margin-top: var(--s-3);
  color: var(--ink-muted);
  max-width: 34ch;
}

/* The state band — one module, changing with GS-#. What keeps a hub alive. */
.band {
  margin: var(--s-5) var(--gutter) 0;
  border: 1px solid var(--ink);
  padding: var(--s-4);
}

.band-label { display: block; margin-bottom: var(--s-2); }
.band-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.band-strong { font-family: var(--font-display); font-size: var(--t-sub); font-variation-settings: 'opsz' 24; }
.band-foot { margin-top: var(--s-4); display: flex; gap: var(--s-3); align-items: center; }
.band-timeline { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.band-step { display: flex; gap: var(--s-3); font-size: var(--t-small); color: var(--ink-muted); }
.band-step[data-done="true"] { color: var(--ink); }
.band-step-dot { width: 7px; height: 7px; margin-top: 0.5em; flex-shrink: 0; background: var(--hairline); }
.band-step[data-done="true"] .band-step-dot { background: var(--accent); }

/* Deliberate rhythm: a tight caption after the hero, then the long gap. */
.home-caption {
  padding: var(--s-4) var(--gutter) 0;
  color: var(--ink-muted);
  font-size: var(--t-small);
  align-items: baseline;
  gap: var(--s-4);
}
.home-caption p { max-width: 26ch; }
.home-all { flex-shrink: 0; white-space: nowrap; }
.home-index { margin-top: var(--s-7); }

/* ---- category screens ---------------------------------------------------- */

.cat-head { padding: var(--s-6) var(--gutter) var(--s-4); }
.cat-head h1 { font-family: var(--font-display); font-size: var(--t-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); font-weight: var(--w-regular); }
.cat-intro { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure); }
.cat-next { padding: var(--s-6) var(--gutter) var(--s-8); }

/* ---- search -------------------------------------------------------------- */

.search-screen { padding-top: var(--s-4); }
.search-input-wrap { padding: 0 var(--gutter) var(--s-4); }
.search-input-wrap input { width: 100%; min-height: var(--tap); padding: var(--s-3); border: 1px solid var(--ink); background: var(--paper); font-size: var(--t-body); }
.search-group-label { padding: var(--s-5) var(--gutter) var(--s-2); }
.search-empty { padding: var(--s-6) var(--gutter); color: var(--ink-muted); }

/* ---- directory ----------------------------------------------------------- */

/* ---- directory: an accordion of areas ------------------------------------ */

.dir-section {
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: calc(var(--topbar-h) + var(--safe-t));
}
.dir-section:first-of-type { border-top: 1px solid var(--hairline); }

.dir-summary {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-5) var(--gutter);
  min-height: var(--tap);
  cursor: pointer;
  list-style: none;                 /* kill the default disclosure triangle */
}
.dir-summary::-webkit-details-marker { display: none; }
.dir-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.dir-ord { flex-shrink: 0; }
.dir-name { flex: 1; }
.dir-count { flex-shrink: 0; }

/* Our own marker: a rotating caret drawn from borders, no icon spent. */
.dir-chev {
  flex-shrink: 0;
  width: 7px; height: 7px;
  margin-left: var(--s-2);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .dir-chev { transition: transform var(--d-state) var(--ease-inout); }
}
.dir-section[open] > .dir-summary .dir-chev {
  transform: rotate(225deg) translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
  .dir-summary:hover { background: var(--wash); }
}

.dir-section[open] > .dir-summary { border-bottom: 1px solid var(--hairline); }

.dir-body { padding-bottom: var(--s-5); }
.dir-blurb { padding: var(--s-4) var(--gutter) var(--s-3); max-width: 46ch; }
.dir-foot { padding: var(--s-4) var(--gutter) 0; }

/* ---- item detail --------------------------------------------------------- */

.item-head { padding: var(--s-5) var(--gutter) var(--s-4); }
.item-name { font-family: var(--font-display); font-size: var(--t-title); line-height: var(--lh-title); font-weight: var(--w-regular); }
.item-gloss { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure); }
.item-meta { padding: var(--s-4) var(--gutter); border-top: 1px solid var(--hairline); }
.item-meta dt { font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--ink-muted); margin-top: var(--s-3); }
.item-meta dd { margin: var(--s-1) 0 0; }

/* ---- tracker ------------------------------------------------------------- */

.tracker { padding: var(--s-5) var(--gutter); }
.tracker-eta { font-family: var(--font-display); font-size: var(--t-title); font-variation-settings: 'opsz' 48; }
.tracker-steps { margin-top: var(--s-5); border-left: 1px solid var(--hairline); padding-left: var(--s-4); }
.tracker-step { position: relative; padding-bottom: var(--s-5); }
.tracker-step::before { content: ''; position: absolute; left: calc(var(--s-4) * -1 - 4px); top: 6px; width: 7px; height: 7px; background: var(--hairline); }
.tracker-step[data-done="true"]::before { background: var(--accent); }
.tracker-late { border: 1px solid var(--ink-alarm); padding: var(--s-4); margin-top: var(--s-4); }

/* ---- receipt ------------------------------------------------------------- */

.receipt { padding: var(--s-5) var(--gutter); font-variant-numeric: tabular-nums; }
.receipt-line { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); }
.receipt-rule { border-top: 1px solid var(--hairline); margin-block: var(--s-3); }
.receipt-total { font-weight: var(--w-bold); }
.receipt-vat { font-size: var(--t-small); color: var(--ink-muted); }

/* ---- surfaces (email, sms, pass, table tent) ----------------------------- */

.surface {
  margin: var(--s-4) var(--gutter);
  border: 1px solid var(--hairline);
  padding: var(--s-4);
}
.surface-label { display: block; margin-bottom: var(--s-3); color: var(--ink-muted); }
.surface-sms { max-width: 30ch; background: var(--wash); padding: var(--s-3); }
.surface-pass { border: 1px solid var(--ink); padding: var(--s-4); }
.surface-pass-strip { height: 3px; background: var(--accent); margin-block: var(--s-3); }

/* ---- debug --------------------------------------------------------------- */

.debug {
  position: fixed;
  right: var(--s-3);
  bottom: calc(var(--tabbar-h) + var(--actionbar-h) + var(--safe-b) + var(--s-3));
  z-index: 55;
}

.debug-toggle {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: var(--s-2) var(--s-3);
  min-height: var(--tap);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.debug-panel {
  margin-top: var(--s-2);
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: var(--s-3);
  width: 210px;
}

.debug-panel button { display: block; width: 100%; text-align: left; padding: var(--s-2); font-size: var(--t-small); }
.debug-panel button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---- the six on Home ------------------------------------------------------
   Ranked above the eighteen because measurement said nothing was ranked: 449
   of 464 routes were exactly two taps away, the menu no closer than the wine
   locker. Set tighter and quieter than the index rows so it reads as a short
   cut through the page rather than a second, competing index. */

.home-quick {
  margin-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
.home-quick .quick-row { padding-block: var(--s-3); }
.home-quick .row-label { font-size: var(--t-body); }
.home-quick .row-note { max-width: var(--measure); }

/* ---- /contact ------------------------------------------------------------- */

.contact-primary { padding: 0 var(--gutter) var(--s-5); }
.contact-primary .btn { width: 100%; }
.contact-primary p { margin-top: var(--s-3); max-width: var(--measure); }

.contact-op { margin-top: var(--s-6); }
.contact-op .spread { padding: 0 var(--gutter); align-items: baseline; }
.contact-op > p { padding: var(--s-2) var(--gutter) 0; max-width: var(--measure); }
.contact-lines { margin-top: var(--s-3); border-top: 1px solid var(--hairline); }

/* ---- /about --------------------------------------------------------------- */

.about-story { padding: var(--s-2) var(--gutter) var(--s-5); }
.about-story p { margin-top: var(--s-4); }
.about-story .plate { margin: var(--s-5) 0; }

.about-people { padding: 0 var(--gutter); }
.about-person { margin-top: var(--s-5); }
.about-person p { margin-top: var(--s-2); }
.about-people > p { margin-top: var(--s-5); max-width: var(--measure); }

/* ---- the consent gate ------------------------------------------------------
   Accept and reject are the same button in the same row. A reject styled as a
   text link is the oldest dark pattern there is, and the sheet refuses it. */

.consent-list { margin: var(--s-4) 0; }
.consent-list li { padding-block: var(--s-3); border-top: 1px solid var(--hairline); }
.consent-list .row-label { display: block; }
.consent-list .row-note { display: block; margin-top: var(--s-1); max-width: var(--measure); }

.consent-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.consent-actions .btn { flex: 1 1 auto; min-width: 40%; }

/* ---- /privacy -------------------------------------------------------------- */

.policy-block { padding: 0 var(--gutter); }
.policy-block p { margin-top: var(--s-2); }
.policy-table { margin-top: var(--s-3); }
.policy-row { padding: var(--s-4) var(--gutter); border-top: 1px solid var(--hairline); }
.policy-row p { margin-top: var(--s-2); color: var(--ink-muted); }
.policy-kv { margin-top: var(--s-3); display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); }
.policy-kv dt { font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); }
.policy-kv dd { font-size: var(--t-small); }