/* BF-DESIOS dashboard - Pump POC design tokens (docs/Pump_POC_Colour_Palette.pdf,
   docs/Screens/Screens/bf_*.jpg). Flat colours only: no gradients, glow or neon. */

/* Inter, self-hosted so the demo works offline (SIL OFL, see fonts/LICENSE.txt). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/InterVariable.woff2) format("woff2"); }

:root {
  --navy: #0F2A44; --teal: #0B7D71; --teal-50: #E2F3F0; --mist: #EAF0F5; --card: #FFFFFF;
  --line: #D6E0E9; --ink: #122436; --slate: #51627A; --muted: #8693A3;
  --good: #2A7630; --good-bg: #E5F3E6;
  --warn-f: #E09100; --warn-bg: #FFF2D9; --warn: #9A5B00;
  --crit: #C62828; --crit-bg: #FCE8E8;
  --missing: #8693A3; --missing-bg: #EDF1F5;
  --ms1: #3F51B5; --ms1-bg: #E9ECFA; --bf: #1E78C8; --bf-bg: #E3EFFA;
  --soft-bg: #F4F7FA; --strip: #E6F0FA;
  --shadow: 0 1px 2px rgba(15, 42, 68, .04), 0 4px 14px rgba(15, 42, 68, .05);
  --edge: 40px;
  --gut: max(var(--edge), calc((100% - 1440px) / 2 + var(--edge)));
  /* Old names, still used by a few rules */
  --accent: var(--teal); --bg: var(--mist); --soft: var(--teal-50);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mist); color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px;
  font-feature-settings: "cv11", "ss01" 0; -webkit-font-smoothing: antialiased; }
a { color: var(--teal); }
.kpi-n, .big, .table td, .sure-n, .seg-link, .dash-slider-mark, .chip { font-variant-numeric: tabular-nums; }

/* ---- icons: Lucide-style outline SVGs used as masks, so they take the text colour */
.ic { display: inline-block; flex: none; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; vertical-align: -3px; }
.i-droplet { -webkit-mask-image: url(icons/droplet.svg); mask-image: url(icons/droplet.svg); }
.i-map { -webkit-mask-image: url(icons/map.svg); mask-image: url(icons/map.svg); }
.i-map-pin { -webkit-mask-image: url(icons/map-pin.svg); mask-image: url(icons/map-pin.svg); }
.i-bell { -webkit-mask-image: url(icons/bell.svg); mask-image: url(icons/bell.svg); }
.i-hourglass { -webkit-mask-image: url(icons/hourglass.svg); mask-image: url(icons/hourglass.svg); }
.i-check-check { -webkit-mask-image: url(icons/check-check.svg); mask-image: url(icons/check-check.svg); }
.i-alert { -webkit-mask-image: url(icons/alert.svg); mask-image: url(icons/alert.svg); }
.i-eye { -webkit-mask-image: url(icons/eye.svg); mask-image: url(icons/eye.svg); }
.i-gauge { -webkit-mask-image: url(icons/gauge.svg); mask-image: url(icons/gauge.svg); }
.i-split { -webkit-mask-image: url(icons/split.svg); mask-image: url(icons/split.svg); }
.i-clipboard { -webkit-mask-image: url(icons/clipboard.svg); mask-image: url(icons/clipboard.svg); }
.i-tank { -webkit-mask-image: url(icons/tank.svg); mask-image: url(icons/tank.svg); }
.i-ruler { -webkit-mask-image: url(icons/ruler.svg); mask-image: url(icons/ruler.svg); }
.i-scale { -webkit-mask-image: url(icons/scale.svg); mask-image: url(icons/scale.svg); }
.i-circle-check { -webkit-mask-image: url(icons/circle-check.svg); mask-image: url(icons/circle-check.svg); }
.i-check { -webkit-mask-image: url(icons/check.svg); mask-image: url(icons/check.svg); }
.i-x { -webkit-mask-image: url(icons/x.svg); mask-image: url(icons/x.svg); }
.i-moon { -webkit-mask-image: url(icons/moon.svg); mask-image: url(icons/moon.svg); }
.i-sun { -webkit-mask-image: url(icons/sun.svg); mask-image: url(icons/sun.svg); }
.i-target { -webkit-mask-image: url(icons/target.svg); mask-image: url(icons/target.svg); }
.i-radar { -webkit-mask-image: url(icons/radar.svg); mask-image: url(icons/radar.svg); }
.i-bars { -webkit-mask-image: url(icons/bars.svg); mask-image: url(icons/bars.svg); }
.i-line { -webkit-mask-image: url(icons/line.svg); mask-image: url(icons/line.svg); }
.i-shield { -webkit-mask-image: url(icons/shield.svg); mask-image: url(icons/shield.svg); }
.i-zap { -webkit-mask-image: url(icons/zap.svg); mask-image: url(icons/zap.svg); }
.i-sliders { -webkit-mask-image: url(icons/sliders.svg); mask-image: url(icons/sliders.svg); }
.i-piggy { -webkit-mask-image: url(icons/piggy.svg); mask-image: url(icons/piggy.svg); }
.i-receipt { -webkit-mask-image: url(icons/receipt.svg); mask-image: url(icons/receipt.svg); }
.i-calculator { -webkit-mask-image: url(icons/calculator.svg); mask-image: url(icons/calculator.svg); }
.i-clock { -webkit-mask-image: url(icons/clock.svg); mask-image: url(icons/clock.svg); }
.i-calendar { -webkit-mask-image: url(icons/calendar.svg); mask-image: url(icons/calendar.svg); }
.i-info { -webkit-mask-image: url(icons/info.svg); mask-image: url(icons/info.svg); }
.i-chevron { -webkit-mask-image: url(icons/chevron.svg); mask-image: url(icons/chevron.svg); }
.i-truck { -webkit-mask-image: url(icons/truck.svg); mask-image: url(icons/truck.svg); }
.i-arrow { -webkit-mask-image: url(icons/arrow.svg); mask-image: url(icons/arrow.svg); }

