/* Fluentish components. Uses tokens.css + motion.css. Class names are stable API for the build. */

/* ---------- layout ---------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-left)) calc(96px + env(safe-area-inset-bottom)); }
.stack > * + * { margin-top: var(--gap, var(--s-4)); }
.section { padding-top: var(--s-8); margin-top: var(--s-10); border-top: 1px solid var(--hairline); }
.section > h2 + * { margin-top: var(--s-4); }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: var(--z-bar); padding-top: env(safe-area-inset-top); background: color-mix(in oklab, var(--canvas) 92%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--hairline); }
.bar-inner { max-width: var(--page-max); margin: 0 auto; height: 52px; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand { min-height: var(--tap); }
.brand svg { width: 26px; height: 26px; flex: none; }
.wordmark { font: 400 21px/1 var(--font-display); letter-spacing: -0.015em; }
.wordmark i { font-style: italic; color: var(--ink-2); }
@media (prefers-reduced-transparency: reduce) { .bar, .tabs { background: var(--canvas); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---------- tab bar (phone) ---------- */
.tabs { position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: var(--z-bar); display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--canvas) 92%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-top: 1px solid var(--hairline); }
.tabs a { position: relative; display: grid; place-items: center; gap: 2px; min-height: var(--tap); padding: 4px 0; color: var(--ink-3); text-decoration: none; font: 500 11px/1.2 var(--font-ui); }
.tabs a svg { width: 22px; height: 22px; }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs-top a[aria-current="page"]::before { content: ""; position: absolute; top: -7px; width: 18px; height: 2px; border-radius: 2px; background: var(--accent); }
/* The phone tab bar's dash: one element, one column wide, that slides to the current tab (transform only, on the
   snappy spring) instead of jumping. Its column comes from aria-current, so nothing else has to set it. During a
   route's view transition the tab bar is its own live layer (fx-tabs, motion.css), so the slide shows there too.
   Without a current tab (Profile) it is not drawn; when it comes back it fades in where it belongs. Reduced motion:
   it moves at once. From 900px the tabs are top links with their own underline, and there is no dash. */
.tabs-dash { position: absolute; top: -1px; inset-inline-start: max(8px, env(safe-area-inset-left)); width: calc((100% - 2 * max(8px, env(safe-area-inset-left))) / var(--n, 4)); height: 2px; pointer-events: none;
  transform: translateX(calc(var(--tab-i, 0) * 100% * var(--dir, 1))); transition: transform var(--dur-card) var(--spring-snappy), opacity var(--dur-quick) var(--ease-out); }
.tabs-dash::after { content: ""; display: block; width: 18px; height: 2px; margin-inline: auto; border-radius: 2px; background: var(--accent); }
.tabs-dash:dir(rtl) { --dir: -1; }
.tabs:has(> a:nth-of-type(2)[aria-current="page"]) { --tab-i: 1; }
.tabs:has(> a:nth-of-type(3)[aria-current="page"]) { --tab-i: 2; }
.tabs:has(> a:nth-of-type(4)[aria-current="page"]) { --tab-i: 3; }
.tabs:not(:has(> a[aria-current="page"])) .tabs-dash { display: none; }
@starting-style { .tabs-dash { opacity: 0; } }
@media (min-width: 900px) { .tabs { position: static; display: flex; gap: var(--s-6); background: none; border: 0; padding: 0; backdrop-filter: none; } .tabs a { grid-auto-flow: column; font-size: 14px; color: var(--ink-2); } .tabs a svg { display: none; } .tabs a[aria-current="page"]::before { top: auto; bottom: -2px; width: 100%; } .tabs-dash { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border-radius: var(--r-ctl); border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); font: 500 15px/1 var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none; }
.btn:hover { border-color: var(--field-border); }
.btn-primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn-primary:hover { background: color-mix(in oklab, var(--ink) 88%, var(--canvas)); border-color: transparent; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn-wide { width: 100%; min-height: 52px; font-size: 16px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn kbd { font: 500 11px/1 var(--font-mono); color: inherit; opacity: 0.6; padding: 3px 5px; border-radius: 5px; border: 1px solid currentColor; }
@media (hover: none) { .btn kbd { display: none; } }

/* ---------- chips and segmented control ---------- */
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink-2); font: 500 13px/1 var(--font-ui); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--r-ctl); background: var(--surface-2); }
.seg button { position: relative; z-index: 1; min-height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 500 13px/1 var(--font-ui); cursor: pointer; }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: 9px; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px var(--hairline); transition: transform var(--dur-base) var(--spring-snappy); }
/* touch: every chip and segment is a 44px target (DESIGN.md: chip 36px fine pointer / 44px coarse) */
@media (pointer: coarse) {
  .chip { min-height: var(--tap); padding: 0 16px; }
  .seg { padding: 0; }
  .seg button { min-height: var(--tap); }
  .seg-thumb { top: 3px; bottom: 3px; }
}

