/* The one set of colours, type and motion, from the v.5 boards (design/v5). Everything else uses these
   variables, never raw colours. Shared pieces built on them are in shared.css. Dark is the set on :root;
   light (Soft, UI-9g: design/v5/light/) overrides the same variables further down, for Appearance:
   Light, and for Appearance: System while the Mac is light. js/theme.js sets <html data-theme> before
   the first paint. */

:root {
  color-scheme: dark;

  /* page and text: one hue, at different opacities. --faint is for placeholders, disabled and hints only */
  --bg: #0a0c11;
  --fg: rgba(255, 255, 255, .86);
  --fg-strong: rgba(255, 255, 255, .96);
  --muted: rgba(255, 255, 255, .56);
  --faint: rgba(255, 255, 255, .28);
  --placeholder: rgba(255, 255, 255, .32);
  --sep: rgba(255, 255, 255, .08);

  /* fills: quiet, selected, pressed. --card is a grouped card on the page */
  --fill: rgba(255, 255, 255, .07);
  --sel: rgba(255, 255, 255, .13);
  /* the browser's own text selection, for what shows a selection without text (a folded section's pill) */
  --sel-text: Highlight;
  /* the segmented pill draws --sel as one shape: solid ink, faded as a whole (shared.css, UI-9h), so
     the joins between its pieces can't show; --sel-a is --sel's alpha, --tint-a a mode tint's */
  --sel-a: .13;
  --ink: #fff;
  --tint-a: .26;
  --press: rgba(255, 255, 255, .18);
  --card: rgba(255, 255, 255, .04);

  /* one accent, one meaning: selection, primary action, focus ring */
  --accent: #7fb0ff;
  --accent-soft: rgba(127, 176, 255, .16);
  /* Ava's own blue, for Ava herself only. Notify pink is her Notify state only */
  --ava: #4c84ff;
  --notify: #ef6fd8;
  /* modes and status: always paired with a glyph or a word */
  --task: #ffb347;
  --drift: #ff6b5f;
  --break: #5fd4c8;
  --good: #63d68b;
  /* the same colours where they're words (labels, links, mode names, the clock, error lines): equal to
     them here, gently lifted toward contrast in light */
  --accent-text: var(--accent);
  --task-text: var(--task);
  --drift-text: var(--drift);
  --break-text: var(--break);
  --good-text: var(--good);
  /* tints of them: the primary action (accent, or a mode's colour), its hover and press, and soft marks */
  --pri: rgba(127, 176, 255, .26);
  --pri-hover: rgba(127, 176, 255, .34);
  --pri-press: rgba(127, 176, 255, .42);
  --task-pri: rgba(255, 179, 71, .26);
  --task-pri-hover: rgba(255, 179, 71, .34);
  --task-pri-press: rgba(255, 179, 71, .42);
  --drift-pri: rgba(255, 107, 95, .26);
  --break-pri: rgba(95, 212, 200, .26);
  --task-soft: rgba(255, 179, 71, .14);
  --drift-soft: rgba(255, 107, 95, .16);
  --good-soft: rgba(99, 214, 139, .14);
  --accent-ring: rgba(127, 176, 255, .7);
  --accent-ring-strong: rgba(127, 176, 255, .8);
  --accent-edge: rgba(127, 176, 255, .6);
  --drop-on: rgba(127, 176, 255, .18);
  --drift-edge: rgba(255, 107, 95, .7);
  --mark: rgba(255, 179, 71, .3);
  /* Find's matches in the note, and the lines they're on */
  --find-line: rgba(127, 176, 255, .09);
  --find-line-cur: rgba(127, 176, 255, .24);
  /* what sits on the accent's fill (a ticked box) */
  --on-accent: #0b0d12;
  /* the primary action's words */
  --pri-fg: var(--fg-strong);

  /* the floating layer's surfaces (.glass), and what stands in where blur can't or shouldn't */
  --glass-pane: rgba(28, 32, 42, .72);
  --glass-ctl: rgba(40, 45, 58, .6);
  --solid: #1b1f29;
  --solid-ctl: #232835;
  --solid-contrast: rgba(14, 16, 22, .95);
  /* menus and popovers over busy content: nearly solid, so what's behind doesn't read through */
  --glass-menu: rgba(27, 31, 41, .96);
  --drop: 0 8px 24px rgba(0, 0, 0, .3);
  /* a surface's edge under Increase Contrast */
  --hc-edge: rgba(255, 255, 255, .6);
  /* quieter neutrals: a row's hover in a card, an empty track, a spinner's ring and head, a field's ring */
  --hover-soft: rgba(255, 255, 255, .05);
  --track: rgba(255, 255, 255, .06);
  --bar-zero: rgba(255, 255, 255, .08);
  --spin-track: rgba(255, 255, 255, .22);
  --spin-head: rgba(255, 255, 255, .75);
  --ring-faint: rgba(255, 255, 255, .3);
  /* the page's colour fading out (over content scrolling under a bar) */
  --bg-92: rgba(10, 12, 17, .92);
  --bg-60: rgba(10, 12, 17, .6);
  --bg-0: rgba(10, 12, 17, 0);
  /* a sheet's scrim, and a preview's well inside it */
  --scrim: rgba(0, 0, 0, .4);
  --well: rgba(0, 0, 0, .28);
  /* the switch: its track when off, and its knob's small shadow */
  --switch-off: rgba(255, 255, 255, .16);
  --knob-drop: 0 1px 2px rgba(0, 0, 0, .3);
  /* the switch's knob, and the grip on the focus split bar */
  --knob: var(--fg-strong);
  --grip: #fff;
  --grip-drop: 0 2px 6px rgba(0, 0, 0, .5);

  /* type: words in the platform's own font; live numbers, Ava's lines and keys in mono */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;

  /* motion: springs sampled into linear(), no bounce */
  --ease: cubic-bezier(0.2, 0.15, 0.25, 1);
  --sp-smooth: linear(0, 0.0238, 0.0816, 0.1582, 0.2431, 0.3294, 0.4129, 0.4909, 0.562, 0.6256, 0.6819, 0.731, 0.7736, 0.8101, 0.8412, 0.8677, 0.89, 0.9088, 0.9246, 0.9377, 0.9487, 0.9578, 0.9653, 0.9716, 0.9767, 0.9809, 0.9844, 0.9873, 0.9896, 0.9916, 0.9931, 0.9944, 0.9955, 0.9963, 0.997, 0.9976, 1);
  --sp-snappy: linear(0, 0.0227, 0.08, 0.1588, 0.249, 0.3433, 0.4363, 0.5245, 0.6057, 0.6785, 0.7424, 0.7975, 0.8441, 0.8829, 0.9147, 0.9402, 0.9604, 0.976, 0.9878, 0.9965, 1.0026, 1.0067, 1.0092, 1.0106, 1.0111, 1.0109, 1.0104, 1.0096, 1.0086, 1.0075, 1.0065, 1.0055, 1.0046, 1.0038, 1.003, 1.0024, 1);

  /* the note's text colours and highlights */
  --tc-red: #ff7b72; --tc-orange: #f0a35e; --tc-green: #6fd08c; --tc-blue: #7fb2ff; --tc-purple: #c39bf5; --tc-gray: #97a3b1;
  --hl-yellow: #5a4c10; --hl-green: #1e4a2b; --hl-blue: #1d3a60; --hl-pink: #5a2442; --hl-orange: #5c3815;
  /* the tick in a checked checkbox (an image file: the CSP blocks data: images) */
  --check-img: url("/img/check-white.svg");

  /* The names the screens not yet rebuilt still use, on the new values. Runs UI-2 to UI-7 retire them. */
  --line: var(--sep);
  --tline: rgba(255, 255, 255, .18);
  --tedge: rgba(255, 255, 255, .12);
  --sheet: #14161b;
  --tab: var(--fill);
  --sel-bg: var(--sel);
  --ok: var(--good);
  --warn: var(--task);
  --danger: var(--drift);
}

