/* طب‌پژوه — demo stylesheet, light only. No external resources: Sahel FD is self-hosted. */

@font-face { font-family: "Sahel FD"; src: url("fonts/Sahel-FD.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sahel FD"; src: url("fonts/Sahel-Bold-FD.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sahel FD"; src: url("fonts/Sahel-Black-FD.woff") format("woff"); font-weight: 900; font-display: swap; }
/* Parastoo 3.0 (SIL OFL 1.1, Saber Rastikerdar), variable 400–700, for the clinical toolbox only */
@font-face { font-family: "Parastoo"; src: url("fonts/Parastoo-Variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --bg-2: #f4f7f7;
  --surface: #ffffff;
  --surface-2: #f7fafa;
  --ink: #142322;
  --ink-2: #354544;
  --muted: #5e6d6c;
  --line: #e3eaea;
  --line-2: #cbd7d6;
  /* Brand: «طب» and the stethoscope are teal, «پژوه» and the nib copper. Copper text below 24px uses --copper-ink (4.5:1 on white). */
  --accent: #0e6b6b;
  --accent-2: #0a5252;
  --accent-ink: #ffffff;
  --accent-soft: #e6f2f1;
  --accent-line: #b3d6d3;
  --copper: #c0652a;
  --copper-ink: #9a4e1f;
  --copper-soft: #fbeee5;
  --copper-line: #efc9ae;
  --warm: #9a4e1f;
  --warm-soft: #fbeee5;
  --ok: #2c6c3c;
  --ok-soft: #e2efe2;
  --warn: #8f5a06;
  --warn-soft: #f7ebd0;
  --err: #b0262e;
  --err-soft: #f8e0de;
  --topbar-bg: rgb(255 255 255 / .82);
  --scrim: rgb(20 35 34 / .32);
  --shadow: 0 1px 2px rgb(20 35 34 / .04), 0 10px 28px -14px rgb(14 80 80 / .2);
  --shadow-lg: 0 2px 4px rgb(20 35 34 / .05), 0 24px 48px -20px rgb(14 80 80 / .28);

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --gutter: clamp(16px, 3vw, 40px);
  --topbar-h: 56px;
  --dock-h: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  color-scheme: light;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* The whole site is RTL; set it here too so a stripped or overridden dir attribute cannot flip the layout. */
html { direction: rtl !important; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }
body {
  direction: rtl !important;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-base)/1.85 "Sahel FD", Tahoma, system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; line-height: 1.45; text-wrap: balance; font-weight: 900; }
h1 { font-size: var(--fs-2xl); letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); }
h3, .h3 { font-size: var(--fs-md); font-weight: 700; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: min(1600px, 100%);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ltr-in { direction: ltr; text-align: left; }
.ltr-in::placeholder { text-align: left; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.opt { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); }
.code { font-family: var(--mono); font-weight: 700; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.empty { color: var(--muted); padding: 28px 0; }

/* ── Masthead and tab bar ───────────────────────────────── */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--topbar-bg); z-index: 41; }
.masthead { background: var(--bg); }
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 92px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand__mark { --logo-bg: var(--accent-soft); width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--accent-line); }
.brand__mark svg { width: 40px; height: 40px; }
.b-teb { color: var(--accent); }
.b-pzh { color: var(--copper); }
.brand__txt { display: grid; gap: 6px; line-height: 1; }
.brand__txt b { font-weight: 900; font-size: 30px; line-height: 1.05; }
.brand__txt small { font-size: .66rem; letter-spacing: .34em; color: var(--muted); font-family: system-ui, sans-serif; font-weight: 600; }
.masthead__end { display: flex; align-items: center; gap: 10px; }

.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: var(--topbar-bg);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-block: 1px solid var(--line);
}
.tabs { position: relative; display: flex; gap: 2px; height: var(--topbar-h); align-items: stretch; margin-inline-start: -14px; }
.tabs__link {
  display: flex; align-items: center; padding: 0 14px;
  color: var(--ink-2); text-decoration: none; font-size: 1.0625rem; font-weight: 700;
  white-space: nowrap; transition: color .2s;
}
.tabs__link:hover { color: var(--ink); }
.tabs__link[aria-current="page"] { color: var(--accent); }
.tabs__ink {
  position: absolute; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
  width: var(--ink-w, 0); left: var(--ink-x, 0);
  transition: left .35s var(--ease), width .35s var(--ease);
}

.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2); flex: none;
}
.icon-btn:hover { border-color: var(--line-2); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: 11px; border: 1px solid transparent;
  font-weight: 700; font-size: var(--fs-base); text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px -8px var(--accent); }
.btn--primary:hover { background: var(--accent-2); color: var(--accent-ink); }
.btn--ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--soft { background: var(--accent-soft); color: var(--accent); }
.btn--soft:hover { background: var(--accent); color: var(--accent-ink); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: var(--fs-sm); border-radius: 9px; }
.btn--lg { min-height: 50px; padding: 0 24px; font-size: var(--fs-md); border-radius: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { color: var(--accent-2); }
.linkbtn.small { font-size: var(--fs-sm); }

/* ── Views ──────────────────────────────────────────────── */
.view { padding-block: 0 80px; overflow-x: clip; }
.view.is-entering { animation: view-in .42s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view h1:focus { outline: none; }

.page-head { padding-block: 40px 28px; display: grid; gap: 10px; }
.page-head > p { color: var(--ink-2); max-width: 72ch; font-size: var(--fs-md); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.card--flush { padding: 0; }
.table-scroll { overflow-x: auto; max-width: 100%; }

/* ── Home ───────────────────────────────────────────────── */
.hero {
  position: relative; overflow: clip; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 12% 40%, rgb(14 107 107 / .07), transparent 70%),
    radial-gradient(40% 60% at 30% 90%, rgb(192 101 42 / .06), transparent 70%),
    var(--bg);
}
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 40px; padding-block: 72px 64px; }
.hero__text { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.hero h1 { font-size: clamp(2rem, 1.25rem + 3.2vw, 3.6rem); max-width: 18ch; line-height: 1.35; }
.lead { font-size: clamp(1rem, .92rem + .4vw, 1.2rem); color: var(--ink-2); max-width: 60ch; }
.hero__tools { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--accent); font-size: var(--fs-sm); }
.hero__tools::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--copper), var(--accent)); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Shape-morphing grid around the hero logo. app.js fills 36 cells, sets --d (wave delay) on each and
   --near (0 to 1) from the pointer; the four centre cells give way to the logo. */
.morph { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; }
.morph__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 10px; }
.morph__grid i {
  --c1: var(--accent-soft); --c2: var(--copper-soft);
  position: relative; border-radius: 50%; background: var(--c1);
  scale: calc(.86 + var(--near, 0) * .22); rotate: calc(var(--near, 0) * 45deg);
  transition: scale .6s var(--ease), rotate .6s var(--ease);
  animation: morph 9s var(--ease) infinite; animation-delay: calc(var(--d, 0) * -1s);
}
.morph__grid i:nth-child(5n+2) { --c1: var(--accent-line); }
.morph__grid i:nth-child(7n+4) { --c2: var(--copper-line); }
.morph__grid i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--copper); opacity: calc(var(--near, 0) * .5); transition: opacity .6s; }
.morph__grid i:nth-child(15), .morph__grid i:nth-child(16), .morph__grid i:nth-child(21), .morph__grid i:nth-child(22) { visibility: hidden; }
@keyframes morph {
  0%, 100% { border-radius: 50%; background: var(--c1); }
  25% { border-radius: 32%; }
  50% { border-radius: 62% 0; background: var(--c2); }
  75% { border-radius: 10%; background: var(--c1); }
}
.morph__logo {
  --logo-bg: var(--surface); position: absolute; inset: calc(100% / 3 - 4px); display: grid; place-items: center;
  border-radius: 30%; background: var(--surface); color: var(--accent); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
}
.morph__logo svg { width: 76%; height: 76%; }

.resume {
  display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 16px;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--accent-line); box-shadow: var(--shadow);
  max-width: 620px; animation: view-in .4s var(--ease) both;
}
.resume > .ic { width: 26px; height: 26px; color: var(--accent); }
.resume > div { display: grid; flex: 1; min-width: 0; line-height: 1.6; }
.resume small { color: var(--muted); font-size: var(--fs-xs); }


.block { padding-block: 64px 0; }
.block__head { display: grid; gap: 6px; margin-bottom: 24px; }
.block__head h2::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--copper), var(--accent)); }
.block__head p { color: var(--muted); max-width: 70ch; }

/* Process infographic */
.proc { --n: 6; --ic: 58px; position: relative; display: grid; gap: 22px; }
.proc__rail {
  position: absolute; top: calc(var(--ic) / 2 - 1.5px); height: 3px; border-radius: 3px; background: var(--line);
  inset-inline-start: calc(var(--ic) / 2); inset-inline-end: calc(100% / var(--n) - var(--ic) / 2);
}
.proc__rail span {
  position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--accent);
  width: calc(var(--p, 0) * 100%); transition: width .5s var(--ease), height .5s var(--ease);
}
.proc__nodes { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.proc__node {
  display: grid; justify-items: start; align-content: start; gap: 4px; padding: 0 0 6px; padding-inline-end: 10px;
  background: none; border: 0; cursor: pointer; text-align: start; color: var(--ink-2);
  transition: transform .35s var(--ease), color .25s;
}
.proc__ic {
  width: var(--ic); height: var(--ic); border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
  background: var(--surface); border: 2px solid var(--line-2); color: var(--muted);
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s, transform .35s var(--ease);
}
.proc__ic .ic { width: 24px; height: 24px; }
.proc__node small { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.proc__node b { font-size: var(--fs-sm); line-height: 1.6; }
.proc__node.is-done .proc__ic { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.proc__node[aria-selected="true"] { color: var(--ink); transform: translateY(-4px); }
.proc__node[aria-selected="true"] .proc__ic { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow); }
.proc__node:hover .proc__ic { border-color: var(--accent); }
.proc__node:focus-visible { outline: none; }
.proc__node:focus-visible .proc__ic { outline: 2.5px solid var(--accent); outline-offset: 4px; }
.proc__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; box-shadow: var(--shadow);
  animation: view-in .35s var(--ease) both;
}
.proc__card dl { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; }
.proc__card dl > div { display: grid; gap: 4px; align-content: start; }
.proc__card dl > div + div { border-inline-start: 1px dashed var(--line-2); padding-inline-start: 20px; }
.proc__card dt { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.proc__card dd { font-size: var(--fs-sm); color: var(--ink-2); }

.teaser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.teaser__card {
  display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.teaser__card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.teaser__card span { color: var(--muted); font-size: var(--fs-sm); }
[data-tone="rev"] { --tone: var(--accent); --tone-soft: var(--accent-soft); }
[data-tone="free"] { --tone: var(--ok); --tone-soft: var(--ok-soft); }
[data-tone="new"] { --tone: var(--warm); --tone-soft: var(--warm-soft); }
[data-tone="no"] { --tone: var(--err); --tone-soft: var(--err-soft); }

/* ── Forms ──────────────────────────────────────────────── */
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fld { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fld--wide { grid-column: 1 / -1; }
.fld > label, .fld__label { font-weight: 700; font-size: var(--fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.input {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input:hover { border-color: var(--muted); }
.input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.input[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
textarea.input { resize: vertical; line-height: 1.8; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(-45deg, transparent 50%, var(--muted) 50%); background-position: left 18px center, left 13px center; background-size: 5px 5px; background-repeat: no-repeat; padding-left: 36px; }
.help { font-size: var(--fs-xs); color: var(--muted); }
.err { font-size: var(--fs-xs); color: var(--err); font-weight: 700; }
.err:empty { display: none; }
.ok { color: var(--ok); font-weight: 700; background: var(--ok-soft); border-radius: var(--r); padding: 10px 14px; font-size: var(--fs-sm); }
.okline { color: var(--ok); font-weight: 700; font-size: var(--fs-sm); }

/* Toggletips */
.tip {
  display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; flex: none;
  border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted);
  font-size: .72rem; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle;
  transition: border-color .2s, color .2s, background .2s;
}
.tip:hover, .tip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.tip-pop {
  position: fixed; z-index: 70; max-width: min(320px, calc(100vw - 32px));
  background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 12px;
  font-size: var(--fs-sm); font-weight: 400; line-height: 1.9; box-shadow: var(--shadow-lg);
  animation: view-in .2s var(--ease) both;
}
.tip-pop a { color: var(--accent-line); }

/* Chips: radio pills */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--line-2); background: var(--surface); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
  transition: all .2s;
}
.chip:hover > span { border-color: var(--accent); }
.chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* Segmented radio */
.seg { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-2); border-radius: 13px; padding: 4px; background: var(--surface-2); }
.seg:has(> label:nth-child(2):last-child) { --n: 2; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; text-align: start; padding: 8px 12px; border-radius: 10px; transition: background .25s, color .25s, box-shadow .25s; line-height: 1.5; }
.seg b { font-size: var(--fs-sm); }
.seg small { font-size: var(--fs-xs); color: var(--muted); }
.seg input:checked + span { background: var(--surface); box-shadow: var(--shadow); color: var(--accent); }
.seg input:checked + span small { color: var(--ink-2); }
.seg input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: -2px; }

/* Row options and choice cards */
.rows-radio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.row-opt, .choice { position: relative; cursor: pointer; display: block; }
.row-opt input, .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.row-opt > span, .choice > span {
  display: grid; gap: 2px; height: 100%; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.row-opt small, .choice small { color: var(--muted); font-size: var(--fs-xs); }
.row-opt:hover > span, .choice:hover > span { border-color: var(--accent); }
.row-opt input:checked + span, .choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.row-opt input:focus-visible + span, .choice input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 2px; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice > span { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.choice b { font-size: var(--fs-base); }
.choice__price { grid-row: 1 / span 2; grid-column: 2; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }

/* Checkbox rows */
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.check > span { display: grid; gap: 1px; min-width: 0; }
.check small { color: var(--muted); font-size: var(--fs-xs); }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* Combobox */
.combo__box { position: relative; }
.combo__list {
  position: absolute; z-index: 25; inset-inline: 0; bottom: calc(100% + 6px);
  max-height: 280px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.combo__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; border-radius: 9px; cursor: pointer; font-size: var(--fs-sm); }
.combo__list li small { color: var(--muted); font-family: system-ui, sans-serif; font-size: var(--fs-xs); direction: ltr; unicode-bidi: isolate; }
.combo__list li:hover, .combo__list li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.combo__list mark { background: none; color: inherit; font-weight: 900; }
.combo__list .combo__none { cursor: default; color: var(--muted); }
.combo__list .combo__none:hover { background: none; color: var(--muted); }

/* Study design */
.design { display: grid; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.design__grp { display: grid; gap: 8px; }
.design__grp + .design__grp { padding-top: 12px; border-top: 1px dashed var(--line-2); }
.design__h { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }

/* ── Order ──────────────────────────────────────────────── */
.order { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.order__form { display: grid; gap: 22px; padding: 28px; }
.progress { display: flex; align-items: center; gap: 14px; }
.progress__bar { flex: 1; height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.progress__bar span { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .5s var(--ease); }
.progress__l { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.progress__l b { color: var(--accent); font-size: var(--fs-sm); }

.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stepper button {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; padding: 0 0 10px; background: none; border: 0; border-bottom: 3px solid var(--line);
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted); cursor: pointer; text-align: start; transition: color .25s, border-color .35s var(--ease);
}
.stepper button em { font-style: normal; }
.stepper button small { flex-basis: 100%; font-size: .68rem; font-weight: 400; color: var(--muted); }
.stepper button span {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-2); border: 1px solid var(--line-2); font-size: var(--fs-xs); transition: all .25s;
}
.stepper button.is-done { color: var(--ink-2); border-bottom-color: var(--accent-line); }
.stepper button.is-done span { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.stepper button.is-skip { border-bottom-style: dashed; color: var(--muted); }
.stepper button.is-skip span { background: none; border-style: dashed; }
.stepper button[aria-current="step"] { color: var(--accent); border-bottom-color: var(--accent); }
.stepper button[aria-current="step"] span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 3px var(--copper-soft), 0 0 0 4px var(--copper-line); }

.step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 22px; animation: view-in .35s var(--ease) both; }
.step legend { font-size: var(--fs-lg); font-weight: 900; padding: 0; margin-bottom: 4px; }
.order__other { font-size: var(--fs-sm); color: var(--muted); }
.order__nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); }
.order__nav [data-next], .order__nav [data-submit] { margin-inline-start: auto; min-width: 150px; }
.btn--save .ic { width: 16px; height: 16px; }

.code-row { display: flex; gap: 8px; }
.code-row .input { flex: 1; min-width: 0; }
.member { padding: 12px 14px; border-radius: var(--r); background: var(--accent-soft); font-size: var(--fs-sm); }

.notes { display: grid; gap: 8px; }
.notes:empty { display: none; }
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r); font-size: var(--fs-sm); background: var(--tone-soft); border-inline-start: 3px solid var(--tone); }
.note--warn { --tone: var(--warn); --tone-soft: var(--warn-soft); }
.note--info { --tone: var(--accent); --tone-soft: var(--accent-soft); }

.done { display: grid; gap: 12px; justify-items: start; text-align: start; padding: 12px 4px; }
.done:focus { outline: none; }
.done__tick { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); display: grid; place-items: center; animation: pop .5s var(--ease) both; }
.done__tick svg { width: 32px; height: 32px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .5s .2s ease forwards; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done__data { padding: 12px 14px; border-radius: var(--r); background: var(--warn-soft); border-inline-start: 3px solid var(--warn); font-size: var(--fs-sm); }
.done__next { counter-reset: n; display: grid; gap: 6px; max-width: 520px; }
.done__next li { counter-increment: n; display: flex; gap: 10px; }
.done__next li::before { content: counter(n, persian); width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; margin-top: 3px; }
.done__btns { display: flex; flex-wrap: wrap; gap: 10px; }

.order__aside { position: sticky; top: calc(var(--topbar-h) + 20px); }
.invoice { display: grid; gap: 14px; padding: 22px; }
.invoice__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.invoice__head h2 { font-size: var(--fs-lg); }
.invoice__id { font-size: var(--fs-xs); color: var(--muted); font-family: var(--mono); direction: ltr; }
.invoice__svc { font-weight: 700; color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px dashed var(--line-2); }
.invoice__rows { display: grid; gap: 8px; font-size: var(--fs-sm); }
.invoice__rows div { display: flex; justify-content: space-between; gap: 12px; }
.invoice__rows dt { color: var(--muted); }
.invoice__rows dd { font-weight: 700; white-space: nowrap; }
.invoice__rows .is-minus { color: var(--ok); }
.invoice__total { display: flex; align-items: baseline; gap: 8px; padding: 16px; margin-inline: -6px; border-radius: var(--r); background: var(--accent-soft); }
.invoice__total span { font-weight: 700; color: var(--ink-2); font-size: var(--fs-sm); }
.invoice__total output { margin-inline-start: auto; font-size: 1.6rem; font-weight: 900; color: var(--accent); line-height: 1.2; }
.invoice__total output.bump { animation: bump .35s var(--ease); }
@keyframes bump { 40% { transform: scale(1.06); } }
.invoice__total small { color: var(--muted); }
.invoice__split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.invoice__split div { display: grid; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.invoice__split b { color: var(--ink); font-size: var(--fs-sm); }
.invoice__note { font-size: var(--fs-xs); color: var(--muted); }

.sumbar {
  position: fixed; z-index: 30; inset-inline: 0;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgb(27 35 33 / .4);
}
.sumbar div { display: grid; line-height: 1.4; }
.sumbar small { font-size: var(--fs-xs); color: var(--muted); }
.sumbar b { font-weight: 900; color: var(--accent); font-size: var(--fs-md); }

/* PICO */
.pico { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pico__form { display: grid; gap: 16px; }
.pico__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.pico__k { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); font-family: system-ui, sans-serif; font-size: var(--fs-xs); }
.question__l { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }

/* Data QC */
.qc { display: grid; gap: 16px; padding: 20px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); animation: view-in .35s var(--ease) both; }
.qc__head { display: grid; gap: 2px; }
.qc__head p { font-size: var(--fs-xs); color: var(--muted); }
.qc__tpl { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.qc__tpl .btn .ic { width: 16px; height: 16px; }
.qc__guide { flex: 1 1 320px; min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.qc__guide summary { cursor: pointer; padding: 7px 14px; font-weight: 700; font-size: var(--fs-sm); color: var(--accent); }
.qc__guide ol { list-style: persian; padding: 0 34px 12px 16px; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--ink-2); }
.qc__guide[open] { border-color: var(--accent-line); }
.drop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px dashed var(--line-2); transition: border-color .2s, background .2s; }
.drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop > svg { width: 44px; height: 44px; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.drop > div:not(.drop__btns) { display: grid; }
.drop small { font-size: var(--fs-xs); color: var(--muted); }
.drop__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.drop__btns label { cursor: pointer; }
.flags { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.flags__h { font-weight: 900; font-size: var(--fs-sm); margin-bottom: 2px; }
.flags li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
.flags li::before { content: "✓"; width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; margin-top: 4px; background: var(--ok-soft); color: var(--ok); }
.flags li[data-s="bad"]::before { content: "!"; background: var(--err-soft); color: var(--err); }
.flags li.flags__h::before { display: none; }
.flags li[data-s="bad"] { color: var(--err); font-weight: 700; }
.flags.is-bad { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
.qc__file { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); background: var(--warn-soft); border-inline-start: 3px solid var(--warn); font-size: var(--fs-sm); }
.qc__file b { display: block; }

.audit { display: grid; gap: 18px; animation: view-in .4s var(--ease) both; }
.audit__summary { display: flex; gap: 20px; align-items: center; }
.meter { position: relative; width: 92px; height: 92px; flex: none; }
.meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.meter circle { fill: none; stroke: var(--line); stroke-width: 3.2; }
.meter .meter__v { stroke: var(--m, var(--accent)); stroke-linecap: round; stroke-dasharray: var(--v) 100; transition: stroke-dasharray .8s var(--ease); }
.meter b { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-lg); font-weight: 900; }
.issues { display: grid; gap: 8px; }
.issues li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--tone); font-size: var(--fs-sm); }
.issues li[data-k="err"] { --tone: var(--err); }
.issues li[data-k="warn"] { --tone: var(--warn); }
.issues li[data-k="ok"] { --tone: var(--ok); }
.issues b { font-weight: 900; color: var(--tone); }
.issues small { display: block; color: var(--muted); }
.audit__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.audit__bar h3 { font-size: var(--fs-base); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-sm); }
.switch input { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .25s var(--ease); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(-16px); }
.grid-box { max-height: 420px; overflow: auto; }
.grid { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); white-space: nowrap; }
.grid th, .grid td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: start; }
.grid th { position: sticky; top: 0; background: var(--surface-2); font-weight: 700; color: var(--ink-2); }
.grid tbody tr:hover td { background: var(--surface-2); }
.grid .rn { color: var(--muted); }
.cell--err { background: var(--err-soft) !important; color: var(--err); font-weight: 700; }
.cell--warn { background: var(--warn-soft) !important; color: var(--warn); }
.legend { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-inline-start: 10px; }
.sw--err { background: var(--err-soft); border: 1px solid var(--err); }
.sw--warn { background: var(--warn-soft); border: 1px solid var(--warn); }