/* ---------- inputs ---------- */
.field-label { display: block; font: 500 var(--fs-label)/1.3 var(--font-ui); color: var(--ink-2); margin-bottom: 6px; }
.input { width: 100%; min-height: var(--tap); padding: 10px 12px; border-radius: var(--r-ctl); border: 1px solid var(--field-border); background: var(--surface); font-size: 16px; }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the answer field on a study card: no box, a baseline */
.answer { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--field-border); }
.answer-input { flex: 1; min-width: 0; min-height: 52px; padding: 8px 0; border: 0; background: transparent; outline: none; font: 400 var(--fs-input)/1.3 var(--font-ui); color: var(--ink); caret-color: var(--accent); }
.answer-input::placeholder { color: var(--ink-3); }
.answer:focus-within { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.answer .check { width: 24px; height: 24px; flex: none; color: var(--ok); }
.answer.is-wrong .answer-input { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 1.5px; }

/* ---------- study card ---------- */
.card { position: relative; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--s-6) var(--s-5) var(--s-5); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.prompt { margin-top: var(--s-4); font: 400 var(--fs-prompt)/1.18 var(--font-display); letter-spacing: -0.012em; text-wrap: pretty; }
.prompt-hint { margin-top: var(--s-2); color: var(--ink-2); font-size: 14px; }
.card .answer { margin-top: var(--s-8); }
.card-actions { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.card-actions .btn-primary { flex: 1; }
.answer-key { margin-top: var(--s-3); font: 400 20px/1.35 var(--font-display); }
.answer-key mark { background: none; color: inherit; text-decoration: underline 2px var(--ok); text-underline-offset: 4px; }

/* ---------- word tiles (grammar layer) ---------- */
.tiles { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.tile { --c: var(--role-plain); display: inline-flex; flex-direction: column; gap: 2px; padding: 6px 10px 5px; border-radius: var(--r-tile); background: color-mix(in oklab, var(--c) var(--role-mix), var(--surface)); box-shadow: inset 0 -3px 0 var(--c); font: 500 18px/1.25 var(--font-ui); white-space: nowrap; }
.tile small { font: 400 11px/1.2 var(--font-mono); color: var(--ink-3); }
.tile.fn { --c: var(--role-fn); } .tile.door { --c: var(--role-door); } .tile.turn { --c: var(--role-turn); } .tile.glue { --c: var(--role-glue); } .tile.slot { --c: var(--role-slot); }
.tile.gap { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline-strong); color: var(--ink-3); }

/* ---------- progress ---------- */
.track { position: relative; height: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.track .fill { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); }
.track.accent .fill { background: var(--accent); }
.segments { display: grid; grid-template-columns: repeat(var(--n, 12), 1fr); gap: 3px; }
.segments i { position: relative; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.segments i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); }
.segments i.is-miss::after { background: var(--bad); opacity: 0.85; }
/* a study step on a new item (Show me): seen, not missed */
.segments i.is-seen::after { background: var(--ink-3); }
.segments i.is-now::after { background: var(--accent); transform: scaleX(0.18); }

/* ---------- readiness ring ---------- */
.ring { position: relative; width: var(--size, 168px); aspect-ratio: 1; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { stroke: var(--surface-2); }
.ring-arc { stroke: var(--ink); }
.ring-arc.today { stroke: var(--accent); }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-center .figure { font-size: calc(var(--size, 168px) * 0.3); }
.modules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-6); }
.module { display: grid; gap: 6px; }
.module-row { display: flex; justify-content: space-between; font-size: 14px; }
.module-row b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- readiness field (brand.js Field) ---------- */
.field { width: 100%; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.legend span::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--k); }

