/* Real Options for Network Design — shared styles (blueprint theme) */
:root{
  --bg:#0a2f52; --panel:#0d3a63; --panel-2:#082444; --line:#2a5580; --line-soft:#1d4470;
  --ink:#bfe4ff; --ink-dim:#8fd0f2; --ink-faint:#6fa8c9; --accent:#7dd3fc; --accent-ink:#04202b;
  --good:#3ddc97; --warn:#ffcf4a; --bad:#ff8a7a;
  --s1:#1f9fd8; --s2:#c7820c; --s3:#e0558f; --s4:#4f9f15; --s5:#9085e9;   /* validated categorical order for the dark panel */
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --head:'Rajdhani', 'Arial Narrow', sans-serif;
  --body:'Barlow', 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);}
a{color:var(--accent);}
code,.mono{font-family:var(--mono); font-size:.92em;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 20px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0d3a63,#0a2f52); position:sticky; top:0; z-index:30;}
.brand{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.brand .mark{font-family:var(--head); font-weight:700; font-size:22px; letter-spacing:.04em; margin:0;}
.brand .mark span{color:var(--accent);}
.brand .ver{font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); border:1px solid var(--line); border-radius:5px; padding:1px 6px;}
.brand .sub{font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.03em;}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; align-items:center;}
.back-link{font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); text-decoration:none; padding:6px 10px; border:1px solid var(--line); border-radius:6px; white-space:nowrap;}
.back-link:hover{color:var(--accent); border-color:var(--accent);}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; min-width:0;}
h2.sec{font-family:var(--head); font-weight:700; font-size:16px; letter-spacing:.07em; text-transform:uppercase; margin:0 0 6px;}
.blurb{font-size:14px; line-height:1.55; color:var(--ink-dim); margin:0 0 10px; max-width:82ch;}
.caption{font-size:13px; color:var(--ink-faint); margin:8px 0 0; line-height:1.5;}

/* ---- intro */
.intro{max-width:1180px; margin:0 auto; padding:26px 20px 6px;}
.intro h1{font-family:var(--head); font-weight:700; font-size:34px; margin:0 0 8px; line-height:1.1;}
.intro .lede{font-size:16.5px; line-height:1.6; color:var(--ink-dim); max-width:860px; margin:0 0 8px;}
.optcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0 8px;}
.optcard{border-left:4px solid; padding:6px 0 6px 12px;}
.optcard .tag{font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em;}
.optcard b{display:block; font-family:var(--head); font-size:18px; letter-spacing:.03em;}
.optcard p{margin:3px 0 0; font-size:13.5px; color:var(--ink-dim); line-height:1.45;}
.optcard.next{opacity:.7; border-left-style:dashed;}
details.map{margin:10px 0 0; font-size:14px; color:var(--ink-dim);}
details.map summary{cursor:pointer; color:var(--accent); font-family:var(--head); font-weight:600; letter-spacing:.04em;}
table.rox{width:100%; border-collapse:collapse; margin-top:8px; font-size:13.5px;}
table.rox th,table.rox td{border-bottom:1px solid var(--line-soft); padding:6px 8px; text-align:left; vertical-align:top;}
table.rox th{font-family:var(--head); letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; font-size:12px;}

/* ---- layout */
.layout{display:grid; grid-template-columns:330px minmax(0,1fr); gap:16px; max-width:1180px; margin:0 auto; padding:16px 20px 30px; align-items:start;}
.controls{position:sticky; top:62px; max-height:calc(100vh - 74px); overflow-y:auto; background:var(--panel-2);}
.presets{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px;}
.presets button,.seg button{font:inherit; font-size:12.5px; padding:5px 9px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--ink-dim); cursor:pointer;}
.presets button:hover,.seg button:hover{border-color:var(--accent); color:var(--accent);}
.presets button[aria-pressed="true"],.seg button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.cgrp{border-left:3px solid var(--line); padding:0 0 4px 10px; margin-bottom:14px;}
.cgrp h3{font-family:var(--head); font-weight:700; font-size:14px; letter-spacing:.07em; text-transform:uppercase; margin:0 0 6px; color:var(--ink);}
.ctl{margin-bottom:8px;}
.ctl .row{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13.5px;}
.ctl .row label{color:var(--ink);}
.ctl .row output{font-family:var(--mono); font-size:12px; color:var(--accent); white-space:nowrap;}
.ctl input[type=range]{width:100%; accent-color:var(--accent); margin:3px 0 0;}
.ctl .hint{font-size:11.5px; color:var(--ink-faint); line-height:1.35;}
.ctl .row.check{justify-content:flex-start; gap:8px;}
.ctl .row.check input{accent-color:var(--accent); width:16px; height:16px; margin:0;}
.seg{display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 8px;}
.derived{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); line-height:1.6; border-top:1px solid var(--line-soft); padding-top:8px;}