/* ── Sub tabs ───────────────────────────────────────────── */
.subtabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 24px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line);
  width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtabs [role="tab"] {
  flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 16px; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: var(--fs-sm); color: var(--muted); transition: background .25s, color .25s, box-shadow .25s;
}
.subtabs [role="tab"]:hover { color: var(--ink); }
.subtabs [aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.subtabs--full { width: 100%; margin-bottom: 0; }
.subtabs--full [role="tab"] { flex: 1; justify-content: center; }
.subpanel { animation: view-in .35s var(--ease) both; display: grid; gap: 20px; }
.subpanel:focus-visible { outline-offset: 6px; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--warm); color: var(--accent-ink); font-size: .68rem; font-weight: 700; line-height: 1; }

/* ── Toolbox: Statistical Test Selector ─────────────────── */
.tb__lead { color: var(--ink-2); max-width: 80ch; }
/* Pictograms are drawn with the stroke; .dot is a filled point, .ac / .ac-s are copper. */
.pic { flex: none; display: grid; place-items: center; width: 56px; aspect-ratio: 1; border-radius: 14px; background: var(--accent-soft); color: var(--accent); transition: background .25s, color .25s; }
.pic svg { width: 80%; height: 80%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pic .dot { fill: currentColor; stroke: none; }
.pic .ac { fill: var(--copper); stroke: none; }
.pic .ac-s { stroke: var(--copper); }
.pic .dash { stroke-dasharray: 3 3; }
.fc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.fc { display: grid; gap: 14px; min-width: 0; }
.fc__track { display: grid; }
.fc__item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 18px; }
.fc__item::before { content: ""; position: absolute; inset-inline-start: 17px; top: 36px; bottom: 0; width: 2px; background: var(--line-2); }
.fc__item:last-child { padding-bottom: 0; }
.fc__item:last-child::before { display: none; }
.fc__item.is-done::before { background: var(--accent); }
.fc__dot {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: var(--fs-sm);
  background: var(--surface); border: 2px solid var(--line-2); color: var(--muted); position: relative; z-index: 1;
}
.fc__item.is-done .fc__dot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fc__item.is-current .fc__dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 5px var(--accent-soft); }
.fc__item.is-result .fc__dot { background: var(--ok); border-color: var(--ok); color: var(--accent-ink); }
.fc__chip {
  justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 36px; padding: 4px 14px;
  border-radius: 99px; border: 1px solid var(--accent-line); background: var(--surface); cursor: pointer; text-align: start;
  font-size: var(--fs-sm); color: var(--ink-2); transition: border-color .2s, box-shadow .2s;
  animation: view-in .3s var(--ease) both;
}
.fc__chip b { color: var(--accent); }
.fc__chip .ic { width: 14px; height: 14px; color: var(--muted); }
.fc__chip:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.fc__q { display: grid; gap: 14px; padding: 20px; animation: view-in .35s var(--ease) both; }
.fc__q h3 { font-size: var(--fs-md); }
.fc__q h3:focus { outline: none; }
.fc__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.fc__opt {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: var(--r);
  cursor: pointer; text-align: start; border: 1px solid var(--line-2); background: var(--surface-2);
  transition: border-color .2s, background .2s, transform .2s var(--ease), box-shadow .2s;
}
.fc__opt-t { display: grid; gap: 2px; min-width: 0; }
.fc__opt b { font-size: var(--fs-sm); }
.fc__opt-en { font-family: system-ui, sans-serif; font-size: var(--fs-xs); font-weight: 600; color: var(--copper-ink); }
/* The example under each answer is a tooltip on hover or keyboard focus; touch screens have no hover, so there it stays in the card. */
.fc__opt { position: relative; }
.fc__opt:hover, .fc__opt:focus-visible { z-index: 3; }
.fc__tip { font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }
@media (hover: hover) {
  .fc__tip {
    position: absolute; inset-inline: 10px; bottom: calc(100% + 8px); z-index: 3; padding: 8px 12px; border-radius: 10px;
    background: var(--ink); color: #fff; box-shadow: var(--shadow); pointer-events: none;
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s;
  }
  .fc__tip::after { content: ""; position: absolute; top: 100%; inset-inline-start: 34px; border: 6px solid transparent; border-top-color: var(--ink); }
  .fc__opt:hover .fc__tip, .fc__opt:focus-visible .fc__tip { opacity: 1; visibility: visible; transform: none; }
}
.fc__opt-n { justify-self: start; margin-top: 4px; padding: 1px 9px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: .7rem; font-weight: 700; color: var(--ink-2); }
.fc__opt:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); box-shadow: var(--shadow); }
.fc__opt:hover .pic, .fc__opt:focus-visible .pic { background: var(--accent); color: var(--accent-ink); }
.fc__guide { display: grid; gap: 10px; padding: 16px; border-radius: var(--r); background: var(--surface-2); border: 1px dashed var(--line-2); }
.fc__guide > p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 2; max-width: 80ch; }
.fc__guide-h { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 800; color: var(--copper-ink); }
.fc__guide-h::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--copper); }
.mini { margin: 0; display: grid; gap: 6px; min-width: 0; }
.mini table { border-collapse: collapse; width: max-content; max-width: 100%; font-size: var(--fs-xs); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; display: block; overflow-x: auto; }
.mini table[dir="ltr"] { font-family: var(--mono); }
.mini th, .mini td { padding: 6px 12px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
.mini th { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.mini tr:last-child td { border-bottom: 0; }
.mini table:not([dir]) td { white-space: normal; line-height: 1.8; }
.mini figcaption { font-size: var(--fs-xs); color: var(--muted); line-height: 1.9; }
.mini__k { font-style: normal; font-family: "Sahel FD", system-ui, sans-serif; font-weight: 700; color: var(--copper-ink); }
.mini__pair { display: grid; grid-template-columns: repeat(2, max-content); gap: 16px; }
.mini__list { display: grid; gap: 4px; padding-inline-start: 1.2em; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.9; }
.fc__res { display: grid; gap: 14px; padding: 22px; border-top: 4px solid var(--ok); animation: view-in .4s var(--ease) both; }
.fc__res-h { display: grid; gap: 2px; }
.fc__name { font-size: var(--fs-xl); color: var(--accent); font-family: system-ui, sans-serif; }
.fc__name:focus { outline: none; }
.fc__fa { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 700; }
.fc__dl { display: grid; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.fc__dl dt { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.fc__dl dd { font-size: var(--fs-sm); line-height: 2; }
.fc__code { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fc__code figure { display: grid; gap: 4px; align-content: start; min-width: 0; margin: 0; }
.fc__code figcaption { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.fc__code pre {
  margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ink); color: var(--bg);
  font: 400 .78rem/1.7 var(--mono); direction: ltr; text-align: left; overflow-x: auto; white-space: pre;
}
.fc__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fc__aside { display: grid; gap: 14px; position: sticky; top: calc(var(--topbar-h) + 20px); }
.fc__aside > .card { display: grid; gap: 10px; }
.fc__left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.fc__left b { font-size: 2.4rem; font-weight: 900; line-height: 1.1; color: var(--accent); }
.fc__bar { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.fc__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--copper)); transition: width .5s var(--ease); }
.fc__left-l { display: flex; flex-wrap: wrap; gap: 6px; }
.fc__left-l span { padding: 2px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font: 600 .72rem/1.7 system-ui, sans-serif; color: var(--ink-2); }
.fc__mrows { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.fc__mrow { display: grid; gap: 5px; padding-inline-start: 12px; border-inline-start: 2px solid var(--accent); }
.fc__mrow.is-now { border-inline-start-style: dashed; border-inline-start-color: var(--accent-line); }
.fc__mrow.is-end { border-inline-start-color: var(--ok); }
.fc__mq { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.fc__mpills { display: flex; flex-wrap: wrap; gap: 4px; }
.fc__pill { padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: 600 .68rem/1.7 system-ui, sans-serif; color: var(--muted); opacity: .7; }
.fc__pill.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); opacity: 1; }
.fc__mrow.is-now .fc__pill { opacity: 1; border-style: dashed; border-color: var(--accent-line); color: var(--ink-2); }
.fc__pill.is-res { background: var(--ok); border-color: var(--ok); color: var(--accent-ink); opacity: 1; font-size: .74rem; }

/* Sample size */
.ss-form { display: grid; gap: 20px; }
.ss__pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ss__grp { display: grid; gap: 8px; align-content: start; }
.ss__grp-h { font-size: var(--fs-xs); font-weight: 800; color: var(--copper-ink); }
.ss__cards { display: grid; gap: 8px; }
.ss__card {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px;
  border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; transition: border-color .2s, background .2s;
}
.ss__card input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ss__card .pic { width: 44px; border-radius: 11px; }
.ss__card > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ss__card b { font-size: var(--fs-sm); }
.ss__card bdi { font: 600 .7rem/1.6 system-ui, sans-serif; color: var(--muted); }
.ss__card:hover { border-color: var(--accent-line); }
.ss__card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ss__card:has(input:checked) .pic { background: var(--accent); color: var(--accent-ink); }
.ss__card:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.ss { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ss__form { display: grid; gap: 20px; }
.ss__head { display: grid; gap: 4px; }
.ss__head bdi { font-family: system-ui, sans-serif; color: var(--muted); font-weight: 600; }
.ss__out { display: grid; gap: 10px; position: sticky; top: calc(var(--topbar-h) + 20px); border-top: 4px solid var(--accent); }
.ss__n { display: flex; align-items: baseline; gap: 10px; }
.ss__n b { font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); font-weight: 900; color: var(--accent); line-height: 1.1; transition: color .2s; }
.ss__n b.bump { animation: bump .35s var(--ease); }
.ss__n span { color: var(--muted); }
.ss__formula, .ss__cite { display: grid; gap: 4px; padding-top: 10px; border-top: 1px dashed var(--line-2); min-width: 0; }
.ss__formula bdi { display: block; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); font: 400 .8rem/1.8 var(--mono); text-align: left; overflow-x: auto; white-space: nowrap; }
.ss__cite p { font: 400 .74rem/1.7 system-ui, sans-serif; color: var(--ink-2); }
.ss__viz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ss__viz:empty { display: none; }
.ss__viz figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
.ss__viz figcaption { font-size: var(--fs-sm); font-weight: 700; }
.ss__viz svg { width: 100%; height: auto; direction: ltr; overflow: visible; }
.v-pow { fill: var(--accent); opacity: .3; }
.v-beta { fill: var(--accent-line); opacity: .45; }
.v-alpha { fill: var(--copper); opacity: .6; }
.v-h0 { fill: none; stroke: var(--ink-2); stroke-width: 1.6; }
.v-h1, .v-line { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.v-axis { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.v-crit { fill: none; stroke: var(--copper); stroke-width: 1.4; stroke-dasharray: 4 3; }
.v-delta { stroke: var(--copper); stroke-width: 1.6; }
.v-pt { fill: var(--copper); stroke: var(--surface); stroke-width: 2; }
.v-t { font: 700 12px system-ui, sans-serif; fill: var(--ink-2); text-anchor: middle; }
.v-t--s { font-size: 11px; font-weight: 600; }
.v-t--h1, .v-t--p { fill: var(--accent); }
.v-t--a { fill: var(--copper-ink); }
.v-t--b { fill: var(--muted); }
.v-t--y { text-anchor: end; }
.v-t--l { text-anchor: start; }
@media (max-width: 1023px) {
  .ss__pick { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ss__cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 860px) {
  .ss__viz { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fc__item { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .fc__item::before { inset-inline-start: 13px; top: 28px; }
  .fc__dot { width: 28px; height: 28px; font-size: var(--fs-xs); }
  .fc__q { padding: 14px; }
  .fc__opts { grid-template-columns: minmax(0, 1fr); }
  .fc__opt { grid-template-columns: 44px minmax(0, 1fr); }
  .fc__opt .pic { width: 44px; border-radius: 11px; }
  .fc__guide { padding: 12px; }
  .mini__pair { grid-template-columns: minmax(0, 1fr); }
  .ss__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss__card { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; }
  .ss__card .pic { width: 38px; }
}

/* Downloads */
.dls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dl {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .25s var(--ease), box-shadow .25s;
}
a.dl:hover { color: var(--ink); border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.dl > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dl p { font-size: var(--fs-sm); color: var(--muted); }
.dl__ext { width: 46px; height: 54px; border-radius: 8px 8px 8px 16px; display: grid; place-items: end center; padding-bottom: 6px; background: var(--accent-soft); color: var(--accent); font-size: .62rem; font-weight: 700; font-family: system-ui, sans-serif; flex: none; }
.dls__h { margin-top: 20px; }
.dls--slots .dl { border-style: dashed; background: var(--surface-2); }
.dls--slots .dl__ext { background: var(--bg-2); color: var(--muted); }
.tb__note { max-width: 80ch; margin-bottom: 12px; }

/* Fonts tab: previews use the woff2 files in fonts/, nothing is fetched from outside the site. */
@font-face { font-family: "TP Vazirmatn"; src: url("fonts/Vazirmatn-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "TP Shabnam"; src: url("fonts/Shabnam-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "TP Samim"; src: url("fonts/Samim-Regular.woff2") format("woff2"); font-display: swap; }
.fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.font { display: grid; gap: 12px; align-content: start; }
.font__demo { font-size: 1.5rem; line-height: 1.8; padding-bottom: 12px; border-bottom: 1px dashed var(--line-2); color: var(--ink); }
.font__meta { display: grid; gap: 4px; }
.font__meta h3 { font-size: var(--fs-md); }
.font__meta bdi { font-family: system-ui, sans-serif; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.font .btn { justify-self: start; }
.font-note { margin-top: 14px; background: var(--surface-2); display: grid; gap: 8px; }

/* Dedication and acknowledgement samples */
.texts { display: grid; gap: 24px; }
.texts section { display: grid; gap: 12px; }
.texts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.txt { display: grid; gap: 10px; grid-template-rows: auto 1fr auto; padding: 18px; }
.txt h3 { font-size: var(--fs-sm); color: var(--copper-ink); }
.txt p { line-height: 2; }
.txt .btn { justify-self: start; }
.ph { background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 3px; }
@media (max-width: 1023px) { .texts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fonts, .texts__grid { grid-template-columns: 1fr; } }

/* ── Blog ───────────────────────────────────────────────── */
.blog__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.blog__bar .chips { flex: 1 1 auto; }
.blog__search { flex: 0 1 300px; min-width: 200px; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.postcard {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
  animation: view-in .35s var(--ease) both;
}
.postcard:hover { color: var(--ink); border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow); }
.postcard h2 { font-size: var(--fs-lg); line-height: 1.6; }
.postcard p { color: var(--ink-2); font-size: var(--fs-sm); flex: 1; }
.tag { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 99px; padding: 1px 10px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--muted); }
/* Post: header, then the article column, which takes all the width the contents list leaves, and a
   sticky contents list at the end side. Two figures in a row sit side by side. */
.post { display: grid; gap: 22px; padding-block: 36px 0; }
.post__head { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.post__back { font-size: var(--fs-sm); justify-self: start; }
.post h1 { line-height: 1.5; max-width: 40ch; }
.post__head .lead { max-width: 80ch; }
.post__head .tag { justify-self: start; }
.post__grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; align-items: start; }
.post__main { display: grid; gap: 32px; min-width: 0; }
.post__body { display: grid; gap: 14px; font-size: var(--fs-md); line-height: 2.05; }
.post__body h2, .post__refs h2 { font-size: var(--fs-lg); scroll-margin-top: calc(var(--topbar-h) + 24px); }
.post__body h2 { margin-top: 10px; }
.post__toc { position: sticky; top: calc(var(--topbar-h) + 24px); display: grid; gap: 2px; border-inline-start: 2px solid var(--line); max-height: calc(100vh - var(--topbar-h) - 48px); overflow-y: auto; }
.post__toc-h { padding: 0 14px 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.post__toc a { padding: 6px 14px; margin-inline-start: -2px; border-inline-start: 2px solid transparent; text-decoration: none; color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; transition: color .2s, border-color .2s; }
.post__toc a:hover, .post__toc a.is-on { color: var(--accent); border-inline-start-color: var(--accent); }
.post__refs { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.post__refs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.post__refs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.post__host { font-size: var(--fs-xs); color: var(--muted); }
.post__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--accent-soft); border: 1px solid var(--accent-line); }

.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block: 8px; }
.fig { margin: 0; display: grid; gap: 12px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.post__body > .fig { margin-block: 8px; }
.fig svg { display: block; width: 100%; height: auto; }
.post__body > .fig:not(.fig--table) svg { max-width: 780px; justify-self: center; }
.fig figcaption { font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-2); }
.fig__note { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.fg-grid { stroke: var(--line); }
.fg-ax { stroke: var(--muted); stroke-width: 1; }
.fg-tick { fill: var(--muted); font-size: 12px; }
.fg-lab { fill: var(--ink-2); font-size: 13px; }
.fg-b { fill: var(--ink); font-weight: 700; }
.fg-a { fill: var(--accent); }
.fg-c { fill: var(--copper); }
.fg-soft { fill-opacity: .2; }
.fg-sa, .fg-sc { fill: none; stroke-width: 2; }
.fg-sa { stroke: var(--accent); }
.fg-sc { stroke: var(--copper); }
.fg-ta { fill: var(--accent); }
.fg-tc { fill: var(--copper-ink); }
.fg-sk { stroke: var(--ink-2); stroke-width: 1.5; }
.fg-box { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.fg-med { stroke: var(--accent); stroke-width: 3; }
.fg-out { fill: #fff; stroke: var(--copper); stroke-width: 1.5; }
.fg-pt { fill: var(--ink-2); fill-opacity: .4; }
.fg-pt--a { fill: var(--accent); fill-opacity: .55; }
.fg-ci { stroke: var(--ink); stroke-width: 2; }
.fg-fit { stroke: var(--copper); stroke-width: 2.5; }
.fg-line, .fg-step { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.fg-ref { stroke: var(--muted); stroke-dasharray: 4 4; }

.tblwrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.7; }
.tbl th, .tbl td { padding: 7px 10px; text-align: start; vertical-align: top; }
.tbl th { font-weight: 700; }
.tbl--good { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.tbl--good thead { border-bottom: 1px solid var(--ink); }
.tbl--good tbody tr:last-child td { padding-bottom: 10px; }
.tbl--good td:not(:first-child), .tbl--good th:not(:first-child) { text-align: center; white-space: nowrap; }
.tbl--good tfoot { border-top: 1px solid var(--ink); }
.tbl--good tfoot td { text-align: start !important; white-space: normal !important; font-size: var(--fs-xs); color: var(--muted); padding-top: 8px; }
.tbl--weak { border: 1px solid var(--line-2); }
.tbl--weak th, .tbl--weak td { border: 1px solid var(--line-2); text-align: center; }
.tbl--weak th { background: var(--surface-2); }
.tbl--data { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--fs-xs); }
.tbl--data td:not(:first-child), .tbl--data th:not(:first-child) { text-align: start; }
.tblpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.tblpair__h { margin-bottom: 8px; padding-inline-start: 10px; border-inline-start: 3px solid var(--accent); font-size: var(--fs-xs); font-weight: 700; line-height: 1.8; color: var(--accent); }
.tblpair__h--bad { color: var(--copper-ink); border-inline-start-color: var(--copper); }

@media (max-width: 1023px) {
  .post__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .post__toc {
    order: -1; position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; overflow-x: auto; scrollbar-width: none; max-height: none;
    border: 0; gap: 6px; padding: 10px var(--gutter); margin-inline: calc(-1 * var(--gutter)); background: var(--bg);
  }
  .post__toc::-webkit-scrollbar { display: none; }
  .post__toc-h { display: none; }
  .post__toc a { flex: none; border: 1px solid var(--line-2); border-radius: 99px; padding: 4px 12px; margin: 0; white-space: nowrap; }
  .post__toc a:hover, .post__toc a.is-on { border-color: var(--accent); background: var(--accent-soft); }
  .post__body h2, .post__refs h2 { scroll-margin-top: calc(var(--topbar-h) + 64px); }
}
@media (max-width: 860px) { .tblpair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .figs { grid-template-columns: minmax(0, 1fr); }
  .fig { padding: 12px; }
  .fig__note { white-space: normal; }
}
.editor { display: grid; gap: 20px; max-width: 900px; }
.editor__btns { display: flex; gap: 10px; }

/* ── Learn: catalogue, course page, lesson ──────────────── */
.learn__bar .chips { flex: 0 1 auto; }
.lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.lcard {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
  animation: view-in .35s var(--ease) both;
}
.lcard:hover { color: var(--ink); border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow); }
.lcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lcard h2 { font-size: var(--fs-lg); line-height: 1.6; }
.lcard p { color: var(--ink-2); font-size: var(--fs-sm); flex: 1; }
.lcard__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.lcard__foot small { color: var(--muted); font-size: var(--fs-xs); }
.is-free { color: var(--ok); }
.lcover { display: grid; place-items: center; width: 64px; height: 56px; flex: none; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); }
.lcover svg { width: 44px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lcover .ac-s { stroke: var(--copper); }

.course { display: grid; gap: 24px; padding-block: 36px 0; }
.chead { display: grid; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.chead__row { display: flex; gap: 18px; align-items: flex-start; }
.chead__row > div { display: grid; gap: 10px; min-width: 0; }
.chead .tag { justify-self: start; }
.chead h1 { line-height: 1.5; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.cmain { display: grid; gap: 28px; min-width: 0; }
.cmain > section { display: grid; gap: 12px; }
.cmain h2 { font-size: var(--fs-lg); }
.cmain p, .cmain li { line-height: 2; }
.cmain ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 4px; }
.ticks { list-style: none; padding: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px !important; }
.ticks li { position: relative; padding-inline-start: 26px; }
.ticks li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: 700; }
.cside { position: sticky; top: calc(var(--topbar-h) + 24px); display: grid; gap: 14px; }
.cside__price { font-size: var(--fs-xl, 1.5rem); font-weight: 800; }
.cside .btn { justify-self: stretch; }
.cside__dl { display: grid; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.cside__dl div { display: flex; justify-content: space-between; gap: 12px; }
.cside__dl dt { color: var(--muted); }
.cside__dl dd { margin: 0; text-align: end; }
.cside__staff { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.cside__staff .btn { justify-self: start; }

.syl { display: grid; gap: 6px; }
.syl + .syl { margin-top: 12px; }
.syl h3 { font-size: var(--fs-md); display: flex; align-items: baseline; gap: 8px; }
.syl h3 small { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.syl ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.syl a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .2s, background .2s; }
.syl a:hover { border-color: var(--accent-line); color: var(--ink); }
.syl__n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--bg-2); font-size: var(--fs-xs); font-weight: 700; }
.syl__t { flex: 1; min-width: 0; font-size: var(--fs-sm); line-height: 1.7; }
.syl__m { display: flex; align-items: center; gap: 8px; flex: none; font-size: var(--fs-xs); color: var(--muted); }
.syl .is-done .syl__n { background: var(--ok-soft); color: var(--ok); }
.syl .is-at a { border-color: var(--accent); background: var(--accent-soft); }

.lgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.lmain { display: grid; gap: 24px; min-width: 0; }
.lmain > .btn { justify-self: start; }
.lside { position: sticky; top: calc(var(--topbar-h) + 24px); max-height: calc(100vh - var(--topbar-h) - 48px); overflow-y: auto; display: grid; gap: 4px; }
.lside .syl a { padding: 7px 10px; }
.lvideo { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: #10292a; }
.lvideo--ph { display: grid; place-items: center; align-content: center; gap: 10px; color: #cfe3e2; font-size: var(--fs-sm); border: 1px dashed var(--accent-line); }
.lvideo--ph svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.lvideo--ph .ac { fill: var(--copper); stroke: none; }
.lnav { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.locked { display: grid; gap: 10px; justify-items: start; }
.quiz { display: grid; gap: 16px; padding: 22px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.quiz h2 { font-size: var(--fs-lg); }
.quiz__q { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz__q legend { font-weight: 700; line-height: 1.9; margin-bottom: 6px; padding: 0; }
.quiz__fb { font-size: var(--fs-sm); line-height: 1.9; }
.quiz__fb:empty { display: none; }
.quiz__q[data-ok="true"] .quiz__fb b { color: var(--ok); }
.quiz__q[data-ok="false"] .quiz__fb b { color: var(--err); }
.quiz__q[data-ok="true"] .check:has(input:checked) { border-color: var(--ok); background: var(--ok-soft); }
.quiz__q[data-ok="false"] .check:has(input:checked) { border-color: var(--err); background: var(--err-soft); }

.cn-h { font-size: var(--fs-lg); }
.cn-rows { display: grid; gap: 14px; }
.cn-row { display: grid; gap: 12px; margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.cn-row legend { padding: 0 6px; font-weight: 700; }
.cn-row .linkbtn { justify-self: start; }
[data-cn-form] > .btn { justify-self: start; }

@media (max-width: 1023px) {
  .cgrid, .lgrid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cside { position: static; order: -1; }
  .lside { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .ticks { grid-template-columns: minmax(0, 1fr); }
  .chead__row .lcover { display: none; }
  .syl__m .pill { display: none; }
  .quiz { padding: 16px; }
}

/* ── Rules ──────────────────────────────────────────────── */
.policy { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.policy__toc { position: sticky; top: calc(var(--topbar-h) + 24px); display: grid; gap: 2px; border-inline-start: 2px solid var(--line); }
.policy__toc a { padding: 6px 14px; margin-inline-start: -2px; border-inline-start: 2px solid transparent; text-decoration: none; color: var(--muted); font-size: var(--fs-sm); transition: color .2s, border-color .2s; }
.policy__toc a:hover, .policy__toc a.is-on { color: var(--accent); border-inline-start-color: var(--accent); }
.policy__body { display: grid; gap: 18px; min-width: 0; max-width: 980px; }
.rule { display: grid; gap: 14px; }
.rule h2, .pcard h2 { display: flex; align-items: center; gap: 12px; font-size: var(--fs-lg); }
.rule__n { width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm); font-weight: 900; }
.pcard .rule__n { background: var(--surface); color: var(--tone); }
.rule__list { counter-reset: r; display: grid; gap: 10px; }
.rule__list li { counter-increment: r; position: relative; padding-inline-start: 34px; }
.rule__list li::before { content: counter(r, persian) "."; position: absolute; inset-inline-start: 4px; top: 0; font-weight: 900; color: var(--accent); }
.rule__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rule__table th, .rule__table td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--line); }
.rule__table th { background: var(--surface-2); font-weight: 700; color: var(--ink-2); }
.rule__p { font-size: var(--fs-sm); color: var(--ink-2); }
.round__dl { display: grid; }
.round__dl div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.round__dl dt { font-weight: 700; color: var(--accent); font-size: var(--fs-sm); }
.round__dl--in { padding: 4px 22px 0; }
.round__dl--in div:first-child { border-top: 0; }

.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.pcard header { display: flex; gap: 14px; align-items: center; padding: 18px 22px; background: var(--tone-soft); border-bottom: 1px solid var(--line); }
.pcard header > div { display: grid; gap: 4px; min-width: 0; }
.pcard header p { font-size: var(--fs-sm); color: var(--ink-2); }
.pcard h2 { color: var(--tone); }
.pcard__ic { width: 42px; height: 42px; border-radius: 12px; background: var(--tone); display: grid; place-items: center; flex: none; }
.pcard__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--surface); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pcard ul { padding: 8px 22px 14px; display: grid; }
.pcard li { position: relative; padding-block: 10px; padding-inline: 22px 0; }
.pcard li + li { border-top: 1px dashed var(--line); }
.pcard li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 1.15em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--tone); }
.pcard li.is-hit { background: var(--tone-soft); margin-inline: -22px; padding-inline: 44px 22px; }
.pcard li.is-hit::before { inset-inline-start: 24px; background: var(--tone); }
.rule:target, .pcard:target { animation: flash 1.4s var(--ease); }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 4px var(--accent-line); } }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { display: grid; gap: 30px; max-width: 900px; }
.faq__grp { display: grid; gap: 10px; }
.faq__grp h2 { color: var(--accent); }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s, box-shadow .2s; scroll-margin-top: calc(var(--topbar-h) + 20px); }
.faq details[open] { border-color: var(--accent-line); box-shadow: var(--shadow); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 9px; height: 9px; flex: none; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-top: -4px; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; border-color: var(--accent); }
.faq details p { padding: 0 20px 16px; color: var(--ink-2); font-size: var(--fs-sm); }
.faq details.is-flash { animation: flash 1.4s var(--ease); }

/* ── About ──────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.about .card { display: grid; gap: 8px; align-content: start; }
.about__h { margin: 36px 0 14px; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.person__ph { grid-row: 1 / span 2; width: 60px; height: 60px; border-radius: 50%; border: 1.5px dashed var(--line-2); background: var(--surface-2); }
picture.person__ph { width: 72px; height: 72px; border: 0; overflow: hidden; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--line-2); }
.person__ph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.person b, .person small { min-width: 0; }
.enamad { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); }
.enamad--sm { padding: 10px; gap: 10px; border-radius: var(--r); }
.enamad--sm .ph-box { width: 48px; height: 48px; }

/* ── Contact ────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; max-width: 1200px; }
.contact__side { display: grid; gap: 16px; }
.channels { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 22px; }
.channels li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; }
.channels li + li { border-top: 1px solid var(--line); }
.channels__k { font-weight: 700; }
.channels--mini { padding: 2px 14px; border-radius: var(--r); }
.channels--mini li { padding: 8px 0; font-size: var(--fs-sm); }
.ph { font-size: var(--fs-xs); color: var(--warn); background: var(--warn-soft); border: 1px dashed var(--warn); border-radius: 6px; padding: 1px 8px; font-weight: 400; }
.ph-box { width: 64px; height: 64px; border-radius: 12px; border: 1px dashed var(--warn); color: var(--warn); display: grid; place-items: center; font-size: var(--fs-xs); flex: none; background: var(--warn-soft); }
.ticket-cta { display: grid; gap: 10px; justify-items: start; }
.contact__form { display: grid; gap: 18px; }
.contact__form h2 { font-size: var(--fs-lg); }
.contact__form > .btn { justify-self: start; }

/* ── Collaboration ──────────────────────────────────────── */
.collab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; max-width: 1200px; }
.collab__side { display: grid; gap: 16px; position: sticky; top: calc(var(--topbar-h) + 24px); }
.collab__side .card { display: grid; gap: 10px; }
.collab__steps { display: grid; gap: 8px; padding-inline-start: 1.2em; list-style: persian; }
.collab__form { display: grid; gap: 18px; }
.collab__form > .btn { justify-self: start; }
.collab__form .chip input[type="checkbox"]:checked + span::before { content: '✓'; margin-inline-end: .35em; }
.collab-cta { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 24px; }
.collab-cta > div { display: grid; gap: 4px; }
.cb-areas { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Account ────────────────────────────────────────────── */
.auth { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px; align-items: start; max-width: 1040px; }
.auth__card { display: grid; gap: 18px; }
.auth__form { display: grid; gap: 16px; }
.auth__form > .btn { justify-self: start; min-width: 140px; }
.auth__or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-xs); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn--google svg { width: 18px; height: 18px; }
.google-sim { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); animation: view-in .3s var(--ease) both; }
.google-sim > .btn { justify-self: start; }
.auth__side { display: grid; gap: 10px; justify-items: start; align-content: start; }

.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.panel__head > div { display: grid; gap: 6px; }
.olist { display: grid; gap: 12px; }
.ord { display: grid; gap: 12px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ord__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ord__head h3 { font-size: var(--fs-md); }
.ord__pay { display: flex; flex-wrap: wrap; gap: 8px; }
.ord__pay span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 700; background: var(--bg-2); color: var(--muted); }
.ord__pay span.is-paid { background: var(--ok-soft); color: var(--ok); }
.ord__pay span.is-paid::before { content: "✓"; }
.ord__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pill { display: inline-flex; align-items: center; padding: 2px 12px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 700; background: var(--bg-2); color: var(--ink-2); }
.pill[data-s="review"], .pill[data-s="open"] { background: var(--warn-soft); color: var(--warn); }
.pill[data-s="active"], .pill[data-s="answered"] { background: var(--accent-soft); color: var(--accent); }
.pill[data-s="done"], .pill[data-s="closed"] { background: var(--ok-soft); color: var(--ok); }
.tickets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ticket-form { display: grid; gap: 16px; }
.ticket-form > .btn { justify-self: start; }
.tlist { display: grid; gap: 10px; }
.tk { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); animation: view-in .3s var(--ease) both; }
.tk__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.tk p { font-size: var(--fs-sm); color: var(--ink-2); }
.tk__reply { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); border-inline-start: 3px solid var(--accent); }
.notifs { display: grid; gap: 8px; max-width: 860px; }
.notifs li { display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.notifs li.is-new { border-inline-start: 3px solid var(--warm); }
.notifs small { color: var(--muted); font-size: var(--fs-xs); }
.disc { display: grid; gap: 18px; max-width: 900px; }
.disc__code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r); background: var(--accent-soft); border: 1px dashed var(--accent); }
.disc__code bdi { font: 700 1.3rem/1.2 var(--mono); color: var(--accent); letter-spacing: .04em; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tier { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.tier b { font-size: var(--fs-lg); font-weight: 900; color: var(--muted); }
.tier small { color: var(--muted); font-size: var(--fs-xs); }
.tier.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.tier.is-on b { color: var(--accent); }
.profile { display: grid; gap: 18px; max-width: 860px; }
.profile > .btn { justify-self: start; }

/* ── Footer ─────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); }
.footer__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.7fr); gap: 28px 36px; padding-block: 44px 28px; }
.footer__col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.footer__brand { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: var(--fs-xl); line-height: 1.3; }
.footer__logo { --logo-bg: var(--bg-2); width: 42px; height: 42px; flex: none; color: var(--accent); }
.footer__brand small { display: block; font-size: .62rem; letter-spacing: .3em; color: var(--muted); font-family: system-ui, sans-serif; font-weight: 600; }
.footer__h { font-size: var(--fs-sm); font-weight: 900; color: var(--ink); }
.footer ul { display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--accent); text-decoration: underline; }
.footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.footer__links > .footer__h { grid-column: 1 / -1; }
.footer__sub { display: grid; gap: 8px; align-content: start; }
.footer__sub h3 { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.footer__sub ul + h3 { margin-top: 8px; }
.footer__dbs { display: flex !important; flex-wrap: wrap; gap: 4px 14px !important; }
.footer__legal { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); }

/* ── Floating expert button ─────────────────────────────── */
.fab {
  position: fixed; z-index: 50;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 20px);
  inset-inline-end: max(20px, env(safe-area-inset-left, 0px));
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: var(--shadow-lg), 0 10px 24px -10px var(--accent);
  transition: transform .25s var(--ease), background .2s;
}
.fab:hover { background: var(--accent-2); transform: translateY(-2px); }
.fab .ic { width: 20px; height: 20px; }
.fab[aria-expanded="true"] { background: var(--ink); }
.fab-panel {
  position: fixed; z-index: 55;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 80px);
  inset-inline-end: max(20px, env(safe-area-inset-left, 0px));
  width: min(390px, calc(100vw - 32px)); max-height: calc(100dvh - var(--dock-h) - 120px); overflow-y: auto;
  display: grid; gap: 14px; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  animation: view-in .3s var(--ease) both; overscroll-behavior: contain;
}
.fab-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fab-panel__head h2 { font-size: var(--fs-lg); }
.cb { display: grid; gap: 12px; }
.cb > .btn { justify-self: start; }
.fab-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ── Dock and sheet (mobile) ────────────────────────────── */
.dock {
  display: none;
  position: fixed; z-index: 45; inset: auto 0 0;
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: var(--topbar-bg);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.dock a, .dock button {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0 4px; border: 0; background: none; cursor: pointer;
  text-decoration: none; color: var(--muted); font-size: .7rem; font-weight: 700; border-radius: 12px; transition: color .2s;
}
.dock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.dock a[aria-current="page"], .dock button.is-on, .dock button[aria-expanded="true"] { color: var(--accent); }
.dock a[aria-current="page"] svg { transform: translateY(-1px); }
.dock a[aria-current="page"]::before, .dock button.is-on::before { content: ""; position: absolute; top: -7px; width: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.sheet { position: fixed; inset: 0; z-index: 44; background: var(--scrim); animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; } }
.sheet__in {
  position: absolute; inset-inline: 12px; bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 10px);
  display: grid; padding: 8px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg);
  animation: view-in .3s var(--ease) both;
}
.sheet__in a { padding: 14px 16px; border-radius: 12px; font-weight: 700; font-size: var(--fs-md); color: var(--ink); text-decoration: none; }
.sheet__in a + a { border-top: 1px solid var(--line); }
.sheet__in a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed; z-index: 60; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 32px);
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 84px);
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 12px; font-size: var(--fs-sm); box-shadow: var(--shadow-lg);
  animation: view-in .3s var(--ease) both;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1240px) {
  .tabs__link { padding: 0 11px; font-size: 1rem; }
  .tabs { margin-inline-start: -11px; }
}
/* ── Manuscript review ─────────────────────────────────── */
/* Sahel FD draws ASCII digits as Persian; a manuscript must show the digits the file holds. */
.rv-page, .rv-ex, .rv-quote, .rv-msg p, .rv-head h1 bdi, .ord__files a bdi { font-family: "TP Vazirmatn", system-ui, sans-serif; }
.rv-head { display: grid; gap: 10px; padding-block: 28px 20px; }
.rv-head h1 { font-size: var(--fs-lg, 1.4rem); overflow-wrap: anywhere; }
.rv-back { justify-self: start; text-decoration: none; font-weight: 700; }
.rv-back::before { content: "→ "; }
.rv-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rv-tools .rv-ver { inline-size: auto; min-inline-size: 180px; padding-block: 6px; }
.rv-tools kbd { font: inherit; font-size: .7rem; opacity: .75; padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px; }
.rv-banner { padding: 10px 14px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); }
.rv-banner--info { background: var(--accent-soft); color: var(--accent-2); }
.rv-lock { max-inline-size: 560px; margin: 48px auto; padding: 28px; display: grid; gap: 10px; }

