/* The animated Git cheat sheet (/learn/git/animated-cheat-sheet, and the offline file
   scripts/build_animated_cheat_sheet.py writes). Colors are the site's --ic-*
   tokens; the graphs are git-sim viewer frames (git-sim-viewer.css). */

.cs-root, .cs-search, .cs-btn { --cs-mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; }
.cs-root code, .cs-search input { font-family: var(--cs-mono); }

/* ---------- on the site: the hero's tools, the offer, the older sheets ---------- */
.cheat-hero .cheat-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
/* the hero's call to action: the git-sim viewer's red Play button, down to its
   pop and the glint sweeping across it (tools/git-sim-viewer-page.html) */
.cs-btn.cs-hero-cta, main.learn .learn-wrap .hero-card a.cs-btn.cs-hero-cta { --cta: #A3121D; --cta-ink: #fff; position: relative; overflow: hidden; padding: 15px 26px; border-radius: 999px; background: var(--cta) !important; color: var(--cta-ink) !important; font-size: 16px; box-shadow: 0 12px 24px -12px var(--cta); }
:root[data-theme="dark"] .cs-btn.cs-hero-cta, :root[data-theme="dark"] main.learn .learn-wrap .hero-card a.cs-btn.cs-hero-cta { --cta: #D9534A; --cta-ink: #0d1117; }
.cs-btn.cs-hero-cta:hover, main.learn .learn-wrap .hero-card a.cs-btn.cs-hero-cta:hover { background: var(--cta) !important; color: var(--cta-ink) !important; filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 18px 30px -12px var(--cta), 0 0 0 5px color-mix(in srgb, var(--cta) 30%, transparent); }
.cs-btn.cs-hero-cta { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.cs-btn.cs-hero-cta::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 55%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); animation: cs-cta-glint 1.8s ease-in-out .4s infinite; pointer-events: none; }
@keyframes cs-cta-glint { 0% { left: -70%; } 45%, 100% { left: 130%; } }
@keyframes cs-cta-pop {
  0%, 60%, 100% { transform: scale(1); box-shadow: 0 12px 24px -12px var(--cta); }
  22% { transform: scale(1.06); box-shadow: 0 14px 28px -10px var(--cta), 0 0 0 6px color-mix(in srgb, var(--cta) 28%, transparent); }
  40% { transform: scale(.99); }
}
@media (prefers-reduced-motion: reduce) { .cs-btn.cs-hero-cta, .cs-btn.cs-hero-cta::after { animation: none; } }
/* the hero's button with its aside centered under it, in the button's red,
   tilted a little like the site's other hand-set labels */
.cheat-hero .cheat-tools { display: inline-flex; flex-direction: column; align-items: center; gap: 32px; max-width: 100%; }
.cheat-hero .cs-hero-aside { margin: 0; color: var(--ic-rose-ink); font-size: 16px; font-weight: 700; font-style: italic; line-height: 1.4; text-align: center; transform: rotate(-1.5deg); }
/* a long label: on a narrow screen it wraps onto two centered lines instead of running off the card */
@media (max-width: 720px) {
  .cs-btn.cs-hero-cta, main.learn .learn-wrap .hero-card a.cs-btn.cs-hero-cta { white-space: normal; justify-content: center; text-align: center; max-width: 100%; box-sizing: border-box; padding: 13px 22px; border-radius: 22px; font-size: 15.5px; line-height: 1.3; }
}
.collection-page .cs-root { --cs-sticky-top: 64px; }  /* below the site's fixed header */
.more-sheets { margin: 48px 0 16px; color: var(--ic-ink); font-weight: 800; font-size: 26px; }

/* ---------- search and buttons ---------- */
.cs-search { position: relative; display: inline-block; margin: 0; }
.cs-search input { width: 280px; max-width: 100%; height: 44px; box-sizing: border-box; margin: 0; padding: 0 14px 0 40px; border-radius: 12px; border: 1.5px solid var(--ic-accent-line); background: var(--ic-bg); color: var(--ic-ink); font: 500 14.5px var(--cs-mono); outline: none; transition: border-color .15s, box-shadow .15s; }
.cs-search input::placeholder { color: var(--ic-muted); opacity: 1; }
/* the clear (x) button is our own (.cs-clear): the browser's lost the mouse
   pointer over it. It shows while there's something to clear. */
.cs-search input { padding-right: 40px; }
.cs-search input::-webkit-search-cancel-button { display: none; }
.cs-clear { position: absolute; right: 8px; top: 50%; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 8px; background: none; color: var(--ic-muted); cursor: pointer; transition: color .15s, background-color .15s; }
.cs-clear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.cs-clear:hover, .cs-clear:focus-visible { color: var(--ic-accent); background: var(--ic-accent-tint); outline: none; }
.cs-search input:placeholder-shown + .cs-clear { display: none; }
.cs-search input:hover { border-color: var(--ic-accent-2); }
.cs-search input:focus { border-color: var(--ic-accent); box-shadow: 0 0 0 4px var(--ic-accent-tint); }
.cs-search > svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); stroke: var(--ic-accent); fill: none; stroke-width: 2.2; pointer-events: none; }
/* a solid button; the extra selectors outrank the learn pages' rule that tints
   every link in a hero card (learn.css) */
