/* ============================================================
   SATPURA STUDIO — Khandwa delivery flow review
   Brand tokens from satpurastudio.com: fired clay, Fraunces + Figtree.
   ============================================================ */
:root {
  --bg:#F5F1E8; --surface:#FBF8F1; --surface-2:#F0EADC;
  --ink:#201C13; --ink-soft:rgba(32,28,19,.62); --ink-faint:rgba(32,28,19,.30);
  --accent:#B8722C; --accent-soft:rgba(184,114,44,.10); --accent-line:rgba(184,114,44,.36);
  --line:rgba(32,28,19,.12); --line-2:rgba(32,28,19,.22);
  --warn:#9C4A38; --warn-soft:rgba(156,74,56,.08); --warn-line:rgba(156,74,56,.30);
  --good:#4E7A5C; --good-soft:rgba(78,122,92,.10); --good-line:rgba(78,122,92,.32);
  --serif:'Fraunces',Georgia,serif; --sans:'Figtree',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 1px 2px rgba(32,28,19,.04),0 10px 30px -20px rgba(32,28,19,.30);
  --r:3px;
}
[data-theme="dark"] {
  --bg:#0D0C08; --surface:#14120C; --surface-2:#1B1810;
  --ink:#EFEAD9; --ink-soft:rgba(239,234,217,.60); --ink-faint:rgba(239,234,217,.28);
  --accent:#D9A05B; --accent-soft:rgba(217,160,91,.12); --accent-line:rgba(217,160,91,.38);
  --line:rgba(239,234,217,.11); --line-2:rgba(239,234,217,.20);
  --warn:#D98E76; --warn-soft:rgba(217,142,118,.10); --warn-line:rgba(217,142,118,.30);
  --good:#8FBF9E; --good-soft:rgba(143,191,158,.11); --good-line:rgba(143,191,158,.32);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -20px rgba(0,0,0,.8);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
.wrap { max-width:1120px; margin:0 auto; padding:0 22px; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- top bar ---------- */
.top { position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 92%,transparent);
       backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:14px; height:56px; }
.mark { font-family:var(--serif); font-size:19px; font-weight:600; font-style:italic;
        letter-spacing:-.01em; text-decoration:none; color:var(--ink); }
.mark span { font-family:var(--mono); font-style:normal; font-size:9px; font-weight:500;
             letter-spacing:.28em; color:var(--ink-faint); margin-left:7px; vertical-align:3px; }
.top .sep { flex:1; }
.tbtn { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
        color:var(--ink-soft); border:1px solid var(--line-2); padding:7px 11px; border-radius:var(--r);
        text-decoration:none; white-space:nowrap; }
.tbtn:hover { color:var(--ink); border-color:var(--accent-line); }

/* ---------- hero ---------- */
.hero { padding:52px 0 26px; }
.eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
           color:var(--ink-faint); display:flex; gap:16px; flex-wrap:wrap; margin:0 0 14px; }
.eyebrow b { color:var(--accent); font-weight:500; }
h1 { font-family:var(--serif); font-size:clamp(30px,5vw,50px); font-weight:600; line-height:1.04;
     letter-spacing:-.02em; margin:0; text-wrap:balance; }
h1 em { font-style:italic; color:var(--accent); }
.lede { color:var(--ink-soft); font-size:17px; max-width:62ch; margin:16px 0 0; }

/* ---------- tabs ---------- */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:34px 0 0;
        position:sticky; top:56px; background:var(--bg); z-index:40; }
.tab { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
       color:var(--ink-faint); padding:13px 15px 11px; border-bottom:2px solid transparent; }
.tab:hover { color:var(--ink); }
.tab[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); }
.panel[hidden] { display:none; }
.panel { padding:30px 0 80px; }

/* ---------- system strip ---------- */
.sysrow { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 10px; }
.sysbox { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
          padding:13px 14px; }
.sysbox svg { width:20px; height:20px; color:var(--accent); display:block; margin-bottom:8px; }
.sysbox b { font-size:14px; display:block; }
.sysbox span { font-size:12.5px; color:var(--ink-soft); line-height:1.45; display:block; margin-top:3px; }
.sysbase { background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--r);
           padding:11px 14px; display:flex; align-items:center; gap:11px; }
.sysbase svg { width:19px; height:19px; color:var(--accent); flex:0 0 auto; }
.sysbase b { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); }
.sysbase span { font-size:12.5px; color:var(--ink-soft); }
.hint { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
        color:var(--ink-faint); margin:26px 0 10px; }

/* ---------- flow chart ---------- */
.chart { display:flex; flex-direction:column; }
.crow { display:grid; grid-template-columns:minmax(200px,250px) 1fr; column-gap:44px; }
.crow + .crow { margin-top:16px; }

