:root{
  --paper:#F2F3F0;
  --surface:#FFFFFF;
  --surface-2:#FAFAF9;
  --sunken:#EDEEEA;
  --ink:#17211F;
  --ink-2:#4C5754;
  --ink-3:#7E8784;
  --rule:#DCDFDA;
  --rule-2:#C4C9C2;
  --a:#175F5B;
  --a-soft:#DEEAE8;
  --b:#A34A29;
  --b-soft:#F2E4DC;
  --out:#9AA29F;
  --c1:#22475C;
  --c2:#3E6E7E;
  --c3:#6B8F95;
  --brok:#7A6A2F;
  --brok-soft:#EFEBDD;
  --pos:#2C6B4C;
  --neg:#8F2E22;
  --shadow:0 1px 2px rgba(23,33,31,.06);

  --f-disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.5;
}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
canvas{display:block;width:100%}

.eyebrow{
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;
  padding:22px clamp(16px,3vw,40px) 18px;
  background:var(--surface);
  border-bottom:1px solid var(--rule-2);
}
.brand h1{font-size:26px;font-weight:700;letter-spacing:-.03em}
.brand p{color:var(--ink-2);max-width:62ch;margin-top:4px}
.runbar{display:flex;align-items:center;gap:10px}
.clock{display:flex;flex-direction:column;line-height:1.15;margin-right:6px}
.clock .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.clock .week{font-family:var(--f-mono);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}

.btn{
  border:1px solid var(--rule-2);background:var(--surface);border-radius:3px;
  padding:7px 13px;font-size:13px;font-weight:500;cursor:pointer;
  transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--sunken);border-color:var(--ink-3)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#F7F8F6}
.btn.primary:hover{background:#25332F}
.seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:3px;overflow:hidden;background:var(--surface)}
.seg button{
  border:0;background:transparent;padding:7px 11px;cursor:pointer;
  font-family:var(--f-mono);font-size:12px;
  border-right:1px solid var(--rule);
}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--sunken)}
.seg button.on{background:var(--ink);color:#F7F8F6}
:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* ---------- presets ---------- */
.presets{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px clamp(16px,3vw,40px);
  background:var(--surface-2);border-bottom:1px solid var(--rule);
}
.preset-row{display:flex;gap:8px;flex-wrap:wrap}
.preset{
  border:1px solid var(--rule-2);background:var(--surface);border-radius:99px;
  padding:5px 14px;font-size:12.5px;cursor:pointer;white-space:nowrap;
}
.preset:hover{border-color:var(--ink);background:var(--sunken)}

/* ---------- bands ---------- */
main{max-width:1560px;margin:0 auto;padding:0 clamp(12px,3vw,40px) 60px}
.band{padding:30px 0 8px}
.band-alt{border-top:1px solid var(--rule-2);margin-top:22px}
.band-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:16px}
.band-head h2{
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  font-family:var(--f-mono);
}
.band-head p{color:var(--ink-2);font-size:13px;max-width:78ch}

.retail-grid{display:grid;grid-template-columns:294px minmax(0,1fr) 294px;gap:18px;align-items:start}
.logi-grid{display:grid;grid-template-columns:294px minmax(0,1fr);gap:18px;align-items:start}
.carrier-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.market{display:flex;flex-direction:column;gap:18px;min-width:0}

/* ---------- cards & panels ---------- */
.card,.panel{background:var(--surface);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow)}
.card{padding:16px 18px 18px}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px}
.card-head h3{font-size:15px}
.card-head .sub,.panel-head .sub{color:var(--ink-3);font-size:12px}
.chart-card{padding-bottom:10px}
/* CSS owns the display height of both charts; the script only sizes the backing store */
#shareChart{height:200px}
#profitChart{height:180px}
.wide{margin-top:18px}
.axis-note{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);margin-top:6px;letter-spacing:.02em}

.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:3px;border-radius:2px;display:inline-block}

/* panel: an actor */
.panel{overflow:hidden}
.panel-head{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--rule)}
.panel-head h3{font-size:16px}
.panel .rail{width:4px;align-self:stretch;border-radius:2px;flex:0 0 4px}
.panel.a .rail{background:var(--a)}
.panel.b .rail{background:var(--b)}
.panel.brok .rail{background:var(--brok)}
.panel.c0 .rail{background:var(--c1)}
.panel.c1 .rail{background:var(--c2)}
.panel.c2 .rail{background:var(--c3)}
.panel-head .tag{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;background:var(--sunken);color:var(--ink-2);white-space:nowrap;
}
.panel.a .panel-head .tag{background:var(--a-soft);color:var(--a)}
.panel.b .panel-head .tag{background:var(--b-soft);color:var(--b)}
.panel.brok .panel-head .tag{background:var(--brok-soft);color:var(--brok)}

