/* Cheat sheet layout: standalone dense tile grid.
   This page does not load the site stylesheet, so it brings its own reset.
   Without border-box, `width: 100%` plus padding makes the page wider than
   the window and everything runs off the trailing edge. */

*,
*::before,
*::after { box-sizing: border-box; }

body { margin: 0; }

.cs {
  color-scheme: light;
  overflow-x: clip;

  --plane: #f4f3f0;
  --surface: #ffffff;
  --surface-sunken: #faf9f6;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-muted: #898781;
  --hairline: #e3e1da;
  --hairline-strong: #c8c6bd;

  --code-bg: #1c1c1b;
  --code-ink: #e9e8e2;
  --code-comment: #8b8a80;

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #4a3aa7;

  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --good: #0ca30c;
  --critical: #d03b3b;
  --warning: #fab219;
  --serious: #ec835a;

  background: var(--plane);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  .cs {
    color-scheme: dark;

    --plane: #0d0d0d;
    --surface: #1a1a19;
    --surface-sunken: #131312;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --ink-muted: #898781;
    --hairline: #2c2c2a;
    --hairline-strong: #3d3d39;

    --code-bg: #0a0a0a;
    --code-ink: #e9e8e2;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #9085e9;

    --grid: #2c2c2a;
    --axis: #383835;
  }
}

/* ---------- Top bar ---------- */

.cs-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: saturate(1.4) blur(8px);
}

.cs-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.cs-topbar a:hover { opacity: 1; }
.cs-topbar a { min-width: 0; }

.cs-topbar a > span:first-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-topbar b { font-weight: 650; color: var(--ink); }
.cs-topbar img { height: 15px; width: auto; display: block; flex: none; }

.cs-topbar-arrow {
  flex: none;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.cs-topbar a:hover .cs-topbar-arrow { transform: translateX(2px); }

@media (prefers-color-scheme: dark) {
  .cs-topbar img { filter: invert(1); }
}

.cs-topbar-spacer { flex: 1; }

.cs-topbar-social {
  flex: none;
  white-space: nowrap;
  font-weight: 600;
  padding: 1px 9px;
  border-radius: 5px;
  border: 1px solid var(--hairline-strong);
}

.cs-topbar-social:hover { border-color: var(--ink-muted); }

@media (max-width: 760px) {
  .cs-topbar-social { display: none; }
}
.cs-topbar-meta { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .cs-topbar-meta { display: none; }
}

/* ---------- Page shell ---------- */

.cs-wrap {
  width: 100%;
  padding: 14px 20px 40px;
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  grid-template-areas:
    "lede lede"
    "rail main";
  gap: 10px 14px;
  align-items: start;
}

.cs-lede { grid-area: lede; min-width: 0; }
.cs-main { grid-area: main; min-width: 0; }

/* Rides in normal flow through the opening, then anchors under the top bar.
   The inner scroller only switches on once it is actually anchored, otherwise
   it eats the wheel while the panel is still scrolling into view. */
.cs-rail {
  grid-area: rail;
  align-self: start;
  position: sticky;
  top: 38px;
}

.cs-rail.is-pinned {
  max-height: calc(100vh - 46px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 1080px) {
  .cs-wrap {
    display: block;
  }

  .cs-rail {
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 10px;
  }
}

/* Opening copy holds its own column, so a panel wrapping to a second row
   still lines up with the chart rather than sliding under the headline. */
.cs-lede-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.cs-lede-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  min-width: 0;
}

/* The chart takes the whole width and the three explainers form a row under
   it. Fitting all four across needs about 2,300px of window, so this is the
   layout almost everybody sees. */
.cs-lede-panels > .cs-tile-wide { grid-column: 1 / -1; }

/* Rail plus intro eat roughly 730px before the panels get any. */
@media (max-width: 1500px) {
  .cs-lede-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below here the rail drops into the flow, so the width comes back. */
@media (max-width: 1080px) {
  .cs-lede-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .cs-lede-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-lede-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .cs-lede-panels { grid-template-columns: minmax(0, 1fr); }
}

/* Opening copy, sitting in the same row as the charts. */
.cs-intro {
  min-width: 0;
  padding: 2px 4px 0 0;
  align-self: start;
}

.cs-intro h1 {
  font-size: 27px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
  text-wrap: balance;
}

.cs-intro p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

/* Only the opening two sentences carry the weight. */
.cs-intro .cs-intro-lead {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 8px;
}

/* ---------- Jump nav ---------- */

/* Rides just under the top bar so the sections stay one click away. It stays
   inside its own column; bleeding the backdrop sideways overflowed the page
   and covered the rail. */
.cs-jump {
  position: sticky;
  top: 30px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  margin-bottom: 4px;
  background: var(--plane);
  border-bottom: 1px solid var(--hairline);
}

.cs-jump a {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.cs-jump a:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}

.cs-jump a[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--plane);
}

/* ---------- Sections ---------- */

.cs-section {
  margin-top: 18px;
  scroll-margin-top: 78px;
}

.cs-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.cs-section-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.cs-section-head .cs-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent, var(--series-1));
  flex: none;
}

