/* content/hues.css

   One twelve-colour rainbow: pure hues, 30 deg apart round the wheel at
   full saturation (red, orange, yellow, chartreuse, green, spring, cyan,
   azure, blue, violet, magenta, rose). Lightness 50% on the dark page; 38%
   on the light one, where full-lightness yellow and green would vanish into
   white. Three roles:
   - article headings: the pure colours, a little lighter on the dark page
     (below); big text carries full saturation well. Acord's heading
     colours (--hN-color in acord.css) apply only without the script;
   - the contents list: one colour per indent step, each heading's hue, so
     a heading and its entry always match; the heading's own colour where
     the entry is big, its tone (greyed, same lightness) where small (below);
   - list groups and diagram frames: the article's colours.
   huewheel.js walks the wheel 5 slots at a time from random starts, chosen
   again on every load, so neighbours never look alike. */

:root {
    --wheel-0:  hsl(0 100% 38%);
    --wheel-1:  hsl(30 100% 38%);
    --wheel-2:  hsl(60 100% 30%);
    --wheel-3:  hsl(90 100% 30%);
    --wheel-4:  hsl(120 100% 30%);
    --wheel-5:  hsl(150 100% 32%);
    --wheel-6:  hsl(180 100% 32%);
    --wheel-7:  hsl(210 100% 40%);
    --wheel-8:  hsl(240 100% 50%);
    --wheel-9:  hsl(270 100% 45%);
    --wheel-10: hsl(300 100% 38%);
    --wheel-11: hsl(330 100% 40%);
}

body.dark-mode {
    --wheel-0:  hsl(0 100% 50%);
    --wheel-1:  hsl(30 100% 50%);
    --wheel-2:  hsl(60 100% 50%);
    --wheel-3:  hsl(90 100% 50%);
    --wheel-4:  hsl(120 100% 50%);
    --wheel-5:  hsl(150 100% 50%);
    --wheel-6:  hsl(180 100% 50%);
    --wheel-7:  hsl(210 100% 50%);
    --wheel-8:  hsl(240 100% 50%);
    --wheel-9:  hsl(270 100% 50%);
    --wheel-10: hsl(300 100% 50%);
    --wheel-11: hsl(330 100% 50%);
}

/* The contents wheel: 21 pure hues, 360/21 degrees apart, same saturation
   and lightness rules as the twelve above (light-page lightness taken from
   the twelve, between their hues). The contents list and the headings that
   match it use these (huewheel.js); groups and frames keep the twelve. */
:root {
    --tw-0: hsl(0 100% 38%);
    --tw-1: hsl(17.14 100% 38%);
    --tw-2: hsl(34.29 100% 37%);
    --tw-3: hsl(51.43 100% 32%);
    --tw-4: hsl(68.57 100% 30%);
    --tw-5: hsl(85.71 100% 30%);
    --tw-6: hsl(102.86 100% 30%);
    --tw-7: hsl(120 100% 30%);
    --tw-8: hsl(137.14 100% 31%);
    --tw-9: hsl(154.29 100% 32%);
    --tw-10: hsl(171.43 100% 32%);
    --tw-11: hsl(188.57 100% 34%);
    --tw-12: hsl(205.71 100% 39%);
    --tw-13: hsl(222.86 100% 44%);
    --tw-14: hsl(240 100% 50%);
    --tw-15: hsl(257.14 100% 47%);
    --tw-16: hsl(274.29 100% 44%);
    --tw-17: hsl(291.43 100% 40%);
    --tw-18: hsl(308.57 100% 39%);
    --tw-19: hsl(325.71 100% 40%);
    --tw-20: hsl(342.86 100% 39%);
}

body.dark-mode {
    --tw-0: hsl(0 100% 50%);
    --tw-1: hsl(17.14 100% 50%);
    --tw-2: hsl(34.29 100% 50%);
    --tw-3: hsl(51.43 100% 50%);
    --tw-4: hsl(68.57 100% 50%);
    --tw-5: hsl(85.71 100% 50%);
    --tw-6: hsl(102.86 100% 50%);
    --tw-7: hsl(120 100% 50%);
    --tw-8: hsl(137.14 100% 50%);
    --tw-9: hsl(154.29 100% 50%);
    --tw-10: hsl(171.43 100% 50%);
    --tw-11: hsl(188.57 100% 50%);
    --tw-12: hsl(205.71 100% 50%);
    --tw-13: hsl(222.86 100% 50%);
    --tw-14: hsl(240 100% 50%);
    --tw-15: hsl(257.14 100% 50%);
    --tw-16: hsl(274.29 100% 50%);
    --tw-17: hsl(291.43 100% 50%);
    --tw-18: hsl(308.57 100% 50%);
    --tw-19: hsl(325.71 100% 50%);
    --tw-20: hsl(342.86 100% 50%);
}