.stage{display:flex; flex-direction:column; gap:16px; min-width:0;}
.warn{border:1px solid var(--warn); color:var(--warn); background:rgba(255,207,74,.07); border-radius:10px; padding:8px 12px; font-size:13.5px;}
.headline{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 18px; align-items:center;}
.headline .big{font-family:var(--head); font-weight:700; font-size:46px; line-height:1; color:var(--accent);}
.headline .big.neg{color:var(--bad);}
.headline .what{font-size:15px; line-height:1.5; color:var(--ink-dim);}
.headline .what b{color:var(--ink);}
.scorecards{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px;}
.score{background:var(--panel); border:1px solid var(--line); border-top:4px solid; border-radius:10px; padding:10px 12px;}
.score.win{box-shadow:0 0 0 1px var(--accent) inset;}
.score .nm{font-family:var(--head); font-weight:700; font-size:15px; letter-spacing:.04em; text-transform:uppercase;}
.score .v{font-family:var(--head); font-weight:700; font-size:26px; margin:2px 0;}
.score .d{font-size:12.5px; color:var(--ink-dim); line-height:1.4;}
.score .badge{font-family:var(--mono); font-size:10.5px; color:var(--accent-ink); background:var(--accent); border-radius:4px; padding:0 5px; margin-left:4px; vertical-align:2px;}
.grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px;}
svg.chart{width:100%; height:auto; display:block; overflow:visible;}
svg.chart text{fill:var(--ink-faint); font-family:var(--mono); font-size:11px;}
svg.chart .axis{stroke:var(--line); stroke-width:1;}
svg.chart .grid{stroke:var(--line-soft); stroke-width:1;}
svg.chart .lbl{fill:var(--ink-dim); font-family:var(--body); font-size:12px;}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink-dim); margin-top:6px;}
.legend i{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:5px;}
.legend i.line{height:3px; border-radius:2px; vertical-align:3px;}
.legend i.dash{height:0; border-top:2px dashed; border-radius:0; vertical-align:3px; background:none !important;}
#tt{position:fixed; pointer-events:none; z-index:50; background:#04202b; border:1px solid var(--line); border-radius:8px; padding:6px 9px; font-size:12.5px; color:var(--ink); line-height:1.45; max-width:280px; display:none;}
#tt b{font-family:var(--head); letter-spacing:.03em;}
table.data{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:8px;}
table.data th,table.data td{border-bottom:1px solid var(--line-soft); padding:4px 6px; text-align:right; font-family:var(--mono);}
table.data th:first-child,table.data td:first-child{text-align:left;}
details.tv summary{cursor:pointer; font-size:12.5px; color:var(--ink-faint); margin-top:6px;}

/* ---- model */
.eqs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px;}
.eq{min-width:0;}
.eq h4{font-family:var(--head); font-weight:700; font-size:15px; letter-spacing:.04em; margin:0 0 4px; color:var(--ink);}
.eq p{margin:0 0 6px; font-size:13.5px; color:var(--ink-dim); line-height:1.5;}
.eq .f{font-family:var(--mono); font-size:12.5px; background:var(--panel-2); border:1px solid var(--line-soft); border-radius:6px; padding:6px 9px; color:var(--ink); overflow-x:auto; white-space:pre; margin:0 0 6px;}

.foot{border-top:1px solid var(--line); padding:16px 20px 26px; font-size:12.5px; color:var(--ink-faint); text-align:center; line-height:1.7;}
.foot .consult{display:block; color:var(--ink-dim);}

@media (max-width:960px){
  .layout{grid-template-columns:1fr;}
  .controls{position:static; max-height:none;}
  .scorecards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .grid2,.eqs{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .intro,.layout{padding-left:16px; padding-right:16px;}
  .optcards{grid-template-columns:1fr;}
  .headline{grid-template-columns:1fr;}
  .intro h1{font-size:27px;}
}

/* ---- page tabs and the network page */
.actions .back-link[aria-current="page"]{color:var(--accent-ink); background:var(--accent); border-color:var(--accent);}
.maptools{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 0 8px;}
.maptools .seg{margin:0;}
.maptools .yr{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-dim);}
.maptools .yr input{accent-color:var(--accent); width:180px;}
.maptools .yr output{font-family:var(--mono); font-size:12px; color:var(--accent); min-width:2.5em;}

