@layer components {
/* ── colour by file (⚙) ─────────────────────────────────────────── */
/* On by default. Every note has a hue (files.js noteHue) and wears it as
   ink, never as paper: its chip in the strip, its blocks on the day bar,
   its slot on a row's strip, its lines in the ▦ agenda. The accent keeps
   the interaction (hover, focus, the open chip) and the grey keeps the
   density ribbon and the logged line, so only the file colour is new.
   The colour a task or event carried says the file here; the box glyph
   is what tells the two apart. --hue is a note's hue (names.js noteHue),
   set on whatever speaks for one note: <body> for the shown note
   (files.js paintHues), a chip (files.js, cal.js), a pane (levelrow.js),
   a search or agenda line (find.js, cal.js, inline). */
body.hues {
  #files button { color: oklch(from var(--hue-ink) l c var(--hue)); }
  #files button.on { border-color: oklch(from var(--hue-ink) calc(l + .07) c var(--hue)); }
  #files button.newnote { color: var(--dim); }    /* + is no note, so it wears none */
  #files .nopen { background: oklch(from var(--hue-ink) calc(l + .46) calc(c * .43) var(--hue)); color: oklch(from var(--hue-ink) calc(l - .07) c var(--hue)); }
  #calnames button { color: oklch(from var(--hue-ink) l c var(--hue)); border-color: oklch(from var(--hue-ink) calc(l + .15) c var(--hue)); }
  #calnames button.off { color: var(--dim); border-color: var(--line); }
  .cday .cev { color: oklch(from var(--hue-ink) l c var(--hue)); }
  .cstrip .cbar { background: oklch(from var(--hue-ink) calc(l + .1) c var(--hue) / .55); }
  .cstrip .cbar.pt { background: oklch(from var(--hue-ink) l c var(--hue) / .85); }
  .aev, .aev .aat { color: oklch(from var(--hue-ink) l c var(--hue)); }
  .aev.span, .aev.task.done { color: var(--dim); }
  .pane .row[data-kind="heading"] { color: oklch(from var(--hue-ink) calc(l - .05) calc(c * .85) var(--hue)); }
  /* under every state a sigil wears (folded, priority, drop target) */
  :where(.pane .row[data-kind="heading"]) .sigil { color: var(--rubric, oklch(from var(--hue-ink) calc(l + .17) calc(c * .65) var(--hue))); }
}
/* A row running along the notes holds several, so each sheet names its
   note on a coloured top edge. Otherwise a row is one note and one colour. */
[data-along~="name"] .pane {
  border-top: 3px solid var(--line);

  .panehead::before {
    content: attr(data-name); position: absolute; top: .1rem; right: .55rem; z-index: 5;
    font-size: .72rem; font-weight: 600; color: var(--dim);
  }
}
body.hues [data-along~="name"] .pane {
  border-top-color: oklch(from var(--hue-ink) calc(l + .17) c var(--hue));
  .panehead::before { color: oklch(from var(--hue-ink) l c var(--hue)); }
}
} /* @layer components */