/* ============================================================================
   Just Electrolyte — Ops Hub — shared.css
   Brand system lifted verbatim from /index.html, then extended with hub-app UI.
   Stark black/white. ONE freshwater accent (--fresh #A9D2E8), never as a panel bg.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#0A0A0A; --paper:#FFFFFF; --offwhite:#FAFAFA;
  --gray600:#525252; --gray400:#A3A3A3; --fresh:#A9D2E8;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --measure:46rem; --wide:64rem;
  /* hub-app derived tokens */
  --line:#E5E5E5;                 /* hairline between ink & gray400 for dense UI */
  --done:#2E7D5B;                 /* tasteful muted green for DONE badges */
  --done-bg:#EAF5EF;
  --review:#9A6B00;               /* amber for NEEDS-REVIEW */
  --review-bg:#FBF3E0;
  --open-bg:#F0F0F0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:1rem; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}

/* ---- Masthead (verbatim from index.html, + a sign-out affordance) -------- */
.masthead{
  position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:1px solid var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem clamp(1rem,4vw,2.5rem);
}
/* je-wordmark inside masthead — sizing via --je-wm-size on the span */
.masthead a.home{display:flex; align-items:center; text-decoration:none}
.masthead nav{
  font-size:.75rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gray600);
}
.masthead nav a{
  color:var(--ink); text-decoration:none; padding-bottom:3px;
  border-bottom:2px solid transparent; transition:border-color 150ms ease;
}
.masthead nav a:hover{border-color:var(--fresh)}
.masthead .mh-right{display:flex; align-items:center; gap:1.1rem}
.masthead .signout{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray400); text-decoration:none; border-bottom:1px solid transparent;
}
.masthead .signout:hover{color:var(--ink); border-color:var(--fresh)}

/* ---- Section nav (the hub's left/top navigation) --- --no-tier-delegate -- */
.subnav{
  position:sticky; top:0; z-index:19; background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex; gap:0; overflow-x:auto; padding:0 clamp(1rem,4vw,2.5rem);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                 /* the strip reads as nav, not a scrolled box */
  scroll-snap-type:x proximity;
}
.subnav::-webkit-scrollbar{display:none}
.subnav a{
  flex:0 0 auto; text-decoration:none; color:var(--gray600);
  font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  padding:.9rem 1.05rem; border-bottom:2px solid transparent; white-space:nowrap;
  scroll-snap-align:start;
  transition:color 150ms ease,border-color 150ms ease;
}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current="page"]{color:var(--ink); border-color:var(--fresh)}

/* ---- App layout shell ---------------------------------------------------- */
.app{max-width:var(--wide); margin:0 auto; padding:clamp(2rem,5vw,3.5rem) clamp(1.15rem,4vw,2.5rem) 6rem}
.app-wide{max-width:none; width:min(96rem,100%)}
.page-head{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:.25rem}
.eyebrow{
  font-size:.75rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gray600); margin:0 0 1rem;
}
.page-title{
  font-size:clamp(2rem,5vw,2.8rem); font-weight:800; line-height:1.04;
  letter-spacing:-.02em; text-transform:uppercase; margin:0;
}
.page-sub{color:var(--gray600); margin:.9rem 0 0; max-width:var(--measure)}
.doseline{height:2px; width:84px; background:var(--fresh); margin:1.3rem 0 0}
.hr-heavy{border:0; border-top:1px solid var(--ink); margin:2.2rem 0}
.hr-thin{border:0; border-top:1px solid var(--line); margin:1.6rem 0}

/* ---- Section header (matches the index hub) ------------------------------ */
.section-head{display:flex; align-items:baseline; gap:1rem; border-bottom:1px solid var(--ink); padding-bottom:.7rem; margin:3rem 0 0}
.section-head:first-of-type{margin-top:1.6rem}
.section-head h2{font-size:1.35rem; font-weight:800; text-transform:uppercase; letter-spacing:-.02em; margin:0}
.section-head .count{font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gray600); margin-left:auto}

