/* ==========================================================================================
   Everstock public site: the shared layer. Loaded first by every public page (/, /privacy,
   /terms, /support, /docs, /docs/<slug>). Holds the tokens, base type, focus and selection, the
   buttons, the five state pills, the module, the section-head thread, the nav and the footer.
   Page layers on top of it: /landing.css (the landing page) and /pages.css (Read mode: the legal,
   support and docs pages).

   World: Dispatch. A sync run followed like a shipment: a 2px thread with 12px event dots, white
   label-stock modules on a neutral gray ground, flat forest bands.

   Grid: 1200px content, 12 columns, 24px gutters. Spacing scale --s-1..--s-10 = 4..128px.
   ========================================================================================== */

:root{
  --brand:#1E4D3A; --brand-deep:#153A2B; --brand-tint:#DDEDE4;
  --ground:#F4F5F3; --surface:#FFFFFF; --rule:#D9DDD8;
  --ink:#161B18; --ink-2:#505A54; --on-brand:#FFFFFF; --on-brand-2:#C3DBCD;
  --ok-fg:#086A33; --ok-bg:#DDF5E6;
  --skip-fg:#505A54; --skip-bg:#EAECE9;
  --rev-fg:#7A4E00; --rev-bg:#FFE7B3;
  --held-fg:#FFFFFF; --held-bg:#1E4D3A;
  --plan-fg:#505A54;
  --radius:6px; --radius-pill:4px;
  --shadow-card:0 1px 2px rgba(22,27,24,.06), 0 12px 32px -16px rgba(22,27,24,.28);
  --display:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
  --sans:'Barlow',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --maxw:1200px; --gutter:24px; --side:24px;
  --section-y:var(--s-9);
  --module-pad:var(--s-5);
  --thread:2px; --dot:12px;
}
@media (max-width:1023.98px){ :root{ --section-y:var(--s-8) } }
@media (max-width:767.98px){ :root{ --section-y:var(--s-7); --side:16px; --module-pad:20px } }

