/* ==========================================================================
   Jonodut design system
   --------------------------------------------------------------------------
   Concept: Held. Forest green and one saffron dot, the dot from the logo:
   it marks where you are, and it drops into the j when you publish.
   Bangla is a first-class script. Everything else stays quiet.

   Rules the system enforces
   - Bangla text gets its own size and line-height (tall matras, low vowel
     signs) and never gets letter-spacing, which breaks conjuncts.
   - No all-caps labels. Bangla has no case, so mixed screens stay even.
   - Status is shown by shape AND colour AND words, never colour alone.
   - Red is for danger only. The brand avoids flag red-and-green together so
     nothing reads as a government mark.
   - Touch targets are at least 44px, and 48px on phones.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Colour */
  --paper: #f5f7f4;          /* page ground, cool and faintly green */
  --surface: #ffffff;        /* panels, inputs, menus */
  --surface-sunk: #eef2ef;   /* wells, table heads, disabled */
  --ink: #13261e;            /* primary text */
  --ink-2: #4a5d54;          /* secondary text, 6.9:1 on white */
  --line: #d3dcd7;           /* dividers, quiet borders */
  --line-strong: #8e9e96;    /* input borders, 3:1 on white */
  --green: #12382c;          /* forest: primary action, links */
  --green-deep: #0a231b;     /* hover, pressed */
  --green-tint: #e3ede8;     /* selected rows, current nav */
  --rail: #12382c;           /* workspace side menu */
  --rail-hover: #1b4a3b;
  --rail-text: #d6e4dc;
  --rail-muted: #a9c3b6;
  --dot: #f2a900;            /* marigold: the one accent on dark */
  --danger: #a3122a;
  --danger-tint: #fbe4e7;
  --focus: #c97f00;
  --logo-ink: #12382c;
  --logo-dot: #c97f00;   /* saffron: 3:1 on light grounds */

  /* Status pairs: text on tint */
  --st-draft: #3e4c7a;   --st-draft-bg: #e7eaf5;
  --st-pending: #7a5100; --st-pending-bg: #fbefd3;
  --st-info: #a33f00;    --st-info-bg: #fde7d7;
  --st-ok: #146b44;      --st-ok-bg: #dff2e7;
  --st-bad: #a3122a;     --st-bad-bg: #fbe4e7;
  --st-neutral: #4a5d54; --st-neutral-bg: #eaefec;

  /* Type */
  --font-display: "Instrument Sans", "Hind Siliguri", system-ui, sans-serif;
  --font-ui: "Instrument Sans", "Hind Siliguri", system-ui, sans-serif;
  --font-bn: "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  /* Major-third scale on a 16px base (17px on wide screens) */
  --t-xs: 0.8125rem;  /* 13 */
  --t-sm: 0.875rem;   /* 14 */
  --t-md: 1rem;       /* 16 / 17 */
  --t-lg: 1.25rem;    /* 20 */
  --t-xl: 1.5625rem;  /* 25 */
  --t-2xl: 1.953rem;  /* 31 */
  --t-3xl: 2.441rem;  /* 39 */
  --t-4xl: 3.052rem;  /* 49 */
  --lh-tight: 1.2;
  --lh-body: 1.6;
  --lh-bn: 1.75;

  /* Space: 4px steps */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Shape */
  --r-control: 6px;
  --r-panel: 10px;
  --r-sheet: 16px;
  --r-pill: 999px;
  --shadow-overlay: 0 12px 32px rgb(19 38 30 / 0.16), 0 2px 6px rgb(19 38 30 / 0.08);

  /* Size */
  --control-h: 44px;
  --measure: 66ch;
  --shell-max: 1240px;
  --tabbar-h: 64px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1713; --surface: #15211b; --surface-sunk: #1b2a23;
    --ink: #e6eee9; --ink-2: #a3b4ab; --line: #2a3a33; --line-strong: #5e7268;
    --green: #7fd3b0; --green-deep: #a6e3c9; --green-tint: #183429;
    --danger: #ff8f9f; --danger-tint: #3b1a20; --focus: #f2a900;
    --logo-ink: #ffffff; --logo-dot: #f2a900;
    --st-draft: #b3bdf0;   --st-draft-bg: #232a47;
    --st-pending: #f2c467; --st-pending-bg: #352910;
    --st-info: #ffad7a;    --st-info-bg: #3a2213;
    --st-ok: #7fd9a6;      --st-ok-bg: #173325;
    --st-bad: #ff8f9f;     --st-bad-bg: #3b1a20;
    --st-neutral: #a3b4ab; --st-neutral-bg: #23302a;
    --shadow-overlay: 0 12px 32px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1713; --surface: #15211b; --surface-sunk: #1b2a23;
  --ink: #e6eee9; --ink-2: #a3b4ab; --line: #2a3a33; --line-strong: #5e7268;
  --green: #7fd3b0; --green-deep: #a6e3c9; --green-tint: #183429;
  --danger: #ff8f9f; --danger-tint: #3b1a20; --focus: #f2a900;
    --logo-ink: #ffffff; --logo-dot: #f2a900;
  --st-draft: #b3bdf0;   --st-draft-bg: #232a47;
  --st-pending: #f2c467; --st-pending-bg: #352910;
  --st-info: #ffad7a;    --st-info-bg: #3a2213;
  --st-ok: #7fd9a6;      --st-ok-bg: #173325;
  --st-bad: #ff8f9f;     --st-bad-bg: #3b1a20;
  --st-neutral: #a3b4ab; --st-neutral-bg: #23302a;
  --shadow-overlay: 0 12px 32px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}
