/* ============================================================
   Flow Presenter — قبل / بعد
   A presentation shell that hosts the real HTML sketches.
   ============================================================ */

:root{
  --bg:#0b0d10;
  --bg-2:#12151a;
  --bg-3:#171b21;
  --line:#242a33;
  --line-2:#2f3743;
  --txt:#e8ecf1;
  --txt-2:#9aa4b2;
  --txt-3:#6b7683;

  --now:#8c93a1;          /* current state  */
  --now-bg:rgba(140,147,161,.12);
  --new:#22bc67;          /* proposal       */
  --new-bg:rgba(34,188,103,.13);
  --warn:#f5a623;
  --accent:#5b8cff;

  --rail:56px;
  --topbar:56px;
  --chain:64px;
  --notes:0px;            /* set by JS when notes open */
  --radius:10px;
  --font:'Vazirmatn','Vazir','IRANSansX','IRANSans','SF Pro Text',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--txt);font-family:var(--font);
  font-size:13px;line-height:1.7;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit}

/* ---------- shell ---------- */
.app{display:flex;flex-direction:column;height:100%}

/* ---------- top bar ---------- */
.topbar{
  flex:0 0 var(--topbar);display:flex;align-items:center;gap:14px;
  padding:0 18px;background:var(--bg-2);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:9px;min-width:0}
