/* Noteboard styles. Design system: docs/UI-RULES.md (enforced by tests/ui-rules.test.mjs).
   Everything after the tokens block uses var() tokens only: no raw colors, no raw px for spacing, radius or type. */

/* @tokens-start */
:root {
  color-scheme: light;

  /* spacing scale (padding, margin, gap, offsets) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --gap-list: var(--space-3);

  /* corner radius scale */
  --radius-0: 0;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-full: 9999px;

  /* typography: two families (self-hosted Roboto with the system UI stack as fallback; the system monospace stack for
     code - no font file), four sizes, two weights */
  --font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --line-height-12: 16px;
  --line-height-14: 20px;
  --line-height-16: 24px;
  --line-height-20: 28px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --letter-spacing-label: 0.1px; /* M3 label-large: text buttons and nav labels (14px / 500) */

  /* fixed sizes (not on the spacing scale; see UI-RULES clarification 2) */
  --size-border: 1px;
  --size-focus-ring: 2px;
  --size-focus-offset: 2px;
  --size-checkbox-border: 2px;
  --size-indicator: 4px;
  --size-icon: 20px;
  --icon-stroke: 2;
  --size-checkbox: 20px;
  --size-control: 40px;
  --size-topbar: calc(var(--size-control) + 2 * var(--space-3) + var(--size-border));
  --size-col: 240px;
  --size-sidebar: 280px;
  --size-sidebar-collapsed: calc(var(--size-control) + 2 * var(--space-3));
  --size-drawer: 304px;
  --size-menu: 256px;
  --size-menu-list: 240px;
  --size-toast-min: 288px;
  --size-content: 600px;
  --size-search: 720px;
  --size-dialog: 560px;
  --size-dialog-small: 440px;
  --size-dialog-wide: 624px;
  --size-image-max: 60vh;

  /* M3 state layers and motion */
  --state-hover: 8%;
  --state-focus: 10%;
  --state-pressed: 10%;
  --state-dragged: 16%;
  --state-disabled-content: 38%;
  --state-disabled-container: 12%;
  --scrim-opacity: 32%;
  --motion-short: 150ms;
  --motion-medium: 200ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* stacking order (0.9.1): one ladder; popovers are the top level (and use the browser's top layer where the
     Popover API exists, popover.js) */
  --z-raised: 1; /* a lifted checklist row above its neighbours inside the editor (0.9.2) */
  --z-topbar: 20;
  --z-drawer-backdrop: 50;
  --z-drawer: 60;
  --z-modal: 100;
  --z-card-ghost: 150;
  --z-toast: 300;
  --z-nav-ghost: 400;
  --z-popover: 500;

  /* M3 color roles, light: classic Material Design swatches (2014 palette), mapped by dev/make-palette.mjs - one
     accent hue (Green), one neutral family (Grey). Each value is an exact swatch, white/black, or a documented
     color-mix() of two swatches where no exact swatch meets the WCAG contrast rules (docs/UI-RULES.md section 3). */
  --md-primary: #2E7D32; /* Green 800 */
  /* app logo tile and letter: the same in light and dark (not themed) */
  --md-brand: #2E7D32; /* Green 800 */
  --md-on-brand: #FFFFFF; /* White */
  --md-on-primary: #FFFFFF; /* White */
  --md-primary-container: #C8E6C9; /* Green 100 */
  --md-on-primary-container: #1B5E20; /* Green 900 */
  --md-secondary: #546E7A; /* Blue Grey 600 */
  --md-on-secondary: #FFFFFF; /* White */
  --md-secondary-container: #C8E6C9; /* Green 100 */
  --md-on-secondary-container: #1B5E20; /* Green 900 */
  --md-surface: #FFFFFF; /* White */
  --md-on-surface: #212121; /* Grey 900 */
  --md-surface-variant: #EEEEEE; /* Grey 200 */
  --md-on-surface-variant: #424242; /* Grey 800 */
  --md-surface-container-lowest: #FFFFFF; /* White */
  --md-surface-container-low: #FAFAFA; /* Grey 50 */
  --md-surface-container: #FFFFFF; /* White */
  --md-surface-container-high: #F5F5F5; /* Grey 100 */
  --md-surface-container-highest: #F5F5F5; /* Grey 100 */
  --md-background: #FFFFFF; /* White */
  --md-on-background: #212121; /* Grey 900 */
  --md-outline: #616161; /* Grey 700 */
  --md-outline-variant: #E0E0E0; /* Grey 300 */
  --md-error: color-mix(in srgb, #B71C1C 90%, #000000); /* 90% Red 900 + 10% Black */
  --md-on-error: #FFFFFF; /* White */
  --md-error-container: #FFEBEE; /* Red 50 */
  --md-on-error-container: #B71C1C; /* Red 900 */
  --md-scrim: #000000; /* Black */
  --md-shadow: #000000; /* Black */
  --md-inverse-surface: #424242; /* Grey 800 */
  --md-inverse-on-surface: #F5F5F5; /* Grey 100 */
  --md-inverse-primary: #A5D6A7; /* Green 200 */

  /* note content colors, light */
  --note-default-bg: #FFFFFF; /* White */
  --note-default-outline: var(--md-outline-variant);
  --note-red-bg: #FFCCBC; /* Deep Orange 100 */
  --note-orange-bg: #FFE0B2; /* Orange 100 */
  --note-yellow-bg: #FFF59D; /* Yellow 200 */
  --note-green-bg: #C5E1A5; /* Light Green 200 */
  --note-teal-bg: #B2DFDB; /* Teal 100 */
  --note-blue-bg: #B3E5FC; /* Light Blue 100 */
  --note-darkblue-bg: #C5CAE9; /* Indigo 100 */
  --note-purple-bg: #E1BEE7; /* Purple 100 */
  --note-pink-bg: #F8BBD0; /* Pink 100 */
  --note-brown-bg: #D7CCC8; /* Brown 100 */
  --note-gray-bg: #CFD8DC; /* Blue Grey 100 */

  /* M3 elevation levels, built from the shadow role */
  --elevation-0: none;
  --elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--md-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-shadow) 15%, transparent);
  --elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--md-shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-shadow) 15%, transparent);
  --elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--md-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-shadow) 15%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-primary: #A5D6A7; /* Green 200 */
    --md-on-primary: #1B5E20; /* Green 900 */
    --md-primary-container: #1B5E20; /* Green 900 */
    --md-on-primary-container: #C8E6C9; /* Green 100 */
    --md-secondary: #B0BEC5; /* Blue Grey 200 */
    --md-on-secondary: #263238; /* Blue Grey 900 */
    --md-secondary-container: #1B5E20; /* Green 900 */
    --md-on-secondary-container: #C8E6C9; /* Green 100 */
    --md-surface: #212121; /* Grey 900 */
    --md-on-surface: #F5F5F5; /* Grey 100 */
    --md-surface-variant: #424242; /* Grey 800 */
    --md-on-surface-variant: #BDBDBD; /* Grey 400 */
    --md-surface-container-lowest: #000000; /* Black */
    --md-surface-container-low: color-mix(in srgb, #424242 30%, #212121); /* 30% Grey 800 + 70% Grey 900 */
    --md-surface-container: #424242; /* Grey 800 */
    --md-surface-container-high: #424242; /* Grey 800 */
    --md-surface-container-highest: #424242; /* Grey 800 */
    --md-background: #212121; /* Grey 900 */
    --md-on-background: #F5F5F5; /* Grey 100 */
    --md-outline: #9E9E9E; /* Grey 500 */
    --md-outline-variant: #616161; /* Grey 700 */
    --md-error: #FFCDD2; /* Red 100 */
    --md-on-error: #B71C1C; /* Red 900 */
    --md-error-container: #B71C1C; /* Red 900 */
    --md-on-error-container: #FFEBEE; /* Red 50 */
    --md-scrim: #000000; /* Black */
    --md-shadow: #000000; /* Black */
    --md-inverse-surface: #F5F5F5; /* Grey 100 */
    --md-inverse-on-surface: #212121; /* Grey 900 */
    --md-inverse-primary: #2E7D32; /* Green 800 */
    --note-default-bg: color-mix(in srgb, #424242 30%, #212121); /* 30% Grey 800 + 70% Grey 900 */
    --note-default-outline: var(--md-outline-variant);
    --note-red-bg: color-mix(in srgb, #B71C1C 45%, #212121); /* 45% Red 900 + 55% Grey 900 */
    --note-orange-bg: color-mix(in srgb, #E65100 45%, #212121); /* 45% Orange 900 + 55% Grey 900 */
    --note-yellow-bg: color-mix(in srgb, #827717 45%, #212121); /* 45% Lime 900 + 55% Grey 900 */
    --note-green-bg: color-mix(in srgb, #33691E 45%, #212121); /* 45% Light Green 900 + 55% Grey 900 */
    --note-teal-bg: color-mix(in srgb, #004D40 45%, #212121); /* 45% Teal 900 + 55% Grey 900 */
    --note-blue-bg: color-mix(in srgb, #01579B 45%, #212121); /* 45% Light Blue 900 + 55% Grey 900 */
    --note-darkblue-bg: color-mix(in srgb, #1A237E 45%, #212121); /* 45% Indigo 900 + 55% Grey 900 */
    --note-purple-bg: color-mix(in srgb, #7B1FA2 45%, #212121); /* 45% Purple 700 + 55% Grey 900 */
    --note-pink-bg: color-mix(in srgb, #880E4F 45%, #212121); /* 45% Pink 900 + 55% Grey 900 */
    --note-brown-bg: color-mix(in srgb, #6D4C41 45%, #212121); /* 45% Brown 600 + 55% Grey 900 */
    --note-gray-bg: color-mix(in srgb, #455A64 80%, #212121); /* 80% Blue Grey 700 + 20% Grey 900 */
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --md-primary: #A5D6A7; /* Green 200 */
  --md-on-primary: #1B5E20; /* Green 900 */
  --md-primary-container: #1B5E20; /* Green 900 */
  --md-on-primary-container: #C8E6C9; /* Green 100 */
  --md-secondary: #B0BEC5; /* Blue Grey 200 */
  --md-on-secondary: #263238; /* Blue Grey 900 */
  --md-secondary-container: #1B5E20; /* Green 900 */
  --md-on-secondary-container: #C8E6C9; /* Green 100 */
  --md-surface: #212121; /* Grey 900 */
  --md-on-surface: #F5F5F5; /* Grey 100 */
  --md-surface-variant: #424242; /* Grey 800 */
  --md-on-surface-variant: #BDBDBD; /* Grey 400 */
  --md-surface-container-lowest: #000000; /* Black */
  --md-surface-container-low: color-mix(in srgb, #424242 30%, #212121); /* 30% Grey 800 + 70% Grey 900 */
  --md-surface-container: #424242; /* Grey 800 */
  --md-surface-container-high: #424242; /* Grey 800 */
  --md-surface-container-highest: #424242; /* Grey 800 */
  --md-background: #212121; /* Grey 900 */
  --md-on-background: #F5F5F5; /* Grey 100 */
  --md-outline: #9E9E9E; /* Grey 500 */
  --md-outline-variant: #616161; /* Grey 700 */
  --md-error: #FFCDD2; /* Red 100 */
  --md-on-error: #B71C1C; /* Red 900 */
  --md-error-container: #B71C1C; /* Red 900 */
  --md-on-error-container: #FFEBEE; /* Red 50 */
  --md-scrim: #000000; /* Black */
  --md-shadow: #000000; /* Black */
  --md-inverse-surface: #F5F5F5; /* Grey 100 */
  --md-inverse-on-surface: #212121; /* Grey 900 */
  --md-inverse-primary: #2E7D32; /* Green 800 */
  --note-default-bg: color-mix(in srgb, #424242 30%, #212121); /* 30% Grey 800 + 70% Grey 900 */
  --note-default-outline: var(--md-outline-variant);
  --note-red-bg: color-mix(in srgb, #B71C1C 45%, #212121); /* 45% Red 900 + 55% Grey 900 */
  --note-orange-bg: color-mix(in srgb, #E65100 45%, #212121); /* 45% Orange 900 + 55% Grey 900 */
  --note-yellow-bg: color-mix(in srgb, #827717 45%, #212121); /* 45% Lime 900 + 55% Grey 900 */
  --note-green-bg: color-mix(in srgb, #33691E 45%, #212121); /* 45% Light Green 900 + 55% Grey 900 */
  --note-teal-bg: color-mix(in srgb, #004D40 45%, #212121); /* 45% Teal 900 + 55% Grey 900 */
  --note-blue-bg: color-mix(in srgb, #01579B 45%, #212121); /* 45% Light Blue 900 + 55% Grey 900 */
  --note-darkblue-bg: color-mix(in srgb, #1A237E 45%, #212121); /* 45% Indigo 900 + 55% Grey 900 */
  --note-purple-bg: color-mix(in srgb, #7B1FA2 45%, #212121); /* 45% Purple 700 + 55% Grey 900 */
  --note-pink-bg: color-mix(in srgb, #880E4F 45%, #212121); /* 45% Pink 900 + 55% Grey 900 */
  --note-brown-bg: color-mix(in srgb, #6D4C41 45%, #212121); /* 45% Brown 600 + 55% Grey 900 */
  --note-gray-bg: color-mix(in srgb, #455A64 80%, #212121); /* 80% Blue Grey 700 + 20% Grey 900 */
}
/* Roboto (variable weight axis, SIL OFL 1.1, app/fonts/LICENSE-OFL.txt), self-hosted from @fontsource-variable/roboto.
   One file per script subset; unicode-range makes the browser fetch only the subsets a page uses.
   Cap-height centring (0.9.1): a line box puts the baseline at L/2 + (A - D)/2 * size/upm from its top (A, D: the
   ascent and descent the browser uses), so the centre of the capitals sits (A - D - capHeight)/2 * size/upm below the
   line-box centre. The shipped files (parsed from the woff2: unitsPerEm 2048, hhea 1900 / -500, OS/2 win 1946 / 512,
   typo 1536 / -512 without USE_TYPO_METRICS, capHeight 1456, xHeight 1082) give a different A/D per platform: hhea on
   macOS/Linux, win metrics on Windows. The overrides make every engine that supports them (Firefox 89+, Chrome/Edge
   87+, on every OS) use A = (2400 + 1456)/2 = 1928 and D = 472 units (94.140625% / 23.046875% of the em, the same
   2400-unit content height as hhea): A - D = capHeight, so the cap band is centred in every line box at every size
   and line-height, and labels centred by flex sit on the icons' axis. Safari ignores the descriptors and uses hhea:
   residual 28/2048 em (0.16px at 12px, 0.27px at 20px, caps slightly high). The system fallback font is not
   affected (the overrides belong to these faces only), so a missing Roboto never makes it worse. */
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  ascent-override: 94.140625%; descent-override: 23.046875%; line-gap-override: 0%;
  src: url("fonts/roboto-cyrillic-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  ascent-override: 94.140625%; descent-override: 23.046875%; line-gap-override: 0%;
  src: url("fonts/roboto-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  ascent-override: 94.140625%; descent-override: 23.046875%; line-gap-override: 0%;
  src: url("fonts/roboto-latin-ext-wght-normal.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: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  ascent-override: 94.140625%; descent-override: 23.046875%; line-gap-override: 0%;
  src: url("fonts/roboto-latin-wght-normal.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;
}
/* @tokens-end */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--md-surface); color: var(--md-on-surface);
  font-family: var(--font-family); font-size: var(--font-size-14); line-height: var(--line-height-14);
  font-weight: var(--font-weight-regular);
}
body.modal-open { overflow: hidden; }
h1, h2, h3, h4, p, ul, ol, pre { margin: 0; }
/* one size per heading level, on every screen and dialog */
h1 { font-size: var(--font-size-20); line-height: var(--line-height-20); font-weight: var(--font-weight-regular); }
h2, h3 { font-size: var(--font-size-16); line-height: var(--line-height-16); font-weight: var(--font-weight-medium); }
h4 { font-size: var(--font-size-14); line-height: var(--line-height-14); font-weight: var(--font-weight-medium); }
strong, b { font-weight: var(--font-weight-medium); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--md-primary); }
:focus-visible { outline: var(--size-focus-ring) solid var(--md-primary); outline-offset: var(--size-focus-offset); }
.visually-hidden {
  position: absolute !important; width: var(--size-border); height: var(--size-border); overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: 0;
}
.muted { color: var(--md-on-surface-variant); }
.small { font-size: var(--font-size-12); line-height: var(--line-height-12); }
.spacer { flex: 1 1 auto; }
.noscript, .boot { padding: var(--space-7) var(--space-4); text-align: center; color: var(--md-on-surface-variant); }

/* ---------- state layers: one technique for every interactive element ---------- */
.icon-btn, .btn, .nav-item, .composer-take, .sync-status, .swatch, .toast-action, .lp-row, .lp-create,
.ed-add-item, .ed-checked-head, .card, .menu-item { position: relative; }
.icon-btn::before, .btn::before, .nav-item::before, .composer-take::before, .sync-status::before, .swatch::before,
.toast-action::before, .lp-row::before, .lp-create::before, .ed-add-item::before, .ed-checked-head::before, .card::before,
.menu-item::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor;
  opacity: 0; pointer-events: none; transition: opacity var(--motion-short) ease;
}
.icon-btn:hover::before, .btn:hover::before, .nav-item:hover::before, .composer-take:hover::before, .sync-status:hover::before,
.swatch:hover::before, .toast-action:hover::before, .lp-row:hover::before, .lp-create:hover::before, .ed-add-item:hover::before,
.ed-checked-head:hover::before, .card:hover::before, .menu-item:hover::before { opacity: var(--state-hover); }
.icon-btn:focus-visible::before, .btn:focus-visible::before, .nav-item:focus-visible::before, .composer-take:focus-visible::before,
.sync-status:focus-visible::before, .swatch:focus-visible::before, .toast-action:focus-visible::before, .lp-create:focus-visible::before,
.ed-add-item:focus-visible::before, .ed-checked-head:focus-visible::before, .card:focus-visible::before,
.lp-row:focus-within::before, .menu-item:focus-visible::before { opacity: var(--state-focus); }
.icon-btn:active::before, .btn:active::before, .nav-item:active::before, .composer-take:active::before, .sync-status:active::before,
.swatch:active::before, .toast-action:active::before, .lp-create:active::before, .ed-add-item:active::before,
.ed-checked-head:active::before, .menu-item:active::before { opacity: var(--state-pressed); }
.card.drop-target::before { opacity: var(--state-dragged); }
.btn:disabled::before, .icon-btn:disabled::before, .menu-item:disabled::before { opacity: 0; }

/* ---------- icons + buttons ---------- */
/* Icons never sit on a text baseline: every icon is a block box of exactly 20x20, and every element that holds an
   icon (buttons, [data-icon] placeholders, rows) is a flex box that centres it on the row's axis. */
.icon {
  display: block; width: var(--size-icon); height: var(--size-icon); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round;
}
[data-icon] { display: flex; align-items: center; justify-content: center; flex: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--size-control); height: var(--size-control); padding: 0; border: 0; border-radius: var(--radius-4);
  background: transparent; color: var(--md-on-surface-variant);
}
.icon-btn:hover { color: var(--md-on-surface); }
.icon-btn.on { color: var(--md-primary); }
.icon-btn.on .icon-pin path { fill: currentColor; }
.icon-btn:disabled { color: color-mix(in srgb, var(--md-on-surface) var(--state-disabled-content), transparent); cursor: default; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--size-control); padding: 0 var(--space-5); border-radius: var(--radius-4);
  border: var(--size-border) solid var(--md-outline); background: transparent; color: var(--md-primary);
  font-size: var(--font-size-14); line-height: var(--line-height-14); font-weight: var(--font-weight-medium); white-space: nowrap;
  letter-spacing: var(--letter-spacing-label);
}
.btn:disabled {
  cursor: default; color: color-mix(in srgb, var(--md-on-surface) var(--state-disabled-content), transparent);
  border-color: color-mix(in srgb, var(--md-on-surface) var(--state-disabled-container), transparent);
}
.btn-primary { background: var(--md-primary); color: var(--md-on-primary); border-color: transparent; }
.btn-danger { background: var(--md-error); color: var(--md-on-error); border-color: transparent; }
.btn-primary:disabled, .btn-danger:disabled { background: color-mix(in srgb, var(--md-on-surface) var(--state-disabled-container), transparent); border-color: transparent; }
.btn-text, .btn-danger-text { border-color: transparent; padding: 0 var(--space-3); }
.btn-danger-text { color: var(--md-error); }
.btn-wide { width: 100%; }

/* custom checkbox: 20px box, 4px radius, primary when checked */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none;
  width: var(--size-checkbox); height: var(--size-checkbox); margin: 0; padding: 0;
  border: var(--size-checkbox-border) solid var(--md-on-surface-variant); border-radius: var(--radius-4);
  background: transparent; cursor: pointer;
}
input[type="checkbox"]::before {
  content: ""; width: calc(var(--size-checkbox) * 0.6); height: calc(var(--size-checkbox) * 0.6);
  background: var(--md-on-primary); transform: scale(0);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:checked { background: var(--md-primary); border-color: var(--md-primary); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:disabled { cursor: default; border-color: color-mix(in srgb, var(--md-on-surface) var(--state-disabled-content), transparent); }
input[type="checkbox"]:checked:disabled { background: color-mix(in srgb, var(--md-on-surface) var(--state-disabled-content), transparent); border-color: transparent; }
input[type="checkbox"]:checked:disabled::before { background: var(--md-surface); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: var(--space-2);
  padding: calc(var(--space-3) + env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) var(--space-3) max(var(--space-3), env(safe-area-inset-left));
  background: var(--md-surface); border-bottom: var(--size-border) solid var(--md-outline-variant);
}
.brand {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: none;
  width: calc(var(--size-sidebar) - var(--size-control) - var(--space-3) - 2 * var(--space-2));
}
.brand-glyph { display: inline-flex; }
.app-glyph { width: var(--size-control); height: var(--size-control); flex: none; }
.app-glyph .g-bg { fill: var(--md-brand); }
.app-glyph .g-mark { fill: var(--md-on-brand); stroke: none; }
.view-title {
  font-size: var(--font-size-20); line-height: var(--line-height-20); color: var(--md-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search {
  position: relative; display: flex; align-items: center; flex: 1 1 auto; max-width: var(--size-search); min-width: 0;
  height: var(--size-control); border-radius: var(--radius-4); background: var(--md-surface-container-high); color: var(--md-on-surface-variant);
}
.search:focus-within { outline: var(--size-focus-ring) solid var(--md-primary); outline-offset: var(--size-focus-offset); }
.search-ico { display: inline-flex; padding: 0 var(--space-2) 0 var(--space-3); }
.search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; color: var(--md-on-surface);
  font-size: var(--font-size-16); line-height: var(--line-height-16);
}
.search input::placeholder { color: var(--md-on-surface-variant); }
.search input::-webkit-search-cancel-button { display: none; }
.top-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.sync-status {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--size-control); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-4);
  background: transparent; color: var(--md-on-surface-variant);
  font-size: var(--font-size-12); line-height: var(--line-height-12); white-space: nowrap;
}
.sync-status.error { color: var(--md-error); }
.sync-status.offline { color: var(--md-on-surface); }
.sync-status.syncing .icon { animation: pulse 1.2s var(--motion-easing-standard) infinite alternate; }
@keyframes pulse { to { opacity: var(--state-disabled-content); } }

/* ---------- shell + sidebar ---------- */
.shell { display: flex; align-items: flex-start; }
.sidebar {
  position: sticky; top: var(--size-topbar); flex: none; width: var(--size-sidebar);
  height: calc(100vh - var(--size-topbar)); overflow: hidden; padding: var(--space-3) 0 0;
  display: flex; flex-direction: column; background: var(--md-surface);
}
.nav { list-style: none; margin: 0; padding: 0 var(--space-3); display: flex; flex-direction: column; gap: var(--gap-list); }
.nav:empty { display: none; }
.nav + .nav { margin-top: var(--gap-list); }
.nav-item {
  display: grid; grid-template-columns: var(--size-control) minmax(0, 1fr); align-items: center; column-gap: var(--space-3);
  width: 100%; height: var(--size-control); padding: 0 var(--space-4) 0 0; border: 0; border-radius: var(--radius-4);
  background: transparent; color: var(--md-on-surface); text-align: left;
  font-size: var(--font-size-14); line-height: var(--line-height-14); font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
}
.nav-item > :first-child { display: inline-flex; justify-self: center; color: var(--md-on-surface-variant); }
.nav-item.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.nav-item.active > :first-child { color: var(--md-on-secondary-container); }
.nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Label categories (0.8.0): fixed top (Notes) and footer; only the label region in between scrolls. */
.nav-top, .nav-labels-head, .nav-foot { flex: none; }
.rail-only { display: none; }
.nav-labels-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--gap-list); padding: 0 var(--space-3) 0 var(--space-4);
}
.nav-labels-head[hidden], .nav-scroll[hidden], .icon-btn[hidden], .nav-item[hidden], .nav[hidden] { display: none; }
.nav-caption {
  color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12);
  font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-label);
}
.nav-scroll {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--gap-list); padding: var(--space-1) 0 var(--space-3);
}
.nav-foot {
  margin-top: 0; padding-top: var(--space-3); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: var(--size-border) solid var(--md-outline-variant);
}
.nav-scroll + .nav-foot, .nav-labels-head[hidden] + .nav-scroll[hidden] + .nav-foot { margin-top: 0; }
.nav-top + .nav-labels-head[hidden] + .nav-scroll[hidden] + .nav-foot { margin-top: auto; }
.cat { display: flex; flex-direction: column; gap: var(--gap-list); }
.cat-list { padding-left: calc(var(--space-3) + var(--space-4)); }
.nav-row { position: relative; display: flex; align-items: center; list-style: none; }
.cat-row { padding: 0 var(--space-3); }
.cat-head { grid-template-columns: var(--size-control) minmax(0, 1fr) auto; }
.cat-chev { transition: transform var(--motion-short) var(--motion-easing-standard); }
.cat.collapsed .cat-chev { transform: rotate(-90deg); }
.cat-count { color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12); font-weight: var(--font-weight-regular); }
.cat-head.has-active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.cat-head.has-active > :first-child, .cat-head.has-active .cat-count { color: var(--md-on-secondary-container); }
.cat-reveal { animation: cat-reveal var(--motion-short) var(--motion-easing-standard); }
@keyframes cat-reveal { from { opacity: 0; transform: translateY(calc(-1 * var(--space-1))); } }
/* row "More" button (0.9.1): every label / category row reserves the button's 40px at its right end (the row's
   padding), so the name (ellipsis) and the category count end before it and never sit under it, hovered or not. The
   button is shown on hover / keyboard focus on desktop and always on touch. */
.nav-row > .nav-item { padding-right: var(--size-control); }
.row-more { position: absolute; right: 0; top: 0; visibility: hidden; }
.cat-row .row-more { right: var(--space-3); }
.nav-row:hover .row-more, .nav-row:focus-within .row-more, .row-more:focus-visible { visibility: visible; }
@media (hover: none) {
  .row-more { visibility: visible; }
}
.nav-row > .nav-item, .nav-ghost { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.cat-head.drop-target::before { opacity: var(--state-dragged); }
.nav-drag-source { opacity: var(--state-disabled-content); }
.nav-ghost {
  position: fixed; left: 0; top: 0; z-index: var(--z-nav-ghost); pointer-events: none; margin: 0; padding: 0;
  border-radius: var(--radius-4); background: var(--md-surface-container-high); box-shadow: var(--elevation-3);
}
.nav-ghost .row-more { display: none; }
.nav-drop-line {
  position: absolute; left: 0; top: 0; height: var(--size-focus-ring); pointer-events: none;
  border-radius: var(--radius-full); background: var(--md-primary);
}
.nav-drop-line[hidden] { display: none; }
html.is-reordering .nav-scroll { cursor: grabbing; }
html.drawer-lock, html.drawer-lock body { overflow: hidden; }
.app.sidebar-collapsed .sidebar { width: var(--size-sidebar-collapsed); }
.app.sidebar-collapsed .nav-item { grid-template-columns: var(--size-control); width: var(--size-control); padding: 0; }
.app.sidebar-collapsed .nav-text { display: none; }
/* icon rail: Notes, one "Labels" item (expands the panel) and the footer items; no category rails */
.app.sidebar-collapsed .rail-only { display: list-item; }
.app.sidebar-collapsed .nav-labels-head, .app.sidebar-collapsed .nav-scroll { display: none; }
.app.sidebar-collapsed .nav-foot { margin-top: auto; }
/* Side panel toggle (0.7.3): the width changes once, instantly (no width transition: that re-laid out the whole
   board on every frame). The labels fade in and the board glides with transforms only (Board.animateResize). */
.app.sidebar-expanding .nav-text { animation: nav-text-in var(--motion-medium) var(--motion-easing-standard); }
@keyframes nav-text-in { from { opacity: 0; transform: translateX(calc(-1 * var(--space-2))); } }
.flip-run .flip { transition: transform var(--motion-medium) var(--motion-easing-standard); }
.sidebar-backdrop { display: none; }
.main { flex: 1 1 auto; min-width: 0; padding: var(--space-4) var(--space-4) var(--space-7); }
.view-head {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap;
  margin: 0 auto var(--space-4); color: var(--md-on-surface-variant); font-style: italic;
}
.view-head .btn { font-style: normal; }

/* ---------- composer ---------- */
.composer-host { max-width: var(--size-content); margin: 0 auto var(--space-6); }
.composer { border-radius: var(--radius-8); box-shadow: var(--elevation-1); background: var(--note-default-bg); }
.composer-collapsed { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1); }
.composer-take {
  flex: 1; height: var(--size-control); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-4);
  background: transparent; text-align: left; color: var(--md-on-surface-variant);
  font-size: var(--font-size-16); line-height: var(--line-height-16); font-weight: var(--font-weight-medium);
}
.composer.expanded { box-shadow: var(--elevation-3); }
.composer.drop-target { outline: var(--size-focus-ring) dashed var(--md-primary); outline-offset: var(--size-focus-offset); }
.composer .editor { border-radius: var(--radius-8); }

/* ---------- board + cards ---------- */
.board { position: relative; }
.board-section { width: fit-content; max-width: 100%; margin: 0 auto var(--space-6); }
/* the margin compensates the card border so the title lines up with the card text */
.section-title { margin: 0 var(--size-border) var(--space-2); padding: 0 var(--space-3); color: var(--md-on-surface-variant); }
.masonry { display: flex; align-items: flex-start; justify-content: center; gap: var(--gap-list); }
.col { display: flex; flex-direction: column; gap: var(--gap-list); width: var(--col-w, var(--size-col)); }
/* Cards far outside the viewport skip style, layout and paint (0.7.3); their box keeps the measured height
   (--card-h, set by board.js from the measuring pass), so the masonry is unchanged. */
.col > .card { content-visibility: auto; contain-intrinsic-block-size: auto var(--card-h, var(--size-col)); }
.measure { position: absolute; left: -200vw; top: 0; visibility: hidden; display: flex; flex-direction: column; contain: layout; }
.board-sentinel { height: var(--size-border); }
.empty-state { text-align: center; color: var(--md-on-surface-variant); padding: var(--space-7) var(--space-4); }
.empty-title { margin: var(--space-4) 0 var(--space-1); font-size: var(--font-size-16); line-height: var(--line-height-16); font-weight: var(--font-weight-medium); }

.c-default { --note-bg: var(--note-default-bg); }
.c-red { --note-bg: var(--note-red-bg); }
.c-orange { --note-bg: var(--note-orange-bg); }
.c-yellow { --note-bg: var(--note-yellow-bg); }
.c-green { --note-bg: var(--note-green-bg); }
.c-teal { --note-bg: var(--note-teal-bg); }
.c-blue { --note-bg: var(--note-blue-bg); }
.c-darkblue { --note-bg: var(--note-darkblue-bg); }
.c-purple { --note-bg: var(--note-purple-bg); }
.c-pink { --note-bg: var(--note-pink-bg); }
.c-brown { --note-bg: var(--note-brown-bg); }
.c-gray { --note-bg: var(--note-gray-bg); }

.card {
  display: flex; flex-direction: column; gap: var(--space-2); width: 100%; overflow: hidden;
  padding: var(--space-3); border: var(--size-border) solid transparent; border-radius: var(--radius-8);
  background: var(--note-bg, var(--note-default-bg)); color: var(--md-on-surface); box-shadow: var(--elevation-0);
  transition: box-shadow var(--motion-short) ease; overflow-wrap: anywhere;
}
.card.c-default { border-color: var(--note-default-outline); }
.card:hover { box-shadow: var(--elevation-1); }
.card.drop-target { outline: var(--size-focus-ring) dashed var(--md-primary); outline-offset: calc(-1 * var(--size-focus-offset)); }
.card a, .editor a { color: inherit; }
.card-content { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.card-title {
  margin: 0 var(--space-6) 0 0;
  font-size: var(--font-size-20); line-height: var(--line-height-20); font-weight: var(--font-weight-regular);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.card-images ~ .card-content .card-title { margin-right: 0; }
.card-text {
  white-space: pre-wrap;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 12; line-clamp: 12; overflow: hidden;
}
.card-empty { color: var(--md-on-surface-variant); font-size: var(--font-size-16); line-height: var(--line-height-16); }
.card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-list); }
.card-item { display: flex; align-items: flex-start; gap: var(--space-2); }
.card-item.indent { padding-left: calc(var(--size-checkbox) + var(--space-2)); }
.card-item-text { flex: 1; min-width: 0; white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.card-item.checked .card-item-text { text-decoration: line-through; color: var(--md-on-surface-variant); }
.cb-hit { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--size-checkbox); height: var(--size-checkbox); flex: none; cursor: pointer; }
.cb-hit::after { content: ""; position: absolute; inset: calc(-1 * var(--space-2)); }
.card-more { color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12); padding-left: calc(var(--size-checkbox) + var(--space-2)); }
.card-labels { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; max-width: 100%; padding: var(--space-1) var(--space-2);
  border: var(--size-border) solid var(--md-outline); border-radius: var(--radius-full); background: transparent;
  color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-error { color: var(--md-error); font-size: var(--font-size-12); line-height: var(--line-height-12); }
.card-images { display: grid; gap: var(--space-1); }
.card-images.imgs-2 { grid-template-columns: 1fr 1fr; }
.card-images.imgs-3 { grid-template-columns: 1fr 1fr; }
.card-images.imgs-many { grid-template-columns: 1fr 1fr 1fr; }
.card-images.imgs-3 .card-img.first, .card-images.imgs-many .card-img.first { grid-column: 1 / -1; }
.card-img { position: relative; aspect-ratio: 1; background: var(--md-surface-variant); overflow: hidden; border-radius: var(--radius-8); }
.card-images.imgs-1 .card-img.first { aspect-ratio: 4 / 3; }
.card-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-8); }
.card-img.img-missing::after {
  content: "Image not available offline"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--space-2); text-align: center; color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12);
}
.card-img.img-missing img { display: none; }
.card-img-more { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-8); background: var(--md-surface-variant); color: var(--md-on-surface-variant); }
.card-pin { position: absolute; top: var(--space-1); right: var(--space-1); opacity: 0; }
.card-images ~ .card-pin { background: var(--note-bg, var(--note-default-bg)); }
.card-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 calc(-1 * var(--space-2)) calc(-1 * var(--space-2)); opacity: 0; transition: opacity var(--motion-short) ease;
}
.card:hover .card-toolbar, .card:focus-within .card-toolbar, .card:hover .card-pin, .card:focus-within .card-pin { opacity: 1; }
.layout-list .card-toolbar { justify-content: flex-start; gap: var(--space-2); }
@media (hover: none) {
  .card-toolbar, .card-pin { display: none; }
  .card-title { margin-right: 0; }
}

/* ---------- formatted note text (Markdown subset, md-render.js) ---------- */
/* Plain notes (one paragraph) render inline into .card-text and keep its line clamp; notes with blocks get .md
   (block flow, cut by md-render.js with a "..." line). Blank lines are explicit .md-gap blocks, so blocks have no
   margins of their own. */
.card-text.md { display: block; }
.md-p, .md-h, .md-li { white-space: pre-wrap; }
.md-h1 { font-size: var(--font-size-20); line-height: var(--line-height-20); font-weight: var(--font-weight-medium); }
.md-h2 { font-size: var(--font-size-16); line-height: var(--line-height-16); font-weight: var(--font-weight-medium); }
.md-h3 { font-size: var(--font-size-14); line-height: var(--line-height-14); font-weight: var(--font-weight-medium); }
/* headings are set off from the text before them by one step of the scale (none at the top of the note) */
.md-h:not(:first-child) { margin-top: var(--space-2); }
.md-code {
  padding: 0 var(--space-1); border-radius: var(--radius-4);
  background: var(--md-surface-container-highest); color: var(--md-on-surface); font-family: var(--font-family-mono);
}
.md-pre {
  margin: 0; padding: var(--space-2) var(--space-3); border: var(--size-border) solid var(--md-outline-variant); border-radius: var(--radius-4);
  background: var(--md-surface-container-highest); color: var(--md-on-surface);
  font-family: var(--font-family-mono); font-size: var(--font-size-14); line-height: var(--line-height-14);
  white-space: pre; overflow-x: auto; overflow-wrap: normal; tab-size: 4;
}
.md-pre code { font: inherit; }
.md-lang {
  display: block; margin-bottom: var(--space-1); color: var(--md-on-surface-variant);
  font-family: var(--font-family); font-size: var(--font-size-12); line-height: var(--line-height-12);
}
.md-ul, .md-ol { margin: 0; padding: 0 0 0 var(--space-5); }
.md-ul { list-style: disc; }
.md-ul .md-ul, .md-ol .md-ul { list-style: circle; }
.md-ol { list-style: none; }
.md-ol > li { display: flex; }
.md-num { flex: none; min-width: var(--space-5); margin-left: calc(-1 * var(--space-5)); padding-right: var(--space-1); }
.md-li { display: block; flex: 1 1 auto; min-width: 0; }
.md-quote { margin: 0; padding-left: var(--space-3); border-left: var(--size-indicator) solid var(--md-outline-variant); color: var(--md-on-surface-variant); }
.md-hr { margin: var(--space-2) 0; border: 0; border-top: var(--size-border) solid var(--md-outline-variant); color: var(--md-outline-variant); }
.md-more { color: var(--md-on-surface-variant); }

/* ---------- drag to reorder (drag.js) ---------- */
/* No callout menu, text selection or native drag ghost on cards; touch cards are never text-selectable. */
.board .card { -webkit-touch-callout: none; }
.card.drag-pending, .is-reordering { -webkit-user-select: none; user-select: none; }
.is-reordering, .is-reordering .card { cursor: grabbing; touch-action: none; }
.is-reordering { overflow-anchor: none; }
.is-reordering .masonry .card { transition: transform var(--motion-short) ease, box-shadow var(--motion-short) ease; }
.is-reordering .masonry .card.flip-instant { transition: none; }
/* the card's slot while it is dragged: an empty outlined placeholder */
.card.drag-source { background: transparent; border-color: var(--md-outline-variant); box-shadow: var(--elevation-0); outline: none; }
.card.drag-source > * { visibility: hidden; }
.card.drag-source::before { opacity: 0; }
/* the lifted copy that follows the pointer: elevation level 3 + the dragged state layer (16%) */
.card.card-ghost { position: fixed; left: 0; top: 0; z-index: var(--z-card-ghost); pointer-events: none; box-shadow: var(--elevation-3); will-change: transform; }
.card.card-ghost::before { opacity: var(--state-dragged); }
@media (hover: none) {
  .board .card { -webkit-user-select: none; user-select: none; }
}

/* ---------- modal + editor ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); background: color-mix(in srgb, var(--md-scrim) var(--scrim-opacity), transparent); animation: fade var(--motion-short) ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  display: flex; flex-direction: column; width: 100%; max-width: var(--size-dialog); max-height: calc(100vh - 2 * var(--space-6));
  background: var(--md-surface-container-high); color: var(--md-on-surface); border-radius: var(--radius-8); box-shadow: var(--elevation-3); outline: none;
}
.modal-small { max-width: var(--size-dialog-small); }
.modal-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-2) var(--space-5); }
.modal-title { flex: 1; }
.modal-body { display: flex; flex-direction: column; gap: var(--gap-list); padding: var(--space-2) var(--space-5); overflow-y: auto; }
.modal-body > * { flex: none; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-4) var(--space-5); flex-wrap: wrap; }
.modal-foot:empty { display: none; }
.modal-editor { max-width: var(--size-content); background: transparent; box-shadow: var(--elevation-0); max-height: calc(100vh - 2 * var(--space-7)); }
.modal-body.modal-body-editor { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 0; }

.editor {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--note-bg, var(--note-default-bg)); color: var(--md-on-surface); border-radius: var(--radius-8);
}
.editor-modal { box-shadow: var(--elevation-3); border: var(--size-border) solid transparent; max-height: calc(100vh - 2 * var(--space-7)); }
.editor-modal.c-default { border-color: var(--note-default-outline); }
.editor.drop-target { outline: var(--size-focus-ring) dashed var(--md-primary); outline-offset: calc(-1 * var(--size-focus-offset)); }
.ed-top { display: none; }
.ed-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ed-images { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-4) 0; }
.ed-images:empty { display: none; }
.ed-images.imgs-2 { grid-template-columns: 1fr 1fr; }
.ed-images.imgs-3 { grid-template-columns: 1fr 1fr; }
.ed-images.imgs-many { grid-template-columns: 1fr 1fr 1fr; }
.ed-img { position: relative; background: var(--md-surface-variant); overflow: hidden; border-radius: var(--radius-8); }
.ed-images.imgs-1 .ed-img { max-height: var(--size-image-max); }
.ed-images:not(.imgs-1) .ed-img { aspect-ratio: 1; }
.ed-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-8); }
.ed-images.imgs-1 .ed-img img { object-fit: contain; max-height: var(--size-image-max); }
.ed-img-busy { display: flex; align-items: center; justify-content: center; padding: var(--space-4); color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12); }
.ed-img.img-missing::after {
  content: "Image not available offline"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12);
}
.ed-img-x { position: absolute; right: var(--space-2); bottom: var(--space-2); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); opacity: 0; }
.ed-img-x:hover { color: var(--md-inverse-on-surface); }
.ed-img:hover .ed-img-x, .ed-img-x:focus-visible { opacity: 1; }
@media (hover: none) { .ed-img-x { opacity: 1; } }
.ed-titlerow { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-2) 0 var(--space-4); }
.ed-title {
  flex: 1; border: 0; outline: none; resize: none; background: transparent; padding: var(--space-1) 0; overflow: hidden;
  font-size: var(--font-size-20); line-height: var(--line-height-20); font-weight: var(--font-weight-regular);
}
.ed-body { padding: 0 0 var(--space-1); }
.ed-text {
  display: block; width: 100%; border: 0; outline: none; resize: none; background: transparent; overflow: hidden;
  padding: var(--space-2) var(--space-4); font-size: var(--font-size-16); line-height: var(--line-height-16);
}
.ed-title::placeholder, .ed-text::placeholder, .ed-item-text::placeholder { color: var(--md-on-surface-variant); }
.ed-list { display: flex; flex-direction: column; gap: var(--gap-list); padding: var(--space-1) 0; }
.ed-item {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: 0 var(--space-2) 0 0;
  border-top: var(--size-border) solid transparent; border-bottom: var(--size-border) solid transparent;
}
.ed-item:focus-within { border-color: var(--md-outline-variant); }
.ed-item.indent { padding-left: calc(var(--size-checkbox) + var(--space-3)); }
.ed-item .cb-hit { height: var(--size-control); }
.ed-item-text {
  flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: transparent; overflow: hidden;
  padding: var(--space-2) 0; font-size: var(--font-size-16); line-height: var(--line-height-16);
}
.ed-item.checked .ed-item-text { text-decoration: line-through; color: var(--md-on-surface-variant); }
.ed-item-x { opacity: 0; }
.ed-item:hover .ed-item-x, .ed-item:focus-within .ed-item-x { opacity: 1; }
@media (hover: none) { .ed-item-x { opacity: 1; } }
/* checklist reorder (0.9.2): a 40px icon button at the row's left edge; shown on hover / focus on desktop, always on
   touch. Only the handle disables touch panning, so a swipe on the text still scrolls. Checked rows keep its space. */
.ed-drag {
  width: var(--size-control); height: var(--size-control); border-radius: var(--radius-4);
  opacity: 0; cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.ed-drag-space { flex: none; width: var(--size-control); height: var(--size-control); }
.ed-item:hover .ed-drag, .ed-item:focus-within .ed-drag, .ed-item.lifted .ed-drag, .ed-item.picked .ed-drag { opacity: 1; }
@media (hover: none) { .ed-drag { opacity: 1; } }
/* dragged state: the lifted row(s) on elevation 3 with the dragged state layer; the others make room (transforms) */
.ed-item.lifted, .ed-item.picked {
  z-index: var(--z-raised); background: var(--note-bg, var(--note-default-bg)); border-radius: var(--radius-4); box-shadow: var(--elevation-3);
}
.ed-item.lifted::before, .ed-item.picked::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: var(--state-dragged); pointer-events: none;
}
.ed-list-dragging > .ed-item:not(.lifted) { transition: transform var(--motion-short) var(--motion-easing-standard); }
html.is-item-dragging, html.is-item-dragging * { cursor: grabbing; }
html.is-item-dragging .ed-list { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (prefers-reduced-motion: reduce) { .ed-list-dragging > .ed-item:not(.lifted) { transition: none; } }
.ed-add-item, .ed-checked-head {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; height: var(--size-control);
  padding: 0 var(--space-4); border: 0; border-radius: var(--radius-4); background: transparent;
  color: var(--md-on-surface-variant); text-align: left;
}
.ed-add-item { font-size: var(--font-size-16); line-height: var(--line-height-16); }
.ed-add-item:hover { color: var(--md-on-surface); }
.ed-divider { border: 0; border-top: var(--size-border) solid var(--md-outline-variant); margin: var(--space-1) var(--space-4); color: var(--md-outline-variant); }
.ed-checked-head .icon { transform: rotate(-90deg); transition: transform var(--motion-short) ease; }
.ed-checked-head.open .icon { transform: none; }
.ed-labels { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-1) var(--space-4); }
.ed-labels:empty { display: none; }
.chip-edit { gap: var(--space-1); overflow: visible; padding-right: var(--space-2); }
.chip-edit > span { overflow: hidden; text-overflow: ellipsis; }
/* 40px button whose layout box is shrunk to the chip line with negative margins (icon stays 20px) */
.chip-x { margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) calc(-1 * var(--space-2)); color: inherit; }
.ed-meta {
  text-align: right; padding: var(--space-1) var(--space-4); color: var(--md-on-surface-variant);
  font-size: var(--font-size-12); line-height: var(--line-height-12);
}
.ed-toolbar { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2) var(--space-2); flex-wrap: wrap; }
/* formatting toolbar (0.7.0): one row of 40px icon buttons that scrolls sideways instead of wrapping (no jump) */
.ed-format-host:empty { display: none; }
.ed-format {
  display: flex; align-items: center; gap: var(--space-1); flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  padding: var(--space-1) max(var(--space-2), env(safe-area-inset-right)) 0 max(var(--space-2), env(safe-area-inset-left));
  scrollbar-width: none;
}
.ed-format::-webkit-scrollbar { display: none; }
.ed-preview {
  padding: var(--space-2) var(--space-4); min-height: calc(2 * var(--line-height-16) + 2 * var(--space-2));
  font-size: var(--font-size-16); line-height: var(--line-height-16); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
}
.ed-preview .md-pre { overflow-wrap: normal; }
.ed-readonly-text { cursor: default; }
.ed-preview-empty { color: var(--md-on-surface-variant); }
.ed-item-view { padding: var(--space-2) 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* formatting help dialog */
.modal-help { max-width: var(--size-dialog-wide); }
.help-table { width: 100%; border-collapse: collapse; }
.help-table th, .help-table td { padding: var(--space-2); text-align: left; vertical-align: top; border-bottom: var(--size-border) solid var(--md-outline-variant); }
.help-table th { color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12); font-weight: var(--font-weight-medium); }
.help-table .md-pre { white-space: pre; }
.help-out { white-space: pre-wrap; min-width: 0; }
.help-key { color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12); }
.ed-ro-note { color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12); padding-left: var(--space-2); }
.read-only .ed-title, .read-only .ed-text, .read-only .ed-item-text { cursor: default; }

/* ---------- popovers / menus ---------- */
.popover {
  position: fixed; z-index: var(--z-popover); inset: auto; margin: 0; border: 0; overflow-x: hidden; overflow-y: auto;
  padding: var(--space-2); max-width: calc(100vw - 2 * var(--space-2));
  background: var(--md-surface-container); color: var(--md-on-surface); border-radius: var(--radius-8); box-shadow: var(--elevation-2);
}
.swatches { display: grid; grid-template-columns: repeat(6, var(--size-control)); gap: var(--space-2); }
.swatch {
  display: flex; align-items: center; justify-content: center; width: var(--size-control); height: var(--size-control); padding: 0;
  border: var(--size-border) solid transparent; border-radius: var(--radius-full); background: var(--note-bg); color: var(--md-on-surface);
}
.swatch.c-default { border-color: var(--md-outline); }
.swatch.on { box-shadow: inset 0 0 0 var(--size-focus-ring) var(--md-primary); }
.swatch-none { position: absolute; width: var(--size-icon); height: var(--size-checkbox-border); background: var(--md-on-surface-variant); transform: rotate(-45deg); }
.menu { display: flex; flex-direction: column; gap: var(--gap-list); width: var(--size-menu); }
.menu-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; height: var(--size-control); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-4); background: transparent; color: var(--md-on-surface); text-align: left; font-size: var(--font-size-14);
}
.menu-label { flex: 1; }
.menu-hint { color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12); }
.menu-item:disabled { cursor: default; color: color-mix(in srgb, var(--md-on-surface) var(--state-disabled-content), transparent); }
.menu-item:disabled .menu-hint { color: inherit; }
.label-picker { display: flex; flex-direction: column; gap: var(--space-2); width: var(--size-menu); }
.lp-title { padding: 0 var(--space-2); font-weight: var(--font-weight-medium); }
.lp-input {
  width: 100%; height: var(--size-control); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-4);
  background: var(--md-surface-container-highest); color: var(--md-on-surface); font-size: var(--font-size-14);
}
.lp-input::placeholder { color: var(--md-on-surface-variant); }
.lp-list { display: flex; flex-direction: column; gap: var(--gap-list); max-height: var(--size-menu-list); overflow-y: auto; padding: var(--space-1) 0; }
.lp-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--radius-4); }
.lp-row label { flex: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-caption {
  padding: var(--space-1) var(--space-2) 0; color: var(--md-on-surface-variant);
  font-size: var(--font-size-12); line-height: var(--line-height-12); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-label);
}
.lp-empty { color: var(--md-on-surface-variant); padding: var(--space-2); font-size: var(--font-size-12); line-height: var(--line-height-12); }
.lp-create {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--size-control); padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-4); background: transparent; color: var(--md-on-surface); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-label);
}
.lp-error { color: var(--md-error); font-size: var(--font-size-12); line-height: var(--line-height-12); }
.lp-error:empty { display: none; }

