/* bs — light, quiet, thumb-sized. The sigil column is the chrome: it is
   the syntax, drawn for real, and the only non-editable part of a row. */
/* Base is the tokens and the page; components are everything drawn;
   overrides are the switches that restyle whole components at once. A
   later layer wins whatever a rule's specificity. */
@layer base, components, overrides;

@layer base {
:root {
  /* The theme. A new one redefines these and everything else follows. */
  --bg: #fafaf7; --desk: #eae7df;                 /* a sheet, and what the sheets lie on */
  --ink: #222; --shade: #000;
  --accent: #2a6f4e; --warn: #b00020; --amber: #9a6d00;
  --fun: #2e7d32; --meh: #8a857a; --ugh: #6d4fa1; --alert: #2456a6;
  --hue-ink: oklch(45% .14 0);                    /* a note's ink; each note turns it to its --hue */
  --font: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --round: 1;                                     /* scales every rounded corner */
  /* Optional: --rubric, the red letter for § and today. Unset, they keep
     the sigil grey or the note's hue, and the accent. */

  /* Derived. A theme may still set one outright, e.g. a darker --dim. */
  --dim: color-mix(in oklab, var(--ink) 41%, var(--bg));
  --line: color-mix(in oklab, var(--desk), var(--ink) 2%);
  --chip: color-mix(in oklab, var(--bg), var(--accent) 5.5%);
  --well: color-mix(in oklab, var(--bg), var(--desk));   /* code, an estimate's unspent part */
  --spent: var(--accent);                         /* logged time */
  --wash: color-mix(in oklab, var(--ink) 6%, transparent);   /* the hover fill */
  --float: 0 2px 10px color-mix(in oklab, var(--shade) 13%, transparent);   /* under what floats over the page */
  /* ink bleed: colour seeps into paper, decelerating as it saturates */
  --bleed: .22s cubic-bezier(.3, .7, .3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.35 var(--font);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
} /* @layer base */

@layer components {
/* ── press feel ─────────────────────────────────────────────────── */
/* One transition and one hover wash for everything you can press. The
   wash is an inset shadow, so it lies over the element's own fill: a
   tab keeps its underline, a calendar day its load tint. Hover asks for
   a pointer: a tap leaves the state stuck on the button it lifted from. */
button, [role="button"] {
  cursor: pointer;
  transition: background-color var(--bleed), color var(--bleed),
    border-color var(--bleed), box-shadow var(--bleed), opacity var(--bleed);
}
button:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  :is(button, [role="button"]):not(:disabled):hover {
    box-shadow: inset 0 0 0 99em var(--wash);
  }
  /* an inline clickable takes no fill; it brightens to the accent */
  .row .fmt :is(.flink, .inst):hover, #toast.link:hover { color: var(--accent); }
  .row .sigil:hover { color: var(--ink); }
}
} /* @layer components */

@layer overrides {
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition: none !important; animation: none !important; }
}
} /* @layer overrides */