/* Increase Contrast */
@media (prefers-contrast: more) {
  :root {
    --fg: #fff;
    --fg-strong: #fff;
    --muted: rgba(255, 255, 255, .78);
    --faint: rgba(255, 255, 255, .5);
    --placeholder: rgba(255, 255, 255, .5);
    --sep: rgba(255, 255, 255, .3);
    --fill: rgba(255, 255, 255, .14);
    --sel: rgba(255, 255, 255, .24);
    --sel-a: .24;
    --tline: rgba(255, 255, 255, .5);
    --tedge: rgba(255, 255, 255, .4);
  }
}

/* Light (Soft, UI-9g): the dark page's own blue-grey hue, never white or a neutral grey. Ink is the dark
   page's colour. The accent, Ava, notify and the mode colours keep their values for fills, bars, dots,
   tints, rings and the swarm; only where one is words does it take its lifted --*-text shade. Secondary
   text is ink .6, not the boards' .58, so it stays 4.5:1 on a selected row's fill too (the UI-9g audit).
   Two copies
   of one set, for Appearance: Light and for System while the Mac is light: keep them the same (a test
   checks). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eceef2;
  --fg: rgba(10, 12, 17, .82);
  --fg-strong: rgba(10, 12, 17, .9);
  --muted: rgba(10, 12, 17, .6);
  --faint: rgba(10, 12, 17, .32);
  --placeholder: rgba(10, 12, 17, .32);
  --sep: rgba(10, 12, 17, .1);
  --fill: rgba(10, 12, 17, .05);
  --sel: rgba(10, 12, 17, .08);
  --sel-a: .08;
  --ink: #0a0c11;
  --press: rgba(10, 12, 17, .12);
  --card: rgba(246, 247, 249, .9);
  --accent-text: #5b9aff;
  --task-text: #ff9a0b;
  --drift-text: #ff4d3f;
  --break-text: #34c2b3;
  --good-text: #36ca69;
  --glass-pane: rgba(246, 247, 250, .72);
  --glass-ctl: rgba(250, 251, 252, .66);
  --solid: #f7f8fa;
  --solid-ctl: #e4e7ec;
  --solid-contrast: rgba(247, 248, 250, .95);
  --glass-menu: rgba(247, 248, 250, .96);
  --drop: 0 8px 24px rgba(0, 0, 0, .06);
  --hc-edge: rgba(10, 12, 17, .6);
  --hover-soft: rgba(10, 12, 17, .04);
  --track: rgba(10, 12, 17, .06);
  --bar-zero: rgba(10, 12, 17, .08);
  --spin-track: rgba(10, 12, 17, .18);
  --spin-head: rgba(10, 12, 17, .7);
  --ring-faint: rgba(10, 12, 17, .3);
  --bg-92: rgba(236, 238, 242, .92);
  --bg-60: rgba(236, 238, 242, .6);
  --bg-0: rgba(236, 238, 242, 0);
  --scrim: rgba(10, 12, 17, .24);
  --well: rgba(10, 12, 17, .05);
  --switch-off: rgba(10, 12, 17, .14);
  --knob-drop: 0 1px 2px rgba(0, 0, 0, .15);
  --knob: #f7f8fa;
  --grip: #f7f8fa;
  --grip-drop: 0 2px 6px rgba(0, 0, 0, .18);
  --tc-red: #ff4235; --tc-orange: #eb8326; --tc-green: #41c167; --tc-blue: #428dff; --tc-purple: #a263ef; --tc-gray: #748497;
  --hl-yellow: #f3e3a3; --hl-green: #cfe9d6; --hl-blue: #cfe0f7; --hl-pink: #f4d3e4; --hl-orange: #f6dcc3;
  --tline: rgba(10, 12, 17, .14);
  --tedge: rgba(10, 12, 17, .1);
  --sheet: #f2f3f6;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: #eceef2;
    --fg: rgba(10, 12, 17, .82);
    --fg-strong: rgba(10, 12, 17, .9);
    --muted: rgba(10, 12, 17, .6);
    --faint: rgba(10, 12, 17, .32);
    --placeholder: rgba(10, 12, 17, .32);
    --sep: rgba(10, 12, 17, .1);
    --fill: rgba(10, 12, 17, .05);
    --sel: rgba(10, 12, 17, .08);
    --sel-a: .08;
    --ink: #0a0c11;
    --press: rgba(10, 12, 17, .12);
    --card: rgba(246, 247, 249, .9);
    --accent-text: #5b9aff;
    --task-text: #ff9a0b;
    --drift-text: #ff4d3f;
    --break-text: #34c2b3;
    --good-text: #36ca69;
    --glass-pane: rgba(246, 247, 250, .72);
    --glass-ctl: rgba(250, 251, 252, .66);
    --solid: #f7f8fa;
    --solid-ctl: #e4e7ec;
    --solid-contrast: rgba(247, 248, 250, .95);
    --glass-menu: rgba(247, 248, 250, .96);
    --drop: 0 8px 24px rgba(0, 0, 0, .06);
    --hc-edge: rgba(10, 12, 17, .6);
    --hover-soft: rgba(10, 12, 17, .04);
    --track: rgba(10, 12, 17, .06);
    --bar-zero: rgba(10, 12, 17, .08);
    --spin-track: rgba(10, 12, 17, .18);
    --spin-head: rgba(10, 12, 17, .7);
    --ring-faint: rgba(10, 12, 17, .3);
    --bg-92: rgba(236, 238, 242, .92);
    --bg-60: rgba(236, 238, 242, .6);
    --bg-0: rgba(236, 238, 242, 0);
    --scrim: rgba(10, 12, 17, .24);
    --well: rgba(10, 12, 17, .05);
    --switch-off: rgba(10, 12, 17, .14);
    --knob-drop: 0 1px 2px rgba(0, 0, 0, .15);
    --knob: #f7f8fa;
    --grip: #f7f8fa;
    --grip-drop: 0 2px 6px rgba(0, 0, 0, .18);
    --tc-red: #ff4235; --tc-orange: #eb8326; --tc-green: #41c167; --tc-blue: #428dff; --tc-purple: #a263ef; --tc-gray: #748497;
    --hl-yellow: #f3e3a3; --hl-green: #cfe9d6; --hl-blue: #cfe0f7; --hl-pink: #f4d3e4; --hl-orange: #f6dcc3;
    --tline: rgba(10, 12, 17, .14);
    --tedge: rgba(10, 12, 17, .1);
    --sheet: #f2f3f6;
  }
}
@media (prefers-contrast: more) {
  :root[data-theme="light"] {
    --fg: rgb(10, 12, 17);
    --fg-strong: rgb(10, 12, 17);
    --muted: rgba(10, 12, 17, .76);
    --faint: rgba(10, 12, 17, .5);
    --placeholder: rgba(10, 12, 17, .5);
    --sep: rgba(10, 12, 17, .32);
    --fill: rgba(10, 12, 17, .1);
    --sel: rgba(10, 12, 17, .16);
    --sel-a: .16;
    --tline: rgba(10, 12, 17, .5);
    --tedge: rgba(10, 12, 17, .4);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --fg: rgb(10, 12, 17);
    --fg-strong: rgb(10, 12, 17);
    --muted: rgba(10, 12, 17, .76);
    --faint: rgba(10, 12, 17, .5);
    --placeholder: rgba(10, 12, 17, .5);
    --sep: rgba(10, 12, 17, .32);
    --fill: rgba(10, 12, 17, .1);
    --sel: rgba(10, 12, 17, .16);
    --sel-a: .16;
    --tline: rgba(10, 12, 17, .5);
    --tedge: rgba(10, 12, 17, .4);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* One focus ring everywhere. Pieces with their own focus look (menu items, fields) override it. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.5 var(--font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* controls behave like controls: an arrow cursor and text that doesn't select */
button { font-family: inherit; cursor: default; }
nav, button, label, [role="toolbar"], [role="tablist"] { -webkit-user-select: none; user-select: none; }
input, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }

/* Scrollbars: thin and neutral */
* { scrollbar-width: thin; scrollbar-color: var(--press) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 5px; background: var(--press); background-clip: padding-box; }

@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
}