/* Cheat sheet — page-specific styles, layered on ink.css.
 *
 * This page was the last survivor of the pre-Ink dark theme: it carried its own
 * 355-line inline <style> with a private palette (#111 paper, #4ade80 accent)
 * inherited from the deleted enhanced.css. That inline block is gone; this file
 * replaces it, and ink.css now supplies the shared type, colour and chrome.
 *
 * Two rules of the house style are followed deliberately:
 *   - no border-radius. Ink is print-inspired; edges are crisp everywhere else.
 *   - serif for prose, mono for anything you would type. Descriptions read as
 *     writing, commands read as terminal.
 *
 * The tag palette below is the one visual departure, and it is intentional: ten
 * categories need to be told apart at a glance. All ten of the old screen
 * colours failed 4.5:1 on paper (they were designed for a near-black
 * background), so they are redrawn as desaturated print inks. Every one is
 * between 5.99:1 and 7.24:1 — a spread of 1.25 — so they read at the same
 * visual weight and behave as one set rather than ten unrelated hues.
 * nginx reuses Ink's own --red.
 */

:root {
  --t-posix:   #3F6B4A;  /* 5.99:1 */
  --t-bash:    #2F5D8A;  /* 6.70:1 */
  --t-git:     #8C4A22;  /* 6.56:1 */
  --t-nano:    #75581C;  /* 6.46:1 */
  --t-nginx:   #9E2B25;  /* 7.24:1 — Ink's --red */
  --t-gitea:   #6B4A8C;  /* 6.86:1 */
  --t-ssh:     #2A6068;  /* 6.88:1 */
  --t-tmux:    #55661F;  /* 6.19:1 */
  --t-systemd: #8C3A63;  /* 7.05:1 */
  --t-docker:  #26618F;  /* 6.41:1 */

  --sheet-tint: #F4F4F1;  /* same tint ink.css uses for inline <code> */

  /* Height of the pinned controls bar. The sidebar sits below it and anchor
     targets clear it, so the three stay in step from one value. */
  --sheet-pin: 76px;
}

/* This page is a reference table, not an article, so it runs wider than the
   680px prose measure. Header and footer widen with it so the brand, nav and
   colophon stay aligned to the content instead of floating in a narrow column.
   .sheet-wrap repeats .wrap's centring and gutter -- it is a sibling of that
   class, not a variant of it, so it inherits nothing. */
.sheet-wrap { max-width: 960px; margin: 0 auto; padding: 0 24px }
header .wrap,
footer .wrap { max-width: 960px }

/* ---- Intro ---------------------------------------------------------- */

.sheet-intro { max-width: 62ch; margin-top: 14px; color: var(--dim) }

.mobile-note { display: none }
@media (max-width: 640px) {
  .mobile-note {
    display: block; margin-top: 16px; padding: 10px 14px;
    border: 1px solid var(--rule); font: 400 .76rem/1.5 var(--mono);
    color: var(--dim);
  }
}

/* ---- Search + tag filters ------------------------------------------- */

/* Pinned to the top: on a 20-section reference you should never have to scroll
   back up to search. The sidebar was already sticky, which is why scrolling
   over it looks like nothing happens — it is doing its job. The search box was
   the piece that scrolled away.
 *
 * Full-bleed rather than a 960px block, so content scrolling underneath is
 * covered edge to edge; the asymmetric padding keeps the inner content on the
 * same 960px column as .sheet-wrap and .layout. */
.controls {
  position: sticky; top: 0; z-index: 5;
  max-width: none;
  padding: 20px max(24px, calc((100% - 960px) / 2 + 24px));
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}

.search-wrap { position: relative; flex: 1; min-width: 220px }
.search-wrap svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--dim); pointer-events: none;
}

#search {
  width: 100%; padding: 8px 12px 8px 34px;
  background: var(--paper); border: 1px solid var(--rule);
  font: 400 .82rem var(--mono); color: var(--ink);
}
#search::placeholder { color: var(--dim) }
#search:focus { border-color: var(--red); outline: 2px solid var(--red); outline-offset: 1px }

.tags { display: flex; gap: 6px; flex-wrap: wrap }

/* Back to top. Lives in the bar that is already pinned rather than floating
   over the content bottom-right: nothing is covered, the position is
   predictable, and it needs no JS to appear and disappear. margin-left:auto
   pushes it to the far edge so it never crowds the filters.
 *
 * href="#top" carries no matching element on purpose -- HTML defines the
 * fragments "" and "top" as the top of the document itself, so this reaches
 * the true page top including the site header, which #main would skip past. */
