/* Tierwise — the blueprint theme shared with the other projects (same tokens, type and panels). */
: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; --tele:#7be0c4;
  --good:#1baf7a; --warn:#eda100; --bad:#e34948;
  /* the six tiers, in order from the consumer upstream (validated for the dark surface: lightness, CVD, contrast) */
  --t-market:#3987e5; --t-warehouse:#d95926; --t-packaging:#199e70; --t-dosing:#c98500; --t-product:#d55181; --t-raw:#9085e9;
  --land:#123f6b; --land-edge:#2a5580;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --head:'Rajdhani', 'Arial Narrow', sans-serif;
  --body:'Barlow', 'Helvetica Neue', Arial, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{background:var(--bg);}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);}
a{color:var(--accent);}
code{font-family:var(--mono); font-size:.92em; background:var(--panel-2); border:1px solid var(--line); padding:1px 5px; border-radius:4px;}

/* ---- header */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:12px 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; color:var(--ink); text-decoration:none;}
.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;}
.header-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
.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; background:transparent; cursor:pointer;}
.back-link:hover{color:var(--accent); border-color:var(--accent);}

/* ---- controls */
.controls{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 22px; padding:14px 22px; border-bottom:1px solid var(--line-soft); background:var(--panel-2);}
.ctl{display:flex; flex-direction:column; gap:4px; min-width:160px;}
.ctl > span{font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);}
.ctl output{font-family:var(--mono); font-size:12px; color:var(--tele);}
.ctl .row{display:flex; align-items:center; gap:8px;}
select.choice, input.num{font-family:var(--body); font-size:13px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:6px 8px;}
select.choice:focus, input.num:focus{outline:none; border-color:var(--accent);}
input[type=range]{-webkit-appearance:none; appearance:none; width:150px; height:4px; border-radius:2px; background:var(--line); outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid var(--accent-ink); box-shadow:0 0 0 2px var(--accent); cursor:pointer;}
input[type=range]::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid var(--accent-ink); cursor:pointer;}
input[type=range]:focus-visible{box-shadow:0 0 0 2px var(--accent);}
.seg{display:inline-flex; flex-wrap:wrap; max-width:100%; gap:3px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:3px;}
.seg button{background:transparent; border:none; border-radius:6px; color:var(--ink-dim); font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; cursor:pointer;}
.seg button.active{background:var(--accent); color:var(--accent-ink);}
.btn{font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:7px 12px; cursor:pointer;}
.btn:hover{border-color:var(--accent); color:var(--accent);}
.btn.small{padding:5px 9px; font-size:11px;}

