/* css/style.css */

:root{
  --bg:#eef2f7; --card:#fff; --ink:#0f172a; --muted:#64748b;
  --accent:#2563eb; --accent-soft:#dbeafe; --ok:#16a34a; --warn:#d97706;
  --border:#dbe3ee; --radius:14px;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 8px 24px -12px rgba(15,23,42,.20);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5; font-size:15px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ---------- header ---------- */
header.top{background:linear-gradient(135deg,#0b1220 0%,#1e3a8a 100%);color:#fff;padding:20px 26px 22px}
header.top h1{margin:0;font-size:20px;letter-spacing:.2px}
header.top p{margin:6px 0 0;font-size:13px;color:#bfdbfe;max-width:900px}

.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.topactions{display:flex;gap:6px;flex-wrap:wrap}
.topactions .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff;font-size:12.5px;padding:6px 11px}
.topactions .btn:hover{background:rgba(255,255,255,.2)}

.pin-dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #1e3a8a;display:none}
.pin-dot.set{display:block}
.pinA .pin-dot{background:#22c55e}.pinB .pin-dot{background:#f59e0b}

.snapshot-bar{display:flex;align-items:center;gap:8px;padding:8px 26px;background:#f8fafc;border-bottom:1px solid var(--border);flex-wrap:wrap;font-size:12.5px}
.snapshot-bar .label{color:var(--muted);font-weight:600}
.snapshot-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:4px 10px;cursor:pointer;transition:.15s;font-size:12px}
.snapshot-chip:hover{background:#eff6ff;border-color:#bfdbfe}
.snapshot-chip.active{background:#dbeafe;border-color:var(--accent)}
.snapshot-chip .del{color:#94a3b8;font-weight:700;font-size:14px;line-height:1}
.snapshot-chip .del:hover{color:#dc2626}
.snapshot-chip .age{color:#94a3b8;font-size:10.5px}


/* ---------- pipeline nav ---------- */
nav.stepnav{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:12px 26px;background:#fff;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;box-shadow:0 2px 10px -6px rgba(15,23,42,.25);
}
.navbtn{
  display:flex;align-items:center;gap:10px;background:#f8fafc;border:1px solid var(--border);
  border-radius:10px;padding:8px 14px;cursor:pointer;font:inherit;color:var(--ink);transition:.15s;
}
.navbtn:hover{background:#eef4ff;border-color:#bfdbfe}
.navbtn.active{background:#eff6ff;border-color:var(--accent);box-shadow:0 0 0 2px #dbeafe}
.navbtn .num{width:24px;height:24px;border-radius:50%;background:#cbd5e1;color:#0f172a;
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.navbtn.active .num{background:var(--accent);color:#fff}
.navbtn .txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.navbtn .txt b{font-size:13px}
.navbtn .txt small{font-size:11px;color:var(--muted)}
.navbtn.active .txt small{color:#1d4ed8}
.arrow{color:#94a3b8;font-size:16px}

/* ---------- layout ---------- */
main{padding:22px 26px 70px;max-width:1500px;margin:0 auto}
.step{display:none}
.step.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.grid.wide-left{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media(max-width:1100px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;margin-bottom:18px}
.card h3{margin:0 0 4px;font-size:15px}
.card .hint{margin:0 0 12px;font-size:12.5px;color:var(--muted)}

/* ---------- concept card ---------- */
.concept{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);margin-bottom:18px}
.concept h2{margin:0 0 6px;font-size:17px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{font-size:11px;font-weight:700;background:var(--accent-soft);color:#1d4ed8;padding:3px 9px;border-radius:999px}
.concept p.q{margin:0 0 14px;color:var(--muted);font-size:14px}
.io{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.io{grid-template-columns:1fr}}
.io .box{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:#f8fafc}
.io .box.out{background:#f0fdf4;border-color:#bbf7d0}
.io h4{margin:0 0 8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.io ul{margin:0;padding-left:18px;font-size:13.5px}
.io li{margin:3px 0}

/* ---------- model formula box ---------- */
.model{background:#0f172a;color:#e2e8f0;border-radius:10px;padding:12px 14px;font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin:0 0 14px;overflow-x:auto}
.model div{margin:3px 0;white-space:nowrap}
.model .k{color:#7dd3fc}
.model .c{color:#fbbf24}

/* ---------- forms ---------- */
.rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px}
.rate{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.rate label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.rate input[type=number]{width:100%;padding:5px 7px;border:1px solid var(--border);border-radius:7px;
  font:inherit;font-size:14px;text-align:right;background:#fff}
.rate input[type=range]{width:100%;accent-color:var(--accent)}
.rate select{width:100%;padding:5px 7px;border:1px solid var(--border);border-radius:7px;
  font:inherit;font-size:13.5px;background:#fff}
.rate b{color:var(--accent)}
input:focus,select:focus{outline:2px solid #bfdbfe;outline-offset:-1px;border-color:var(--accent)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;
  background:#f8fafc;position:sticky;top:0}
tbody tr:hover{background:#f8fbff}
td input[type=number]{width:74px;padding:4px 6px;border:1px solid var(--border);border-radius:7px;
  font:inherit;font-size:13px;text-align:right}
td input.zname{width:80px;text-align:left;padding:4px 6px;border:1px solid var(--border);border-radius:7px;font:inherit;font-size:13px}
.computed{color:var(--muted);font-variant-numeric:tabular-nums}
td.hl{color:#1d4ed8;font-weight:600;background:#eff6ff}
tr.tot td{font-weight:700;border-top:2px solid var(--border);border-bottom:none;background:#f8fafc}
.tblwrap{overflow-x:auto}


/* OD matrix specific */
#odTable td.odcell{font-variant-numeric:tabular-nums;text-align:right;font-size:12.5px;padding:5px 7px}
#odTable th, #odTable td{padding:5px 7px}
#odTable td.sep, #odTable th.sep{border-left:2px solid #cbd5e1}

/* Mode Choice table */
#modeTable td.odcell{font-variant-numeric:tabular-nums;text-align:right;font-size:12.5px;padding:5px 7px;cursor:pointer;transition:outline .1s}
#modeTable th, #modeTable td{padding:5px 7px}
#modeTable td.sep, #modeTable th.sep{border-left:2px solid #cbd5e1}
#modeTable td.odcell:hover{outline:2px solid #fbbf24;outline-offset:-2px}
#modeTable td.odcell.picked{outline:3px solid #d97706;outline-offset:-3px}


/* ---------- buttons ---------- */
.btn{font:inherit;font-size:13px;padding:7px 13px;border-radius:9px;border:1px solid var(--border);
  background:#fff;cursor:pointer;transition:.15s}
.btn:hover{background:#f1f5f9}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#1d4ed8}
.btn.danger{color:#b91c1c;border-color:#fecaca}
.btn.danger:hover{background:#fef2f2}
.btn.toggle.active{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.small{font-size:12px;padding:5px 10px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}


.segcontrol{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#f8fafc;margin-bottom:10px;flex-wrap:wrap}
.segcontrol button{background:transparent;border:none;padding:7px 14px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--muted);border-right:1px solid var(--border)}
.segcontrol button:last-child{border-right:none}
.segcontrol button.active{background:var(--accent);color:#fff;font-weight:600}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.stat{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.stat span{display:block;font-size:11.5px;color:var(--muted)}
.stat b{font-size:17px;font-variant-numeric:tabular-nums}
.stat.ok{background:#f0fdf4;border-color:#bbf7d0}
.stat.ok b{color:#15803d}
.stat.bad{background:#fef2f2;border-color:#fecaca}
.stat.bad b{color:#b91c1c}
.stat.info{background:#eff6ff;border-color:#bfdbfe}
.stat.info b{color:#1d4ed8}
.stat.warn{background:#fffbeb;border-color:#fde68a}
.stat.warn b{color:#92400e}
.stat.car{background:#eff6ff;border-color:#bfdbfe}
.stat.car b{color:#1d4ed8}
.stat.bus{background:#fff7ed;border-color:#fed7aa}
.stat.bus b{color:#c2410c}
.stat.poa{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#fbbf24}
.stat.poa b{color:#92400e;font-size:20px}
.stat.eco{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-color:#86efac}.stat.eco b{color:#166534}


/* ---------- chart ---------- */
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-bottom:8px;align-items:center}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.sw.p{background:linear-gradient(180deg,#3b82f6,#1d4ed8)}
.sw.a{background:linear-gradient(180deg,#fbbf24,#d97706)}
.sw.car{background:linear-gradient(180deg,#60a5fa,#1d4ed8)}
.sw.bus{background:linear-gradient(180deg,#fdba74,#c2410c)}
.sw.fb{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.sw.ue{background:linear-gradient(180deg,#3b82f6,#1d4ed8)}
.sw.so{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.sw.msa{background:linear-gradient(180deg,#3b82f6,#1d4ed8)}
.sw.fw{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.sw.em{background:linear-gradient(180deg,#a3e635,#dc2626)}


.chart{display:flex;align-items:flex-end;gap:14px;padding:10px 6px 0;border-bottom:2px solid var(--border);min-height:190px}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.bars{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:158px}
.barwrap{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
.barval{font-size:9.5px;color:var(--muted);margin-bottom:3px;white-space:nowrap}
.bar{width:24px;border-radius:6px 6px 0 0;transition:height .35s ease}
.bar.p{background:linear-gradient(180deg,#3b82f6,#1d4ed8)}
.bar.a{background:linear-gradient(180deg,#fbbf24,#d97706)}
.lbl{text-align:center;font-size:12px;color:var(--muted);padding:6px 0 8px}

/* stacked modal-share bar */
.stackbar{height:34px;border-radius:10px;overflow:hidden;display:flex;
  border:1px solid var(--border);background:#f8fafc;margin-bottom:6px;font-size:12.5px;
  font-weight:600;color:#fff;line-height:34px;text-align:center}
.stackbar .seg{display:flex;align-items:center;justify-content:center;transition:width .35s ease;
  white-space:nowrap;overflow:hidden}
.stackbar .seg.car{background:linear-gradient(180deg,#3b82f6,#1d4ed8)}
.stackbar .seg.bus{background:linear-gradient(180deg,#fb923c,#c2410c)}

/* matrix picker row */
.pickerrow{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.pickerrow .btn{font-size:12px;padding:5px 11px}

/* ---------- handoff ---------- */
.handoff{border:2px dashed #bfdbfe;background:#f8fbff;border-radius:12px;padding:14px 16px;margin-top:6px}
.handoff h4{margin:0 0 8px;font-size:13px;color:#1d4ed8;display:flex;align-items:center;gap:8px}

/* ---------- misc ---------- */
.note{font-size:12.5px;color:var(--muted);margin-top:10px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.badge.good{background:#dcfce7;color:#15803d}
.badge.bad{background:#fee2e2;color:#b91c1c}
.badge.warn{background:#fef3c7;color:#92400e}
.badge.purple{background:#ede9fe;color:#6d28d9}
.wip{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;
  padding:12px 14px;font-size:13.5px;margin-top:14px}
.heatlegend{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin:6px 0 10px}
.heatbar{height:10px;width:130px;border-radius:3px;
  background:linear-gradient(90deg, rgba(37,99,235,0.05), rgba(37,99,235,0.8));border:1px solid #dbe3ee}
.formula-mini{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#334155;
  background:#f1f5f9;padding:2px 7px;border-radius:6px;display:inline-block}

/* inspector panel */
.inspect{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:13.5px}
.inspect h5{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.inspect table{font-size:13px}
.inspect table th{background:#fff}
.inspect .mini{font-size:11.5px;color:var(--muted);margin-top:6px;font-family:ui-monospace,Menlo,monospace}


/* Step 4 network SVG */
.netwrap{background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:8px;margin-bottom:10px}
.netwrap svg{width:100%;max-width:560px;display:block;margin:0 auto}
.netwrap.editing svg{cursor:crosshair}
.vclegend{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);flex-wrap:wrap;margin-top:6px}
.vcgrad{height:10px;width:180px;border-radius:5px;
  background:linear-gradient(90deg,#22c55e 0%,#84cc16 30%,#facc15 55%,#f97316 78%,#ef4444 100%);
  border:1px solid #dbe3ee}
.emgrad{height:10px;width:160px;border-radius:5px;background:linear-gradient(90deg,#a3e635 0%,#facc15 40%,#f97316 70%,#dc2626 100%);border:1px solid #dbe3ee}


#linkTable td input{width:66px}


/* validation panel */
.validpanel{position:fixed;bottom:14px;right:14px;max-width:360px;background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;z-index:50;font-size:13px;display:none}
.validpanel.show{display:block}
.validpanel h4{margin:0 0 8px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  display:flex;justify-content:space-between;align-items:center}
.validpanel .vlist{max-height:260px;overflow-y:auto;margin:0 -4px;padding:0 4px}
.validitem{padding:6px 8px;border-radius:7px;margin:4px 0;font-size:12.5px;display:flex;gap:8px;align-items:flex-start}
.validitem.warn{background:#fffbeb;color:#78350f}
.validitem.err{background:#fef2f2;color:#7f1d1d}
.validitem.ok{background:#f0fdf4;color:#14532d}
.validitem b{font-weight:700}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;
  justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(2px)}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:14px;box-shadow:0 20px 50px -12px rgba(0,0,0,.4);max-width:820px;width:100%;
  max-height:85vh;overflow:auto;padding:22px 24px}
.modal h2{margin:0 0 12px;font-size:19px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal .close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted);line-height:1;padding:0 4px}
.modal h3{margin:18px 0 6px;font-size:14px;color:var(--accent)}
.modal p, .modal li{font-size:13.5px}
.modal kbd{background:#f1f5f9;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;
  padding:1px 6px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px}

/* toast */
#toast-root { position: fixed; top: auto !important; bottom: 24px !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; align-items: center; }
.toast{background:#0f172a;color:#fff;padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);
  animation:slideup .2s ease; max-width:340px}
.toast.ok{background:#166534}.toast.err{background:#991b1b}.toast.warn{background:#92400e}
@keyframes slideup{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

/* collapsibles */
details.card summary { cursor: pointer; outline: none; list-style: none; display: flex; align-items: center; gap: 8px; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary h3 { margin: 0; color: #1e3a8a; }
details.card summary:hover h3 { color: var(--accent); }
details.card summary::before { content: '▶'; font-size: 10px; color: var(--muted); transition: transform 0.2s; }
details.card[open] summary::before { transform: rotate(90deg); }

/* tabs for reports */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px;flex-wrap:wrap}
.tab{background:transparent;border:none;border-bottom:2px solid transparent;padding:8px 14px;font:inherit;font-size:13px;
  cursor:pointer;color:var(--muted)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tabpanel{display:none}.tabpanel.active{display:block}

.comparematrix{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.comparebox{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#f8fafc}
.comparebox h5{margin:0 0 6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.comparebox b{font-size:18px;display:block;margin:2px 0}
.comparebox small{font-size:11.5px;color:var(--muted)}


.compare-tbl th,.compare-tbl td{padding:8px 10px;font-size:13px}
.delta-pos{color:#b91c1c;font-weight:600}.delta-neg{color:#15803d;font-weight:600}.delta-zero{color:#64748b}
.diffchart{display:grid;gap:8px;margin:14px 0}
.diffrow{display:grid;grid-template-columns:140px 1fr 100px;gap:8px;align-items:center;font-size:12.5px}
.diffbar{height:20px;position:relative;background:#f1f5f9;border-radius:4px;overflow:hidden}
.diffbar .zero{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#94a3b8}
.diffbar .neg{position:absolute;top:2px;bottom:2px;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:2px}
.diffbar .pos{position:absolute;top:2px;bottom:2px;background:linear-gradient(90deg,#ef4444,#dc2626);border-radius:2px}

.edit-hint{background:#fef3c7;color:#78350f;padding:6px 10px;border-radius:6px;font-size:12px;margin-bottom:8px;display:none}
.edit-hint.show{display:block}

.callout{background:#eff6ff;border-left:4px solid var(--accent);padding:10px 14px;border-radius:8px;font-size:13.5px;margin:12px 0}
.callout.warn{background:#fffbeb;border-color:#f59e0b}
.callout.danger{background:#fef2f2;border-color:#dc2626}
.callout.ok{background:#f0fdf4;border-color:#16a34a}
.callout.purple{background:#f5f3ff;border-color:#7c3aed}

/* tutorial overlay */
.tut-mask { position: fixed; inset: 0; background: rgba(15,23,42,0.7); z-index: 9000; opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(2px); }
.tut-mask.show { opacity: 1; pointer-events: auto; }
.tut-highlight { position: relative; z-index: 9001 !important; background: #fff !important; box-shadow: 0 0 0 4px #fbbf24, 0 10px 30px rgba(0,0,0,0.3) !important; border-radius: var(--radius); pointer-events: none; transition: all 0.3s ease; }
.tut-popover { position: absolute; z-index: 9002; width: 340px; background: #fff; border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s, top 0.4s ease, left 0.4s ease; transform: translateY(10px); }
.tut-popover.show { opacity: 1; pointer-events: auto; transform: none; }
.tut-header { background: #eff6ff; padding: 12px 16px; border-bottom: 1px solid #bfdbfe; border-radius: 10px 10px 0 0; display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #1e3a8a; }
.tut-body { padding: 16px; font-size: 14px; line-height: 1.5; color: #334155; }
.tut-body p { margin: 0 0 10px 0; }
.tut-body p:last-child { margin: 0; }
.tut-footer { padding: 12px 16px; background: #f8fafc; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; display: flex; justify-content: space-between; gap: 8px; }

/* resource link */
.resource-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .resource-link { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; transition: all 0.2s ease; border-left: 4px solid var(--accent); }
  .resource-link:hover { background: #eff6ff; border-color: #bfdbfe; transform: translateY(-2px); box-shadow: 0 6px 16px -4px rgba(37,99,235,0.12); }
  .resource-icon { font-size: 22px; line-height: 1; margin-top: 2px; }
  .resource-text strong { display: block; font-size: 13.5px; color: #1e3a8a; margin-bottom: 3px; }
  .resource-text span { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }

  /* back-link */
.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;
}

.back-link:hover {
    text-decoration: underline;
}


/* print */
@media print{
  header.top, nav.stepnav, .topactions, .btnrow, .validpanel, #toast-root, .modal-bg{display:none!important}
  body{background:#fff;font-size:11px}
  main{padding:0;max-width:none}
  .card,.concept,.handoff{box-shadow:none;border-color:#cbd5e1;page-break-inside:avoid;margin-bottom:12px}
  .step{display:block!important}
  .step::before{content:attr(data-print-title); display:block;font-size:14px;font-weight:700;margin:18px 0 8px;color:#0f172a}
  .grid{grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
  main{padding:14px 14px 60px}
  nav.stepnav{padding:8px 14px}
  .navbtn .txt small{display:none}
  header.top{padding:14px}
  header.top h1{font-size:16px}
  .validpanel{left:14px;right:14px;max-width:none}
  .diffrow{grid-template-columns:100px 1fr 70px;font-size:11.5px}
}