@media (min-width: 1024px) { html { font-size: 106.25%; } } /* 17px */

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); text-wrap: balance; color: var(--ink); }
h1, .t-display { font-family: var(--font-display); font-weight: 600; font-size: var(--t-3xl); letter-spacing: -0.02em; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--t-lg); font-weight: 600; }
h4 { font-size: var(--t-md); font-weight: 600; }
p { margin: 0; }
small, .t-small { font-size: var(--t-sm); }
.t-muted { color: var(--ink-2); }
.t-num { font-variant-numeric: tabular-nums; }
.prose { max-width: var(--measure); overflow-wrap: anywhere; display: grid; gap: var(--s4); }
.lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 46ch; }

a { color: var(--green); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--green-deep); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* Bangla: larger, airier, never tracked */
:lang(bn) { font-family: var(--font-bn); line-height: var(--lh-bn); letter-spacing: 0 !important; }
:lang(bn):not(h1, h2, h3, .t-display) { font-size: 1.06em; }
:is(h1, h2, h3, .t-display):lang(bn) { line-height: 1.35; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: baseline; gap: var(--s2); color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); text-decoration: none; }
/* Logo: the j's dot rests in its own hook, the people holding up their leader. */
.brand { align-items: center; }
.logo { display: block; height: 30px; width: auto; }
.logo__ink { fill: var(--logo-ink); }
.logo__stroke { stroke: var(--logo-ink); }
.logo__dot { fill: var(--logo-dot); }

/* ---------- Layout shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  min-height: 60px;
  padding-block: var(--s2);
  padding-left: max(var(--s4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--s4), env(safe-area-inset-right, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar__spacer { flex: 1 1 auto; }
.topbar__nav { display: flex; align-items: center; gap: var(--s2); }
.topbar__nav form { margin: 0; }

.page {
  width: 100%; max-width: var(--shell-max); margin: 0 auto;
  padding-block: var(--s6) var(--s8);
  padding-left: max(var(--s4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--s4), env(safe-area-inset-right, 0px));
  display: grid; gap: var(--s6);
}
.page--narrow { max-width: 560px; }
.page__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); overflow-wrap: anywhere; }
.page__head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }

/* Workspace: side menu beside content; becomes a bottom tab bar on phones */
.shell { display: flex; flex-wrap: wrap; gap: var(--s6); align-items: flex-start; }
.shell__nav { flex: 1 1 200px; max-width: 220px; display: grid; gap: 2px; }
.shell__main { flex: 999 1 560px; min-width: 0; display: grid; gap: var(--s6); }
.navlink {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--control-h); padding: 0 var(--s3);
  border-radius: var(--r-control);
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.navlink:hover { background: var(--surface-sunk); color: var(--ink); text-decoration: none; }
.navlink[aria-current="page"] { background: var(--green-tint); color: var(--green-deep); font-weight: 600; }
.navlink__count { margin-left: auto; }

.tabbar { display: none; }

