/* Old Mate's campsite (5 Oct 2026) -- uses the main site's colour tokens (style.css). */
header .cs-back { color: #cfe3f7; text-decoration: none; font-size: 14px; white-space: nowrap; }
main.cs { max-width: 1240px; padding: 16px 16px 48px; }
.cs-intro h2 { margin: 4px 0 6px; font-size: 22px; }
.cs-intro p { margin: 0 0 16px; color: var(--text-2); max-width: 760px; line-height: 1.5; }
.cs-muted { color: var(--muted); font-size: 13px; }

.cs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1000px) {
  .cs-layout { grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); align-items: start; }
  .cs-results { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
}
.cs-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.cs-card h3 { margin: 0 0 12px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.cs-step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; }
.cs-sub { margin: 16px 0 8px; font-size: 14px; color: var(--text-2); }
.cs-card > .cs-sub:first-child { margin-top: 0; }

/* Fields */
.cs-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-2); min-width: 0; }
.cs-f > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-f small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.cs-in { position: relative; display: flex; }
.cs-in i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); font-size: 12px; pointer-events: none; }
.cs input, .cs select { font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px; min-width: 0; width: 100%; }
.cs-in input { padding-right: 26px; }
.cs input:focus, .cs select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.cs input[type="number"] { -moz-appearance: textfield; }
.cs input[type="number"]::-webkit-outer-spin-button, .cs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.cs-linkbtn { background: none; border: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

/* Segmented buttons */
.cs-segs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cs-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.cs-seg-cap { margin: 0 0 4px; font-size: 11.5px; color: var(--muted); }
.cs-seg-cap a { color: var(--accent); }
.cs-seg button { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer; }
.cs-seg button:hover { background: var(--hover); }
.cs-seg button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* Loads */
.cs-load { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: var(--surface-2); }
.cs-load-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cs input.cs-load-name { flex: 1; font-weight: 600; border-color: transparent; background: transparent; padding: 4px 6px; }
.cs input.cs-load-name:hover { border-color: var(--border); }
.cs-load-wh { font-size: 14px; white-space: nowrap; }
.cs-x { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.cs-x:hover { color: var(--bad); border-color: var(--bad); }
.cs-load-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cs-load-sum, .cs-sum { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.cs-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.cs-empty { color: var(--muted); font-size: 14px; }
.cs-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 4px; }
.cs-add-sel { flex: 1 1 220px; }
.cs-total { margin: 10px 0 0; font-size: 14px; }
.cs-reset { text-align: center; }
.cs-reset button { background: none; border: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* What you run: Quick pick / Detailed */
.cs-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cs-card-head h3 { margin: 0; }
.cs-tabs { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.cs-tabs button { font: inherit; font-size: 13px; padding: 5px 14px; border: none; background: var(--surface); color: var(--text-2); cursor: pointer; }
.cs-tabs button + button { border-left: 1px solid var(--border-strong); }
.cs-tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
#loadsQuick[hidden], #loadsDetailed[hidden], #gearQuick[hidden], #gear[hidden] { display: none; }
.cs-q-sub { display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.cs-q-sub .cs-f { flex-direction: row; align-items: center; gap: 8px; }
.cs-q-sub .cs-f > span:first-child { flex: none; }
.cs-quick { display: flex; flex-direction: column; gap: 6px; }
.cs-q { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) 60px; gap: 8px; align-items: center; font-size: 14px; }
.cs-q-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .cs-q select { font-size: 13px; padding: 5px 6px; }
.cs-q-wh { text-align: right; font-size: 13px; white-space: nowrap; }
.cs-q-more { font-size: 13px; color: var(--text-2); margin: 10px 0 0; }
/* Lines: + first, then the name, the choice, the figure, and x on the far
   right (user, 5 Oct). The button pair's wrapper steps aside (display:
   contents) so each button takes its own column. */
.cs-q-line { grid-template-columns: 26px minmax(0, 0.9fr) minmax(0, 1.4fr) 56px 26px; grid-template-areas: "add name sel wh rm"; }
.cs-q-line > .cs-q-btns { display: contents; }
.cs-q-line > .cs-q-btns > :first-child { grid-area: add; }
.cs-q-line > .cs-q-btns > :last-child { grid-area: rm; }
.cs-q-line > .cs-q-name { border-left: 1px solid var(--border); padding-left: 8px; }
.cs-q-line > .cs-q-btns-empty + .cs-q-name, .cs-q-head > .cs-q-name { border-left-color: transparent; }
.cs-q-line > .cs-q-name { grid-area: name; }
.cs-q-line > select, .cs-q-line > .cs-q-ctrls, .cs-q-line > .cs-q-hsel { grid-area: sel; }
.cs-q-line > .cs-q-wh { grid-area: wh; }
/* A divider between the Wh figure and the buttons, and headings over both. */
.cs-q-ctrls { display: flex; gap: 6px; min-width: 0; }
.cs .cs-q-ctrls select { min-width: 0; }
.cs .cs-q-ctrls select.cs-q-count { flex: none; width: 58px; }
.cs-q-btns { display: inline-flex; gap: 6px; border-right: 1px solid var(--border); padding-right: 8px; }
.cs-q-btns-empty { border-right-color: transparent; }
.cs-q-head { font-size: 10.5px; font-weight: 600; color: var(--muted); margin-bottom: -2px; }
.cs-q-head .cs-q-btns > span { justify-self: center; white-space: nowrap; }
.cs-q-head .cs-q-btns > span:last-child { justify-self: end; }
.cs-q-head > .cs-q-wh { padding-right: 8px; }
.cs-q-btn { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.cs-q-btn:hover { border-color: var(--accent); color: var(--accent); }
.cs-q-x:hover { border-color: var(--bad); color: var(--bad); }
.cs-q-gap { display: inline-block; width: 26px; }
.cs-q-own { grid-column: 1 / -1; margin: -2px 0 2px; font-size: 12px; color: var(--text-2); }
.cs-flash { animation: cs-flash 1.6s ease-out; }
@keyframes cs-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent); background-color: var(--accent-soft); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .cs-flash { animation: none; outline: 3px solid var(--accent); } }
/* Underrated gear and what's causing it (checks with level "bad"). */
.cs-q.cs-flag { background: var(--bad-bg); box-shadow: 0 0 0 1px var(--bad); border-radius: 8px; padding: 4px 6px; }
.cs-load.cs-flag, .cs-gear.cs-flag { box-shadow: 0 0 0 2px var(--bad); border-radius: 10px; background: var(--bad-bg); }
.cs-gear.cs-flag { padding-left: 8px; padding-right: 8px; }
.cs-node-flag { stroke: var(--bad) !important; stroke-width: 2.5 !important; }
.cs-q-back { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
.cs-q-backbtn { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer; }
.cs-q-backbtn:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
@media (max-width: 460px) {
  .cs-q { grid-template-columns: minmax(0, 1fr) 60px; row-gap: 3px; padding-bottom: 4px; }
  .cs-q select { grid-column: 1 / -1; grid-row: 2; }
  .cs-q-line { grid-template-columns: 26px minmax(0, 1fr) 56px 26px; grid-template-areas: "add name wh rm" "sel sel sel sel"; }
  .cs-q-ctrls { grid-column: 1 / -1; grid-row: 2; }
  .cs-q-head > .cs-q-hsel { display: none; }
}

/* The forecast panel (5 Oct 2026) */
.cs-fc { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--accent-border); border-radius: 8px; background: var(--surface); }
.cs-fc p { margin: 0 0 6px; }
.cs-fc-head { font-size: 13.5px; }
.cs-fc-days { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--text-2); }
.cs-fc-day b { color: var(--text); }
.cs-fc-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs .cs-fc-row input { flex: 1 1 160px; width: auto; }
.cs-fc-pick { display: block; width: 100%; text-align: left; margin-top: 4px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.cs-fc-pick:hover { border-color: var(--accent); background: var(--accent-soft); }
.cs-fc-pick small { color: var(--muted); }

/* Gear */
.cs-gear { padding: 12px 0; border-top: 1px solid var(--border); }
.cs-gear:first-child { border-top: none; padding-top: 0; }
.cs-gear h4 { margin: 0 0 10px; font-size: 15px; }
.cs-gear h4 small { font-weight: 400; color: var(--muted); font-size: 12px; }

/* Pick from what Old Mate tracks */
.cs-pick { margin-top: 8px; }
.cs-pick-btn { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 6px; border: 1px dashed var(--accent-border); background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; }
.cs-pick-btn:hover { background: var(--accent-soft-hover); }
.cs-pick-panel { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface); }
.cs-pick-intro { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.cs-pick-list { max-height: 280px; overflow-y: auto; margin-top: 8px; border-top: 1px solid var(--border); }
.cs-pick-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 8px 4px; border: none; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.cs-pick-row:hover { background: var(--hover); }
.cs-pick-spec { font-weight: 700; }
.cs-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.cs-pick-price { white-space: nowrap; font-weight: 600; }
.cs-chip { border: 1px solid var(--accent-border); background: var(--accent-soft); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.cs-chip-l1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cs-chip-l1 .cs-x { width: 22px; height: 22px; font-size: 14px; }
.cs-chip-l2 { margin-top: 3px; color: var(--text-2); }
.cs-chip-l2 a { color: var(--accent); }
.cs-chip-pill .pill { position: relative; top: -1px; }
.cs-chip-note { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* Results */
.cs-head { display: flex; gap: 12px; align-items: flex-start; border-radius: 10px; padding: 12px 14px; border: 1px solid; }
.cs-head-icon { font-size: 28px; line-height: 1; }
.cs-head-big { margin: 0; font-size: 19px; font-weight: 700; }
.cs-head-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.cs-head-good { background: var(--good-bg); border-color: var(--good); }
.cs-head-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.cs-head-bad { background: var(--bad-bg); border-color: var(--bad); }
.cs-head-info { background: var(--surface-2); border-color: var(--border); }
.cs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.cs-tile { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cs-tile-l { font-size: 12px; color: var(--muted); }
.cs-tile-b { font-size: 19px; }
.cs-tile-s { font-size: 12px; color: var(--text-2); }
.cs-checks { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-checks:empty { display: none; }
.cs-check { font-size: 13px; line-height: 1.45; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.cs-check-bad { border-color: var(--bad); background: var(--bad-bg); }
.cs-check-note { border-color: var(--warn-border); background: var(--warn-bg-2); }
.cs-check a { color: var(--accent); }

/* The setup diagram */
.cs-diagram svg, .cs-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.cs-node-box { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.cs-node-bat { fill: var(--surface); stroke: var(--text-2); stroke-width: 1.5; }
.cs-node-warn { stroke: var(--bad); stroke-dasharray: 4 3; }
.cs-node-ghost { opacity: 0.6; }
.cs-node-title { font-size: 13px; font-weight: 700; fill: var(--text); }
.cs-node-sub { font-size: 11.5px; fill: var(--muted); }
.cs-node-line { font-size: 12px; fill: var(--text-2); }
.cs-edge { fill: none; stroke-linecap: round; opacity: 0.35; }
.cs-edge-in { stroke: var(--good); }
.cs-edge-out { stroke: var(--chart-line); }
.cs-edge-off { stroke: var(--border-strong); stroke-dasharray: 3 4; opacity: 0.8; }
.cs-flow { fill: none; stroke-linecap: round; stroke-dasharray: 2 10; animation: cs-flow 1.1s linear infinite; }
.cs-flow-in { stroke: var(--good); }
.cs-flow-out { stroke: var(--chart-line); }
@keyframes cs-flow { to { stroke-dashoffset: -24; } }
.cs-still .cs-flow { animation: none; }
@media (prefers-reduced-motion: reduce) { .cs-flow { animation: none; } }
.cs-elabel rect { fill: var(--surface); stroke: var(--border); }
.cs-elabel text { font-size: 11px; font-weight: 700; }
.cs-elabel-in { fill: var(--good); }
.cs-elabel-out { fill: var(--accent-ink); }
.cs-bat-shell { fill: var(--surface-2); stroke: var(--text-2); stroke-width: 1.5; }
.cs-bat-nub { fill: var(--text-2); }
.cs-bat-reserve { fill: var(--bad-bg); }
.cs-bat-level { transition: width 0.12s; }
.cs-lvl-ok { fill: var(--good); opacity: 0.75; }
.cs-lvl-mid { fill: var(--mid); opacity: 0.8; }
.cs-lvl-low { fill: var(--bad); opacity: 0.8; }
.cs-bat-text { font-size: 11px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.cs-legend { margin: 6px 0 0; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cs-nw { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.cs-key { display: inline-block; width: 16px; height: 4px; border-radius: 2px; vertical-align: middle; }
.cs-key-in { background: var(--good); }
.cs-key-out { background: var(--chart-line); }
.cs-key-soc { background: var(--chart-line); height: 3px; }
.cs-key-outline { background: var(--mid); height: 2px; }

/* The chart */
.cs-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.cs-chart-head .cs-sub { margin: 0; }
.cs-chart { position: relative; margin-top: 8px; }
.cs-night { fill: var(--track); opacity: 0.55; }
.cs-grid { stroke: var(--chart-grid); stroke-width: 1; }
.cs-midnight { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.cs-axis { font-size: 11px; fill: var(--chart-axis); }
.cs-day { font-weight: 700; fill: var(--text-2); }
.cs-panel-title { font-weight: 600; }
.cs-floor { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cs-zone-mid { fill: var(--mid); opacity: 0.13; }
.cs-zone-low { fill: var(--bad); opacity: 0.11; }
.cs-key-zmid, .cs-key-zlow { height: 10px; width: 12px; border-radius: 2px; }
.cs-key-zmid { background: color-mix(in srgb, var(--mid) 30%, transparent); }
.cs-key-zlow { background: color-mix(in srgb, var(--bad) 28%, transparent); }
.cs-floor-text { font-size: 11px; fill: var(--bad); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.cs-floor-dot { fill: var(--bad); stroke: var(--surface); stroke-width: 2; }
.cs-soc-area { fill: var(--chart-area); }
.cs-soc-line { fill: none; stroke: var(--chart-line); stroke-width: 2.25; stroke-linejoin: round; }
.cs-in-area { fill: var(--good); opacity: 0.18; }
.cs-in-line { fill: none; stroke: var(--good); stroke-width: 1.5; }
.cs-out-line { fill: none; stroke: var(--mid); stroke-width: 1.5; stroke-linejoin: round; }
.cs-spike { font-size: 10.5px; fill: var(--mid); font-weight: 700; }
.cs-cross { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 3; }
.cs-cross-dot { fill: var(--chart-line); stroke: var(--surface); stroke-width: 2; }
.cs-tip { position: absolute; pointer-events: none; background: var(--text); color: var(--bg); font-size: 12px; line-height: 1.45; padding: 6px 9px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); white-space: nowrap; z-index: 2; }
/* The tip is dark in light mode and light in dark mode, so its colours swap too. */
:root { --cs-tip-in: #8ce99a; --cs-tip-out: #ffc078; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cs-tip-in: #2b8a3e; --cs-tip-out: #c2410c; } }
:root[data-theme="dark"] { --cs-tip-in: #2b8a3e; --cs-tip-out: #c2410c; }
.cs-tip-in { color: var(--cs-tip-in); }
.cs-tip-out { color: var(--cs-tip-out); }
.cs-more summary { cursor: pointer; color: var(--accent); font-size: 13px; margin-top: 8px; }
.cs-table { border-collapse: collapse; font-size: 12px; margin-top: 8px; width: 100%; }
.cs-table th, .cs-table td { text-align: left; padding: 3px 8px 3px 0; color: var(--text-2); border-bottom: 1px solid var(--border); }
#chartTable > div { max-height: 260px; overflow-y: auto; }

/* Sunny or cloudy, summer or winter */
.cs-grid-wrap { overflow-x: auto; }
.cs-gridt { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed; }
.cs-gridt thead th:first-child { width: 78px; }
.cs-gridt th { font-size: 12px; color: var(--text-2); font-weight: 600; text-align: left; }
.cs-gridt thead th { text-align: center; }
.cs-cell { width: 100%; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 4px; border-radius: 8px; border: 1px solid; font: inherit; cursor: pointer; }
.cs-cell b { font-size: 13px; white-space: nowrap; }
.cs-cell small { font-size: 11px; color: var(--text-2); }
.cs-cell-good { background: var(--good-bg); border-color: var(--good); color: var(--text); }
.cs-cell-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--text); }
.cs-cell-bad { background: var(--bad-bg); border-color: var(--bad); color: var(--text); }
.cs-cell.on { outline: 2.5px solid var(--accent); outline-offset: 1px; }

/* Sizing and the working */
.cs-size { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.cs-size li { margin-bottom: 8px; }
.cs-size small { display: block; color: var(--muted); font-size: 12px; }
.cs-size select { width: auto; padding: 1px 4px; font-size: 13px; }
#sums summary { font-size: 14px; font-weight: 600; margin: 0; }
#sumsBody { font-size: 13.5px; line-height: 1.5; }
#sumsBody h5 { margin: 14px 0 4px; font-size: 13px; color: var(--text-2); }
#sumsBody ul { margin: 0; padding-left: 18px; }
#sumsBody p { margin: 4px 0; }

/* AGM write-up: makers' figures as simple bars */
.cs-bars { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cs-bars-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.cs-bars-src { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.cs-bars p.cs-bars-src { font-size: 11.5px; line-height: 1.45; color: var(--muted); max-width: none; }
.cs-bars p.cs-bars-title { font-size: 13px; color: var(--text); max-width: none; }
.cs-bar-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: "l t v" ". s s"; gap: 0 8px; align-items: center; font-size: 12.5px; margin: 3px 0; }
.cs-bar-l { grid-area: l; color: var(--text-2); }
.cs-bar-l small, .cs-bar-v small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.cs-bar-track { grid-area: t; position: relative; height: 12px; background: var(--track); border-radius: 3px; }
.cs-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.cs-bar-cyc { background: var(--chart-line); opacity: 0.75; }
.cs-bar-ah { background: var(--mid); opacity: 0.8; }
.cs-bar-plus { opacity: 0.45; }
.cs-bar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-2); }
.cs-bar-v { grid-area: v; font-weight: 600; white-space: nowrap; text-align: right; }
.cs-bar-src { grid-area: s; font-size: 11px; color: var(--muted); }
@media (max-width: 460px) { .cs-bar-row { grid-template-columns: 92px minmax(0, 1fr) auto; } }

/* Old Mate explains */
.cs-explain { margin-top: 8px; }
.cs-explain details { border-top: 1px solid var(--border); padding: 8px 0; }
.cs-explain summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 4px 0; }
.cs-explain p, .cs-explain li { font-size: 14px; line-height: 1.55; color: var(--text-2); max-width: 760px; }
.cs-eq { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; display: inline-block; color: var(--text) !important; }
.cs-fine { font-size: 12px; color: var(--muted); max-width: 760px; line-height: 1.5; }

/* Lithium or AGM: the discharge chart */
.cs-dis { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.cs-dis-li { stroke: var(--chart-line); }
.cs-dis-agm { stroke: var(--mid); }
.cs-dis-heavy { stroke-dasharray: 6 4; }
.cs-dis-mark { fill: var(--bad); stroke: var(--surface); stroke-width: 2; }
.cs-cut-band { fill: var(--bad); opacity: 0.1; }
.cs-cut-line { stroke: var(--bad); stroke-width: 1.25; stroke-dasharray: 4 3; }
.cs-cut-text { font-size: 10.5px; fill: var(--bad); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.cs-dot-red { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); vertical-align: middle; }
.cs-key-dis-li { background: var(--chart-line); }
.cs-key-dis-li-heavy { background: repeating-linear-gradient(90deg, var(--chart-line) 0 5px, transparent 5px 8px); }
.cs-key-dis-agm { background: var(--mid); }
.cs-key-dis-agm-heavy { background: repeating-linear-gradient(90deg, var(--mid) 0 5px, transparent 5px 8px); }

/* Old Mate's testbed charts */
.cs-tb-chart { margin: 10px 0 4px; }
.cs-tb-chart svg { display: block; max-width: 100%; height: auto; }
.cs-tb-summer { fill: none; stroke: var(--mid); stroke-width: 2.25; stroke-linejoin: round; }
.cs-tb-summer-area { fill: var(--mid); opacity: 0.1; }
.cs-tb-winter { fill: none; stroke: var(--chart-line); stroke-width: 2.25; stroke-dasharray: 6 4; stroke-linejoin: round; }
.cs-tb-label { font-size: 11.5px; font-weight: 600; fill: var(--text-2); }
.cs-tb-range { fill: var(--chart-line); opacity: 0.22; }
.cs-tb-dot { fill: var(--chart-line); stroke: var(--surface); stroke-width: 2; }
.cs-key-summer { background: var(--mid); }
.cs-key-winter { background: repeating-linear-gradient(90deg, var(--chart-line) 0 5px, transparent 5px 8px); }
.cs-key-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chart-line); }
.cs-key-range { width: 10px; height: 12px; border-radius: 3px; background: var(--chart-line); opacity: 0.25; }

/* Mobile: how it's going, while you're up in the inputs */
.cs-sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); text-align: left; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); cursor: pointer; }
.cs-sticky[hidden] { display: none; }
.cs-sticky-go { margin-left: auto; font-weight: 400; color: var(--accent); white-space: nowrap; }

@media (max-width: 600px) {
  header .brand-tag { display: none; }
  .cs-card { padding: 12px; }
  .cs-pick-row { grid-template-columns: 78px minmax(0, 1fr) auto; }
}