/* mec-base.css - the shared basics, written once with tokens (design 3.1). Load AFTER mec-look.css.
   Rules: no colour is written here, only tokens. A look changes letters, motion and depth only;
   it never moves, adds or removes content (spacing differs by at most 12 px). What a look adds is read from
   --k-* tokens that mec-look.css sets.
   Names: h1-h3, .btn, .card, .msg, .rows, .meta, .fine, .actions, .hint, .sub, .tabs, .fold, .sheet.
   Added for the reading pattern (design 6): .reading. Piece 2: .mec-picker (the "Aa" picker), .rail (wide screens),
   LK-14..21: .mec-pop (menus and sheets), .bottombar, .topbar, .mec-toast, safe areas, .mec-standalone,
   and the newspaper pieces .paper .masthead .kicker .deck .dateline .band .orn .dropcap .pull. The print sheet is mec-print.css. The sheet is position:fixed here;
   a frame that holds it (the preview) turns it to absolute in its own file. */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* LK-16: the notch, the home bar and the rounded corners. 0 where a device has none. An app needs <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> */
:root{--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--bar-h:4rem}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* LK-21: a tap is a tap: no double-tap delay on anything a finger presses. Nothing in the kit needs a hover or a long press. */
a,button,summary,input,select,textarea,label,[role="button"]{touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body)}
img,svg{max-width:100%}

/* type (design 3.2 scale): display = titles, serif = reading (the person's words), sans = the app's voice */
h1,h2,h3,.h1,.h2,.h3{margin:0;color:var(--text);font-family:var(--font-display);font-weight:600}
h1,.h1{font-size:var(--fs-display);line-height:var(--lh-display)}
h2,.h2{font-size:var(--fs-heading);line-height:var(--lh-heading)}
h3,.h3{font-family:var(--font-ui);font-size:var(--fs-body);font-weight:700;line-height:var(--lh-heading);color:var(--brand-ink)}
/* A group heading is set apart from a row title (same size, 16 px) by colour and space, never by size or capitals (UX-2) */
.group{margin:var(--s-5) 0 var(--s-2)}
hr{margin:var(--s-4) 0;border:0;border-top:1px solid var(--line)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
p{margin:0 0 var(--s-3)}
a{color:var(--brand-ink);text-underline-offset:.18em}
code{font-family:var(--font-mono);font-size:1rem;overflow-wrap:anywhere}
.sub{color:var(--text-2)}
.meta,.fine{font-size:var(--fs-small);color:var(--muted)}
.hint{font-size:var(--fs-small);color:var(--text-2)}
.label,legend{font-weight:700}
table,.reading{font-variant-numeric:tabular-nums}

/* focus: 3 px, brand-ink, 2 px away (design 3.3 row 12) */
:focus-visible{outline:3px solid var(--brand-ink);outline-offset:2px}
.rows .row:focus-visible{outline-offset:-3px}

/* motion words (the only keyframes) */
@keyframes mec-fade{from{opacity:0}to{opacity:1}}
@keyframes mec-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes mec-slide{from{transform:translateY(100%)}to{transform:none}}
@keyframes mec-fade-out{to{opacity:0}}
@keyframes mec-slide-out{to{transform:translateY(100%)}}
.enter{animation:mec-rise var(--dur-std) var(--ease-enter) both}
.enter-slow{animation:mec-rise var(--dur-slow) var(--ease-enter) both}
[data-idle],[data-idle] *{animation:none!important}   /* a script flips this for one frame to replay */

/* buttons: ONE filled button per screen (the next move); a secondary one is a 1 px --text-2 line;
   a selected toggle is outlined + bold + ticked, never filled (design 3.4) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);min-width:var(--tap);
  padding:0 var(--s-4);border:1px solid transparent;border-radius:var(--r-md);background:var(--brand);color:var(--on-brand);
  font-family:var(--font-ui);font-size:var(--fs-body);font-weight:600;line-height:1.2;text-align:center;text-decoration:none;
  cursor:pointer;transition:box-shadow var(--dur-quick) var(--ease-move)}
.btn:active{box-shadow:inset 0 0 0 99px var(--press)}
.btn.secondary{background:transparent;color:var(--text);border-color:var(--text-2)}
.btn.block{display:flex;width:100%}
.seg{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;border:0}
.seg button{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);padding:0 var(--s-4);
  border:1px solid var(--edge);border-radius:var(--r-md);background:var(--surface);color:var(--text);
  font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.2;cursor:pointer;transition:box-shadow var(--dur-quick) var(--ease-move)}
.seg button:active{box-shadow:inset 0 0 0 99px var(--press)}
.seg button[aria-pressed="true"]{padding:0 calc(var(--s-4) - 1px);border:2px solid var(--brand-ink);font-weight:700}
.seg button[aria-pressed="true"]::before{content:"";flex:none;width:.4em;height:.75em;margin:-.15em .55em 0 0;
  border:solid currentColor;border-width:0 .15em .15em 0;transform:rotate(45deg)}

/* fields */
input[type="text"],input[type="search"]{display:block;width:100%;min-height:var(--tap);padding:0 var(--s-3);
  border:1px solid var(--edge);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:inherit}
input[type="radio"]{flex:none;width:1.25rem;height:1.25rem;margin:.55rem 0 0;accent-color:var(--brand-ink)}
fieldset{min-width:0;margin:0 0 var(--s-5);padding:0;border:0}
legend{padding:0;margin-bottom:var(--s-2)}

/* a card and a message; the depth (--elev-1) is none until FULL */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--elev-1)}
.msg{margin:0 0 var(--s-3);padding:var(--s-3) var(--s-4);border-left:3px solid var(--msg-c,var(--edge));
  border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--msg-tint,var(--surface-2));color:var(--text);
  animation:mec-fade var(--dur-std) var(--ease-enter) both}
