/* Prepare page: the charging decision, the two-week outlook, the fleet plan and the areas map.
   Builds on ui/theme.css and ui/overview.css (rail, header, panes, legends, tooltip); only what is new lives here.
   Like overview.css it never animates transform, opacity or filter (motion.js owns those). */
:root {
  /* probability ramp: one hue (the brand indigo), light to dark, for the heatmap and the map */
  --p0: #F1EFFA; --p1: #D9D3F4; --p2: #B3A8EA; --p3: #8676DC; --p4: #5B4BD6; --p5: #3B2F86;
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h1-sub { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.mode { font-weight: 600; }
.mode.live { color: #0F6E75; } .mode.cached, .mode.partial { color: var(--s-trim-ink); }
.mode.missing { color: var(--s-off-ink); } .mode.example { color: var(--primary); }
.moment.bad { background: color-mix(in srgb, var(--s-off) 12%, transparent); }
.moment.bad .tag { color: var(--s-off-ink); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.main.prep { min-width: 0; }               /* let the wide heatmap scroll inside its pane instead of widening the page */
.prep > section, .prep > .panel { margin-bottom: 24px; }
.prep .panel { min-width: 0; }
.sec-h .unit { white-space: nowrap; }
.pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.pane-head .legend { margin: 0; }
.pane-note { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.mini-h { font-size: var(--fs-sm); font-weight: 700; margin: 16px 0 6px; color: var(--ink); }
.plain { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--muted); }
.plain li { padding: 3px 0; }
.plain li + li { border-top: 1px solid var(--glass-rule); }

/* ---------- the decision: one indigo verdict, four numbers ---------- */
.decision { display: grid; grid-template-columns: 2.1fr repeat(4, 1fr); gap: 16px; align-items: stretch; }
.verdict { background: var(--glass-ink); color: var(--on-primary); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 16px 36px -16px rgba(46, 36, 110, 0.55); min-height: 160px; }
.verdict-h { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; margin: 0; text-wrap: balance; }
.countdown { margin: auto 0 0; font-size: var(--fs-sm); opacity: 0.94; font-variant-numeric: tabular-nums; }
.status { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.16); color: #fff; }
.status.start_by { background: #F5D98A; color: var(--s-trim-ink); }
.status.charge_now { background: #F7C9A3; color: var(--s-backup-ink); }
.status.cannot_finish { background: #F3C1C3; color: var(--s-off-ink); }
.status.hold { background: rgba(255, 255, 255, 0.85); color: var(--primary-strong); }
.dk { background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); border-radius: var(--r-lg);
  padding: 16px 18px; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.dk-label { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); line-height: 1.3; }
.dk-val { font-size: 28px; font-weight: 800; color: var(--primary); letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.dk-note { font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }

.reasons { margin: 0; padding-left: 18px; columns: 2; column-gap: 40px; font-size: var(--fs-sm); color: color-mix(in srgb, var(--ink) 82%, var(--muted)); }
.reasons li { break-inside: avoid; margin-bottom: 6px; }
.reasons li::marker { color: var(--primary); }

/* ---------- heatmap ---------- */
.heat-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.heat { display: block; width: 100%; min-width: 720px; height: auto; }
.heat text { font: 500 11px var(--font); fill: var(--muted); }
.heat .rowlab { font: 600 12px var(--font); fill: var(--ink); }
.heat .cell { stroke: var(--surface); stroke-width: 2; }
.heat .cell:hover, .heat .cell.on { stroke: var(--ink); stroke-width: 1.5; }
.heat .val { font: 600 10.5px var(--font); pointer-events: none; }
.heat .sum .rowlab { font-weight: 800; }
.legend .ramp { width: 14px; height: 10px; border-radius: 3px; display: inline-block; background: var(--c); box-shadow: inset 0 0 0 1px var(--glass-rule); }

/* ---------- row of two ---------- */
.row2p { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: stretch; }
.row2p.lower { grid-template-columns: 1.2fr 1fr; align-items: start; }
.alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.alerts li { padding: 10px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--s-off) 10%, transparent); font-size: var(--fs-sm); }
.alerts li b { color: var(--s-off-ink); }
.alerts li.none { background: var(--glass-soft); color: var(--muted); }

/* ---------- gantt + units ---------- */
.gantt { display: block; width: 100%; min-width: 640px; height: auto; overflow: visible; }
.gantt text { font: 500 11px var(--font); fill: var(--muted); }
.gantt .rowlab { font: 700 12px var(--font); fill: var(--ink); }
.gantt .gridl { stroke: var(--glass-rule); }
.gantt .night { fill: color-mix(in srgb, var(--primary) 4%, transparent); }
.gantt .need { fill: var(--s-backup); fill-opacity: 0.16; }
.gantt .need-edge { stroke: var(--s-backup); stroke-width: 1.5; stroke-dasharray: 4 3; }
.gantt .now { stroke: var(--ink); stroke-width: 1.5; }
.gantt .startby { stroke: var(--s-limit); stroke-width: 2; }
.gantt .bar { fill: var(--s-grid); }
.gantt .hit { fill: transparent; }
.gantt .hit:hover { fill: color-mix(in srgb, var(--primary) 6%, transparent); }
.table-wrap { overflow-x: auto; margin-top: 16px; }
.units { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.units th { text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--glass-rule); white-space: nowrap; }
.units td { padding: 8px 10px; border-bottom: 1px solid var(--glass-rule); white-space: nowrap; }
.units td:first-child { font-weight: 700; }
.socbar { position: relative; width: 140px; height: 10px; border-radius: 5px; background: var(--s-neutral); display: inline-block; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.socbar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 5px; }
.socbar .tgt { background: color-mix(in srgb, var(--s-grid) 30%, transparent); }
.socbar .now { background: var(--s-grid); }

/* ---------- need vs have ---------- */
.need { display: grid; grid-template-columns: minmax(220px, 0.8fr) 2fr; gap: 24px; }
.need-text p { margin: 0; font-size: var(--fs-sm); color: color-mix(in srgb, var(--ink) 82%, var(--muted)); }
.ss-val.short { color: var(--s-off-ink); }

/* ---------- areas ---------- */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--glass-rule); }
.seg button { font: 600 var(--fs-xs)/1 var(--font); border: 0; background: none; color: var(--muted); padding: 8px 12px; border-radius: var(--r-pill); cursor: pointer; }
.seg button.on { background: var(--primary); color: var(--on-primary); }
.areas-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
.map { display: block; width: 100%; height: auto; }
.map .u { stroke: rgba(255, 255, 255, 0.9); stroke-width: 0.8; }
.map .u:hover, .map .u.on { stroke: var(--ink); stroke-width: 1.6; }
.map .outline { fill: none; stroke: var(--primary-strong); stroke-width: 1.5; }
.map .pin circle { fill: #fff; stroke: var(--primary-strong); stroke-width: 1.5; }
.map .pin text { font: 800 11px var(--font); fill: var(--primary-strong); text-anchor: middle; dominant-baseline: central; }
.map .pin.on circle { fill: var(--primary-strong); }
.map .pin.on text { fill: #fff; }
.arealist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.arealist li { display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); cursor: default; }
.arealist li:hover, .arealist li.on { background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--glass-rule); }
.arealist .rk { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font);
  background: var(--primary-soft); color: var(--primary-strong); }
.arealist .nm { font-weight: 700; font-size: var(--fs-sm); }
.arealist .sh { font-weight: 800; font-size: var(--fs-sm); color: var(--primary); font-variant-numeric: tabular-nums; text-align: right; }
.arealist .dr { grid-column: 2 / 4; font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
.arealist .ri { grid-column: 2 / 4; height: 6px; position: relative; border-radius: 3px; background: var(--s-neutral); margin-top: 2px; }
.arealist .ri i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in srgb, var(--s-grid) 45%, transparent); }
.arealist .ri b { position: absolute; top: -2px; width: 3px; height: 10px; border-radius: 2px; background: var(--primary-strong); }
.areas-grid.none { grid-template-columns: 1fr; }
.areas-grid.none .map-wrap { display: none; }
.arealist li.empty { display: block; }
.empty { padding: 24px; text-align: center; color: var(--muted); font-size: var(--fs-sm); background: var(--glass-soft); border-radius: var(--r-md); }

/* ---------- method, data ---------- */
.method summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; }
.method summary::-webkit-details-marker { display: none; }
.method summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); transition: transform 0.15s; }
.method[open] summary::before { transform: rotate(45deg); }
.assume { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.assume td { padding: 5px 8px 5px 0; border-top: 1px solid var(--glass-rule); vertical-align: top; color: var(--muted); }
.assume td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.assume td:nth-child(2) { color: var(--ink); font-variant-numeric: tabular-nums; }
.sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sources li { font-size: var(--fs-xs); font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--glass-rule); }
.sources li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--faint); vertical-align: 1px; }
.sources li.live::before, .sources li.stored::before { background: #1FA8B3; }
.sources li.cached::before, .sources li.partial::before, .sources li.example::before { background: var(--s-trim); }
.sources li.missing::before { background: var(--s-off); }
.sources li span { font-weight: 500; color: var(--muted); margin-left: 4px; }
.warn-list li { color: color-mix(in srgb, var(--ink) 70%, var(--muted)); }


/* ---------- storm drill (prepare-drill.js): .rv blocks belong to the forecast report, .dv to the drill ---------- */
body.drill .rv, body:not(.drill) .dv { display: none !important; }
.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.viewseg button { padding: 10px 14px; }
.chip { font-size: var(--fs-xs); font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); background: var(--glass-strong);
  box-shadow: inset 0 0 0 1px var(--glass-rule); color: var(--muted); }