/* Article colours (headings, list groups, diagram frames) are the rainbow a
   little lighter: OKLab lightness taken a quarter of the way to white, hue
   and chroma kept, on the dark page; unchanged on the light one. Without
   relative colour syntax, a light white mix. */
:root { --lift-k: 0; }
body.dark-mode { --lift-k: .25; }

:is(.main-content, .preview-content) :is(h1, h2, h3, h4, h5, h6)[style] {
    --hs: var(--hc);
    color: var(--hs);
}
body.dark-mode :is(.main-content, .preview-content) :is(h1, h2, h3, h4, h5, h6)[style] {
    --hs: color-mix(in oklab, var(--hc) 80%, white);
}
.main-content > h2[style],
.preview-content > h2[style] {
    border-top-color: color-mix(in srgb, var(--hs) 25%, transparent);
}
.main-content > h3[style],
.preview-content > h3[style] {
    border-left-color: var(--hs);
}

/* A contents entry takes its indent step's slot (huewheel.js), the same hue
   as its heading, in a colour that depends on how big the entry is in the
   real world. Big entries take the heading's own colour, the pure hue
   (lightened on the dark page exactly as the headings are). Small entries
   take its tone: the same colour mixed with a grey of its own lightness,
   so only the saturation drops (to --toc-tone of it) and nothing gets
   darker or lighter. --big (0..1, huewheel.js, from the entry's size)
   blends the two. Full strength in every state: reading.css mixes the
   entry colour toward grey or the text colour, which the rule below
   undoes. Back matter keeps its own muted rule. */