.msg b{color:var(--msg-c,var(--text))}                      /* the word, so colour is never alone */
.msg.ok{--msg-c:var(--ok);--msg-tint:var(--ok-tint)}
.msg.warn{--msg-c:var(--warn);--msg-tint:var(--warn-tint)}
.msg.danger{--msg-c:var(--danger);--msg-tint:var(--danger-tint)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:var(--s-4) 0}

/* a list of rows: thin lines. In FULL the group becomes a soft-shadow box (tokens above). */
.rows{margin:0 0 var(--s-4);padding:0;list-style:none;overflow:hidden;
  border:var(--k-grp-bw) solid var(--line);border-top-width:1px;border-radius:var(--k-grp-r);background:var(--k-grp-bg);box-shadow:var(--elev-1)}
.rows>li{border-bottom:1px solid var(--line)}
.rows>li:last-child{border-bottom-width:var(--k-last-bw)}
.row{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:var(--tap);margin:0;padding:var(--s-3) var(--k-row-pad);
  border:0;background:transparent;color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-quick) var(--ease-move)}
.row:active{background-color:var(--press)}
.row .main{flex:1;min-width:0}
.row .main b{display:block;font-weight:600;color:var(--text)}
.row .meta{display:block}
.chev{flex:none;width:.55em;height:.55em;margin-right:var(--s-1);border:solid var(--muted);border-width:2px 2px 0 0;transform:rotate(45deg)}
/* the first 6 rows of a page follow each other: --n is 0..5, the step is --dur-std / 6 = 40 ms in FULL, 0 when motion is off */
.page .rows>li{animation-name:var(--k-row-anim);animation-duration:var(--dur-std);animation-timing-function:var(--ease-enter);animation-fill-mode:both;
  animation-delay:calc(var(--n,0) * var(--dur-std) / 6)}

/* page head: a short brand line in CALM, a colour wash behind the title only in FULL */
.page-head{margin-inline:var(--k-bleed);padding:var(--k-wash-pad) calc(var(--k-bleed) * -1);background:var(--k-wash)}
.page-head:first-child{margin-top:var(--k-wash-top)}
.brandline{display:var(--k-brandline);width:3rem;height:3px;margin-top:var(--s-2);border-radius:2px;background:var(--brand)}

/* tabs: the active one gets a 3 px line in the product colour */
.tabs{display:flex;flex-wrap:wrap;margin:0;padding:0 var(--s-2);border-bottom:1px solid var(--line)}
.tabs a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-3);border-bottom:3px solid transparent;margin-bottom:-1px;
  color:var(--text-2);text-decoration:none}
