/* seiflden.com v3 — viz.css: simulators and charts of «تحت التسويق» (loaded only on pages that use them).
   Theme tokens from site.css only; light/dark follow :root[data-theme] + prefers-color-scheme automatically. */
.viz {
  --bad-soft: color-mix(in srgb, var(--bad) 12%, transparent);
  margin-block-start: var(--sp-6);
  padding: var(--sp-4) var(--sp-3) var(--sp-5);
  border: 1px solid var(--b1);
  border-radius: var(--r-lg);
  background: var(--s1);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--t1);
}
@media (min-width: 720px) { .viz { padding: var(--sp-5) var(--sp-6) var(--sp-6); } }
.prose .viz p, .viz p, .viz dl, .viz dd { margin: 0; }
.prose .viz ul > li, .prose .viz ol > li { padding-inline-start: 0; margin: 0; }
.prose .viz ul > li::before, .prose .viz ol > li::before { content: none; }
.viz :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* header */
.viz-h { display: grid; gap: var(--sp-1); margin-block-end: var(--sp-4); }
.viz-k { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--acc); }
:lang(ar) .viz-k { letter-spacing: 0; text-transform: none; }
.viz-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--b2); color: var(--warn);
  background: var(--amber-soft); font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.prose .viz-t, .viz-t { font-size: 1.25rem; line-height: 1.35; font-weight: 700; margin: 0; color: var(--t1); }
.viz--chart .viz-t { font-size: 1.0625rem; }
.viz-p { color: var(--t2); font-size: .9375rem; }

/* inputs */
.viz-body { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) {
  .viz--sim .viz-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.viz-in { display: grid; gap: var(--sp-3); min-width: 0; }
.viz-grp { display: grid; gap: var(--sp-3); min-width: 0; }
.viz-grp-t { font-weight: 650; font-size: .9375rem; }
.viz-grp-n { font-size: .8125rem; color: var(--t2); margin-block-start: -8px !important; }
.viz-field { display: grid; gap: 4px; min-width: 0; font-size: .9375rem; }
.viz-field > label, .viz-field legend, .viz-lrow label { color: var(--t1); line-height: 1.45; }
.viz-lrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.viz-num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--acc); }
.viz-u { color: var(--t2); font-weight: 500; font-size: .875rem; }
.viz-hint { font-size: .8125rem; color: var(--t2); }
.viz input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--acc-fill); background: transparent; cursor: pointer; }
.viz-step { display: flex; align-items: center; gap: var(--sp-2); }
.viz-step input { width: 5.5em; min-height: 44px; padding: 0 8px; border: 1px solid var(--b2); border-radius: var(--r-sm);
  background: var(--bg); color: var(--t1); font: inherit; font-weight: 600; text-align: center; }
.viz-sb { min-width: 44px; min-height: 44px; border: 1px solid var(--b2); border-radius: var(--r-sm); background: var(--s2);
  color: var(--t1); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.viz-sb:hover { border-color: var(--acc-line); }
.viz-sb[hidden] { display: none; }
.viz-rate, .viz-radio { border: 0; padding: 0; margin: 0; min-width: 0; }
.viz-rate legend, .viz-radio legend { padding: 0; margin-block-end: 4px; }
.viz-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.viz-opt { position: relative; display: inline-flex; }
.viz-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.viz-opt span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--b2); border-radius: var(--r-sm); background: var(--bg); font-weight: 600; }
.viz-opt input:checked + span { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--on-acc); }
.viz-opt input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.viz-tog { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.viz-tog input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--acc-fill); cursor: pointer; }
.viz-tog .viz-hint { flex-basis: 100%; }
.viz-tog { flex-wrap: wrap; }
.viz-adv { border: 1px solid var(--b1); border-radius: var(--r-md); padding: 0 var(--sp-3); }
.viz-adv > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: .875rem; color: var(--t2); font-weight: 600; }
.viz-adv[open] > summary { margin-block-end: var(--sp-2); }
.viz-adv > .viz-grp { padding-block-end: var(--sp-3); }

