/* 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}
/* right to left (LK-29, ML-1 rule 9): every side is logical (start/end), never left/right (check-sources fails a physical one).
   --k-flip is -1 under dir="rtl": a part that points a side (chevron, fold arrow) mirrors with scaleX(var(--k-flip,1)).
   A number or a Latin name inside right-to-left text keeps its own order. */
[dir="rtl"]{--k-flip:-1}
[dir="ltr"]{--k-flip:1}
bdi,[dir="auto"]{unicode-bidi:isolate}
/* 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 0 0;margin-inline-end:.55em;
  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-inline-start: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:start;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-inline-end:var(--s-1);border:solid var(--muted);border-width:2px 2px 0 0;transform:scaleX(var(--k-flip,1)) 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-inline-start:var(--s-1);border:solid currentColor;border-width:0 2px 2px 0;
  transform:scaleX(var(--k-flip,1)) rotate(-45deg);transition:transform var(--dur-quick) var(--ease-move)}
.fold[open]>summary::before{transform:rotate(45deg)}   /* pointing down: no side, no flip */

/* 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;inset-inline: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-inline-start:var(--s-2);font-family:var(--font-ui);font-weight:400}
.mec-pick-code{margin-inline-start:var(--s-2);font-family:var(--font-ui);font-weight:700;font-size:var(--fs-small)}
.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;inset-inline: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-inline-start: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;inset-inline:auto 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{inset-inline:0 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;inset-inline: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:break-word;hyphens:auto;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;inset-inline: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-inline-start: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);margin-inline-start: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;transform:scaleX(var(--k-flip,1));transition:transform var(--dur-std) var(--ease-move)}
[data-rail="folded"] .rail-fold svg{transform:scaleX(var(--k-flip,1)) 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-inline-end: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-inline-start:.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 0 0;margin-inline-end:.02em;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;padding-inline-start:var(--s-4);border-inline-start: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:start}
.paper td+td,.paper th+th{white-space:nowrap}
.paper th,.paper td{padding:var(--s-2) 0;padding-inline-end:var(--s-3);border-bottom:1px solid var(--line);text-align:start;font-family:var(--font-ui)}

/* ================= LK-34: shell v2 patterns (Search, breadcrumb, BETA, right panel, RECENTS, chart pieces) =================
   Tokens only. Logical sides only. 16 px floor, 44 px targets. mec-ui.js draws the parts; the app gives the words and the data. */

/* a sheet opened from the top bar sits above the bottom bar (both were z-index 20 and the bar comes later in the page) */
.topbar:has(.mec-pop-panel:not([hidden]),.mec-pick-panel:not([hidden])),[data-mec-autohide]:has(.mec-pop-panel:not([hidden]),.mec-pick-panel:not([hidden])){z-index:25}

/* top bar: the brand with its BETA box, then Search, the app's own Add, and the Aa Look picker (which stays in the bar on a phone) */
.mec-actions{display:flex;align-items:center;gap:var(--s-2)}
.mec-beta{display:inline-block;margin-inline-start:var(--s-2);padding:0 var(--s-2);border:1px solid var(--text-2);border-radius:var(--r-sm);
  font-size:var(--fs-small);font-weight:700;line-height:1.5;color:var(--text-2);white-space:nowrap}   /* a box with a word: not a link, not colour alone */