/* ---------- toasts ---------- */
.toasts {
  position: fixed; left: var(--space-5); bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-2); min-width: var(--size-toast-min); max-width: var(--size-dialog);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-radius: var(--radius-4);
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); box-shadow: var(--elevation-3);
  animation: rise var(--motion-short) ease;
}
@keyframes rise { from { transform: translateY(var(--space-2)); opacity: 0; } }
.toast-msg { flex: 1; padding: var(--space-2) 0; }
.toast.error { border-left: var(--size-indicator) solid var(--md-error-container); }
.toast-action {
  height: var(--size-control); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-4);
  background: transparent; color: var(--md-inverse-primary); font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
}
.toast .icon-btn { color: inherit; }

/* ---------- forms, lock screen, settings ---------- */
form, .pin-fields { display: flex; flex-direction: column; gap: var(--gap-list); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-weight: var(--font-weight-medium); }
.field input, select, .el-row input, .lock-form input {
  height: var(--size-control); padding: 0 var(--space-3); border: var(--size-border) solid var(--md-outline); border-radius: var(--radius-4);
  background: var(--md-surface-container-lowest); color: var(--md-on-surface); font-size: var(--font-size-16);
}
select { font-size: var(--font-size-14); }
select:disabled {
  cursor: default; color: color-mix(in srgb, var(--md-on-surface) var(--state-disabled-content), transparent);
  border-color: color-mix(in srgb, var(--md-on-surface) var(--state-disabled-container), transparent);
}
.field input:focus, select:focus, .el-row input:focus { border-color: var(--md-primary); }
.field-hint, .pin-hint { color: var(--md-on-surface-variant); font-size: var(--font-size-12); line-height: var(--line-height-12); }
.form-error { color: var(--md-error); }
.form-error:empty { display: none; }
.pin-meter { display: flex; gap: var(--space-1); }
.pin-meter span { flex: 1; height: var(--size-indicator); border-radius: var(--radius-full); background: var(--md-outline-variant); }
.pin-meter[data-level="weak"] span:nth-child(1) { background: var(--md-error); }
.pin-meter[data-level="fair"] span:nth-child(-n+2) { background: var(--md-secondary); }
.pin-meter[data-level="good"] span { background: var(--md-primary); }
.honest, .notice {
  padding: var(--space-3); border-radius: var(--radius-8); background: var(--md-surface-container-high);
  font-size: var(--font-size-12); line-height: var(--line-height-12);
}
.notice { border-left: var(--size-indicator) solid var(--md-primary); font-size: var(--font-size-14); line-height: var(--line-height-14); }
.lock-root {
  min-height: 100vh; display: flex; justify-content: center; align-items: flex-start;
  padding: max(var(--space-5), env(safe-area-inset-top)) var(--space-4) max(var(--space-5), env(safe-area-inset-bottom));
}
.lock-card {
  display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: var(--size-dialog); margin: var(--space-6) auto;
  padding: var(--space-6); background: var(--md-surface-container-low); border: var(--size-border) solid var(--md-outline-variant); border-radius: var(--radius-8);
}
.lock-brand { display: flex; align-items: center; gap: var(--space-3); }
.lock-app { font-size: var(--font-size-16); line-height: var(--line-height-16); font-weight: var(--font-weight-medium); }
.intro, .steps { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-5); }
.lock-foot { display: flex; justify-content: center; }
.attempts { color: var(--md-error); }
.attempts:empty { display: none; }
.modal-settings { max-width: var(--size-dialog-wide); }
.modal-settings .modal-body { gap: 0; padding-top: 0; }
.set-section { display: flex; flex-direction: column; gap: var(--gap-list); padding: var(--space-4) 0; border-bottom: var(--size-border) solid var(--md-outline-variant); }
.set-section:last-child { border-bottom: 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.set-check { display: flex; align-items: flex-start; gap: var(--space-3); }
.set-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.diag-out, .compat-out { display: flex; flex-direction: column; gap: var(--gap-list); }
.diag-out:empty, .compat-out:empty { display: none; }
.diag-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--font-size-12); line-height: var(--line-height-12); }
.diag-mark { display: inline-block; width: var(--space-6); font-weight: var(--font-weight-medium); }
.diag-list li.ok .diag-mark { color: var(--md-primary); }
.diag-list li.bad .diag-mark { color: var(--md-error); }
.diag-pre {
  padding: var(--space-3); border-radius: var(--radius-8); background: var(--md-surface-container-highest);
  font-family: var(--font-family); font-size: var(--font-size-12); line-height: var(--line-height-12);
  overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.diag-problems { font-size: var(--font-size-12); line-height: var(--line-height-12); overflow-wrap: anywhere; }
.el-list { display: flex; flex-direction: column; gap: var(--gap-list); }
.el-row { display: flex; align-items: center; gap: var(--space-2); }
.el-row input { flex: 1; min-width: 0; }
.el-cat { flex: 0 1 auto; min-width: 0; max-width: var(--size-col); }
.el-caption { margin: var(--space-2) 0 0; color: var(--md-on-surface-variant); }
.el-empty { margin: 0; padding-left: calc(var(--size-control) + var(--space-2)); }
.el-icon { display: inline-flex; width: var(--size-control); justify-content: center; color: var(--md-on-surface-variant); flex: none; }

/* ---------- backup: reminder banner, progress, restore preview ---------- */
.banner-host { max-width: var(--size-content); margin: 0 auto var(--space-4); }
.banner-host:empty, .banner-host[hidden] { display: none; }
.banner {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-radius: var(--radius-8);
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font-size: var(--font-size-14); line-height: var(--line-height-14);
}
.banner-text { flex: 1 1 auto; padding: var(--space-2) 0; }
.banner .btn, .banner .icon-btn { color: inherit; }
.progress-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.progress {
  appearance: none; -webkit-appearance: none; display: block; width: 100%; height: var(--size-indicator);
  border: 0; border-radius: var(--radius-full); overflow: hidden;
  background: var(--md-surface-container-highest); color: var(--md-primary);
}
.progress::-webkit-progress-bar { background: var(--md-surface-container-highest); border-radius: var(--radius-full); }
.progress::-webkit-progress-value { background: var(--md-primary); border-radius: var(--radius-full); }
.progress::-moz-progress-bar { background: var(--md-primary); border-radius: var(--radius-full); }
.restore-list { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-5); }
.restore-counts { font-weight: var(--font-weight-medium); }