/* ---- calibration panel */
details.calib{padding:0;}
details.calib > summary{cursor:pointer; list-style:none; padding:12px 16px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; font-family:var(--head); font-weight:700; font-size:16px; letter-spacing:.07em; text-transform:uppercase;}
details.calib > summary::-webkit-details-marker{display:none;}
details.calib > summary::before{content:"\25B8"; color:var(--accent);}
details.calib[open] > summary::before{content:"\25BE";}
details.calib .calib-sub{font-family:var(--body); font-weight:400; font-size:13px; letter-spacing:0; text-transform:none; color:var(--ink-faint);}
.calib-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:16px; padding:0 16px 16px;}
.calib-text{width:100%; box-sizing:border-box; font-family:var(--mono); font-size:12px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px; resize:vertical; margin:6px 0;}
.calib-in input[type=file]{font-size:12.5px; color:var(--ink-dim); max-width:100%;}
.calib-opts{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:8px;}
.calib-opt{display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--ink-dim);}
.calib-opt.check{flex-direction:row; align-items:center; gap:6px; align-self:flex-end;}
.calib-opt select{font:inherit; font-size:12.5px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:4px 6px;}
.calib-warn{margin:6px 0 0; padding-left:18px; color:var(--warn); font-size:12.5px; line-height:1.45;}
.calib-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.btn-apply{font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); border-radius:8px; padding:7px 12px; cursor:pointer;}
.btn-apply:disabled{opacity:.4; cursor:default;}
p.warn{margin:6px 0;}

/* ---- scenario comparison */
.cmp-save{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px;}
.cmp-save input{font:inherit; font-size:13.5px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 10px; min-width:0; flex:1 1 200px; max-width:320px;}
.cmp-wrap{overflow-x:auto;}
table.cmp td.dflt{color:var(--ink-faint);}
table.cmp td.top{color:var(--accent); font-weight:600;}
table.cmp tr.sep td{border-bottom:1px solid var(--line); padding:2px;}
table.cmp td.acts{font-family:var(--body); font-size:12px; white-space:nowrap;}
.linkish{font:inherit; color:var(--accent); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline;}
button.back-link{background:transparent; cursor:pointer; font-family:var(--head);}

