/* snag.fm/how-it-works and /cheatsheet: steps, screens with numbered callouts, the one-page print. Loaded after
   snag.css and help.css; their colour tokens only. */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: 2rem; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0.1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; display: grid; place-items: center; }
.steps h2, .steps h3 { margin-top: 0; }

.works { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
main .wrap > .works, main .wrap > .sheet { max-width: var(--wide); }
.works li { border: 1px solid var(--rule); border-radius: 0.75rem; padding: 1rem; background: var(--surface); }
.works h3 { margin: 0.5rem 0 0.25rem; }
.works p { margin: 0 0 0.5rem; }
.slot { display: grid; place-items: center; min-height: 6rem; border: 2px dashed var(--border); border-radius: 0.5rem; color: var(--muted); font-size: 0.9rem; text-align: center; padding: 0.5rem; }

/* A screen with numbered pins over it. The pins are decoration (aria-hidden); the list after the screen says what
   each number is. Positions are percentages of the screen, per image, below. */
.shot { position: relative; width: fit-content; max-width: 100%; margin: 1rem 0; }
.shot .device { margin: 0; }
.shot .device.desktop img { width: 100%; }
.pins { list-style: none; margin: 0; padding: 0; }
.pins li { position: absolute; width: 1.6rem; height: 1.6rem; margin: -0.8rem 0 0 -0.8rem; border-radius: 50%; background: var(--tally); color: var(--surface); border: 2px solid var(--surface); font: 700 0.85rem/1.3rem var(--font); text-align: center; }
.keyed { padding-left: 1.6rem; }
.keyed li { margin-bottom: 0.3rem; }

.d-capture .p1 { left: 0%; top: 14%; } .d-capture .p2 { left: 60%; top: 0%; } .d-capture .p3 { left: 0%; top: 43%; }
.d-capture .p4 { left: 0%; top: 68%; } .d-capture .p5 { left: 0%; top: 92%; } .d-capture .p6 { left: 100%; top: 92%; }
.d-timer .p1 { left: 0%; top: 19%; } .d-timer .p2 { left: 0%; top: 42%; } .d-timer .p3 { left: 0%; top: 67%; }
.d-timer .p4 { left: 30%; top: 56%; } .d-timer .p5 { left: 100%; top: 67%; } .d-timer .p6 { left: 0%; top: 91%; }
.i-capture .p1 { left: 6%; top: 18%; } .i-capture .p2 { left: 6%; top: 27%; } .i-capture .p3 { left: 64%; top: 23%; }
.i-capture .p4 { left: 76%; top: 23%; } .i-capture .p5 { left: 95%; top: 23%; } .i-capture .p6 { left: 6%; top: 35%; }
.i-capture .p7 { left: 6%; top: 51%; }
.i-control .p1 { left: 6%; top: 16%; } .i-control .p2 { left: 4%; top: 25%; } .i-control .p3 { left: 40%; top: 25%; }
.i-control .p4 { left: 6%; top: 32%; } .i-control .p5 { left: 6%; top: 70%; } .i-control .p6 { left: 30%; top: 76%; }
.c-waiting .p1 { left: 8%; top: 61%; } .c-waiting .p2 { left: 37%; top: 9%; } .c-waiting .p3 { left: 17%; top: 26%; }
.c-waiting .p4 { left: 17%; top: 44%; } .c-waiting .p5 { left: 17%; top: 62%; }

/* The cheat sheet: cards in columns on a wide screen, one sheet of A4 on paper. */
.sheet { columns: 3 19rem; column-gap: 2rem; }
.sheet > section { break-inside: avoid; margin-bottom: 1.5rem; padding: 0; }
.sheet > #works-with { column-span: all; }
.sheet h2 { font-size: 1.25rem; margin: 0.5rem 0; }
.sheet .scroll { margin-bottom: 0.75rem; }
.sheet table { font-size: 0.95rem; }
.sheet .device.iphone { width: 14rem; }
.sheet .device.carplay { width: 24rem; }
.sheet .shot { margin-top: 0; }

@media print {
  @page { size: A4; margin: 9mm; }
  :root { --bg: #fff; --surface: #fff; --text: #000; --muted: #444; --rule: #ccc; --border: #888; }
  body { font-size: 7.6pt; line-height: 1.3; background: none; }
  section { padding: 0; }
  header.site, footer.site, .skip, .no-print { display: none; }
  main .wrap { max-width: none; padding: 0; }
  h1 { font-size: 15pt; margin: 0 0 1mm; }
  .lede { font-size: 8.5pt; margin: 0 0 2mm; }
  .sheet { columns: 3; column-gap: 5mm; }
  .sheet > section { margin-bottom: 1.5mm; }
  .sheet h2 { font-size: 9.5pt; margin: 1mm 0 0.5mm; }
  .sheet p, .sheet ul, .sheet ol { margin: 0 0 1mm; }
  .sheet li { margin-bottom: 0.2mm; }
  .sheet .scroll { overflow: visible; margin-bottom: 1mm; }
  .doc .sheet table { font-size: 7pt; line-height: 1.25; }
  .doc .sheet th, .doc .sheet td { padding: 0.3mm 2mm 0.3mm 0; }
  .doc .sheet td:first-child { min-width: 0; }
  .doc .sheet pre { padding: 1mm; font-size: 6.8pt; }
  .shot { margin: 0.5mm 0 1mm; }
  .sheet .device.iphone { width: 30mm; }
  .sheet .device.carplay { width: 58mm; }
  .sheet .device.desktop img { width: 58mm; }
  .pins li { width: 3.6mm; height: 3.6mm; margin: -1.8mm 0 0 -1.8mm; font-size: 6pt; line-height: 2.6mm; border-width: 0.4mm; }
  .keyed { padding-left: 4mm; }
  .works { grid-template-columns: repeat(3, 1fr); gap: 2mm; margin: 0; }
  .works li { padding: 1mm 2mm; display: grid; grid-template-columns: 6mm 1fr; gap: 0 2mm; align-items: center; }
  .works li img { width: 6mm; height: 6mm; grid-row: span 2; }
  .works h3 { font-size: 8pt; margin: 0; }
  .works .slot { display: none; }
  a { color: inherit; text-decoration: none; }
}