.chip::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--faint); vertical-align: 1px; }
.chip.ok { color: #0F6E75; } .chip.ok::before { background: #1FA8B3; box-shadow: 0 0 0 3px color-mix(in srgb, #1FA8B3 22%, transparent); }
.chip.warn { color: var(--s-trim-ink); } .chip.warn::before { background: var(--s-trim); }

.setup-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 16px 24px; align-items: end; }
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld-l { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.fld-l b { color: var(--primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.fld select { width: 100%; }
.fld input[type=range] { width: 100%; accent-color: var(--primary); height: 40px; margin: 0; cursor: pointer; }
.fld input[type=range]:disabled { opacity: 0.4; cursor: default; }
.fld .seg { align-self: flex-start; }
.fld.run { align-items: flex-start; }
.fld.run .btn { min-width: 160px; }

.btn.ghost { background: var(--glass-strong); color: var(--ink); border-color: var(--glass-line); box-shadow: var(--glass-shadow-lo); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.94); border-color: var(--glass-line); }
.btn.icon { min-width: 40px; width: 40px; padding: 0; display: inline-grid; place-items: center; }
.btn.icon svg { width: 18px; height: 18px; fill: var(--primary); }
.btn.icon .i-pause, .btn.icon.playing .i-play { display: none; }
.btn.icon.playing .i-pause { display: inline; }
.player { display: flex; align-items: center; gap: 10px; }

.timeline { display: block; width: 100%; min-width: 600px; height: auto; touch-action: pan-y; }
.timeline text { font: 500 11px var(--font); fill: var(--muted); }
.timeline .lane { font: 700 12px var(--font); fill: var(--ink); }
.timeline .row-l { font: 700 11px var(--font); fill: var(--ink); }
.timeline .row-l.tbl { fill: var(--primary); }
.timeline .gridl { stroke: var(--glass-rule); }
.timeline .row-bg { fill: color-mix(in srgb, var(--s-neutral) 45%, transparent); }
.timeline .c-on { fill: var(--s-grid); }
.timeline .c-out { fill: var(--s-backup); }
.timeline .out { fill: var(--s-off); fill-opacity: 0.08; }
.timeline .storm { stroke: var(--s-off); stroke-width: 2; }
.timeline .storm-l { font: 700 11px var(--font); fill: var(--s-off-ink); }
.timeline .deadline { stroke: var(--s-backup); stroke-width: 1.5; stroke-dasharray: 4 3; }
.timeline .dl-l { font: 600 11px var(--font); fill: var(--s-backup-ink); }
.timeline .window { fill: var(--s-backup); fill-opacity: 0.16; }
.timeline .window-c { stroke: var(--s-backup); stroke-width: 1.5; stroke-dasharray: 3 3; }
.timeline .p-area { fill: var(--s-grid); fill-opacity: 0.16; }
.timeline .p-line { fill: none; stroke: var(--s-grid); stroke-width: 2; stroke-linejoin: round; }
.timeline .fleet-line { fill: none; stroke: var(--s-limit); stroke-width: 2.5; stroke-linejoin: round; }
.timeline .fleet-dot { fill: var(--s-limit); stroke: #fff; stroke-width: 2; }
.timeline .base-line { fill: none; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 5 4; }
.timeline .nowl { stroke: var(--ink); stroke-width: 1.5; }
.timeline .scrub-hit { fill: transparent; cursor: ew-resize; }

.drill-row { align-items: start; }
.drill-row.row2p { grid-template-columns: 1.15fr 1fr; }
.bunits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bu { display: grid; grid-template-columns: 34px minmax(96px, auto) auto 42px 1fr; align-items: center; gap: 4px 12px; padding: 9px 4px;
  border-bottom: 1px solid var(--glass-rule); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.bu:last-child { border-bottom: 0; }
.bu-id { font-weight: 800; }
.bu-pct { font-weight: 700; color: var(--ink); text-align: right; }
.bu-st { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bu.on .bu-st { color: var(--primary); font-weight: 700; }
.bu.out .bu-st { color: var(--s-backup-ink); font-weight: 700; }
.bu .socbar { width: 120px; margin: 0; }
.bu.out .socbar .now { background: var(--s-backup); }
.bu > * { min-width: 0; }
.relay { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 4px 9px; border-radius: var(--r-pill); max-width: 100%;
  background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--glass-rule); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: start; }
.relay i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--s-neutral); vertical-align: 0; }
.relay.on { color: #0F6E75; }
.relay.on i { background: #1FA8B3; box-shadow: 0 0 0 3px color-mix(in srgb, #1FA8B3 25%, transparent); }
.relay.sim { color: var(--faint); font-weight: 500; background: none; box-shadow: none; padding-left: 0; }

.dlog { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  font-size: var(--fs-sm); scroll-behavior: smooth; }
.dlog li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 84%, var(--muted)); }
.dlog li.empty { display: block; }
.dlog .lt { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dlog .k-plan { background: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
.dlog .k-ready .lt, .dlog .k-ready { color: #0F6E75; }
.dlog .k-storm, .dlog .k-short { background: color-mix(in srgb, var(--s-off) 9%, transparent); }
.dlog .k-storm .lt, .dlog .k-short .lt { color: var(--s-off-ink); }
.dlog .k-deploy .lt { color: var(--s-backup-ink); }

.outcome-h { font-size: var(--fs-md); font-weight: 700; line-height: 1.45; margin: 0 0 16px; color: var(--ink); text-wrap: pretty; }
.compare { display: flex; flex-direction: column; gap: 10px; }
.cmp-row { display: grid; grid-template-columns: 170px 1fr 56px; grid-template-rows: auto auto; gap: 2px 14px; align-items: center; }
.cmp-n { font-size: var(--fs-sm); font-weight: 700; }
.cmp-bar { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--s-neutral) 55%, transparent); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; border-radius: 6px; }
.cmp-row.out .cmp-bar i { background: color-mix(in srgb, var(--s-off) 55%, transparent); }
.cmp-row.plan .cmp-bar i { background: var(--s-limit); }
.cmp-row.base .cmp-bar i { background: var(--faint); }
.cmp-v { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.cmp-note { grid-column: 2 / 4; font-size: var(--fs-xs); color: var(--muted); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dk { background: var(--glass-strong); }
  .verdict { background: var(--primary); }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .setup-grid { grid-template-columns: 1fr 1fr; }
  .drill-row.row2p { grid-template-columns: 1fr; }
  .decision { grid-template-columns: repeat(4, 1fr); }
  .verdict { grid-column: 1 / -1; min-height: 0; }
  .row2p, .row2p.lower, .areas-grid { grid-template-columns: 1fr; }
  .reasons { columns: 1; }
}
@media (max-width: 700px) {
  .decision { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dk-val { font-size: 24px; }
  .need { grid-template-columns: 1fr; }
  .h1-sub { display: none; }
  .socbar { width: 80px; }
  .setup-grid { grid-template-columns: 1fr; }
  .controls { width: 100%; }
  .bu { grid-template-columns: 30px 1fr 42px; }
  .bu .socbar { grid-column: 1 / -1; width: 100%; order: 5; }
  .bu-st { grid-column: 2 / -1; }
  .cmp-row { grid-template-columns: 1fr 56px; }
  .cmp-bar { grid-column: 1 / -1; grid-row: 2; }
  .cmp-note { grid-column: 1 / -1; grid-row: 3; }
  .dlog li { grid-template-columns: 62px 1fr; }
}