.tabs a[aria-current="page"]{border-bottom-color:var(--brand-ink);color:var(--text);font-weight:700}

/* a fold: 44 px strip, closed by default */
.fold{border-top:1px solid var(--line)}
.fold:last-of-type{border-bottom:1px solid var(--line)}
.fold>summary{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);cursor:pointer;font-weight:600;list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"";flex:none;width:.5em;height:.5em;margin-left:var(--s-1);border:solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(-45deg);transition:transform var(--dur-quick) var(--ease-move)}
.fold[open]>summary::before{transform:rotate(45deg)}

/* the bottom sheet: SIMPLE flat and instant, CALM fades with a shadow, FULL slides (design 2) */
.scrim{position:fixed;inset:0;background:var(--shade);animation:mec-fade var(--dur-std) var(--ease-enter) both}
.sheet{--k-grp-bw:0px;--k-grp-r:0px;--k-grp-bg:transparent;--k-last-bw:1px;--k-row-pad:var(--s-1);--k-row-anim:none;   /* rows inside a sheet stay plain */
  position:fixed;left:0;right:0;bottom:0;max-height:85%;overflow:auto;padding:var(--s-4) var(--gutter) var(--s-5);
  border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--surface);color:var(--text);
  box-shadow:var(--elev-sheet);animation:var(--k-in) var(--dur-std) var(--ease-enter) both}
.sheet .rows{box-shadow:none}
.scrim[data-closing]{animation:mec-fade-out var(--dur-std) var(--ease-exit) both}
.sheet[data-closing]{animation:var(--k-out) var(--dur-std) var(--ease-exit) both}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}

/* the reading pattern (design 6): serif 18 px, line 1.65, one measure, left aligned, links underlined */
.reading{max-width:var(--measure);font-family:var(--font-serif);font-size:var(--fs-reading);line-height:var(--lh-reading);color:var(--text)}
.reading p{margin:0 0 1em}
.reading a{text-decoration:underline}
.reading .lab{font-family:var(--font-ui);font-weight:700}

/* the quick look picker "Aa" (piece 2). mec-ui.js draws it into <span data-mec-picker>. A phone gets a bottom sheet, a wide screen a small panel. */
.mec-picker,.mec-pop{position:relative;display:inline-block}
.mec-pick-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);padding:0 var(--s-3);
  border:1px solid var(--edge);border-radius:var(--r-md);background:var(--surface);color:var(--text);
  font-family:var(--font-display);font-size:var(--fs-body);font-weight:700;cursor:pointer}
.mec-pick-word{margin-left:var(--s-2);font-family:var(--font-ui);font-weight:400}
.mec-pick-btn[aria-expanded="true"]{border:2px solid var(--brand-ink);padding:0 calc(var(--s-3) - 1px)}
/* LK-14: the picker and every popover (.mec-pop with .mec-pop-panel, drawn by mec-ui.js) are one thing: a phone gets a bottom sheet with a dimmed page,
   a swipe down and the back button to close it; a wide screen gets a small panel under its button (.mec-pop-start opens it to the right) */
.mec-pick-panel,.mec-pop-panel{position:fixed;left:0;right:0;bottom:0;z-index:30;max-height:85vh;max-height:85dvh;overflow:auto;overscroll-behavior:contain;
  padding:var(--s-4) max(var(--gutter),var(--safe-r)) calc(var(--s-5) + var(--safe-b)) max(var(--gutter),var(--safe-l));
  border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--surface);color:var(--text);
  font-family:var(--font-ui);font-weight:400;box-shadow:var(--elev-sheet);animation:var(--k-in) var(--dur-std) var(--ease-enter) both}
.mec-pick-group{margin:0 0 var(--s-4)}
.mec-pick-group .label{display:block;margin-bottom:var(--s-2)}
.mec-pick-done{display:flex;width:100%;margin-top:var(--s-4)}
.mec-pick-more{display:inline-flex;align-items:center;min-height:var(--tap);margin-left:var(--s-3)}
.mec-layer-scrim{z-index:19}
.mec-locked{overflow:hidden}
@media (min-width:600px){
  .mec-pick-done,.mec-layer-scrim{display:none}
  .mec-pick-panel,.mec-pop-panel{position:absolute;left:auto;right:0;bottom:auto;top:calc(100% + var(--s-2));width:22rem;max-height:none;padding:var(--s-4) var(--gutter) var(--s-5);border:1px solid var(--edge);border-radius:var(--r-lg)}
  .mec-pop-start .mec-pop-panel{left:0;right:auto}
}