/* stage */
.viz-stage { min-width: 0; display: grid; gap: var(--sp-3); }
.viz-svg { width: 100%; height: auto; overflow: visible; direction: ltr; font-family: inherit; }
.viz-svg text { font-size: 13px; fill: var(--t2); unicode-bidi: plaintext; }
.viz-multi { display: grid; gap: var(--sp-4); }
@media (min-width: 480px) { .viz-multi { grid-template-columns: repeat(3, minmax(0, 1fr)); } .viz-multi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.viz--sim .viz-stage:has(> svg + svg) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .viz--sim[data-type="compare-two"] .viz-stage:has(> .viz-svg--lunch) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.viz-panel { min-width: 0; display: grid; gap: var(--sp-2); align-content: start; }
.viz-panel-t { font-weight: 650; font-size: .9375rem; }

/* outputs + verdict */
.viz-nojs { display: none; font-size: .8125rem; color: var(--t2); margin-block-start: var(--sp-3) !important; }
.no-js .viz-nojs { display: block; }
.no-js .viz--sim .viz-in, .no-js .viz--sim .viz-stage { display: none; }
.no-js .viz--sim .viz-body { display: block; }
.viz-out { display: grid; gap: var(--sp-2) var(--sp-4); margin-block-start: var(--sp-4) !important; }
@media (min-width: 560px) { .viz-out { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.viz-o { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--s2); min-width: 0; }
.viz-o dt { font-size: .8125rem; color: var(--t2); }
.viz-o dd { font-weight: 650; overflow-wrap: anywhere; }
.viz-verdict { margin-block-start: var(--sp-4) !important; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); line-height: 1.65; }
.viz-verdict[data-tone="ok"] { background: var(--acc-soft); color: var(--acc); }
.viz-verdict[data-tone="watch"] { background: var(--amber-soft); color: var(--warn); }
.viz-verdict[data-tone="act"] { background: color-mix(in srgb, var(--bad) 8%, transparent); color: var(--bad); }
.viz-verdict[data-tone="focus"] { color: var(--t1); background: var(--s2); border-inline-start: 4px solid var(--acc); }
.viz-verdict[data-tone="note"] { color: var(--t2); }
.viz-tone { font-weight: 800; }
.viz-rule-src, .viz-note, .viz-src, .viz-anno { font-size: .8125rem; color: var(--t2); margin-block-start: var(--sp-2) !important; }
.viz-rule-src a, .viz-src a { color: var(--acc); }
.viz-notes { display: grid; gap: 4px; }
.viz-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-block-start: var(--sp-3); }
.viz-share .btn[hidden] { display: none; }
.viz-copy.is-done { border-color: var(--acc); color: var(--acc); }
.viz-wa { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--acc); }
.viz-table, .viz-formula { margin-block-start: var(--sp-3); }
.viz-table > summary, .viz-formula > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: .875rem; color: var(--t2); font-weight: 600; }
.viz-formula ol { display: grid; gap: 4px; font-size: .875rem; color: var(--t1); padding-inline-start: var(--sp-4) !important; list-style: decimal; }
.prose .viz-formula ol > li { list-style: decimal; }
.is-live .viz-table-live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.viz-tw { max-width: 100%; margin-block-start: var(--sp-2); }  /* no scroll container: tables wrap (keyboard-safe) */
.viz-tbl { border-collapse: collapse; font-size: .875rem; width: 100%; overflow-wrap: anywhere; }
.viz-tbl caption { text-align: start; font-weight: 650; padding-block-end: 4px; }
.viz-tbl th, .viz-tbl td { padding: 6px 10px; text-align: start; border-block-end: 1px solid var(--b1); vertical-align: top; }
.viz-tbl thead th { color: var(--t2); font-weight: 600; font-size: .8125rem; }
.viz-tbl tbody th { font-weight: 600; }
@media (max-width: 479px) { .viz-tbl { font-size: .8125rem; } .viz-tbl th, .viz-tbl td { padding: 5px 5px; } }
.viz-notice { margin-block-start: var(--sp-4); font-size: .9375rem; color: var(--t1); font-weight: 600; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); font-size: .8125rem; color: var(--t2); margin-block-start: var(--sp-2) !important; }
.viz-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.viz-sw--mut { background: var(--bar-muted); }
.viz-sw--pos { background: var(--acc-fill); }
.viz-sw--tag { background: linear-gradient(135deg, transparent 42%, var(--bad) 42% 58%, transparent 58%); border: 1px solid var(--b2); }
.viz-sw--before { border: 2px solid var(--t2); border-radius: 50%; }
.viz-sw--after { background: var(--acc-fill); border-radius: 50%; }
.viz-sw--l80 { height: 0; border-top: 2px dashed var(--amber); border-radius: 0; }
.viz-ctl-row { margin-block-start: var(--sp-2) !important; }
.viz-ctl-row .btn[hidden] { display: none; }
.viz-strike { color: var(--t2); font-size: .875rem; }
.viz-kv { display: grid; gap: 4px; font-size: .875rem; }
.viz-kv div { display: grid; grid-template-columns: 5.5em 1fr; gap: var(--sp-2); }
.viz-kv dt { color: var(--t2); }
.viz-recap { display: grid; gap: 6px; font-size: .9375rem; margin-block-start: var(--sp-3) !important; }
.viz-recap li { display: flex; gap: var(--sp-2); align-items: baseline; }
.viz-ep-n { flex: none; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--s2); font-weight: 700; font-size: .8125rem; }
.cw-tests { display: grid; gap: 2px; font-size: .8125rem; }
.cw-tests div { display: flex; justify-content: space-between; gap: var(--sp-2); }
.cw-tests dt { color: var(--t2); }
.cw-mark--yes { color: var(--acc); } .cw-mark--no { color: var(--bad); } .cw-mark--na { color: var(--t3); }