.mec-tb-btn{padding:0 var(--s-3)}
.mec-tb-icon{flex:none;width:1.25rem;height:1.25rem}
.mec-kbd{display:none}
@media (min-width:900px){.mec-kbd{display:inline;margin-inline-start:var(--s-2);font-family:var(--font-mono);font-size:var(--fs-small);color:var(--text-2)}}
@media (max-width:599px){   /* icon only on a phone: the word stays for a reader (aria-label, or this clipped word) */
  .mec-tb-btn{width:var(--tap);padding:0}
  .mec-tb-btn .mec-word{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

@media (max-width:399px){.topbar .mec-pick-word{display:none}}   /* UX-4: the word "Look" goes (it is aria-hidden; the name is the hidden line "Look and text size"), so BETA stays beside the brand; the button stays 44 px */

/* Search: the dialog is a pop-over (sheet under 600 px, panel from 600 px) with a combobox and a listbox */
@media (min-width:600px){.mec-search-panel{width:min(30rem,calc(100vw - 2 * var(--gutter)))}}
.mec-search-head{margin:var(--s-3) 0 0}
.mec-search-list{margin:var(--s-2) 0 0;padding:0;list-style:none}
.mec-search-list li{border-bottom:1px solid var(--line);border-inline-start:3px solid transparent}
.mec-search-list li[aria-selected="true"]{border-inline-start-color:var(--brand-ink);background:var(--tint);font-weight:700}   /* a bar and bold, never colour alone */
.mec-search-item{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:var(--tap);margin:0;padding:var(--s-2) var(--s-3);border:0;background:transparent;
  color:var(--text);font:inherit;text-align:start;text-decoration:none;cursor:pointer}
.mec-search-item .meta{display:block;font-weight:400}
.mec-search-count{margin:var(--s-2) 0 0;min-height:1.5em}

/* breadcrumb: the whole trail from 600 px, one Back link to the parent on a phone. The separator is drawn by CSS and has no words. */
.mec-crumb{margin:var(--s-2) 0 0}
.mec-crumb-list{display:none;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.mec-crumb-list li{display:flex;align-items:center;min-height:var(--tap);color:var(--text-2)}
.mec-crumb-list li+li::before{content:"/" / "";margin-inline:var(--s-2);color:var(--muted)}
.mec-crumb-list a,.mec-crumb-back{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap)}
.mec-crumb-back{gap:var(--s-2)}
.mec-crumb-chev{flex:none;width:.55em;height:.55em;border:solid currentColor;border-width:0 0 2px 2px;transform:scaleX(var(--k-flip,1)) rotate(45deg)}
@media (min-width:600px){.mec-crumb-list{display:flex}.mec-crumb-back{display:none}}
@media (max-width:599px){.mec-crumb-root{display:none}}

/* the page frame: <div class="mec-page"> holds the crumb, <main>, then <aside class="mec-panel"> (always this order in the page; only CSS moves things) */
.mec-page{min-width:0;padding:0 max(var(--gutter),var(--safe-r)) var(--s-6) max(var(--gutter),var(--safe-l))}
.mec-page>main{padding-top:var(--s-4)}
.mec-panel{margin-top:var(--s-5)}
.mec-panel:not(:has(.mec-group)){display:none}   /* a page with no groups draws no panel: absent, not empty */
.mec-group.fold{margin:0}
.mec-group>summary{min-height:var(--tap)}
.mec-group-body{padding:var(--s-2) 0 var(--s-3)}
@media (min-width:1100px){   /* the panel is a column from 1,100 px; under it the groups sit under the page */
  .mec-page:has(>.mec-panel .mec-group){display:grid;grid-template-columns:minmax(0,1fr) 20rem;column-gap:var(--s-6);align-items:start}
  .mec-page:has(>.mec-panel .mec-group)>.mec-crumb{grid-column:1 / -1;grid-row:1}
  .mec-page:has(>.mec-panel .mec-group)>main{grid-column:1;grid-row:2}
  .mec-page:has(>.mec-panel .mec-group)>.mec-panel{grid-column:2;grid-row:2;margin-top:0;padding-top:var(--s-4)}
}

/* RECENTS in the rail (memory only): absent when the rail is folded */
.mec-recents{margin-top:var(--s-5)}
.mec-recents-h{margin:0 0 var(--s-1);padding:0 var(--s-3)}
.mec-recents-list{margin:0;padding:0;list-style:none}
.mec-recents-list a,.mec-recents .hint{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-md);
  color:var(--text-2);text-decoration:none;overflow-wrap:anywhere}
.mec-recents .hint{margin:0}
.mec-recents-list a[aria-current="page"]{background:var(--tint);color:var(--text);font-weight:700}
[data-rail="folded"] .mec-recents{display:none}

/* the footer: the beta words, Tell us, Privacy, Appearance. Above the bottom bar (the body's .has-bar padding), never a floating button. */
.mec-footer{margin-top:var(--s-5);padding:var(--s-4) max(var(--gutter),var(--safe-r)) var(--s-4) max(var(--gutter),var(--safe-l));border-top:1px solid var(--line);color:var(--text-2)}
.mec-footer p{margin:0}
.mec-foot-links{display:flex;flex-wrap:wrap;margin-inline-start:calc(var(--s-3) * -1)}
.mec-foot-links a,.mec-foot-link{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-3);color:var(--brand-ink)}
.mec-foot-link{border:0;background:transparent;font:inherit;text-decoration:underline;cursor:pointer}