.cs-btn, main.learn .learn-wrap .hero-card a.cs-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; border: 0; background: var(--ic-kicker-bg) !important; background-image: none !important; color: #fff !important; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none !important; box-shadow: 0 10px 22px -12px rgba(30,27,75,.6); cursor: pointer; white-space: nowrap; transition: background-color .15s, transform .15s; }
.cs-btn:hover, .cs-btn:focus-visible, main.learn .learn-wrap .hero-card a.cs-btn:hover { background: var(--ic-accent) !important; color: #fff !important; transform: translateY(-1px); }
/* the dark accent is light: navy text on it (as the site's other filled buttons) */
:root[data-theme="dark"] .cs-btn:hover, :root[data-theme="dark"] main.learn .learn-wrap .hero-card a.cs-btn:hover { color: #1e1b4b !important; }

/* ---------- the filter bar: search and the section filters, a sticky card ---------- */
/* z-index 2: over the cards (each is isolated, so nothing inside one can rise
   above the bar), under the site's navbar (3), which stays on top when the bar
   is pushed up past it at the end of the sheet */
.cs-toolbar { position: sticky; top: calc(var(--cs-sticky-top, 0px) + 10px); z-index: 2; display: flex; align-items: center; gap: 12px 18px; margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; background: var(--ic-card); border: 1px solid var(--ic-accent-line); box-shadow: 0 16px 34px -22px rgba(30,27,75,.45), 0 1px 3px rgba(0,0,0,.05); transition: border-color .2s ease, box-shadow .2s ease, margin .2s ease; }
/* stuck to the top over the cards (cheat-sheet.js adds .cs-stuck): a rose
   border with a soft ring, a little wider than the grid, so the bar reads as
   its own layer */
.cs-toolbar.cs-stuck { border-color: var(--ic-rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic-rose) 18%, transparent), 0 18px 36px -20px rgba(30,27,75,.5), 0 1px 3px rgba(0,0,0,.06); }
/* 16px wider each side, less on a narrower window so at least 16px of gutter
   remains (100vw counts the scrollbar, hence 24px) */
.cs-toolbar.cs-stuck { --cs-widen: clamp(0px, (100vw - 100%) / 2 - 24px, 16px); margin-left: calc(-1 * var(--cs-widen)); margin-right: calc(-1 * var(--cs-widen)); }
.cs-toolbar .cs-search { flex: none; }
.cs-toolbar .cs-search input { width: 280px; }

/* ---------- the legend ---------- */
.cs-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 28px; padding: 10px 14px; border-radius: 12px; background: var(--ic-panel); border: 1px solid var(--ic-rule); color: var(--ic-text-2); font-size: 13.5px; }
.cs-legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- risk badges ---------- */
.cs-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 11.5px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; border: 1px solid; }
.cs-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cs-badge.safe { color: var(--ic-em-ink); background: var(--ic-em-soft); border-color: var(--ic-em-line); }
.cs-badge.caution { color: var(--ic-amber-ink); background: var(--ic-amber-soft); border-color: var(--ic-amber-line); }
.cs-badge.destructive { color: var(--ic-rose-ink); background: var(--ic-rose-soft); border-color: var(--ic-rose-line); }

/* the section filters: each shows only its section ("All" shows every one).
   Quiet at rest, a soft indigo tint on hover, filled navy when chosen. */
.cs-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-width: 0; padding-left: 18px; border-left: 1px solid var(--ic-rule); }
.cs-nav-label { margin-right: 4px; color: var(--ic-muted); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.cs-root .cs-nav button { display: inline-flex; align-items: center; gap: 7px; height: 34px; margin: 0; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ic-rule); background: var(--ic-panel); color: var(--ic-text); font: inherit; font-weight: 600; font-size: 13.5px; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: none; outline: none; transition: background-color .12s, border-color .12s, color .12s; }
.cs-root .cs-nav button span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ic-chip); color: var(--ic-muted); font-weight: 700; font-size: 11.5px; }
.cs-root .cs-nav button:hover { background: var(--ic-accent-soft); border-color: var(--ic-accent-line); color: var(--ic-accent-ink); }
.cs-root .cs-nav button:hover span { background: var(--ic-accent-tint); color: var(--ic-accent-ink); }
.cs-root .cs-nav button:focus-visible { box-shadow: 0 0 0 3px var(--ic-accent-tint); border-color: var(--ic-accent); }
.cs-root .cs-nav button.on, .cs-root .cs-nav button.on:hover { background: var(--ic-kicker-bg); border-color: var(--ic-kicker-bg); color: #fff; }
.cs-root .cs-nav button.on span { background: rgba(255,255,255,.18); color: #fff; }
.cs-root .cs-nav button:disabled { opacity: .4; cursor: default; background: var(--ic-panel); border-color: var(--ic-rule); color: var(--ic-text); }
/* narrower screens: the search takes its own row */
@media (max-width: 1100px) {
  .cs-toolbar { flex-wrap: wrap; }
  .cs-toolbar .cs-search, .cs-toolbar .cs-search input { width: 100%; }
  .cs-nav { flex: 1 1 100%; padding-left: 0; border-left: 0; }
}
/* on a phone: the filters are one row you swipe along, so the sticky bar
   doesn't eat the screen */
@media (max-width: 720px) {
  .cs-toolbar { padding: 10px 12px; gap: 10px; top: calc(var(--cs-sticky-top, 0px) + 6px); }
  .cs-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cs-nav::-webkit-scrollbar { display: none; }
  .cs-nav-label { display: none; }
  .cs-root .cs-nav button { flex: none; height: 32px; padding: 0 11px; font-size: 13px; }
}

/* while searching: the matches as one grid, without the section headings */
.cs-root.cs-searching .cs-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cs-root.cs-searching .cs-section, .cs-root.cs-searching .cs-grid { display: contents; }
.cs-root.cs-searching .cs-section > header, .cs-root.cs-searching .cs-lead { display: none; }
@media (max-width: 860px) { .cs-root.cs-searching .cs-sections { grid-template-columns: 1fr; } }

/* ---------- sections and cards ---------- */
.cs-section { scroll-margin-top: calc(var(--cs-sticky-top, 0px) + 76px); }
.cs-root { scroll-margin-top: var(--cs-sticky-top, 0px); }
/* each section set off from the one before: a rule across the page, then the
   heading with a short accent bar under it */
.cs-section + .cs-section { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--ic-rule); }
.cs-section > header { position: relative; display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; padding-bottom: 12px; }
.cs-section > header::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: var(--ic-accent); }
.cs-section h2 { margin: 0; color: var(--ic-ink); font-weight: 800; font-size: 28px; line-height: 1.2; letter-spacing: -.01em; }
.cs-section h2 .n { color: var(--ic-muted); font-weight: 600; font-size: 16px; margin-left: 10px; letter-spacing: 0; }
.cs-lead { margin: 0 0 22px; max-width: 760px; color: var(--ic-text-2); font-size: 16px; line-height: 1.55; }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 860px) { .cs-grid { grid-template-columns: 1fr; } }