.controls{padding:14px 16px 4px;display:flex;flex-direction:column;gap:14px}
.ctrl{display:flex;flex-direction:column;gap:5px}
.ctrl .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ctrl label,.ctrl .name{font-size:12.5px;font-weight:500}
.ctrl .val{font-family:var(--f-mono);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.ctrl .hint{font-size:11px;color:var(--ink-3);line-height:1.35}
.ctrl .seg{width:100%}
.ctrl .seg button{flex:1;padding:6px 2px;text-align:center}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--rule-2);border-radius:2px}
input[type=range]::-moz-range-track{height:3px;background:var(--rule-2);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--surface);border:2px solid var(--ink);margin-top:-6px;
}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--ink)}
.panel.a input[type=range]::-webkit-slider-thumb{border-color:var(--a)}
.panel.a input[type=range]::-moz-range-thumb{border-color:var(--a)}
.panel.b input[type=range]::-webkit-slider-thumb{border-color:var(--b)}
.panel.b input[type=range]::-moz-range-thumb{border-color:var(--b)}
.panel.brok input[type=range]::-webkit-slider-thumb{border-color:var(--brok)}
.panel.brok input[type=range]::-moz-range-thumb{border-color:var(--brok)}

select{
  width:100%;font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--rule-2);
  border-radius:3px;background:var(--surface);color:var(--ink);
}
.switch{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px}
.switch input{margin:0;width:15px;height:15px;accent-color:var(--ink)}

