/* Cheat sheet — extends the shared design system; print styles always apply. */
@import url("system.css?v=fe851281");

@layer components {
  :root:has(#css-toggle:checked) {
    & body { font-size: 0.95rem; }
    & hgroup h1 { font-size: var(--step-3); }
    & hgroup p { color: var(--text-muted); }

    & main article {
      column-width: 19rem;
      column-gap: calc(var(--space) * 1.8);
      & > header { column-span: all; margin-block-end: var(--space); }
    }
    & section { break-inside: avoid-column; margin-block-end: var(--space); }
    & h2 {
      font-size: var(--step--1); font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.13em;
      color: var(--brand-strong);
      border-block-end: 1px solid var(--brand-tint-border);
      padding-block-end: 0.3em; margin-block-end: 0.5em;
    }
    & dl { display: grid; gap: 0.15em 0; }
    & dt a { text-decoration: none; font-weight: 650;
      &:hover code { background: var(--brand-tint); color: var(--brand-strong); } }
    & dd { color: var(--text-muted); font-size: 0.86em;
      margin-block-end: 0.5em; }
    & body > footer { column-span: all; }
  }
}

/* Print: always active, regardless of the toggle. */
@media print {
  body { font: 8.5pt/1.3 system-ui, sans-serif; color: #000; background: #fff; }
  body > a[href="#main"], #css-toggle, label[for="css-toggle"],
  body > header nav, body > footer { display: none; }
  main article { column-count: 3; column-gap: 1.5em; }
  section { break-inside: avoid; }
  h1 { font-size: 14pt; } h2 { font-size: 9pt; text-transform: uppercase; }
  hgroup p { display: none; }
  dl { margin: 0; } dt { font-weight: 700; } dd { margin: 0 0 0.3em; color: #333; }
  a { color: #000; text-decoration: none; }
}