/* LK-15: the phone's bottom bar: up to four links and a "More" popover, labels under icons. It shows under 900 px (.tabs-narrow); the rail takes over from 900.
   Put .has-bar on <body> so the page never hides behind it. */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:stretch;padding:0 var(--safe-r) var(--safe-b) var(--safe-l);
  border-top:1px solid var(--line);background:var(--surface);color:var(--text-2)}
.bottombar>*{flex:1 1 0;min-width:0}
.bar-link,.bottombar .mec-pop>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);width:100%;min-height:var(--bar-h);
  margin:0;padding:var(--s-2) 2px;border:0;background:transparent;color:inherit;font:inherit;text-align:center;text-decoration:none;overflow-wrap:anywhere;cursor:pointer}
.bar-link[aria-current="page"]{color:var(--text);font-weight:700;box-shadow:inset 0 3px 0 var(--brand-ink)}
.bar-icon{display:inline-flex;width:1.5rem;height:1.5rem}
.bar-icon svg{width:100%;height:100%}
.bottombar .mec-pop{position:static;display:flex}
@media (min-width:600px){.bottombar .mec-pop-panel{top:auto;bottom:calc(100% + var(--s-2))}}
@media (max-width:899px){.has-bar{padding-bottom:calc(var(--bar-h) + var(--safe-b) + var(--s-4))}}

/* LK-17: the app's header. data-mec-autohide: under 900 px it slides away when the person scrolls down and comes back on scroll up, at the top of the page,
   when a menu is open and when a key reaches it. Simple never moves it. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) max(var(--gutter),var(--safe-r)) var(--s-2) max(var(--gutter),var(--safe-l));
  border-bottom:1px solid var(--line);background:var(--bg)}
[data-mec-autohide]{position:sticky;top:0;z-index:20;transition:transform var(--dur-std) var(--ease-move)}
@media (max-width:899px){
  [data-mec-autohide].is-hidden{transform:translateY(-100%)}
  [data-look="simple"] [data-mec-autohide].is-hidden{transform:none}
  [data-mec-autohide]:has(.mec-pick-panel:not([hidden]),.mec-pop-panel:not([hidden])){transform:none;transition:none}   /* a transform would pin the fixed sheet to the header */
}

/* LK-18: a short message at the bottom (MecUI.toast). A polite live region; an error stays until closed. Never the only place an error shows. */
.mec-toasts{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);pointer-events:none;
  padding:0 max(var(--gutter),var(--safe-r)) calc(var(--s-3) + var(--safe-b)) max(var(--gutter),var(--safe-l))}
:root:has(.bottombar) .mec-toasts{padding-bottom:calc(var(--bar-h) + var(--s-3) + var(--safe-b))}
.mec-toast{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);width:100%;max-width:var(--measure);padding:var(--s-3) var(--s-4);
  border:1px solid var(--edge);border-left:3px solid var(--msg-c,var(--brand-ink));border-radius:var(--r-md);background:var(--surface);color:var(--text);
  box-shadow:var(--elev-sheet);animation:mec-fade var(--dur-std) var(--ease-enter) both}
.mec-toast.danger{--msg-c:var(--danger)}
.mec-toast-text{flex:1 1 12rem}

/* LK-19: run from the home screen (mec-ui.js adds .mec-standalone): no pull-to-refresh bounce, the status bar's space on the header, and two helper classes.
   .browser-only shows in a browser tab only (a "get the app" hint); .app-only shows from the home screen only. */
.mec-standalone{overscroll-behavior-y:none}
.mec-standalone .topbar{padding-top:calc(var(--s-2) + var(--safe-t))}
.mec-standalone .browser-only{display:none}
.app-only{display:none}
.mec-standalone .app-only{display:revert}