/* ---- top bar: flat navy, logo tile, tabs as pills, user box on the right */
.top { display: flex; align-items: center; gap: 28px; min-height: 66px; padding: 10px var(--gut);
  background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 10; }
.top .brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; min-width: 0; }
.top .brand b { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.top .brand .muted { color: #9FB0C3; font-size: 14px; }
.logo { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: var(--bf); color: #fff; flex: none; }
.logo .ic { width: 18px; height: 18px; }
.top nav { display: flex; gap: 4px; flex: 1; min-width: 0; }
.nav-link { color: #DCE5EE; text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: 15px;
  font-weight: 500; white-space: nowrap; }
.nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-link.on { background: var(--bf); color: #fff; }

/* the user picker (dcc.Dropdown) drawn as the design's user box */
.top .user { width: auto; min-width: 250px; flex: none; height: 40px; padding: 0 12px 0 10px;
  background: #1A3753; border: 1px solid #2C4A66; border-radius: 10px; color: #fff; cursor: pointer;
  font: inherit; box-shadow: none; }
.top .user:hover, .top .user:focus { border-color: #3D5E7E; outline: none; }
.top .user .dash-dropdown-trigger { display: flex; align-items: center; gap: 8px; height: 100%; }
.top .user .dash-dropdown-value { flex: 1; min-width: 0; color: #fff; }
.top .user .dash-dropdown-trigger-icon { color: #DCE5EE; width: 18px; height: 18px; }
.who { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 15px; }
.av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--warn-f); color: var(--navy); font-size: 11.5px; font-weight: 700; flex: none; }
.who-r { color: var(--slate); font-size: 14px; }
.top .user .who-n { color: #fff; }
.top .user .who-r { color: #9FB0C3; }

/* ---- page: header strip full width, content with the page edge */
.page { padding: 0 0 56px; }
.page > *:not(.intro) { margin-left: var(--gut); margin-right: var(--gut); }
.page > .intro { margin: 0 0 28px; }
.page > :first-child:not(.intro) { margin-top: 28px; }
.intro { background: var(--strip); border-bottom: 1px solid var(--line); padding: 30px var(--gut) 28px; }
.intro-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.intro-text { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--bf); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.intro h1 { margin: 0 0 10px; font-size: 28px; font-weight: 700; color: var(--navy); letter-spacing: -.01em;
  line-height: 1.2; }
.intro p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.55; max-width: 860px; }
.intro-right { flex: none; }
h1 { font-size: 28px; }
h3 { font-size: 16.5px; margin: 0; color: var(--navy); font-weight: 700; }
h4 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }

/* segmented zone picker */
.zone-pick { display: inline-flex; gap: 2px; padding: 4px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; }
.seg-link { min-width: 42px; text-align: center; padding: 7px 10px; border-radius: 7px; color: var(--ink);
  text-decoration: none; font-size: 14.5px; font-weight: 500; }
.seg-link:hover { background: var(--soft-bg); }
.seg-link.on { background: var(--navy); color: #fff; }

/* ---- cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px;
  margin-bottom: 20px; display: block; color: inherit; text-decoration: none; box-shadow: var(--shadow);
  min-width: 0; overflow-wrap: anywhere; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 0; }
.grid2 > * { min-width: 0; }
.muted { color: var(--slate); }
.small { font-size: 13px; }

/* ---- notice boxes: amber (warn), green (ok) */
.banner, .notice { display: flex; align-items: flex-start; gap: 12px; border-radius: 12px; padding: 14px 18px;
  margin-bottom: 20px; font-size: 15px; line-height: 1.55; background: var(--warn-bg); border: 1px solid #F1C46B;
  color: #4A3000; }
.banner-ic, .notice > .ic { width: 22px; height: 22px; color: var(--warn); margin-top: 0; }
.banner-t { min-width: 0; }
.banner b { color: #5C3A00; font-weight: 700; }
.banner a { color: var(--warn); font-weight: 700; text-decoration: none; white-space: nowrap; }
.banner a .ic, .zone-open .ic { width: 15px; height: 15px; vertical-align: -2px; }
.banner a:hover { text-decoration: underline; }
.banner.ok, .notice.ok { background: var(--good-bg); border-color: #B9DDBB; color: #1F4A23; }
.banner.ok .banner-ic, .notice.ok > .ic { color: var(--good); }
.banner.ok b { color: #1D5222; }

/* ---- KPI cards: coloured left edge, icon tile, label, number + unit, note */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { --tone: var(--bf); --tone-bg: var(--bf-bg); display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--tone); border-radius: 14px;
  padding: 20px 22px 20px 20px; box-shadow: var(--shadow); min-width: 0; }
.kpi-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: var(--tone-bg); color: var(--tone); }
.kpi-ic .ic { width: 19px; height: 19px; }
.kpi-body { min-width: 0; }
.kpi-l { font-size: 12.5px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .06em;
  line-height: 1.5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi-n { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.15; margin-top: 4px;
  letter-spacing: -.01em; }
.kpi-u { font-size: 14px; font-weight: 500; color: var(--slate); margin-left: 3px; letter-spacing: 0; }
.kpi-note { font-size: 13.5px; color: var(--slate); margin-top: 4px; line-height: 1.45; }
.kpi.warn .kpi-n { color: var(--warn); }
.kpi.good .kpi-n { color: var(--tone-text, var(--good)); }
.tone-blue { --tone: var(--bf); --tone-bg: var(--bf-bg); }
.tone-amber { --tone: var(--warn-f); --tone-bg: var(--warn-bg); --tone-ic: var(--warn); }
.tone-green { --tone: var(--good); --tone-bg: var(--good-bg); --tone-text: var(--good); }
.tone-teal { --tone: var(--teal); --tone-bg: var(--teal-50); --tone-text: var(--teal); }
.tone-indigo { --tone: var(--ms1); --tone-bg: var(--ms1-bg); }
.tone-slate { --tone: #A9B5C2; --tone-bg: var(--missing-bg); --tone-ic: var(--slate); }
.tone-amber .kpi-ic, .tone-slate .kpi-ic { color: var(--tone-ic); }
.kpi.tone-slate.warn { --tone: var(--warn-f); }

/* ---- chart cards: badge or icon tile, title + takeaway, inline legend, chart, how to read */
.card.chart { padding: 24px 24px 20px; }
.chart-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.chart-head-t { flex: 1; min-width: 0; }
.chart-head.legend-right .legend { margin: 6px 0 0; justify-content: flex-end; flex: 0 1 auto; }
.chart-title { display: block; font-size: 16.5px; font-weight: 700; color: var(--navy); margin: 0 0 4px; line-height: 1.35; }
.num { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: 6px;
  border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.tile { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--tone-bg); color: var(--tone); }
.tile .ic { width: 19px; height: 19px; }
.takeaway { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--teal); line-height: 1.45; }
.takeaway.warn { color: var(--warn); }
.sub { margin: 0; font-size: 14px; color: var(--slate); line-height: 1.45; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 10px; font-size: 13.5px; color: var(--slate); }
.lg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lg.off { color: var(--muted); }
.sw { display: inline-block; flex: none; background: var(--c); }
.sw-line { width: 16px; height: 3px; border-radius: 2px; }
.sw-dash { width: 16px; height: 0; border-top: 3px dashed var(--c); background: none; }
.sw-dot { width: 10px; height: 10px; border-radius: 50%; }
.sw-sq { width: 12px; height: 12px; border-radius: 3px; }
.sw-band { width: 14px; height: 14px; border-radius: 3px; }
.sw-off { width: 16px; height: 3px; border-radius: 2px; }
.sw-x { width: 10px; height: 10px; background: none; position: relative; }
.sw-x::before, .sw-x::after { content: ""; position: absolute; left: -1px; right: -1px; top: 4px; height: 2px;
  background: var(--c); transform: rotate(45deg); }
.sw-x::after { transform: rotate(-45deg); }
.graph, .dash-graph, .js-plotly-plot { width: 100%; max-width: 100%; }
.how { margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px;
  color: var(--slate); line-height: 1.55; }
.how b { color: var(--ink); font-weight: 700; }
.footnote { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; font-size: 13.5px; color: var(--slate);
  line-height: 1.5; }
.footnote .ic { margin-top: 2px; }
.page > .footnote { margin-top: 0; margin-bottom: 12px; }

/* ---- pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 12px;
  border-radius: 999px; white-space: nowrap; flex: none; }
.pill .ic { width: 14px; height: 14px; }
.pill.ok, .pill.accepted { background: var(--good-bg); color: var(--good); }
.pill.warn, .pill.open { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--crit-bg); color: var(--crit); }
.pill.rejected, .pill.grey { background: var(--missing-bg); color: var(--slate); }

/* ---- zone cards (2x2) */
.zone-grid { margin-bottom: 20px; }
.zone-card { padding: 0; margin-bottom: 0; overflow: visible; display: flex; flex-direction: column; }
.zone-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 22px 22px 0; }
.zone-name { display: flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; min-width: 0; }
.zone-name b { font-size: 19px; font-weight: 700; }
.zone-name:hover b { color: var(--teal); }
.ztile { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-size: 15.5px;
  font-weight: 700; flex: none; }
.z-Z1 { background: var(--teal-50); color: var(--teal); }
.z-Z2 { background: var(--ms1-bg); color: var(--ms1); }
.z-Z3 { background: var(--warn-bg); color: var(--warn); }
.z-Z4 { background: var(--bf-bg); color: var(--bf); }
.zone-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 22px 22px 24px; }
.big { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.2; letter-spacing: -.01em; }
.big.warn { color: var(--warn); }
.zone-figs .small { font-size: 13px; margin-top: 4px; }
.zone-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto;
  padding: 14px 22px; background: var(--soft-bg); border-top: 1px solid #E6ECF2; border-radius: 0 0 13px 13px; }
.zone-line { font-size: 14px; color: var(--slate); display: inline-flex; align-items: center; gap: 6px; }
.zone-line.warn { color: #5C3A00; font-weight: 600; }
.zone-line .ic { width: 17px; height: 17px; }
.zone-open { font-size: 14px; font-weight: 600; color: var(--teal); text-decoration: none; white-space: nowrap; }
.zone-open:hover { text-decoration: underline; }
.zone-card.attention { border-color: #F1C46B; }
.zone-card.attention .zone-foot { background: var(--warn-bg); border-top-color: #F6DDA6; }
.zone-card.attention .zone-open { color: var(--warn); }

/* ---- alerts */
.card.alert { padding: 0; overflow: hidden; }
.card.alert.open { border-color: #F1C46B; }
.alert-head { display: flex; align-items: center; gap: 14px; padding: 16px 24px; background: var(--warn-bg);
  border-bottom: 1px solid #F1C46B; }
.card.alert:not(.open) .alert-head { background: var(--soft-bg); border-bottom-color: var(--line); }
.alert-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff;
  color: var(--warn); flex: none; }
.alert-ic .ic { width: 19px; height: 19px; }
.alert-title { flex: 1; min-width: 0; font-size: 18px; color: var(--navy); line-height: 1.35; }
.alert-title b { font-weight: 700; }
.alert-t { color: #6B4300; }
.alert-head .pill.open { background: none; padding-right: 0; }
.alert-body { padding: 22px 24px 4px; }
.alert-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.alert-grid > * { min-width: 0; }
.alert p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
.alert h4 .ic { width: 15px; height: 15px; }
.sure { display: flex; align-items: center; gap: 18px; padding: 14px 18px; background: var(--soft-bg);
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; font-size: 14.5px; line-height: 1.5; }
.sure-n { font-size: 30px; font-weight: 700; color: var(--warn); flex: none; }
.alert-boxes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 20px; margin: 22px 0 20px; }
.box { background: var(--soft-bg); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; min-width: 0; }
.alert ul, .alert ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.55; }
.alert li { margin-bottom: 8px; }
.alert ol li::marker { color: var(--teal); font-weight: 700; }
.decide { display: flex; gap: 12px; align-items: center; padding: 18px 24px; margin: 0; border-top: 1px solid var(--line);
  flex-wrap: wrap; background: #fff; }
.decide > .dash-input-container { flex: 1 1 320px; min-width: 0; width: auto; height: auto; padding: 0;
  border: 0; background: none; box-shadow: none; }
.decide input { width: 100%; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; }
.decide input:focus { outline: 2px solid var(--bf-bg); border-color: var(--bf); }
.decide input::placeholder { color: var(--muted); }
.decided { color: var(--good); margin: 0; padding: 16px 24px; border-top: 1px solid var(--line); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: #B9C7D5; }
.btn .ic { width: 17px; height: 17px; }
.btn.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn.primary:hover { background: #096A60; }

/* ---- tanks */
.card.tank { padding: 24px; }
.tank-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.tank-head .pill { margin-top: 4px; }
.kpis.inner { margin-bottom: 22px; }
.kpis.inner .kpi { box-shadow: 0 1px 2px rgba(15, 42, 68, .04); }
h4.sec { margin: 22px 0 12px; }
.table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; padding: 13px 20px; background: var(--soft-bg); color: var(--slate); font-size: 12.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line);
  white-space: nowrap; }
.table td { text-align: left; padding: 13px 20px; border-bottom: 1px solid #E6ECF2; color: var(--ink); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
details.fold { padding: 24px; }
details.fold > summary { list-style: none; cursor: pointer; margin: 0; align-items: center; }
details.fold > summary::-webkit-details-marker { display: none; }
.fold-btn { margin-left: auto; height: 40px; font-size: 14.5px; }
.fold-btn .ic { transition: transform .15s; }
details.fold[open] .fold-btn .ic { transform: rotate(180deg); }
details.fold .fold-open, details.fold[open] .fold-closed { display: none; }
details.fold[open] .fold-open { display: inline; }
details.fold[open] p.fold-open { display: block; }
details.fold[open] > summary { margin-bottom: 20px; }
.fold-pill { margin: -8px 0 16px; }

/* ---- filling plan */
.card.controls { padding: 24px; }
.ctl-row { display: flex; gap: 40px; align-items: flex-start; }
.ctl-row > * { min-width: 0; }
.ctl-grow { flex: 1; position: relative; }
.ctl-grow > label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--navy);
  margin: 10px 0 18px; padding-right: 110px; }
#peak { display: block; }
#peak > input { position: absolute; top: 0; right: 0; width: 96px !important; height: 40px; text-align: center;
  font: inherit; font-size: 20px; font-weight: 700; color: var(--teal); background: var(--teal-50);
  border: 1px solid #BFE3DD; border-radius: 10px; padding: 0 8px; -moz-appearance: textfield; }
#peak > input::-webkit-outer-spin-button, #peak > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#peak .dash-slider-wrapper { padding: 0; }
#peak .dash-slider-root { height: 44px; }
#peak .dash-slider-track { height: 8px; background: #E3E9EF; border-radius: 99px; top: 8px; }
#peak .dash-slider-range { background: var(--teal); border-radius: 99px; }
#peak .dash-slider-thumb { width: 22px; height: 22px; background: #fff; border: 3px solid var(--teal);
  box-shadow: 0 1px 3px rgba(15, 42, 68, .2); }
#peak .dash-slider-mark { font-size: 13.5px; color: var(--slate); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13.5px;
  font-weight: 500; white-space: nowrap; }
.chip .ic { width: 14px; height: 14px; }
.chip.indigo { background: var(--ms1-bg); color: var(--ms1); }
.chip.grey { background: var(--missing-bg); color: var(--slate); }
.chip.amber { background: var(--warn-bg); color: var(--warn); }
.pumps-box { flex: 0 0 270px; background: var(--soft-bg); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.pumps-box > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--slate); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 12px; }
#pumps .dash-options-list-option { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px;
  color: var(--slate); cursor: pointer; }
#pumps .dash-options-list-option b { color: var(--navy); margin-right: 6px; }
#pumps input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--teal); margin: 0; cursor: pointer; }
#plan-out > .banner { margin-top: 0; }

/* ---- the (i) button and its explanation box */
details.info { display: inline-block; position: relative; vertical-align: 1px; }
details.info > summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted);
  font: italic 700 10px Georgia, serif; text-transform: none; letter-spacing: 0; user-select: none; }
details.info > summary::-webkit-details-marker { display: none; }
details.info > summary:hover, details.info[open] > summary { background: var(--navy); border-color: var(--navy); color: #fff; }
.info-pop { position: absolute; z-index: 30; top: 22px; left: -12px; width: 380px; max-width: calc(100vw - 32px);
  padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 42, 68, .16); color: var(--ink); font-size: 12.5px; line-height: 1.45;
  text-transform: none; letter-spacing: 0; font-weight: 400; }
.info-pop p { margin: 6px 0; }
.info-table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; }
.info-table th, .info-table td { text-align: left; vertical-align: top; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.info-table th { color: var(--slate); font-weight: 600; }
.info-table td:first-child { font-weight: 600; white-space: nowrap; }
/* Cards in the right-hand column open the box towards the left, away from the screen edge. */
.grid2 > .zone-card:nth-child(even) .info-pop { left: auto; right: -12px; }
.kpis > .kpi:nth-child(n+3) .info-pop { left: auto; right: -40px; }

/* ---- responsive: 1280 / 1024 / 768 (tablet) / 390 (phone) */
@media (max-width: 1280px) {
  .top { gap: 18px; }
  .top .brand .muted { display: none; }
  .nav-link { padding: 8px 11px; }
  .kpi-n { font-size: 27px; }
}
@media (max-width: 1100px) {
  :root { --edge: 24px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alert-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .grid2 > .zone-card:nth-child(even) .info-pop { left: -12px; right: auto; }
  .zone-grid > .zone-card:nth-child(even) .info-pop { left: auto; right: -12px; }
}
@media (max-width: 1024px) {
  /* Top bar: logo + user on one row, the tabs scroll sideways underneath. */
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 10px var(--edge) 8px; }
  .top nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; flex-wrap: nowrap; gap: 4px;
    margin: 0 calc(-1 * var(--edge)); padding: 2px var(--edge) 4px; scrollbar-width: none; }
  .top nav::-webkit-scrollbar { display: none; }
  .nav-link { flex: none; }
  .top .user { min-width: 0; }
  .ctl-row { flex-direction: column; gap: 20px; }
  .pumps-box { flex: none; width: 100%; }
  .alert-boxes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .zone-grid { grid-template-columns: minmax(0, 1fr); }
  .zone-grid > .zone-card .info-pop { left: 50%; right: auto; transform: translateX(-50%); }
  .kpis-3 { grid-template-columns: minmax(0, 1fr); }
  .intro-in { flex-direction: column; align-items: flex-start; gap: 18px; }
  .chart-head.legend-right { flex-wrap: wrap; }
  .chart-head.legend-right .legend { flex-basis: 100%; justify-content: flex-start; margin: 0; }
}
@media (max-width: 600px) {
  :root { --edge: 16px; }
  .top .who-r { display: none; }
  .top .brand b { font-size: 16px; }
  .intro { padding-top: 22px; padding-bottom: 22px; }
  .intro h1 { font-size: 23px; }
  .intro p { font-size: 14.5px; }
  .page > .intro { margin-bottom: 20px; }
  .kpis, .kpis-2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kpi { padding: 16px; }
  .kpi-n { font-size: 26px; }
  .card, .card.chart, .card.tank, details.fold, .card.controls { padding: 18px 16px; border-radius: 12px; }
  .card.alert, .card.zone-card { padding: 0; }
  .zone-head { padding: 18px 16px 0; flex-wrap: wrap; }
  .zone-figs { padding: 18px 16px 20px; gap: 8px; }
  .zone-foot { padding: 12px 16px; flex-wrap: wrap; }
  .big { font-size: 21px; }
  .zone-figs .small { font-size: 12.5px; }
  .banner, .notice { padding: 12px 14px; font-size: 14px; }
  .alert-head { padding: 14px 16px; flex-wrap: wrap; }
  .alert-title { font-size: 16px; flex-basis: calc(100% - 52px); }
  .alert-body { padding: 18px 16px 4px; }
  .decide { padding: 16px; }
  .decide .btn { flex: 1 1 100%; }
  .decide > .dash-input-container { flex-basis: 100%; }
  .sure { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tank-head { flex-wrap: wrap; }
  .fold-btn { margin-left: 50px; }
  .ctl-grow > label { padding-right: 0; margin-top: 56px; }
  .table th, .table td { padding: 11px 14px; }
  .chips { gap: 8px; }
  /* The (i) box opens as a full-width sheet under its button, not beside it. */
  .info-pop, .grid2 > .zone-card:nth-child(even) .info-pop, .zone-grid > .zone-card:nth-child(even) .info-pop,
  .kpis > .kpi:nth-child(n+3) .info-pop {
    position: fixed; left: 16px; right: 16px; width: auto; top: auto; max-width: none; }
  .info-pop, .zone-grid > .zone-card .info-pop { max-height: 70vh; overflow: auto; transform: none;
    left: 16px; right: 16px; }
  .info-table td:first-child { white-space: normal; }
}

/* Peak-price slider as in the design: plain track, no tick dots on it, and a
   little air between the track and the price labels. */
#peak .dash-slider-mark::before, #peak .dash-slider-mark::after { display: none !important; content: none !important; }
#peak .dash-slider-root { height: 50px; }
#peak .dash-slider-mark { bottom: -2px !important; }