/* The docs in Ben's Sketchbook design system (sketchbook/sketchbook.css, a verbatim copy). That
   file is only switched on in the Sketchbook scheme; every rule here is scoped to it too, so Blue
   and Clean never see any of it. Here: the system's dark paper (it is light-only), docs.css's own
   card rules undone where the system's `.sk` surfaces take over, and the docs' pieces drawn with
   the system's tokens, lines and wobble filters. */

/* Dark: the system's tokens on the app's Sketchbook dark palette (ThemePalette.swift), so the same
   drawn look works on dark paper. Pastels stay; anything filled with one keeps dark ink on it. */
:root[data-mode="dark"][data-scheme="sketchbook"] {
  --paper: #1C2430;       /* app canvas */
  --paper-shade: #323E41; /* app inset (light paper-shade is the app's light inset too) */
  --paper-deep: #0A0E14;  /* the offset under a surface: darker than paper, like light's */
  --grid-dot: #273140;    /* as faint against dark paper as light's dots are against light */
  --ink: #FBF9F1;         /* app primary */
  --ink-soft: #C4CFD3;    /* app secondary */
  --ink-quiet: #A6B0BA;   /* app outline */
  --ink-faint: #5A6672;   /* rules and dashes, ~2:1 like light's */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"])[data-scheme="sketchbook"] {
    --paper: #1C2430;
    --paper-shade: #323E41;
    --paper-deep: #0A0E14;
    --grid-dot: #273140;
    --ink: #FBF9F1;
    --ink-soft: #C4CFD3;
    --ink-quiet: #A6B0BA;
    --ink-faint: #5A6672;
  }
}
/* Ink on a pastel fill, in either mode. */
:root[data-scheme="sketchbook"] { --ink-on-pastel: #26313D; }

/* docs.css's colour and font names, pointed at the system's (on body, so they beat the generated
   palette in both modes). */
:root[data-scheme="sketchbook"] body {
  --primary: var(--ink); --secondary: var(--ink-soft); --accent: var(--ink);
  --canvas: var(--paper); --panel: var(--paper); --inset: var(--paper-shade);
  --hairline: var(--ink-faint); --edge: var(--ink-faint);
  --font: var(--body); --font-round: var(--display);
}

/* Header: paper with a dashed rule; Appearance is the system's small button, its menu a drawn
   surface. */
:root[data-scheme="sketchbook"] .top { border-bottom: 1.4px dashed var(--ink-faint); }
:root[data-scheme="sketchbook"] .look > summary {
  color: var(--ink); font: 700 13px var(--body); padding: 7px 14px; border: 0; border-radius: 0; background: none;
}
:root[data-scheme="sketchbook"] .look-menu { background: none; border: 0; box-shadow: none; border-radius: 0; }
:root[data-scheme="sketchbook"] .look-menu legend { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); }
:root[data-scheme="sketchbook"] .look-menu input { accent-color: var(--ink); }
:root[data-scheme="sketchbook"] .menu { border: 0; background: none; box-shadow: none; }

/* Sidebar and On this page: mono labels like the system's eyebrows; the current page is selected
   (sky, the system's selected fill) inside a drawn edge. */
:root[data-scheme="sketchbook"] .side h2, :root[data-scheme="sketchbook"] .toc h2 {
  font: 600 11px/1.2 var(--mono); letter-spacing: .22em; color: var(--ink-soft);
}
:root[data-scheme="sketchbook"] .side a[aria-current] {
  position: relative; z-index: 0; background: none; border: 0; box-shadow: none; padding: .32rem .6rem;
  font-weight: 700; color: var(--ink-on-pastel);
}
:root[data-scheme="sketchbook"] .side a[aria-current]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sky);
  border: var(--line) solid var(--ink); border-radius: 10px 14px 9px 13px; filter: url(#w1);
}
:root[data-scheme="sketchbook"] .side a[aria-current] .sf { color: var(--ink-on-pastel); }
:root[data-scheme="sketchbook"] .toc ul { border-left: 1.4px dashed var(--ink-faint); }

/* Headings: the system's type, with the docs' spacing back (the system zeroes heading margins).
   An article title isn't a masthead: use the spec's "Display / 800" (46px) and "Display / 600"
   section heading (28px), not the masthead h1 (to 116px) and band h2 (to 42px). */