/* ---- Stat tiles (dashboard) ---------------------------------------------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--gray400); border:1px solid var(--gray400); margin-top:1.6rem}
.stat{background:var(--paper); padding:1.3rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.35rem}
.stat .n{font-size:2.4rem; font-weight:900; line-height:1; letter-spacing:-.03em}
.stat .l{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray600)}
.stat.accent{position:relative}
.stat.accent::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--fresh)}

/* ---- Card grid (matches index .cards) ------------------------------------ */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); gap:1px; background:var(--gray400); border:1px solid var(--gray400); margin-top:1.6rem}
.card{background:var(--paper); padding:1.4rem 1.4rem 1.5rem; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; min-height:150px; position:relative; transition:background 150ms ease}
.card::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--fresh); transition:width 180ms ease}
.card:hover{background:var(--offwhite)}
.card:hover::after{width:100%}
.card h3{font-size:1.04rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; margin:0 0 .55rem; display:flex; align-items:flex-start; gap:.5rem; justify-content:space-between}
.card p{font-size:.85rem; line-height:1.5; color:var(--gray600); margin:0}
.card .fname{margin-top:auto; padding-top:1rem; font-family:var(--mono); font-size:.7rem; color:var(--gray400); letter-spacing:.02em}

/* ---- Status badges ------------------------------------------------------- */
.badge{
  display:inline-block; font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; padding:.22em .55em; white-space:nowrap;
  border:1px solid var(--gray400); border-radius:0; color:var(--gray600); background:var(--paper);
  vertical-align:middle;
}
.badge--done{color:var(--done); border-color:var(--done); background:var(--done-bg)}
.badge--review{color:var(--review); border-color:var(--review); background:var(--review-bg)}
.badge--open{color:var(--gray600); border-color:var(--gray400); background:var(--open-bg)}
.badge--locked{color:var(--ink); border-color:var(--ink); background:var(--paper)}
.badge--flag{color:var(--review); border-color:var(--review); background:var(--review-bg)}
.badge--proposed{color:var(--ink); border-color:var(--ink)}
.badge--approved{color:var(--done); border-color:var(--done); background:var(--done-bg)}
.badge--dismissed{color:var(--gray400); border-color:var(--gray400)}
.badge--in_progress{color:var(--review); border-color:var(--review); background:var(--review-bg)}

/* ---- Checklist rows ------------------------------------------------------ */
.checklist{border:1px solid var(--gray400); margin-top:1.4rem; background:var(--paper)}
.cl-row{display:flex; gap:.9rem; padding:1rem 1.15rem; border-bottom:1px solid var(--line); align-items:flex-start}
.cl-row:last-child{border-bottom:0}
.cl-row.is-done{background:var(--offwhite)}
.cl-check{
  flex:0 0 auto; width:22px; height:22px; margin-top:.15rem; border:1.5px solid var(--ink);
  background:var(--paper); cursor:pointer; display:grid; place-items:center; padding:0;
  transition:background 120ms ease;
}
.cl-check:hover{border-color:var(--fresh)}
.cl-check[data-status="done"]{background:var(--ink)}
.cl-check[data-status="done"]::after{content:"✓"; color:var(--paper); font-size:.8rem; line-height:1}
.cl-check[data-status="in_progress"]{background:var(--fresh)}
.cl-check[data-status="in_progress"]::after{content:"·"; color:var(--ink); font-size:1.4rem; line-height:0}
.cl-body{flex:1 1 auto; min-width:0}
.cl-text{font-weight:700; font-size:1rem; line-height:1.35; letter-spacing:-.01em}
.cl-row.is-done .cl-text{color:var(--gray600); text-decoration:line-through; text-decoration-color:var(--gray400)}
.cl-detail{font-size:.85rem; color:var(--gray600); margin:.35rem 0 0; line-height:1.5}
.cl-meta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.5rem; font-family:var(--mono); font-size:.68rem; color:var(--gray400); letter-spacing:.04em; align-items:center}
.cl-meta a{color:var(--gray600); border-bottom:1px solid var(--gray400); text-decoration:none}
.cl-meta a:hover{border-color:var(--fresh); color:var(--ink)}
.cl-blocked{color:var(--review)}