.brand h1{font-size:14px;font-weight:600;white-space:nowrap}
.brand span{font-size:11.5px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .spacer{flex:1}

.seg{display:flex;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
.seg button{
  font-size:11.5px;padding:5px 11px;border-radius:6px;color:var(--txt-2);white-space:nowrap;
  transition:background .12s,color .12s;
}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--txt);color:#0b0d10;font-weight:500}

.iconbtn{
  width:32px;height:32px;border-radius:8px;background:var(--bg-3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--txt-2);
}
.iconbtn:hover{color:var(--txt);border-color:var(--line-2)}
.iconbtn.on{background:var(--txt);color:#0b0d10;border-color:var(--txt)}

select.track{
  background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:6px 10px;font-size:12px;font-family:inherit;
}

/* ---------- flow chain ---------- */
.chainbar{
  flex:0 0 auto;display:flex;align-items:stretch;min-height:var(--chain);
  background:var(--bg);border-bottom:1px solid var(--line);
}
.chain{
  flex:1;display:flex;align-items:center;gap:0;
  padding:9px 18px;overflow:auto;scrollbar-width:thin;max-height:34vh;
}
/* ---- نمودار فلو بالای داک ---- */
.flowboard{position:relative;flex:0 0 auto}
.fwires{position:absolute;top:0;right:0;pointer-events:none;color:var(--line-2)}
.fw{fill:none;stroke-width:1.6}
.fw-now{stroke:#4d5666;color:#4d5666}
.fw-new{stroke:#1f7a46;color:#1f7a46}

.fnode{
  position:absolute;display:flex;align-items:center;gap:6px;padding:0 10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:7px;
  font-size:11.5px;color:var(--txt-2);text-align:right;overflow:hidden;
  transition:border-color .12s,color .12s,background .12s;
}
.fnode span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnode i{
  font-style:normal;font-size:9.5px;color:var(--warn);background:rgba(245,166,35,.15);
  border-radius:999px;padding:1px 5px;flex:0 0 auto;
}
.fnode:hover{color:var(--txt);border-color:var(--line-2)}
.fnode.before{border-color:#3a414c}
.fnode.after{border-color:#1e6b41;color:#bfe0cc}
.fnode.gallery{border-color:#3a5570;color:#b9cbe0}
.fnode.branch{border-style:dashed;border-color:var(--warn);color:#f0c98a}
.fnode.on{
  background:#fff;color:#0b0d10;border-color:#fff;font-weight:600;
  box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
.fnode.on i{background:rgba(0,0,0,.16);color:#7a5200}

.flane{
  position:absolute;right:8px;font-size:10.5px;font-weight:600;padding:3px 9px;
  border-radius:999px;white-space:nowrap;
}
.flane.now{background:var(--now-bg);color:#c3c9d3;border:1px solid #3a414c}
.flane.new{background:var(--new-bg);color:var(--new);border:1px solid #1e6b41}

/* مینی‌مپ کنار نمودار فلو */
.mini{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:0 14px 0 16px;
  border-inline-start:1px solid var(--line);background:var(--bg-2);transition:background .12s;
}
.mini:hover{background:var(--bg-3)}
.mini svg{display:block;overflow:visible}
.mini .mini-lbl{font-size:10.5px;color:var(--txt-3);white-space:nowrap}
.mini .mw{fill:none;stroke-width:9}
.mini .mw-now{stroke:var(--now);opacity:.5}
.mini .mw-new{stroke:var(--new);opacity:.5}
.mini .mw-pair{stroke:var(--line-2);opacity:.6}
.mini .mn{fill:#39414d}
.mini .mn-before{fill:var(--now);opacity:.55}
.mini .mn-after{fill:var(--new);opacity:.5}
.mini .mn-gallery{fill:#5b8cff;opacity:.5}
.mini .mn-branch{fill:var(--warn);opacity:.55}
.mini .mn.on{opacity:1;stroke:#fff;stroke-width:10}

/* ============================================================
   نمای کلی (بوم مثل فیگما)
   ============================================================ */
.map{
  flex:1;position:relative;overflow:hidden;display:none;
  background:
    radial-gradient(circle at 1px 1px, #1e242c 1px, transparent 0) 0 0/26px 26px,
    var(--bg);
  cursor:grab;touch-action:none;
}
.map.grabbing{cursor:grabbing}
body.view-map .map{display:block}
body.view-map .stage{display:none}
body:not(.view-map):not(.view-allmap) .zoomseg{display:none}

/* ---------- نمای کلی «همهٔ فلوها» ---------- */
.allmap{
  flex:1;position:relative;overflow:hidden;display:none;
  background:
    radial-gradient(circle at 1px 1px, #1e242c 1px, transparent 0) 0 0/26px 26px,
    var(--bg);
  cursor:grab;touch-action:none;
}
.allmap.grabbing{cursor:grabbing}
body.view-allmap .allmap{display:block}
body.view-allmap .stage,body.view-allmap .map,body.view-allmap .chainbar{display:none}

.ablock{position:absolute}
.ablock-head{
  position:absolute;right:0;display:flex;align-items:baseline;gap:12px;
  padding:0 12px 8px 0;border-bottom:1px solid var(--line);cursor:pointer;
}
.ablock-head b{font-size:17px;font-weight:700}
.ablock-head span{font-size:11.5px;color:var(--txt-3)}
.ablock-head i{margin-inline-start:auto;font-size:11.5px;font-style:normal;color:var(--txt-3);opacity:0}
.ablock-head:hover i{opacity:1;color:var(--accent)}
.ablock-head.tone-0 b{color:#9db6ff}
.ablock-head.tone-1 b{color:var(--warn)}
.ablock-head.tone-2 b{color:#ff8a8a}

.anode{
  position:absolute;display:flex;flex-direction:column;justify-content:center;gap:1px;
  text-align:right;padding:6px 10px;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.anode:hover{border-color:var(--txt-2);transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.5)}
.anode.before{border-color:#3a414c;background:var(--now-bg)}
.anode.after{border-color:#1e6b41;background:var(--new-bg)}
.anode.gallery{border-color:#3a5570;background:rgba(91,140,255,.09)}
.anode.branch{border-style:dashed;border-color:var(--warn);background:rgba(245,166,35,.08);align-items:center;text-align:center}
.anode.cur{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.an-k{font-size:9.5px;color:var(--txt-3);line-height:1.3}
.an-t{font-size:12.5px;font-weight:600;line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.an-c{position:absolute;top:5px;left:7px;font-size:9px;color:var(--warn);
  background:rgba(245,166,35,.14);border-radius:999px;padding:1px 5px}
.lanelabel.small{font-size:10.5px;font-weight:600;padding:2px 8px}

.mapcanvas{position:absolute;top:0;left:0;transform-origin:top left;will-change:transform}
.mapwires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wire{fill:none;stroke-width:2.5}
.w-now{stroke:var(--now);opacity:.75}
.w-new{stroke:var(--new);opacity:.85}
.w-pair{stroke:var(--line-2);stroke-dasharray:5 6}
.ah-now{fill:var(--now)}.ah-new{fill:var(--new)}

.lanelabel{
  position:absolute;font-size:14px;font-weight:600;padding:5px 13px;border-radius:999px;white-space:nowrap;
}
.lanelabel.now{background:var(--now-bg);color:#c3c9d3;border:1px solid #3a414c}
.lanelabel.new{background:var(--new-bg);color:var(--new);border:1px solid #1e6b41}

.mapnode{
  position:absolute;display:flex;flex-direction:column;text-align:right;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:0;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.mapnode:hover{border-color:var(--txt-2);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.mapnode.before{border-color:#3a414c}
.mapnode.after{border-color:#1e6b41}
.mapnode.gallery{border-color:#3a5570}
.mapnode.branch{
  border-style:dashed;border-color:var(--warn);background:rgba(245,166,35,.07);
  align-items:center;justify-content:center;text-align:center;
}
.mapnode.cur{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.16),0 16px 40px rgba(0,0,0,.55)}

.mn-head{display:flex;align-items:center;gap:7px;padding:9px 11px;flex:0 0 auto}
.mapnode.branch .mn-head{padding:14px 12px 6px}
.mn-tag{font-size:10px;font-weight:600;border-radius:4px;padding:2px 6px;flex:0 0 auto}
.mn-tag.now{background:var(--now-bg);color:#c3c9d3}
.mn-tag.new{background:var(--new-bg);color:var(--new)}
.mn-tag.data{background:rgba(91,140,255,.16);color:#9db6ff}
.mn-title{font-size:14px;font-weight:600;line-height:1.45;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mn-count{
  position:absolute;top:9px;left:9px;font-size:10px;color:var(--warn);
  background:rgba(245,166,35,.14);border-radius:999px;padding:2px 7px;
}
.mapnode.branch .mn-count{position:static;margin-top:6px}
.mn-fork{color:var(--warn);font-size:19px;letter-spacing:3px;margin-top:8px}

.mn-thumb{flex:1;position:relative;overflow:hidden;background:#000;border-top:1px solid var(--line)}
.mn-thumb iframe{position:absolute;top:0;right:0;border:0;transform-origin:top right;pointer-events:none}
.mn-thumb img{width:100%;display:block}
.mn-thumb.empty,.mn-thumb.concept{
  display:flex;align-items:center;justify-content:center;background:var(--bg-3);
  color:var(--txt-3);font-size:11.5px;padding:8px;text-align:center;
}
.mn-thumb.concept{color:var(--txt-2);font-size:17px;font-weight:700}
body.no-thumbs .mn-thumb{visibility:hidden}
.zoomseg button{font-size:12px;min-width:26px}
.iconbtn.wide{width:auto;padding:0 11px;font-size:11.5px;white-space:nowrap;gap:5px}

/* ============================================================
   نقشهٔ کلی جرنی — سه بازه زیر هم، تاچ‌پوینت‌های هم‌جنس در یک ستون
   ============================================================ */
.journey{flex:1;position:relative;overflow:hidden;display:none;background:var(--bg)}
body.view-journey .journey{display:block}
body.view-journey .stage,body.view-journey .map,body.view-journey .allmap{display:none}
body.view-journey .chainbar{display:none}
body.view-journey .zoomseg{display:none}

.j-scroll{position:absolute;inset:0;overflow:auto;padding:18px 20px 22px;scrollbar-width:thin}
.j-grid{
  display:grid;
  grid-template-columns:190px repeat(var(--jcols),minmax(178px,1fr));
  grid-auto-rows:minmax(146px,auto);
  gap:9px;transform-origin:top right;align-items:stretch;
}
.j-grid > .j-corner,.j-grid > .j-colhead{grid-row:1}
.j-empty{padding:40px;text-align:center;color:var(--txt-3)}

/* گوشهٔ چپ‌بالا و سرستون‌ها */
.j-corner{
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:8px 12px 9px;
  border-bottom:1px solid var(--line-2);
}
.j-corner b{font-size:12px;color:var(--txt-2);font-weight:600}
.j-corner span{font-size:10.5px;color:var(--txt-3)}

.j-colhead{
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  padding:8px 11px 9px;border-bottom:1px solid var(--line-2);text-align:right;
}
.j-colhead b{font-size:12.5px;font-weight:600;color:var(--txt);line-height:1.5}
.j-colhead span{font-size:10.5px;color:var(--txt-3)}

/* سرِ سطر = بازهٔ زمانی */
.j-rowhead{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:13px 14px;border-radius:12px;text-align:right;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-2);transition:border-color .12s,background .12s;
}
.j-rowhead:hover{border-color:var(--txt-2)}
.j-rowhead .j-step{
  align-self:flex-start;font-size:11px;font-weight:700;border-radius:999px;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
.j-rowhead b{font-size:13.5px;font-weight:650;line-height:1.55}
.j-rowhead .j-sub{font-size:11px;color:var(--txt-3);line-height:1.6}

.j-rowhead.calm    {border-color:#2b4a63;background:rgba(91,140,255,.07)}
.j-rowhead.calm    .j-step{background:rgba(91,140,255,.2);color:#9db6ff}
.j-rowhead.urgent  {border-color:#6b4a15;background:rgba(245,166,35,.08)}
.j-rowhead.urgent  .j-step{background:rgba(245,166,35,.22);color:#f0c98a}
.j-rowhead.expired {border-color:#6b2f2f;background:rgba(232,90,90,.08)}
.j-rowhead.expired .j-step{background:rgba(232,90,90,.22);color:#f0a0a0}
.j-rowhead.live    {border-style:dashed;border-color:#1e6b41;background:rgba(34,188,103,.07)}
.j-rowhead.live    .j-step{background:var(--new-bg);color:var(--new)}

/* سلول‌ها */
.j-cell{
  display:flex;flex-direction:column;text-align:right;overflow:hidden;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-2);padding:0;
  transition:border-color .12s,transform .12s,box-shadow .12s;
}
button.j-cell:hover{border-color:var(--txt-2);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.j-cell.cur{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.j-cell.calm   {border-color:#2b4a63}
.j-cell.urgent {border-color:#6b4a15}
.j-cell.expired{border-color:#6b2f2f}
.j-cell.live   {border-color:#1e6b41}
.j-cell.ghost  {opacity:.72;border-style:dashed}

.j-cellhead{display:flex;flex-direction:column;gap:5px;padding:9px 11px;flex:0 0 auto}
.j-cellhead b{font-size:12px;font-weight:550;line-height:1.6;color:var(--txt)}
.j-b{
  align-self:flex-start;font-style:normal;font-size:9.5px;font-weight:600;
  border-radius:4px;padding:2px 6px;letter-spacing:.02em;
}
.j-b.both{background:rgba(91,140,255,.16);color:#9db6ff}
.j-b.new {background:var(--new-bg);color:var(--new)}
.j-b.now {background:var(--now-bg);color:#c3c9d3}

/* ارتفاع تامب ثابت است تا ردیف‌ها هم‌تراز بمانند؛ هم‌ترازی، خودِ حرفِ این نقشه است */
.j-thumb{
  flex:0 0 auto;height:78px;position:relative;overflow:hidden;background:#000;
  border-top:1px solid var(--line);margin-top:auto;
}
.j-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.j-thumb.none{background:repeating-linear-gradient(135deg,#14181e,#14181e 6px,#171c23 6px,#171c23 12px)}

/* سلول خالی — نبودِ تاچ‌پوینت، خودش پیام دارد */
.j-cell.gap{
  border-style:dashed;border-color:#232830;background:rgba(255,255,255,.012);
  align-items:flex-start;justify-content:center;gap:6px;padding:12px;
}
.j-gapmark{
  font-size:9.5px;font-weight:600;color:#7d848f;background:rgba(255,255,255,.05);
  border-radius:4px;padding:2px 7px;
}
.j-gaptxt{font-size:11px;color:var(--txt-3);line-height:1.75}
.j-dash{color:#3a414c;font-size:16px;align-self:center;margin:auto}

.j-legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:16px;padding-top:13px;
  border-top:1px solid var(--line);font-size:11px;color:var(--txt-3);
}
.j-legend span{display:flex;align-items:center;gap:6px}
.j-legend .sw{width:11px;height:11px;border-radius:3px;display:block}
.j-legend .sw.both{background:#9db6ff}
.j-legend .sw.new{background:var(--new)}
.j-legend .sw.now{background:#c3c9d3}
.j-legend .sw.gap{border:1px dashed #4a515c;background:none}
.j-legend .j-tip{margin-inline-start:auto;color:var(--txt-3);opacity:.8}

/* ============================================================
   چند تصویر داخل یک نما + لایت‌باکس
   ============================================================ */
.shotsrow{
  position:relative;flex:1;display:flex;gap:14px;padding:16px;overflow:auto;
  align-items:flex-start;justify-content:center;background:var(--bg-2);
}
.shotsrow.col{flex-direction:column;align-items:stretch}
.shotsrow figure{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.shotsrow img{
  width:100%;display:block;border-radius:8px;border:1px solid var(--line);
  cursor:zoom-in;background:#000;
}
.shotsrow figcaption{font-size:11.5px;color:var(--txt-3);text-align:center}
.zoombtn{
  font-size:11px;color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line);
  border-radius:7px;padding:5px 11px;white-space:nowrap;
}
.zoombtn:hover{color:var(--txt);border-color:var(--line-2)}
.zoombtn.floating{position:absolute;top:14px;inset-inline-start:14px;z-index:3}

/* بلوک تصویرها داخل اسلاید متنی */
.textshots{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.textshots-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;
}
.textshots-head span{font-size:11px;font-weight:600;color:var(--txt-3);letter-spacing:.03em}
.textshots figure{margin-bottom:12px}
.textshots img{
  width:100%;display:block;border-radius:8px;border:1px solid var(--line);
  cursor:zoom-in;background:#000;
}
.textshots figcaption{font-size:11.5px;color:var(--txt-3);margin-top:6px}

.lightbox{
  position:fixed;inset:0;z-index:120;background:rgba(6,8,11,.96);backdrop-filter:blur(6px);
  display:none;flex-direction:column;padding:14px 18px 20px;
}
.lightbox.open{display:flex}
.lb-bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px;
}
.lb-bar span{font-size:14px;font-weight:600}
.lb-row{
  flex:1;display:flex;gap:16px;min-height:0;align-items:stretch;justify-content:center;overflow:auto;
}
.lb-row figure{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;
}
/* زیر هم — برای مقایسهٔ نمودارهایی که محور مشترک دارند */
.lb-row.col{flex-direction:column;align-items:center}
.lb-row.col figure{width:100%;min-height:0}
.lb-row.col img{width:auto;max-width:100%;max-height:100%}
.lb-row img{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;
  border:1px solid var(--line-2);background:#000;
}
.lb-row figure.focus img{border-color:var(--warn)}
.lb-row figcaption{font-size:12px;color:var(--txt-2);text-align:center;flex:0 0 auto}

/* ---------- stage ---------- */
.stage{flex:1;display:flex;flex-direction:column;min-height:0;padding:14px 18px 0}
.stage .panes{flex:1}

.stephead{display:flex;align-items:baseline;gap:10px;margin-bottom:11px;flex:0 0 auto}
.stephead .kicker{
  font-size:10.5px;color:var(--txt-3);border:1px solid var(--line);border-radius:5px;
  padding:2px 7px;letter-spacing:.03em;
}
.stephead h2{font-size:15px;font-weight:600}
.stephead .sub{font-size:12px;color:var(--txt-3)}

.panes{flex:1;display:flex;gap:14px;min-height:0;position:relative}
.pane{
  flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.pane.hide{display:none}
.pane.solo{flex:1}
.pane.gallery{flex:1}

.panehead{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 11px;
  border-bottom:1px solid var(--line);background:var(--bg-3);min-height:41px;
}
.tag{
  font-size:10.5px;font-weight:600;border-radius:5px;padding:3px 8px;white-space:nowrap;
}
.tag.now{background:var(--now-bg);color:#c3c9d3}
.tag.new{background:var(--new-bg);color:var(--new)}
.tag b{font-weight:700;opacity:.75;margin-inline-start:3px;font-variant-numeric:tabular-nums}
.panehead .title{font-size:12px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panehead .spacer{flex:1}

.panefoot{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 11px;
  background:var(--bg-3);border-top:1px solid var(--line);
}
.panefoot .footcap{
  font-size:10.5px;font-weight:600;color:var(--new);background:var(--new-bg);
  border-radius:5px;padding:3px 8px;flex:0 0 auto;
}
.panefoot.now .footcap{color:#c3c9d3;background:var(--now-bg)}
.panefoot .footcount{
  font-size:10.5px;color:var(--txt-3);flex:0 0 auto;font-variant-numeric:tabular-nums;
}
.vtabs{
  display:flex;gap:5px;flex-wrap:wrap;flex:1;min-width:0;max-height:66px;overflow-y:auto;
  scrollbar-width:thin;
}
.vtabs::-webkit-scrollbar{display:none}
.vtab{
  font-size:11px;padding:4px 10px;border-radius:6px;border:1px solid var(--line);
  color:var(--txt-2);white-space:nowrap;background:var(--bg-2);
}
.vtab:hover{color:var(--txt);border-color:var(--line-2)}
.vtab.on{background:var(--new);border-color:var(--new);color:#06240f;font-weight:600}
.vtab.on.nowtab{background:#c3c9d3;border-color:#c3c9d3;color:#14171c}
.vtab .star{color:var(--warn);font-size:10px}
.vtab.on .star{color:#06240f}

.frameport{
  flex:1;position:relative;overflow:hidden;background:#000;
  display:flex;align-items:flex-start;justify-content:center;
}
.framewrap{position:relative;transform-origin:top center;flex:0 0 auto}
.framewrap iframe{display:block;border:0;background:#0c0c0c}
.framewrap img.shot{display:block;max-width:none}

/* placeholder when an asset is missing */
.missing{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  height:100%;padding:28px;text-align:center;color:var(--txt-3);background:var(--bg-2);
}
.missing b{color:var(--txt-2);font-size:12.5px;font-weight:600}
.missing code{
  font-family:ui-monospace,Menlo,monospace;font-size:11px;direction:ltr;
  background:var(--bg-3);border:1px solid var(--line);border-radius:6px;padding:5px 9px;color:#9fb6d8;
}

/* text-only pane (for concept / timing steps) */
.textpane{padding:26px 30px;overflow:auto;height:100%}
.textpane .big{font-size:26px;font-weight:700;line-height:1.5;margin-bottom:10px}
.textpane .big.now{color:#c3c9d3}
.textpane .big.new{color:var(--new)}
.textpane p{color:var(--txt-2);font-size:12.5px;max-width:46ch}
.textpane ul{margin:12px 0 0;padding-inline-start:18px;color:var(--txt-2);font-size:12.5px}
.textpane li{margin-bottom:5px}
.textpane img{max-width:100%;border-radius:8px;border:1px solid var(--line);margin-top:14px;display:block}



/* ---------- notes: هر ستون زیر همان طرح ---------- */
.notes{
  flex:0 0 auto;display:flex;gap:14px;padding:0 18px;
  max-height:0;overflow:hidden;transition:max-height .18s ease,padding .18s ease;
}
.notes.open{max-height:30vh;overflow:auto;padding:12px 18px 14px}
.note{
  flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 15px;
}
.note:empty{background:none;border:none;padding:0}
.note h4{font-size:11px;font-weight:600;letter-spacing:.03em;margin-bottom:7px}
.note h4 i{font-style:normal;margin-inline-end:5px}
.note ul{padding-inline-start:16px}
.note li{font-size:12.5px;color:var(--txt-2);margin-bottom:5px;line-height:1.85}
.note li:last-child{margin-bottom:0}
.note li b{color:var(--txt);font-weight:600}
.note li code{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#9fb6d8}
.note.problem{border-color:#4a2f2f}
.note.problem h4{color:#e08b8b}
.note.why{border-color:#1e4b33}
.note.why h4{color:var(--new)}

/* ---------- branch step ---------- */
.branchwrap{
  flex:1;display:flex;gap:14px;min-height:0;align-items:flex-start;
  padding-top:6vh;overflow:auto;
}
.bcard{
  flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 20px;display:flex;flex-direction:column;text-align:right;
  transition:border-color .14s,transform .14s;min-height:210px;
}
.bcard:hover{border-color:var(--new);transform:translateY(-2px)}
.bcard .num{
  font-size:11px;color:var(--new);background:var(--new-bg);border-radius:6px;
  padding:3px 9px;align-self:flex-start;margin-bottom:12px;
}
.bcard h3{font-size:15px;font-weight:600;margin-bottom:9px;line-height:1.6}
.bcard p{font-size:12.5px;color:var(--txt-2);flex:1}
.bcard .go{margin-top:16px;font-size:12px;color:var(--new)}

/* ---------- helpers / footer ---------- */
.hint{
  position:fixed;bottom:12px;inset-inline-start:14px;z-index:30;font-size:11px;color:var(--txt-3);
  background:rgba(11,13,16,.88);border:1px solid var(--line);border-radius:8px;padding:7px 11px;
  backdrop-filter:blur(6px);transition:opacity .18s;
}
/* وقتی نکات ارائه باز است، راهنمای کیبورد روی متن نیفتد */
.hint{display:none}
.hint.force{display:block}
.hint kbd{
  font-family:inherit;background:var(--bg-3);border:1px solid var(--line-2);border-radius:4px;
  padding:1px 5px;margin:0 2px;color:var(--txt-2);font-size:10.5px;
}
.protowarn{
  position:fixed;top:0;right:0;left:0;z-index:99;background:var(--warn);color:#241802;
  font-size:12px;padding:8px 16px;text-align:center;font-weight:500;
}
.protowarn code{direction:ltr;display:inline-block;background:rgba(0,0,0,.16);border-radius:4px;padding:1px 7px;margin:0 4px}

@media(max-width:1100px){
  .notes-in{grid-template-columns:1fr}
  .note{border-inline-start:none;border-top:1px solid var(--line)}
  .note:first-child{border-top:none}
}