:root[data-scheme="sketchbook"] main h1 { margin: 0 0 .5rem; font-size: 46px; letter-spacing: -.04em; line-height: 1.05; }
:root[data-scheme="sketchbook"] main h2 { margin: 3.25rem 0 1rem; font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
:root[data-scheme="sketchbook"] main h3 { margin: 2rem 0 .6rem; }
:root[data-scheme="sketchbook"] h1 .sf { color: var(--ink); width: .6em; height: .6em; margin-right: .2em; vertical-align: .02em; }
:root[data-scheme="sketchbook"] .lede { margin-bottom: 2rem; line-height: 1.5; }

/* The swipe: on dark paper a multiply blend vanishes, so there it is laid under the word instead,
   with the word in dark ink. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"])[data-scheme="sketchbook"] .swipe { isolation: isolate; color: var(--ink-on-pastel); }
  :root:not([data-mode="light"])[data-scheme="sketchbook"] .swipe::before,
  :root:not([data-mode="light"])[data-scheme="sketchbook"] .swipe::after { mix-blend-mode: normal; z-index: -1; opacity: 1; }
  :root:not([data-mode="light"])[data-scheme="sketchbook"] .swipe::after { opacity: .6; }
}
:root[data-mode="dark"][data-scheme="sketchbook"] .swipe { isolation: isolate; color: var(--ink-on-pastel); }
:root[data-mode="dark"][data-scheme="sketchbook"] .swipe::before,
:root[data-mode="dark"][data-scheme="sketchbook"] .swipe::after { mix-blend-mode: normal; z-index: -1; opacity: 1; }
:root[data-mode="dark"][data-scheme="sketchbook"] .swipe::after { opacity: .6; }

/* Control names: mono key caps drawn like the system's pills (wobbled edge, hard offset). */
:root[data-scheme="sketchbook"] main code {
  position: relative; z-index: 0; font: 600 .8em var(--mono); padding: .14em .55em .1em; margin: 0 .1em;
  background: none; border: 0; box-shadow: none; border-radius: 0; color: var(--ink);
}
:root[data-scheme="sketchbook"] main code::before,
:root[data-scheme="sketchbook"] main code::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px 8px 5px 7px; }
:root[data-scheme="sketchbook"] main code::before { background: var(--ink); opacity: .22; transform: translate(2px, 2px); filter: url(#w2); }
:root[data-scheme="sketchbook"] main code::after { background: var(--paper); border: 1.3px solid var(--ink); filter: url(#w1); }

/* Numbered steps: a drawn mint dot, ink line, wobbled like the system's controls; the number sits
   on top unwobbled. */
:root[data-scheme="sketchbook"] main ol > li { isolation: isolate; }
:root[data-scheme="sketchbook"] main ol > li::before {
  background: none; border: 0; color: var(--ink-on-pastel); font: 800 15px/1 var(--display);
}
:root[data-scheme="sketchbook"] main ol > li::after {
  content: ""; position: absolute; left: 0; top: .05rem; width: 1.9rem; height: 1.9rem; z-index: -1;
  background: var(--mint); border: var(--line) solid var(--ink); border-radius: 50% 46% 52% 48%; filter: url(#w1);
}

/* Screenshots: a sketched surface with a narrow mat; the page's opening one is taped on. */
:root[data-scheme="sketchbook"] picture.shot { display: block; max-width: 40rem; padding: 10px; }
:root[data-scheme="sketchbook"] picture.shot img {
  max-width: 100%; padding: 0; border: 0; box-shadow: none; background: none; border-radius: 6px 8px 5px 7px;
}
:root[data-scheme="sketchbook"] figure.hero { position: relative; max-width: 40rem; margin-top: 2rem; }
:root[data-scheme="sketchbook"] figcaption { margin-top: .85rem; }

/* Callouts: the system's callout, its edge a pastel (Tip = mint, Heads up = apricot). */
:root[data-scheme="sketchbook"] .callout { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 1.75rem 0; }
:root[data-scheme="sketchbook"] .callout.tip { --edge: var(--mint); }
:root[data-scheme="sketchbook"] .callout.heads-up { --edge: var(--apricot); }
:root[data-scheme="sketchbook"] .callout strong:first-child { color: var(--ink); }

/* Tables: one sketched surface; mono column labels over an ink rule, dashed rows (the system's
   token table, with body text in the cells). */
:root[data-scheme="sketchbook"] .sk.table { margin: 1.5rem 0 1.75rem; padding: 16px 20px; }
:root[data-scheme="sketchbook"] .sk.table table { margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; font-size: 15px; }
@media (max-width: 760px) { :root[data-scheme="sketchbook"] main table, :root[data-scheme="sketchbook"] main .sk.table table { display: block; overflow-x: auto; } }
:root[data-scheme="sketchbook"] .sk.table th {
  background: none; font: 600 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
  padding: 0 14px 10px 0; border-bottom: 1.4px solid var(--ink);
}
:root[data-scheme="sketchbook"] .sk.table td { padding: 10px 14px 10px 0; border-bottom: 1px dashed var(--ink-faint); }
:root[data-scheme="sketchbook"] .sk.table tr:last-child td { border-bottom: 0; }

/* If it won't work / messages: one sketched card per list, dashed rules between questions. */
:root[data-scheme="sketchbook"] .faqs { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; padding: 6px 8px; margin: 1.25rem 0; }
:root[data-scheme="sketchbook"] .faq + .faq { border-top: 1px dashed var(--ink-faint); }
:root[data-scheme="sketchbook"] .faq summary { padding: .8rem 1rem; border-radius: 8px 11px 7px 10px; }
:root[data-scheme="sketchbook"] .faq summary:hover { background: var(--paper-shade); }
:root[data-scheme="sketchbook"] .faq summary::after { border-color: var(--ink-soft); }
:root[data-scheme="sketchbook"] .faq summary h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
:root[data-scheme="sketchbook"] .faq .answer { padding: 0 1rem 1rem; }

/* At a glance: a sketched card of label/value rows, like the system's type specimen. */
:root[data-scheme="sketchbook"] .facts { background: none; border: 0; border-radius: 0; box-shadow: none; margin-top: 3.5rem; }
:root[data-scheme="sketchbook"] .facts h2 { margin: 0 0 .5rem; font-size: 22px; letter-spacing: -.02em; }
:root[data-scheme="sketchbook"] .facts dl { gap: 0; font-size: 15px; }
:root[data-scheme="sketchbook"] .facts dd { padding-left: 1rem; }
:root[data-scheme="sketchbook"] .facts dt, :root[data-scheme="sketchbook"] .facts dd { padding: 9px 0; border-bottom: 1px dashed var(--ink-faint); }
:root[data-scheme="sketchbook"] .facts dt { font: 600 11px/1.9 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
:root[data-scheme="sketchbook"] .facts dt:last-of-type, :root[data-scheme="sketchbook"] .facts dd:last-of-type { border-bottom: 0; }

:root[data-scheme="sketchbook"] .anchor { color: var(--ink-faint); }
@media (max-width: 760px) {
  :root[data-scheme="sketchbook"] .facts dt { border-bottom: 0; padding-bottom: 0; }
}