:root { --toc-tone: .5; }
.toc li[style],
.drawer-toc li[style] {
    --toc-big: var(--hc);
    --toc-small: color-mix(in oklab, var(--hc) 55%, #808080);
    --toc-hue: color-mix(in oklab, var(--toc-big) calc(var(--big, 1) * 100%), var(--toc-small));
}
body.dark-mode .toc li[style],
body.dark-mode .drawer-toc li[style] {
    --toc-big: color-mix(in oklab, var(--hc) 80%, white);
}
@supports (color: oklch(from red l c h)) {
    .toc li[style],
    .drawer-toc li[style] {
        --toc-big: oklch(from var(--hc) calc(l + (1 - l) * var(--lift-k)) c h);
        --toc-small: oklch(from var(--toc-big) l calc(c * var(--toc-tone)) h);
    }
}
.main-content .toc li > a,
.main-content .toc li > a:hover,
.main-content .toc li.in-path > a,
.mobile .drawer-toc li > a,
.mobile .drawer-toc li.in-path > a {
    color: var(--toc-hue);
}

/* --------------------------------------------------------------------------
   List groups: a top-level item that holds a sub-list ("Current IN" and its
   three outputs). The group is a faint panel in its own colour (--gc), its
   head a plain label in that colour. Each child has its own stretch of line
   down its left side, indented from the label, in the child's colour (--cc,
   huewheel.js): every group's first child shares one colour, every second
   child the next, so the ones, twos and threes read across groups. The
   stretches join into one line; the last ends with its child. A child's
   lead term ("Flux OUT") sits on its own line in that colour.
   -------------------------------------------------------------------------- */

:is(.main-content, .preview-content) > :is(ul, ol):has(> li.md-group) {
    list-style: none;
    padding-left: 0;
}

.md-group {
    --gc: color-mix(in oklab, var(--hc, var(--ac-sky)) 85%, white);
    --line: 2px;
    --pad: 1.1em;
    --indent: 1em;
    margin-bottom: 1.8em;
    padding: .9em 1.2em .5em;
    border-radius: 12px;
    background: color-mix(in srgb, var(--gc) 5%, transparent);
}

.md-group > p:first-child {
    margin: 0 0 .2em;
    font-size: 1.08em;
    font-weight: 700;
    color: var(--gc);
}

.md-group > :is(ul, ol) {
    list-style: none;
    margin: 0 0 0 var(--indent);
    padding-left: var(--pad);
}
.md-group > :is(ul, ol) > li {
    --cc: color-mix(in oklab, var(--child, var(--hc, var(--ac-sky))) 85%, white);
    position: relative;
    margin-bottom: .9em;
}
.md-group > :is(ul, ol) > li > p {
    margin: .2em 0;
}
.md-group > :is(ul, ol) > li::before {
    content: '';
    position: absolute;
    left: calc(0px - var(--pad));
    top: .25em;
    bottom: -.65em;
    width: var(--line);
    border-radius: var(--line);
    background: var(--cc);
}
.md-group > :is(ul, ol) > li:last-child::before {
    bottom: 0;
}

.md-lead {
    display: block;
    font-weight: 650;
    color: var(--cc, var(--hc, var(--h3-color)));
}
.md-lead .md-lead-colon {
    display: none;
}

.mobile .md-group {
    --pad: .8em;
    --indent: .5em;
    padding: .7em .8em .3em;
}

/* A link in a list group's contents label: looks like a link and shows its
   URL on hover (toclabel.go), but the entry still jumps to the article. */
.toc .toc-hint,
.drawer-toc .toc-hint {
    color: var(--link-color);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

/* Contents indents: headings take the even steps and list groups the odd
   ones between (toc.go), so each step is half a heading indent. These
   override the per-level paddings in reading.css. */
.main-content .toc li.toc-l1 > a, .mobile .drawer-toc li.toc-l1 > a { padding-left: .65em; }
.main-content .toc li.toc-l2 > a, .mobile .drawer-toc li.toc-l2 > a { padding-left: 1.3em; font-size: inherit; }
.main-content .toc li.toc-l3 > a, .mobile .drawer-toc li.toc-l3 > a { padding-left: 1.95em; }
.main-content .toc li.toc-l4 > a, .mobile .drawer-toc li.toc-l4 > a { padding-left: 2.6em; }
.main-content .toc li.toc-l5 > a, .mobile .drawer-toc li.toc-l5 > a { padding-left: 3.25em; }
.main-content .toc li.toc-l6 > a, .mobile .drawer-toc li.toc-l6 > a { padding-left: 3.9em; }
.main-content .toc li.toc-l7 > a, .mobile .drawer-toc li.toc-l7 > a { padding-left: 4.55em; }

/* Every figure image gets a 2px ring in a rainbow colour (huewheel.js),
   lightened like the headings. A ring rather than a border so the image
   keeps its size.
   - A framed diagram (svgart.go: an SVG whose canvas-sized rounded frame
     has no outline, or a files-portal picture): the ring sits on the frame,
     its corners matched to the SVG's own through an inline border-radius.
   - Any other SVG: the ring sits on its box, which is its viewBox.
   - Anything else (photos, screenshots): a little padding inside the ring,
     so it frames the content rather than cutting into it.
   Kept at the lowest specificity (:where) so a post's own sheet, which
   loads after this one, always wins (gradiometer.css shapes its icon). */
:where(.main-content, .preview-content) :where(.md-figure) img {
    --fs: color-mix(in oklab, var(--hc, var(--ac-overlay1)) 85%, white);
    box-shadow: 0 0 0 2px var(--fs);
    border-radius: 10px;
    box-sizing: border-box;
    padding: .6em;
}
:where(.main-content, .preview-content) :where(.md-figure) img:where(.svg-art, .svg-framed, [src$=".svg"], [src*=".svg?"]) {
    padding: 0;
}

@supports (color: oklch(from red l c h)) {
    :where(.main-content, .preview-content) :where(.md-figure) img:where([style*="--hc"]) {
        --fs: oklch(from var(--hc) calc(l + (1 - l) * var(--lift-k)) c h);
    }
    body.dark-mode :is(.main-content, .preview-content) :is(h1, h2, h3, h4, h5, h6)[style] {
        --hs: oklch(from var(--hc) calc(l + (1 - l) * var(--lift-k)) c h);
    }
    .md-group {
        --gc: oklch(from var(--hc, var(--ac-sky)) calc(l + (1 - l) * var(--lift-k)) c h);
    }
    .md-group > :is(ul, ol) > li {
        --cc: oklch(from var(--child, var(--hc, var(--ac-sky))) calc(l + (1 - l) * var(--lift-k)) c h);
    }
}

/* The page sets -webkit-font-smoothing: antialiased (default.css), which on
   macOS turns off the slight stem thickening the system gives text; light
   small text on the dark page then renders thin and washy. The contents list
   is all small text, so it keeps the system's own rendering. Other systems
   ignore the property. */
.toc,
.drawer-toc {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}