/* the rail (piece 2): wide screens only (900 px and up). A phone keeps its tabs or bottom bar; put .tabs-narrow on those. */
.rail{display:none}
.rail-fold{font:inherit;display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);margin:0 0 var(--s-2) auto;padding:0;
  border:1px solid var(--edge);border-radius:var(--r-md);background:var(--surface);color:var(--text);cursor:pointer}
.rail-fold svg{width:1.25rem;height:1.25rem;transition:transform var(--dur-std) var(--ease-move)}
[data-rail="folded"] .rail-fold svg{transform:rotate(180deg)}
.rail-link{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-md);
  color:var(--text-2);text-decoration:none}
.rail-link[aria-current="page"]{background:var(--tint);color:var(--text);font-weight:700}
.rail-icon{flex:none;display:inline-flex;width:1.5rem;height:1.5rem}
.rail-icon svg{width:100%;height:100%}
@media (min-width:900px){
  .tabs-narrow{display:none}
  .shell-rail{display:grid;grid-template-columns:var(--rail-w,14rem) minmax(0,1fr);align-items:stretch;transition:grid-template-columns var(--dur-std) var(--ease-move)}
  [data-rail="folded"] .shell-rail{--rail-w:4.5rem}
  .rail{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;padding:var(--s-3) var(--s-2);border-right:1px solid var(--line);background:var(--surface)}
  [data-rail="folded"] .rail-link{justify-content:center;padding:0}
  [data-rail="folded"] .rail-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}   /* the words stay for screen readers */
}

/* newspaper reading pieces (piece 2): token-only. Reading text is --font-serif (Literata, or the phone's own serif in Simple). */
.paper{max-width:var(--measure);margin-inline:auto;font-family:var(--font-serif);font-size:var(--fs-reading);line-height:var(--lh-reading);color:var(--text)}
.paper p{margin:0 0 1em}
.paper a{text-decoration:underline}
.masthead{margin:0 0 var(--s-5);padding:var(--s-3) 0;border-top:3px solid var(--text);border-bottom:1px solid var(--text)}
.kicker{margin:0 0 var(--s-2);font-family:var(--font-ui);font-weight:700;letter-spacing:.06em;color:var(--brand-ink)}
.masthead h1,.masthead .mast-title{margin:0 0 var(--s-2);font-family:var(--font-display);font-weight:700}
.deck{margin:0 0 var(--s-3);color:var(--text-2);line-height:var(--lh-heading)}
.dateline{margin:0;padding-top:var(--s-2);border-top:1px solid var(--line);font-family:var(--font-ui);color:var(--muted)}
.band{margin:var(--s-6) 0 var(--s-3);padding:var(--s-2) var(--s-3);border-top:2px solid var(--text);border-bottom:1px solid var(--line);
  background:var(--k-wash);font-family:var(--font-display);font-size:var(--fs-heading);font-weight:700}
.orn{margin:var(--s-5) 0;padding-left:.6em;text-align:center;color:var(--muted);letter-spacing:.6em;line-height:1}
.orn::before{content:"\00B7\00B7\00B7"}
.dropcap>p:first-of-type::first-letter{float:var(--k-cap-float);margin:.05em .02em 0 0;font-family:var(--font-display);font-size:var(--k-cap-size);line-height:.85;color:var(--k-cap-ink)}
.pull{margin:var(--s-5) 0;padding:var(--s-3) 0 var(--s-3) var(--s-4);border-left:4px solid var(--brand);font-family:var(--font-display);font-size:1.375rem;line-height:1.35;color:var(--text)}
.pull p{margin:0}
.paper figure{margin:var(--s-4) 0}
.paper table{width:100%;border-collapse:collapse}
.paper caption{padding-bottom:var(--s-2);font-family:var(--font-ui);font-weight:700;text-align:left}
.paper td+td,.paper th+th{white-space:nowrap}
.paper th,.paper td{padding:var(--s-2) var(--s-3) var(--s-2) 0;border-bottom:1px solid var(--line);text-align:left;font-family:var(--font-ui)}

@media print{   /* colours come from the print tokens in mec-look.css */
  .no-print,.tabs,.sheet,.scrim,.bottombar,.mec-toasts,.mec-pop{display:none!important}
  .reading{font-size:11pt;line-height:1.5}
}