/* ---- Gallery grid + lightbox -------------------------------------------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1px; background:var(--gray400); border:1px solid var(--gray400); margin-top:1.6rem}
.tile{background:var(--paper); padding:0; border:0; cursor:pointer; text-align:left; display:flex; flex-direction:column; position:relative}
.tile .thumb{aspect-ratio:1/1; width:100%; background:var(--offwhite); display:grid; place-items:center; overflow:hidden}
.tile .thumb img,.tile .thumb svg{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block}
.tile.checker .thumb{background:
  linear-gradient(45deg,#F0F0F0 25%,transparent 25%),
  linear-gradient(-45deg,#F0F0F0 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#F0F0F0 75%),
  linear-gradient(-45deg,transparent 75%,#F0F0F0 75%);
  background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0;}
.tile .cap{padding:.7rem .85rem .85rem}
.tile .cap .t{font-size:.82rem; font-weight:700; letter-spacing:-.01em; line-height:1.25}
.tile .cap .n{font-family:var(--mono); font-size:.66rem; color:var(--gray400); margin-top:.3rem; letter-spacing:.02em}
.tile::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--fresh); transition:width 160ms ease}
.tile:hover::after{width:100%}

.lightbox{position:fixed; inset:0; z-index:60; background:rgba(10,10,10,.94); display:none; flex-direction:column; padding:clamp(1rem,4vw,2.5rem)}
.lightbox.open{display:flex}
.lightbox .lb-bar{display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--paper); margin-bottom:1rem}
.lightbox .lb-bar .t{font-weight:700; letter-spacing:-.01em}
.lightbox .lb-bar .n{font-family:var(--mono); font-size:.7rem; color:var(--gray400); letter-spacing:.04em}
.lightbox .lb-close{background:none; border:1px solid var(--gray600); color:var(--paper); font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:.4rem .7rem; cursor:pointer}
.lightbox .lb-close:hover{border-color:var(--fresh)}
.lightbox .lb-stage{flex:1 1 auto; display:grid; place-items:center; min-height:0}
.lightbox .lb-stage img{max-width:100%; max-height:100%; object-fit:contain}
.lightbox .lb-stage.checker{background:
  linear-gradient(45deg,#222 25%,transparent 25%),
  linear-gradient(-45deg,#222 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#222 75%),
  linear-gradient(-45deg,transparent 75%,#222 75%);
  background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0;}

/* ---- Action-queue cards -------------------------------------------------- */
.queue{display:grid; gap:1px; background:var(--gray400); border:1px solid var(--gray400); margin-top:1.4rem}
.qcard{background:var(--paper); padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.6rem; position:relative}
.qcard.is-done,.qcard.is-dismissed{background:var(--offwhite)}
.qcard .qtop{display:flex; gap:.8rem; align-items:flex-start; justify-content:space-between}
.qcard .qtitle{font-size:1.05rem; font-weight:700; letter-spacing:-.01em; line-height:1.3}
.qcard.is-done .qtitle,.qcard.is-dismissed .qtitle{color:var(--gray600)}
.qcard .qdetail{font-size:.86rem; color:var(--gray600); line-height:1.5}
.qcard .qmeta{font-family:var(--mono); font-size:.66rem; color:var(--gray400); letter-spacing:.04em; display:flex; gap:.8rem; flex-wrap:wrap; align-items:center}
.qcard .qactions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.3rem}

/* ---- Buttons ------------------------------------------------------------- */
.btn{
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.02em;
  padding:.5rem .9rem; border:1px solid var(--ink); background:var(--paper); color:var(--ink);
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
  transition:background 130ms ease,color 130ms ease,border-color 130ms ease;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn--primary{background:var(--ink); color:var(--paper)}
.btn--primary:hover{background:var(--paper); color:var(--ink); border-color:var(--ink); box-shadow:inset 0 -3px 0 var(--fresh)}
.btn--ghost{border-color:var(--gray400); color:var(--gray600)}
.btn--ghost:hover{background:var(--paper); color:var(--ink); border-color:var(--ink)}
.btn--sm{font-size:.7rem; padding:.38rem .7rem}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---- Forms --------------------------------------------------------------- */
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem}
.field label{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray600)}
.input,.textarea,.select{
  font-family:var(--sans); font-size:.95rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--gray400); border-radius:0; padding:.6rem .75rem; width:100%;
}
.input:focus,.textarea:focus,.select:focus{outline:none; border-color:var(--ink); box-shadow:inset 0 -2px 0 var(--fresh)}
.textarea{min-height:5rem; resize:vertical; line-height:1.5}
.row-inline{display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end}
.row-inline .field{flex:1 1 12rem; margin-bottom:0}

/* ---- Activity timeline --------------------------------------------------- */
.timeline{margin-top:1.4rem; border-left:1px solid var(--line); padding-left:1.2rem}
.tl-item{position:relative; padding:0 0 1.2rem}
.tl-item::before{content:""; position:absolute; left:-1.52rem; top:.35rem; width:9px; height:9px; background:var(--paper); border:1.5px solid var(--ink); border-radius:50%}
.tl-item.actor-fable::before{background:var(--fresh)}
.tl-item .tl-action{font-weight:700; font-size:.92rem; letter-spacing:-.01em}
.tl-item .tl-detail{font-size:.85rem; color:var(--gray600); margin-top:.15rem; line-height:1.45}
.tl-item .tl-meta{font-family:var(--mono); font-size:.66rem; color:var(--gray400); letter-spacing:.04em; margin-top:.25rem}
.tl-item .who{display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:.1em .45em; border:1px solid var(--gray400); color:var(--gray600); margin-right:.5rem}
.tl-item .who.fable{border-color:var(--fresh); color:var(--ink)}

/* ---- Notes --------------------------------------------------------------- */
.notelist{display:flex; flex-direction:column; gap:1px; background:var(--gray400); border:1px solid var(--gray400); margin-top:1rem}
.note{background:var(--paper); padding:.85rem 1rem}
.note .nb{font-size:.9rem; line-height:1.5}
.note .nm{font-family:var(--mono); font-size:.66rem; color:var(--gray400); letter-spacing:.04em; margin-top:.35rem}

/* ---- Banner (default-password warning etc.) ------------------------------ */
.banner{background:var(--review-bg); border-bottom:1px solid var(--review); color:var(--review);
  font-size:.82rem; padding:.6rem clamp(1rem,4vw,2.5rem); text-align:center}
.banner strong{color:var(--review)}

/* ---- Empty / loading states ---------------------------------------------- */
.empty{color:var(--gray400); font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; padding:2rem 0; text-align:center}
.loading{color:var(--gray400); font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; padding:2rem 0; text-align:center}

/* ---- Doc prose (lifted from index.html so /docs render identically) ------ */
.prose{margin-top:2.5rem; max-width:var(--measure)}
.prose > :first-child{margin-top:0}
.prose h1,.prose h2{text-transform:uppercase; font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:2.8rem 0 1rem}
.prose h1{font-size:1.95rem; padding-bottom:.6rem; border-bottom:1px solid var(--ink)}
.prose h2{font-size:1.55rem}
.prose h2::before{content:""; display:block; width:40px; height:2px; background:var(--fresh); margin-bottom:.85rem}
.prose h3{font-size:1.30rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; margin:2.1rem 0 .6rem}
.prose h4{font-size:1.06rem; font-weight:700; margin:1.7rem 0 .5rem}
.prose p{margin:0 0 1.15rem; max-width:var(--measure)}
.prose a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gray400)}
.prose a:hover{border-color:var(--fresh); border-bottom-width:2px}
.prose ul,.prose ol{margin:0 0 1.15rem; padding-left:1.4rem; max-width:var(--measure)}
.prose li{margin:.3rem 0}
.prose li::marker{color:var(--gray400)}
.prose blockquote{margin:1.6rem 0; padding:1.05rem 1.3rem; background:var(--offwhite); border-left:2px solid var(--ink)}
.prose blockquote p{margin:.4rem 0; color:var(--gray600)}
.prose code{font-family:var(--mono); font-size:.86em; background:var(--offwhite); border:1px solid var(--gray400); padding:.08em .35em}
.prose pre{background:var(--ink); color:var(--paper); padding:1.1rem 1.25rem; overflow-x:auto; margin:1.5rem 0; font-size:.84rem; line-height:1.55; border-left:2px solid var(--fresh)}
.prose pre code{background:none; border:none; color:inherit; padding:0}
.prose table{border-collapse:collapse; width:100%; font-size:.9rem; margin:1.4rem 0}
.prose thead th{text-align:left; font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding:.6rem .85rem}
.prose tbody td{border-bottom:1px solid var(--gray400); padding:.6rem .85rem; vertical-align:top}

img{max-width:100%; height:auto}

/* ---- Login screen -------------------------------------------------------- */
.login-wrap{min-height:100vh; display:grid; place-items:center; background:var(--ink); padding:1.5rem}
.login-card{width:100%; max-width:24rem; background:var(--paper); border:1px solid var(--ink); padding:clamp(1.8rem,5vw,2.6rem)}
.login-card .je-wordmark{margin-bottom:1.6rem}
.login-card .eyebrow{margin-bottom:.5rem}
.login-card h1{font-size:1.5rem; font-weight:800; text-transform:uppercase; letter-spacing:-.02em; margin:0 0 .4rem}
.login-card p.sub{color:var(--gray600); font-size:.88rem; margin:0 0 1.6rem}
.login-card .doseline{margin:0 0 1.6rem}
.login-err{color:var(--review); font-size:.82rem; margin:.6rem 0 0; min-height:1.1rem}

/* ---- Focus + responsive -------------------------------------------------- */
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.lightbox :focus-visible,.login-wrap :focus-visible{outline-color:var(--fresh)}