/* ---------- phone ---------- */
@media (max-width: 719px) {
  .topbar { gap: var(--space-1); padding-left: max(var(--space-2), env(safe-area-inset-left)); padding-right: max(var(--space-2), env(safe-area-inset-right)); }
  .brand, .hide-phone { display: none; }
  .sync-status { width: var(--size-control); padding: 0; }
  .sync-status .sync-text { display: none; }
  .sidebar {
    position: fixed; z-index: var(--z-drawer); top: 0; left: 0; bottom: 0; height: auto; width: min(var(--size-drawer), 85vw);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top)); transform: translateX(-105%); transition: transform var(--motion-medium) var(--motion-easing-standard);
    box-shadow: var(--elevation-1); background: var(--md-surface-container-low);
  }
  .app.drawer-open .sidebar { transform: none; }
  .app.sidebar-collapsed .sidebar { width: min(var(--size-drawer), 85vw); }
  .app.sidebar-collapsed .nav-text { display: inline; }
  .app.sidebar-collapsed .nav-item { grid-template-columns: var(--size-control) minmax(0, 1fr); width: 100%; padding: 0 var(--space-4) 0 0; }
  .app.sidebar-collapsed .cat-head { grid-template-columns: var(--size-control) minmax(0, 1fr) auto; }
  .app.sidebar-collapsed .rail-only { display: none; }
  .app.sidebar-collapsed .nav-labels-head { display: flex; }
  .app.sidebar-collapsed .nav-scroll { display: flex; }
  .app.sidebar-collapsed .nav-labels-head[hidden], .app.sidebar-collapsed .nav-scroll[hidden] { display: none; }
  .app.sidebar-collapsed .nav-foot { margin-top: 0; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: var(--z-drawer-backdrop); background: color-mix(in srgb, var(--md-scrim) var(--scrim-opacity), transparent); animation: fade var(--motion-medium) var(--motion-easing-standard); }
  .app.sidebar-expanding .nav-text { animation: none; }
  .main { padding: var(--space-2) max(var(--space-2), env(safe-area-inset-right)) var(--space-7) max(var(--space-2), env(safe-area-inset-left)); }
  .composer-host { margin: 0 auto var(--space-4); }
  .card-text { -webkit-line-clamp: 10; line-clamp: 10; }
  .toasts { left: var(--space-2); right: var(--space-2); bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; max-width: none; }
  .modal-backdrop { padding: var(--space-2); }
  .backdrop-editor { padding: 0; }
  .modal-editor { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: var(--radius-0); }
  .modal-editor .editor-modal { height: 100%; max-height: none; border-radius: var(--radius-0); border: 0; box-shadow: var(--elevation-0); }
  .ed-top {
    display: flex; align-items: center; gap: var(--space-1); position: sticky; top: 0;
    padding: calc(var(--space-1) + env(safe-area-inset-top)) var(--space-1) var(--space-1);
  }
  .ed-pin, .ed-archive, .ed-close { display: none; }
  .modal-editor .ed-toolbar {
    padding: var(--space-1) var(--space-1) calc(var(--space-2) + env(safe-area-inset-bottom)); flex-wrap: nowrap;
    border-top: var(--size-border) solid var(--md-outline-variant);
  }
  /* the formatting row sits directly above the action bar, i.e. above the keyboard once the editor is resized to
     the visual viewport (editor-modal.js) */
  .modal-editor .ed-format { padding-bottom: var(--space-1); border-top: var(--size-border) solid var(--md-outline-variant); }
  .modal-editor .ed-format-host:not(:empty) + .ed-toolbar { border-top: 0; }
  .help-table th:nth-child(3), .help-table td:nth-child(3) { display: none; }
  .lock-card { padding: var(--space-5); margin: 0 auto; }
  /* Edit labels: the category select takes its own line under the name */
  .modal-labels .el-row:not(.el-new) { flex-wrap: wrap; }
  .modal-labels .el-row:not(.el-new) input { flex-basis: calc(100% - var(--size-control) - var(--space-2)); }
  .modal-labels .el-cat { flex: 1 1 auto; max-width: none; margin-left: calc(var(--size-control) + var(--space-2)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}