.cs-section-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* The opening section leads with a headline instead of a step number. */
.cs-section-why { margin-top: 14px; }

.cs-s1 { --accent: var(--series-1); }
.cs-s2 { --accent: var(--series-3); }
.cs-s3 { --accent: var(--series-2); }
.cs-s4 { --accent: var(--series-4); }

/* Cards reporting an outage wear the failure color, not a series color. */
.cs-fail { --accent: var(--critical); }

/* ---------- Tile grid ---------- */

/* Grid, not multi-column. CSS columns pack tighter but Safari mispositions
   column children and the cards land on top of each other.
   Tracks are half a card wide, so a tile can be 1, 1.5 or 2 cards across
   without leaving a hole in the row. */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: 8px;
  align-items: start;
}

.cs-grid > .cs-tile { grid-column: span 2; }

.cs-tile {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px 11px;
  min-width: 0;
  overflow: hidden;
}

/* A chart tooltip has to be free to escape its card. */
.cs-tile:has(.cs-plot-wrap) { overflow: visible; }

.cs-grid > .cs-tile-wide { grid-column: span 4; }

/* One and a half cards: wider than a column, narrower than two. */
.cs-grid > .cs-tile-medium { grid-column: span 3; }

/* Begins a fresh row, so the reference cards do not tuck into gaps left by
   the machine cards above them. The span has to be restated: `grid-column:
   span N` sets the *start* to `span N`, so overriding the start alone would
   collapse the tile to a single track. */
.cs-grid > .tile-row-start { grid-column: 1 / span 2; }
.cs-grid > .cs-tile-medium.tile-row-start { grid-column: 1 / span 3; }
.cs-grid > .cs-tile-wide.tile-row-start { grid-column: 1 / span 4; }
.cs-grid > .cs-tile-full.tile-row-start { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .cs-grid > .cs-tile-medium { grid-column: 1 / -1; }
  .cs-grid > .tile-row-start,
  .cs-grid > .cs-tile-medium.tile-row-start,
  .cs-grid > .cs-tile-wide.tile-row-start { grid-column: 1 / -1; }
}

/* A wide table reads better across the full row than in a narrow column. */
.tile-import-scope .cs-table { font-size: 12.5px; }
.tile-import-scope .cs-table td:first-child { width: 40%; }
.cs-grid > .cs-tile-full { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .cs-grid > .cs-tile,
  .cs-grid > .cs-tile-wide { grid-column: 1 / -1; }
}

.cs-tile h3 {
  margin: 0 0 2px;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cs-tile h3::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--accent, var(--series-1));
  flex: none;
}

.cs-tile .cs-sub {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: var(--ink-muted);
}

.cs-tile p { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.cs-tile p:last-child { margin-bottom: 0; }

.cs-tile ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-2);
}

.cs-tile ul li {
  position: relative;
  padding-left: 13px;
  margin-bottom: 4px;
}

.cs-tile ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hairline-strong);
}

.cs-tile ul li:last-child { margin-bottom: 0; }

.cs-tile a { color: var(--series-1); text-decoration: none; }
.cs-tile a:hover { text-decoration: underline; }

/* ---------- Code blocks ---------- */

.cs-code {
  margin: 0 0 8px;
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: 8px;
  padding: 9px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
  -webkit-text-size-adjust: 100%;
}