/* ---------- countdown runway (brand.js runway()) ---------- */
.countdown { display: grid; gap: var(--s-5); }
.countdown-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.runway { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap, 6px); align-items: end; }
.runway-day { display: grid; gap: 6px; justify-items: center; }
.runway-bar { position: relative; width: 100%; height: var(--h, 64px); border-radius: 4px; background: var(--cell-plan); box-shadow: inset 0 0 0 1px var(--field-border); overflow: hidden; }
.runway-bar > span { position: absolute; inset: auto 0 0 0; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: bottom; transform: scaleY(var(--p, 0)); transition: transform var(--dur-fill) var(--spring-soft); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.runway-day.is-past .runway-bar > span { background: var(--cell-known); }
.runway-day.is-today .runway-bar { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--accent-soft); }
.runway-day.is-today .runway-bar > span { background: var(--accent); }
.runway-day.is-exam .runway-bar { background: none; box-shadow: none; display: grid; place-items: end center; overflow: visible; }
.runway-day.is-exam .runway-bar::after { content: ""; width: 14px; height: 14px; margin-bottom: 4px; transform: rotate(45deg); border-radius: 2px; background: var(--ink); }
.runway-day abbr { text-decoration: none; font: 500 11px/1 var(--font-ui); color: var(--ink-3); }
.runway-day.is-today abbr { color: var(--accent-ink); }
.runway-day.is-exam abbr { color: var(--ink); }
.runway-day small { font: 400 10px/1 var(--font-ui); color: var(--ink-3); min-height: 10px; }
.runway-day.is-today small { color: var(--accent-ink); }
/* this week's strip (brand.js weekStrip): an Off day is a baseline, or a bar of what he studied anyway */
/* the week strip (brand.js weekStrip): it spreads to its card's width, bars at most 30 px centred in their column.
   States (round 4): done = ink fill over the plan fill; missed = the plan fill only; future = an outline, no fill;
   today = accent outline, accent-soft, the minutes done in accent; off = a 1 px baseline. The plan fill is opaque
   (ink 14 % on the surface, 20 % dark), so an equal plan looks equal over the atmosphere; it keeps the field-border
   edge (3.3:1), so a planned bar clears 3:1 as a graphical object; a future day is that edge alone. */
.wk-strip { --wk-plan: color-mix(in oklab, var(--ink) 14%, var(--surface)); gap: 10px; justify-items: center; }
.wk-strip .runway-day { width: 100%; }
.wk-strip .runway-bar { max-width: 30px; transform-origin: bottom; background: var(--wk-plan); box-shadow: inset 0 0 0 1px var(--field-border); }
.wk-strip .runway-day.is-future .runway-bar, .wk-strip .runway-day.is-plan .runway-bar { background: none; box-shadow: inset 0 0 0 1px var(--field-border); }
.wk-strip.is-plan .runway-day .runway-bar { background: var(--wk-plan); box-shadow: inset 0 0 0 1px var(--field-border); }
.wk-strip .runway-day.is-done .runway-bar > span { background: var(--ink); }
.wk-strip .runway-day.is-today .runway-bar { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.wk-strip .runway-day.is-off:not(.is-extra) .runway-bar { height: 1px; background: var(--field-border); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wk-strip { --wk-plan: color-mix(in oklab, var(--ink) 20%, var(--surface)); } }
:root[data-theme="dark"] .wk-strip { --wk-plan: color-mix(in oklab, var(--ink) 20%, var(--surface)); }

/* ---------- study days strip ---------- */
.days { display: grid; grid-template-columns: repeat(var(--n, 28), 1fr); gap: 3px; }
.days i { aspect-ratio: 1; border-radius: 3px; background: var(--cell-empty); box-shadow: inset 0 0 0 1px var(--hairline); }
.days i.on { background: var(--cell-known); }
.days i.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.days i.today.on { background: var(--accent); box-shadow: none; }

/* ---------- stat ---------- */
.stat { display: grid; gap: 4px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-6); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--s-3); padding-block: 10px; padding-inline: 18px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: 14px; box-shadow: var(--shadow-lift); transform: translateX(-50%); white-space: nowrap; }
.toast .btn { min-height: 34px; padding: 0 12px; background: transparent; color: inherit; border-color: color-mix(in oklab, var(--on-ink) 35%, transparent); }

/* ---------- atmosphere (brand.js Atmosphere) ---------- */
/* The CSS gradient is the shader's first frame, stop for stop where it matters (the cobalt at the top and bottom of
   the right edge, a softer cast at the left middle, the light diagonal between them), so the canvas that mounts after
   idle only fades in over it (640 ms, opacity only) and nothing visibly changes on Today at rest. */
.atmo { position: absolute; inset: 0; z-index: var(--z-atmo); overflow: hidden; pointer-events: none;
  background:
    radial-gradient(60% 85% at 100% 0%, var(--atmo-4) 10%, transparent 85%),
    radial-gradient(78% 80% at 78% 108%, var(--atmo-2) 15%, transparent 86%),
    radial-gradient(42% 52% at -4% 58%, color-mix(in oklab, var(--atmo-2) 75%, transparent), transparent 72%),
    linear-gradient(160deg, var(--atmo-1) 30%, var(--atmo-3)); }