.site-footer {
  padding-block: var(--s5);
  padding-left: max(var(--s4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--s4), env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--t-sm);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--control-h); padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-md); font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.btn:hover { background: var(--surface-sunk); color: var(--ink); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green); border-color: var(--green); color: var(--surface); }
.btn--primary:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--surface); }
.btn--quiet { border-color: transparent; background: transparent; color: var(--green); padding: 0 var(--s3); }
.btn--quiet:hover { background: var(--green-tint); color: var(--green-deep); }
.btn--danger { color: var(--danger); border-color: currentColor; }
.btn--danger:hover { background: var(--danger-tint); color: var(--danger); }
.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: 0 var(--s3); font-size: var(--t-sm); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 700ms linear infinite;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */
form { display: grid; gap: var(--s5); }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.field > label, .field__label, legend { font-weight: 600; font-size: var(--t-md); color: var(--ink); padding: 0; }
.field__optional { font-weight: 400; color: var(--ink-2); }
.field__help, .helptext { font-size: var(--t-sm); color: var(--ink-2); max-width: var(--measure); }
.field__help ul, .helptext ul { margin: var(--s1) 0 0; padding-left: 1.2em; display: grid; gap: 2px; }
.field__error, .errorlist {
  display: flex; gap: var(--s2); align-items: flex-start;
  margin: 0; padding: 0; list-style: none;
  color: var(--danger); font-size: var(--t-sm); font-weight: 500;
}
.field__error::before {
  content: "!"; flex: 0 0 auto; width: 1.25em; height: 1.25em; margin-top: 0.15em;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--danger); color: var(--surface); font-size: 0.75em; font-weight: 700;
}
.form-errors { padding: var(--s4); border: 1px solid var(--danger); border-radius: var(--r-panel); background: var(--danger-tint); }

input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea {
  width: 100%; min-width: 0; min-height: 48px;
  padding: var(--s3) var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: max(16px, var(--t-md)); /* 16px+ stops phone zoom */
  line-height: 1.4;
}
textarea { min-height: 8rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); border-radius: var(--r-control);
}
[aria-invalid="true"] { border-color: var(--danger) !important; }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: 0.8; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-sunk); color: var(--ink-2); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--green); flex: 0 0 auto; }

/* Prefix: the subdomain field reads as one address */
.affix { display: flex; align-items: stretch; }
.affix input { border-radius: var(--r-control) 0 0 var(--r-control); }
.affix__end {
  display: flex; align-items: center; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--surface-sunk); color: var(--ink-2); white-space: nowrap;
}

/* Choice rows: radio and checkbox with a large hit area */
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); min-width: 0; }
.choice {
  display: flex; gap: var(--s3); align-items: flex-start;
  min-height: 52px; padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); cursor: pointer;
}
.choice input { margin-top: 0.2em; }
.choice:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.choice__hint { display: block; font-size: var(--t-sm); color: var(--ink-2); }

.dropzone {
  display: grid; place-items: center; gap: var(--s1); text-align: center;
  min-height: 132px; padding: var(--s5);
  border: 2px dashed var(--line-strong); border-radius: var(--r-panel);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.dropzone strong { color: var(--ink); }
.dropzone:hover, .dropzone:focus-within { border-color: var(--green); background: var(--green-tint); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- Status ---------- */
/* Shape carries meaning too: filled = done/live, ring = not started,
   dashed ring = waiting, bar = needs action, cross = stopped. */
.status {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.2em 0.7em 0.2em 0.55em;
  border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.3; white-space: nowrap;
  color: var(--st-neutral); background: var(--st-neutral-bg);
}
.status::before {
  content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; flex: 0 0 auto;
  background: currentColor;
}
.status--draft    { color: var(--st-draft);   background: var(--st-draft-bg); }
.status--draft::before { background: transparent; border: 2px solid currentColor; }
.status--pending  { color: var(--st-pending); background: var(--st-pending-bg); }
.status--pending::before { background: transparent; border: 2px dashed currentColor; width: 0.7em; height: 0.7em; }
.status--changed, .status--info { color: var(--st-info); background: var(--st-info-bg); }
.status--changed::before, .status--info::before { border-radius: 1px; width: 0.25em; height: 0.8em; }
.status--live, .status--approved { color: var(--st-ok); background: var(--st-ok-bg); }
.status--rejected, .status--suspended { color: var(--st-bad); background: var(--st-bad-bg); }
.status--rejected::before, .status--suspended::before {
  border-radius: 0; background: none; width: 0.7em; height: 0.7em;
  background-image: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%),
                    linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%);
}