.cs-code:last-child { margin-bottom: 0; }
.cs-code .c { color: var(--code-comment); }

/* ---------- Tables ---------- */

/* The scroll container is the wrapper, never the table itself. `display:block`
   on a <table> collapses its column layout. */
.cs-scroll {
  overflow-x: auto;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.cs-scroll:last-child { margin-bottom: 0; }

.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}

.cs-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  font-weight: 600;
  padding: 0 14px 5px 0;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.cs-table td {
  padding: 5px 14px 5px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  color: var(--ink-2);
}

.cs-table th:last-child,
.cs-table td:last-child { padding-right: 0; }

.cs-table tr:last-child td { border-bottom: 0; }

.cs-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
}

.cs-table th.num,
.cs-table td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

/* ---------- Hardware cards ---------- */

.cs-rig {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cs-rig-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 7px;
  border-radius: 5px;
  color: #fff;
  background: var(--accent, var(--series-1));
}

.cs-price {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cs-price small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
  margin-left: 4px;
}

.cs-spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 12px;
}

.cs-spec dt { color: var(--ink-muted); }
.cs-spec dd { margin: 0; color: var(--ink-2); }

.cs-parts { width: 100%; }
.cs-parts td:first-child { color: var(--ink); }

.cs-note {
  font-size: 11.5px;
  color: var(--ink-muted);
  border-left: 2px solid var(--hairline-strong);
  padding-left: 9px;
  margin: 8px 0 0;
}

/* ---------- Stat row ---------- */

.cs-bad { color: var(--critical); }

/* ---------- Charts ---------- */

.cs-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.cs-chart-head h3 { margin: 0; }
.cs-chart-head h3::before { display: none; }

.cs-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-2);
}

.cs-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: baseline;
}

.cs-plot { width: 100%; display: block; overflow: visible; }
.cs-plot text { font-family: system-ui, -apple-system, sans-serif; }

.cs-tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.45;
  white-space: nowrap;
  z-index: 20;
  transition: opacity 0.1s ease;
  color: var(--ink);
}

.cs-tip b { font-variant-numeric: tabular-nums; }
.cs-plot-wrap { position: relative; }

/* ---------- Calculator ---------- */

.cs-calc { display: block; }

.cs-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 14px;
  margin-bottom: 10px;
}

/* The picker, its description and the readouts each own a full row of the
   field grid rather than sharing one with a slider. */
.cs-fieldset-title,
.cs-presets,
.cs-preset-note,
.cs-readout-hint,
.cs-group { grid-column: 1 / -1; }

/* Assumptions most people never touch, folded away by default. */
.cs-group { margin-top: 4px; }

.cs-group > summary {
  cursor: pointer;
  list-style: none;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  padding: 1px 0;
}

.cs-group > summary::-webkit-details-marker { display: none; }
.cs-group > summary::before { content: "\25B8"; margin-right: 6px; }
.cs-group[open] > summary::before { content: "\25BE"; }
.cs-group > summary:hover { color: var(--ink); }

.cs-group-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 14px;
  margin-top: 6px;
}

.cs-group-body .cs-field-wide,
.cs-group-body .cs-readout-hint { grid-column: 1 / -1; }

.cs-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--ink-2);
  gap: 8px;
}

.cs-field label b {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
}

.cs-field input[type="range"] {
  width: 100%;
  margin: 3px 0 0;
  accent-color: var(--series-1);
  height: 16px;
}

.cs-fieldset-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}

.cs-fieldset-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.cs-verdict {
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.cs-verdict strong { color: var(--ink); font-weight: 650; }

.cs-preset {
  font: inherit;
  font-size: 10.5px;
  font-weight: 550;
  padding: 4px 2px;
  text-align: center;
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.cs-preset:hover { border-color: var(--ink-muted); color: var(--ink); }

.cs-preset[aria-pressed="true"] {
  background: var(--series-1);
  border-color: var(--series-1);
  color: #fff;
}

.cs-preset-note {
  margin: 0 0 7px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-muted);
}

/* ---------- Machine count on a rig card ---------- */

.cs-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 6px 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface-sunken);
}

.cs-qty[data-chosen="true"] {
  border-color: var(--accent, var(--series-1));
}

.cs-qty > span {
  flex: 1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  font-weight: 600;
}