.rv { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; padding-block-end: 48px; }
.rv-paper { min-inline-size: 0; }
.rv-page {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 48px 56px; line-height: 2; font-size: 1rem; color: var(--ink); outline: none; caret-color: var(--accent); overflow-wrap: anywhere;
}
.rv-page:focus-visible { box-shadow: var(--shadow), 0 0 0 2.5px var(--accent-line); }
.rv-p { margin: 0 0 .8em; text-align: start; min-block-size: 1em; }
.rv-title { font-size: 1.45rem; font-weight: 800; line-height: 1.6; }
.rv-sub { font-size: 1.1rem; color: var(--ink-2); }
.rv-h1 { font-size: 1.25rem; font-weight: 800; margin-block-start: 1.2em; }
.rv-h2 { font-size: 1.1rem; font-weight: 700; margin-block-start: 1em; }
.rv-h3 { font-weight: 700; }
.rv-cap { font-size: var(--fs-sm); color: var(--muted); }
.rv-bib { font-size: var(--fs-sm); }
.rv-locked { background: var(--surface-2); border-inline-start: 3px solid var(--line-2); padding-inline-start: 12px; color: var(--ink-2); cursor: default; }
.rv-ro { color: var(--muted); font-size: var(--fs-sm); font-style: italic; }

.rv-ins { --a: var(--accent); color: var(--a); text-decoration: underline 1.5px; text-underline-offset: 4px; background: color-mix(in srgb, var(--a) 7%, transparent); }
.rv-del { --a: var(--err); color: var(--a); text-decoration: line-through 1.5px; opacity: .85; }
.rv-ins.a1, .rv-del.a1, .rv-type.a1 { --a: var(--copper-ink); }
.rv-ins.a2, .rv-del.a2, .rv-type.a2 { --a: #3b5ea8; }
.rv-ins.a3, .rv-del.a3, .rv-type.a3 { --a: #7a3f8f; }
.rv-ins.a4, .rv-del.a4, .rv-type.a4 { --a: #2c6c3c; }
.rv-ins.a5, .rv-del.a5, .rv-type.a5 { --a: #a23a5a; }
.rv-del.a0 { --a: var(--accent); }
.rv-cm { background: var(--copper-soft); box-shadow: 0 2px 0 var(--copper-line); cursor: pointer; }
.rv-cm.is-done { background: transparent; box-shadow: 0 2px 0 var(--line-2); }
.rv-ins.rv-cm { background: linear-gradient(var(--copper-soft), var(--copper-soft)); }

.rv-chip, .rv-atom, .rv-tab { unicode-bidi: isolate; user-select: none; }
.rv-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; margin-inline: 1px; border-radius: 6px; line-height: 1.6;
  background: var(--accent-soft); color: var(--accent-2); border: 1px solid var(--accent-line); font-size: .92em; cursor: default; white-space: nowrap;
}
.rv-chip::before { content: ""; inline-size: 9px; block-size: 9px; background: currentColor; opacity: .55;
  clip-path: path("M2 4V3a2.5 2.5 0 0 1 5 0v1h1v5H1V4zM3 4h3V3a1.5 1.5 0 0 0-3 0z"); }
.rv-chip.rv-del { text-decoration: line-through; background: var(--err-soft); border-color: var(--err); color: var(--err); }
.rv-chip.is-armed { outline: 2px solid var(--copper); outline-offset: 1px; background: var(--copper-soft); }
.rv-atom { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--bg-2); color: var(--muted); font-size: .85em; }
.rv-img { padding: 4px; vertical-align: middle; }
.rv-img img { display: block; max-inline-size: min(100%, 420px); block-size: auto; border-radius: 4px; }
.rv-tab { display: inline-block; inline-size: 2em; }
.rv-gap { display: inline; }
.rv-tblwrap { overflow-x: auto; margin: 0 0 1em; }
.rv-tbl { border-collapse: collapse; min-inline-size: 100%; font-size: var(--fs-sm); line-height: 1.7; }
.rv-tbl td { border: 1px solid var(--line-2); padding: 6px 10px; vertical-align: top; }
.rv-tbl .rv-p { margin: 0; }
.rv-page .is-flash { animation: rv-flash 1.6s var(--ease); }
@keyframes rv-flash { 0%, 40% { background: var(--copper-line); box-shadow: 0 0 0 4px var(--copper-line); } }

.rv-side { position: sticky; inset-block-start: calc(var(--topbar-h) + 16px); display: grid; gap: 12px; max-block-size: calc(100vh - var(--topbar-h) - 32px); grid-template-rows: auto minmax(0, 1fr); }
.rv-side .subtabs [role="tab"] { padding-inline: 8px; }
.rv-side .badge:empty { display: none; }
.rv-panel { overflow-y: auto; display: grid; gap: 12px; align-content: start; padding: 2px 2px 8px; overscroll-behavior: contain; }
.rv-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rv-card, .rv-thread, .rv-entry { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.rv-card.is-cur { border-color: var(--accent-line); background: var(--accent-soft); }
.rv-card.is-flash, .rv-thread.is-flash { animation: flash 1.4s var(--ease); }
.rv-card__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-sm); }
.rv-card__a { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-type { --a: var(--accent); padding: 1px 8px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 700; color: var(--a); background: color-mix(in srgb, var(--a) 10%, transparent); }
.rv-card[data-t="del"] .rv-type { text-decoration: line-through; }
.rv-role { font-size: var(--fs-xs); color: var(--muted); padding: 0 6px; border-radius: 99px; border: 1px solid var(--line-2); }
.rv-role[data-r="staff"] { color: var(--accent); border-color: var(--accent-line); }
.rv-act { font-size: var(--fs-xs); color: var(--ink-2); }
.rv-ex { font-size: var(--fs-sm); padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); unicode-bidi: plaintext; text-align: start; overflow-wrap: anywhere; }
.rv-ex.is-del { text-decoration: line-through; color: var(--err); }
.rv-quote { margin: 0; padding: 4px 10px; border-inline-start: 3px solid var(--copper-line); color: var(--ink-2); font-size: var(--fs-sm); unicode-bidi: plaintext; overflow-wrap: anywhere; }
.rv-thread.is-done { opacity: .8; }
.rv-msg { display: grid; gap: 2px; }
.rv-msg + .rv-msg { padding-block-start: 8px; border-block-start: 1px dashed var(--line); }
.rv-msg p { font-size: var(--fs-sm); unicode-bidi: plaintext; text-align: start; }
.rv-reply, .rv-compose { display: grid; gap: 8px; }
.rv-compose { padding: 12px; border-radius: var(--r); background: var(--copper-soft); border: 1px solid var(--copper-line); }
.rv-donebox summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); padding-block: 6px; }
.rv-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rv-filters .input { padding-block: 6px; font-size: var(--fs-sm); }
.rv-filters [type="search"] { grid-column: 1 / -1; }
.rv-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-entry .btn { justify-self: start; }
.rv-up { position: relative; justify-self: start; cursor: pointer; }
.rv-snaps-h { margin: 1.25rem 0 .5rem; font-size: 1rem; }
.rv-saved { margin-block-start: .5rem; }
.pill[data-s="rej"] { background: var(--err-soft); color: var(--err); }