.cspine { position:relative; }
.crow:not(:last-child) .cspine::after { content:""; position:absolute; left:26px; top:52px;
  bottom:-16px; width:1px; background:var(--line-2); }
.cspine.has::before { content:""; position:absolute; left:100%; top:27px; width:44px;
  border-top:1px dashed var(--accent-line); }
.step { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 14px; }
.crow.on .step { border-color:var(--accent-line); background:var(--accent-soft); }
.step .num { font-family:var(--mono); font-size:10px; color:var(--ink-faint); width:16px; }
.step .ico { width:19px; height:19px; color:var(--ink-soft); flex:0 0 auto; }
.crow.on .step .ico { color:var(--accent); }
.step .lbl { flex:1; font-size:15px; font-weight:500; line-height:1.3; }
.crow.cross .step { border-style:dashed; }

.rail { position:relative; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.rail::before { content:""; position:absolute; left:0; top:19px; bottom:19px;
  border-left:1px dashed var(--accent-line); }
.branch { position:relative; display:flex; gap:10px; align-items:baseline; width:100%;
  text-align:left; background:var(--surface); border:1px dashed var(--accent-line);
  border-radius:var(--r); padding:9px 13px; font-size:14px; color:var(--ink-soft);
  transition:border-color .14s, background .14s, color .14s; }
.branch::before { content:""; position:absolute; left:-22px; top:19px; width:22px;
  border-top:1px dashed var(--accent-line); }
.branch:hover { color:var(--ink); background:var(--surface-2); }
.branch .bno { font-family:var(--mono); font-size:11.5px; color:var(--accent); font-weight:500;
  flex:0 0 auto; }
.branch[aria-expanded="true"] { border-style:solid; border-color:var(--accent);
  background:var(--accent-soft); color:var(--ink); font-weight:500; }
.clean { font-size:13px; color:var(--good); font-family:var(--mono); letter-spacing:.05em;
  padding:13px 0 0 22px; }

/* ---------- inline detail ---------- */
.dpanel { margin:10px 0 2px 22px; background:var(--surface); border:1px solid var(--accent-line);
  border-left:3px solid var(--accent); border-radius:var(--r); padding:20px 22px 21px;
  box-shadow:var(--shadow); }
.dpanel[hidden] { display:none; }
.dno { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--accent); }
.dpanel h3 { font-family:var(--serif); font-size:21px; font-weight:600; line-height:1.2;
  margin:7px 0 11px; letter-spacing:-.01em; text-wrap:balance; }
.dpanel p { color:var(--ink-soft); font-size:14.5px; margin:0 0 13px; max-width:70ch; }
.dpanel p.fix { color:var(--ink); }
.dpanel p.fix b { color:var(--accent); }
.chain { margin:0 0 11px; }
.chain .cl { font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  display:block; margin-bottom:6px; }
.chain .pills { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.chain .p { border:1px solid; border-radius:var(--r); padding:4px 9px; font-size:12.5px; }
.chain i { font-style:normal; color:var(--ink-faint); font-size:12px; }
.chain .mk { font-weight:700; margin-left:3px; }
.bad .cl { color:var(--warn); }
.bad .p { border-style:dashed; border-color:var(--warn-line); background:var(--warn-soft); color:var(--warn); }
.bad .mk { color:var(--warn); }
.good .cl { color:var(--good); }
.good .p { border-color:var(--good-line); background:var(--good-soft); color:var(--good); }
.good .mk { color:var(--good); }
.foot2 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:15px;
  padding-top:13px; border-top:1px solid var(--line); }
.foot2 .tags { display:flex; gap:5px; flex-wrap:wrap; flex:1; }
.foot2 .tags span { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line);
  padding:3px 7px; border-radius:20px; }
.foot2 button { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid var(--line-2); padding:7px 11px;
  border-radius:var(--r); color:var(--ink-soft); }
.foot2 button:hover:not(:disabled) { color:var(--ink); border-color:var(--accent-line); }
.foot2 button:disabled { opacity:.35; cursor:default; }

/* ---------- decisions ---------- */
.dcards { display:grid; gap:12px; }
.dcard { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
         border-radius:var(--r); padding:16px 18px 17px; }
.dcard h4 { font-size:16px; font-weight:600; margin:0 0 10px; display:flex; align-items:center;
            gap:9px; flex-wrap:wrap; }
.tag { font-family:var(--mono); font-size:9px; letter-spacing:.11em; color:var(--accent);
       border:1px solid var(--accent-line); padding:2px 6px; border-radius:20px; }