/* chart pieces: the picture is our own SVG (aria-hidden, tokens, no text inside); the twin is the real content and always shows */
.mec-chart{margin:var(--s-3) 0}
.mec-chart-twin{color:var(--text-2)}
.mec-chart p.mec-chart-twin{margin:var(--s-2) 0 0}
.mec-steps{display:block;width:100%;max-width:24rem;height:auto}
.mec-s-line{fill:none;stroke:var(--edge);stroke-width:2}
.mec-s-done{fill:var(--brand-ink)}
.mec-s-tick{fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mec-s-now{fill:var(--surface);stroke:var(--brand-ink);stroke-width:3}
.mec-s-later{fill:none;stroke:var(--edge);stroke-width:1.5}
.mec-chart-rows{margin:0;padding:0;list-style:none}
.mec-chart-rows li{padding:var(--s-1) 0}
.mec-chart-rows a{display:flex;align-items:center;min-height:var(--tap);color:var(--text)}
.mec-bar{display:block;width:100%;height:.5rem}
.mec-b-track{fill:var(--line)}
.mec-b-fill{fill:var(--brand-ink)}
.mec-chart-timeline{margin:0;padding:0;list-style:none}
.mec-chart-timeline li{position:relative;min-height:var(--tap);padding:var(--s-2) 0;padding-inline-start:2rem}
.mec-chart-timeline li.has-gap{--mec-gap:var(--s-5);padding-top:calc(var(--s-2) + var(--s-5))}
.mec-chart-when{font-weight:700;margin-inline-end:var(--s-2)}
.mec-t-dot{position:absolute;inset-inline-start:.25rem;top:calc(var(--s-2) + .25rem + var(--mec-gap,0px));width:1rem;height:1rem}
.mec-t-line{position:absolute;inset-inline-start:0;top:0;bottom:0;width:1.5rem;height:100%}
.mec-chart-timeline li:first-child .mec-t-line{top:calc(var(--s-2) + .75rem + var(--mec-gap,0px));height:auto}
.mec-chart-timeline li:last-child .mec-t-line{bottom:auto;height:calc(var(--s-2) + .75rem + var(--mec-gap,0px))}
.mec-chart-timeline li:only-child .mec-t-line{display:none}
.mec-t-stroke{fill:none;stroke:var(--edge);stroke-width:2}
.mec-t-circle{fill:var(--surface);stroke:var(--brand-ink);stroke-width:2.5}
@media (max-width:599px){.mec-bar,.mec-t-line,.mec-t-dot{display:none}.mec-chart-timeline li,.mec-chart-timeline li.has-gap{padding-inline-start:0;padding-top:var(--s-2)}}   /* the picture drops out first on a phone; the twin stays */
[data-look="simple"] .mec-chart-timeline li,[data-look="simple"] .mec-chart-timeline li.has-gap{padding-inline-start:0;padding-top:var(--s-2)}   /* no picture, so no room kept for it */
[data-look="simple"] .mec-chart-pic{display:none!important}   /* Simple draws no SVG at all (mec-ui.js does not build it); this is the second lock */

@media print{   /* colours come from the print tokens in mec-look.css */
  .no-print,.tabs,.sheet,.scrim,.bottombar,.mec-toasts,.mec-pop,.mec-chart-pic{display:none!important}
  .reading{font-size:11pt;line-height:1.5}
}
[dir="rtl"] .kicker{letter-spacing:normal}   /* spaced letters break the joined Arabic script */

/* LK-56: MecUI.errorBlock - the sentence and "Code: XXXXXX" (one polite line), then Copy and Tell us outside it. Calm: no red, no card, 16 px. */
.mec-err{margin:var(--s-3) 0}
.mec-err p{margin:0 0 var(--s-2)}
.mec-err-code-text{font-weight:700;letter-spacing:.06em;user-select:all}
.mec-err-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-2)}
.mec-err-copied{min-height:1.5rem}