/* ---------- base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--brand)}
@media (max-width:1023.98px){ body{font-size:16px} }
::selection{background:var(--brand);color:#fff}
html{scrollbar-color:#AEB5B0 var(--ground)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3{font-weight:inherit;font-size:inherit;text-wrap:balance}
p{text-wrap:pretty}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
th{font-weight:inherit;text-align:left}
main:focus{outline:none}
[id]{scroll-margin-top:80px}
.num,.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;font-size:15px}

.icn{width:1em;height:1em;fill:currentColor;flex-shrink:0;display:inline-block;vertical-align:-.125em}

/* focus: forest on light surfaces, white on the bands */
:where(a,button,summary,input):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}
.band :where(a,button,summary,input):focus-visible{outline-color:#fff}
.band .module :where(a,button,summary,input):focus-visible,
.band .run :where(a,button,summary,input):focus-visible{outline-color:var(--brand)}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{position:fixed;left:12px;top:12px;z-index:300;background:var(--ink);color:#fff;font-weight:600;font-size:15px;padding:12px 16px;border-radius:var(--radius-pill)}

/* inline links inside prose */
.prose-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- grid ---------- */
.wrap{max-width:calc(var(--maxw) + 2 * var(--side));margin-inline:auto;padding-inline:var(--side)}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.section{padding-block:var(--section-y)}
.band{background:var(--brand);color:var(--on-brand)}

/* ---------- section head: H2 cols 1-7, lede cols 8-12, lede's last line on the H2 baseline ---------- */
.head{margin-bottom:var(--s-7)}
.head h2{max-width:22ch}
/* Section summary behind an info button (Head in landing.tsx). The button is the thread's end
   node: the section line runs from the filled dot on the left into this ring on the right, so the
   control reads as part of the line rather than an icon beside the heading. Hover, keyboard focus
   or a click/tap (aria-expanded, set by INFO_SCRIPT) shows the panel, anchored to the right edge. */
.info{position:absolute;right:0;top:calc(var(--thread) / 2 + 5px - 16px);z-index:2}
.info-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border:var(--thread) solid var(--ink);border-radius:50%;background:var(--ground);color:var(--ink);cursor:pointer;transition:color .15s,background-color .15s,border-color .15s}
.info-btn .icn{width:18px;height:18px;vertical-align:0}
.info-btn:hover,.info-btn[aria-expanded="true"]{color:#fff;background:var(--brand);border-color:var(--brand)}
.info-panel{display:none;position:absolute;right:0;top:calc(5px + var(--thread) / 2 + 16px);z-index:30;width:max-content;max-width:min(380px,calc(100vw - 2 * var(--side)));margin-top:10px;padding:var(--s-4) var(--s-5);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-card);color:var(--ink-2);font-size:16px;line-height:1.55;text-align:left}
.info-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.head:has(.info:hover) .info-panel,.info-panel:hover,.head:has(.info-btn:focus-visible) .info-panel,.head:has(.info-btn[aria-expanded="true"]) .info-panel{display:block}
@media (hover:none){.head:has(.info:hover) .info-panel,.info-panel:hover{display:none}.head:has(.info-btn[aria-expanded="true"]) .info-panel{display:block}}
/* Phones: the panel opens under the heading at the head's full width, so it never covers it. */
@media (max-width:767.98px){.info-panel{top:100%;left:0;right:0;width:auto;max-width:none;margin-top:8px}}
/* The safety band's head has no thread: the ring sits on the heading row's right edge instead,
   bottom-aligned with the heading, white on the forest. */
.safety .head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5)}
.safety .info{position:relative;top:auto;right:auto;flex-shrink:0;margin-bottom:.35em}
.safety .head{position:relative}
.safety .info-panel{top:100%}
.band .info-btn{border-color:rgba(255,255,255,.7);background:transparent;color:#fff}
.band .info-btn:hover,.band .info-btn[aria-expanded="true"]{background:#fff;border-color:#fff;color:var(--brand)}
/* The thread: every section head is a scan event on the run's line (dot + 2px rule across the grid).
   Ink on the ground, white on the forest bands. */
/* The event row lives inside the section padding (negative margin), so the thread adds no height. */
.head{position:relative;padding-top:var(--s-7);margin-top:calc(-1 * var(--s-7))}
@media (max-width:767.98px){ .head{padding-top:var(--s-6);margin-top:calc(-1 * var(--s-5))} .safety .head{padding-top:0;margin-top:0} }
.head::before{content:"";position:absolute;left:0;top:0;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--ink)}
.head::after{content:"";position:absolute;left:var(--dot);right:32px;top:5px;height:var(--thread);background:var(--ink)}
/* On the safety band the guard row carries the thread, so its head draws no second line. */
.safety .head{padding-top:0;margin-top:0}
.safety .head::before,.safety .head::after{display:none}
h2{font-family:var(--display);font-weight:600;font-size:clamp(1.875rem,3vw,2.75rem);line-height:1.06;letter-spacing:-.005em}
h3{font-family:var(--sans);font-weight:600;font-size:1.25rem;line-height:1.25}
.lede{color:var(--ink-2)}
.band .lede{color:var(--on-brand-2)}
.secondary{font-size:15px;color:var(--ink-2)}
.band .secondary{color:var(--on-brand-2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--radius-pill);
  font-family:var(--sans);font-weight:600;font-size:16px;line-height:1;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;transition:background-color .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
.btn .icn{width:16px;height:16px}
.btn-primary,.btn-accent{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover,.btn-accent:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn-secondary{background:transparent;color:var(--ink);border-color:currentColor}
.btn-secondary:hover{color:var(--brand)}
.band .btn-primary{background:#fff;color:var(--brand);border-color:#fff}
.band .btn-primary:hover{background:var(--brand-tint);border-color:var(--brand-tint)}
.band .btn-secondary{color:#fff}
.band .module .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.band .module .btn-primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.band .btn-secondary:hover{color:var(--on-brand-2)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}

/* ---------- pills: five states, one rendering each ---------- */
.pill{display:inline-flex;align-items:center;height:22px;padding:3px 8px;border-radius:var(--radius-pill);
  font-family:var(--sans);font-weight:600;font-size:13px;line-height:1;letter-spacing:.01em;white-space:nowrap;
  transition:background-color 240ms var(--ease),color 240ms var(--ease)}
.pill-applied{color:var(--ok-fg);background:var(--ok-bg)}
.pill-skipped{color:var(--skip-fg);background:var(--skip-bg)}
.pill-review{color:var(--rev-fg);background:var(--rev-bg)}
.pill-held{color:var(--held-fg);background:var(--held-bg)}
.pill-planned{color:var(--plan-fg);background:transparent;box-shadow:inset 0 0 0 1px #8A948E}

/* ---------- module: the one card ---------- */
.module{display:grid;grid-template-rows:auto 1fr auto;row-gap:var(--s-3);min-width:0;background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--radius);padding:var(--module-pad)}
.module > *{min-width:0}
.module h3{color:var(--ink)}
.module p{color:var(--ink-2)}
.module-foot{padding-top:var(--s-4);border-top:1px solid var(--rule)}
.row{display:grid;gap:var(--gutter);align-items:stretch}
.row-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1199.98px){ .row-4.row-4-wrap{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1023.98px){ .row-3,.row-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767.98px){
  .row-4,.row-4.row-4-wrap,.row-3{grid-template-columns:minmax(0,1fr)}
  .row{gap:var(--s-4)}
}
.row-note{margin-top:var(--s-5);font-size:15px;color:var(--ink-2);max-width:68ch}
.band .row-note{color:var(--on-brand-2)}

/* ==========================================================================================
   Nav (white on ground, 64px) + phone menu
   ========================================================================================== */
body > header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--rule)}
.nav{position:relative;max-width:calc(var(--maxw) + 2 * var(--side));margin:0 auto;height:64px;padding-inline:var(--side);
  display:flex;align-items:center;gap:var(--s-5)}
.brand-wrap{display:flex;align-items:center;gap:var(--s-4);min-width:0;margin-right:auto}
.brand{display:flex;align-items:center;gap:var(--s-2)}
.brand .appmark{width:28px;height:28px}
.brand .word{font-family:var(--display);font-weight:600;font-size:24px;line-height:1;color:var(--ink)}
.parent{font-size:15px;color:var(--ink-2);border-left:1px solid var(--rule);padding-left:var(--s-4);white-space:nowrap}
.parent b{font-weight:600;color:var(--ink)}
.parent:hover,.parent:hover b{color:var(--brand)}
.nav-links{display:flex;align-items:center;gap:var(--s-5)}
.nav-links a{font-weight:500;font-size:15px;color:var(--ink-2);padding-block:var(--s-2);transition:color .16s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{height:40px;padding:0 16px;font-size:15px}
.nav-menu{display:none}
.nav-menu summary{list-style:none;display:inline-flex;align-items:center;gap:var(--s-2);height:40px;padding:0 12px;
  border:1px solid var(--rule);border-radius:var(--radius-pill);font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;background:#fff}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary .icn{width:20px;height:20px}
.nav-menu[open] summary{border-color:var(--ink)}
.nav-menu-panel{position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--rule);
  box-shadow:0 12px 24px -16px rgba(22,27,24,.28);padding:var(--s-2) var(--side) var(--s-5);display:flex;flex-direction:column}
.nav-menu-panel a:not(.btn){display:block;padding:12px 0;font-size:17px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--rule)}
.nav-menu-panel a:not(.btn):hover{color:var(--brand)}
.nav-menu-cta{margin-top:var(--s-4);width:100%}
@media (max-width:1023.98px){ .parent{display:none} }
@media (max-width:899.98px){
  .nav-links{display:none}
  .nav-menu{display:block}
}
@media (max-width:479.98px){ .nav-cta{display:none} }

/* ==========================================================================================
   Footer: three equal link columns, then one base line (brand lockup left, copyright right).
   ========================================================================================== */
footer{border-top:1px solid var(--rule);background:#fff}
.foot{padding-top:var(--s-7);padding-bottom:var(--s-5)}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-6)}
.foot-head{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);margin-bottom:var(--s-3)}
.foot-col ul{display:grid;row-gap:var(--s-2)}
.foot-col a{font-size:15px;color:var(--ink-2);transition:color .16s var(--ease)}
.foot-col a:hover{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.foot-base{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5);font-size:15px;color:var(--ink-2)}
.foot-brand{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink-2)}
.foot-brand .appmark{width:20px;height:20px}
.foot-brand b{font-weight:600;color:var(--ink)}
.foot-brand:hover,.foot-brand:hover b{color:var(--brand)}
@media (max-width:599.98px){
  .foot{padding-top:var(--s-6)}
  .foot-cols{grid-template-columns:minmax(0,1fr);row-gap:var(--s-5)}
  .foot-base{margin-top:var(--s-6)}
}

/* ==========================================================================================
   Reduced motion: no smooth scroll, no transitions
   ========================================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s !important;transition-delay:0s !important;animation:none !important}
}