.to-top {
  margin-left: auto; padding: 4px 2px;
  font: 400 .68rem var(--mono); color: var(--dim);
  text-decoration: none; white-space: nowrap;
}
.to-top:hover { color: var(--red) }
.to-top:focus-visible { outline: 2px solid var(--red); outline-offset: 2px }

/* Smooth only here, and only for people who have not asked for less motion.
   cheatsheet.css loads on this page alone, so no other page is affected. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth }
}

.tag-btn {
  padding: 4px 10px; border: 1px solid var(--rule); background: transparent;
  font: 400 .68rem var(--mono); color: var(--dim); letter-spacing: .04em;
  cursor: pointer;
}
.tag-btn:hover { border-color: var(--dim); color: var(--ink) }
.tag-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px }

/* Active filter: the tag's own ink, on a tinted ground. aria-pressed is the
   accessible signal; colour and weight are the visual one. */
.tag-btn[aria-pressed="true"] {
  background: var(--sheet-tint); border-color: currentColor; font-weight: 700;
}
.tag-btn[data-tag="all"][aria-pressed="true"]     { color: var(--ink) }
.tag-btn[data-tag="posix"][aria-pressed="true"]   { color: var(--t-posix) }
.tag-btn[data-tag="bash"][aria-pressed="true"]    { color: var(--t-bash) }
.tag-btn[data-tag="git"][aria-pressed="true"]     { color: var(--t-git) }
.tag-btn[data-tag="nano"][aria-pressed="true"]    { color: var(--t-nano) }
.tag-btn[data-tag="nginx"][aria-pressed="true"]   { color: var(--t-nginx) }
.tag-btn[data-tag="gitea"][aria-pressed="true"]   { color: var(--t-gitea) }
.tag-btn[data-tag="ssh"][aria-pressed="true"]     { color: var(--t-ssh) }
.tag-btn[data-tag="tmux"][aria-pressed="true"]    { color: var(--t-tmux) }
.tag-btn[data-tag="systemd"][aria-pressed="true"] { color: var(--t-systemd) }
.tag-btn[data-tag="docker"][aria-pressed="true"]  { color: var(--t-docker) }

/* ---- Layout ---------------------------------------------------------- */

.layout {
  max-width: 960px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 190px 1fr;
}

/* Offset below the pinned controls bar so it never tucks underneath. The
   max-height/overflow pair matters on short viewports: with 20 links the list
   can outgrow the screen, and without it the last few would be unreachable —
   scrolling over the sidebar would genuinely do nothing. */
.sidebar {
  position: sticky; top: var(--sheet-pin); height: fit-content;
  max-height: calc(100vh - var(--sheet-pin) - 16px); overflow-y: auto;
  padding: 24px 16px 24px 0; border-right: 1px solid var(--rule);
  overscroll-behavior: contain;
}
/* Wide screens: the disclosure is forced open by JS and its summary hidden, so
   the nav reads as a plain sidebar. The summary returns at the breakpoint. */
.sec-nav > summary {
  display: none;
  list-style: none; cursor: pointer;
}
.sec-nav > summary::-webkit-details-marker { display: none }

.sidebar-section { margin-bottom: 10px }
.sidebar-title {
  display: block; padding: 6px 8px;
  font: 700 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.sidebar-link {
  display: block; padding: 3px 8px; border-left: 2px solid transparent;
  font: 400 .74rem var(--mono); color: var(--dim); text-decoration: none;
}
.sidebar-link:hover { color: var(--ink); background: var(--sheet-tint) }
.sidebar-link:focus-visible { outline: 2px solid var(--red); outline-offset: -2px }
.sidebar-link.active {
  color: var(--ink); background: var(--sheet-tint); border-left-color: var(--red);
}

.content { padding: 24px 0 24px 32px; min-width: 0 }

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

/* ink.css styles bare `section` and `h2` for article pages -- 50px padding and
   a top rule on the former, uppercase letterspaced red mono on the latter. Both
   apply here by element name, so both are reset rather than merely overridden;
   font: alone would leave the transform, colour and letter-spacing in place. */
.section {
  margin-bottom: 44px; padding: 0; border-top: 0;
  /* Clears the pinned bar when a sidebar link jumps here, otherwise the
     heading you asked for lands hidden underneath it. */
  scroll-margin-top: calc(var(--sheet-pin) + 16px);
}
.section[data-hidden="true"] { display: none }

.section-header {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--rule);
}
.section-header h2 {
  margin-bottom: 0; font: 700 1rem var(--serif); color: var(--ink);
  letter-spacing: -.01em; text-transform: none;
}
.section-header h2 span { color: var(--red); margin-right: 5px }

.section-tag {
  padding: 2px 6px; border: 1px solid currentColor;
  font: 700 .6rem var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.tag-posix   { color: var(--t-posix) }
.tag-bash    { color: var(--t-bash) }
.tag-git     { color: var(--t-git) }
.tag-nano    { color: var(--t-nano) }
.tag-nginx   { color: var(--t-nginx) }
.tag-gitea   { color: var(--t-gitea) }
.tag-ssh     { color: var(--t-ssh) }
.tag-tmux    { color: var(--t-tmux) }
.tag-systemd { color: var(--t-systemd) }
.tag-docker  { color: var(--t-docker) }

/* ---- Cards ----------------------------------------------------------- */

.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.card-grid.single-col { grid-template-columns: 1fr }

.card {
  padding: 12px 14px; border: 1px solid var(--rule); background: var(--paper);
}
.card:hover { border-color: var(--dim) }
.card[data-hidden="true"] { display: none }

.card-kbd { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 7px }

kbd {
  padding: 2px 7px; border: 1px solid var(--rule); background: var(--sheet-tint);
  font: 500 .72rem var(--mono); color: var(--ink); letter-spacing: .02em;
  white-space: nowrap;
}
.or { font: 400 .62rem var(--mono); color: var(--dim) }

.card-snippet {
  margin-bottom: 7px; padding: 5px 8px;
  border-left: 2px solid var(--rule); background: var(--sheet-tint);
  font: 400 .76rem/1.6 var(--mono); color: var(--ink);
  white-space: pre; overflow-x: auto; scrollbar-width: thin;
}
.card-snippet .cm { color: var(--dim); font-style: italic }

.card-label { margin-bottom: 5px; font: 700 .72rem var(--mono); color: var(--ink) }

/* Descriptions are prose, so they get the serif — the one place this page
   reads like the rest of the site rather than like a terminal. */
.card-desc { font: 400 .84rem/1.55 var(--serif); color: var(--dim) }
.card-desc code {
  padding: 0 4px; background: var(--sheet-tint);
  font: 400 .78rem var(--mono); color: var(--ink);
}

/* ---- Empty state ----------------------------------------------------- */

#empty {
  display: none; padding: 48px 0; text-align: center;
  font: 400 .82rem var(--mono); color: var(--dim);
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 700px) {
  /* Pinned bar is two rows here: search, then the tag strip. --sheet-pin covers
     both plus the sections summary that sits directly beneath, so anchor jumps
     still clear everything fixed to the top. */
  :root { --sheet-pin: 148px }

  .controls { padding: 12px 16px; gap: 8px; row-gap: 10px }
  .search-wrap { flex: 1 1 100%; order: 1 }
  .to-top { order: 2; margin-left: 0; padding: 4px 8px }

  /* Eleven filters will not fit on a phone and wrapping them costs three rows
     of permanently pinned screen. A single scrollable strip is the standard
     answer and keeps the bar to a predictable height. */
  .tags {
    order: 3; flex: 1 1 100%; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tags::-webkit-scrollbar { display: none }
  .tag-btn { flex: 0 0 auto; padding: 7px 12px }

  .layout { grid-template-columns: minmax(0, 1fr) }
  .content { padding: 8px 0 16px }
  .card-grid,
  .card-grid.single-col { grid-template-columns: minmax(0, 1fr) }

  /* The nav becomes a disclosure pinned under the controls, so every section is
     one tap away anywhere on the page rather than a scroll back to the top. */
  .sidebar {
    position: sticky; top: var(--sheet-pin);
    max-height: none; overflow: visible;
    padding: 0; border-right: 0; border-bottom: 1px solid var(--rule);
    background: var(--paper); z-index: 4;
  }
  .sec-nav > summary {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px; min-height: 44px;
    font: 400 .74rem var(--mono); color: var(--dim);
    /* Sticky within the scrolling disclosure: the list scrolls under its own
       heading rather than carrying the close control off the top. */
    position: sticky; top: 0; z-index: 1; background: var(--paper);
  }
  .sec-nav > summary::before { content: "▸"; font-size: .7em }
  .sec-nav[open] > summary::before { content: "▾" }
  .sec-nav > summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px }

  /* Open, the list is capped and scrolls internally so twenty links can never
     run past the bottom of the screen. Kept in normal flow — an ordinary
     accordion — rather than absolutely positioned over the content, which
     needs the summary re-anchored and breaks in ways that are hard to see. */
  .sec-nav[open] {
    display: block;
    max-height: calc(100vh - var(--sheet-pin) - 60px); overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 44px targets — these are being tapped, not clicked. */
  .sidebar-link { padding: 11px 16px; min-height: 44px; font-size: .8rem }
  .sidebar-title { padding: 10px 16px 4px }
  .sidebar-section { margin-bottom: 0 }
}