/* ---- page */
.main{max-width:1500px; margin:0 auto; padding:18px 22px 0; display:flex; flex-direction:column; gap:18px;}
.errors{background:rgba(227,73,72,.1); border:1px solid rgba(227,73,72,.5); border-radius:8px; padding:10px 14px; font-family:var(--mono); font-size:12.5px; color:#ffb3b2;}
.headline{font-size:16.5px; line-height:1.55; color:var(--ink-dim); margin:0;}
.headline b{color:var(--ink);}
.panel{position:relative; background:var(--panel-2); border:1px solid var(--line); border-radius:2px; padding:16px 18px;}
.panel:before, .panel:after{content:""; position:absolute; width:10px; height:10px; pointer-events:none; border-color:var(--accent); border-style:solid; border-width:0;}
.panel:before{top:-1px; left:-1px; border-left-width:2px; border-top-width:2px;}
.panel:after{bottom:-1px; right:-1px; border-right-width:2px; border-bottom-width:2px;}
.panel h2{margin:0 0 4px; font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.panel-note{font-size:12.5px; line-height:1.5; color:var(--ink-faint); margin:0 0 10px;}
.grid2{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px;}

/* ---- tier outlook table */
.outlook{width:100%; border-collapse:collapse; font-size:12.5px;}
.outlook th, .outlook td{padding:7px 8px; border-bottom:1px dashed var(--line-soft); text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap;}
.outlook thead th{font-family:var(--head); font-size:11.5px; letter-spacing:.04em; color:var(--ink-dim); vertical-align:bottom; white-space:normal;}
.outlook tbody th{text-align:left; font-family:var(--body); font-weight:600; color:var(--ink);}
.outlook td.ok{color:var(--good);} .outlook td.warn{color:var(--warn);} .outlook td.bad{color:#ff8a89; font-weight:600;}
.swatch{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; vertical-align:0;}
.table-scroll{overflow-x:auto;}

/* ---- map */
.map-wrap{position:relative;}
svg.map, .chart svg.map{overflow:hidden; display:block; width:100%; height:auto; background:#08223f; border:1px solid var(--line-soft); border-radius:6px;}
.map .land{fill:var(--land); stroke:var(--land-edge); stroke-width:.6;}
.map .grat{stroke:var(--line-soft); stroke-width:.6; fill:none;}
.map .grat.eq{stroke:var(--ink-faint); stroke-dasharray:4 3;}
.map .grat.trop{stroke:var(--line); stroke-dasharray:2 4;}
.map .lat-label{font-family:var(--mono); font-size:10px; fill:var(--ink-faint);}
.map .lane{fill:none; stroke-width:1.2; opacity:.55;}
.map .lane.hl{opacity:1; stroke-width:2.2;}
.map .node{cursor:pointer;}
.map .node circle.core{stroke:#08223f; stroke-width:1.5;}
.map .node circle.halo{fill:none; stroke-width:2.5;}
.map .node.sel circle.core{stroke:var(--ink); stroke-width:2.5;}
.map .node text{font-family:var(--head); font-size:11px; fill:var(--ink-dim); pointer-events:none;}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--ink-dim);}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{display:inline-block; width:10px; height:10px; border-radius:50%;}
.legend i.ring{background:none; border:2.5px solid; width:12px; height:12px;}
.legend i.sq{border-radius:2px;}

/* ---- heatmap */
.heat-wrap{overflow-x:auto;}
svg.heat{display:block; min-width:900px; width:100%; height:auto;}
.heat .cell{stroke:var(--panel-2); stroke-width:1; cursor:pointer;}
.heat .rowlab{font-family:var(--body); font-size:11.5px; fill:var(--ink-dim); cursor:pointer;}
.heat .rowlab.sel{fill:var(--ink); font-weight:600;}
.heat .tierlab{font-family:var(--head); font-weight:700; font-size:11px; letter-spacing:.08em; fill:var(--ink-faint); text-transform:uppercase;}
.heat .collab{font-family:var(--mono); font-size:9.5px; fill:var(--ink-faint);}
.heat .divider{stroke:var(--ink-faint); stroke-dasharray:3 3;}
.heat .band{font-family:var(--head); font-size:11px; letter-spacing:.06em; fill:var(--ink-dim); text-transform:uppercase;}
.heat .rowsel{fill:rgba(125,211,252,.08);}
.scale{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--ink-dim); margin-top:8px; flex-wrap:wrap;}
.scale .bar{width:220px; height:10px; border-radius:3px;}

/* ---- charts */
.chart{position:relative;}
.chart svg{display:block; width:100%; height:auto; overflow:visible;}
.chart .grid{stroke:var(--line-soft); stroke-width:1;}
.chart .axis{stroke:var(--line); stroke-width:1;}
.chart .tick{font-family:var(--mono); font-size:10px; fill:var(--ink-faint);}
.chart .divider{stroke:var(--ink-faint); stroke-dasharray:3 3;}
.chart .band{font-family:var(--head); font-size:10.5px; letter-spacing:.06em; fill:var(--ink-dim); text-transform:uppercase;}
.chart .hit{fill:transparent; cursor:crosshair;}
.chart-title{font-family:var(--head); font-weight:600; font-size:13.5px; color:var(--ink); margin:0 0 2px;}
.chart-sub{font-size:11.5px; color:var(--ink-faint); margin:0 0 6px;}
.tip{position:absolute; pointer-events:none; z-index:20; background:rgba(4,32,60,.97); border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-family:var(--mono); font-size:11px; color:var(--ink); min-width:170px; box-shadow:0 6px 18px rgba(0,0,0,.35);}
.tip b{display:block; font-family:var(--head); font-size:12.5px; letter-spacing:.03em; color:var(--ink); margin-bottom:3px;}
.tip span{display:flex; justify-content:space-between; gap:14px; white-space:nowrap;}
.tip em{font-style:normal; color:var(--tele);}
.table-btn{background:none; border:none; padding:2px 0; margin-top:4px; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); text-decoration:underline; cursor:pointer;}
.table-btn:hover, .table-btn:focus-visible{color:var(--accent);}
.data-table{max-height:260px; overflow:auto; margin-top:6px; border:1px solid var(--line-soft); border-radius:6px;}
.data-table table{width:100%; border-collapse:collapse; font-size:11.5px;}
.data-table th, .data-table td{padding:4px 7px; border-bottom:1px dashed var(--line-soft); text-align:right; font-family:var(--mono); white-space:nowrap;}
.data-table th:first-child{text-align:left;}

/* ---- site details */
.facts{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:8px 0 12px;}
.fact{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px;}
.fact span{display:block; font-family:var(--head); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.fact b{display:block; font-family:var(--head); font-size:18px; color:var(--ink); font-variant-numeric:tabular-nums;}
.fact small{display:block; font-family:var(--mono); font-size:10px; color:var(--ink-faint);}
.fact.bad b{color:#ff8a89;} .fact.warn b{color:var(--warn);} .fact.ok b{color:var(--good);}
.lanes{font-size:12.5px; color:var(--ink-dim); line-height:1.6; margin:0;}
.lanes b{color:var(--ink);}

/* ---- ladder */
.ladder .step-prod{fill:var(--accent);} .ladder .step-rel{fill:var(--warn);} .ladder .step-tr{fill:var(--line);} .ladder .step-hand{fill:var(--ink-faint);}
.ladder text{font-family:var(--mono); font-size:10.5px; fill:var(--ink-dim);}
.ladder text.site{font-family:var(--body); font-size:11.5px; fill:var(--ink);}

/* ---- editor */
details.box{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:4px 18px;}
details.box summary{cursor:pointer; font-family:var(--head); font-weight:700; font-size:13.5px; padding:13px 0; color:var(--ink-dim); list-style:none;}
details.box summary::-webkit-details-marker{display:none;}
details.box summary:before{content:"▸ "; color:var(--accent);}
details.box[open] summary:before{content:"▾ ";}
details.box[open] summary{color:var(--ink);}
details.box p, details.box li{font-size:13.5px; line-height:1.65; color:var(--ink-dim);}
.edit{width:100%; border-collapse:collapse; font-size:12px; margin:6px 0 16px;}
.edit th{font-family:var(--head); font-size:11px; letter-spacing:.04em; color:var(--ink-faint); text-align:left; padding:4px 6px; border-bottom:1px solid var(--line-soft); vertical-align:bottom;}
.edit td{padding:3px 6px; border-bottom:1px dashed var(--line-soft); vertical-align:middle;}
.edit td.name{color:var(--ink); font-weight:500; white-space:nowrap;}
.edit input{width:84px; font-family:var(--mono); font-size:12px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:4px; padding:3px 5px; text-align:right;}
.edit input.wide{width:220px; text-align:left;}
.edit input:focus{outline:none; border-color:var(--accent);}
.edit .tier-h{font-family:var(--head); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--ink-faint); padding-top:12px;}

footer.foot{margin:24px 0 0; padding:22px 0 50px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:12.5px; line-height:1.7;}
footer.foot a{color:var(--ink-faint);}
footer.foot .consult{display:block; margin-bottom:6px; font-weight:600; color:var(--ink);}
footer.foot .consult a{color:var(--accent);}

@media (max-width:1100px){ .grid2{grid-template-columns:minmax(0,1fr);} .facts{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:700px){
  .topbar{padding:10px 14px;} .brand .sub{display:none;}
  .controls{padding:12px 16px;} .main{padding:14px 16px 0;}
  .ctl{min-width:140px;}
}

/* ---- KPI tiles, site header, small multiples */
.kpis{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px;}
.kpi-tile{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 12px;}
.kpi-label{font-family:var(--head); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.kpi-value{font-family:var(--head); font-size:21px; font-weight:700; color:var(--ink); margin-top:2px; font-variant-numeric:tabular-nums;}
.kpi-sub{font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin-top:2px;}
.kpi-tile.status-warning{border-color:rgba(237,161,0,.5);}
.kpi-tile.status-warning .kpi-value{color:var(--warn);}
.kpi-tile.status-critical{border-color:rgba(227,73,72,.6); background:rgba(227,73,72,.06);}
.kpi-tile.status-critical .kpi-value{color:#ff8a89;}
.kpi-tile.status-good .kpi-value{color:var(--good);}
.site-title{font-family:var(--head); font-weight:700; font-size:20px; color:var(--ink); margin:2px 0 0;}
.site-meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin:2px 0 0;}
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--head); font-weight:600; font-size:11px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:1px 9px; color:var(--ink-dim); margin-right:6px;}
.chip i{width:8px; height:8px; border-radius:50%; display:inline-block;}
.linkish{background:none; border:none; padding:0; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.multiples{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px 16px;}
.mult h3{margin:0; font-family:var(--head); font-weight:600; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:7px;}
.mult .chart-sub{margin:0 0 2px;}
.status-note{font-family:var(--mono); font-size:11px;}
.status-note.bad{color:#ff8a89;} .status-note.warn{color:var(--warn);} .status-note.ok{color:var(--good);}
@media (max-width:1100px){ .kpis{grid-template-columns:repeat(3, minmax(0,1fr));} .multiples{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:560px){ .kpis{grid-template-columns:repeat(2, minmax(0,1fr));} .multiples{grid-template-columns:1fr;} .facts{grid-template-columns:repeat(2, minmax(0,1fr));} }

/* ---- 1.1: language, tutorial, data box, drivers, capacity to add, comparison, editor */
select.lang{padding:5px 6px; font-size:12px;}
.back-link.tour{color:var(--tele); border-color:rgba(123,224,196,.5);}
.data-box{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 16px; transition:border-color .15s;}
.data-box.drag{border-color:var(--tele); background:rgba(123,224,196,.08);}
.data-row{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between;}
.data-h b{display:block; font-family:var(--head); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);}
.data-h span{font-size:12.5px; color:var(--ink-faint); line-height:1.5;}
.data-btns{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.data-msg{margin-top:10px; font-size:12.5px; line-height:1.55; padding:8px 10px; border-radius:6px; border:1px solid var(--line); color:var(--ink-dim); font-family:var(--mono);}
.data-msg.ok{border-color:rgba(27,175,122,.5); background:rgba(27,175,122,.08);}
.data-msg.bad{border-color:rgba(227,73,72,.5); background:rgba(227,73,72,.08); color:#ffb3b2;}
.share-box{margin-top:8px;} .share-box input{width:100%; font-family:var(--mono); font-size:11px; background:var(--panel-2); color:var(--ink-dim); border:1px solid var(--line); border-radius:6px; padding:6px 8px;}
details.fmt{margin-top:8px;} details.fmt summary{cursor:pointer; font-size:12.5px; color:var(--accent);}
details.fmt p, details.fmt li{font-size:12.5px; line-height:1.6; color:var(--ink-dim);}
details.fmt ul{padding-left:18px; margin:6px 0;}
.sub-box{margin-top:14px; border-top:1px dashed var(--line); padding-top:10px;}
.sub-box[hidden]{display:none !important;}
.sub-h{font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 4px;}
.mini-h{font-family:var(--head); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:6px 0 4px;}
.drivers{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 18px;}
.bar-row{display:grid; grid-template-columns:minmax(0,9.5em) minmax(0,1fr) auto; gap:8px; align-items:center; font-size:12px; margin:3px 0;}
.bar-row .linkish{text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px;}
.bar-row .bar{display:block; height:9px; background:var(--panel); border-radius:3px; overflow:hidden;}
.bar-row .bar i{display:block; height:100%; border-radius:3px;}
.bar-row em{font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); white-space:nowrap;}
.outlook.needs td, .outlook.needs th{font-size:12px;}
.cmp-note{color:var(--ink-faint); font-size:.92em;}
.kpi-sub.cmp{color:var(--ink-dim); border-top:1px dashed var(--line-soft); margin-top:5px; padding-top:4px;}
.legend i.dash{background:none; border-top:2px dashed var(--ink-dim); height:0; width:14px; border-radius:0;}
.tip-hint{display:block !important; margin-top:4px; color:var(--ink-faint); font-size:10px;}
.heat-mode{flex-direction:row; align-items:center; gap:10px; margin:2px 0 8px;}
.heat .cell.cur{stroke:var(--ink); stroke-width:2;}
.scale .sw{display:inline-flex; align-items:center; gap:4px;} .scale .sw i{display:inline-block; width:14px; height:10px; border-radius:2px;}
.edit select{font-family:var(--body); font-size:12px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:4px; padding:3px 4px; max-width:170px;}
.edit input.mid{width:150px; text-align:left;} .edit input.short{width:70px;} .edit input.tiny{width:52px;}
.edit .sid{display:block; color:var(--ink-faint); font-family:var(--mono); font-size:10px; margin-top:1px;}
.edit td.src{min-width:330px;}
.edit .lane-ed{display:flex; gap:4px; align-items:center; margin:2px 0;}
.edit .x{background:none; border:1px solid var(--line); color:var(--ink-dim); border-radius:4px; cursor:pointer; padding:1px 7px; font-size:13px;}
.edit .x:hover{color:#ff8a89; border-color:var(--bad);}
.edit .hint{font-size:11.5px; color:var(--ink-faint);}
.edit .btn.small{padding:3px 8px; font-size:10.5px; margin-left:8px;}
/* tutorial */
.tour-menu{position:fixed; z-index:60; width:min(360px, calc(100vw - 16px)); background:var(--panel-2); border:1px solid var(--accent); border-radius:10px; padding:10px; box-shadow:0 12px 32px rgba(0,0,0,.45);}
.tour-menu-h{font-family:var(--head); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--ink-faint); margin:2px 4px 8px;}
.tour-level{display:block; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:10px 12px; margin-bottom:6px; cursor:pointer; font-family:var(--body);}
.tour-level:hover{border-color:var(--accent);}
.tour-level b{display:block; font-family:var(--head); font-size:15px; letter-spacing:.04em;}
.tour-level span{display:block; font-size:12.5px; color:var(--ink-dim); margin:2px 0 4px; line-height:1.45;}
.tour-level em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--tele);}
.tour-card{position:fixed; z-index:60; right:18px; bottom:18px; width:min(410px, calc(100vw - 24px)); max-height:min(70vh, 580px); overflow-y:auto; background:var(--panel-2); border:1px solid var(--accent); border-radius:10px; padding:14px 16px; box-shadow:0 14px 40px rgba(0,0,0,.5);}
.tour-top{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; color:var(--ink-faint);}
.tour-x{background:none; border:none; color:var(--ink-dim); font-size:20px; cursor:pointer; line-height:1;}
.tour-bar{height:3px; background:var(--line); border-radius:2px; margin:8px 0 10px; overflow:hidden;}
.tour-bar i{display:block; height:100%; background:var(--tele);}
.tour-card h3{font-family:var(--head); font-size:18px; letter-spacing:.03em; margin:0 0 6px; color:var(--ink);}
.tour-body{font-size:13.5px; line-height:1.6; color:var(--ink-dim);}
.tour-body b{color:var(--ink);}
.tour-quiz{margin-top:10px; border-top:1px dashed var(--line); padding-top:10px;}
.tour-quiz p{font-size:13.5px; color:var(--ink); margin:0 0 8px; font-weight:500;}
.tour-quiz button{display:block; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:6px; color:var(--ink); padding:7px 10px; margin-bottom:5px; cursor:pointer; font-family:var(--body); font-size:13px;}
.tour-quiz button:hover:not(:disabled){border-color:var(--accent);}
.tour-quiz button.right{border-color:var(--good); background:rgba(27,175,122,.15);}
.tour-quiz button.wrong{border-color:var(--bad); background:rgba(227,73,72,.12);}
.tour-fb{font-size:13px; line-height:1.55; color:var(--ink-dim); margin-top:6px;}
.tour-fb b{color:var(--ink);}
.tour-nav{display:flex; justify-content:space-between; gap:8px; margin-top:12px;}
.tour-nav button{font-family:var(--head); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:12px; padding:7px 14px; border-radius:6px; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--ink);}
.tour-nav .tour-next{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.tour-nav button:disabled{opacity:.4; cursor:default;}
.tour-hl{outline:2px solid var(--tele) !important; outline-offset:4px; border-radius:4px; transition:outline-color .2s; scroll-margin-top:130px;}
@media (max-width:700px){
  .tour-card{right:12px; left:12px; bottom:12px; width:auto; max-height:52vh;}
  .drivers{grid-template-columns:minmax(0,1fr);}
  .header-actions{flex-wrap:wrap; justify-content:flex-end;}
  .topbar{position:static;}
}
.ctl .row{flex-wrap:wrap;}
#compareSel{max-width:100%; min-width:0;}
@media (max-width:560px){ #compareCtl{min-width:0; max-width:100%;} #compareSel{width:100%;} }

/* ---- 2.0: planning within capacity */
.cap-opts{min-width:260px;}
.cap-opts .row select{max-width:240px;}
.solve-status{font-family:var(--mono); font-size:11px; color:var(--tele); min-height:14px; display:flex; align-items:center; gap:6px;}
.solve-status .bad{color:#ff8a89;}
.spin{display:inline-block; width:10px; height:10px; border:2px solid var(--line); border-top-color:var(--tele); border-radius:50%; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .spin{animation:none;} }
body.cap-mode .brand .ver{border-color:var(--tele); color:var(--tele);}
#servicePanel .outlook td.bad{color:#ff8a89;}

/* ---- 2.1: Network Studio */
.studio-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;}
.studio-head .panel-note{max-width:900px;}
.studio-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:6px 0 4px;}
.iv-ctl{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:6px 0 14px;}
.ctl.inline{flex-direction:row; align-items:center; gap:6px; min-width:0;}
.ctl.inline .choice{padding:4px 6px; font-size:12px;}
.chk{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-dim); cursor:pointer;}
.chk input{accent-color:var(--accent);}
.studio-export{margin-left:auto; display:inline-flex; gap:6px;}
.studio-hint{font-size:11.5px; color:var(--ink-faint); margin:2px 0 8px; font-family:var(--mono);}
.studio-panel:not(.mode-add):not(.mode-connect):not(.mode-delete) .studio-hint{visibility:hidden; height:0; margin:0;}
.studio-body{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start;}
.studio-main{min-width:0;}
.studio-canvas{overflow-x:auto; border:1px solid var(--line-soft); border-radius:6px; background:#08223f;}
svg.studio{display:block; min-width:960px; width:100%; height:auto; user-select:none; -webkit-user-select:none; touch-action:none;}
.studio .col{fill:rgba(13,58,99,.35); stroke:var(--line-soft);}
.mode-add .studio .col{cursor:copy;}
.mode-add .studio .col:hover{fill:rgba(125,211,252,.08); stroke:var(--accent);}
.studio .col-h{font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.08em; fill:var(--ink-dim);}
.studio .col-u, .studio .col-arrow{font-family:var(--mono); font-size:10px; fill:var(--ink-faint);}
.studio .node{cursor:pointer; outline:none;}
.mode-select .studio .node{cursor:grab;}
.mode-connect .studio .node{cursor:crosshair;}
.mode-delete .studio .node, .mode-delete .studio .route{cursor:not-allowed;}
.studio .node:focus-visible .n-shape{stroke:var(--accent); stroke-width:3;}
.studio .node.dragging{opacity:.85; cursor:grabbing;}
.studio .node.dim, .studio .routes.dim{opacity:.22;}
.studio .node.target .n-shape{stroke:var(--tele); stroke-width:2.5; stroke-dasharray:4 3;}
.studio .node.hover .n-shape{stroke:var(--tele); stroke-width:3.5; stroke-dasharray:none;}
.studio .node.source .n-shape{stroke:var(--accent); stroke-width:3;}
.mode-connect .studio .node:not(.target):not(.source){opacity:.45;}
.studio .n-name{font-family:var(--body); font-weight:600; font-size:12px; fill:var(--ink); pointer-events:none;}
.studio .n-sub, .studio .n-val{font-family:var(--mono); font-size:9.5px; fill:var(--ink-dim); pointer-events:none;}
.studio .n-val{fill:var(--tele);}
.studio .badge.err{fill:#e34948;} .studio .badge.warn{fill:#eda100;}
.studio .badge-t{font:700 10px Arial,sans-serif; fill:#04202b; pointer-events:none;}
.studio .r-line{fill:none; stroke:#6f9fd0; opacity:.75;}
.studio .r-hit{fill:none; stroke:transparent; stroke-width:12; cursor:pointer;}
.studio .r-arrow{fill:#6f9fd0;}
.studio .route.near .r-line{stroke:var(--accent); opacity:1;}
.studio .route.sel .r-line{stroke:var(--tele); opacity:1;}
.studio .route:hover .r-line{stroke:var(--ink); opacity:1;}
.studio .r-lab{font-family:var(--mono); font-size:10px; fill:var(--ink); stroke:#08223f; stroke-width:3px;}
.studio .link-temp{stroke:var(--tele); stroke-width:2; stroke-dasharray:5 4; fill:none; pointer-events:none;}
.studio .ghost rect{fill:rgba(125,211,252,.10); stroke:var(--accent); stroke-dasharray:4 3;}
.studio .ghost text{font-family:var(--mono); font-size:11px; fill:var(--accent);}
.studio .ghost{pointer-events:none;}
.legend .lg-prod, .legend .lg-wh, .legend .lg-mkt{display:inline-block; width:16px; height:11px; border:1.6px solid var(--ink-dim); background:var(--panel);}
.legend .lg-prod{border-radius:2px; border-left:5px solid var(--ink-dim);}
.legend .lg-wh{clip-path:polygon(22% 0,78% 0,100% 50%,78% 100%,22% 100%,0 50%);}
.legend .lg-mkt{border-radius:999px;}
.lg-route{display:inline-block; width:22px; height:0; border-top:2.5px solid #6f9fd0; vertical-align:middle;}
.lg-route.sea{border-top-style:dashed;} .lg-route.rail{border-top-style:double; border-top-width:4px;} .lg-route.air{border-top-style:dotted;}
.legend .lg-note{color:var(--ink-faint);}
.legend .sq.ramp{display:inline-block; width:40px; height:10px; background:linear-gradient(90deg,#1d4a78,#c6dbef); border-radius:2px;}
.studio-issues{margin-top:8px; font-size:12px; line-height:1.7; color:var(--ink-dim);}
.studio-issues .ok{color:var(--good);} .studio-issues b.bad{color:#ff8a89;} .studio-issues b.warn{color:var(--warn);}
.studio-issues .linkish{margin-right:10px;} .studio-issues .linkish.error{color:#ffb3b2;} .studio-issues .linkish.warning{color:#f6c56b;}
.tip .tip-error{color:#ffb3b2;} .tip .tip-warning{color:#f6c56b;}
.inspector{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px; position:sticky; top:70px; max-height:calc(100vh - 90px); overflow-y:auto;}
.insp-kind{font-family:var(--head); font-weight:600; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px; display:flex; align-items:center; gap:6px;}
.insp-title{font-family:var(--head); font-weight:700; font-size:16px; color:var(--ink); margin:0;}
.insp-meta{font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin:2px 0 8px;}
.insp-h{font-family:var(--head); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:12px 0 4px; border-top:1px dashed var(--line-soft); padding-top:8px;}
.insp-empty{font-size:12.5px; color:var(--ink-faint);}
.fi{display:flex; flex-direction:column; gap:2px; margin:0 0 6px; font-size:11.5px; color:var(--ink-faint);}
.fi input, .fi select{font-family:var(--body); font-size:13px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:5px; padding:5px 7px; width:100%;}
.fi input:focus, .fi select:focus{outline:none; border-color:var(--accent);}
.fi-row{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.linkish.pick{font-size:12px; margin:0 0 4px;}
.insp-actions{display:flex; justify-content:space-between; gap:8px; margin-top:10px;}
.btn.danger:hover{border-color:var(--bad); color:#ff8a89;}
.map-box{position:relative;}
.pick-hint{position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:5; margin:0; background:var(--tele); color:var(--accent-ink); font-family:var(--head); font-weight:600; font-size:13px; padding:5px 12px; border-radius:999px;}
.map .pickable{cursor:crosshair;}
details.pm{margin-top:12px; border-top:1px dashed var(--line-soft); padding-top:8px;}
details.pm summary{cursor:pointer; font-family:var(--head); font-weight:700; font-size:13px; color:var(--ink-dim);}
.pm-form{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px 12px; align-items:end; margin-top:8px;}
.pm-form #pmTiersRow{grid-column:1 / -1;}
.chk-row{display:flex; flex-wrap:wrap; gap:4px 12px;}
.pm-msg{grid-column:1 / -1; margin:0; font-size:12px;} .pm-msg.ok{color:var(--good);} .pm-msg.bad{color:#ff8a89;}
#ladder svg{max-width:980px;}
@media (max-width:1100px){ .studio-body{grid-template-columns:minmax(0,1fr);} .inspector{position:static; max-height:none;} }

/* ---- 2.2: the world map */
.map-bar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 6px;}
.map-bar .btn.small{min-width:30px;}
.map-help{font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-left:auto;}
svg.map.world{display:block; width:100%; height:auto; aspect-ratio:2.2 / 1; background:#08223f; border:1px solid var(--line-soft); border-radius:6px; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab;}
svg.map.world.panning{cursor:grabbing;}
svg.map.world.picking, .mode-add svg.map.world{cursor:crosshair;}
.map.world .bg{fill:#08223f;}
.map.world .land{fill:var(--land); stroke:var(--land-edge); stroke-width:.6;}
.map.world .lat-label{font-family:var(--mono); fill:var(--ink-faint);}
.map.world .r-line{fill:none; stroke:#6f9fd0; opacity:.7;}
.map.world .r-hit{fill:none; stroke:transparent; stroke-width:10; cursor:pointer;}
.map.world .r-arrow{fill:#6f9fd0;}
.map.world .route.near .r-line{stroke:var(--accent); opacity:1;}
.map.world .route.sel .r-line{stroke:var(--tele); opacity:1;}
.map.world .route:hover .r-line{stroke:var(--ink); opacity:1;}
.map.world .routes.dim, .map.world .node.dim{opacity:.2;}
.map.world .node{cursor:pointer; outline:none;}
.mode-select .map.world .node{cursor:move;}
.mode-connect .map.world .node{cursor:crosshair;}
.mode-delete .map.world .node, .mode-delete .map.world .route{cursor:not-allowed;}
.map.world .node.dragging{opacity:.85;}
.map.world .node.target .n-shape{stroke:var(--tele); stroke-width:2.5;}
.map.world .node.hover .n-shape{stroke:var(--tele); stroke-width:3.5;}
.map.world .node.source .n-shape{stroke:var(--accent); stroke-width:3;}
.mode-connect .map.world .node:not(.target):not(.source){opacity:.4;}
.map.world .node:focus-visible .n-shape{stroke:var(--accent); stroke-width:3;}
.map.world .halo{fill:none; stroke-width:2;}
.map.world .badge.err{fill:#e34948;} .map.world .badge.warn{fill:#eda100;}
.map.world .m-lab{font-family:var(--head); font-weight:600; fill:var(--ink-dim); stroke:#08223f; pointer-events:none;}
.map.world .m-lab.sel{fill:var(--ink);}
.map.world .link-temp{stroke:var(--tele); stroke-width:2; stroke-dasharray:5 4; fill:none; pointer-events:none;}
.map-wrap{position:relative;}
.iv-verdict{margin:12px 0 10px; padding:9px 12px; border-left:4px solid var(--line); font-weight:600; line-height:1.45;}
.iv-verdict.good{border-left-color:var(--good);}
.iv-verdict.bad{border-left-color:var(--bad);}
.receipt{margin:10px 0; font-size:13.5px; border:1px solid var(--line); border-radius:8px; padding:7px 11px;}
.receipt summary{cursor:pointer;}
.receipt summary b.ok{color:var(--good);} .receipt summary b.no{color:#ff8a89;}
.receipt dl{display:grid; grid-template-columns:minmax(120px,max-content) minmax(0,1fr); gap:4px 14px; margin:9px 0 3px;}
.receipt dt{opacity:.75;} .receipt dd{margin:0; overflow-wrap:anywhere;}
#prList{margin-top:10px;}
.pr-group{margin-top:14px; border-left:4px solid var(--line); padding-left:12px;}
.pr-group.pr-now{border-left-color:var(--bad);} .pr-group.pr-by{border-left-color:var(--warn);} .pr-group.pr-watch{border-left-color:var(--accent);}
.pr-group h3{margin:0 0 6px;}
.pr-group ul{list-style:none; margin:0; padding:0;}
.pr-group li{padding:8px 0; border-top:1px solid var(--line);}
.pr-group li:first-child{border-top:0;}
.pr-group p{margin:3px 0 4px; line-height:1.5;}