.cs-card { position: relative; isolation: isolate; display: flex; flex-direction: column; border-radius: 16px; background: var(--ic-card); border: 1px solid var(--ic-rule); box-shadow: var(--ic-shadow-card); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.cs-card:hover { box-shadow: var(--ic-shadow-hover); transform: translateY(-2px); }
/* each card outlined in the light shade of its risk color, the strong shade along the top */
.cs-card[data-risk="destructive"] { border: 1.5px solid var(--ic-rose-line); border-top: 3px solid var(--ic-rose); }
.cs-card[data-risk="caution"] { border: 1.5px solid var(--ic-amber-line); border-top: 3px solid var(--ic-amber); }
.cs-card[data-risk="safe"] { border: 1.5px solid var(--ic-em-line); border-top: 3px solid var(--ic-emerald); }
.cs-card-body { padding: 16px 18px 12px; }
.cs-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cs-card h3 { margin: 0; color: var(--ic-ink); font-weight: 750; font-size: 18px; line-height: 1.3; }
.cs-cmd { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; padding: 9px 10px 9px 12px; border-radius: 10px; background: #0f172a; color: #e2e8f0; font-size: 14.5px; }
.cs-cmd code, main.learn .learn-wrap .cs-cmd code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: inherit !important; background: none !important; padding: 0 !important; border: 0 !important; font-size: inherit !important; }
.cs-cmd code .p { color: #fbbf24; }
.cs-cmd code .g { color: #94a3b8; }
.cs-copy { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,.08); color: #cbd5e1; cursor: pointer; }
.cs-copy:hover { background: rgba(255,255,255,.18); color: #fff; }
.cs-copy svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.cs-copy.done { color: #34d399; }
.cs-what { margin: 0; color: var(--ic-text); font-size: 15px; line-height: 1.5; }
.cs-lead code { white-space: nowrap; }
.cs-what code, .cs-notes code, .cs-lead code { padding: 1px 5px; border-radius: 5px; background: var(--ic-chip); color: var(--ic-ink); font-size: .9em; }

/* the graph: a git-sim viewer frame without its bar */
.cs-graph { position: relative; margin: 4px 12px 0; border-radius: 12px; overflow: hidden; background: var(--bg); cursor: pointer; }
.cs-graph:focus-visible { outline: 2px solid var(--ic-accent); outline-offset: 2px; }
.cs-graph .git-sim-frame { background: var(--bg); box-shadow: none; border-radius: 0; }
.cs-graph .git-sim-frame #bar, .cs-graph .git-sim-frame .frame-top, .cs-graph .git-sim-frame .git-sim-credit { display: none !important; }
.cs-graph .git-sim-frame #stage { padding: 6px 6px 2px !important; min-height: 0; }
.cs-graph .git-sim-frame #scene { cursor: pointer; }
.cs-graph-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 12px; padding: 6px 4px 0; color: var(--ic-muted); font-size: 12px; }
/* a card without notes ends on this row: room under its buttons */
.cs-graph-foot:last-child { padding-bottom: 14px; }
.cs-graph-foot code { color: var(--ic-text-2); font-size: 11.5px; }
.cs-foot-actions { display: inline-flex; gap: 6px; flex: none; }
.cs-replay { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ic-rule); background: var(--ic-card); color: var(--ic-text-2) !important; font-weight: 600; font-size: 11.5px; line-height: 1.4; cursor: pointer; text-decoration: none !important; transition: color .15s, background-color .15s, border-color .15s, transform .15s, box-shadow .15s; }
/* Article and Replay on hover: a tinted pill that lifts a little. The extra
   selectors outrank global.css, whose "main a.no-highlight:hover" makes a
   link's text transparent (Article vanished under the pointer) */
.cs-replay:hover, .cs-replay:focus-visible, main .cs-root a.cs-replay.no-highlight:hover, main .cs-root a.cs-replay.no-highlight:focus-visible { color: var(--ic-accent-ink) !important; background: var(--ic-accent-tint); border-color: var(--ic-accent); transform: translateY(-1px); box-shadow: 0 4px 10px -6px var(--ic-accent); text-decoration: none !important; outline: none; }
.cs-replay:active { transform: none; box-shadow: none; }
.cs-replay svg { width: 11px; height: 11px; fill: currentColor; }
.cs-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--ic-accent); opacity: .8; transition: opacity .4s; }
.cs-graph.idle .cs-progress { opacity: 0; }
.cs-loading { display: grid; place-items: center; aspect-ratio: 16 / 7; color: var(--ic-muted); font-size: 13px; }

.cs-notes { list-style: none; margin: 0; padding: 12px 18px 16px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ic-text-2); }
.cs-notes li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; }
.cs-notes b { color: var(--ic-muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.cs-notes .none { color: var(--ic-rose-ink); font-weight: 600; }
.cs-notes li.warn, .cs-notes li.warn b { color: var(--ic-rose-ink); }
.cs-card[data-risk="caution"] .cs-notes li.warn, .cs-card[data-risk="caution"] .cs-notes li.warn b { color: var(--ic-amber-ink); }
.cs-empty { display: none; margin: 24px 0; color: var(--ic-muted); }
.cs-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) { .cs-card, .cs-card:hover { transition: none; transform: none; } }

/* ---------- picking cards for the printable sheet ---------- */
.cs-card-tags { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.cs-pick, .cs-pick-all { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; border: 1.5px solid var(--ic-accent-line); background: var(--ic-card); color: var(--ic-accent); font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.cs-pick svg, .cs-pick-all svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-pick .check, .cs-pick-all .check { display: none; }
.cs-pick:hover, .cs-pick-all:hover { border-color: var(--ic-accent); background: var(--ic-accent-tint); }
.cs-pick[aria-pressed="true"], .cs-pick-all[aria-pressed="true"] { border-color: var(--ic-accent); background: var(--ic-accent); color: #fff; }
.cs-pick[aria-pressed="true"] .plus, .cs-pick-all[aria-pressed="true"] .plus { display: none; }
.cs-pick[aria-pressed="true"] .check, .cs-pick-all[aria-pressed="true"] .check { display: inline; }
:root[data-theme="dark"] .cs-pick[aria-pressed="true"], :root[data-theme="dark"] .cs-pick-all[aria-pressed="true"] { color: #1e1b4b; }
.cs-pick:disabled, .cs-pick-all:disabled { opacity: .4; cursor: not-allowed; background: none; border-color: var(--ic-rule); }
.cs-section > header .cs-pick-all { margin-left: auto; align-self: center; }
/* selected: one accent border all round, whatever the risk, and a soft ring */
.cs-root .cs-card.cs-picked { border: 2.5px solid var(--ic-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ic-accent) 18%, transparent), var(--ic-shadow-card); }

/* the tray: the reader's sheet, pinned to the foot of the screen */
/* outlined in rose with a soft ring, like the snapped filter bar, so it stands out from the cards under it */
.cs-tray { position: fixed; left: 50%; bottom: 20px; z-index: 4; transform: translateX(-50%); display: flex; flex-direction: column; gap: 14px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px 14px 14px 24px; border-radius: 18px; border: 1.5px solid var(--ic-rose); background: var(--ic-card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ic-rose) 18%, transparent), 0 22px 48px -18px rgba(30,27,75,.55), 0 2px 6px rgba(0,0,0,.08); }
.cs-tray[hidden] { display: none; }
/* an open navbar menu (z-index 3) drops over the tray, not under it */
body:has(.navbar .dropdown-menu.show) .cs-tray { z-index: 2; }
.cs-tray-main { display: flex; align-items: center; gap: 18px; }
/* compact: an up arrow opens the steps; open: a down arrow (top right) minimizes them */
.cs-tray-expand { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-right: -2px; padding: 0; border: 1px solid var(--ic-rule); border-radius: 10px; background: none; color: var(--ic-text-2); cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
.cs-tray-expand:hover, .cs-tray-expand:focus-visible { color: var(--ic-accent); border-color: var(--ic-accent-line); background: var(--ic-accent-tint); outline: none; }
.cs-tray-expand svg, .cs-tray-guide-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-tray.cs-guide .cs-tray-expand { display: none; }
.cs-tray .cs-tray-confirm[hidden] { display: none; }
.cs-tray-btn:disabled { opacity: .45; cursor: default; background: none !important; color: var(--ic-text-2) !important; border-color: var(--ic-rule) !important; }

/* opened from the hero's button: bigger, a wider ring, the three steps above
   the controls, and one pulse to catch the eye (scale, not transform, which
   centers the tray) */
.cs-tray.cs-guide { width: min(760px, calc(100vw - 32px)); padding: 12px 20px 18px 26px; border-width: 2px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--ic-rose) 20%, transparent), 0 26px 60px -18px rgba(30,27,75,.6), 0 2px 6px rgba(0,0,0,.08); }
.cs-tray.cs-guide .cs-tray-main { justify-content: space-between; }
.cs-tray.cs-pop { animation: cs-tray-pop .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cs-tray-pop { 0% { scale: .9; opacity: .4; } 60% { scale: 1.03; opacity: 1; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .cs-tray.cs-pop { animation: none; } }
.cs-tray-guide { position: relative; padding: 0 0 14px; border-bottom: 1px solid var(--ic-rule); }
/* the header row: the title and the arrow that minimizes, ruled off from the steps */
.cs-tray-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -6px 14px 0; padding-bottom: 8px; border-bottom: 1.5px solid var(--ic-rose-line); }
.cs-tray-guide[hidden] { display: none; }
.cs-tray-guide-title { margin: 0; color: var(--ic-ink); font-size: 18px; font-weight: 700; }
.cs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: cs-step; }
/* each step a little card: the number in a badge, a soft tint, green once done */
.cs-steps li { position: relative; padding: 12px 12px 12px 50px; border-radius: 14px; border: 1.5px solid var(--ic-rose-line); background: var(--ic-rose-soft); color: var(--ic-text-2); font-size: 14px; line-height: 1.45; counter-increment: cs-step; transition: background-color .2s, border-color .2s; }
.cs-steps li::before { content: counter(cs-step); position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ic-rose); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 4px 10px -4px var(--ic-rose); }
.cs-steps li.done { border-color: var(--ic-em-line); background: var(--ic-em-soft); }
.cs-steps li.done::before { content: "\2713"; background: var(--ic-emerald); box-shadow: 0 4px 10px -4px var(--ic-emerald); }
.cs-steps li.now { border-color: var(--ic-rose); background: var(--ic-card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic-rose) 16%, transparent); }
.cs-steps li b { color: var(--ic-ink); }
.cs-step-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; border: 1.5px solid var(--ic-accent-line); color: var(--ic-accent); font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.cs-step-pill svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.cs-step-pill .check { display: none; }
.cs-tray-guide-close { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ic-muted); cursor: pointer; }
.cs-tray-guide-close:hover { color: var(--ic-ink); background: var(--ic-chip); }
.cs-tray-count { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; white-space: nowrap; }
.cs-tray-count { min-width: 0; }
.cs-tray-count b { overflow: hidden; color: var(--ic-ink); font-size: 16.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.cs-tray-num { color: var(--ic-muted); font-size: 14px; font-weight: 800; }
.cs-tray-n { color: var(--ic-ink); font-weight: 800; }
.cs-tray-actions { display: flex; align-items: center; gap: 8px; }
.cs-tray-btn { height: 42px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--ic-rule); background: none; color: var(--ic-text-2); font-family: inherit; font-weight: 600; font-size: 14.5px; line-height: 1; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
.cs-tray-btn:hover, .cs-tray-btn[aria-pressed="true"] { color: var(--ic-accent); border-color: var(--ic-accent-line); background: var(--ic-accent-tint); }
.cs-tray .cs-btn { height: 42px; padding: 0 24px; font-size: 15.5px; }
.cs-tray-note { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); padding: 7px 12px; border-radius: 10px; background: var(--ic-kicker-bg); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.cs-tray-note.on { opacity: 1; transform: translate(-50%, 0); }
body.cs-tray-on footer { padding-bottom: 104px; }  /* the tray doesn't cover the footer's last line */


/* Confirm: the steps box grows to hold step 3, the email signup and, once the
   reader is subscribed, Download / print (cheat-sheet.js) */
.cs-tray.cs-unlocking { width: min(900px, calc(100vw - 32px)); padding: 16px 24px 20px 30px; }
.cs-tray.cs-unlocking .cs-tray-guide-title { font-size: 21px; }
.cs-steps li[data-step="3"].now { color: var(--ic-ink); }
.cs-steps li.now::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ic-rose) 25%, transparent); }
/* what goes on the sheet: the reader's own pick, the top 32, or everything */
.cs-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
/* Leave out the drawings: a switch */
.cs-switch { position: relative; display: flex; align-items: center; gap: 12px; margin: 12px 0 0; cursor: pointer; user-select: none; }
.cs-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-switch-track { position: relative; flex: none; width: 40px; height: 22px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid var(--ic-rule); background: var(--ic-chip); transition: background-color .2s, border-color .2s, box-shadow .2s; }
.cs-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .35); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.cs-switch input:checked + .cs-switch-track { border-color: var(--ic-accent); background: var(--ic-accent); }
.cs-switch input:checked + .cs-switch-track::after { transform: translateX(18px); }
.cs-switch input:focus-visible + .cs-switch-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic-accent) 30%, transparent); }
.cs-switch:hover .cs-switch-track { border-color: var(--ic-accent-line); }
.cs-switch-text { line-height: 1.3; }
.cs-switch-text b { color: var(--ic-ink); font-size: 14.5px; font-weight: 700; }
.cs-switch-text span { color: var(--ic-muted); font-size: 14.5px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .cs-switch-track, .cs-switch-track::after { transition: none; } }
.cs-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--ic-rule); background: var(--ic-card); font-family: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.cs-mode b { color: var(--ic-ink); font-size: 15px; font-weight: 700; line-height: 1.2; }
.cs-mode span { color: var(--ic-muted); font-size: 12.5px; line-height: 1.3; }
.cs-mode:hover { border-color: var(--ic-accent-line); }
.cs-mode[aria-pressed="true"] { border-color: var(--ic-accent); background: var(--ic-accent-tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic-accent) 14%, transparent); }
.cs-mode[aria-pressed="true"] span { color: var(--ic-accent-ink); }
.cs-unlock { margin-top: 18px; padding: 20px 22px; border-radius: 14px; background: color-mix(in srgb, var(--ic-rose) 7%, var(--ic-card)); border: 1.5px solid var(--ic-rose-line); }
.cs-unlock[hidden], .cs-unlock .offer-form[hidden], .cs-unlock .capture-reward[hidden] { display: none; }
.cs-unlock-lead { margin: 0 0 12px; color: var(--ic-text-2); font-size: 15.5px; line-height: 1.5; }
.cs-unlock-lead b { color: var(--ic-ink); }
.cs-unlock-lead[hidden] { display: none; }
.cs-unlock-lead small { display: block; margin-top: 3px; color: var(--ic-muted); font-size: 13px; font-style: italic; }
.cs-unlock-lead small:empty { display: none; }
.cs-unlock form { margin: 0; }
.cs-unlock .input-group { max-width: 520px; margin: 0 !important; }
.cs-tray .cs-unlock form .form-control { height: 50px; font-size: 16px; background: #fff !important; color: var(--ic-ink) !important; border: 1.5px solid color-mix(in srgb, var(--ic-accent) 45%, var(--ic-rule)) !important; box-shadow: inset 0 1px 3px rgba(15, 23, 42, .08); }
.cs-tray .cs-unlock form .form-control::placeholder { color: var(--ic-text-2); opacity: 1; }
.cs-tray .cs-unlock form .form-control:focus { border-color: var(--ic-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic-accent) 22%, transparent); outline: 0; }
:root[data-theme="dark"] .cs-tray .cs-unlock form .form-control { background: var(--ic-bg) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); }
/* the button as tall as the box beside it (the site's form styles size it smaller) */
.cs-tray .cs-unlock form .input-group > .form-control, .cs-tray .cs-unlock form .input-group-append .btn { height: 50px !important; box-sizing: border-box; }
.cs-tray .cs-unlock form .input-group-append .btn { display: inline-flex; align-items: center; padding: 0 24px !important; font-size: 16px !important; line-height: 1 !important; }
/* the captcha: open once the reader starts on the form (.active) and it stays open;
   tied to focus alone, it folded away as the Unlock button was clicked */
.cs-unlock .g-recaptcha { max-height: 0; overflow: hidden; transition: max-height .25s, margin .25s; }
.cs-unlock:focus-within .g-recaptcha, .cs-unlock.active .g-recaptcha { max-height: 90px; margin-top: 10px; }
.cs-unlock form.done .input-group, .cs-unlock form.done .g-recaptcha { display: none !important; }
.cs-unlock form span[id^="emailCaptureConfirmation"] { display: none; color: var(--ic-em-ink, #047857); font-weight: 600; }
/* the thanks: a diagonal rainbow that drifts across the letters */
.cs-unlock { --cs-rainbow: #e11d48, #ea580c, #ca8a04, #16a34a, #0891b2, #4f46e5, #9333ea, #e11d48; }
:root[data-theme="dark"] .cs-unlock { --cs-rainbow: #fb7185, #fb923c, #facc15, #4ade80, #22d3ee, #818cf8, #c084fc, #fb7185; }
.cs-unlock form.done span[id^="emailCaptureConfirmation"] { display: block; width: fit-content; margin-bottom: 14px; background: linear-gradient(115deg, var(--cs-rainbow)) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 17px; font-weight: 700; animation: cs-rainbow-drift 6s linear infinite; }
@keyframes cs-rainbow-drift { to { background-position: -200% 0; } }
.cs-unlock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.cs-unlock-actions .cs-btn { height: 50px; padding: 0 30px; font-size: 16.5px; }
/* the download: a soft gradient in the site's rose, violet and indigo, drifting
   slowly, with a shimmer now and then; a constant dark edge (light in dark mode)
   sets it off */
.cs-unlock-actions .cs-sheet-download { --cs-dl-edge: #1e1b4b; position: relative; overflow: hidden; box-sizing: border-box; border: 2px solid var(--cs-dl-edge) !important; background: linear-gradient(120deg, #e11d48, #9333ea, #4f46e5, #9333ea, #e11d48) 0 0 / 300% 100% !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); box-shadow: 0 10px 22px -12px #9333ea; animation: cs-dl-drift 9s ease-in-out infinite alternate; }
:root[data-theme="dark"] .cs-unlock-actions .cs-sheet-download { --cs-dl-edge: #f8fafc; }
.cs-unlock-actions .cs-sheet-download::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 55%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: cs-cta-glint 4s ease-in-out 1s infinite; pointer-events: none; }
.cs-unlock-actions .cs-sheet-download:hover { filter: brightness(1.08); }
@keyframes cs-dl-drift { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .cs-unlock form.done span[id^="emailCaptureConfirmation"], .cs-unlock-actions .cs-sheet-download, .cs-unlock-actions .cs-sheet-download::after { animation: none; } }
.cs-unlock-hint { color: var(--ic-muted); font-size: 13.5px; }


/* ---------- phones: the tray is one row until it opens, then a sheet that scrolls ---------- */
@media (max-width: 720px) {
  .cs-tray, .cs-tray.cs-guide, .cs-tray.cs-unlocking { left: 8px; right: 8px; bottom: 8px; transform: none; width: auto; max-width: none; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 16px; }
  /* closed: the count and Confirm, nothing else */
  .cs-tray-main { flex-wrap: nowrap; gap: 10px; }
  .cs-tray-count { flex: 1; min-width: 0; flex-direction: row; align-items: baseline; gap: 8px; }
  .cs-tray-count b { font-size: 15px; }
  .cs-tray-num { font-size: 13.5px; }
  .cs-tray-actions .cs-tray-btn { display: none; }
  .cs-tray .cs-btn { height: 40px; padding: 0 18px; font-size: 15px; }
  /* open: a sheet over the lower screen that scrolls, the other buttons in a row of their own */
  .cs-tray.cs-guide { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
  .cs-tray.cs-guide .cs-tray-main { flex-wrap: wrap; }
  .cs-tray.cs-guide .cs-tray-actions { flex: 1 1 100%; }
  .cs-tray.cs-guide .cs-tray-actions .cs-tray-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1; height: 36px; padding: 0 6px; font-size: 13.5px; }
  .cs-tray-guide { padding: 0 0 10px; }
  .cs-tray-guide-head { margin-bottom: 10px; padding-bottom: 6px; }
  .cs-tray-guide-title, .cs-tray.cs-unlocking .cs-tray-guide-title { font-size: 16px; }
  .cs-modes { gap: 6px; margin-top: 10px; }
  .cs-switch { margin-top: 10px; gap: 10px; }
  .cs-switch-text b { font-size: 13.5px; }
  .cs-switch-text span { font-size: 13.5px; }
  .cs-mode { padding: 8px 9px; border-radius: 10px; }
  .cs-mode b { font-size: 13.5px; }
  .cs-mode span { font-size: 11px; }
  .cs-steps { grid-template-columns: 1fr; gap: 6px; }
  .cs-steps li { padding: 8px 10px 8px 42px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
  .cs-steps li::before { left: 10px; top: 8px; width: 22px; height: 22px; font-size: 12px; }
  .cs-unlock { margin-top: 10px; padding: 12px; }
  .cs-unlock-lead { font-size: 14px; margin-bottom: 10px; }
  .cs-tray .cs-unlock form .input-group > .form-control, .cs-tray .cs-unlock form .input-group-append .btn { height: 44px !important; }
  .cs-tray .cs-unlock form .form-control { font-size: 16px; }  /* 16px: iOS doesn't zoom the page on focus */
  .cs-tray .cs-unlock form .input-group-append .btn { padding: 0 14px !important; font-size: 15px !important; }
  .cs-unlock-actions .cs-btn { height: 44px; padding: 0 20px; font-size: 15.5px; }
  .cs-tray-note { white-space: normal; width: max-content; max-width: calc(100vw - 48px); text-align: center; }
  /* while the sheet is open, the filter bar stays in the page instead of pinned over it */
  body.cs-guide-open .cs-toolbar { position: static; }
  body.cs-tray-on footer { padding-bottom: 76px; }
}

/* ---------- print: the reader's picks, packed onto letter pages ---------- */
/* csPreparePrint (cheat-sheet.js) builds the sheet: every card half the page
   wide, its drawing the card's full width and as tall as that makes it; the
   cards measured, then packed into two columns, Packery style. The sheet's own
   styles sit outside @media print, so it can be measured on screen
   (.cs-measuring, out of sight); only showing it is for print. */
@page { size: letter; margin: 10mm 10mm 11mm; }
.cs-print-sheet { display: none; }
.cs-print-sheet.cs-measuring { display: block; position: absolute; left: -10000px; top: 0; width: 195.9mm; visibility: hidden; }
@media print {
  /* only the print sheet (csPreparePrint builds it); anything else printed shows no cards */
  html.cs-printing body > :not(.cs-print-sheet) { display: none !important; }
  html:not(.cs-printing) .cs-root, .cs-tray { display: none !important; }
  html.cs-printing, html.cs-printing body { background: #fff !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; }
  .cs-print-sheet { display: block; }
  .cs-print-page { break-after: page; }
  .cs-print-page:last-child { break-after: auto; }
  /* the git-sim drawings keep their colors (grays on a black and white printer) */
  .cs-print-sheet .cs-graph { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.cs-print-page { display: flex; flex-direction: column; height: 256mm; }
/* every page: the QR code (top left), Initial Commit (top center), the sheet's
   name and page (top right); page one: who it's for, big, stamped; the first
   and last pages: a line of footer. Black and gray only, so a black and white
   printer prints it as it is, and no ink goes on backgrounds. */
.cs-print-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4mm; flex: none; margin: 0 0 2.6mm; padding-bottom: 2.2mm; border-bottom: .75pt solid #999; color: #111; }
.cs-print-qrbox { display: flex; align-items: center; gap: 2mm; }
.cs-print-qrbox svg { display: block; width: 17mm; height: 17mm; flex: none; }
.cs-print-qrbox span { max-width: 26mm; font-size: 6.6pt; line-height: 1.3; color: #444; }
.cs-print-qrbox b { display: block; color: #111; font-size: 7.4pt; }
.cs-print-brand { display: flex; align-items: center; gap: 2.2mm; }
.cs-print-brand .cs-print-mark { width: 9mm; height: 9mm; flex: none; }
.cs-print-brand div { display: flex; flex-direction: column; line-height: 1.15; }
.cs-print-brand b { font-weight: 800; font-size: 13pt; letter-spacing: .01em; }
.cs-print-brand span { font-size: 7pt; color: #555; }
.cs-print-pageno { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 7pt; line-height: 1.35; color: #555; }
.cs-print-pageno b { color: #111; font-size: 7.4pt; }
.cs-print-hero { flex: none; margin: 1mm 0 3mm; text-align: center; }
.cs-print-hero h1 { margin: 0; color: #111; font-weight: 800; font-size: 22pt; line-height: 1.2; letter-spacing: -.01em; }
/* who it's for, like a rubber stamp */
.cs-print-stamp { display: inline-block; margin-right: .6mm; padding: .2mm 2.4mm .6mm; border: 1.8pt solid #111; border-radius: 2.5mm; transform: rotate(-2deg); text-transform: uppercase; letter-spacing: .04em; font-size: 19pt; }
.cs-print-hero p { margin: 1.6mm 0 0; color: #444; font-size: 8pt; font-style: italic; }
.cs-print-foot { flex: none; margin-top: auto; padding-top: 1.8mm; border-top: .75pt solid #999; color: #333; font-size: 7.2pt; line-height: 1.35; text-align: center; }
.cs-print-foot p { margin: 0; }
.cs-print-foot p + p { margin-top: .8mm; }
.cs-print-foot b { color: #111; }
.cs-print-foot code { font-size: 7pt; color: #111; font-weight: 700; }
/* the packed cards, each as tall as its content, in two columns (the script
   deals them out) */
.cs-print-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.6mm; align-items: start; flex: none; }
.cs-print-col { display: flex; flex-direction: column; gap: 2.6mm; min-width: 0; }
.cs-print-room { flex: 1; min-height: 0; }
.cs-print-col .cs-card { margin: 0; }
.cs-print-sheet .cs-card { display: flex; flex-direction: column; overflow: hidden; box-shadow: none !important; transform: none !important; border-radius: 6pt; border-width: .75pt; }
.cs-print-sheet .cs-card-body { flex: none; padding: 1.8mm 2.8mm .6mm; }
.cs-print-sheet .cs-card h3 { font-size: 9.2pt; }
/* capitals sit high in their line: a little more room above than below centers
   the word, and the dot stays where it was */
.cs-print-sheet .cs-badge { padding: 2pt 5pt 1pt; font-size: 6.5pt; }
.cs-print-sheet .cs-badge::before { width: 4pt; height: 4pt; transform: translateY(-.3pt); }
.cs-print-sheet .cs-cmd { margin: .9mm 0; padding: .9mm 2mm; border-radius: 4pt; font-size: 8pt; }
.cs-print-sheet .cs-what { font-size: 7.2pt; line-height: 1.28; }
/* the drawing the card's full inner width, edge to edge (cheat-sheet.js trims
   its own side margins too), its height following */
.cs-print-sheet .cs-graph { flex: none; display: block; margin: .5mm 0 0; border-radius: 0; }
.cs-print-sheet .cs-graph .git-sim-frame { display: block; min-height: 0; }
.cs-print-sheet .cs-graph .git-sim-frame #stage { display: flex; align-items: center; justify-content: center; height: auto !important; min-height: 0 !important; padding: 0 !important; }
.cs-print-sheet .cs-graph .git-sim-frame #scene { display: block; width: 100%; height: auto; max-width: none; max-height: none; }
/* on white paper, white behind the drawing: git-sim's light gray backdrop is
   the scene's first shape */
.cs-print-sheet .cs-graph .git-sim-frame #scene > rect:first-of-type { fill: #fff !important; }
/* no soft shadows under the circles and labels: on paper they print as gray smudges */
.cs-print-sheet .cs-graph .git-sim-frame #scene [filter] { filter: none !important; }
/* labels (HEAD, branches, tags, scopes): white letters cut out of a solid color
   print fuzzy, so on paper each is a pale tint of its color with a rim of it,
   and its name dark on top */
.cs-print-sheet .cs-graph .git-sim-frame #scene rect:has(+ text[fill="#ffffff" i]), .cs-print-sheet .cs-graph .git-sim-frame #scene rect:has(+ text[fill="#f6f8fa" i]) { fill-opacity: .16 !important; stroke-width: 2px; }
.cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#2da44e" i]:has(+ text[fill="#ffffff" i]), .cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#2da44e" i]:has(+ text[fill="#f6f8fa" i]) { stroke: #2da44e; }
.cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#0969da" i]:has(+ text[fill="#ffffff" i]), .cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#0969da" i]:has(+ text[fill="#f6f8fa" i]) { stroke: #0969da; }
.cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#1f9ba6" i]:has(+ text[fill="#ffffff" i]), .cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#1f9ba6" i]:has(+ text[fill="#f6f8fa" i]) { stroke: #1f9ba6; }
.cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#8250df" i]:has(+ text[fill="#ffffff" i]), .cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#8250df" i]:has(+ text[fill="#f6f8fa" i]) { stroke: #8250df; }
.cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#bf8700" i]:has(+ text[fill="#ffffff" i]), .cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#bf8700" i]:has(+ text[fill="#f6f8fa" i]) { stroke: #bf8700; }
.cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#f0665c" i]:has(+ text[fill="#ffffff" i]), .cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#f0665c" i]:has(+ text[fill="#f6f8fa" i]) { stroke: #f0665c; }
.cs-print-sheet .cs-graph .git-sim-frame #scene text[fill="#ffffff" i], .cs-print-sheet .cs-graph .git-sim-frame #scene text[fill="#f6f8fa" i] { fill: #1f2328 !important; }
/* the muted gray text a shade darker, so small labels and hashes stay crisp */
.cs-print-sheet .cs-graph .git-sim-frame #scene text[fill="#6e7781" i] { fill: #424a53 !important; }
/* panel boxes (black at a low opacity, gray on screen): clear on paper, with a thin rim */
.cs-print-sheet .cs-graph .git-sim-frame #scene rect[fill="#000000"][fill-opacity] { fill-opacity: 0 !important; stroke: #8c959f; stroke-width: 1.5px; }
/* a full-width card (cheat-sheet.js gives one to a drawing full of panels):
   above the two columns */
.cs-print-fulls { display: flex; flex-direction: column; gap: 2.6mm; flex: none; margin-bottom: 2.6mm; }
.cs-print-sheet .cs-notes { flex: none; padding: .8mm 2.8mm 1.4mm; gap: .4mm; font-size: 6.8pt; }
.cs-print-sheet .cs-notes li { grid-template-columns: 11mm minmax(0, 1fr); gap: 1.5mm; }
.cs-print-sheet .cs-notes b { font-size: 6pt; padding-top: .6pt; }
.cs-print-sheet .cs-pick, .cs-print-sheet .cs-copy, .cs-print-sheet .cs-graph-foot, .cs-print-sheet .cs-progress { display: none !important; }
/* Leave out the drawings: the cards without them */
.cs-print-sheet.cs-text-only .cs-graph { display: none !important; }
.cs-print-sheet.cs-text-only .cs-card { padding-bottom: 1.4mm; }  /* the drawing was the card's foot */
/* the cards in black and white: outlines instead of fills, black text throughout */
.cs-print-sheet .cs-card, .cs-print-sheet .cs-card[data-risk] { background: #fff; border: .75pt solid #888; border-top-width: .75pt; }
.cs-print-sheet .cs-card h3 { color: #111; }
.cs-print-sheet .cs-badge { background: none !important; color: #111 !important; border: .6pt solid #555 !important; }
/* the dot keeps its traffic-light color, and prints even with the print window's
   Background graphics off (it is a background) */
.cs-print-sheet .cs-badge::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cs-print-sheet .cs-badge.safe::before { background: #16a34a !important; }
.cs-print-sheet .cs-badge.caution::before { background: #d97706 !important; }
.cs-print-sheet .cs-badge.destructive::before { background: #dc2626 !important; }
.cs-print-sheet .cs-badge.destructive { border-width: 1.2pt !important; font-weight: 800; }
.cs-print-sheet .cs-cmd { background: #fff !important; color: #111 !important; border: .75pt solid #333; }
.cs-print-sheet .cs-cmd code .g { color: #666 !important; }
.cs-print-sheet .cs-cmd code .p { color: #111 !important; font-style: italic; }
.cs-print-sheet .cs-what, .cs-print-sheet .cs-notes, .cs-print-sheet .cs-notes li.warn, .cs-print-sheet .cs-notes li.warn b, .cs-print-sheet .cs-notes .none { color: #111 !important; }
.cs-print-sheet .cs-notes b { color: #555 !important; }
.cs-print-sheet .cs-what code, .cs-print-sheet .cs-notes code { background: none !important; color: #111 !important; border: .5pt solid #bbb; }
.cs-print-sheet .cs-graph, .cs-print-sheet .cs-graph .git-sim-frame { background: #fff !important; }