:root {
  --bg: #f7f5f0; --fg: #1d1b17; --muted: #5f5a52; --panel: #ffffff; --line: #ddd7cc;
  --accent: #8a2f1f; --accent-fg: #ffffff; --accent-soft: #f3e3df; --link: #7a2a1b;
  --ok: #1f6b3a; --warn: #8a5a00; --warn-bg: #fff5dc; --danger: #a12626; --pill: #ece7dc;
  --focus: #0b57d0; --status-fg: #ffffff; --radius: 10px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15130f; --fg: #f0ebe2; --muted: #b3aa9b; --panel: #201d18; --line: #3a352c;
    --accent: #e07a5f; --accent-fg: #1b1410; --accent-soft: #3a2420; --link: #f0a28b;
    --ok: #6fd39a; --warn: #f2c766; --warn-bg: #332a12; --danger: #ff8a8a; --pill: #2d2922; --focus: #8ab4f8; --status-fg: #1b1410;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg: #15130f; --fg: #f0ebe2; --muted: #b3aa9b; --panel: #201d18; --line: #3a352c;
  --accent: #e07a5f; --accent-fg: #1b1410; --accent-soft: #3a2420; --link: #f0a28b;
  --ok: #6fd39a; --warn: #f2c766; --warn-bg: #332a12; --danger: #ff8a8a; --pill: #2d2922; --focus: #8ab4f8; --status-fg: #1b1410;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; line-height: 1.5; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-fg); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.banner { background: var(--warn-bg); color: var(--fg); border-bottom: 1px solid var(--line); padding: .55rem 16px; font-size: .9rem; text-align: center; }
header.site { border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 10; }
header.site .row { display: flex; align-items: center; gap: 1rem; min-height: 60px; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; color: var(--fg); margin-right: auto; }
.brand .mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font-weight: 800; }
.brand .muted { font-weight: 400; font-size: .85rem; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; flex-wrap: wrap; }
nav a { display: inline-block; padding: .55rem .7rem; border-radius: 8px; text-decoration: none; color: var(--fg); min-height: 44px; line-height: 1.6; }
nav a:hover { background: var(--accent-soft); }
nav a[aria-current="page"] { background: var(--accent); color: var(--accent-fg); }
.navtoggle { display: none; }
.navtoggle summary { cursor: pointer; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 8px; min-height: 44px; list-style: none; }
.navtoggle[open] nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border-bottom: 1px solid var(--line); padding: .5rem 16px 1rem; }
.navtoggle[open] nav ul { flex-direction: column; }
@media (max-width: 900px) { .navwide { display: none; } .navtoggle { display: block; } }
.who { display: flex; gap: .75rem; align-items: center; justify-content: flex-end; padding: .35rem 0 .6rem; font-size: .9rem; }
main { padding: 1.5rem 16px 3rem; }
footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; padding: 1.5rem 0; }
h1 { font-size: 2rem; line-height: 1.15; margin: .2rem 0 .8rem; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 70ch; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.hero { padding: 2rem 0 1rem; }
.hero h1 { font-size: 2.6rem; max-width: 20ch; }
.cta { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn { display: inline-block; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); text-decoration: none; cursor: pointer; font: inherit; min-height: 44px; }
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: .35rem .7rem; min-height: 36px; font-size: .9rem; }
.grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 800px) { .grid2, .grid3 { grid-template-columns: 1fr; } .hero h1 { font-size: 2rem; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.panel.warn { border-color: var(--warn); background: var(--warn-bg); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.card p { margin: .3rem 0; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag { display: inline-block; padding: .15rem .55rem; border-radius: 999px; background: var(--pill); color: var(--fg); font-size: .8rem; text-decoration: none; border: 1px solid transparent; }
.tag-on, .tag:hover { border-color: var(--accent); }
.pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; background: var(--pill); vertical-align: middle; }
.pill-published, .pill-active, .pill-checked_in, .pill-printed, .pill-ok, .pill-open, .pill-approved { background: var(--ok); color: var(--status-fg); }
.pill-pending, .pill-in_review, .pill-queued, .pill-waitlisted, .pill-retry_scheduled, .pill-claimed, .pill-full, .pill-contacted { background: var(--warn); color: var(--status-fg); }
.pill-rejected, .pill-refused, .pill-failed, .pill-failed_final, .pill-closed, .pill-declined, .pill-unpublished, .pill-urgent { background: var(--danger); color: var(--status-fg); }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.events li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
ol.steps { padding-left: 1.2rem; } ol.steps li { margin: .35rem 0; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85rem; color: var(--muted); }
label { display: block; margin: .7rem 0 .25rem; font-weight: 600; font-size: .95rem; }
label.check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
input:not([type="checkbox"]), select, textarea { width: 100%; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; min-height: 44px; }
input[type="checkbox"] { width: 22px; height: 22px; }
form button { margin-top: .8rem; }
form.inline { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; } form.inline button { margin-top: 0; }
form.inline input { width: auto; min-width: 180px; min-height: 36px; }
.search { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; } .search label { margin: 0 0 .25rem; flex-basis: 100%; }
.search input { flex: 1; min-width: 220px; } .search .btn { margin: 0; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; align-items: end; }
.filters label { margin: 0; } .filters .btn { margin: 0; }
.flash { padding: .7rem 1rem; border-radius: 8px; margin: .8rem 0; border: 1px solid var(--line); background: var(--panel); }
.flash-ok { border-color: var(--ok); } .flash-warn { border-color: var(--warn); background: var(--warn-bg); } .flash-error { border-color: var(--danger); }
.preview { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .8rem; max-height: 320px; overflow: auto; font-size: .85rem; }
.chat { min-height: 200px; max-height: 60vh; overflow: auto; display: flex; flex-direction: column; gap: .6rem; }
.msg { max-width: 85%; padding: .6rem .8rem; border-radius: 12px; }
.msg.bot { background: var(--accent-soft); align-self: flex-start; } .msg.me { background: var(--pill); align-self: flex-end; }
.msg p { margin: .2rem 0; }
.msg .cite { font-size: .8rem; color: var(--muted); border-top: 1px dashed var(--line); margin-top: .4rem; padding-top: .3rem; }
.msg.urgent { border: 2px solid var(--danger); }
.askrow { display: flex; gap: .5rem; margin-top: .8rem; } .askrow input { flex: 1; } .askrow button { margin: 0; }
.hidden { display: none; }
.idcard button { width: 100%; }
code { font-size: .9em; background: var(--pill); padding: .05rem .3rem; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) { .btn, nav a { transition: background .15s, border-color .15s; } }
.theme { white-space: nowrap; }
@media (max-width: 480px) { .brand .muted { display: none; } html { font-size: 16px; } }

/* ---------- Ember and Stone: Meta's chosen direction (meta/DIRECTIONS.md), lifted as token values ---------- */
:root[data-theme="ember"] {
  --bg: #faf6ef; --fg: #1c1712; --muted: #4a4036; --panel: #fffdf9; --line: #ddd2c0;
  --accent: #a63e00; --accent-fg: #ffffff; --accent-soft: #f1e9dc; --link: #7e2f00;
  --ok: #1e6b34; --warn: #8a5a00; --warn-bg: #f1e9dc; --danger: #a11d1d; --pill: #f1e9dc;
  --focus: #0b5fff; --status-fg: #ffffff; --radius: 14px;
  --stone: #2a231c; --stone-2: #362c22; --cream: #f7f1e6; --cream-soft: #d8cbb8; --ember-bright: #e07b39; --gold-bright: #e3b959; --line-dark: #574a3a;
  --font-display: "Arial Narrow", "Helvetica Neue Condensed", Impact, system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(28,23,18,.06), 0 8px 24px rgba(28,23,18,.06);
}
:root[data-theme="ember"] .banner { background: var(--stone); color: var(--cream); border-bottom-color: var(--line-dark); }
:root[data-theme="ember"] header.site { background: var(--stone-2); border-bottom-color: var(--line-dark); }
:root[data-theme="ember"] header.site .brand, :root[data-theme="ember"] nav a, :root[data-theme="ember"] .who { color: var(--cream); }
:root[data-theme="ember"] .brand .muted { color: var(--cream-soft); }
:root[data-theme="ember"] nav a:hover { background: var(--stone); }
:root[data-theme="ember"] nav a[aria-current="page"] { background: var(--ember-bright); color: #1c1712; }
:root[data-theme="ember"] .brand .mark { background: var(--ember-bright); color: #1c1712; }
:root[data-theme="ember"] header.site .btn { background: var(--stone); color: var(--cream); border-color: var(--line-dark); }
:root[data-theme="ember"] .navtoggle summary { color: var(--cream); border-color: var(--line-dark); }
:root[data-theme="ember"] .navtoggle[open] nav { background: var(--stone-2); border-bottom-color: var(--line-dark); }
:root[data-theme="ember"] .hero { background: var(--stone); color: var(--cream); margin: 0 -16px; padding: 2.5rem 16px 2rem; border-radius: 0 0 var(--radius) var(--radius); }
:root[data-theme="ember"] .hero .lede { color: var(--cream-soft); }
:root[data-theme="ember"] .hero .btn { background: var(--stone-2); color: var(--cream); border-color: var(--line-dark); }
:root[data-theme="ember"] .hero .btn-primary { background: var(--ember-bright); color: #1c1712; border-color: var(--ember-bright); }
:root[data-theme="ember"] h1, :root[data-theme="ember"] h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
:root[data-theme="ember"] h1 { font-size: 2.4rem; }
:root[data-theme="ember"] .hero h1 { font-size: 3rem; color: var(--gold-bright); }
:root[data-theme="ember"] .msg.bot { background: var(--accent-soft); }
:root[data-theme="ember"] footer.site { background: var(--stone); color: var(--cream-soft); border-top-color: var(--line-dark); }
:root[data-theme="ember"] footer.site a { color: var(--gold-bright); }
@media (max-width: 800px) { :root[data-theme="ember"] .hero h1 { font-size: 2.3rem; } }

.lang-notice { font-size: .85rem; }
.lang { min-width: 44px; text-align: center; }


/* ======== Meta polish (courageous-polish-20261022), merged by Fable A 2026-10-22. Geometry only, no color changes. ======== */
/* F-01: small buttons measured 36-37px tall on every public page (header
   language link, theme toggle, chat handoff buttons, inline-form buttons).
   The assignment floor is 44px. */
.btn-sm { min-height: 44px; }
form.inline input { min-height: 44px; }

/* F-02: the header brand link measured 32px tall at phone widths.
   Give the brand row a full 44px hit area. */
.brand { min-height: 44px; }

/* F-06: the skip link measured 40px tall at 375px (43px on desktop).
   Bring it to the same 44px floor without moving it. */
.skip { min-height: 44px; display: inline-flex; align-items: center; }

/* F-03: tag links on Home and Resources measured 26-27px tall; there are
   89 of them on /resources alone. Make each tag a 44px chip. The visual
   size of the text is unchanged; only the hit area and row spacing grow. */
.tag { min-height: 44px; display: inline-flex; align-items: center; }
.tags { row-gap: .5rem; }

/* F-11: at 375px and 390px the header row (brand, Menu, language, theme)
   is wider than its container: the theme toggle measured 46-57px past the
   row's right edge and renders clipped at the viewport edge on every
   public page, in every theme and both languages (screenshots
   before-*-375.png). Let the row wrap; the language and theme controls
   drop to a second line, right-aligned, fully visible and tappable. */
@media (max-width: 560px) {
  header.site .row { flex-wrap: wrap; row-gap: .35rem; padding-top: .35rem; padding-bottom: .35rem; }
  header.site .lang { margin-left: auto; }
}

/* F-05 (footer part): footer links measured 15-16px tall. Grow their hit
   area vertically without changing footer text or layout order. Links
   inside prose paragraphs are intentionally NOT padded: they fall under
   the WCAG 2.5.8 inline-text exception and are recorded as a measured,
   accepted deviation in POLISH-FINDINGS.md. */
footer.site a { display: inline-block; padding-top: .45rem; padding-bottom: .45rem; }

/* F-09: card title links (the primary action of every group, message and
   resource card) measured 19-20px tall, and detail-page back links
   measured 17-19px. Expand both hit areas with padding that a matching
   negative margin cancels out, so card and page layout do not move. */
.card h3 a { display: inline-block; padding: .7rem .4rem; margin: -.7rem -.4rem; }
main > p:first-child > a:only-child { display: inline-block; padding: .65rem .2rem; margin: -.65rem -.2rem; }

/* F-10: long destination URLs (for example the SENT booklet S3 link on
   /resources/lt-01) render as one unbroken string. Allow them to wrap
   inside their card instead of stretching the line. */
a[href^="http"] { overflow-wrap: anywhere; }

/* Fable A adjustment to F-11: Meta's wrap is adopted (toggle fully inside the row), and to offset the taller
   two-row header at phone widths it is no longer sticky below 560px, so it scrolls away with the page instead of
   holding 107px of a 812px viewport. Measured in the real browser: header 61px to about 107px tall at 375px. */
@media (max-width: 560px) {
  header.site { position: static; }
  .skip:focus { position: fixed; }
}

/* Fable A adjustment to F-09: measured in the real browser at 375px, Meta's horizontal negative margin on card title
   links overlapped the status pill that follows the title on /groups cards (9 of 9 at first pass, 8 after dropping the
   horizontal spill: when a long title wraps, the pill lands on the next line and the padded box reaches it). Keep the
   hit-area expansion in normal flow (padding, no negative margin) so the card grows a little and nothing overlaps. */
.card h3 a { padding: .6rem 0; margin: 0; }
.card h3 .pill { vertical-align: middle; }

/* Fable A, measured at 1024px in the real browser: the eight-item wide nav plus language and theme controls wrapped the
   sticky header to 147px. Use the compact Menu disclosure up to 1100px so tablets in landscape get the 61px header. */
@media (max-width: 1100px) { .navwide { display: none; } .navtoggle { display: block; } }

/* Fable A, seen at 375px after Meta's F-11 wrap: the theme button wrapped alone to a second row and sat left-aligned
   under the brand. Right-align it so both header controls read as one group on the right. */
@media (max-width: 560px) { header.site .theme { margin-left: auto; } }