.cs-qty button {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  width: 26px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}

.cs-qty button:hover {
  border-color: var(--accent, var(--series-1));
  color: var(--accent, var(--series-1));
}

.cs-qty b {
  min-width: 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.cs-qty[data-chosen="true"] b { color: var(--accent, var(--series-1)); }

/* ---------- Derived readouts in the rail ---------- */

.cs-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cs-readout > span {
  font-size: 11.5px;
  color: var(--ink-2);
}

.cs-readout b {
  display: block;
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

.cs-readout-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 10.5px;
  color: var(--ink-muted);
}

/* ---------- Inline figures ---------- */

/* Sized to their content, not stretched across the panel. */
.cs-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 2px 0 8px;
}

.cs-figures b {
  display: block;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cs-figures span {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  margin-top: 3px;
}

.cs-figures em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--ink-2);
}

/* ---------- The rail reads as an instrument, not another card ---------- */

.cs-rail > * + * { margin-top: 8px; }

.cs-rail .cs-tile {
  border: 1px solid var(--accent, var(--series-2));
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.06);
  overflow: visible;
}

@media (prefers-color-scheme: dark) {
  .cs-rail .cs-tile {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
}

/* The live answer, riding above the calculator that produces it. */
.cs-panel-facts { padding: 9px 12px 10px; }

.cs-summary-machine {
  margin: 0 0 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
}

.cs-summary-machine b {
  color: var(--ink);
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.cs-summary-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cs-summary-figures b {
  display: block;
  font-size: 25px;
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.cs-summary-figures span {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  margin-top: 3px;
}

.cs-panel-calc { padding: 0 12px 12px; }

/* Accent band across the head of the calculator. */
.cs-panel-calc .cs-chart-head {
  background: var(--accent, var(--series-2));
  margin: 0 -12px 10px;
  padding: 8px 12px 9px;
  border-radius: 11px 11px 0 0;
  display: block;
}

.cs-panel-calc .cs-chart-head h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 3px;
}

.cs-panel-calc .cs-chart-head h3::before { display: none; }

.cs-panel-calc .cs-legend { color: rgba(255, 255, 255, 0.86); font-size: 11px; gap: 12px; }
.cs-panel-calc .cs-legend i { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); }

.cs-rail .cs-preset-note { min-height: 2.7em; }

.cs-rail .cs-verdict {
  border-color: var(--accent, var(--series-2));
  font-size: 12.5px;
  margin-bottom: 10px;
}

/* Chart leads the panel, so it needs a little air under the accent band. */
.cs-panel-calc .cs-plot-wrap { margin-bottom: 8px; }

/* ---------- Method disclosure ---------- */

.cs-method { margin-top: 8px; }

.cs-method summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
  list-style: none;
  padding: 4px 0;
}

.cs-method summary::-webkit-details-marker { display: none; }

.cs-method summary::before {
  content: "\25B8";
  margin-right: 6px;
  display: inline-block;
  transition: transform 0.12s ease;
}

.cs-method[open] summary::before { content: "\25BE"; }
.cs-method summary:hover { color: var(--ink); }

.cs-method dl {
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: auto;
  gap: 6px;
  font-size: 11.5px;
}

.cs-method dt {
  font-weight: 650;
  color: var(--ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cs-method dd {
  margin: 1px 0 0;
  color: var(--ink-2);
  line-height: 1.45;
}

/* ---------- Segmented control ---------- */

.cs-field-wide { grid-column: 1 / -1; }

.cs-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  margin-top: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
}

.cs-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cs-segmented label {
  display: block;
  text-align: center;
  padding: 4px 6px 5px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.15;
}

.cs-segmented label em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.cs-segmented label:hover { color: var(--ink); }

.cs-segmented input:checked + label {
  background: var(--series-1);
  color: #fff;
}

.cs-segmented input:checked + label em { color: rgba(255, 255, 255, 0.82); }

.cs-segmented input:focus-visible + label {
  outline: 2px solid var(--series-1);
  outline-offset: 1px;
}

/* ---------- Accessory rows ---------- */

.cs-accessory {
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
}

.cs-accessory:first-of-type {
  padding-top: 2px;
  border-top: 0;
}

.cs-accessory-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.cs-accessory-price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.cs-accessory .cs-sub { margin-bottom: 0; }
.cs-accessory .cs-qty { margin-top: 6px; }

/* ---------- Instalment toggle ---------- */

.cs-finance {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px dashed var(--hairline-strong);
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ink-2);
}