.ord__files { display: grid; gap: 6px; padding-block-start: 12px; border-block-start: 1px dashed var(--line); }
.ord__files ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ord__files li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ord__files a { font-weight: 700; overflow-wrap: anywhere; }

@media (max-width: 1023px) {
  .rv { grid-template-columns: minmax(0, 1fr); }
  .rv-side { position: static; max-block-size: none; }
  .rv-panel { overflow: visible; }
}
@media (max-width: 640px) {
  .rv-page { padding: 22px 16px; border-radius: var(--r-sm); }
  .rv-tools .btn, .rv-tools .rv-ver { flex: 1 1 auto; }
  .rv-tools kbd { display: none; }
}
@media print {
  .rv-side, .rv-tools, .rv-banner, .rv-back { display: none; }
  .rv { display: block; }
  .rv-page { border: 0; box-shadow: none; padding: 0; }
}

@media (max-width: 1100px) {
  .posts, .dls, .teaser, .prin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-wrap { grid-template-columns: minmax(0, 1fr); }
  .fc__aside { position: static; }
  .footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  :root { --dock-h: 66px; --topbar-h: 64px; }
  .topbar { display: none; }
  .masthead {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--topbar-bg);
    backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line);
  }
  .masthead__in { min-height: var(--topbar-h); }
  .brand { gap: 10px; }
  .brand__mark { width: 40px; height: 40px; border-radius: 12px; }
  .brand__mark svg { width: 30px; height: 30px; }
  .brand__txt { gap: 4px; }
  .brand__txt b { font-size: 22px; }
  .brand__txt small { font-size: .56rem; letter-spacing: .26em; }
  .dock { display: grid; }
  .order { grid-template-columns: minmax(0, 1fr); }
  .order__aside { position: static; }
  .policy { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .policy__toc {
    position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; overflow-x: auto; scrollbar-width: none;
    border: 0; gap: 6px; padding: 10px 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); background: var(--bg);
  }
  .policy__toc::-webkit-scrollbar { display: none; }
  [id^="rules-"] { scroll-margin-top: calc(var(--topbar-h) + 64px); }
  .policy__toc a { flex: none; border: 1px solid var(--line-2); border-radius: 99px; padding: 4px 12px; margin: 0; white-space: nowrap; }
  .policy__toc a:hover, .policy__toc a.is-on { border-color: var(--accent); background: var(--accent-soft); }
  .tickets, .ss { grid-template-columns: minmax(0, 1fr); }
  .ss__out { position: static; }
  .fab { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 14px); inset-inline-end: 14px; min-height: 44px; padding: 0 14px; }
  .fab-panel { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 68px); inset-inline-end: 16px; }
  body:has(.sumbar:not([hidden])) .fab { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 74px); }

  /* Process: vertical path */
  .proc { --ic: 48px; grid-template-columns: minmax(0, 1fr); }
  .proc__rail { top: calc(var(--ic) / 2); bottom: auto; height: calc((var(--ic) + 12px) * (var(--n) - 1)); width: 3px; inset-inline-start: calc(var(--ic) / 2 - 1.5px); inset-inline-end: auto; }
  .proc__rail span { width: 100%; height: calc(var(--p, 0) * 100%); inset-block: 0 auto; }
  .proc__nodes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .proc__node { grid-template-columns: var(--ic) auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 0; height: var(--ic); }
  .proc__ic { margin: 0; grid-row: 1; }
  .proc__node small { grid-row: 1; }
  .proc__node b { grid-row: 1; }
  .proc__node[aria-selected="true"] { transform: translateX(-4px); }
}
@media (min-width: 1024px) {
  .sumbar { display: none !important; }
  .dock, .sheet { display: none !important; }
}
@media (max-width: 860px) {
  .hero__in { padding-block: 48px 40px; }
  .teaser, .about, .team, .pico, .contact, .collab, .auth, .hero__in { grid-template-columns: minmax(0, 1fr); }
  .collab__side { position: static; }
  .pico__ex { position: static; }
  .morph { width: min(72%, 300px); order: -1; }
  .proc__card dl { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .proc__card dl > div + div { border-inline-start: 0; padding-inline-start: 0; border-top: 1px dashed var(--line-2); padding-top: 10px; }
  .fc__code { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: .9rem; }
  .masthead__cta { display: none; }
  .page-head { padding-block: 24px 18px; }
  .page-head > p { font-size: var(--fs-base); }
  .block { padding-block: 44px 0; }
  .posts, .dls, .teaser, .prin, .fields, .rows-radio, .choice-grid, .tiers, .footer__in, .footer__links { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 18px; border-radius: var(--r); }
  .order__form { padding: 18px; }
  .stepper button { flex-direction: column; align-items: flex-start; gap: 4px; font-size: .68rem; }
  .drop { grid-template-columns: minmax(0, 1fr); }
  .drop > svg { display: none; }
  .round__dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pcard header { padding: 16px; }
  .pcard ul { padding-inline: 16px; }
  .round__dl--in { padding-inline: 16px; }
  .pcard li.is-hit { margin-inline: -16px; padding-inline: 38px 16px; }
  .pcard li.is-hit::before { inset-inline-start: 18px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .audit__summary { align-items: flex-start; }
  .meter { width: 76px; height: 76px; }
  .view { padding-bottom: 110px; }
  .seg span { padding: 8px 8px; }
  .order__nav .btn--save { order: 3; flex-basis: 100%; }
  .fab span { display: none; }
  .fab { width: 48px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* ── Round 3 components ─────────────────────────────────── */
/* Pricing showcase for signed-out visitors */
.showcase { display: grid; gap: 18px; }
.showcase__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.tile {
  display: flex; flex-direction: column; gap: 12px; padding: 22px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.tile:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow); }
.tile__desc { color: var(--ink-2); font-size: var(--fs-sm); flex: 1; }
.tile__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 12px 14px; border-radius: var(--r); background: var(--copper-soft); font-size: var(--fs-sm); color: var(--ink-2); }
.tile__price b { color: var(--copper-ink); font-size: var(--fs-md); }
.tile__more { border-top: 1px dashed var(--line-2); padding-top: 10px; font-size: var(--fs-sm); }
.tile__more summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.tile__more ul { display: grid; gap: 4px; margin-top: 8px; color: var(--ink-2); }
.tile__more li { position: relative; padding-inline-start: 16px; }
.tile__more li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 6px; height: 6px; border-radius: 2px; background: var(--copper-line); }
.tile > .btn { align-self: stretch; justify-content: center; }
.showcase__how { max-width: 80ch; }

/* PICO worked example */
.pico__ex {
  position: sticky; top: calc(var(--topbar-h) + 20px); display: grid; gap: 14px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--copper); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.pico__ex-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.pico__ex-tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 99px; background: var(--bg-2); }
.pico__ex-tabs button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 99px; background: none; font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); cursor: pointer; }
.pico__ex-tabs button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgb(20 35 34 / .12); }
.pico__ex-tabs button:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.pico__ex-dl { display: grid; gap: 10px; }
.pico__ex-dl > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--fs-sm); }
.pico__ex-dl dt { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-family: system-ui, sans-serif; font-size: var(--fs-xs); font-weight: 800; }
.pico__ex-dl dd { color: var(--ink-2); line-height: 1.9; }
.pico__ex-q { padding: 12px 14px; border-radius: var(--r); background: var(--copper-soft); font-size: var(--fs-sm); font-weight: 700; line-height: 2; color: var(--ink); }

/* Measured variables */
.vars { display: grid; gap: 12px; }
.vars__grps { display: grid; gap: 14px; }
.vars__grp { display: grid; gap: 8px; }
.vars__add { display: flex; gap: 8px; align-items: center; max-width: 560px; }
.vars__add .input { flex: 1; min-width: 0; }
.chip--check > span { gap: 6px; }
.chip--check > span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line-2); background: var(--surface); flex: none; transition: all .2s; }
.chip--check input:checked + span::before { border-color: var(--accent-ink); background: var(--accent-ink); box-shadow: inset 0 0 0 3px var(--accent); }
.attach { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 46px; }
.attach > label.btn { cursor: pointer; }
.attach__name { font-size: var(--fs-sm); color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.attach:focus-within > label.btn { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* Category encoding after upload */
.enc { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--accent-line); animation: view-in .35s var(--ease) both; }
.enc__head { display: grid; gap: 4px; }
.enc__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.enc__col { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.enc__col.is-quant { opacity: .75; }
.enc__ch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.enc__ch b { overflow-wrap: anywhere; }
.enc__ch small { color: var(--muted); font-size: var(--fs-xs); }
.enc__ch .switch { margin-inline-start: auto; font-size: var(--fs-xs); }
.enc__ok { margin-inline-start: auto; padding: 2px 10px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font-size: var(--fs-xs); font-weight: 700; }
.enc__vals { display: grid; gap: 6px; }
.enc__v { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 8px; align-items: center; }
.enc__code { display: grid; line-height: 1.4; font-weight: 700; font-size: var(--fs-sm); }
.enc__code small { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.enc__lab { font-size: var(--fs-sm); color: var(--ink-2); }
.input--sm { min-height: 38px; padding: 6px 12px; border-radius: 9px; font-size: var(--fs-sm); }
/* An empty code is required but not yet a mistake, so it shows amber; the step error below names it on «مرحله‌ی بعد». */
.enc .input[aria-invalid="true"] { border-color: var(--warn); box-shadow: none; background: var(--surface); }

.review-note { display: flex; gap: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--accent-soft); border-inline-start: 3px solid var(--accent); font-size: var(--fs-sm); color: var(--ink); line-height: 1.9; }

/* Without the demo-account panel the sign-in card stands alone. */
.auth:has(> .auth__side[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 640px; }

/* Sections fade in as they scroll into view, where the browser supports it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .block__head, .jr, .tile {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }

@media (max-width: 640px) {
  .vars__add { flex-wrap: wrap; }
  .vars__add .btn { flex: 1 1 auto; }
  .morph { width: min(58%, 210px); }
  .morph__grid { gap: 6px; }
  .hero__in { gap: 24px; padding-block: 32px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .morph__grid i { animation: none; transition: none; }
  .morph__grid i:nth-child(3n) { border-radius: 32%; background: var(--c2); }
  .morph__grid i:nth-child(4n+1) { border-radius: 62% 0; }
  .morph__grid i:nth-child(5n) { border-radius: 10%; }
}
/* Services as a research journey: seven stops on a loop from the literature to publication and back to the
   next question. app.js turns the two markers (rotate), fills the arc up to the chosen stop and copies the
   stop's icon and name into the centre, which is drawn like the logo's middle cell. */
.jr {
  --jr-ease: cubic-bezier(.45, 0, .2, 1);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); align-items: center; gap: 40px;
  padding: 32px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    radial-gradient(50% 70% at 20% 50%, rgb(14 107 107 / .06), transparent 70%),
    radial-gradient(40% 50% at 90% 100%, rgb(192 101 42 / .05), transparent 70%),
    var(--surface);
}
.jr__map { order: 2; display: grid; gap: 14px; justify-items: center; min-width: 0; }
.jr__ring { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin-block: 18px 4px; }
.jr__deco i {
  --c1: var(--accent-soft); --c2: var(--copper-soft);
  position: absolute; left: var(--x); top: var(--y); width: 6.5%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: var(--c1);
  animation: morph 9s var(--ease) infinite; animation-delay: calc(var(--d, 0) * -1s);
}
.jr__deco i:nth-child(3n+2) { --c1: var(--accent-line); }
.jr__deco i:nth-child(4n+1) { --c2: var(--copper-line); }
.jr__track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jr__track circle { fill: none; }
.jr__path { stroke: var(--line); stroke-width: 2.6; }
.jr__flow { stroke: var(--accent-line); stroke-width: .9; stroke-linecap: round; stroke-dasharray: .4 2.457; animation: jr-flow 40s linear infinite; }
@keyframes jr-flow { to { stroke-dashoffset: -100; } }
.jr__done { stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s var(--jr-ease); }
.jr__inner { stroke: var(--copper-line); stroke-width: .6; stroke-dasharray: 1 1.6; }
.jr__orbit { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: rotate 1s var(--jr-ease); }
.jr__orbit span { position: absolute; left: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
.jr__orbit--you span { top: 10%; width: 4.6%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.jr__orbit--we { transition-delay: .12s; }
.jr__orbit--we span { top: 21%; width: 3.4%; background: var(--copper); border: 2px solid var(--surface); box-shadow: 0 0 0 4px var(--copper-soft); }
.jr__core {
  position: absolute; inset: 31%; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 6%;
  text-align: center; border-radius: 30%; background: var(--surface); color: var(--accent);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
}
.jr__core > * { animation: view-in .4s var(--ease) both; }
.jr__core svg { width: 40%; height: auto; aspect-ratio: 1; margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jr__core small { font-size: var(--fs-xs); font-weight: 700; color: var(--copper-ink); }
.jr__core b { font-size: var(--fs-md); font-weight: 900; color: var(--ink); line-height: 1.5; }
.jr .ac { fill: var(--copper); stroke: none; }
.jr .ac-s { stroke: var(--copper); }
.jr__stops { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.jr__stop {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: 15%; aspect-ratio: 1; padding: 0;
  border: 0; background: none; color: var(--accent); cursor: pointer; pointer-events: auto;
}
.jr__tile {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 30%; border: 1.5px solid var(--accent-line); background: var(--surface); box-shadow: var(--shadow);
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s, scale .35s var(--ease);
}
.jr__tile svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Step number in the tile's corner. */
.jr__tile::after {
  content: attr(data-n); position: absolute; top: -9%; inset-inline-start: -9%; display: grid; place-items: center;
  width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--copper-line);
  color: var(--copper-ink); font-size: 11px; font-weight: 800; line-height: 1;
}
.jr__lbl {
  position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: 8px;
  white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); transition: color .3s;
}
.jr__stop--up .jr__lbl { top: auto; bottom: 100%; margin: 0 0 8px; }
.jr__stop:hover .jr__tile { border-color: var(--accent); scale: 1.06; }
.jr__stop:focus-visible { outline: none; }
.jr__stop:focus-visible .jr__tile { outline: 2.5px solid var(--accent); outline-offset: 4px; }
.jr__stop.is-past .jr__tile { background: var(--accent-soft); border-color: var(--accent); }
.jr__stop[aria-selected="true"] .jr__tile {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); scale: 1.12;
  box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow-lg);
}
.jr__stop[aria-selected="true"] .jr__tile::after { background: var(--copper); border-color: var(--copper); color: #fff; }
.jr__stop[aria-selected="true"] .ac { fill: var(--copper-line); }
.jr__stop[aria-selected="true"] .ac-s { stroke: var(--copper-line); }
.jr__stop[aria-selected="true"] .jr__lbl { color: var(--accent); }
.jr__stop[aria-selected="true"]::before {
  content: ""; position: absolute; inset: -10%; border-radius: 34%; border: 2px solid var(--accent);
  animation: jr-pulse 2.4s ease-out infinite;
}
@keyframes jr-pulse { from { opacity: .55; scale: 1; } to { opacity: 0; scale: 1.4; } }
.jr__key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: var(--fs-xs); color: var(--muted); }
.jr__key span { display: inline-flex; align-items: center; gap: 7px; }
.jr__key span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.jr__key .jr__key-we::before { background: var(--copper); box-shadow: 0 0 0 3px var(--copper-soft); }

.jr__side { display: grid; gap: 18px; align-content: center; min-width: 0; }
/* Every panel shares one grid cell, so the column keeps the height of the longest and nothing jumps. */
.jr__panels { display: grid; }
.jr__panel { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; }
.jr__panel[hidden] { display: grid !important; visibility: hidden; }
.jr__panel:not([hidden]) > * { animation: view-in .35s var(--ease) both; }
.jr__panel:not([hidden]) > :nth-child(4) { animation-delay: .06s; }
.jr__panel:not([hidden]) > :nth-child(5) { animation-delay: .12s; }
.jr__n { font-size: var(--fs-xs); font-weight: 700; color: var(--copper-ink); }
.jr__name { font-size: var(--fs-xl); font-weight: 900; }
.jr__what { color: var(--ink-2); font-size: var(--fs-md); line-height: 2; max-width: 62ch; }
.jr__with { display: flex; align-items: center; gap: 9px; margin-top: 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.jr__with::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 3px var(--copper-soft); }
.jr__svcs { display: grid; gap: 10px; }
.jr__svc {
  display: grid; gap: 6px; justify-items: start; padding: 14px 16px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line); border-inline-start: 3px solid var(--copper);
}
.jr__svc--free { border-inline-start-color: var(--accent); }
.jr__svc b { font-size: var(--fs-md); }
.jr__svc p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.9; }
.jr__svc bdi { white-space: nowrap; font-family: system-ui, sans-serif; font-size: .94em; }
.jr__svc .btn { margin-top: 2px; }
.jr__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-2); }
.jr__nav [data-jr-play] { margin-inline-start: auto; }
.jr__other { padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: var(--fs-sm); color: var(--muted); }

/* Principles: one compact strip of links to the rules. */
.prin { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.prin__i {
  display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: var(--r); text-decoration: none; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.prin__i:nth-child(even) { border-top-color: var(--copper); }
.prin__i:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.prin__i b { font-size: var(--fs-sm); }
.prin__i span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.8; }
.block__title { margin-bottom: 20px; }
.h1-en { font-size: .55em; font-weight: 700; color: var(--muted); }

/* About: who we work with and the study designs (moved here from home). */
.intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; padding-block: 0 8px; }
.intro__text { display: grid; gap: 12px; }
.intro__text p { color: var(--ink-2); max-width: 70ch; }
.who { display: grid; gap: 10px; }
.who li { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--r); background: var(--accent-soft); border-inline-start: 4px solid var(--accent); }
.who li:nth-child(even) { background: var(--copper-soft); border-inline-start-color: var(--copper); }
.who span { font-size: var(--fs-sm); color: var(--ink-2); }
.designs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.designs__grp { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.designs__grp p { display: flex; flex-wrap: wrap; gap: 6px; }
.designs__grp p bdi { padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); font-family: system-ui, sans-serif; font-size: var(--fs-xs); line-height: 1.9; }
.designs__grp small { color: var(--muted); font-size: var(--fs-xs); }
.about--after { margin-top: 36px; }

/* Showcase tile reached from a home link. */
.tile.is-picked { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }

@media (max-width: 1100px) {
  .jr { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 28px; padding: 24px; }
}
@media (max-width: 860px) {
  .jr { grid-template-columns: minmax(0, 1fr); }
  .jr__map { order: 0; }
  .jr__ring { max-width: 440px; }
  /* One column: the ring sits above, so a panel can take its own height without moving it. */
  .jr__panel[hidden] { display: none !important; }
  .intro, .designs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .jr { padding: 16px; gap: 20px; }
  .jr__deco { display: none; }
  .jr__ring { width: calc(100% - 24px); }
  .jr__lbl { font-size: 11px; margin-top: 5px; }
  .jr__stop--up .jr__lbl { margin-bottom: 5px; }
  .jr__tile::after { font-size: 10px; }
  .jr__core small { font-size: 10px; }
  .jr__core b { font-size: var(--fs-sm); }
  .jr__name { font-size: var(--fs-lg); }
  .jr__what { font-size: var(--fs-base); }
}
@media (prefers-reduced-motion: reduce) {
  .jr__deco i, .jr__flow, .jr__stop::before { animation: none; }
  .jr__deco i:nth-child(3n) { border-radius: 32%; background: var(--c2); }
  .jr__deco i:nth-child(4n+1) { border-radius: 62% 0; }
  .jr__orbit, .jr__done { transition-duration: .01s !important; }
  .jr__core > *, .jr__panel:not([hidden]) > * { animation: none; }
}

@media print {
  .block__head, .jr, .tile { animation: none; }
}

/* Toolbox: qPCR relative expression */
.qp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.qp__step, .qp__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.qp__step > *, .qp__card > *, [data-qp-genes], [data-qp-samples] { min-width: 0; }
[data-qp-genes], [data-qp-samples] { display: grid; gap: 10px; }
.qp__h { display: flex; align-items: center; gap: 10px; margin: 0; }
.qp__no { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 800; flex: none; }
.qp__sub { margin: 0; font-size: var(--fs-lg); }
.qp__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qp__paste { min-block-size: 120px; font: 400 .8rem/1.6 var(--mono); white-space: pre; overflow-x: auto; }
.qp__out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; scroll-margin-block-start: calc(var(--topbar-h) + 16px); }
.qp__out:empty { display: none; }
.qp [data-qp-read-out] { display: grid; gap: 8px; }
.qp [data-qp-read-out]:empty { display: none; }
.qp__ask p { margin-block-end: 10px; }
.qp__det summary { cursor: pointer; font-weight: 700; color: var(--ink-2); padding-block: 4px; }
.qp__det .tblwrap { margin-block-start: 8px; }
.qp .input--sm { padding-block: 6px; padding-inline: 10px; min-block-size: 38px; font-size: var(--fs-sm); inline-size: 100%; min-inline-size: 110px; }
.qp__tbl td, .qp__tbl th { vertical-align: middle; }
.qp select.input--sm { padding-inline-end: 34px; }
.qp__tbl:not(.qp__res) { inline-size: auto; min-inline-size: min(100%, 520px); }
.qp__tbl .input--sm { max-inline-size: 220px; }
.qp__fig .v-t { font-size: 14px; }
.qp__fig .v-t--s { font-size: 13px; }
.qp__tbl tr.is-off > * { opacity: .5; }
.qp__tbl tr.is-off td:last-child { opacity: 1; }
.qp__tbl input[type="checkbox"], .qp__well input { inline-size: 20px; block-size: 20px; accent-color: var(--accent); margin: 0; }
.qp__samples { max-block-size: 460px; overflow-y: auto; }
.qp__wells { display: flex; flex-wrap: wrap; gap: 6px; }
.qp__well { display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; padding-inline: 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); font: 600 .78rem/1.4 var(--mono); cursor: pointer; }
.qp__well:has(input:checked) { border-color: var(--copper); background: var(--warn-soft); text-decoration: line-through; }
.qp__flag { color: var(--copper-ink); }
.qp__res tr.is-sig td b { color: var(--accent); }
.qp__res tfoot td { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; line-height: 1.8; }
.qp__say { margin: 0; line-height: 2; }
.qp__fig { margin: 0; display: grid; gap: 6px; max-inline-size: 640px; }
.qp__fig svg { inline-size: 100%; block-size: auto; direction: ltr; overflow: visible; }
.qp-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.qp-pt { fill: var(--accent); fill-opacity: .75; stroke: var(--surface); stroke-width: 1.5; }
.qp-pt--cens { fill: var(--surface); fill-opacity: 1; stroke: var(--accent); stroke-width: 1.8; }
.qp-ci { fill: none; stroke: var(--copper); stroke-width: 2; }
.qp__txt { padding-block: 12px; padding-inline: 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 8px; line-height: 2; text-align: start; min-width: 0; overflow-wrap: anywhere; }
.qp__txt[dir="ltr"] { font-family: system-ui, sans-serif; line-height: 1.7; }
.qp__txt p, .qp__txt ol { margin: 0; }
.qp__txt ol { padding-inline-start: 22px; font-size: var(--fs-xs); display: grid; gap: 4px; }
.qp__miqe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1023px) {
  .qp__miqe { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .qp { gap: 14px; }
  .qp__paste { min-block-size: 100px; }
  .qp .input--sm { min-inline-size: 90px; }
  .qp__txt { padding-inline: 10px; }
}

/* ── Clinical toolbox: ED Navigator ─────────────────────── */
/* Algorithm text is English and set LTR; the certainty gradient (red → amber → green) arrives as --c. */
.ed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ed-conv { display: grid; gap: 10px; align-content: start; min-inline-size: 0; max-inline-size: 860px; }
.ed-note { padding-block: 6px; font-size: var(--fs-xs); }
.ed-n:empty { display: none; }
.ed-n { font-size: var(--fs-xs); background: var(--accent-soft); color: var(--accent); border-radius: 99px; padding: 0 7px; }
[data-view="medtools"] { --ed-font: "Parastoo", "Sahel FD", system-ui, sans-serif; font-family: var(--ed-font); }
[data-view="medtools"] :is(input, textarea, button, select, output, h1, h2, h3, h4, h5) { font-family: inherit; }
.ed bdi, .ed [dir="ltr"] { unicode-bidi: isolate; }
.ed-h { margin: 0; font-size: var(--fs-md); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ed-thread { display: grid; gap: 8px; }
.ed-msg { justify-self: start; max-inline-size: min(100%, 680px); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r) var(--r) var(--r) 4px; padding: 10px 14px; display: grid; gap: 6px; }
.ed-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; }
.ed-msg mark { background: rgb(62 123 250 / .2); color: inherit; border-radius: 3px; padding-inline: 1px; }
.ed-msg__foot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ed-chip { font-size: var(--fs-xs); font-weight: 700; color: var(--warn); background: var(--warn-soft); border-radius: 99px; padding: 1px 10px; }
.ed-x { inline-size: 28px; block-size: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.ed-x:hover { background: var(--surface); color: var(--err); }
.ed-compose { display: grid; gap: 10px; }
.ed-input { min-block-size: 110px; resize: vertical; line-height: 1.9; }
.ed-compose__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-grow { flex: 1; }
.ed-mic svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ed-mic[aria-pressed="true"] { background: var(--err); border-color: var(--err); color: #fff; animation: ed-pulse 1.4s ease-in-out infinite; }
@keyframes ed-pulse { 50% { box-shadow: 0 0 0 6px rgb(176 38 46 / .18); } }
.ed-lang { --n: 2; padding: 3px; }
.ed-lang span { padding: 4px 12px; }
.ed-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.ed-check input { inline-size: 18px; block-size: 18px; accent-color: var(--accent); margin: 0; }
.ed-status { margin: 0; min-block-size: 1.5em; display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.ed-status:empty { display: none; }
.ed-spin { display: inline-block; inline-size: 14px; block-size: 14px; border-radius: 50%; border: 2px solid var(--accent-line); border-block-start-color: var(--accent); animation: ed-spin .8s linear infinite; vertical-align: -2px; margin-inline-end: 6px; }
@keyframes ed-spin { to { transform: rotate(360deg); } }
.ed-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-inline-size: 0; }
.ed-out:empty { display: none; }
.ed-pill { display: inline-flex; align-items: center; white-space: nowrap; padding: 1px 10px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 800; color: color-mix(in srgb, var(--c) 70%, #000); background: color-mix(in srgb, var(--c) 18%, transparent); }
.ed-urg { display: inline-flex; padding: 1px 10px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 700; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.ed-urg[data-u="immediate"] { background: var(--err-soft); color: var(--err); }
.ed-urg[data-u="urgent"] { background: var(--warn-soft); color: var(--warn); }
/* matching algorithms: chips with a fit bar */
.ed-algs { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.ed-alg { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 6px 14px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; max-inline-size: 100%; }
.ed-alg { min-inline-size: 0; text-align: start; }
.ed-alg > span { min-inline-size: 0; overflow-wrap: anywhere; line-height: 1.5; }
.ed-alg b { font-size: var(--fs-xs); color: var(--ink-2); }
.ed-alg i { position: absolute; inset-block-end: 0; inset-inline-start: 0; block-size: 4px; }
.ed-alg[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.ed-more { align-self: center; }
.ed-more > summary { cursor: pointer; list-style: none; min-block-size: 44px; display: inline-flex; align-items: center; padding-inline: 14px; border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--ink-2); font-weight: 700; }
.ed-more > summary::-webkit-details-marker { display: none; }
.ed-more[open] { flex-basis: 100%; }
.ed-more > div { display: grid; gap: 6px; margin-block-start: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* one algorithm: header, actions, question / final, chart + flowchart */
.ed-pane { display: grid; gap: 12px; scroll-margin-block-start: calc(var(--topbar-h) + 16px); min-inline-size: 0; }
.ed-pane__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-pane__head h3 { margin: 0; font-size: var(--fs-md); line-height: 1.5; margin-inline-end: auto; }
.ed-unrev { font-size: var(--fs-xs); color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 8px; }
.ed-skel { display: grid; gap: 10px; }
.ed-skel i { display: block; block-size: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-2) 25%, var(--surface-2) 50%, var(--bg-2) 75%); background-size: 200% 100%; animation: ed-shim 1.2s linear infinite; }
.ed-skel i:nth-child(1) { inline-size: 40%; } .ed-skel i:nth-child(2) { block-size: 64px; } .ed-skel i:nth-child(3) { block-size: 180px; }
@keyframes ed-shim { to { background-position: -200% 0; } }
.ed-dos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ed-dos > .xs { color: var(--muted); font-weight: 700; }
.ed-do { border: 0; border-radius: 99px; padding: 4px 12px; font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; background: var(--accent-soft); color: var(--accent); max-inline-size: 100%; overflow-wrap: anywhere; }
.ed-do[data-u="immediate"] { background: var(--err-soft); color: var(--err); }
.ed-do[data-u="urgent"] { background: var(--warn-soft); color: var(--warn); }

.ed-q { border: 2px solid var(--accent); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); animation: ed-in .25s var(--ease); }
@keyframes ed-in { from { opacity: 0; transform: translateY(6px); } }
.ed-q__top { display: flex; align-items: center; gap: 10px; }
.ed-q__badge { flex: none; inline-size: 32px; block-size: 32px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ed-q h4 { margin: 0; font-size: 1.15rem; line-height: 1.5; flex: 1; }
.ed-q__full { font-size: var(--fs-sm); color: var(--ink-2); }
.ed-q__full p { margin: 0 0 4px; }
.ed-i { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 1rem; }
.ed-q__opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ed-opt { --c: var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-block-size: 52px; padding: 8px 14px; border: 1.5px solid var(--line); border-inline-start: 5px solid var(--c); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: start; cursor: pointer; transition: transform .1s, border-color .15s; }
.ed-opt__t { display: grid; gap: 2px; min-inline-size: 0; }
.ed-opt__t > strong { font-size: var(--fs-md); font-weight: 800; overflow-wrap: anywhere; }
.ed-opt__t > span { font-weight: 500; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.6; overflow-wrap: anywhere; }
.ed-opt b { flex: none; font-size: var(--fs-xs); color: color-mix(in srgb, var(--c) 70%, #000); }
.ed-opt:active { transform: scale(.98); }
button.ed-opt:hover { border-color: var(--accent); }
.ed-opt.is-sug { background: color-mix(in srgb, var(--c) 12%, var(--surface)); border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.ed-opt.is-chosen { background: var(--accent-soft); border-color: var(--accent); }
.ed-opt--unk { justify-content: center; border-style: dashed; border-inline-start-width: 1.5px; color: var(--ink-2); font-weight: 500; }

.ed-final { border-radius: var(--r); padding: 12px 14px; background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 2px solid var(--c); display: grid; gap: 6px; animation: ed-in .25s var(--ease); }
.ed-final__top { display: flex; align-items: center; gap: 8px; }
.ed-final__tag { font-weight: 800; font-size: var(--fs-sm); color: color-mix(in srgb, var(--c) 70%, #000); }
.ed-final__l { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.5; }
.ed-final details p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.ed-bul { list-style: disc; margin: 0; padding-inline-start: 20px; display: grid; gap: 3px; font-size: var(--fs-sm); line-height: 1.6; text-align: left; }
.ed-bul li::marker { color: var(--c, var(--accent)); }
/* order set: tabs, typed bullets, the physician's check that unlocks Copy */
.ed-ord { display: grid; gap: 8px; border-top: 1px dashed color-mix(in srgb, var(--c, var(--line)) 50%, var(--line)); padding-top: 8px; }
.ed-ord .ed-segs { justify-self: start; }
.ed-ord__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); line-height: 1.55; text-align: left; }
.ed-ord__l li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.ed-ord__l li > span { justify-self: start; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 0 6px; background: var(--surface-2); color: var(--ink-2); }
.ed-ord__l li[data-t="med"] > span { background: var(--accent-soft); color: var(--accent); }
.ed-ord__l li[data-t="consult"] > span, .ed-ord__l li[data-t="disposition"] > span { background: var(--warn-soft); color: var(--warn); }
.ed-ord__l li[data-t="education"] > span, .ed-ord__l li[data-t="followup"] > span { background: var(--ok-soft, var(--surface-2)); color: var(--ok); }
.ed-ord__note { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.ed-ord__ok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ed-ord__ok .ed-check { font-weight: 700; color: var(--ink); }
.ed-ord--ro { border-top: 0; padding-top: 4px; }
.ed-ord--ro summary { cursor: pointer; font-weight: 700; }
.ed-ord--ro .ed-ord__l { margin-top: 6px; }
.ed-final summary { cursor: pointer; color: var(--muted); }
.ed-flags > summary { cursor: pointer; font-weight: 700; color: var(--err); font-size: var(--fs-sm); }
.ed-flags ul { margin: 8px 0 0; padding-inline-start: 20px; color: var(--err); font-size: var(--fs-sm); display: grid; gap: 4px; }

.ed-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }

/* differential chart: name | bar on a fixed 0–100% axis | % */
.ed-dx { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--surface); }
.ed-dx .ed-h { font-size: var(--fs-sm); }
.ed-tip { display: inline-block; position: relative; }
.ed-tip > summary { list-style: none; cursor: pointer; color: var(--muted); font-weight: 400; }
.ed-tip > summary::-webkit-details-marker { display: none; }
.ed-tip p { position: absolute; z-index: 5; inset-inline-start: 0; inset-block-start: 1.6em; inline-size: min(300px, 80vw); margin: 0; padding: 10px 12px; font-size: var(--fs-xs); font-weight: 400; line-height: 1.8; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow); }
.ed-dx__g { --g: var(--muted); --gs: var(--surface-2); display: grid; gap: 4px; padding: 6px; border-radius: var(--r-sm); background: var(--gs); border-inline-start: 4px solid var(--g); }
.ed-dx__g[data-g="must_not_miss"] { --g: var(--err); --gs: var(--err-soft); }
.ed-dx__g[data-g="common"] { --g: var(--accent); --gs: var(--accent-soft); }
.ed-dx__g h5, .ed-gtag { justify-self: start; margin: 0 0 2px; padding: 1px 10px; border-radius: 99px; background: var(--g); color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.ed-gtag { --g: var(--muted); display: inline-block; margin: 0; color: var(--gi, #fff); }
.ed-gtag[data-g="must_not_miss"] { --g: var(--err); }
.ed-gtag[data-g="common"] { --g: var(--accent); }
.ed-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* ESI-style acuity: 1 red, 2 orange, 3 yellow, 4 green, 5 blue (ESI itself names no colours; this is the usual ED scheme) */
:is(.ed-dx__g, .ed-gtag)[data-g="esi1"] { --g: var(--err); }
:is(.ed-dx__g, .ed-gtag)[data-g="esi2"] { --g: #e8590c; }
:is(.ed-dx__g, .ed-gtag)[data-g="esi3"] { --g: #f2b705; --gi: #3b2c00; }
:is(.ed-dx__g, .ed-gtag)[data-g="esi4"] { --g: #2b8a3e; }
:is(.ed-dx__g, .ed-gtag)[data-g="esi5"] { --g: #1c7ed6; }
.ed-dx__g[data-g^="esi"] { --gs: color-mix(in srgb, var(--g) 14%, var(--surface)); }
.ed-dx__g h5 { color: var(--gi, #fff); }
.ed-dx__row { display: grid; grid-template-columns: minmax(96px, 42%) minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: var(--surface); font: inherit; color: var(--ink); text-align: start; inline-size: 100%; }
.ed-dx__row { cursor: pointer; min-block-size: 32px; }
.ed-dx__row:hover { border-color: var(--g); }
.ed-dx__row.is-flag { border: 2px solid var(--err); box-shadow: inset 4px 0 0 var(--err); }
.ed-dx[dir="rtl"] .ed-dx__row.is-flag { box-shadow: inset -4px 0 0 var(--err); }
.ed-dx__n { font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; min-inline-size: 0; }
.ed-dx__w { font-style: normal; color: var(--err); margin-inline-end: 4px; }
.ed-dx__t { display: flex; align-items: center; gap: 6px; }
.ed-dx__t i { display: block; block-size: 14px; border-radius: 3px; transition: inline-size .5s var(--ease); flex: none; max-inline-size: calc(100% - 44px); }
.ed-dx__t b { font-size: var(--fs-xs); white-space: nowrap; }

/* flowchart */
.ed-flow { display: grid; gap: 8px; min-inline-size: 0; }
.ed-flow__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-segs { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 2px; background: var(--surface-2); }
.ed-segs button { border: 0; background: none; font: inherit; font-size: var(--fs-xs); font-weight: 700; padding: 5px 12px; border-radius: 99px; color: var(--ink-2); cursor: pointer; min-block-size: 32px; }
.ed-segs button[aria-checked="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.ed-segs button:disabled { opacity: .4; cursor: default; }
.ed-zoom { display: inline-flex; gap: 2px; }
.ed-zoom button { inline-size: 34px; block-size: 34px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; cursor: pointer; font-size: 1rem; color: var(--ink-2); }
.ed-map__vp { touch-action: pan-x pan-y; cursor: grab; overflow: auto; max-block-size: 65vh; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2) radial-gradient(var(--line) 1px, transparent 1px) 0 0 / 18px 18px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ed-map { display: block; margin-inline: auto; max-inline-size: none; } /* the site reset caps svg at 100%, which squashed zoom to height only */
.ed-e { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: .55; }
.ed-e.is-off { opacity: .22; }
.ed-e.is-on { stroke: var(--accent); stroke-width: 4; opacity: 1; }
.ed-arr { fill: var(--muted); }
.ed-arr--on { fill: var(--ink-2); }
/* answer chips: one per branch, just above the box it leads to */
.ed-c { overflow: visible; }
.ed-c__w { block-size: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ed-c__w span { display: inline-block; max-inline-size: 100%; padding: 2px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: 600 11.5px/1.35 var(--ed-font); color: var(--ink-2); text-align: center; overflow-wrap: anywhere; cursor: pointer; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.ed-c__w b { margin-inline-start: 5px; font-weight: 800; }
.ed-c.is-on span { background: var(--c); border-color: var(--c); color: #fff; font-weight: 800; }
.ed-c.is-off span { color: var(--muted); background: var(--surface-2); box-shadow: none; }
.ed-c__w span:hover { border-color: var(--accent); }
.ed-legend { font-size: var(--fs-xs); color: var(--muted); }
.ed-legend > summary { cursor: pointer; inline-size: max-content; }
.ed-legend > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-block-start: 6px; }
.ed-legend p { flex-basis: 100%; margin: 2px 0 0; line-height: 1.8; }
.ed-lg { padding: 2px 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; }
.ed-lg--q { border-radius: 6px; }
.ed-lg--q::before { content: "◆ "; color: var(--accent); }
.ed-lg--a { border-radius: 99px; background: var(--accent-soft); border-color: var(--accent-line); }
.ed-lg--a[data-u="immediate"] { background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.ed-lg--a[data-u="urgent"] { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.ed-lg--c { border-radius: 10px; font-size: 11px; }
.ed-lg--c b { color: #fff; background: var(--ok); border-radius: 6px; padding: 0 5px; margin-inline-start: 4px; }
.ed-v { --c: var(--accent); cursor: pointer; outline: none; }
.ed-v rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; transition: opacity .2s; }
.ed-v.is-on rect { stroke: var(--c); stroke-width: 3; }
.ed-v--action rect { fill: var(--accent-soft); stroke: var(--accent-line); }
.ed-v--action[data-u="immediate"] rect { fill: var(--err-soft); stroke: color-mix(in srgb, var(--err) 45%, transparent); }
.ed-v--action[data-u="urgent"] rect { fill: var(--warn-soft); stroke: color-mix(in srgb, var(--warn) 45%, transparent); }
.ed-v--action.is-on rect { stroke: var(--ink-2); stroke-width: 2.5; }
.ed-v.is-off { opacity: .5; }
.ed-v.is-cur rect { stroke: var(--accent); stroke-width: 4; animation: ed-cur 1.3s ease-in-out infinite; }
.ed-v--action.is-cur rect { stroke: var(--ok); }
@keyframes ed-cur { 50% { stroke-opacity: .35; } }
.ed-v:hover rect, .ed-v:focus-visible rect { stroke: var(--accent); stroke-width: 3; }
.ed-v__dia { fill: var(--c); }
.ed-v:not(.is-on) .ed-v__dia { fill: var(--muted); }
.ed-v__l { block-size: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 13px/1.4 var(--ed-font); color: var(--ink); overflow-wrap: anywhere; hyphens: auto; }

/* path view */
.ed-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ed-p { --c: var(--line); position: relative; display: grid; gap: 4px; padding-inline-start: 22px; padding-block-end: 16px; }
.ed-p::before { content: ""; position: absolute; inset-inline-start: 7px; inset-block: 18px 0; inline-size: 3px; border-radius: 3px; background: var(--c); }
.ed-p:last-child::before { display: none; }
.ed-p::after { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 8px; inline-size: 13px; block-size: 13px; transform: rotate(45deg); border-radius: 2px; background: var(--c); }
.ed-p--do::after { transform: none; border-radius: 50%; background: var(--accent); }
.ed-p--do[data-u="immediate"]::after { background: var(--err); }
.ed-p--do { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ed-p--ask::after { background: var(--surface); border: 2px dashed var(--accent); box-sizing: border-box; }
.ed-p__box { justify-self: start; max-inline-size: 100%; border: 1.5px solid var(--c); border-radius: 10px; background: var(--surface); padding: 6px 12px; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); cursor: pointer; text-align: start; }
.ed-p--do .ed-p__box { border-radius: 99px; border-color: var(--accent-line); background: var(--accent-soft); }
.ed-p__a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.ed-p__a > strong { color: var(--ink); }
.ed-p__alt { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-stub { border: 1px dashed var(--line); background: none; border-radius: 12px; padding: 2px 10px; text-align: start; overflow-wrap: anywhere; max-inline-size: 100%; font: inherit; font-size: var(--fs-xs); color: var(--muted); cursor: pointer; }
.ed-stub:hover { border-color: var(--accent); color: var(--accent); }
.ed-by { font-size: var(--fs-xs); font-weight: 700; border-radius: 99px; padding: 0 8px; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.ed-by--you { background: var(--accent); color: #fff; }
.ed-msg--ans { justify-self: end; background: var(--surface-2); border-color: var(--line); border-radius: var(--r) var(--r) 4px var(--r); grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: 6px; }
.ed-msg--ans p { line-height: 1.6; font-size: var(--fs-sm); }
.ed-stale { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 12px; border-radius: var(--r-sm); background: var(--warn-soft); font-size: var(--fs-sm); font-weight: 600; }

/* bottom sheet for a node or an action */
.ed-sheet { border: 0; padding: 18px; border-radius: var(--r-lg); inline-size: min(560px, calc(100vw - 24px)); max-block-size: 85vh; box-shadow: var(--shadow-lg); color: var(--ink); background: var(--surface); }
.ed-sheet::backdrop { background: var(--scrim); }
.ed-sheet h3 { margin: 0 0 8px; padding-inline-end: 36px; font-size: var(--fs-md); }
.ed-sheet p { margin: 0 0 10px; line-height: 1.8; font-size: var(--fs-sm); }
.ed-sheet__x { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; }
.ed-sheet__opts { display: grid; gap: 8px; margin-block-end: 10px; }
.ed-sheet__opts .ed-opt { flex-direction: column; align-items: stretch; }
.ed-sheet__opts .ed-opt > span { -webkit-line-clamp: unset; }
.ed-sheet__opts small { color: var(--muted); font-weight: 400; }
.ed-sheet__bar { display: flex; align-items: center; gap: 6px; }
.ed-sheet__bar i { display: block; block-size: 8px; border-radius: 99px; }
.ed-sheet__bar b { font-size: var(--fs-xs); }
.ed-sheet > div > .ed-sheet__bar { margin-block-end: 12px; }
.ed-sheet > div > .ed-sheet__bar i { block-size: 12px; max-inline-size: calc(100% - 50px); }
.ed-ro, .ed-why { border-radius: var(--r-sm); padding: 10px 12px; margin-block-end: 10px; background: var(--surface-2); }
.ed-ro { background: var(--accent-soft); }
.ed-ro.is-flag { background: var(--err-soft); border-inline-start: 4px solid var(--err); }
.ed-ro b, .ed-why b { display: block; font-size: var(--fs-xs); color: var(--ink-2); margin-block-end: 4px; }
.ed-ro.is-flag b { color: var(--err); }
.ed-ro p, .ed-why p { margin: 0; line-height: 1.7; }
.ed-sheet .btn { margin-block-end: 10px; }

/* patient files */
.ed-cases__bar { display: flex; gap: 8px; align-items: center; margin-block-end: 14px; }
.ed-cases__bar .input { flex: 1; }
[data-ed-cases] { display: grid; gap: 18px; }
.ed-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ed-case { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; background: var(--surface); }
.ed-case.is-cur { border-color: var(--accent); }
.ed-case__label { border: 0; border-block-end: 1px dashed var(--line); background: none; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); padding: 4px 2px; min-inline-size: 0; }
.ed-case__label:focus { outline: none; border-block-end-color: var(--accent); }
.ed-case__main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-block-size: 40px; border: 0; background: none; font: inherit; font-size: var(--fs-sm); color: var(--ink); text-align: start; cursor: pointer; min-inline-size: 0; }
.ed-case__main > span:first-child { overflow-wrap: anywhere; max-inline-size: 100%; }
.ed-settings { margin-block-start: 22px; display: grid; gap: 8px; padding: 12px 14px; }
.ed-set { display: grid; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.ed-set input { accent-color: var(--accent); }
.ed-settings p { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-danger { color: var(--err); }
[data-armed] { background: var(--err) !important; color: #fff !important; }
.ed-srcs { margin-block-start: 8px; }
.ed-srcs > summary { cursor: pointer; color: var(--ink-2); }
.ed-src { margin: 6px 0 0; padding-inline-start: 22px; font-size: var(--fs-xs); color: var(--ink-2); display: grid; gap: 6px; text-align: left; overflow-wrap: anywhere; }
.ed-others { display: grid; gap: 10px; }
.ed-others__list { display: grid; gap: 6px; }
.ed-cand { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: start; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 12px; cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--ink); }
.ed-cand:hover:not([disabled]) { border-color: var(--accent); }
.ed-cand[disabled] { opacity: .6; cursor: default; }
.ed-meta { margin: 0; text-align: end; }
.ed-list { display: grid; gap: 22px; margin-block-start: 16px; }
.ed-cat { display: grid; gap: 8px; }
.ed-lib { padding: 10px 14px; display: grid; gap: 10px; }
.ed-lib > summary { cursor: pointer; display: grid; gap: 2px; font-weight: 700; }
.ed-lib > summary small { font-weight: 400; color: var(--muted); }
.ed-lib > p { margin: 0; color: var(--ink-2); }
.ed-lib > .btn { justify-self: start; }
.ed-dlg { border: 0; border-radius: var(--r-lg); padding: 22px; max-inline-size: min(520px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); color: var(--ink); }
.ed-dlg::backdrop { background: var(--scrim); }
.ed-dlg form { display: grid; gap: 12px; }
.ed-dlg h2, .ed-dlg p { margin: 0; line-height: 1.9; }
.ed-dlg__bar { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 640px) {
  .ed-compose__bar .ed-grow { flex-basis: 100%; block-size: 0; }
  .ed-compose__bar [data-ed-send] { flex: 1; min-block-size: 44px; }
  .ed-msg { max-inline-size: 100%; }
  .ed-alg { flex: 1 1 100%; }
  .ed-sheet { margin: auto 0 0; inline-size: 100vw; max-inline-size: 100vw; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-block-end: max(18px, env(safe-area-inset-bottom)); }
  .ed-case { grid-template-columns: minmax(0, 1fr) auto; }
  .ed-case__main { grid-column: 1 / -1; grid-row: 2; }
  .ed-map__vp { max-block-size: 58vh; }
}
/* Wide screens: the case is a horizontal band above the results (thread scrolls sideways, composer beside it);
   the map takes most of the width, the chart the rest, or all of it when the chart is hidden. */
@media (min-width: 1100px) {
  .ed-grid { grid-template-columns: minmax(280px, 1fr) minmax(0, 2.2fr); }
  .ed:has(.ed-out:not(:empty)) .ed-conv { max-inline-size: none; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: start; }
  .ed:has(.ed-out:not(:empty)) .ed-bandbar, .ed:has(.ed-out:not(:empty)) .ed-status { grid-column: 1 / -1; }
  .ed:has(.ed-out:not(:empty)) .ed-thread { grid-auto-flow: column; grid-auto-columns: min(440px, 80%); overflow-x: auto; max-block-size: 260px; align-items: start; padding-block-end: 4px; scroll-snap-type: x proximity; }
  .ed:has(.ed-out:not(:empty)) .ed-thread > * { max-block-size: 250px; overflow: auto; scroll-snap-align: end; }
  .ed:has(.ed-out:not(:empty)) .ed-msg { max-inline-size: 100%; }
}
.ed-grid.no-dx { grid-template-columns: minmax(0, 1fr); }
.ed-fold { justify-self: start; border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 4px 14px; font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); cursor: pointer; min-block-size: 32px; scroll-margin-top: calc(var(--topbar-h, 64px) + 8px); }
.ed-folded .ed-conv :is(.ed-thread, .ed-compose) { display: none; }
.ed-bandbar { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-bandbar:not(:has(button:not([hidden]))) { display: none; }
.ed-fold--new { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.ed-dxhide { inline-size: 30px; block-size: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; flex: none; }
[dir="rtl"] .ed-dxhide { transform: scaleX(-1); }
/* the slide tab: a slim vertical handle where the list was (a bar across the top on phones) */
.ed-dxtab { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--fs-xs); font-weight: 800; padding: 8px 12px; cursor: pointer; min-block-size: 40px; box-shadow: var(--shadow); }
.ed-dxtab:hover { border-color: var(--accent); color: var(--accent); }
.ed-dxtab b { color: var(--err); }
.ed-dxtab.is-flag { border-color: color-mix(in srgb, var(--err) 50%, var(--line)); }
.ed-dxtab i { font-style: normal; font-size: 1.1rem; }
[dir="rtl"] .ed-dxtab i, .ed [dir="rtl"] .ed-dxtab i { transform: scaleX(-1); }
@media (min-width: 701px) {
  .ed-grid.has-tab { grid-template-columns: auto minmax(0, 1fr); }
  .ed-grid.has-tab > .ed-dxtab { flex-direction: column; align-self: start; padding: 14px 8px; min-block-size: 120px; }
}
.ed-flow.is-max > .ed-dxtab { position: absolute; z-index: 1; top: 40%; right: 0; left: auto; flex-direction: column; padding: 14px 8px; border-radius: var(--r-sm) 0 0 var(--r-sm); }
[dir="ltr"] .ed-flow.is-max > .ed-dxtab { left: 0; right: auto; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ed-flow.is-max > .ed-drawer { grid-area: auto; }
.ed-maxhost:fullscreen { background: var(--bg); }
.ed-maxhost::backdrop { background: var(--bg); }

/* Full screen: the map over the whole page, the question or final card docked under it, the chart as a drawer */
html.ed-lock, html.ed-lock body { overflow: hidden; }
.ed-flow.is-max { position: fixed; inset: 0; z-index: 90; margin: 0; border-radius: 0; background: var(--bg, var(--surface)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)); }
.ed-flow.is-max .ed-flow__bar { flex-wrap: nowrap; overflow-x: auto; }
.ed-flow__t { margin: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 30vw; }
.ed-flow.is-max .ed-map__vp, .ed-flow.is-max .ed-pathvp { max-block-size: none; block-size: 100%; min-block-size: 0; overflow: auto; }
.ed-flow.is-max > .ed-legend { display: none; }
.ed-unmax { font-weight: 800; color: var(--err) !important; }
.ed-zoom .ed-zpct { inline-size: auto; min-inline-size: 52px; padding-inline: 6px; font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; }
.ed-zoom .ed-hand[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ed-map__vp.is-hand, .ed-map__vp.is-hand * { cursor: grab !important; }
.ed-map__vp.is-hand { touch-action: none; }
.ed-map__vp.is-drag, .ed-map__vp.is-drag * { cursor: grabbing !important; user-select: none; }
.ed-strip { font-size: var(--fs-xs); color: var(--ink-2); background: var(--accent-soft); border-radius: var(--r-sm); padding: 4px 10px; }
.ed-strip summary { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; list-style: none; }
.ed-strip[open] summary { display: none; }
.ed-strip p { margin: 0; max-block-size: 30vh; overflow: auto; white-space: pre-wrap; }
.ed-dock { max-block-size: 45vh; overflow: auto; }
.ed-dock .ed-q { padding: 8px 10px; gap: 6px; }
.ed-dock .ed-q__top h4 { font-size: var(--fs-sm); }
.ed-dock .ed-q__opts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); overflow-x: auto; }
.ed-dock .ed-opt { min-block-size: 44px; padding: 6px 10px; }
.ed-dock .ed-opt__t > span { display: none; }
.ed-dockfin { border: 2px solid var(--c); border-radius: var(--r); background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.ed-dockfin > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; min-block-size: 44px; }
.ed-dockfin > summary::-webkit-details-marker { display: none; }
.ed-dockfin > summary b { overflow-wrap: anywhere; }
.ed-dockfin[open] > summary { border-block-end: 1px dashed var(--line); }
.ed-dockfin > .ed-final { border: 0; background: none; animation: none; }
.ed-dockfin > .ed-final > .ed-final__top, .ed-dockfin > .ed-final > .ed-final__l { display: none; }
.ed-dock > * { margin: 0; }
.ed-scrim { position: absolute; inset: 0; z-index: 1; border: 0; background: rgb(0 0 0 / .32); cursor: pointer; }
.ed-drawer { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 2; inline-size: min(440px, 88vw); overflow: auto; background: var(--bg, var(--surface)); box-shadow: var(--shadow-lg, 0 8px 40px rgb(0 0 0 / .3)); padding: 12px; transform: translateX(105%); visibility: hidden; transition: transform .28s var(--ease), visibility 0s .28s; }
[dir="ltr"] .ed-drawer { transform: translateX(-105%); }
.ed-drawer.is-open { transform: none; visibility: visible; transition: transform .28s var(--ease); }

/* phones: the next step, always one tap away */
.ed-next { display: none; }
@media (max-width: 700px) {
  .ed-next { position: sticky; inset-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 8px); z-index: 20; display: flex; align-items: center; gap: 10px; inline-size: calc(100% - 64px); margin-block-start: 10px; padding: 10px 14px; border: 2px solid var(--c); border-radius: var(--r); background: color-mix(in srgb, var(--c) 12%, var(--surface)); box-shadow: var(--shadow); font: inherit; color: var(--ink); text-align: start; cursor: pointer; transition: opacity .2s, transform .2s; }
  .ed-next b { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
  .ed-next.is-hid { opacity: 0; transform: translateY(12px); pointer-events: none; }
}

/* ED Navigator: motion when Jev's answers arrive. Only what is new animates (is-reveal / is-new);
   bars glide from the value last shown (--w0) to the new one. Off under reduced motion. */
@keyframes ed-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes ed-pop { from { opacity: 0; transform: scale(.95); } }
@keyframes ed-fade { from { opacity: 0; } }
@keyframes ed-bar { from { inline-size: var(--w0, 0%); } }
@keyframes ed-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ed-glow { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--ok)) 50%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .ed-msg.is-new { animation: ed-rise .35s var(--ease) backwards; }
  .ed-algs.is-reveal > .ed-alg { animation: ed-rise .45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
  .ed-algs.is-reveal .ed-alg > i { animation: ed-bar .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms + 200ms); }
  .ed-algs.is-reveal .ed-alg > b { animation: ed-fade .4s backwards; animation-delay: calc(var(--i, 0) * 80ms + 500ms); }

  .ed-pane.is-reveal > * { animation: ed-rise .5s var(--ease) backwards; }
  .ed-pane.is-reveal > :nth-child(2) { animation-delay: 70ms; }
  .ed-pane.is-reveal > :nth-child(3) { animation-delay: 140ms; }
  .ed-pane.is-reveal > :nth-child(4) { animation-delay: 210ms; }
  .ed-pane.is-reveal > :nth-child(n+5) { animation-delay: 280ms; }
  .ed-pane.is-reveal .ed-pane__head .ed-pill { animation: ed-pop .4s var(--ease) backwards .35s; }

  /* bars: every redraw glides from the last value; on reveal they also stagger in */
  .ed-dx__t > i { animation: ed-bar .9s var(--ease) backwards; }
  .ed-pane.is-reveal .ed-dx__t > i { animation-delay: calc(var(--i, 0) * 45ms + 250ms); }
  .ed-pane.is-reveal .ed-dx__t > b { animation: ed-fade .4s backwards; animation-delay: calc(var(--i, 0) * 45ms + 650ms); }
  .ed-pane.is-reveal .ed-dx__g { animation: ed-fade .4s backwards .2s; }

  /* the walked path draws itself layer by layer */
  .ed-pane.is-reveal .ed-e.is-on { stroke-dasharray: 1; animation: ed-draw .45s ease-out backwards; animation-delay: calc(var(--i, 0) * 140ms + 300ms); }
  .ed-pane.is-reveal .ed-v.is-on, .ed-pane.is-reveal .ed-c.is-on { animation: ed-fade .4s backwards; animation-delay: calc(var(--i, 0) * 140ms + 250ms); }
  .ed-pane.is-reveal .ed-path > li { animation: ed-rise .4s var(--ease) backwards; }
  .ed-pane.is-reveal .ed-path > li:nth-child(2) { animation-delay: 90ms; }
  .ed-pane.is-reveal .ed-path > li:nth-child(3) { animation-delay: 180ms; }
  .ed-pane.is-reveal .ed-path > li:nth-child(4) { animation-delay: 270ms; }
  .ed-pane.is-reveal .ed-path > li:nth-child(n+5) { animation-delay: 360ms; }

  /* the next question or the final step */
  .ed-q.is-new { animation: ed-pop .45s var(--ease) backwards; }
  .ed-q.is-new .ed-opt { animation: ed-rise .35s var(--ease) backwards .15s; }
  .ed-q.is-new .ed-opt:nth-child(2) { animation-delay: .22s; }
  .ed-q.is-new .ed-opt:nth-child(3) { animation-delay: .29s; }
  .ed-q.is-new .ed-opt:nth-child(n+4) { animation-delay: .36s; }
  .ed-final.is-new { animation: ed-pop .5s var(--ease) backwards, ed-glow 1.1s ease-out .5s 2; }
}