/* ---------- Verification seal: the one bold element ---------- */
.seal {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3) var(--s1) var(--s1);
  border: 1px solid var(--green); border-radius: var(--r-pill);
  background: var(--surface); color: var(--green-deep);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none; line-height: 1.3;
}
.seal:hover { background: var(--green-tint); color: var(--green-deep); text-decoration: none; }
.seal__mark { width: 28px; height: 28px; flex: 0 0 auto; color: var(--green); }
.seal--large {
  flex-direction: column; text-align: center; gap: var(--s3);
  padding: var(--s5); border-radius: var(--r-panel); max-width: 280px;
}
.seal--large .seal__mark { width: 72px; height: 72px; }
.seal__claim { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--ink); }

/* ---------- Notices and toasts ---------- */
.notice {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); align-items: start;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--surface);
}
.notice > .status { grid-row: 1 / span 2; margin-top: 0.15em; }
.notice__title { font-weight: 600; }
.notice__body { color: var(--ink-2); font-size: var(--t-md); grid-column: 2; }
.notice__actions { grid-column: 2; margin-top: var(--s2); }
.notice--pending { border-color: var(--st-pending); background: var(--st-pending-bg); }
.notice--info    { border-color: var(--st-info);    background: var(--st-info-bg); }
.notice--ok      { border-color: var(--st-ok);      background: var(--st-ok-bg); }
.notice--bad     { border-color: var(--st-bad);     background: var(--st-bad-bg); }
.notice--pending .notice__body, .notice--info .notice__body,
.notice--ok .notice__body, .notice--bad .notice__body { color: var(--ink); }

.toasts {
  position: fixed; z-index: 40; display: grid; gap: var(--s2);
  right: max(var(--s4), env(safe-area-inset-right, 0px));
  bottom: max(var(--s4), env(safe-area-inset-bottom, 0px));
  width: min(380px, calc(100vw - 2 * var(--s4)));
}
.toast {
  padding: var(--s3) var(--s4); border-radius: var(--r-panel);
  background: var(--ink); color: var(--paper); box-shadow: var(--shadow-overlay);
  font-weight: 500;
  animation: toast-in 220ms var(--ease-out);
}
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Panels, lists, tables ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--s5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); min-width: 0;
}
.panel__head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.panel__head > :last-child:not(:first-child) { margin-left: auto; }

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list__row {
  display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap;
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.list__main { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.list__title { font-weight: 600; font-size: var(--t-lg); line-height: 1.3; }
.list__meta { color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.list__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-left: auto; }
.list__actions form { display: contents; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th {
  text-align: left; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  padding: var(--s3) var(--s4); background: var(--surface-sunk); border-bottom: 1px solid var(--line);
}
.table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }

.empty {
  display: grid; gap: var(--s3); justify-items: start;
  padding: var(--s6); border: 1px dashed var(--line-strong); border-radius: var(--r-panel);
}
.empty h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); }

/* ---------- Menus and sheets ---------- */
.menu {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel);
  box-shadow: var(--shadow-overlay); padding: var(--s2); display: grid; gap: 2px; min-width: 280px;
}
.menu__item {
  display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s2) var(--s3);
  border-radius: var(--r-control); color: var(--ink); text-decoration: none;
}
.menu__item:hover { background: var(--surface-sunk); color: var(--ink); text-decoration: none; }
.menu__item[aria-current="true"] { background: var(--green-tint); }
.menu__sep { height: 1px; background: var(--line); margin: var(--s1) 0; }

/* ---------- Public leader site ---------- */
.public-head {
  padding-block: var(--s7) var(--s6);
  padding-left: max(var(--s4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--s4), env(safe-area-inset-right, 0px));
  max-width: var(--shell-max); margin: 0 auto; display: grid; gap: var(--s4);
}
.public-head h1 { font-size: clamp(var(--t-3xl), 6vw, var(--t-4xl)); }
.public-foot { color: var(--ink-2); font-size: var(--t-sm); }

/* Draft preview frame: unmistakably not the live site */
.preview-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding-block: var(--s2);
  padding-left: max(var(--s4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--s4), env(safe-area-inset-right, 0px));
  background: var(--st-pending-bg); color: var(--ink); border-bottom: 2px dashed var(--st-pending);
}