.cs-finance:hover { border-color: var(--accent, var(--series-1)); }

.cs-finance input {
  margin: 2px 0 0;
  accent-color: var(--accent, var(--series-1));
  flex: none;
}

.cs-finance em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink-muted);
}

.cs-finance:has(input:checked) {
  border-style: solid;
  border-color: var(--accent, var(--series-1));
}

.cs-qty[data-fits="true"]::after {
  content: "fits your load";
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--good);
  margin-left: 4px;
}

/* Each thought on its own line, so neither wraps mid-phrase. */
.cs-verdict span,
.cs-readout-hint span { display: block; }
.cs-verdict span + span,
.cs-readout-hint span + span { margin-top: 2px; }

/* ---------- GitHub against your own, side by side ---------- */

.cs-compare-wrap { margin-top: 8px; }

/* Already inside a bordered group, so it does not need its own rule. */
.cs-group-flush { margin-top: 0; }
.cs-group-flush .cs-compare { margin-top: 6px; }

.cs-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.cs-compare th {
  text-align: left;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 600;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--hairline);
}

.cs-compare th:not(:first-child) { text-align: right; }

.cs-compare td {
  padding: 4px 0;
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
}

.cs-compare td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 10px;
  white-space: nowrap;
}

.cs-compare-total td {
  border-bottom: 0;
  padding-top: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

.cs-compare-total td:last-child { color: var(--good); }

/* ---------- Runner tier pickers ---------- */

.cs-picker label {
  display: block;
  font-size: 11.5px;
  color: var(--ink-2);
  margin-bottom: 3px;
}

.cs-picker select {
  font: inherit;
  font-size: 11px;
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
}

.cs-picker select:hover { border-color: var(--ink-muted); }

/* ---------- Copy buttons on shell commands ---------- */

.cs-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 4px;
  margin: 0 -4px;
  padding: 0 4px;
  min-height: 1.55em;
}

/* A blank source line, without a newline text node that would double it. */
.cs-gap {
  display: block;
  height: 1.55em;
}

.cs-line:hover { background: rgba(255, 255, 255, 0.06); }

.cs-line-text { flex: 1; min-width: 0; white-space: pre; }

/* Solid fill, so it stays legible over whatever command sits behind it. */
.cs-copy {
  flex: none;
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.7;
  min-width: 52px;
  text-align: center;
  padding: 0 7px;
  border-radius: 4px;
  border: 1px solid rgba(233, 232, 226, 0.22);
  background: #33322f;
  color: #e9e8e2;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  position: sticky;
  right: 0;
}

.cs-line:hover .cs-copy,
.cs-copy:focus-visible { opacity: 1; }

.cs-copy:hover {
  background: #45443f;
  border-color: rgba(233, 232, 226, 0.5);
}

.cs-copy.is-copied {
  opacity: 1;
  background: var(--good);
  border-color: var(--good);
  color: #fff;
  animation: cs-copied 1.2s ease forwards;
}

@keyframes cs-copied {
  0% { transform: scale(0.94); opacity: 1; }
  12% { transform: scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-copy.is-copied { animation: none; }
}

@media (hover: none) { .cs-copy { opacity: 1; } }

/* ---------- Two files, side by side ---------- */

.cs-side-by-side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 10px;
  align-items: start;
}

.cs-compare-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
}

/* ---------- Nav tools: domain and instruction style ---------- */

.cs-jump-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.cs-host {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-muted);
}

.cs-host input {
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  width: 26ch;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
}

.cs-mode {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
}

