/* Interface kit: glyphs (see kit.css for the other two parts).
   Every status mark in the interface is a short run of text set in Departure Mono, and every one of
   them sits next to a word, so colour is never the only signal. This file is the single place that
   says which mark means what; each rule lists every selector that shows that mark.
   The second `content` line gives the mark empty alt text, so screen readers skip it; browsers that
   don't support that syntax drop the line and keep the first.

   [+] good / done      [-] acceptable      [!] needs work / error     [i] information
   [/] unavailable      [ ] not yet         [>] ready / current        [=] paused
   [.] waiting          [x] ticked          (*) selected option        ( ) other option
   [►] go: the beep has sounded, the draw is on
   ~   rough estimate from this camera view (written into the text by the scripts)
   [▖] working: the spinner (motion.js spin() writes the frame into data-f)
   ► / ▼  a disclosure, shut / open        ↕ ▲ ▼  a sortable column: unsorted / up / down

   The status line (.dot) takes its mark from a tone class: ready, go, good, work, info, pause; no
   tone is "waiting". A tone names a meaning, never a colour.
*/

.glyph, .gunIcon { display: inline-block; flex: 0 0 auto; margin-right: 1ch; white-space: pre; font-family: var(--mono); }
/* A mark never breaks across lines ("[ ]" and "( )" contain a space). */
.chip > summary::before, .dot::before, .cue::before, .check::before, .framing span::before, .seg span::before, h2::before, .k-notice::before, [class*="g-"]::before { white-space: pre; }

/* good */
.g-good::before, .chip.good > summary::before, .dot.good::before, .cue.good::before, .k-notice.good::before {
  content: "[+]"; content: "[+]" / ""; color: var(--good);
}
/* acceptable */
.g-ok::before, .chip.ok > summary::before { content: "[-]"; content: "[-]" / ""; color: var(--ok); }
/* needs work / error */
.g-work::before, .chip.work > summary::before, .dot.work::before, .k-notice.work::before { content: "[!]"; content: "[!]" / ""; color: var(--work); }
/* information */
.g-info::before, .g-style::before, .chip.info > summary::before, .chip.style > summary::before, .dot.info::before, .k-notice::before { content: "[i]"; content: "[i]" / ""; color: var(--muted); }
/* unavailable */
.g-off::before { content: "[/]"; content: "[/]" / ""; color: var(--muted); }
/* not yet */
.g-pending::before { content: "[ ]"; content: "[ ]" / ""; color: var(--muted); }
/* ready / current */
.g-current::before, .dot.ready::before { content: "[>]"; content: "[>]" / ""; color: var(--text); }
/* paused */
.g-pause::before, .dot.pause::before { content: "[=]"; content: "[=]" / ""; color: var(--ok); }
/* go: the beep */
.g-go::before, .dot.go::before { content: "[►]"; content: "[►]" / ""; color: var(--mark); }
/* waiting (the status line's default) */
.dot::before { content: "[.]"; content: "[.]" / ""; color: var(--ok); }
.g-wait::before { content: "[.]"; content: "[.]" / ""; color: var(--ok); }

/* working: a spinner frame inside the brackets, so the mark keeps its width */
.dot[data-f]::before, .g-busy[data-f]::before { content: "[" attr(data-f) "]"; content: "[" attr(data-f) "]" / ""; color: var(--text); }

/* ticked / not ticked: checkboxes and the framing checklist */
.check::before, .framing span::before { content: "[ ]"; content: "[ ]" / ""; color: var(--muted); }
.check:has(input:checked)::before { content: "[x]"; content: "[x]" / ""; color: var(--good); }
.framing span.on::before { content: "[x]"; content: "[x]" / ""; color: var(--good); }

/* segmented choices */
.seg span::before { content: "( )"; content: "( )" / ""; margin-right: 1ch; }
.seg input:checked + span::before { content: "(*)"; content: "(*)" / ""; }

/* the section rule after each heading */
h2::before { content: "──"; content: "──" / ""; color: var(--faint); }
h2::after {
  content: "────────────────────────────────────────────────────────────────────────────────────────────────────";
  content: "────────────────────────────────────────────────────────────────────────────────────────────────────" / "";
  color: var(--faint); flex: 1 1 0; min-width: 0; overflow: hidden;
  contain: inline-size; /* the rule fills what's left and never widens its container */
}

/* back link */
.back::before { content: "< "; content: "< " / ""; }