/* ---------- Phone behaviour ---------- */
@media (max-width: 720px) {
  :root { --control-h: 48px; }
  h1, .t-display { font-size: var(--t-2xl); }
  .page { padding-block: var(--s5) var(--s7); gap: var(--s5); }
  .topbar__nav .navlink-desktop { display: none; }

  /* Side menu becomes a bottom tab bar */
  .shell__nav { display: none; }
  .tabbar {
    display: flex; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
    min-height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .tabbar__item {
    flex: 1 1 0; display: grid; justify-items: center; align-content: center; gap: 2px;
    min-height: var(--tabbar-h); color: var(--ink-2); text-decoration: none; font-size: var(--t-xs); font-weight: 500;
    min-width: 0; padding-inline: 2px; text-align: center; overflow-wrap: anywhere;
  }
  .tabbar__item svg { width: 24px; height: 24px; }
  .tabbar__item[aria-current="page"] { color: var(--green); font-weight: 700; }
  body:has(.tabbar) { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  /* Primary actions stay within thumb reach */
  .action-bar {
    position: sticky; bottom: 0; z-index: 15;
    margin-inline: calc(-1 * max(var(--s4), env(safe-area-inset-left, 0px)));
    padding: var(--s3) max(var(--s4), env(safe-area-inset-right, 0px)) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line);
  }
  body:has(.tabbar) .action-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  .action-bar .btn { flex: 1 1 0; }
  /* Large text or long labels wrap instead of widening the page */
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: var(--s2); max-width: 100%; }
  .status { white-space: normal; max-width: 100%; }

  /* Menus open as bottom sheets */
  .menu--sheet {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; min-width: 0;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    padding: var(--s2) var(--s3) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  }

  /* Tables stack into labelled rows */
  .table--stack thead { display: none; }
  .table--stack tr { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .table--stack td { padding: 0; border: 0; display: flex; gap: var(--s3); }
  .table--stack td::before { content: attr(data-label); flex: 0 0 7.5em; color: var(--ink-2); font-size: var(--t-sm); }

  .list__actions { width: 100%; margin-left: 0; }
  .list__actions .btn { flex: 1 1 auto; }
  .notice { grid-template-columns: 1fr; }
  .notice > .status { grid-row: auto; justify-self: start; }
  .notice__body, .notice__actions { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ==========================================================================
   Workspace: forest side menu, editor, verification, leader sites
   ========================================================================== */
.ws { display: flex; flex-wrap: wrap; min-height: 100vh; }
.ws__main {
  flex: 999 1 640px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-content: start;
  padding-block: var(--s6) var(--s8);
  padding-left: max(var(--s6), env(safe-area-inset-left, 0px));
  padding-right: max(var(--s6), env(safe-area-inset-right, 0px));
  max-width: 1280px;
}

.rail {
  flex: 1 1 232px; max-width: 248px;
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s5) var(--s3);
  background: var(--rail); color: var(--rail-text);
  --logo-ink: #ffffff; --logo-dot: var(--dot);
}
.rail__brand { display: block; padding: var(--s1) var(--s3) var(--s3); }
.rail__brand .logo { height: 30px; }
.rail__nav { display: grid; gap: 2px; }
.rail__group { margin: var(--s4) 0 var(--s1); padding: 0 var(--s3); font-size: var(--t-sm); color: var(--rail-muted); }
.rail__link {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: 0 var(--s3); border-radius: 10px;
  color: var(--rail-text); text-decoration: none; font-weight: 500;
}
/* The dot marks where you are. */
.rail__link::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.rail__link:hover { background: var(--rail-hover); color: #ffffff; text-decoration: none; }
.rail__link[aria-current="page"] { background: var(--rail-hover); color: #ffffff; font-weight: 600; }
.rail__link[aria-current="page"]::before { background: var(--dot); }
.rail__link--quiet { color: var(--rail-muted); }
.rail__account {
  margin-top: auto; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3); border-top: 1px solid var(--rail-hover);
}
.rail__user { flex: 1 1 auto; color: #ffffff; font-weight: 600; font-size: var(--t-sm); overflow-wrap: anywhere; }
.rail__signout { min-height: 36px; padding: 0 var(--s3); border: 1px solid #3c6a5c; border-radius: var(--r-control); background: transparent; color: var(--rail-text); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.rail__signout:hover { background: var(--rail-hover); color: #ffffff; }

/* Publishing: the dot drops into the j. */
@keyframes dot-held {
  0% { transform: translateY(-42px); }
  65% { transform: translateY(3px); }
  82% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
.rail--published .logo__dot { animation: dot-held 900ms cubic-bezier(.3, .7, .3, 1) both; }

.panel__title { font-size: var(--t-lg); }

/* Editor: sections, form, live draft preview */
.editor-bar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.switcher { position: relative; min-width: 0; max-width: 100%; }
.switcher > summary { white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.3; padding-block: var(--s2); }
.switcher > summary { list-style: none; }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.switcher__menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; }
.editor { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-start; }
.editor__sections { flex: 0 0 170px; display: grid; gap: 2px; }
.editor__group { margin: var(--s3) 0 var(--s1); padding: 0 var(--s3); font-size: var(--t-sm); color: var(--ink-2); }
.editor__section { display: flex; align-items: center; min-height: 42px; padding: 0 var(--s3); border-radius: var(--r-control); color: var(--ink); text-decoration: none; }
.editor__section:hover { background: var(--surface-sunk); color: var(--ink); text-decoration: none; }
.editor__section[aria-current="true"] { background: var(--green-tint); font-weight: 600; }
.editor__form { flex: 1 1 300px; min-width: 0; }
.editor__preview { flex: 1 1 380px; min-width: 0; display: grid; gap: var(--s2); }
.editor__preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.editor__preview-head h2 { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 600; }
.frame { border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--surface); }
.frame__bar { padding: var(--s2) var(--s4); background: var(--surface-sunk); color: var(--ink-2); font-size: var(--t-sm); }
.frame__body .site-hero { padding-block: var(--s6); }
.frame__body .site-hero h1 { font-size: var(--t-2xl); }
.frame__body .site-body { padding-block: var(--s5); }

.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-sunk); }
.seg a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s3); border-radius: 8px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.seg a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(19 36 29 / 0.12); }

