/* Lightwork — the shared design language for Tasks, Tutoring, Marginalia and Lexis.

   Source of truth: "Claude Projects/Design language/lightwork/". Each app carries a
   copy at public/vendor/lightwork/ — run sync.sh here to push changes out. Never edit
   a copy.

   What this file is: the tokens (light and the one night palette), the type faces,
   and the handful of components that look the same in all four apps. Each app maps
   its own variable names onto these tokens in its own stylesheet (see README.md),
   so the app's selectors keep working and only the values move.

   Rules the tokens encode (Design language.md §2):
   - colour means a state: --act is "you can act on this", --warn "needs you",
     --wait "waiting", --good "done". Nothing else wears a signal colour.
   - the eyebrow (a small uppercase label naming a section) is faint grey, never cyan.
   - monospace is for addresses only: page numbers, timestamps, cite keys, keys.
   - icons before words on controls; every icon-only control carries a tooltip. */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/dm-sans/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/dm-sans/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* New York is Apple's system serif. Safari reaches it through ui-serif; Chromium only
   by the installed names, so both are listed. */
@font-face { font-family: 'New York'; src: local('NewYork-Regular'), local('NewYork'), local('New York'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'New York'; src: local('NewYork-RegularItalic'), local('NewYork-Italic'), local('New York Italic'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'New York'; src: local('NewYork-Medium'), local('NewYorkMedium'), local('New York Medium'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'New York'; src: local('NewYork-Semibold'), local('NewYorkSemibold'), local('New York Semibold'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'New York'; src: local('NewYork-Bold'), local('NewYorkBold'), local('New York Bold'); font-weight: 700; font-style: normal; }

/* ---------- tokens: light ---------- */
:root {
  /* surfaces */
  --lw-paper: #f0ebe3;      /* page */
  --lw-panel: #faf7f3;      /* cards, inputs on paper */
  --lw-panel-2: #e8e2d9;    /* sidebar, a card's inner band, hover on rows */
  --lw-line: #d8d2c8;       /* every hairline */
  --lw-field: #fffdfa;      /* text fields */
  /* ink */
  --lw-ink: #575279;
  --lw-ink-soft: #746f8e;
  --lw-ink-faint: #9490aa;
  --lw-ink-ghost: #c4bfd4;  /* disabled, the faintest rule */
  /* signal */
  --lw-act: #286983;        /* pine: you can act on this */
  --lw-act-hover: #1f5468;
  --lw-act-soft: #e1e9ec;   /* wash behind a selected thing */
  --lw-good: #4f7a45;
  --lw-good-soft: #e3ecda;
  --lw-warn: #b4637a;       /* rose: needs you */
  --lw-warn-soft: #f3e3e7;
  --lw-wait: #b07d2e;       /* gold: waiting */
  --lw-wait-soft: #f1e6cf;
  /* brand hues: wordmark, Launcher dot, phone icon. Never an action colour. */
  --lw-brand-tasks: #3a9b9b;
  --lw-brand-tutoring: #0c9fcd;
  --lw-brand-marginalia: #286983;
  --lw-brand-lexis: #7a3e9d;
  --lw-brand-journal: #b86a4b;
  --lw-brand-mise: #c0533f;     /* paprika */
  /* type */
  --lw-font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --lw-font-display: ui-serif, 'New York', 'Iowan Old Style', Charter, Georgia, serif;
  --lw-font-mono: ui-monospace, 'SF Mono', Menlo, 'IBM Plex Mono', monospace;
  /* shape */
  --lw-radius: 6px;
  --lw-radius-sm: 3px;
  --lw-radius-lg: 10px;
  --lw-shadow: 0 1px 2px rgba(87, 82, 121, .06);
  --lw-shadow-pop: 0 8px 28px rgba(40, 30, 60, .18);
  --lw-on-act: #ffffff;     /* text on a filled --act / --warn / --good button */
  color-scheme: light;
}

/* ---------- tokens: night (one palette for all four) ---------- */
:root[data-theme="dark"] {
  --lw-paper: #1a1726; --lw-panel: #242038; --lw-panel-2: #15132a; --lw-line: #3a3550; --lw-field: #1f1b30;
  --lw-ink: #d6d1e8; --lw-ink-soft: #9a95b3; --lw-ink-faint: #6f6a88; --lw-ink-ghost: #4a4660;
  --lw-act: #6cb6cf; --lw-act-hover: #8ccbe0; --lw-act-soft: #1f3440;
  --lw-good: #8fc98a; --lw-good-soft: #22331f;
  --lw-warn: #eb9bb0; --lw-warn-soft: #3a2630;
  --lw-wait: #d4b25a; --lw-wait-soft: #3a3120;
  --lw-brand-tasks: #4cb5b5; --lw-brand-tutoring: #5cc3e6; --lw-brand-marginalia: #6cb6cf; --lw-brand-lexis: #c9a6e6; --lw-brand-journal: #e0987a; --lw-brand-mise: #e8846f;
  --lw-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --lw-shadow-pop: 0 8px 28px rgba(0, 0, 0, .5);
  --lw-on-act: #141220;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lw-paper: #1a1726; --lw-panel: #242038; --lw-panel-2: #15132a; --lw-line: #3a3550; --lw-field: #1f1b30;
    --lw-ink: #d6d1e8; --lw-ink-soft: #9a95b3; --lw-ink-faint: #6f6a88; --lw-ink-ghost: #4a4660;
    --lw-act: #6cb6cf; --lw-act-hover: #8ccbe0; --lw-act-soft: #1f3440;
    --lw-good: #8fc98a; --lw-good-soft: #22331f;
    --lw-warn: #eb9bb0; --lw-warn-soft: #3a2630;
    --lw-wait: #d4b25a; --lw-wait-soft: #3a3120;
    --lw-brand-tasks: #4cb5b5; --lw-brand-tutoring: #5cc3e6; --lw-brand-marginalia: #6cb6cf; --lw-brand-lexis: #c9a6e6; --lw-brand-journal: #e0987a; --lw-brand-mise: #e8846f;
    --lw-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --lw-shadow-pop: 0 8px 28px rgba(0, 0, 0, .5);
    --lw-on-act: #141220;
    color-scheme: dark;
  }
}

/* ---------- components ----------
   Prefixed lw- so nothing collides with an app's own classes. An app may use these
   directly or restyle its own selectors to match; the mockups in
   "Icons and joy.html" show each one. */

/* Eyebrow: the small uppercase label above a section. Faint grey, never cyan. */
.lw-eyebrow {
  font: 700 11px/1 var(--lw-font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--lw-ink-faint); margin: 0 0 8px;
}

/* Page head: serif title, one grey line under it, actions on the right. */
.lw-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.lw-page-head h1, .lw-page-head h2 { font: 600 27px/1.15 var(--lw-font-display); margin: 0; font-variant-numeric: oldstyle-nums; letter-spacing: -.01em; }
.lw-page-head .lw-sub { color: var(--lw-ink-faint); font-size: 13px; margin: 3px 0 0; }
.lw-page-head .lw-sub b { color: var(--lw-ink); font-weight: 600; font-variant-numeric: oldstyle-nums; }
.lw-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Day line: the date in old-style figures and one line of numbers under it. */
.lw-dayline h1, .lw-dayline h2 { font: 600 30px/1.1 var(--lw-font-display); margin: 0 0 4px; font-variant-numeric: oldstyle-nums; }
.lw-dayline p { margin: 0; color: var(--lw-ink-soft); font-size: 14px; }
.lw-dayline p b { color: var(--lw-ink); font-weight: 600; font-variant-numeric: oldstyle-nums; }

/* Buttons. Primary wears --act; ghost is outlined; quiet is a panel-coloured pill. */
.lw-btn {
  font: 600 13px/1 var(--lw-font-ui); display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--lw-radius); border: 1px solid transparent;
  background: var(--lw-act); color: var(--lw-on-act); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
@media (hover: hover) { .lw-btn:hover { background: var(--lw-act-hover); } }
.lw-btn.is-ghost { background: transparent; color: var(--lw-act); border-color: var(--lw-act); }
@media (hover: hover) { .lw-btn.is-ghost:hover { background: var(--lw-act-soft); } }
.lw-btn.is-quiet { background: var(--lw-panel); color: var(--lw-ink); border-color: var(--lw-line); font-weight: 500; }
@media (hover: hover) { .lw-btn.is-quiet:hover { background: var(--lw-panel-2); } }
.lw-btn.is-danger { background: var(--lw-warn); }
.lw-btn:disabled { opacity: .5; cursor: default; }
.lw-btn svg { width: 15px; height: 15px; stroke-width: 1.75; }

/* Icon button: 30px square, tooltip from data-tip (and data-key for the shortcut).
   Grey at rest; --act when on or primary; --warn only for delete.
   Always give it aria-label as well — the tooltip is not read aloud. */
.lw-ib {
  position: relative; width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--lw-radius); border: 1px solid var(--lw-line);
  background: var(--lw-panel); color: var(--lw-ink-soft); cursor: pointer; padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.lw-ib svg, .lw-ib i { width: 18px; height: 18px; stroke-width: 1.75; }
@media (hover: hover) { .lw-ib:hover { color: var(--lw-ink); background: var(--lw-panel-2); } }
.lw-ib.is-bare { border-color: transparent; background: transparent; }
@media (hover: hover) { .lw-ib.is-bare:hover { background: var(--lw-panel-2); } }
.lw-ib.is-on, .lw-ib[aria-pressed="true"] { background: var(--lw-act-soft); color: var(--lw-act); border-color: transparent; }
.lw-ib.is-primary { background: var(--lw-act); color: var(--lw-on-act); border-color: transparent; }
@media (hover: hover) { .lw-ib.is-primary:hover { background: var(--lw-act-hover); } }
.lw-ib.is-danger { color: var(--lw-warn); }
@media (hover: hover) { .lw-ib.is-danger:hover { background: var(--lw-warn-soft); } }
.lw-ib.is-sm { width: 24px; height: 24px; }
.lw-ib.is-sm svg, .lw-ib.is-sm i { width: 15px; height: 15px; }
.lw-ib:focus-visible, .lw-btn:focus-visible { outline: 2px solid var(--lw-act); outline-offset: 2px; }

/* Tooltip: any element with data-tip shows it below on hover/focus, after a pause.
   data-key adds the shortcut. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-2px);
  background: var(--lw-ink); color: var(--lw-paper); font: 500 12px/1 var(--lw-font-ui); letter-spacing: 0; text-transform: none;
  padding: 6px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none; z-index: 40;
  opacity: 0; transition: opacity .12s ease .35s, transform .12s ease .35s;
}
[data-tip][data-key]::after { content: attr(data-tip) "   " attr(data-key); }
@media (hover: hover) { [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } }
[data-tip].tip-left::after { left: auto; right: 0; transform: translateX(0) translateY(-2px); }
@media (hover: hover) { [data-tip].tip-left:hover::after { transform: translateX(0) translateY(0); } }
[data-tip].tip-up::after { top: auto; bottom: calc(100% + 6px); }
/* No tooltips on a touch screen: iOS treats a tap on something that changes on hover
   as the hover first, so the first tap would never be the click. */
@media (hover: none) { [data-tip]::after { display: none; } }

/* Segmented control: one row of equal options, icon-only or icon+word. */
.lw-seg { display: inline-flex; border: 1px solid var(--lw-line); border-radius: var(--lw-radius); background: var(--lw-panel); }
/* no overflow:hidden here, so a child's data-tip tooltip can show; the ends are rounded instead */
.lw-seg > *:first-child { border-radius: calc(var(--lw-radius) - 1px) 0 0 calc(var(--lw-radius) - 1px); }
.lw-seg > *:last-child { border-radius: 0 calc(var(--lw-radius) - 1px) calc(var(--lw-radius) - 1px) 0; }
.lw-seg > * {
  font: 500 12.5px/1 var(--lw-font-ui); display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border: 0; border-right: 1px solid var(--lw-line); background: transparent;
  color: var(--lw-ink-soft); cursor: pointer; position: relative;
}
.lw-seg > *:last-child { border-right: 0; }
@media (hover: hover) { .lw-seg > *:hover { background: var(--lw-panel-2); color: var(--lw-ink); } }
.lw-seg > .is-on, .lw-seg > [aria-pressed="true"], .lw-seg > [aria-selected="true"] { background: var(--lw-act-soft); color: var(--lw-act); font-weight: 600; }
.lw-seg svg, .lw-seg i { width: 15px; height: 15px; stroke-width: 1.75; }
.lw-seg.is-icons > * { padding: 7px 8px; }

/* Pills and chips.
   Pill: a filled state marker. Grey unless it carries a signal.
   Chip: the quiet metadata under a title — grey text with an icon, no fill. The one
   chip that carries urgency wears --warn. */
.lw-pill {
  font: 600 11px/1 var(--lw-font-ui); display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px; background: var(--lw-panel-2); color: var(--lw-ink-soft); white-space: nowrap;
}
.lw-pill.is-act { background: var(--lw-act-soft); color: var(--lw-act); }
.lw-pill.is-warn { background: var(--lw-warn-soft); color: var(--lw-warn); }
.lw-pill.is-good { background: var(--lw-good-soft); color: var(--lw-good); }
.lw-pill.is-wait { background: var(--lw-wait-soft); color: var(--lw-wait); }
.lw-pill.is-solid { background: var(--lw-act); color: var(--lw-on-act); }
.lw-pill.is-solid.is-warn { background: var(--lw-warn); }
.lw-pill.is-solid.is-wait { background: var(--lw-wait); }
.lw-pill.is-solid.is-good { background: var(--lw-good); }
.lw-chips { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.lw-chip { font: 500 11.5px/1 var(--lw-font-ui); color: var(--lw-ink-faint); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.lw-chip svg, .lw-chip i { width: 12px; height: 12px; stroke-width: 2; opacity: .8; }
.lw-chip.is-warn { color: var(--lw-warn); font-weight: 600; }
.lw-chip.is-ink { color: var(--lw-ink); }

/* Keyboard key. Mono, because a key is an address. */
.lw-kbd {
  font: 11.5px/1 var(--lw-font-mono); display: inline-block; min-width: 20px; text-align: center;
  padding: 3px 6px; border: 1px solid var(--lw-line); border-bottom-width: 2px; border-radius: 4px;
  background: var(--lw-panel); color: var(--lw-ink-soft);
}
/* Mono for addresses only: page numbers, timestamps, cite keys, tag codes. */
.lw-mono { font-family: var(--lw-font-mono); font-size: .92em; }

/* Toast: bottom centre, one line, an Undo on the right. lightwork.js makes these. */
.lw-toasts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 90; pointer-events: none; padding: 0 16px; max-width: 100vw; }
.lw-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 14px;
  background: var(--lw-ink); color: var(--lw-paper); font: 13px/1.3 var(--lw-font-ui);
  padding: 10px 10px 10px 14px; border-radius: 8px; box-shadow: var(--lw-shadow-pop);
  opacity: 0; transform: translateY(14px); transition: opacity .2s, transform .2s; max-width: min(520px, 92vw);
}
.lw-toast.is-in { opacity: 1; transform: translateY(0); }
.lw-toast b { font-weight: 600; }
.lw-toast .lw-toast-undo { font: 600 13px/1 var(--lw-font-ui); color: #9fd3e6; background: transparent; border: 0; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
@media (hover: hover) { .lw-toast .lw-toast-undo:hover { background: rgba(255, 255, 255, .1); } }
.lw-toast .lw-kbd { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .15); color: inherit; opacity: .8; }
:root[data-theme="dark"] .lw-toast .lw-toast-undo { color: #1f5468; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lw-toast .lw-toast-undo { color: #1f5468; } }

/* Completion: a circle that draws its tick. Markup:
   <button class="lw-check" aria-pressed="false"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></button>
   Toggle .is-done (or aria-pressed) to run it. The row around it can take .is-done too. */
.lw-check {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--lw-line); background: var(--lw-panel);
  position: relative; cursor: pointer; padding: 0; flex: none; transition: background .25s, border-color .25s;
}
.lw-check svg { position: absolute; inset: 2px; width: 12px; height: 12px; fill: none; stroke: var(--lw-on-act); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.lw-check.is-done, .lw-check[aria-pressed="true"] { background: var(--lw-good); border-color: var(--lw-good); }
.lw-check.is-done svg, .lw-check[aria-pressed="true"] svg { stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease .05s; }
.lw-row.is-done { opacity: .5; transition: opacity .4s ease .5s; }
.lw-row.is-done .lw-title { text-decoration: line-through; text-decoration-color: var(--lw-line); color: var(--lw-ink-faint); }

/* Empty state: one serif sentence in the app's voice, one grey line of fact. */
.lw-empty { padding: 28px 20px; text-align: center; }
.lw-empty p { font: italic 17px/1.4 var(--lw-font-display); margin: 0 0 6px; color: var(--lw-ink); }
.lw-empty small { color: var(--lw-ink-faint); font-size: 12.5px; display: block; }

/* Next box: eyebrow with why, the thing in serif, one button. */
.lw-next {
  background: var(--lw-panel); border: 1px solid var(--lw-line); border-radius: var(--lw-radius-lg);
  padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
}
.lw-next .lw-eyebrow { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.lw-next .lw-eyebrow .lw-why { font: 400 12px/1.3 var(--lw-font-ui); letter-spacing: 0; text-transform: none; color: var(--lw-ink-soft); }
.lw-next .lw-thing { font: 600 18px/1.25 var(--lw-font-display); color: var(--lw-act); margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
.lw-next .lw-thing small { font: 400 12px/1 var(--lw-font-ui); color: var(--lw-ink-soft); background: var(--lw-panel-2); padding: 4px 8px; border-radius: 999px; }

/* Habit dots: a row that fills with the habit's own colour (--hc on the row). */
.lw-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--lw-line); display: inline-block; background: var(--lw-panel); vertical-align: middle; }
.lw-dot.is-yes { background: var(--hc, var(--lw-act)); border-color: var(--hc, var(--lw-act)); }
.lw-dot.is-half { background: color-mix(in srgb, var(--hc, var(--lw-act)) 35%, var(--lw-panel)); border-color: transparent; }
.lw-dot.is-today { border-color: var(--hc, var(--lw-act)); border-style: dashed; }

/* Keys sheet: what `?` opens. lightwork.js builds it from the app's key list. */
.lw-keys-backdrop { position: fixed; inset: 0; background: rgba(26, 23, 38, .35); backdrop-filter: blur(1.5px); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lw-keys { background: var(--lw-panel); border: 1px solid var(--lw-line); border-radius: var(--lw-radius-lg); padding: 16px 20px; box-shadow: var(--lw-shadow-pop); width: min(100%, 560px); max-height: 90vh; overflow: auto; color: var(--lw-ink); }
.lw-keys h2 { font: 600 20px/1.2 var(--lw-font-display); margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lw-keys h2 small { font: 400 12px/1.3 var(--lw-font-ui); color: var(--lw-ink-faint); }
.lw-keys .lw-keys-group { margin: 0 0 12px; }
.lw-keys .lw-keys-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; }
.lw-keys .lw-kr { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--lw-line); }
.lw-keys .lw-kr:last-child { border-bottom: 0; }
.lw-keys .lw-kr span { color: var(--lw-ink-soft); }
.lw-keys .lw-kr .lw-kbd + .lw-kbd { margin-left: 4px; }

/* Nav item in a rail: icon + word, count on the right, --act-soft when current. */
.lw-nav a, .lw-nav button, .lw-nav-item {
  display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: var(--lw-radius);
  font: 500 13px/1.3 var(--lw-font-ui); color: var(--lw-ink); text-decoration: none; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer;
}
@media (hover: hover) { .lw-nav a:hover, .lw-nav button:hover, .lw-nav-item:hover { background: var(--lw-panel); } }
.lw-nav .is-on, .lw-nav [aria-current], .lw-nav-item.is-on { background: var(--lw-act-soft); color: var(--lw-act); font-weight: 600; }
.lw-nav svg, .lw-nav i { width: 16px; height: 16px; stroke-width: 1.75; flex: none; }
.lw-nav .lw-count { margin-left: auto; font: 500 11px/1 var(--lw-font-ui); color: var(--lw-ink-faint); font-variant-numeric: tabular-nums; }
.lw-nav .lw-count.is-wait { background: var(--lw-wait-soft); color: var(--lw-wait); padding: 3px 7px; border-radius: 999px; font-weight: 700; }

/* Wordmark: the app's name in its brand hue, with a dot or icon. */
.lw-wordmark { font: 700 20px/1 var(--lw-font-display); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px; color: var(--lw-brand, var(--lw-ink)); text-decoration: none; }
.lw-wordmark .lw-brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lw-brand, var(--lw-ink)); display: inline-block; }
.lw-wordmark svg { width: 18px; height: 18px; stroke-width: 2; }

/* Screen-reader only. */
.lw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .lw-toast, .lw-check, .lw-check svg, .lw-row.is-done, [data-tip]::after { transition: none !important; }
}