/* ==========================================================================
   MOBILE LAYER  --no-tier-delegate
   Desktop (>=1024px) is untouched — everything below is additive, scoped to
   phones/tablets. Goals: no horizontal page scroll, >=40px tap targets,
   legible type, one-column stacking, a usable thumb-scroll section nav.
   ========================================================================== */

/* ---- Tablet & down: tighten the shell padding ---------------------------- */
@media (max-width:880px){
  .app{padding-left:clamp(1rem,4vw,1.5rem); padding-right:clamp(1rem,4vw,1.5rem); padding-bottom:4.5rem}
  .app-wide{width:100%}
}

/* ---- Phone (<=640px) ----------------------------------------------------- */
@media (max-width:640px){
  /* Masthead: keep wordmark + sign-out, drop the "Ops Hub" label, shrink mark */
  .masthead{padding:.7rem clamp(.9rem,4vw,1.25rem); gap:.6rem}
  .masthead .je-wordmark{--je-wm-size:0.9375rem}
  .masthead .mh-right{gap:.7rem}
  .masthead nav .lbl{display:none}
  .masthead .signout{font-size:.64rem; letter-spacing:.1em; padding:.3rem 0; white-space:nowrap}

  /* Section nav: a thumb-scroll strip with a right-edge "more →" fade cue.
     The active item sits at the left, so the fade never hides it. */
  .subnav{
    padding:0 clamp(.9rem,4vw,1.25rem);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);
  }
  .subnav a{padding:.85rem .9rem; font-size:.7rem; letter-spacing:.13em}

  /* Banner wraps cleanly and breaks the long command without overflowing */
  .banner{padding:.6rem clamp(.9rem,4vw,1.25rem); font-size:.78rem; line-height:1.45; text-align:left}
  .banner code{word-break:break-word}

  /* Headings + intro spacing */
  .app{padding-top:clamp(1.4rem,5vw,2rem); padding-bottom:4rem}
  .page-title{font-size:clamp(1.7rem,8vw,2.1rem)}
  .page-sub{font-size:.92rem}
  .eyebrow{margin-bottom:.75rem}
  .section-head{margin-top:2.2rem}
  .section-head h2{font-size:1.18rem}

  /* Stat tiles: at least two-up, never a single giant column; smaller numbers */
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:1rem 1rem 1.1rem}
  .stat .n{font-size:1.9rem}

  /* Card / gallery / doc grids reflow to two-up by default.
     minmax(0,1fr) keeps nowrap children (filenames, tags) from blowing out
     the track width on a phone. --no-tier-delegate */
  .cards{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Buttons: comfortable thumb targets, allow wrapping text */
  .btn{padding:.6rem 1rem; font-size:.82rem; min-height:40px}
  .btn--sm{padding:.5rem .8rem; font-size:.74rem; min-height:38px}
  .qcard .qactions{gap:.5rem}
  .qcard .qactions .btn{flex:1 1 auto; justify-content:center}

  /* Forms: 16px inputs so iOS Safari doesn't zoom on focus */
  .input,.textarea,.select{font-size:16px; padding:.7rem .8rem}
  .row-inline{gap:.6rem}
  .row-inline .field{flex:1 1 100%}

  /* Checklist rows: a little more breathing room; bigger checkbox target */
  .cl-row{padding:.9rem 1rem; gap:.75rem}
  .cl-check{width:26px; height:26px}
  .cl-text{font-size:.96rem}

  /* Lightbox close stays reachable with a thumb */
  .lightbox{padding:clamp(.8rem,4vw,1.5rem)}
  .lightbox .lb-close{padding:.55rem .8rem; min-height:40px}

  /* Prose: keep tables readable, code from overflowing */
  .prose h1{font-size:1.6rem}
  .prose h2{font-size:1.32rem}
  .prose table{font-size:.8rem}
  .prose pre{font-size:.78rem; padding:.9rem 1rem}
}

/* ---- Very small phones (<=380px): gallery single column --no-tier-delegate */
/* 2-up holds down to 381px (covers the 390px iPhone class); the image gallery
   drops to one-up only at 380px and below, per the brief. Stat tiles stay
   two-up even here — they're compact number tiles and a single tall column
   wastes the screen. */
@media (max-width:380px){
  .gallery{grid-template-columns:minmax(0,1fr)} /* --no-tier-delegate */
  .masthead .je-wordmark{--je-wm-size:0.875rem}
  .subnav a{padding:.85rem .8rem}
}