/* ---------- SVG marks (classes only, never inline style) ---------- */
.viz-svg .vz-lab { font-size: 13px; fill: var(--t2); }
.viz-svg .vz-lab-s { font-size: 12px; fill: var(--t2); }
.viz-svg .vz-strong { font-weight: 700; }
.viz-svg .vz-t1 { fill: var(--t1); }
.viz-svg .vz-val { font-size: 13px; font-weight: 700; fill: var(--t1); }
.viz-svg .vz-tick { font-size: 12px; fill: var(--t3); }
.viz-svg .vz-score { font-size: 17px; font-weight: 800; }
.viz-svg .vz-big { font-size: 22px; font-weight: 800; fill: var(--t1); }
.viz-svg .vz-big-u { font-size: 13px; font-weight: 600; fill: var(--t2); }
.viz-svg .vz-eq { font-size: 17px; font-weight: 700; fill: var(--t1); }
.viz-svg .vz-on { fill: var(--on-acc); }
.viz-svg .vz-acc-t { fill: var(--acc); }
.viz-svg .vz-bad-t { fill: var(--bad); }
.viz-svg .vz-amb-t { fill: var(--warn); }
.viz-svg .vz-strike { text-decoration: line-through; fill: var(--t3); }
.viz-svg .vz-hide { display: none; }
.vz-grid { stroke: var(--grid-line); stroke-width: 1; fill: none; }
.vz-zero, .vz-axisl { stroke: var(--b2); stroke-width: 1.2; fill: none; }
.vz-pos { fill: var(--acc-fill); }
.vz-neg { fill: var(--bad); }
.vz-mut { fill: var(--bar-muted); }
.vz-off { fill: var(--dot-off); }
.vz-chev { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vz-src-bar { fill: var(--t2); }
.vz-flow-ok { fill: var(--acc-soft); stroke: var(--acc-line); }
.vz-flow-bad { fill: var(--bad-soft); stroke: color-mix(in srgb, var(--bad) 40%, transparent); }
.vz-band-ok { fill: var(--acc-soft); stroke: var(--acc-line); }
.vz-band-bad { fill: var(--bad-soft); stroke: var(--bad); }
.vz-door { fill: var(--s1); stroke: var(--bad); stroke-width: 2; }
.vz-door-off { fill: none; stroke: var(--b2); stroke-width: 1.5; }
.vz-door-knob { fill: var(--bad); }
.vz-fork { fill: none; stroke: var(--bad); stroke-width: 1.5; }
.vz-pay { fill: var(--bad); }
.vz-sar { fill: var(--t1); }
.vz-can { stroke: none; }
.vz-can-a { fill: var(--bar-muted); }
.vz-can-b { fill: var(--amber); }
.vz-can-rim { fill: var(--s1); opacity: .5; }
.vz-bracket, .vz-bracket-acc { fill: none; stroke: var(--acc); stroke-width: 1.5; }
.vz-bracket-mut { fill: none; stroke: var(--t3); stroke-width: 1.2; }
.vz-range { fill: var(--amber-soft); }
.vz-open { fill: none; stroke: var(--warn); stroke-width: 1.6; }
.vz-tag { stroke: var(--bad); stroke-width: 2; stroke-linecap: round; }
.vz-lane { fill: none; stroke: var(--s2); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.vz-lane-mid { fill: none; stroke: var(--b2); stroke-width: 1; stroke-dasharray: 4 6; }
.vz-car rect { fill: var(--t2); }
.vz-arrow, .vz-anno-line { fill: none; stroke: var(--acc); stroke-width: 1.5; }
.vz-head { fill: var(--acc); }
.vz-head-acc { fill: var(--acc); }
.vz-head-bad { fill: var(--bad); }
.vz-booth { fill: var(--bar-muted); }
.vz-booth-win { fill: var(--amber); }
.vz-l80 { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.vz-curve { fill: none; stroke: var(--t2); stroke-width: 2; stroke-linejoin: round; }
.vz-curve-hi { fill: none; stroke: var(--acc); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.vz-dot-before { fill: var(--s1); stroke: var(--t1); stroke-width: 2; }
.vz-dot-after { fill: var(--acc-fill); stroke: var(--s1); stroke-width: 1.5; }
.vz-fahad { fill: var(--acc-fill); }
.vz-person { fill: var(--bar-muted); }
.vz-person-bad { fill: var(--bad); }
.vz-clock { fill: none; stroke: var(--b1); stroke-width: 10; }
.vz-arc-car { fill: none; stroke: var(--amber); stroke-width: 10; }
.vz-arc-meal { fill: none; stroke: var(--acc-fill); stroke-width: 10; }
.vz-arc-open { fill: none; stroke: var(--t3); stroke-width: 3; stroke-dasharray: 6 5; }
.vz-ring { fill: none; stroke: var(--s2); stroke-width: 18; }
.vz-node circle { fill: var(--s2); stroke: var(--b2); stroke-width: 1.5; }
.vz-node text { font-size: 17px; font-weight: 800; fill: var(--t1); text-decoration: none; }
.viz-multi .viz-panel > .viz-svg { max-width: 300px; margin-inline: auto; }
.vz-node.is-current circle { stroke: var(--acc); stroke-width: 3.5; fill: var(--acc-soft); }
.vz-node:hover circle, .vz-node:focus circle { stroke: var(--acc); }
.vz-node:focus-visible { outline: none; }
.vz-node:focus-visible circle { stroke: var(--acc); stroke-width: 4; }
.vz-ramp { fill: var(--acc-fill); stroke: var(--acc-line); }
.vz-ramp-1 { fill-opacity: .1; } .vz-ramp-2 { fill-opacity: .25; } .vz-ramp-3 { fill-opacity: .42; }
.vz-ramp-4 { fill-opacity: .88; } .vz-ramp-5 { fill-opacity: 1; }
.viz-svg .vz-ramp-t-1, .viz-svg .vz-ramp-t-2, .viz-svg .vz-ramp-t-3 { fill: var(--t1); }
.viz-svg .vz-ramp-t-4, .viz-svg .vz-ramp-t-5 { fill: var(--on-acc); }
.vz-pick { fill: none; stroke: var(--amber); stroke-width: 3; }
.vz-pick--stop { stroke: var(--bad); }
.vz-dash-bad { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 5 4; }
.vz-line-bad { fill: none; stroke: var(--bad); stroke-width: 1.5; }
.vz-ruler { fill: var(--s2); stroke: var(--b2); }
.vz-gapfill { fill: var(--amber-soft); }
.vz-tickl { stroke: var(--b2); }
.vz-mk-branch { stroke: var(--t2); stroke-width: 3; }
.vz-mk-app { stroke: var(--amber); stroke-width: 3; }
.vz-conn { stroke: var(--t3); stroke-width: 1; }
.vz-floor { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 4 3; }
.vz-hatch-bg { fill: var(--s2); }
.vz-hatch-line, .vz-xhatch-line { stroke: var(--t3); stroke-width: 2; }
.vz-xhatch-line { stroke: var(--s1); }
.vz-ghost { fill: none; stroke: var(--t3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.vz-season { stroke: none; }
.vz-normal { stroke: var(--t1); stroke-width: 1.2; stroke-dasharray: 5 4; }
.vz-chair { fill: none; stroke: var(--t3); stroke-width: 1.2; }
.vz-chair.is-on { fill: var(--acc-fill); stroke: var(--acc-fill); }
.vz-stand { fill: var(--bad); }
.vz-band-watch, .vz-band-watch-sw { fill: var(--amber-soft); }
.vz-bad-bg { fill: color-mix(in srgb, var(--bad) 12%, transparent); }
.vz-bad-line { stroke: color-mix(in srgb, var(--bad) 35%, transparent); stroke-width: 2; }
.vz-heat { fill: var(--acc-fill); }
.vz-weak { fill: none; stroke: var(--amber); stroke-width: 3; }
.vz-doorg { fill: var(--s1); stroke: var(--amber); stroke-width: 1.5; }
.vz-halfline { stroke: var(--t1); stroke-width: 1.5; }
.vz-win { fill: var(--acc-soft); stroke: var(--acc); stroke-width: 2; }
.vz-win--bad { fill: var(--bad-soft); stroke: var(--bad); }
.vz-glass { fill: none; stroke: var(--bad); stroke-width: 1.8; }
.vz-check { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vz-tag-main { fill: var(--acc-soft); stroke: var(--acc-line); }
.vz-room { fill: none; stroke: var(--b2); stroke-width: 1.2; }
.vz-tbl-used { fill: var(--acc-fill); }
.vz-tbl-fit { fill: none; stroke: var(--acc); stroke-width: 1.8; }
.vz-tbl-small { fill: var(--bar-muted); }
.vz-join { fill: var(--acc-fill); }
.cw-street { fill: var(--s2); }
.cw-beige { fill: color-mix(in srgb, var(--amber) 16%, var(--s1)); stroke: var(--b2); }
.cw-glass, .cw-glass2 { fill: color-mix(in srgb, var(--t3) 25%, var(--s1)); }
.viz-svg .cw-read { font-size: 8px; font-weight: 300; fill: var(--t3); letter-spacing: .02em; }
.cw-wood { fill: color-mix(in srgb, var(--amber) 38%, var(--s2)); }
.cw-plank { stroke: color-mix(in srgb, var(--amber) 55%, var(--t3)); stroke-width: 1; }
.cw-neon { fill: none; stroke: var(--amber); stroke-width: 3; }
.cw-leaf { fill: var(--acc-fill); opacity: .75; }
.cw-pot { fill: var(--t3); }
.cw-brand { fill: var(--acc-fill); }
.cw-cup, .cw-lid { fill: var(--on-acc); }

@media (prefers-reduced-motion: no-preference) {
  .vz-pulse { animation: vz-pulse 1.2s ease-in-out 4 alternate; }
  .viz-verdict { transition: background-color var(--d2) var(--ease), color var(--d2) var(--ease); }
  .viz-svg rect, .viz-svg circle { transition: fill-opacity var(--d2) var(--ease); }
}
@keyframes vz-pulse { from { opacity: .6; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .viz *, .viz *::before { transition: none !important; animation: none !important; }
  .cw-read { opacity: .4; }
}

/* ---------- The Branch Gate (data-type="gate"): sign / sign with conditions / not yet ("not yet" is grey: a decision, not a failure) ---------- */
.viz--sim[data-type="gate"] .viz-verdict { font-size: 1.0625rem; }
.viz--sim[data-type="gate"] .viz-verdict .viz-tone { font-size: 1.25rem; margin-inline-end: 4px; }
.viz--sim[data-type="gate"] .viz-verdict[data-tone="act"] { background: var(--s2); color: var(--t1); box-shadow: inset 4px 0 0 var(--t3); }
[dir="rtl"] .viz--sim[data-type="gate"] .viz-verdict[data-tone="act"] { box-shadow: inset -4px 0 0 var(--t3); }
.viz--sim[data-type="gate"] .viz-verdict a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vz-gz--ok { fill: var(--acc-fill); fill-opacity: .32; }
.vz-gz--mid { fill: var(--amber); fill-opacity: .32; }
.vz-gz--not { fill: var(--bar-muted); }
.vz-gz-mk { fill: var(--t1); }
.vz-gz-ml { stroke: var(--t1); stroke-width: 2; fill: none; }