.opts { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.opt { font-size:13px; border:1px solid var(--line-2); border-radius:var(--r); padding:5px 11px;
       color:var(--ink-faint); }
.opt.rec { border-color:var(--accent); background:var(--accent-soft); color:var(--accent);
           font-weight:600; }
.opt.rec::after { content:" ✓"; }
.dcard p { margin:0; color:var(--ink-soft); font-size:14px; }

/* ---------- start ---------- */
.phases { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.phase { border-top:2px solid var(--accent); padding-top:14px; position:relative; }
.phase::before { content:""; position:absolute; top:-5px; left:0; width:8px; height:8px;
                 border-radius:50%; background:var(--accent); }
.phase .when { font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
               color:var(--accent); margin-bottom:12px; }
.phase ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.phase b { display:block; font-size:14.5px; margin-bottom:2px; }
.phase span { color:var(--ink-soft); font-size:13.5px; line-height:1.5; }

footer { border-top:1px solid var(--line); padding:26px 0 60px; color:var(--ink-faint);
         font-family:var(--mono); font-size:11px; letter-spacing:.06em; }
footer a { color:var(--ink-soft); text-decoration:none; }
footer a:hover { color:var(--accent); }

@media (max-width:900px) {
  .crow { grid-template-columns:1fr; row-gap:10px; }
  .cspine.has::before { display:none; }
  .crow:not(:last-child) .cspine::after { top:auto; height:10px; bottom:-10px; }
  .rail { margin-left:26px; }
  .dpanel { margin-left:26px; padding:17px 18px 18px; }
  .sysrow { grid-template-columns:repeat(2,1fr); }
  .phases { grid-template-columns:1fr; gap:26px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* ---------- full map ---------- */
.mapwrap { overflow:auto; max-height:66vh; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:20px 22px; resize:vertical; }
.mapwrap svg.map { width:100%; min-width:830px; height:auto; display:block; }
.map text { font-family:var(--sans); fill:var(--ink); }
.map .phase { font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; fill:var(--accent); }
.map .hair { stroke:var(--line); stroke-width:1; }
.map .n-term rect { fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.6; }
.map .n-box rect { fill:var(--surface-2); stroke:var(--line-2); stroke-width:1.2; }
.map .n-dia polygon { fill:var(--surface); stroke:var(--ink-faint); stroke-width:1.2; }
.map .n-ok rect { fill:var(--accent-soft); stroke:var(--accent-line); stroke-width:1.1;
  stroke-dasharray:3 2.5; }
.map .n-ok text { fill:var(--ink-soft); }
.map .n-stop rect { fill:var(--warn-soft); stroke:var(--warn-line); stroke-width:1.1;
  stroke-dasharray:3 2.5; }
.map .n-stop text { fill:var(--warn); }
.map .edge { stroke:var(--ink-faint); stroke-width:1.3; fill:none; }
.map .edge-d { stroke:var(--accent-line); stroke-width:1.1; stroke-dasharray:3 2.5; fill:none; }
.map .ah { fill:var(--ink-faint); }
.map .ahd { fill:var(--accent-line); }
.map .edgelbl { fill:var(--ink-faint); font-family:var(--mono); font-size:9px; }
.map .pin { fill:var(--accent); }
.map .pinno { fill:var(--surface); font-family:var(--mono); font-weight:600; }
.map [data-point] { cursor:pointer; }
.map [data-point] rect, .map [data-point] polygon { transition:stroke .14s, stroke-width .14s; }
.map [data-point]:hover rect, .map [data-point]:hover polygon,
.map [data-point]:focus-visible rect, .map [data-point]:focus-visible polygon {
  stroke:var(--accent); stroke-width:2.2; }
.map [data-point].on rect, .map [data-point].on polygon { stroke:var(--accent); stroke-width:2.4; }
#mapdetail { margin:14px 0 0; position:sticky; bottom:12px; z-index:20;
  max-height:46vh; overflow:auto; }
#mapdetail .close { position:absolute; top:12px; right:14px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.08em; color:var(--ink-faint); border:1px solid var(--line);
  padding:4px 8px; border-radius:var(--r); background:var(--surface); }
#mapdetail .close:hover { color:var(--ink); border-color:var(--accent-line); }
#mapdetail { position:sticky; }
.linkish { color:var(--accent); text-decoration:underline; text-underline-offset:2px;
  font:inherit; padding:0; }
@media (max-width:900px) { .mapwrap { max-height:58vh; padding:14px; }
  #mapdetail { max-height:52vh; } }

@media (max-width:560px) {
  .tab { padding:11px 9px 9px; font-size:10.5px; letter-spacing:.06em; }
  .mapwrap::after { content:""; }
}
.scrollhint { display:none; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin:8px 0 0; }
@media (max-width:900px) { .scrollhint { display:block; } }