/* SHIPLOG design system: paper canvas, white hairline panels, one teal accent, IBM Plex Sans + Mono. Light only. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --paper: #EFEFEB; --surface: #FFFFFF; --card: #FFFFFF;
  --ink: #14161A; --secondary: #5A6168; --muted: #8A9299;
  --border: #DCDCD4; --rule: #DCDCD4; --divider: #ECEEE3;
  --teal: #0B6E63; --teal-hover: #085B51; --bright-teal: #0FA08F;
  --tint-active: #EDF3EA; --tint-hover: #F8F8F4; --tint-result: #F8FAF4; --tint-bar: #FAFAF7;
  --success: #2E6B41; --warning: #A85B0B; --critical: #B3261E; --info: #2B5F8C; --review: #5B4A9E;
  --navy: var(--ink); --navy2: var(--info); --amber: var(--warning); --red: var(--critical); --green: var(--success);
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r-control: 2px; --r-panel: 3px;
  color-scheme: light;
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 95px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 13px/1.6 var(--sans); }
::selection { background: #CCE2D6; color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
table, .kgrid, .chip, .legend, .toolbar, .tick { font-variant-numeric: tabular-nums; }

/* header */
.mast { background: #F8F8F3; color: var(--ink); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.mast-in { max-width: 1760px; margin: 0 auto; padding: 14px 32px 10px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 400 10px/1.5 var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--secondary); }
.eyebrow::before { content: ''; width: 5px; height: 5px; background: var(--teal); }
h1 { margin: 4px 0 2px; font: 500 24px/1.15 var(--sans); letter-spacing: -.6px; text-transform: uppercase; }
.sub { margin: 0 0 10px; color: var(--secondary); font-size: 13px; }
.toc { display: flex; flex-wrap: wrap; gap: 2px 16px; font: 400 10px/1.6 var(--mono); letter-spacing: .5px; text-transform: uppercase; }
.toc a { color: #505852; text-decoration: none; background: linear-gradient(var(--teal), var(--teal)) left bottom / 0 1px no-repeat; transition: background-size .2s, color .2s; }
.toc a:hover { color: var(--teal); background-size: 100% 1px; }
.userbar { margin-top: 8px; font: 400 10px var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--secondary); }
.userbar button { margin-left: 6px; min-height: 26px; padding: 0 11px; font: 500 10px var(--sans); background: transparent; color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-control); cursor: pointer; }
.userbar button:hover { background: var(--tint-hover); border-color: #ADB5A9; }

main { max-width: 1760px; margin: 0 auto; padding: 8px 32px 70px; }
section { margin-top: 34px; }
h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); font: 500 22px/1.2 var(--sans); letter-spacing: -.6px; }
h2 b { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 19px; padding: 0 5px; border: 1px solid #CCD2C2; border-radius: var(--r-control); font: 400 9px var(--mono); letter-spacing: .5px; color: var(--secondary); }
h3 { font: 400 10px/1.4 var(--mono); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .5px; color: var(--secondary); }
.grp-h { margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; }
.grp-h::before { content: ''; width: 5px; height: 5px; background: var(--teal); }

/* panels */
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--border); padding: 16px; border-radius: var(--r-panel); }
.card.plain { padding: 16px; }
.scroll, .card { overflow-x: auto; min-width: 0; }
.muted { color: var(--muted); }
.sc-tag { font: 500 10px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--teal); }
.sc-title { font: 500 17px/1.3 var(--sans); letter-spacing: -.2px; margin: 2px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { font: 400 9px/1.2 var(--mono); letter-spacing: .3px; text-transform: uppercase; background: #F7F8F2; border: 1px solid #E2E4D9; color: var(--secondary); padding: 6px 9px; border-radius: var(--r-control); }
.badge { display: inline-block; font: 400 8px/1.2 var(--mono); letter-spacing: .3px; text-transform: uppercase; padding: 5px 7px; color: var(--critical); background: #FAEFEC; border: 1px solid #EFDCD7; border-radius: var(--r-control); }
.kpis { display: grid; gap: 12px; grid-template-columns: 1fr; }
.kpis .card { padding: 0; overflow: hidden; }
.kpis .hd { min-height: 39px; display: flex; align-items: center; padding: 0 16px; font: 400 10px var(--mono); letter-spacing: .5px; text-transform: uppercase; background: var(--surface); border-bottom: 1px solid var(--border); border-left: 3px solid var(--c, var(--teal)); }
.kgrid { display: grid; grid-template-columns: repeat(5, 1fr); }
.kgrid div { padding: 12px 10px; border-right: 1px solid var(--divider); }
.kgrid div:last-child { border-right: 0; }
.kgrid .l { font: 400 9px/1.5 var(--mono); letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.kgrid .v { font: 500 24px/1.15 var(--mono); letter-spacing: -.8px; margin-top: 3px; color: var(--teal); }
.kgrid .u { font: 400 9px var(--mono); letter-spacing: .15px; color: var(--muted); }
.conclusion { margin-top: 14px; background: var(--tint-result); border: 1px solid var(--border); border-left: 3px solid var(--teal); padding: 14px 18px; font-size: 14px; border-radius: var(--r-panel); }

/* tables */
table { border-collapse: collapse; width: 100%; background: var(--surface); font: 400 11px var(--mono); }
th, td { border: 1px solid var(--divider); padding: 6px 8px; text-align: right; white-space: normal; overflow-wrap: break-word; word-break: normal; vertical-align: top; }
th:first-child, td:first-child { text-align: left; min-width: 150px; }
th { text-align: center; }
thead th { background: var(--tint-bar); color: var(--secondary); font: 400 9px var(--mono); letter-spacing: .7px; text-transform: uppercase; border-color: var(--border); }
tbody tr:hover td { background: var(--tint-hover); }
tr.sect td { background: var(--tint-bar); font: 400 9px var(--mono); letter-spacing: .7px; text-transform: uppercase; color: var(--secondary); text-align: left; }
tr.best td.b { font-weight: 500; color: var(--success); }
td.up { color: var(--critical); } td.down { color: var(--success); }
td.best { background: #EEF4EC; color: var(--success); font-weight: 500; }
td.worst { background: #FAEFEC; color: var(--critical); }
tr.proj td { background: #F8F8F3; }
.src-XLSX, .src-USER, .src-ASSUMPTION { font-weight: 500; }

/* cycle strip */
.cycle { display: flex; align-items: stretch; gap: 2px; margin: 6px 0 4px; }
.cycle .ph { flex: var(--g) 1 70px; min-width: 70px; padding: 8px 6px; color: #fff; text-align: center; font: 400 10px var(--mono); border-radius: var(--r-control); }
.cycle .ph b { display: block; font: 500 13px var(--mono); }
.cycle .ph::after { content: none; }
.loopback { font: 400 10px var(--mono); color: var(--muted); border-bottom: 1px dashed var(--muted); text-align: center; margin-bottom: 14px; padding-bottom: 2px; }

/* charts */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: #CDD3C6; stroke-opacity: .6; stroke-width: 1; } .chart .grid.v { stroke-dasharray: 2 3; }
.chart .axis { stroke: var(--secondary); } .chart .vmark { stroke: var(--critical); stroke-dasharray: 4 3; }
.chart .tick, .chart .barlabel, .chart .axlabel { font: 400 10px var(--mono); fill: var(--muted); }
.chart .barlabel { fill: var(--ink); } .chart .barlabel.hl { font-weight: 500; fill: var(--teal); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 10px var(--mono); letter-spacing: .3px; color: var(--secondary); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 1px; }

/* flags: status colours */
.flag { padding: 9px 12px; margin: 8px 0; border: 1px solid #EDDFCA; border-left: 3px solid var(--warning); background: #FAF3E7; font-size: 12px; border-radius: var(--r-control); }
.flag.conflict { border-color: #EFDCD7; border-left-color: var(--critical); background: #FAEFEC; }
.flag.info { border-color: #DCE5ED; border-left-color: var(--info); background: #EFF3F7; }
.flag b { font: 500 10px var(--mono); letter-spacing: .5px; text-transform: uppercase; display: block; margin-bottom: 2px; }
details { margin: 8px 0; } summary { cursor: pointer; font: 400 10px var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--teal); }
pre.calc { background: var(--tint-bar); color: var(--ink); border: 1px solid var(--border); padding: 12px; font: 400 11px/1.6 var(--mono); overflow-x: auto; margin: 6px 0; white-space: pre-wrap; border-radius: var(--r-control); }

/* forms */
.form { display: grid; grid-template-columns: 1fr 110px 76px; gap: 6px 8px; align-items: center; font-size: 12px; margin-top: 8px; }
.form label { font: 400 9px/1.5 var(--mono); letter-spacing: .15px; text-transform: uppercase; color: var(--secondary); }
.form .grp { grid-column: 1/-1; font: 400 9px var(--mono); letter-spacing: .7px; text-transform: uppercase; color: var(--muted); margin-top: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--divider); }
input, select, textarea { font: 400 12px var(--sans); color: var(--ink); background: #FDFEFB; border: 1px solid #D7E0CF; border-radius: var(--r-control); min-height: 30px; padding: 0 9px; }
input[type=number], select { width: 100%; font: 400 11px var(--mono); }
input[type=checkbox] { min-height: 0; width: 13px; height: 13px; accent-color: var(--teal); vertical-align: -2px; margin-right: 6px; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: 1px solid var(--teal); outline-offset: -1px; }
.form .src { grid-column: 1/-1; font-size: 10px; }
.sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 22px; margin-bottom: 16px; }
.sl label { display: flex; justify-content: space-between; font: 400 10px var(--mono); letter-spacing: .3px; text-transform: uppercase; color: var(--secondary); }
.sl input[type=range] { width: 100%; accent-color: var(--teal); min-height: 0; padding: 0; border: 0; background: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; font: 400 10px var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--secondary); }
.toolbar select { width: auto; }

/* buttons: outline by default, teal primary */
button { display: inline-flex; align-items: center; justify-content: center; min-height: 31px; padding: 0 11px; font: 500 11px/1.2 var(--sans); background: transparent; color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-control); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
button:hover:not(:disabled) { background: var(--tint-hover); border-color: #ADB5A9; }
button:disabled { opacity: .45; cursor: not-allowed; }
#au-login, .btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
#au-login:hover:not(:disabled) { background: var(--teal-hover); border-color: var(--teal-hover); }

.reco { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.reco .card h4 { margin: 0; font: 400 10px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--teal); }
.reco .big { font: 500 17px var(--sans); letter-spacing: -.2px; margin: 4px 0; }
.reco dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font: 400 11px var(--mono); } .reco dd { margin: 0; text-align: right; }

/* login */
.auth { display: flex; justify-content: center; padding: 70px 16px; }
.auth[hidden], #app[hidden], .userbar[hidden] { display: none; }
.auth-box { width: 100%; max-width: 360px; border: 1px solid var(--border); border-radius: var(--r-panel); padding: 24px; background: var(--surface); }
.auth-box h2 { border: 0; padding: 0; margin: 0 0 6px; font-size: 24px; }
.auth-box label { display: block; margin: 14px 0 5px; font: 400 9px var(--mono); letter-spacing: .7px; text-transform: uppercase; color: var(--secondary); }
.auth-box input { width: 100%; min-height: 42px; }
.auth-btns { display: flex; gap: 8px; margin-top: 18px; }
.auth-btns button { flex: 1; min-height: 44px; font-size: 12px; }
.auth-err { color: var(--critical); min-height: 18px; margin-top: 8px; font: 400 10px var(--mono); }
#global-form .form { max-width: 720px; }

.chk { display: block; margin: 5px 0; font-size: 12px; }
.rep-list { margin-bottom: 10px; }
.sel { display: block; margin: 0 0 8px; font: 400 10px var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--secondary); }

@media (max-width: 1050px) { .mast-in, main { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 760px) { .kgrid { grid-template-columns: repeat(2, 1fr); } .cards2 { grid-template-columns: 1fr; } h1 { font-size: 20px; } .mast { position: static; } button, input, select { min-height: 44px; } .kgrid .l, .legend, .chart .tick { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }
@media print {
  header.mast, #s-data, #s-1b, #s-annual, .toolbar, .rep-list, .userbar, nav, #s-results, #s-compare, #s-cycle, #s-timeline, #s-bottleneck, #s-cost, #s-charts, #s-sens, #s-barges, #s-whatif, #s-reco, #s-audit, #s-register, #s-voyage, h2 b { display: none; }
  #s-report { display: block; } body { background: #fff; }
}
.toc[hidden]{display:none}

.tabs{display:flex;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--r-panel);background:#FCFCF8;margin-bottom:14px;overflow:hidden}
.tab{border:0;border-right:1px solid var(--divider);border-bottom:2px solid transparent;border-radius:0;min-height:40px;padding:0 16px;font:400 10px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--secondary)}
.tab.on{color:var(--teal);border-bottom-color:var(--teal);background:#F0F5EC}
ul.method{margin:0;padding-left:18px;font-size:12px;color:var(--secondary)}ul.method li{margin:4px 0}

/* fit all six scenarios without horizontal scrolling */
#whatif td, #whatif th { white-space: normal !important; font-size: 10px; padding: 5px 6px; }
#whatif td:first-child { min-width: 200px; }
#barges table td, #barges table th { padding: 4px 5px; font-size: 10px; }
.card table, .card svg { max-width: 100%; }
#whatif td { min-width: 0 !important; font-size: 10px !important; }
#barges .card { padding: 12px; }
#barges .chart { max-width: 100%; height: auto; }

.mainnav{margin-top:8px}.mainnav .tab{display:inline-flex;align-items:center;text-decoration:none;min-height:34px}
.crumb{font:400 9px var(--mono);letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ovr{margin-left:8px;font:400 9px var(--mono);letter-spacing:.3px;color:var(--teal);text-transform:uppercase;white-space:nowrap}
th a{color:var(--teal);text-decoration:none}th a:hover{text-decoration:underline}
input:disabled,select:disabled{background:var(--tint-bar);color:var(--secondary)}
#view>h2:first-of-type{margin-top:18px}

.tl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;margin:8px 0}
.tl{border:1px solid var(--border);border-radius:var(--r-panel);background:var(--surface);padding:6px 10px 2px;min-width:0}
.tl-t{font:400 9px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--secondary);display:flex;gap:8px;align-items:baseline}
.tl-t span{margin-left:auto;color:var(--muted)}
.chart .barlabel.sm{font-size:8px}
@media (max-width:900px){.tl-grid{grid-template-columns:1fr}}

.flow text{font-family:var(--mono)}.fl-t{font-size:11px;font-weight:500;letter-spacing:.5px}.fl-n{font-size:9px;letter-spacing:.15px}.fl-v{font-size:14px;font-weight:500}.fl-big{font-size:26px;font-weight:500;letter-spacing:-1px}.fl-ar{font-size:9px;letter-spacing:.3px}
.flow-ctl{display:flex;align-items:center;gap:10px;margin-top:8px}.flow-ctl input[type=range]{flex:1;min-height:0;padding:0;border:0;background:none;accent-color:var(--teal)}
.mgmt-h{font:500 10px var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--teal);padding:2px 10px 8px}.mgmt{grid-template-columns:repeat(4,1fr)}.mgmt div{border-bottom:1px solid var(--divider)}.mgmt .v{font-size:19px}.bn-t{font:500 11px/1.3 var(--mono);color:var(--critical);letter-spacing:.2px;display:block}

/* flow board typography: sans for asset names and operations, mono for quantities and timestamps */
.flow text{font-family:var(--sans)}
.flow .fl-name{font:600 15px var(--sans);fill:var(--ink);letter-spacing:-.1px}
.flow .fl-sub{font:400 12px var(--sans)}
.flow .fl-q{font:400 12px var(--mono);fill:var(--ink)}
.flow .fl-qb{font:500 22px var(--mono);fill:var(--ink);letter-spacing:-.8px}
.flow .fl-qs{font:400 13px var(--mono);fill:var(--muted)}
.flow .fl-big{font:500 34px var(--mono);fill:var(--teal);letter-spacing:-1.2px}
.flow .fl-lbl{font:500 11px var(--sans)}
.flow .fl-cap{font:400 11px var(--mono);fill:var(--muted)}
.chart .fl-lane{font:600 12px var(--sans);fill:var(--ink)}

/* ---------- parameter tables: Parameter | Value | Unit (engineering worksheet) ---------- */
.psecs { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 14px 22px; align-items: start; margin: 8px 0 4px; }
.psecs.one { grid-template-columns: minmax(0, 720px); }
.psec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); overflow: hidden; }
.psec.wide { grid-column: 1 / -1; }
.psec h4 { margin: 0; padding: 7px 10px; font: 500 10px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--teal); background: var(--tint-bar); border-bottom: 1px solid var(--border); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 118px 96px; column-gap: 8px; align-items: center; min-height: 42px; padding: 2px 10px; border-bottom: 1px solid var(--divider); }
.prow:last-child { border-bottom: 0; }
.prow.ph { min-height: 26px; font: 400 9px var(--mono); letter-spacing: .7px; text-transform: uppercase; color: var(--muted); background: #FDFDFB; }
.prow .r { text-align: right; padding-right: 10px; }
.prow label { font: 400 12.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
.prow input[type=number], .prow select { height: 38px; min-height: 38px; font: 400 12px var(--mono); }
.prow input[type=number] { text-align: right; }
.prow .u { font: 400 11px var(--mono); color: var(--secondary); padding-left: 2px; }
.prow .v { font: 500 12px var(--mono); text-align: right; padding-right: 10px; }
.prow .ovr { font: 400 9px var(--mono); color: var(--muted); letter-spacing: .3px; text-transform: uppercase; margin-left: 6px; white-space: nowrap; }
.prow .ovr input { margin-right: 3px; }
.prow .msg { grid-column: 1 / -1; font: 400 10px var(--mono); color: var(--critical); padding: 0 0 4px; }
.prow .msg:empty { display: none; }
.prow.bad input[type=number] { border-color: var(--critical); background: #FAEFEC; }
.prow.bad label { color: var(--critical); }
/* read-only: reference values, calculated results and un-overridden shared parameters look like text, not controls */
.prow.ref { background: #FBFBF8; }
.prow input:disabled, .prow select:disabled { background: transparent; border-color: transparent; color: var(--secondary); opacity: 1; -webkit-text-fill-color: var(--secondary); appearance: none; }
.ptab { width: 100%; max-width: 520px; }
.ptab th, .ptab td { padding: 3px 10px; }
.ptab td input[type=number] { width: 84px; height: 34px; min-height: 34px; text-align: right; }
.ptab td.calc { color: var(--secondary); }
.wx-body { padding: 8px 10px 10px; }
.wx-body .form { max-width: 620px; }
.wx-body .chk { margin: 4px 0 8px; }
@media (max-width: 560px) {
  .psecs { grid-template-columns: minmax(0, 1fr); }
  .prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 3px; padding: 6px 10px; }
  .prow label, .prow .msg { grid-column: 1 / -1; }
  .prow.ph { display: none; }
  .prow .r, .prow .v { text-align: left; padding-right: 0; }
}
/* balanced columns: sections flow top-to-bottom, so a short section never leaves a hole beside a tall one */
.psecs { display: block; column-width: 400px; column-gap: 22px; }
.psecs.one { column-width: auto; max-width: 720px; }
.psec { break-inside: avoid; margin-bottom: 14px; }
.psec.wide { column-span: all; }
.prow { grid-template-columns: minmax(0, 1fr) 108px 88px; }
.wx-rows{border:1px solid var(--border);border-radius:var(--r-panel);margin-bottom:8px;max-width:520px;background:var(--surface)}

/* ---------- 36-month project economics ---------- */
.ekpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface); margin: 8px 0 14px; overflow: hidden; }
.ek { padding: 10px 12px; border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.ek .l { font: 400 9px var(--mono); letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.ek .v { font: 500 19px/1.3 var(--mono); letter-spacing: -.5px; margin: 2px 0; }
.ek .u { font: 400 10px var(--mono); color: var(--secondary); }
.ek.hot .v { color: var(--teal); }
.prow.grp { min-height: 24px; grid-template-columns: 1fr; background: var(--tint-bar); font: 500 9px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--secondary); }
.prow.tot { background: var(--tint-active); }
.prow.tot label, .prow.tot .v { font-weight: 600; }
.prow.tot .v { color: var(--teal); }
.burden { padding: 14px 14px 6px; text-align: center; font-family: var(--mono); }
.burden .bn { font-size: 17px; font-weight: 500; }
.burden .bl { height: 2px; background: var(--ink); margin: 6px auto; max-width: 280px; }
.burden .bd { font-size: 12px; color: var(--secondary); }
.burden .be { font-size: 24px; font-weight: 500; color: var(--teal); margin: 8px 0 4px; letter-spacing: -.5px; }
.bnote { padding: 0 14px 10px; font-size: 11px; }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; font: 400 12px/1.7 var(--mono); }
.how > div { background: var(--surface); border: 1px solid var(--border); padding: 10px 14px; border-radius: var(--r-panel); }
.live{max-width:640px}.live td,.live th{padding:3px 10px}

.flow .flowing{stroke-dasharray:10 6;animation:fdash .9s linear infinite}@keyframes fdash{to{stroke-dashoffset:-16}}
@media (prefers-reduced-motion:reduce){.flow .flowing{animation:none}}
.flow-ctl.btns{flex-wrap:wrap}.flow-ctl.btns button{min-height:36px;padding:4px 14px}.flow-ctl.btns select{min-height:36px}.flow-ctl.btns label{display:inline-flex;align-items:center;gap:6px}
.evp{margin-top:6px}.evt{font:400 13px var(--sans);margin-bottom:8px}.evt b{font:600 15px var(--mono)}
.evg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.evc{border:1px solid var(--border);border-radius:3px;background:#fff;padding:8px 10px;min-width:0}.evh{font:600 11px var(--sans);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}.evs{font:600 13px var(--sans);margin:2px 0 4px;overflow-wrap:anywhere}.evl{font:400 12px var(--mono);color:var(--ink);overflow-wrap:anywhere}
.evbar{display:block;height:6px;background:#ECEDE6;border-radius:2px;margin-top:6px}.evbar i{display:block;height:100%;border-radius:2px}
.evn{font:400 12px var(--mono);margin-top:8px;color:var(--teal)}
.chart.flow,.chart.tl{min-width:720px}
@media (max-width:760px){.flow-ctl{flex-wrap:wrap}.flow-ctl input[type=range]{min-height:44px;min-width:140px}.flow-ctl.btns button,.flow-ctl.btns select{min-height:44px}}

/* ---- operational timeline (timeline-ui.mjs): sticky asset column, real pixel scale, details on selection ---- */
.tl-sum{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:flex-end;padding:2px 0 10px;border-bottom:1px solid var(--border);margin-bottom:10px}
.tl-sum .l{font:500 10px var(--mono);letter-spacing:.5px;color:var(--muted);text-transform:uppercase}.tl-sum .v{font:600 14px var(--sans);color:var(--ink)}
.tl-zoom{margin-left:auto;font:400 12px var(--sans);color:var(--secondary);display:inline-flex;align-items:center;gap:6px}.tl-zoom select{min-height:30px}
.tl-scroll{overflow-x:auto;overflow-y:hidden;max-width:100%;border:1px solid var(--border);background:#fff}
.otl{position:relative;min-width:100%}
.tl-row{display:flex;border-bottom:1px solid var(--border)}.tl-row:last-of-type{border-bottom:0}
.tl-lab{position:sticky;left:0;z-index:5;flex:0 0 var(--lw);width:var(--lw);box-sizing:border-box;background:#FAFAF7;border-right:1px solid var(--border);padding:8px 10px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.tl-lab .fl-lane{font:700 13px var(--sans);color:var(--ink);letter-spacing:.2px}.tl-sub{font:400 11px var(--mono);color:var(--muted)}
.tl-labh{font:500 10px var(--mono);color:var(--muted);letter-spacing:.6px;align-items:flex-end}
.tl-track{position:relative;flex:none;background-color:#fff}.tl-axis .tl-track{background:#F5F5F1}
.tl-tick{position:absolute;top:4px;transform:translateX(-50%);font:400 11px var(--mono);color:var(--secondary);white-space:nowrap}
.tl-day{position:absolute;bottom:2px;font:600 10px var(--mono);color:var(--teal);padding-left:4px;white-space:nowrap}
.tl-mark{position:absolute;bottom:-1px;width:7px;height:7px;background:#2E6B41;transform:translateX(-50%) rotate(45deg)}
.tlb{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.6);border-radius:3px;padding:3px 5px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-width:0;z-index:2}
.tlb.dash{border:1px dashed #8A9299}.tlb.on{outline:2px solid var(--ink);z-index:4}.tlb:focus-visible{outline:2px solid var(--teal);z-index:4}
.tlb span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.tlb-op{font:600 12px var(--sans)}.tlb-sub{font:500 11px var(--mono)}.tlb-time{font:400 10px var(--mono);opacity:.85}
.tl-rain{position:absolute;top:0;bottom:0;background:#B3261E;pointer-events:none;z-index:1}
.tl-inv{position:absolute;left:0;right:0}.tl-inv svg{display:block}.tl-ycap,.tl-y0{position:absolute;left:4px;font:400 10px var(--mono);color:var(--muted)}.tl-ycap{top:0}.tl-y0{bottom:0}
.tl-note{position:absolute;top:2px;font:600 11px var(--mono);color:var(--ink);background:rgba(255,255,255,.88);padding:1px 6px;border-radius:2px;white-space:nowrap}.tl-note.left{transform:translateX(-100%)}
.tl-curwrap{position:absolute;left:var(--lw);right:0;top:0;bottom:0;pointer-events:none;z-index:6}.tl-cursor{position:absolute;top:0;bottom:0;width:2px;background:#B3261E;pointer-events:none}
.tl-keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tl-key{font:400 12px var(--sans);background:#F5F5F1;border:1px solid var(--border);border-radius:3px;padding:6px 10px;min-height:32px;cursor:pointer;text-align:left;color:var(--ink)}.tl-key b{font:600 11px var(--mono);color:var(--teal);margin-right:6px}
.tl-detail{margin-top:10px;border:1px solid var(--border);background:#FAFAF7;padding:10px 12px;min-height:44px;font:400 12px var(--sans)}
.tld-h{font:700 13px var(--sans);margin-bottom:6px}.tld-g{display:grid;grid-template-columns:110px 1fr;gap:3px 12px}.tld-k{color:var(--muted)}.tld-v{color:var(--ink)}
@media (max-width:760px){.otl{--lw:132px !important}.tl-key,.tl-zoom select{min-height:44px}.tlb{min-height:44px}}

/* ---- CAPEX / OPEX item tables, scenario identity, manual scenario ---- */
.itab { width: 100%; border-collapse: collapse; font-size: 12px; }
.itab th { font: 400 9px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); text-align: left; padding: 6px 4px; white-space: nowrap; }
.itab td { padding: 2px 3px; border-top: 1px solid var(--divider); vertical-align: middle; }
.itab input[type=text], .itab input[type=number], .itab select { width: 100%; min-width: 74px; height: 32px; font: 400 12px var(--mono); box-sizing: border-box; }
.itab td:nth-child(3) input, .itab td:nth-child(4) input { min-width: 150px; }
.itab input[type=number] { text-align: right; }
.itab td.calc { font: 500 12px var(--mono); text-align: right; white-space: nowrap; padding: 0 8px; }
.itab-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 10px; }
.itab-foot .muted { font-size: 12px; max-width: 760px; }
button.mini { min-height: 28px; padding: 0 8px; }
.meta-ed { display: grid; grid-template-columns: 110px minmax(180px, 1fr) minmax(240px, 2fr); gap: 10px; padding: 8px 10px; align-items: start; }
.meta-ed label { display: flex; flex-direction: column; gap: 3px; font: 400 9px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.meta-ed label .v { font: 500 18px var(--mono); color: var(--ink); }
.meta-ed input, .meta-ed textarea { font: 400 13px var(--sans); text-transform: none; letter-spacing: 0; width: 100%; box-sizing: border-box; }
.man-status, .man-use { padding: 6px 10px; }
.man-use { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.prow.notused { grid-template-columns: 1fr; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .6px; background: #F7F7F4; }
.prow.notused ~ .prow { opacity: .55; }
tr.sub td { background: #FAFAF7; font-weight: 500; }
tr.tot td { background: #F0F5EC; }
details.rs { border: 1px solid var(--border); border-radius: var(--r-panel); padding: 6px 12px; margin: 10px 0; }
details.rs > summary { font: 500 13px var(--sans); cursor: pointer; }
details.rs h5 { margin: 12px 0 4px; font: 500 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--teal); }
table.kv td { text-align: left; padding: 3px 10px; border-top: 1px solid var(--divider); }
table.kv td:first-child { color: var(--secondary); width: 260px; }
@media (max-width: 760px) { .meta-ed { grid-template-columns: 1fr; } }
@media print { .itab-foot, button.mini, [data-cxadd], [data-oxadd] { display: none; } details.rs { break-inside: avoid; } }

/* ---- costs by asset section: full-width CAPEX / OPEX tables ---- */
.costs { display: block; }
.cost-sec { margin-bottom: 14px; }
.cost-sub { font: 500 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--secondary); padding: 8px 10px 2px; }
.ctab { table-layout: auto; }
.ctab td.r { text-align: right; white-space: nowrap; }
.ctab td.ctr, .ctab th { text-align: center; }
.ctab td.u, .ctab span.u { font: 400 11px var(--mono); color: var(--secondary); white-space: nowrap; }
.ctab tr.model td { background: #FBFBF8; }
.ctab tr.model input[type=number] { max-width: 96px; }
.ctab tr.sub td, .ctab tfoot td { font-weight: 500; background: #F3F6EF; text-align: right; }
.ctab tfoot td:first-child { text-align: left; }
.ctab tr.tot td { background: #E8F0E4; font-weight: 600; }
.ctab td .lump { font: 400 10px var(--mono); color: var(--muted); white-space: nowrap; }
.ctab td .lump input { width: 92px; min-width: 0; height: 24px; }
.ctab .sub-in input { font-size: 11px; height: 26px; color: var(--secondary); }
.ctab td:first-child { min-width: 170px; }
.cost-sec.unused > h4, .psec.unused > h4 { color: var(--muted); }
.cost-sec.unused .itab, .cost-sec.unused .cost-sub { opacity: .45; }
.notused-msg { padding: 8px 12px; font: 500 10px var(--mono); letter-spacing: .6px; color: var(--muted); background: #F7F7F4; }
.grand-row { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 8px 12px; border-top: 1px solid var(--divider); }
.grand-row span { display: block; font: 400 9px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.grand-row b { font: 500 16px var(--mono); }
.cost-checks { padding: 0 12px 8px; }
.sdesc { font: 400 11px var(--sans); color: var(--secondary); white-space: normal; max-width: 260px; }
.assets .prow .v[data-calc] { color: var(--teal); }
.cost-sec .itab input[disabled], .cost-sec .itab select[disabled] { background: #F2F2EE; }
@media (max-width: 760px) { .ctab td:first-child { min-width: 120px; } }

/* ---- cost comparison against Scenario 1 ---- */
.cmp-note { font-size: 12px; margin: 0 10px 6px; }
.cmp-tab th, .cmp-tab td { white-space: nowrap; }
.cmp-tab th.cmp-base, .cmp-tab td.cmp-base { background: #F3F6EF; }
.cmp-tab tr.cmp-diff td { font-weight: 600; }
.cmp-tab tr.cmp-subrow td { font-style: italic; }
.cmp-up { color: var(--critical); } .cmp-down { color: var(--success); } .cmp-same { color: var(--secondary); }
.cmp-na, .cmp-nc { color: var(--muted); font-size: 12px; }
.cmp-toggles { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 10px; font-size: 13px; }
.cmp-checks { margin: 6px 10px; } .cmp-checks summary { cursor: pointer; font: 500 12px var(--mono); }
.cmp-tab td:first-child, .cmp-tab th:first-child { white-space: normal; min-width: 230px; max-width: 340px; }

/* ---- comparison: scenario selection ---- */
.cmp-picks { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; }
.cmp-pick { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); min-width: 170px; max-width: 260px; font-size: 13px; cursor: pointer; }
.cmp-pick.on { border-color: var(--teal); background: var(--tint-active); }
.cmp-pick input { margin-right: 4px; }
.cmp-badge { font: 500 10px var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--teal); border: 1px solid var(--teal); padding: 0 4px; border-radius: 2px; }
.cmp-desc { font-size: 11px; color: var(--secondary); white-space: normal; }
.cmp-select-bar { padding: 4px 10px; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }