/* The only copy of the cheatsheet. scripts/build-reference.py serves it at /cheatsheet/ with the
   site's header, and scripts/render-cheatsheet-pdf.py prints it to one page; docs/cheatsheet.md
   has the steps after an edit. The tokens match site/public/site.css, so the page reads the same
   standing alone, as the artifact, and on the site, where the header's toggle sets data-theme. */
:root {
  color-scheme: light;
  --paper: #F6F5F1;
  --ink: #15171C;
  --muted: #4A4F5A;
  --accent: #0B6B63;
  --panel: #FFFFFF;
  --wash: #E3F0EE;
  --line: #DAD8D0;
  --control: #767B85;
  --ok: #1A7F37;
  --warn: #8A5A00;
  --todo: #C9CED8;
  --mono: ui-monospace, "SFMono-Regular", "IBM Plex Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #15171C;
    --ink: #F6F5F1;
    --muted: #B4B8C1;
    --accent: #5CC8BC;
    --panel: #1E2128;
    --wash: #1B3B38;
    --line: #353A44;
    --control: #8A909C;
    --ok: #4AC26B;
    --warn: #E8A33D;
    --todo: #3A4350;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15171C;
  --ink: #F6F5F1;
  --muted: #B4B8C1;
  --accent: #5CC8BC;
  --panel: #1E2128;
  --wash: #1B3B38;
  --line: #353A44;
  --control: #8A909C;
  --ok: #4AC26B;
  --warn: #E8A33D;
  --todo: #3A4350;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Layout: the day's loop and the band on top, then three balanced columns of one-line rows
   with the detail behind toggles, then the tools table. One column on phones. */
.cheatsheet {
  display: grid;
  gap: 16px;
  max-width: 80em;
  margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
  font: 400 15px/1.45 var(--sans);
}
.cheatsheet h1 { margin: 0; font: 600 1.75em/1.2 var(--sans); letter-spacing: -0.01em; }
.cheatsheet h2 { margin: 0 0 10px; font: 600 1.05em/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.cheatsheet p { margin: 0; }
.cheatsheet a { color: var(--accent); text-underline-offset: 0.15em; }
.cheatsheet code, .cheatsheet .cmd {
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--wash);
  color: var(--ink);
  font: 500 0.82em/1.45 var(--mono);
  overflow-wrap: anywhere;
}
.cheatsheet .cmd { border: 1px solid transparent; cursor: pointer; text-align: left; }
.cheatsheet .cmd:hover { border-color: var(--accent); }
.cheatsheet .cmd.copied { border-color: var(--accent); }
.muted { color: var(--muted); }
.card { min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }

/* Title, release and filter */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.meta { margin-top: 4px; color: var(--muted); font-size: 0.875em; }
.meta a { font-weight: 600; }
.filter { display: flex; flex: 1 1 260px; align-items: center; gap: 8px; max-width: 420px; }
.filter input {
  width: 100%;
  min-height: 2.5em;
  padding: 7px 12px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.nomatch { padding: 24px; text-align: center; }

/* The day's loop */
.loop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.step { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; }
.step::after { content: "\2192"; margin-left: 4px; color: var(--muted); }
.step:last-child::after { content: none; }
.step .n { color: var(--accent); font-weight: 700; }
.step b { font-weight: 600; }
.step.key { border-color: var(--accent); background: var(--wash); }
.loop-foot { margin-top: 10px !important; color: var(--muted); font-size: 0.9em; }
@media (max-width: 700px) { .step::after { content: none; } }

/* The band, as 0.7.0 draws it */
.band-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px 28px; align-items: start; }
@media (max-width: 860px) { .band-grid { grid-template-columns: minmax(0, 1fr); } }
.band { display: grid; gap: 6px; margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 0.85em; }
.band-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.band-line .gap { flex: 1; }
.band .key { color: var(--accent); font-weight: 600; }
.band .ask { color: var(--warn); font-weight: 600; }
.chip { padding: 0 0.5em; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.88em; white-space: nowrap; }
.bbtn { padding: 0.05em 0.6em; border: 1px solid var(--control); border-radius: 0.45em; font-size: 0.88em; white-space: nowrap; }
.logo { flex: none; width: 1.3em; height: 1em; }
.dots { display: inline-flex; align-items: center; gap: 0.25em; color: var(--muted); font-size: 0.88em; }
.dots i { display: block; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--todo); }
.dots i.done { background: var(--ok); }
.dots i.now { background: var(--warn); }
.dots b { margin-left: 3px; color: var(--warn); }
.ring { display: inline-flex; align-items: center; gap: 0.3em; color: var(--warn); font-size: 0.88em; }
.ring svg { width: 1.3em; height: 1.3em; }
.mark { display: inline-grid; flex: none; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); color: var(--panel); font-size: 0.7em; font-weight: 700; }
.needs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; padding-top: 6px; border-top: 1px solid var(--line); font-size: 0.94em; }
.hint-line { padding-top: 6px; border-top: 1px solid var(--line); font-size: 0.94em; }
.colors { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; padding: 0; color: var(--muted); font-size: 0.85em; list-style: none; }
.colors li { display: inline-flex; align-items: center; gap: 5px; }
.legend { display: grid; gap: 4px; margin: 0; padding: 0; font-size: 0.86em; list-style: none; }
.legend li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 8px; align-items: start; }

/* Columns of rows */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1060px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.rows { display: grid; }
.row { display: grid; grid-template-columns: minmax(0, 8.4em) minmax(0, 1fr); gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 0.9em; }
.rows > .row:first-child { padding-top: 0; border-top: 0; }
.row > :first-child { font-weight: 600; }
.row > :last-child { min-width: 0; }
@media (max-width: 420px) { .row { grid-template-columns: minmax(0, 1fr); } }
.cheatsheet details { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.cheatsheet summary { color: var(--accent); font-size: 0.9em; font-weight: 600; cursor: pointer; }
.cheatsheet details > :not(summary) { margin-top: 8px; }
.cheatsheet details p, .cheatsheet details li { font-size: 0.88em; }
.tight { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 1.1em; }
.table-wrap { overflow-x: auto; }
.cheatsheet table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.cheatsheet th, .cheatsheet td { padding: 6px 10px 6px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.cheatsheet th { border-top: 0; color: var(--muted); font-size: 0.82em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.rule { padding: 8px 10px; border-radius: 8px; background: var(--wash); }

.toast {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9em;
  transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) { .cheatsheet .cmd { transition: border-color 0.15s; } }

/* One landscape page that fits both Letter and A4, light, with every toggle open and the
   filter, copy and download parts left out. */
@page { size: 11in 8.27in; margin: 0.18in; }
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    color-scheme: light;
    --paper: #FFFFFF;
    --ink: #15171C;
    --muted: #4A4F5A;
    --accent: #0B6B63;
    --panel: #FFFFFF;
    --wash: #E3F0EE;
    --line: #DAD8D0;
    --ok: #1A7F37;
    --warn: #8A5A00;
    --todo: #C9CED8;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > :not(.cheatsheet), .site-header, footer, .filter, .pdf, .copy-tip, .nomatch, .toast { display: none !important; }
  .cheatsheet { display: block; max-width: none; padding: 0; font-size: 6pt; line-height: 1.17; column-count: 4; column-gap: 8pt; }
  .cheatsheet > .top { column-span: all; margin-bottom: 3pt; }
  .top > div { display: flex; align-items: baseline; gap: 8pt; }
  /* The day's loop runs across the top, and the tools table reads as one line per slot. */
  .cheatsheet > .card:first-of-type { column-span: all; display: flex; flex-wrap: wrap; align-items: center; gap: 2pt 8pt; }
  .cheatsheet > .card:first-of-type h2 { margin: 0; }
  .cheatsheet > .card:first-of-type .loop { flex: 1; flex-wrap: nowrap; }
  .cheatsheet > .card:first-of-type .loop-foot { flex-basis: 100%; margin-top: 0 !important; }
  .step::after { content: none; }
  .cheatsheet h2, .cheatsheet summary { break-after: avoid; }
  .tools thead { display: none; }
  .tools tr { display: block; padding: 0.5pt 0; border-top: 1px solid var(--line); }
  .tools tbody tr:first-child { border-top: 0; }
  .cheatsheet .tools td { display: inline; padding: 0; border: 0; }
  .table-wrap { overflow: visible; }
  .tools td:first-child { font-weight: 600; }
  .tools td:first-child::after { content: ": "; }
  .tools td:nth-child(3):not(:empty)::before { content: ". "; }
  .needs { display: block; }
  .needs > span { margin-right: 3pt; }
  .needs > .key { display: inline-block; margin-top: 1pt; }
  .cheatsheet h1 { font-size: 12pt; }
  .meta { margin-top: 0; font-size: 6.5pt; }
  .cheatsheet h2 { margin: 0 0 3pt; font-size: 7.4pt; }
  .card, .cols > .card { margin: 0 0 3pt; padding: 2.5pt 5pt; border-radius: 3pt; break-inside: auto; }
  .cols { display: block; }
  .cheatsheet .cmd, .cheatsheet code { padding: 0 2pt; font-size: 5.8pt; border: 0; }
  .cheatsheet details { margin-top: 3pt; padding-top: 2pt; }
  .cheatsheet details > :not(summary) { margin-top: 2pt; }
  .cheatsheet details::details-content { content-visibility: visible; display: block; }
  .cheatsheet summary { font-size: 6.6pt; list-style: none; }
  .cheatsheet summary::-webkit-details-marker { display: none; }
  .cheatsheet details p, .cheatsheet details li, .row, .cheatsheet table, .legend, .band, .needs, .hint-line, .colors { font-size: inherit; }
  .row { grid-template-columns: 8.4em minmax(0, 1fr); gap: 0 5pt; padding: 0.6pt 0; break-inside: avoid; }
  .cheatsheet th, .cheatsheet td { padding: 1pt 4pt 1pt 0; }
  .cheatsheet th { font-size: 5.4pt; }
  .tight { gap: 1pt; }
  .loop { gap: 3pt; }
  .step { flex-wrap: nowrap; padding: 1pt 3pt; gap: 2pt 3pt; white-space: nowrap; }
  .loop-foot { margin-top: 3pt !important; font-size: inherit; }
  .band-grid { display: block; }
  .band { gap: 2pt; padding: 3pt 4pt; margin-bottom: 3pt; }
  .legend { gap: 1pt; }
  .legend li { grid-template-columns: 9pt minmax(0, 1fr); gap: 3pt; }
  .mark { width: 8pt; height: 8pt; font-size: 5pt; }
  .rule { padding: 2pt 4pt; }
}