.cs-mode-btn {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 11px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.cs-mode-btn[aria-pressed="true"] { background: var(--ink); color: var(--plane); }

/* ---------- Agent mode ---------- */

.cs-agent { display: none; }
body.mode-agent .cs-human { display: none; }
body.mode-agent .cs-agent { display: block; }

.cs-prompt { max-width: 90ch; }

.cs-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cs-prompt-head h3 { margin: 0; }

.cs-copy-block {
  opacity: 1;
  position: static;
  line-height: 1.9;
}

.cs-prompt-body {
  white-space: pre-wrap;
  max-height: none;
}

/* A machine you have not selected: still readable, visibly not yours. */
.cs-tile.is-dimmed { opacity: 0.45; }
.cs-tile.is-dimmed:hover { opacity: 1; }

/* ---------- Values the calculator filled in ---------- */

.cs-fill {
  background: rgba(58, 135, 229, 0.18);
  color: inherit;
  border-bottom: 1px dashed rgba(158, 197, 244, 0.7);
  border-radius: 3px;
  padding: 0 2px;
  cursor: help;
  position: relative;
}

.cs-fill:hover,
.cs-fill:focus-visible {
  background: rgba(58, 135, 229, 0.34);
  outline: none;
}

.cs-fill::after {
  content: attr(data-src);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  white-space: nowrap;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.cs-fill:hover::after,
.cs-fill:focus-visible::after { opacity: 1; }

/* The hostname is a shortcut back to the field that sets it. */
.cs-fill-host { cursor: pointer; }

.cs-fill-host:hover {
  background: rgba(58, 135, 229, 0.42);
  border-bottom-style: solid;
}

.cs-host input.is-flashing {
  border-color: var(--series-1);
  animation: cs-flash 0.9s ease;
}

@keyframes cs-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(42, 120, 214, 0); }
  25% { box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-host input.is-flashing { animation: none; }
}

/* ---------- Inputs that feed a prompt ---------- */

.cs-prompt-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 12px;
  margin-bottom: 10px;
}

.cs-prompt-field {
  display: block;
  margin: 0 0 10px;
}

.cs-prompt-fields .cs-prompt-field { margin: 0; }

.cs-prompt-field input,
.cs-prompt-field select {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  width: 100%;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-sunken);
  color: var(--ink);
}

.cs-prompt-field span {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.cs-prompt-field textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  width: 100%;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-sunken);
  color: var(--ink);
  resize: vertical;
}

/* ---------- Tickable checklist ---------- */

.cs-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}

.cs-checklist li { margin: 0; padding: 0; }
.cs-checklist li::before { display: none; }

.cs-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  color: var(--ink-2);
}

.cs-checklist label:hover { color: var(--ink); }

.cs-checklist input {
  margin: 2px 0 0;
  flex: none;
  width: 14px;
  height: 14px;
  accent-color: var(--good);
  cursor: pointer;
}

.cs-checklist li.is-done label {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: var(--hairline-strong);
}

.cs-checklist-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  color: var(--ink-muted);
}

.cs-checklist-reset {
  font: inherit;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 5px;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.cs-checklist-reset:hover { color: var(--ink); border-color: var(--ink-muted); }

/* Outage rows that point at a date on the chart above. */
.cs-table tr.is-linked { cursor: pointer; }

.cs-table tr.is-linked:hover td,
.cs-table tr.is-linked:focus-within td {
  background: rgba(208, 59, 59, 0.12);
  color: var(--ink);
}

/* ---------- One focus ring for every field on the page ---------- */

.cs-host input:focus,
.cs-picker select:focus,
.cs-prompt-field input:focus,
.cs-prompt-field select:focus,
.cs-prompt-field textarea:focus {
  outline: 2px solid var(--series-1);
  outline-offset: 1px;
}

/* ---------- Footer ---------- */

.cs-foot {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px;
  color: var(--ink-muted);
  max-width: 90ch;
}

.cs-foot p { margin: 0 0 6px; }

/* ---------- Print ---------- */

@media print {
  .cs-topbar, .cs-jump { display: none; }
  .cs-tile, .cs-stat { break-inside: avoid; border-color: #ccc; }
  .cs-grid { grid-template-columns: repeat(4, 1fr); }
  .cs-code { background: #f4f4f2; color: #111; border: 1px solid #ddd; }
}

.cs-foot a { color: var(--ink-2); }

.cs-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 5px;
}

@media print {
  .cs-topbar, .cs-jump { display: none; }
  .cs-tile, .cs-stat { break-inside: avoid; border-color: #ccc; }
  .cs-grid { grid-template-columns: repeat(4, 1fr); }
  .cs-code { background: #f4f4f2; color: #111; border: 1px solid #ddd; }
}