/* readout list inside panels */
.readout{margin:0;padding:12px 16px 14px;border-top:1px solid var(--rule);background:var(--surface-2);display:grid;gap:6px}
.readout .line{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.readout dt{font-size:11.5px;color:var(--ink-2)}
.readout dd{margin:0;font-family:var(--f-mono);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.readout .strong dt{font-weight:600;color:var(--ink)}
.readout .strong dd{font-size:14px;font-weight:600}
.readout hr{border:0;border-top:1px solid var(--rule);margin:3px 0}
.money.pos{color:var(--pos)}
.money.neg{color:var(--neg)}

/* ---------- kpis ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kpi{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:12px 14px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:2px;border-top:3px solid var(--rule-2)}
.kpi.a{border-top-color:var(--a)}
.kpi.b{border-top-color:var(--b)}
.kpi .k-lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.kpi .k-val{font-family:var(--f-mono);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .k-sub{font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.kpi .delta{margin-top:1px}
.delta{font-family:var(--f-mono);font-size:11.5px;font-weight:500}
.delta.up{color:var(--pos)}
.delta.down{color:var(--neg)}
.delta.flat{color:var(--ink-3)}

/* ---------- matrix ---------- */
.table-wrap{overflow-x:auto}
table.matrix{width:100%;border-collapse:collapse;font-size:12.5px}
table.matrix th{text-align:left;font-weight:600;color:var(--ink-2);font-size:11px;
  font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:0 8px 6px;white-space:nowrap}
table.matrix th.grp{text-align:center;border-bottom:2px solid var(--rule-2);padding-bottom:3px}
table.matrix th.grp-a{color:var(--a);border-bottom-color:var(--a)}
table.matrix th.grp-b{color:var(--b);border-bottom-color:var(--b)}
table.matrix tr.subhead th{padding-top:5px;font-size:10px;letter-spacing:.05em;color:var(--ink-3)}
table.matrix td{padding:7px 8px;border-top:1px solid var(--rule);vertical-align:middle}
table.matrix td.num,table.matrix th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
table.matrix .rname{font-weight:500}
table.matrix .rsub{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.carrier-chip{display:inline-block;font-family:var(--f-mono);font-size:10.5px;padding:2px 6px;border-radius:2px;
  background:var(--sunken);color:var(--ink-2);white-space:nowrap}
.carrier-chip.fb{background:#F5E7E3;color:var(--neg)}
.fast{color:var(--pos);font-weight:600}
.splitbar{display:flex;height:9px;border-radius:2px;overflow:hidden;min-width:96px;background:var(--sunken)}
.splitbar i{display:block;height:100%}
.splitbar .sa{background:var(--a)}
.splitbar .sb{background:var(--b)}
.splitbar .so{background:var(--out);opacity:.45}

/* ---------- carrier coverage strip ---------- */
.covstrip{display:flex;gap:3px;margin-top:2px}
.covstrip i{flex:1;height:6px;border-radius:1px;background:var(--sunken)}
.panel.c0 .covstrip i.on{background:var(--c1)}
.panel.c1 .covstrip i.on{background:var(--c2)}
.panel.c2 .covstrip i.on{background:var(--c3)}
.covstrip i.gap{background:#EADDD9}

/* ---------- notes ---------- */
.notes{border-top:1px solid var(--rule-2);margin-top:30px;padding-top:24px}
.notes h2{font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:.13em;margin-bottom:16px}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px 28px}
.notes h4{font-size:13.5px;margin-bottom:4px}
.notes p{color:var(--ink-2);font-size:12.5px;max-width:60ch}

@media (max-width:1180px){
  .retail-grid,.logi-grid{grid-template-columns:minmax(0,1fr)}
  .carrier-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* ============================================================
   Instruction booklet
   ============================================================ */
:root{
  --stock:#EBE9E1;      /* manual paper */
  --stock-2:#E1DED4;
  --stock-rule:#B9B5A6;
}

.manual-btn{
  display:flex;align-items:center;gap:11px;
  margin-left:6px;padding:9px 16px 9px 13px;
  background:var(--surface);border:2px solid var(--ink);border-radius:3px;
  box-shadow:3px 3px 0 var(--ink);cursor:pointer;text-align:left;
  transition:transform .08s,box-shadow .08s;
}
.manual-btn:hover{background:#FCFCFB}
.manual-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.manual-btn svg{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.manual-btn b{
  display:block;font-family:var(--f-disp);font-size:15px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.1;
}
.manual-btn small{
  display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-top:2px;
}

.booklet-overlay{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(10px,3vh,34px) clamp(10px,3vw,30px);
  background:rgba(23,33,31,.5);overflow-y:auto;
}
.booklet-overlay[hidden]{display:none}

.booklet{
  width:100%;max-width:1160px;background:var(--stock);
  border:1px solid var(--ink);box-shadow:0 18px 40px rgba(23,33,31,.35);
}

/* top strip: the bit with the part number on a real manual */
.bk-bar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:7px 14px 7px 18px;background:var(--ink);color:var(--stock);
}
.bk-model{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.bk-bar-acts{display:flex;gap:8px}
.bk-print,.bk-close{
  background:transparent;border:1px solid rgba(235,233,225,.45);color:var(--stock);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:2px;cursor:pointer;
}
.bk-print:hover,.bk-close:hover{background:rgba(235,233,225,.16);border-color:var(--stock)}
.bk-close span{font-size:13px;line-height:1}

.bk-head{
  padding:26px 34px 20px;text-align:center;
  border-bottom:4px double var(--ink);
}
.bk-eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:8px;text-indent:.42em;
}
.bk-head h2{
  font-family:var(--f-disp);font-size:clamp(30px,5vw,48px);font-weight:700;
  letter-spacing:-.02em;text-transform:uppercase;line-height:.95;
}
.bk-tagline{
  max-width:56ch;margin:10px auto 0;color:var(--ink-2);font-size:13px;
}

/* set as columns, the way a real leaflet flows - no ragged grid rows */
.bk-body{
  padding:24px 30px 8px;
  column-count:3;column-gap:30px;column-rule:1px solid var(--stock-rule);
}
.bk-sec{break-inside:avoid;margin-bottom:22px}

.bk-sec h3{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-disp);font-size:13.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:5px;margin-bottom:9px;border-bottom:2px solid var(--ink);
}
.bk-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;flex:0 0 21px;background:var(--ink);color:var(--stock);
  font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:0;
}
.bk-sec p{font-size:12.8px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.bk-sec p + p{margin-top:7px}
.bk-sec em{font-style:normal;box-shadow:inset 0 -.42em 0 var(--stock-2)}
.bk-sec b{color:var(--ink);font-weight:600}
.bk-where{
  font-family:var(--f-mono);font-size:10px!important;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;
}
.bk-sec code{
  font-family:var(--f-mono);font-size:11.5px;background:var(--stock-2);
  padding:1px 4px;border-radius:2px;
}

.bk-steps{margin:0;padding-left:0;list-style:none;counter-reset:bkstep}
.bk-steps li{
  position:relative;padding-left:26px;font-size:12.8px;line-height:1.5;color:var(--ink-2);
  counter-increment:bkstep;
}
.bk-steps li + li{margin-top:8px;padding-top:8px;border-top:1px dotted var(--stock-rule)}
.bk-steps li::before{
  content:counter(bkstep)".";position:absolute;left:0;top:0;
  font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--ink);
}
.bk-steps li + li::before{top:8px}

.bk-keys{margin:0;display:grid;grid-template-columns:auto;gap:0}
.bk-keys dt{
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);margin-top:9px;
}
.bk-keys dt:first-child{margin-top:0}
.bk-keys dd{margin:2px 0 0;font-size:12.6px;line-height:1.5;color:var(--ink-2);
  padding-bottom:8px;border-bottom:1px dotted var(--stock-rule)}
.bk-keys dd:last-child{border-bottom:0;padding-bottom:0}

.bk-tips{margin:0;padding-left:0;list-style:none}
.bk-tips li{
  position:relative;padding-left:18px;font-size:12.8px;line-height:1.5;color:var(--ink-2);
}
.bk-tips li + li{margin-top:9px}
.bk-tips li::before{
  content:"";position:absolute;left:0;top:7px;width:8px;height:8px;
  background:var(--ink);transform:rotate(45deg);
}

.bk-warn{
  column-span:all;break-inside:avoid;margin-top:4px;padding:16px 20px;
  background:var(--stock-2);border:2px solid var(--ink);
}
.bk-warn h3{
  font-family:var(--f-disp);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:6px;
}
.bk-warn p{font-size:12.8px;line-height:1.55;color:var(--ink-2);max-width:none}
.bk-warn b{color:var(--ink);font-weight:600}

.bk-foot{
  padding:12px 30px 18px;text-align:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}

/* the figure walkthrough */
.bk-tour{padding:2px 30px 4px}
.bk-tour-head{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-disp);font-size:13.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  border-bottom:2px solid var(--ink);padding-bottom:6px;
}
.bk-fig{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:20px 28px;padding:18px 0 20px;
  border-bottom:1px solid var(--stock-rule);break-inside:avoid;
}
.bk-fig.tall{grid-template-columns:minmax(0,290px) minmax(0,1fr)}
.bk-fig:last-child{border-bottom:0;padding-bottom:6px}
.bk-plate{margin:0}
.bk-plate img{
  display:block;width:100%;height:auto;
  border:1px solid var(--stock-rule);background:var(--paper);
}
.bk-plate figcaption{
  margin-top:7px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.bk-plate figcaption b{color:var(--ink);font-weight:600;letter-spacing:.08em}
.bk-fig-text h4{font-family:var(--f-disp);font-size:14.5px;font-weight:600;margin-bottom:4px}
.bk-fig-text > p{font-size:12.8px;line-height:1.55;color:var(--ink-2);margin-bottom:10px;max-width:58ch}

/* tactics spans the leaflet and sets its own columns */
.bk-sec-tactics{column-span:all;break-inside:auto;margin-bottom:16px}
.bk-sec-tactics .bk-tips{columns:3;column-gap:30px}
.bk-sec-tactics .bk-tips li{break-inside:avoid}
.bk-sec-tactics .bk-tips li + li{margin-top:0}
.bk-sec-tactics .bk-tips li{margin-bottom:10px}

@media (max-width:1060px){ .bk-body{column-count:2} }
@media (max-width:700px){
  .bk-body{column-count:1;column-rule:0}
  .bk-sec-tactics .bk-tips{columns:1}
  .bk-fig,.bk-fig.tall{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1060px){ .bk-sec-tactics .bk-tips{columns:2} }

@media (max-width:640px){
  .manual-btn small{display:none}
  .bk-body{padding:20px 18px 6px}
  .bk-head{padding:20px 18px 16px}
}

@media print{
  body{background:#fff}
  .topbar,.presets,main,.manual-btn{display:none!important}
  .booklet-overlay{position:static;display:block;padding:0;background:none;overflow:visible}
  .booklet-overlay[hidden]{display:block!important}
  .booklet{max-width:none;border:0;box-shadow:none;background:#fff}
  .bk-bar-acts{display:none}
  .bk-bar{background:#fff;color:var(--ink);border-bottom:1px solid var(--ink);padding-left:0}
  .bk-body{column-count:2;column-gap:24px;padding:16px 0 0}
  .bk-sec,.bk-warn,.bk-fig{break-inside:avoid}
  .bk-tour{padding:0}
  .bk-plate img{border-color:#999}
  .bk-head{padding:14px 0 12px}
}