/* ---- tutorial */
.tour-menu{position:fixed; z-index:60; width:min(340px, calc(100vw - 16px)); background:var(--panel); border:1px solid var(--accent); border-radius:12px; padding:10px; box-shadow:0 12px 30px rgba(0,0,0,.4);}
.tour-menu-h{font-family:var(--head); font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin:2px 4px 8px; font-size:14px;}
.tour-level{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; font:inherit; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin-bottom:6px; cursor:pointer;}
.tour-level:hover{border-color:var(--accent);}
.tour-level b{font-family:var(--head); font-size:16px; letter-spacing:.04em;}
.tour-level span{font-size:13px; color:var(--ink-dim); line-height:1.4;}
.tour-level em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--accent);}
.tour-card{position:fixed; z-index:55; right:18px; bottom:18px; width:min(380px, calc(100vw - 24px)); max-height:min(70vh, 560px); overflow-y:auto; background:var(--panel); border:1px solid var(--accent); border-radius:14px; padding:12px 16px 14px; box-shadow:0 16px 40px rgba(0,0,0,.45);}
.tour-top{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em;}
.tour-x{font-size:20px; line-height:1; background:none; border:none; color:var(--ink-dim); cursor:pointer; padding:2px 4px;}
.tour-bar{height:3px; background:var(--line-soft); border-radius:2px; margin:6px 0 8px;}
.tour-bar i{display:block; height:100%; background:var(--accent); border-radius:2px;}
.tour-card h3{font-family:var(--head); font-weight:700; font-size:19px; letter-spacing:.03em; margin:0 0 6px;}
.tour-body{font-size:14px; line-height:1.55; color:var(--ink-dim);}
.tour-body b{color:var(--ink);}
.tour-quiz{margin-top:10px; border-top:1px dashed var(--line); padding-top:8px;}
.tour-quiz p{margin:0 0 6px; font-weight:600; font-size:14px;}
.tour-quiz button{display:block; width:100%; text-align:left; font:inherit; font-size:13.5px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:6px 10px; margin-bottom:5px; cursor:pointer;}
.tour-quiz button:hover:not(:disabled){border-color:var(--accent);}
.tour-quiz button.right{border-color:var(--good); color:var(--good);}
.tour-quiz button.wrong{border-color:var(--bad); color:var(--bad);}
.tour-fb{font-size:13.5px; line-height:1.5; color:var(--ink-dim); margin-top:4px;}
.tour-nav{display:flex; justify-content:space-between; gap:8px; margin-top:12px;}
.tour-nav button{font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:8px; padding:7px 14px; cursor:pointer;}
.tour-nav .tour-next{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.tour-nav button:disabled{opacity:.4; cursor:default;}
.tour-hl{outline:3px solid var(--accent) !important; outline-offset:4px; border-radius:8px; position:relative; z-index:20;}
@media (max-width:620px){
  .calib-body{grid-template-columns:1fr;}
  .tour-card{left:8px; right:8px; bottom:8px; width:auto; max-height:46vh;}
}

/* ---- the decision report */
.report{max-width:960px; margin:0 auto; padding:26px 20px 30px;}
.rep-head h1{font-family:var(--head); font-weight:700; font-size:34px; margin:4px 0;}
.rep-head .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0;}
.rep-meta{color:var(--ink-dim); font-size:14px; margin:0 0 10px;}
.report section{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:14px 0; break-inside:avoid;}
.report h2{font-family:var(--head); font-weight:700; font-size:18px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 8px;}
.report h3{font-family:var(--head); font-size:14px; letter-spacing:.05em; text-transform:uppercase; margin:6px 0 4px; color:var(--ink-dim);}
.report p{line-height:1.6; color:var(--ink-dim); margin:0 0 8px;}
.report b{color:var(--ink);}
.report .data{display:table;}
.report section{overflow-x:auto;}
.rep-big{font-family:var(--head); font-weight:700; font-size:28px; color:var(--ink) !important; margin:0 0 6px !important;}
.rep-big span{color:var(--accent);}
.rep-table th.txt{text-align:left;}
.rep-table td.txt{font-family:var(--body); text-align:left; white-space:normal;}
.rep-table tr.top td{color:var(--accent); font-weight:600;}
.rep-assume{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:4px 18px;}
.rep-assume td.chg{color:var(--accent); font-weight:600;}
@media print{
  :root{--bg:#fff; --panel:#fff; --panel-2:#fff; --ink:#111; --ink-dim:#333; --ink-faint:#666; --line:#bbb; --line-soft:#ddd; --accent:#0b5c8a;}
  body{background:#fff !important; color:#111;}
  .no-print{display:none !important;}
  .report{padding:0; max-width:none;}
  .report section{border:none; border-top:1px solid #bbb; border-radius:0; padding:10px 0; margin:8px 0;}
  a{color:#0b5c8a;}
}

/* ---- illustrations */
svg.il{width:100%; height:auto; display:block; overflow:visible;}
svg.il .il-t{fill:var(--ink-faint); font-family:var(--mono); font-size:9px; paint-order:stroke; stroke:var(--panel-2); stroke-width:3px; stroke-linejoin:round;}
svg.il .il-t.sm{font-size:8px;}
.gallery{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:18px 0 8px;}
.gallery.g4{grid-template-columns:repeat(4,minmax(0,1fr));}
.scard{margin:0; background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--c); border-radius:12px; padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px;}
.scard-il{background:var(--panel-2); border-radius:8px; padding:6px 4px 2px;}
.scard figcaption{display:flex; flex-direction:column; gap:2px;}
.scard .tag{font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em;}
.scard b{font-family:var(--head); font-size:17px; letter-spacing:.03em; color:var(--ink);}
.scard figcaption > span:last-child{font-size:13px; color:var(--ink-dim); line-height:1.45;}
.figs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:4px 0 16px;}
.figs figure{margin:0; background:var(--panel-2); border:1px solid var(--line-soft); border-radius:10px; padding:10px 10px 8px;}
.figs figcaption{font-size:12.5px; color:var(--ink-dim); line-height:1.45; margin-top:6px;}
.tour-il{background:var(--panel-2); border:1px solid var(--line-soft); border-radius:10px; padding:6px 6px 2px; margin:2px 0 8px;}
.tour-il svg.il{max-height:130px;}
.rep-il{float:right; width:min(260px, 42%); margin:0 0 8px 14px; background:var(--panel-2); border-radius:10px; padding:6px;}
@media (max-width:1100px){ .gallery{grid-template-columns:repeat(3,minmax(0,1fr));} .gallery.g4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){ .gallery, .gallery.g4{grid-template-columns:repeat(2,minmax(0,1fr));} .figs{grid-template-columns:1fr;} }
@media (max-width:480px){ .gallery, .gallery.g4{grid-template-columns:1fr;} .rep-il{float:none; width:100%; margin:0 0 8px;} .tour-il svg.il{max-height:96px;} }
@media print{ .rep-il{background:#fff; border:1px solid #ddd;} svg.il .il-t{fill:#555;} }