.atmo canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity var(--dur-fill) var(--ease-out); }
.atmo.is-live canvas { opacity: 1; }
.hero { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-card); padding: var(--s-6) var(--s-5) var(--s-5); }
.hero > :not(.atmo) { position: relative; z-index: var(--z-content); }
@media (forced-colors: active) {
  .atmo { display: none; }
  /* the segmented control's thumb is a background: the pressed option gets an outline instead (audit P1-12) */
  .seg button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  /* data drawn only with background colour would vanish: outline it, fill it with the system colours */
  .runway-bar, .days i, .track, .segments i { border: 1px solid CanvasText; }
  .runway-bar > span, .days i.on, .track .fill, .segments i::after { background: CanvasText; forced-color-adjust: none; }
  .runway-day.is-today .runway-bar > span, .days i.today.on, .segments i.is-now::after { background: Highlight; }
  .runway-day.is-exam .runway-bar { border: 0; }
  .wk-strip .runway-day.is-off:not(.is-extra) .runway-bar { border-width: 1px 0 0; background: none; }
  .runway-day.is-exam .runway-bar::after { background: CanvasText; forced-color-adjust: none; }
}

/* ---------- grade4: the one self-grade control (Again / Hard / Good / Easy) ---------- */
.grade4-wrap { display: grid; gap: var(--s-2); }
.grade4-wrap[hidden] { display: none; }
.grade4-what { margin: 0; min-height: 1.4em; color: var(--ink-3); }
.grade4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.grade4-b { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 64px; padding: 6px 4px;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink);
  font: 600 15px/1.15 var(--font-ui); cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.grade4-when { color: var(--ink-3); white-space: nowrap; font-weight: 400; }
.grade4-b kbd { position: absolute; bottom: 5px; inset-inline-end: 6px; font: 500 10px/1 var(--font-mono); color: var(--ink-3); }
@media (hover: none), (pointer: coarse) { .grade4-b kbd { display: none; } }
/* the suggestion: a 6px accent dot, no fill (nothing looks chosen before a tap) */
.grade4-b.is-suggested::after { content: ""; position: absolute; top: 7px; inset-inline-end: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.grade4-b.is-picked { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.grade4-b.is-picked .grade4-when { color: color-mix(in oklab, var(--on-ink) 72%, transparent); }
.grade4-b.is-picked::after { background: var(--on-ink); }
.grade4-b:disabled { cursor: default; }
@media (forced-colors: active) { .grade4-b.is-picked { border: 2px solid Highlight; } }

/* ---------- word panel (core/wordpanel.js): every card whose item is one word ---------- */
.wp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 500 13px/1.3 var(--font-ui); color: var(--ink-3); }
.wp-type { color: var(--ink-2); }
.wp-dot { color: var(--ink-3); }
.wp-freq { display: inline-flex; align-items: center; gap: 6px; }
.wp-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.wp-bar { width: 3px; border-radius: 1px; background: var(--cell-empty); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.wp-bar:nth-child(1) { height: 4px; } .wp-bar:nth-child(2) { height: 6px; } .wp-bar:nth-child(3) { height: 8px; } .wp-bar:nth-child(4) { height: 10px; } .wp-bar:nth-child(5) { height: 11px; }
.wp-bar.is-on { background: var(--ink-2); box-shadow: none; }
.wp { display: grid; gap: 6px; padding: var(--s-3); border-radius: var(--r-ctl); background: var(--surface-2); }
.wp p { margin: 0; }
.wp-head { font: 600 17px/1.35 var(--font-ui); color: var(--ink); }
.wp-forms { font: 400 17px/1.4 var(--font-display); color: var(--ink); }
.wp-sub { font-size: 15px; color: var(--ink-2); }
.wp-ex { display: flex; align-items: flex-start; gap: var(--s-1); margin-top: 2px; }
.wp-ex-de { font: 400 17px/1.45 var(--font-display); color: var(--ink); }
.wp-hl { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wp-src { margin-top: 2px; }

/* ---- R8 U1: Back link (core/ui.js backLink) ----
   One back control on every page: chevron + the name of the page it goes back to, one line, 44 px tall and wide. */
.back-link { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); min-width: var(--tap); max-width: 100%;
  margin-inline-start: -6px; padding: 0 4px 0 6px; border: 0; border-radius: var(--r-ctl); background: none;
  color: var(--ink-2); font: 500 14px/1.2 var(--font-ui); text-decoration: none; white-space: nowrap;
  align-self: flex-start; justify-self: start; flex: none; cursor: pointer; }
.back-link:hover { color: var(--ink); }
.back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.back-link .icon { flex: none; }
.back-link .icon:dir(rtl) { transform: scaleX(-1); }
.back-link-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.back-link + .page-head { padding-top: 0; }
/* a header row that also holds controls: below 400 px only the chevron, centred in its 44 px */
@media (max-width: 399.98px) {
  .back-link-narrow { justify-content: center; padding: 0; margin-inline-start: -12px; }
  .back-link-narrow .back-link-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* ---- end of R8 U1 ---- */