.confirm { max-width: 560px; }
.confirm__list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
.narrow-form { max-width: 640px; }
.verify { max-width: 720px; }
.badge-preview { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s4); border: 1px dashed var(--line-strong); border-radius: var(--r-panel); }
input[type="file"] { width: 100%; padding: var(--s3); border: 2px dashed var(--line-strong); border-radius: var(--r-panel); background: var(--surface); font: inherit; }
.field:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: var(--s3); }
.field:has(> input[type="checkbox"]) > label { font-weight: 500; }
fieldset.field > div { display: grid; gap: var(--s2); }
fieldset.field > div > div > label, fieldset.field > div > label { display: flex; gap: var(--s3); align-items: center; min-height: 48px; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-control); font-weight: 500; }
fieldset.field label:has(input:checked) { border-color: var(--green); background: var(--green-tint); }

/* The mark inside the verification badge */
.seal__mark { width: auto; height: 22px; }
.seal__dot { fill: var(--logo-dot); }
.seal--on-dark { border-color: var(--dot); background: transparent; color: #ffffff; --logo-dot: var(--dot); }
.seal--on-dark:hover { background: transparent; color: #ffffff; }

/* Leader's public site */
.site-wrap {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(var(--s5), env(safe-area-inset-left, 0px));
  padding-right: max(var(--s5), env(safe-area-inset-right, 0px));
}
.site-hero { background: #12382c; color: #ffffff; padding-block: var(--s8); }
.site-hero__inner { display: grid; gap: var(--s3); justify-items: start; }
.site-hero h1 { color: #ffffff; font-size: clamp(var(--t-3xl), 6vw, var(--t-4xl)); }
.site-hero__role { color: #a9c3b6; }
.site-hero__tagline { font-size: var(--t-xl); line-height: 1.5; color: #e4eee8; max-width: 36ch; }
.site-body { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s7); padding-block: var(--s7); }
.site-updates { flex: 2 1 420px; min-width: 0; }
.site-contact, .site-about { flex: 1 1 260px; min-width: 0; display: grid; gap: var(--s2); align-content: start; }
.site-about { flex-basis: 100%; }
.site-body h2 { margin-bottom: var(--s3); }
.site-list { list-style: none; margin: 0; padding: 0; }
.site-list li { display: flex; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.site-list__date { flex: 0 0 9em; color: var(--ink-2); font-size: var(--t-sm); }
.site-langbar { display: flex; justify-content: flex-end; padding: var(--s2) var(--s4); background: #12382c; }
.site-langbar .seg { background: #1b4a3b; }
.site-langbar .seg a { color: #d6e4dc; }
.site-langbar .seg a[aria-current="true"] { background: #ffffff; color: #12382c; }
.public-foot { display: flex; align-items: center; gap: var(--s2); }
.public-foot__logo .logo { height: 18px; }

@media (max-width: 720px) {
  .rail { display: none; }
  .ws__main { padding-left: max(var(--s4), env(safe-area-inset-left, 0px)); padding-right: max(var(--s4), env(safe-area-inset-right, 0px)); padding-top: var(--s5); }
  .tabbar { background: var(--rail); border-top: 0; }
  .tabbar__item { color: var(--rail-muted); }
  .tabbar__item i { display: block; width: 6px; height: 6px; border-radius: 50%; }
  .tabbar__item[aria-current="page"] { color: #ffffff; }
  .tabbar__item[aria-current="page"] i { background: var(--dot); }
  .editor__sections { flex: 1 1 100%; display: flex; gap: var(--s2); overflow-x: auto; }
  .editor__group { display: none; }
  .editor__section { flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--r-pill); }
  .editor__section[aria-current="true"] { background: var(--green); color: var(--surface); border-color: var(--green); }
  .site-hero { padding-block: var(--s6); }
}
@media (prefers-reduced-motion: reduce) { .rail--published .logo__dot { animation: none; } }

/* Journey polish: keyboard navigation, form recovery, and small screens. */
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 20px; background: var(--surface); color: var(--ink); border: 2px solid var(--green); border-radius: var(--r-control); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.mobile-account { display: none; }
.error-summary { border: 2px solid var(--danger); border-radius: var(--r-control); padding: var(--s4); margin-bottom: var(--s5); background: var(--surface); }
.error-summary h2 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.error-summary ul { padding-left: var(--s5); }
.error-summary a { color: var(--danger); text-decoration: underline; }
.save-status--dirty { color: var(--st-pending); font-weight: 600; }
.rail__link, .switcher > summary, .list__title, .page__head h1, .confirm h1 { overflow-wrap: anywhere; }
.switcher, .switcher > summary { min-width: 0; max-width: 100%; }
.editor__sections, .editor__form, .editor__preview, .frame__body { min-width: 0; }
.editor__sections { max-width: 100%; }
.frame__body .site-wrap { padding-inline: var(--s4); }
.frame__body .site-updates, .frame__body .site-contact { flex-basis: 100%; }
.frame__body .site-hero h1, .frame__body .site-hero__tagline { overflow-wrap: anywhere; }
.btn[aria-disabled="true"] { cursor: default; opacity: .7; }
@media (max-width: 720px) {
  .mobile-account { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) max(var(--s4), env(safe-area-inset-right, 0px)); border-bottom: 1px solid var(--line); background: var(--surface); }
  .mobile-account .logo { height: 26px; width: auto; max-width: 160px; }
  .mobile-account__menu { position: relative; }
  .mobile-account__menu > summary { list-style: none; }
  .mobile-account__menu > summary::-webkit-details-marker { display: none; }
  .mobile-account__menu .menu { position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); width: min(240px, 85vw); min-width: 0; padding: var(--s3); }
  .mobile-account__name { overflow-wrap: anywhere; padding: var(--s2); color: var(--ink-2); }
  .rail__signout, .editor__section, .seg a, .btn { min-height: 48px; }
  .editor-bar > .btn { flex: 1 1 auto; }
  .editor-bar > .topbar__spacer { display: none; }
  .editor-bar > .switcher { flex: 1 1 100%; }
  .editor-bar > .switcher > summary { width: 100%; justify-content: space-between; }
  .switcher__menu { width: 100%; min-width: 0; }
  .error-summary { scroll-margin-top: var(--s4); }
}
.security-secret { padding: var(--s4); background: var(--surface-sunk); border: 1px solid var(--line-strong); border-radius: var(--r-control); overflow-wrap: anywhere; user-select: all; }
.security-codes { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: var(--s3); padding: var(--s4); list-style: none; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }