/* ==========================================================================
   seiflden.com v3 - The Saudi Scale Playbook 2.0 (playbook_{en,ar}.html)
   Loaded after pub.css and doctrine.css (the shared series system).
   Playbook-only parts: cover motif, stage and gate cards, the seven tools'
   row layouts, seven diagrams, the Expansion Sequencer and its print pack.
   ========================================================================== */

.sar { display: inline-block; width: .74em; height: .82em; vertical-align: -.08em; fill: currentColor; }

/* ---------- Cover: the seven-stage rail with city tracks ---------- */
.plate--pb { background: radial-gradient(70% 60% at 88% 8%, var(--glow), transparent 65%), var(--s1); }
html[dir="rtl"] .plate--pb { background: radial-gradient(70% 60% at 12% 8%, var(--glow), transparent 65%), var(--s1); }
.pmotif .mcol { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.pmotif .mn { fill: var(--text-3); font: 700 15px/1 "Inter", "Inter Fallback", sans-serif; }
.pmotif .mg { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1.2; }
.pmotif .mt { stroke: var(--border-strong); stroke-width: 1.4; }
.pmotif .mnode { fill: var(--border-strong); }
.pmotif .mend { fill: var(--s1); stroke: var(--border-strong); stroke-width: 1.6; }
.pmotif .mblock { stroke: var(--danger); stroke-width: 2.4; stroke-linecap: round; opacity: .7; }
.pmotif .on.mt { stroke: var(--accent); stroke-width: 2.6; }
.pmotif .on.mnode { fill: var(--accent); }
.pmotif .on.mend { fill: var(--accent); stroke: var(--accent); }
.pmotif .mcol, .pmotif .mt { transition: stroke var(--t-slow) var(--ease); }
html[data-path="s"] .pmotif .mcol[data-p~="s"], html[data-path="m"] .pmotif .mcol[data-p~="m"],
html[data-path="l"] .pmotif .mcol[data-p~="l"], html[data-path="gcc"] .pmotif .mcol[data-p~="gcc"] {
  stroke: var(--accent); stroke-width: 2; stroke-dasharray: none;
}
html[data-path] .pmotif .on.mt { stroke: var(--border-strong); stroke-width: 1.4; }
html[data-path] .pmotif .on.mnode { fill: var(--border-strong); }
html[data-path] .pmotif .on.mend { fill: var(--s1); stroke: var(--border-strong); }
.plate-series { margin: -8px 0 24px; }
.plate-series a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 6px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg);
  color: var(--text-1); text-decoration: none; font-size: .9375rem; font-weight: 500; line-height: 1.35;
}
html[dir="rtl"] .plate-series a { padding: 6px 6px 6px 16px; }
.plate-series a:hover { border-color: var(--accent-border); }
.ps-vol { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); font-size: .8125rem; font-weight: 700; }
.ps-cta { color: var(--accent-text); font-weight: 600; white-space: nowrap; }
.plate--pb .plate-idx a { grid-template-columns: 2.25rem minmax(0, 1fr); }

/* Reading paths (playbook ids: s, m, l, gcc) */
html[data-path="s"] .toc li[data-paths~="s"] a, html[data-path="m"] .toc li[data-paths~="m"] a,
html[data-path="l"] .toc li[data-paths~="l"] a, html[data-path="gcc"] .toc li[data-paths~="gcc"] a { color: var(--text-1); font-weight: 600; }
html[data-path="s"] .toc li[data-paths~="s"] .toc-n, html[data-path="m"] .toc li[data-paths~="m"] .toc-n,
html[data-path="l"] .toc li[data-paths~="l"] .toc-n, html[data-path="gcc"] .toc li[data-paths~="gcc"] .toc-n { color: var(--accent-text); }

/* ---------- Front matter ---------- */
.series-card {
  display: flex; align-items: center; gap: 16px; margin: 14px 0 0; padding: 14px 18px;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--s1);
  color: var(--text-1); text-decoration: none;
}
.series-card:hover { border-color: var(--accent-border); }
.series-card:hover .sc-t { color: var(--accent-text); }
.sc-vol {
  flex: none; display: grid; place-items: center; width: 48px; height: 56px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border-strong);
  font: 700 1.75rem/1 "Inter", "Inter Fallback", sans-serif; color: var(--accent-text);
}
.sc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-k { color: var(--text-2); font-size: .8125rem; font-weight: 600; }
.sc-t { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.sc-u { color: var(--text-3); font-size: .8125rem; overflow-wrap: anywhere; }
.sc-go { flex: none; width: 20px; height: 20px; color: var(--accent-text); }
html[dir="rtl"] .sc-go, html[dir="rtl"] .doclink .t-chev { transform: scaleX(-1); }
.d-doc p.note { color: var(--text-2); font-size: .9375em; }
.d-doc p.lbl { margin-block-end: .4em; color: var(--text-1); font-weight: 700; }
.symlist { list-style: none; padding-inline-start: 0 !important; border-block-start: var(--hair); }
.symlist li { margin: 0; padding: 8px 0; border-block-end: var(--hair); }
.d-doc a.tlink { font-weight: 600; text-decoration: underline dotted; text-underline-offset: .25em; }
.d-doc a.dlink { white-space: nowrap; }
.resol { margin: 1.4em 0; padding: 18px 20px; border: 1px solid var(--border-strong); border-inline-start: 4px solid var(--text-1); border-radius: 4px; background: var(--s1); }
.resol p { margin: 0 !important; color: var(--text-1); font-size: 1.03em; }
.resol .resol-l { margin-block-end: 8px !important; color: var(--text-2); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[lang="ar"] .resol .resol-l { letter-spacing: 0; font-size: .875rem; }
/* Verify note: regulatory process only */
.co--verify { padding: 14px 18px; background: var(--s2); border: 1px dashed var(--info); border-radius: var(--r); }
.co--verify .co-l { color: var(--info); }
.co--verify .co-b { color: var(--text-1); font-size: .9375rem; }

/* ---------- Section 1: stage cards ---------- */
.stages { list-style: none; margin: 1.4em 0 !important; padding: 0 !important; counter-reset: none; border-inline-start: 2px solid var(--border-strong); }
.stg { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 14px; margin: 0 !important; padding: 0 0 22px; }
.stg-n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-inline-start: -1.2rem;
  border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); color: var(--accent-text);
  font: 700 1rem/1 "Inter", "Inter Fallback", sans-serif;
}
.stg-b { min-width: 0; }
.stg-h { margin: .15em 0 .2em; font-size: 1.125rem; line-height: 1.35; }
html[lang="ar"] .stg-h { line-height: 1.6; }
.stg-q { margin: 0 0 .5em !important; color: var(--text-1); }
.stg-g, .stg-t { margin: 0 0 .3em !important; color: var(--text-2); font-size: .9375em; }
.stg-k { display: inline-block; margin-inline-end: 6px; color: var(--text-3); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html[lang="ar"] .stg-k { letter-spacing: 0; font-size: .8125rem; }
.stg-go { margin: .4em 0 0 !important; font-size: .875rem; }
.stg-go a { font-weight: 600; text-decoration: none; }
.stg-go a:hover { text-decoration: underline; }

/* ---------- Section 2: gate cards ---------- */
.gate { margin: 40px 0 8px; padding-block-start: 22px; border-block-start: 1px solid var(--border-strong); }
.gate-top { display: flex; align-items: center; gap: 12px; margin-block-end: 6px; }
.gate-badge {
  display: inline-flex; align-items: baseline; justify-content: center; min-width: 3.1rem; padding: 6px 10px; border-radius: 10px;
  background: var(--accent-fill); color: var(--on-accent); font: 700 1.25rem/1 "Inter", "Inter Fallback", sans-serif; direction: ltr;
}
.gate-badge span { font-size: .8em; margin-inline-end: 1px; opacity: .85; }
.gate-st { margin: 0 !important; color: var(--text-2); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html[lang="ar"] .gate-st { letter-spacing: 0; font-size: .875rem; }
.gate-h { margin: .2em 0 .8em; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
html[lang="ar"] .gate-h { line-height: 1.55; letter-spacing: 0; }
.gf { margin: 0 0 1.1em; }
.gf-l { margin: 0 0 .35em !important; color: var(--accent-text); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[lang="ar"] .gf-l { letter-spacing: 0; font-size: .875rem; }
.gf--obj p:not(.gf-l) { color: var(--text-1); font-size: 1.0625em; font-weight: 500; }
.gf--met p:not(.gf-l), .gf--met li { color: var(--text-2); font-size: .9375em; }
.must { list-style: none; padding-inline-start: 0 !important; }
.must li { position: relative; padding-inline-start: 28px; }
.must li::before {
  content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .55em; width: 13px; height: 7px;
  border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg);
}
.gf--tool { padding: 12px 16px; border-radius: var(--r); background: var(--s1); border: var(--hair); }
.gf--tool p { margin: 0 !important; }
.gate .co { margin-block: 1em; }

/* Doctrine companion tool link card (Gate 7) */
.doclink {
  display: flex; align-items: center; gap: 14px; margin: 1.4em 0; padding: 14px 18px; border: 1px dashed var(--accent-border);
  border-radius: var(--r-lg); background: var(--accent-soft); color: var(--text-1); text-decoration: none !important; line-height: 1.5;
}
.doclink:hover { border-style: solid; }
.doclink .t-name { color: var(--text-1); }
.doclink-p { color: var(--text-2); font-size: .875rem; }
.doclink-go { color: var(--accent-text); font-size: .875rem; font-weight: 700; }

/* ---------- Tables ---------- */
.tbl--wide { overflow-x: auto; overscroll-behavior-x: contain; }
.tbl--wide:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.tbl--wide table { min-width: 880px; }
.tbl--wide th, .tbl--wide td { font-size: .8125rem; }
@container (max-width: 559px) { .tbl--wide table { min-width: 0; } }
.tbl--sheet td { height: 34px; }
@container (max-width: 559px) { .tbl--sheet tbody { display: none; } .tbl--sheet thead { display: table-header-group; } .tbl--sheet table { display: table; } .tbl--sheet tr { display: table-row; padding: 0; border: 0; background: none; } .tbl--sheet th { display: block; padding: 6px 0; border-block-end: var(--hair); } }
.tbl thead th sub { text-transform: none; }
.tbl--weeks .wk-key > * { background: var(--accent-soft); }
.tbl--weeks .wk-key th { color: var(--accent-text); }

/* Before-day-1 checklist */
.precheck { list-style: none; padding: 0 !important; border-block-start: var(--hair); }
.precheck li { margin: 0; border-block-end: var(--hair); }
.precheck .ck { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; cursor: pointer; }
.precheck input { flex: none; width: 24px; height: 24px; margin: .25em 0 0; accent-color: var(--accent-fill); cursor: pointer; }
.precheck input:checked + .ck-t { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }

/* ---------- Tools: playbook layouts on the Doctrine's tool card ---------- */
.t-exrow { margin: 0 !important; }
.t-ex { gap: 6px; min-height: 36px; padding-inline: 10px; border: 1px dashed var(--border-strong); }
.t-ex .icon { width: 16px; height: 16px; }
.fs--c2, .fs--c3 { display: grid; gap: 14px; }
@container (min-width: 520px) {
  .fs--c2 { grid-template-columns: 1fr 1fr; }
  .fs--c3 { grid-template-columns: 1fr 1fr 1fr; }
  .fs--c2 > legend, .fs--c3 > legend, .fs--c2 > .fs-hint, .fs--c3 > .fs-hint, .fs--c2 > .fld--ck { grid-column: 1 / -1; }
}
.fs-hint { margin-block: -4px 4px !important; }
.fld--ck .ckl, .ckl { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-block: 8px; cursor: pointer; color: var(--text-1); font-size: .9375rem; line-height: 1.5; }
.ckl input { flex: none; width: 24px; height: 24px; margin: .1em 0 0; accent-color: var(--accent-fill); cursor: pointer; }
.fld--ck .hint { margin-block-start: 0 !important; }
.inp--sel { position: relative; }
.inp select {
  flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text-1); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.inp select:focus { outline: none; }
.inp select option { background: var(--s1); color: var(--text-1); }
.inp--s input { text-align: center !important; }
.t-verify { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; padding: 10px 14px; border: 1px dashed var(--info); border-radius: var(--r); background: var(--s2); color: var(--text-1); font-size: .875rem; line-height: 1.55; }
.t-verify .icon { flex: none; width: 18px; height: 18px; margin-block-start: 2px; color: var(--info); }
@container (min-width: 600px) { .t-verify { grid-column: 1 / -1; } }
/* Repeating rows (branches, units, cities) */
.fs--rows { gap: 10px; }
.rows { display: grid; gap: 10px; }
.row { position: relative; min-width: 0; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); }
.row-h { margin: 0 0 8px !important; padding-inline-end: 44px; color: var(--text-2); font-size: .8125rem; font-weight: 700; line-height: 1.6; }
.row-del {
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px; display: grid; place-items: center; width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer;
}
.row-del .icon { width: 16px; height: 16px; }
.row-del:hover { background: var(--s2); color: var(--danger); }
.row-del:disabled { opacity: .35; cursor: not-allowed; }
.row-f { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.row--c .row-f { grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); }
.row .fld label { font-size: .8125rem; }
.row .inp input { min-height: 40px; padding-inline: 10px; }
.row-add { justify-self: start; }
.row--city .row-f { grid-template-columns: 1fr; }
.fct-grid { display: grid; gap: 6px 12px; }
.fct { display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem minmax(6.5rem, 8rem); align-items: center; gap: 4px 8px; }
.fct .fct-n { margin: 0; font-size: .8125rem; line-height: 1.35; }
.fct .err { grid-column: 1 / -1; }
.fct .inp input { min-height: 38px; }
.fct .inp select { min-height: 38px; font-size: .8125rem; padding-inline: 8px; }
@container (min-width: 700px) { .fct-grid { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
/* Wide tools: form above results */
@container (min-width: 600px) {
  .tool--wide .t-body { grid-template-columns: minmax(0, 1fr); }
  .tool--wide .t-out { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .tool--wide .t-out .t-big, .tool--wide .t-out .chip, .tool--wide .t-out .t-act, .tool--wide .t-out .t-save { grid-column: 1; }
  .tool--wide .t-out .t-sec { grid-column: 2; grid-row: 1 / span 4; margin-block-start: 0; }
}
.t-x:empty { display: none; }
.t-x { min-width: 0; font-size: .875rem; }
.t-x ul { list-style: none; margin: 0 !important; padding: 0 !important; border-block-start: var(--hair); }
.t-x li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; padding: 7px 0; border-block-end: var(--hair); color: var(--text-2); }
.t-x li b { color: var(--text-1); font-weight: 600; }
.t-x .xs { font-weight: 700; font-variant-numeric: tabular-nums; }
.t-x .x-ok { color: var(--accent-text); } .t-x .x-watch { color: var(--warning); } .t-x .x-act { color: var(--danger); }
.t-x table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.t-x th, .t-x td { padding: 7px 8px; border-block-end: var(--hair); text-align: start; vertical-align: top; }
.t-x thead th { color: var(--text-2); font-size: .75rem; }
.t-x tbody tr.is-ko { color: var(--text-3); }
.t-x .x-flip { margin: 8px 0 0 !important; color: var(--text-2); }
.t-x .x-h { margin: 0 0 6px !important; color: var(--text-2); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html[lang="ar"] .t-x .x-h { letter-spacing: 0; font-size: .8125rem; }

/* ---------- Diagrams: playbook vocabulary (tokens only; theme-aware) ---------- */
.fig--sequence .dg { max-width: 420px; }
.dg .t2 { fill: var(--text-2); }
.dg .rail { stroke: var(--border-strong); stroke-width: 2; }
.dg .sn { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.dg .gd { fill: var(--bg); stroke: var(--accent); stroke-width: 1.6; }
.dg .nobus { stroke: var(--danger); stroke-width: 1.3; stroke-dasharray: 4 4; fill: none; }
.dg .brk { stroke: var(--border-strong); stroke-width: 1.2; }
.dg .bar.bd { fill: var(--accent); }
.dg .bar.bh { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.dg .bar.bs { fill: var(--danger-soft); stroke: var(--danger); stroke-width: 1.2; }
.dg .curve.st { stroke-width: 2.5; stroke: var(--text-1); fill: none; }
.dg .curve2 { fill: none; stroke: var(--danger); stroke-width: 2; stroke-dasharray: 6 4; }
.dg .zr { fill: var(--danger-soft); }
.dg .za { fill: var(--warning-soft); }
.dg .zg { fill: var(--accent-soft); }
.dg .sw { stroke: var(--border-strong); }
.dg .halo { paint-order: stroke; stroke: var(--s1); stroke-width: 4px; stroke-linejoin: round; }
.dg .thl { stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.dg .med { stroke: var(--accent-text); stroke-width: 2; }
.dg .grid { stroke: var(--border); stroke-width: 1; }
.dg .dot.low { fill: var(--danger); }
.dg .dot2 { fill: var(--bg); stroke: var(--accent); stroke-width: 3; }
.dg .gline { stroke: var(--accent-text); stroke-width: 1.5; stroke-dasharray: 6 4; }
.dg .gbar { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.dg .fixl { stroke: var(--text-2); stroke-width: 2; }
.dg .seg { stroke-width: 1.2; }
.dg .seg.ws { fill: var(--accent-soft); stroke: var(--accent); }
.dg .seg.we { fill: var(--info-soft); stroke: var(--info); }
.dg .seg.wa { fill: var(--warning-soft); stroke: var(--warning); }
.dg .sarx { color: var(--text-2); }
.dg .sub { font-size: .75em; }

/* ==========================================================================
   Expansion Sequencer (signature instrument)
   ========================================================================== */
.seq {
  position: relative; margin: 2.4em 0 1em; padding: 22px 20px 20px; border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); background:
    linear-gradient(var(--s1), var(--s1)) padding-box,
    linear-gradient(135deg, var(--accent-border), var(--border-strong) 40%) border-box;
  border-color: transparent; font-size: 1rem; line-height: 1.55;
}
.seq-kick { display: flex; align-items: center; gap: 8px; margin: 0 0 4px !important; color: var(--accent-text); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[lang="ar"] .seq-kick { letter-spacing: 0; font-size: .875rem; }
.seq-kick .icon { width: 18px; height: 18px; }
.seq-title { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); line-height: 1.2; letter-spacing: -.02em; }
html[lang="ar"] .seq-title { line-height: 1.5; letter-spacing: 0; }
.seq-dek { margin: 6px 0 14px !important; color: var(--text-2); }
.seq-method { margin: 0 0 12px; border-block: var(--hair); }
.seq-method > summary { display: flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.no-js .seq-method > summary { pointer-events: none; }
.seq-method ol { margin: 4px 0 14px !important; font-size: .9375rem; }
.seq-method li { color: var(--text-2); }
.seq-method li strong { color: var(--text-1); }
.js .seq-sheet { display: none; }
.seq-h4 { margin: 22px 0 8px; font-size: 1rem; line-height: 1.4; }
.seq-empty { padding: 22px 18px; border: 1.5px dashed var(--border-strong); border-radius: var(--r); background: var(--bg); text-align: center; }
.seq-empty > p:first-child { max-width: 34em; margin: 0 auto 14px !important; color: var(--text-1); }
.seq-btns, .seq-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.seq-btns { justify-content: center; }
.seq-btns .icon, .seq-bar .icon { width: 16px; height: 16px; }
.seq-priv { margin: 12px 0 0 !important; color: var(--text-3); font-size: .8125rem; }
.seq-illus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px !important; padding: 10px 14px; border: 1.5px dashed var(--warning); border-radius: var(--r); background: var(--warning-soft); color: var(--text-1); font-size: .875rem; font-weight: 600; }
.seq-illus .stamp { margin: 0; }
.seq-live { display: block; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r); background: var(--bg); border: var(--hair); color: var(--text-1); font-size: .875rem; }
.seq-live:empty { display: none; }

/* The seven-stage rail: columns on wide containers, rows on narrow ones */
.rail7 { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.rail7 .st { position: relative; margin: 0; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: var(--hair); display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 8px; align-items: start; }
.st-h { display: flex; align-items: center; gap: 8px; margin: 0 !important; min-width: 0; color: var(--text-2); font-size: .75rem; font-weight: 700; line-height: 1.3; }
html[lang="ar"] .st-h { font-size: .8125rem; }
.st-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--text-1); font: 700 .75rem/1 "Inter", "Inter Fallback", sans-serif; }
.st.has .st-n { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.st-c { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.st-c li { margin: 0; }
@container (min-width: 620px) {
  .rail7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border: var(--hair); border-radius: 12px; overflow: hidden; background: var(--bg); }
  .rail7 .st { display: flex; flex-direction: column; gap: 8px; padding: 10px 6px 12px; border: 0; border-radius: 0; background: transparent; }
  .rail7 .st + .st { border-inline-start: 1px dashed var(--border-strong); }
  .rail7 .st + .st::before {
    content: ""; position: absolute; inset-block-start: 16px; inset-inline-start: -6px; width: 10px; height: 10px;
    background: var(--bg); border: 1.5px solid var(--border-strong); transform: rotate(45deg);
  }
  .st-h { flex-direction: column; align-items: center; text-align: center; min-height: 3.4em; }
  .st-c { flex-direction: column; align-items: stretch; }
  .rail7 .cchip { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; padding: 5px 6px; border-radius: 10px; text-align: center; }
  .rail7 .cchip .cc-n { white-space: normal; overflow-wrap: anywhere; }
}
.cchip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 10px 4px 8px;
  border: 1.5px solid transparent; border-radius: 999px; font: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.25; cursor: pointer;
  background: var(--s2); color: var(--text-1); text-align: start;
}
html[dir="rtl"] .cchip { padding: 4px 8px 4px 10px; }
.cchip .cc-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchip .cc-g { flex: none; font: 700 .6875rem/1 "Inter", "Inter Fallback", sans-serif; opacity: .9; }
.cchip .icon { flex: none; width: 14px; height: 14px; stroke-width: 2.6; }
.cchip[data-v="ok"] { background: var(--accent-soft); color: var(--accent-text); }
.cchip[data-v="watch"] { background: var(--warning-soft); color: var(--warning); }
.cchip[data-v="act"] { background: var(--danger-soft); color: var(--danger); }
.cchip[data-v="pend"] { background: var(--s2); color: var(--text-2); border-style: dashed; border-color: var(--border-strong); }
.cchip[aria-expanded="true"] { border-color: currentColor; }
.cchip.grp { border-radius: 8px; }
.seq-pop { margin: 8px 0 0; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg); font-size: .9375rem; }
.seq-pop h5 { margin: 0 0 4px; font-size: 1rem; }
.seq-pop p { margin: 0 0 6px !important; color: var(--text-2); }
.seq-pop ul { margin: 0 0 8px !important; padding-inline-start: 1.2em !important; color: var(--text-1); }
.seq-pop .pop-rule { padding: 8px 12px; border-inline-start: 3px solid var(--info); background: var(--info-soft); color: var(--text-1); }
.seq-tbl { margin: 0; }
.seq-tbl table { font-size: .8125rem; }
.sv { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.sv[data-v="ok"] { background: var(--accent-soft); color: var(--accent-text); }
.sv[data-v="watch"] { background: var(--warning-soft); color: var(--warning); }
.sv[data-v="act"] { background: var(--danger-soft); color: var(--danger); }
.sv[data-v="pend"] { background: var(--s2); color: var(--text-2); }
/* Editor */
.seq-panel { margin: 18px 0 0; border: var(--hair); border-radius: var(--r); background: var(--bg); }
.seq-panel > summary { display: flex; align-items: center; min-height: 48px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.seq-panel[open] > summary { border-block-end: var(--hair); }
.seq-panel > .seq-grid, .seq-panel > .seq-fs { margin: 12px 14px 14px; }
.seq-fs { min-width: 0; margin: 12px 14px 14px; padding: 0; border: 0; }
.seq-fs + .seq-fs { padding-block-start: 12px; border-block-start: var(--hair); }
.seq-fs > legend { margin-block-end: 8px; padding: 0; color: var(--text-2); font-size: .8125rem; font-weight: 700; }
.seq-grid { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.seq-grid--br { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.seq .fld label { font-size: .8125rem; }
.seq .inp input { min-height: 40px; padding-inline: 10px; font-size: .9375rem; }
.seq .hint { font-size: .75rem; }
.seq-cities { display: grid; gap: 14px; margin-block-start: 18px; }
.sq-city { min-width: 0; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg); }
.sq-lg { padding: 0 6px; font-size: 1rem; font-weight: 700; }
.sq-lg2 { padding: 0 6px; font-size: .875rem; font-weight: 700; color: var(--text-2); }
.sq-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-block-end: 10px; }
.sq-head > .fld { flex: 1 1 12rem; }
.sq-flags { display: flex; flex-wrap: wrap; gap: 0 16px; }
.sq-flags .ckl { min-height: 40px; font-size: .875rem; }
.sq-rm { min-width: 44px; }
.sq-rm .icon { width: 16px; height: 16px; }
.sq-tas { display: grid; gap: 12px; margin-block-end: 10px; }
.sq-ta { min-width: 0; margin: 0; padding: 10px 12px 12px; border: var(--hair); border-radius: var(--r); background: var(--s1); }
.sq-brs { display: grid; gap: 8px; margin-block-end: 8px; }
.sq-br { position: relative; padding: 8px 10px 10px; border: var(--hair); border-radius: 10px; background: var(--bg); }
.sq-bl { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px !important; color: var(--text-2); font-size: .8125rem; font-weight: 700; }
.sq-bl .row-del { position: static; }
.sq-cand { min-width: 0; margin: 10px 0 0; padding: 10px 12px 12px; border: 1px dashed var(--accent-border); border-radius: 10px; }
.sq-cand > legend { padding: 0 6px; color: var(--accent-text); font-size: .8125rem; font-weight: 700; }
.sq-out { margin: 8px 0 0 !important; font-size: .875rem; color: var(--text-1); }
.sq-out:empty { display: none; }
.sq-out b { font-weight: 700; }
.sq-cout { margin: 10px 0 0 !important; font-size: .875rem; }
.seq input[aria-invalid="true"] { color: var(--danger); }
.seq .inp:has(input[aria-invalid="true"]) { border-color: var(--danger); }

/* ---------- Print ---------- */
@media print {
  .seq { border: 0.5pt solid #000; background: none; padding: 4mm; break-inside: auto; }
  .seq-app, .t-exrow, .row-add, .row-del, .t-x, .doclink-go { display: none !important; }
  .seq-method > summary { display: none; }
  .seq-method ol { margin: 0 !important; }
  .js .seq-sheet, .seq-sheet { display: block !important; break-inside: avoid; }
  .tbl--wide { overflow: visible; }
  .tbl--wide table { min-width: 0; }
  .tbl--wide th, .tbl--wide td { font-size: 6.5pt; padding: 1.5mm; }
  .tbl--sheet td { height: 9mm; border: 0.5pt solid #999; }
  .tbl--sheet th { border: 0.5pt solid #999; }
  .stages { border: 0; }
  .stg { break-inside: avoid; }
  .stg-n { margin-inline-start: 0; border-color: #000; color: #000; }
  .plate--pb .plate-motif { width: 78mm; margin: 0; }
  .plate--pb .plate-in { row-gap: 4mm; }
  .plate--pb .plate-idx a { padding-block: 3pt; }
  .gate { break-before: auto; break-inside: auto; }
  .gate-top, .gate-h { break-after: avoid; }
  .gate-badge { background: none; color: #000; border: 1pt solid #000; }
  .gf--tool, .co--verify, .series-card, .resol, .doclink { background: none !important; border-color: #000; }
  .plate-series a { border-color: #000; }
  .ps-vol { background: none; color: #000; border: 0.75pt solid #000; }
  .pmotif .mt, .pmotif .mend, .pmotif .mg { stroke: #999; }
  .pmotif .on.mt, .pmotif .on.mend { stroke: #000; }
  .pmotif .on.mnode, .pmotif .on.mend { fill: #000; }
  .precheck input { display: none !important; }
  .precheck .ck::before { content: ""; flex: none; width: 3.5mm; height: 3.5mm; margin-top: 1mm; border: 0.75pt solid #000; }
  .tbl--weeks .wk-key > * { background: #eee !important; }
  .dg .zg, .dg .bar.bd, .dg .seg.ws, .dg .gbar { fill: url(#hatch2); }
  .dg .zr, .dg .bar.bs, .dg .seg.we { fill: url(#hatch); }
  .dg .za, .dg .seg.wa, .dg .bar.bh { fill: #eee; }
  .dg .sn, .dg .gd, .dg .dot2 { fill: #fff; stroke: #000; }
  .dg .rail, .dg .nobus, .dg .brk, .dg .curve.st, .dg .curve2, .dg .thl, .dg .med, .dg .gline, .dg .fixl, .dg .seg, .dg .bar { stroke: #000; }
  .dg .dot.low { fill: #000; }
  .dg .halo { stroke: #fff; }
  .dg .sarx, .dg .t2 { color: #000; fill: #000; }
  .t-verify { border-color: #000; background: none; }
  /* Board pack pages 4-5 (landscape) */
  body.printing-pack > *:not(#pack-print) { display: none !important; }
  body.printing-pack .pack { display: block !important; page: pack; }
  .pack h2 { margin: 0 0 1mm; font-size: 15pt; }
  .pack h3 { margin: 5mm 0 2mm; font-size: 11.5pt; break-after: avoid; }
  .pack .b-sub, .pack .b-meta { margin: 0 0 2mm; font-size: 8.5pt; color: #333; }
  .pack .pk-ill { display: inline-block; margin: 0 0 3mm; padding: 1mm 3mm; border: 0.75pt solid #000; font-size: 8.5pt; font-weight: 700; }
  .pack table { width: 100%; border-collapse: collapse; font-size: 7.5pt; }
  .pack th, .pack td { padding: 1.4mm 1.8mm; border: 0.5pt solid #888; text-align: start; vertical-align: top; }
  .pack thead th { background: #eee; }
  .pack .pk-page { break-after: page; }
  .pack .pk-page:last-of-type { break-after: auto; }
  .pack .b-foot { margin-block-start: 4mm; padding-block-start: 2mm; border-block-start: 0.5pt solid #888; color: #333; font-size: 7.5pt; }
}
.dg .gring { fill: none; stroke: var(--accent-text); stroke-width: 1.5; stroke-dasharray: 5 4; }
.seq-tbl .sv { justify-self: start; }