/* Wefty's look ("Seam"): cool greys, one iris accent, 1 px lines instead of glows, flat surfaces with crisp edges.
   Light and dark come from the same tokens (light-dark() picks by the page's colour scheme, which util.js sets from
   Settings > Appearance or the system). The same sheet lays out a phone (tabs along the bottom, a note over
   everything), a Chromebook-size window (a rail, the list and the note side by side) and the PC app (a rail, folders,
   the list and the note). The page you write on is always the brightest surface. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/InterDisplay-SemiBold.woff2") format("woff2"); }
/* The two dyslexia-friendly fonts (js/reading.js; their licences beside them in fonts/). Only named by the rules
   that apply while one is chosen, so a browser only fetches them then. Lexend in its Latin and Latin Extended parts;
   OpenDyslexic whole, as its makers publish it (its name is reserved, so it's never cut down). */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Lexend-Regular.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; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Lexend-Regular-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: "Lexend"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Lexend-Bold.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; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Lexend-Bold-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: "OpenDyslexic"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/OpenDyslexic-Regular.woff2") format("woff2"); }
@font-face { font-family: "OpenDyslexic"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/OpenDyslexic-Bold.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  /* surfaces: page < surface < card; --page is the one you write on */
  --bg: light-dark(#f5f6f8, #0d0d17);
  --surface: light-dark(#ffffff, #13131f);
  --surface-2: light-dark(#eeeff2, #2c2d40);
  --card: light-dark(#ffffff, #212133);
  --page: light-dark(#ffffff, #212133);
  --field: light-dark(#ffffff, #151521);
  --sunken: light-dark(#eeeff2, #0d0d17);
  --raised: light-dark(#ffffff, #2e2e43);  /* menus, a step above the cards they open over */
  --selected: light-dark(#ffffff, #3e3e58);  /* the picked segment of a segmented control */
  --line: light-dark(#dde0e4, #37374c);
  --line-soft: light-dark(#e6e8eb, #2c2c3e);
  --line-strong: light-dark(#c9ccd1, #494961);
  --control: light-dark(#787c84, #83839e);
  --thread: light-dark(#dde0e4, #57517f);  /* the dividers (a quiet lavender in dark) */
  --edge-hi: light-dark(transparent, rgba(255, 255, 255, .055));  /* the 1 px highlight along a raised thing's top in dark */
  /* words */
  --text: light-dark(#0d0e11, #e7e7ef);
  --text-2: light-dark(#494d55, #c8c8d6);
  --muted: light-dark(#5f636c, #a5a5b8);
  --placeholder: light-dark(#6f737c, #9797aa);
  --faint: light-dark(#a1a5ac, #6a6a7d);
  /* the brand's iris on each screen's main button (primary buttons, the round new-note button, the PIN pad's OK, the
     chat's Send), with white words in both themes */
  --primary: light-dark(#5346e7, #6660e9);
  --primary-hover: light-dark(#4438c2, #5d53df);
  --primary-press: light-dark(#342d97, #5347ce);
  --on-primary: #ffffff;
  /* the accent: the marks (on, done, picked, focused, progress) and the soft purples. In light it's the same iris; in
     dark a pale lavender with deep indigo on it, so only the main button is the bright iris */
  --accent: light-dark(#5346e7, #a2a2ec);
  --accent-hover: light-dark(#4438c2, #9796e0);
  --accent-press: light-dark(#342d97, #9291da);
  --accent-ink: light-dark(#4438c2, #bcbcff);
  --accent-wash: light-dark(#f4f6ff, #282845);
  --accent-soft: light-dark(#e9ecff, #363367);
  --accent-line: light-dark(#b2bcff, #605bc1);
  --accent-2: light-dark(#a099f2, #8382eb);  /* the second and third steps of things drawn in parts from the accent */
  --accent-3: light-dark(#cfcbf8, #6660e9);
  /* Words picked to copy (1.19.1; the owner: "nor highlighting text at all": the soft purple they had, --accent-soft,
     was barely there on a white page, about 1.2 to 1). --pick, everywhere words show (the Read view, Chat, Today...),
     as plain as a browser's own: about 1.6 to 1 on white, 2 on the dark page. --pick-see is the same colour seen
     through, for the note's boxes, which draw bold, underlines and ==highlights== under their own letters. */
  --pick: light-dark(#c8c4f7, #4c4992);
  --pick-see: light-dark(rgb(83 70 231 / .32), rgb(119 113 241 / .5));
  --on-accent: light-dark(#ffffff, #1c125a);
  --on-accent-warn: light-dark(#ffd27a, #773f05);  /* a paused dot on the accent (the note-taker's bar at the top, in light) */
  --focus: light-dark(#6c6dfa, #a1a1fd);
  --brand: light-dark(#5346e7, #6660e9);
  /* meaning */
  --danger: light-dark(#cb242d, #fe9592);
  --warn: light-dark(#9a5505, #ffc96a);
  --ok: light-dark(#0f7845, #6ce0a7);
  --danger-soft: light-dark(#fae9ea, #4d2426);
  --warn-soft: light-dark(#f3ebe1, #442f13);
  --ok-soft: light-dark(#e7f2ec, #173a2c);
  --danger-fill: light-dark(#cb242d, #4d2426);
  --on-danger-fill: light-dark(#ffffff, #fe9592);
  /* ==highlighted== words (a highlighter's yellow, soft enough that every word colour still reads on it) */
  --highlight: light-dark(#fff0a8, #443804);
  /* the reading aids (js/reading.js): softer letters and soft page colours for dyslexia-friendly text (the dark ones
     muted), and Quick read's colours behind the first letters of each word */
  --reading-text: light-dark(#25272d, #dcdbe4);
  --tint-cream: light-dark(#fbf6e8, #282217);
  --tint-peach: light-dark(#fdf0e7, #2c2018);
  --tint-mint: light-dark(#eef8f1, #1a261f);
  --tint-sky: light-dark(#ecf3fc, #19242e);
  --tint-lilac: light-dark(#f4f0fc, #261f2f);
  --quick-blue: light-dark(#d9e6ff, #1d395b);
  --quick-yellow: light-dark(#ffe98f, #443808);
  --quick-green: light-dark(#d3f2dc, #1b412a);
  --quick-pink: light-dark(#ffdbe9, #55243e);
  --quick-purple: light-dark(#e8ddff, #3c2d5f);
  /* toasts are always graphite */
  --toast: light-dark(#17191c, #2d2d40);
  --toast-edge: light-dark(#17191c, #474860);
  --on-toast: #f5f6f8;
  --toast-action: #b2bcff;
  --toast-danger: #fb817f;
  --toast-ok: #5ad69b;
  /* folder dots (never text) */
  --tag-slate: light-dark(#7c8799, #a1abbe);
  --tag-sky: light-dark(#2591c4, #53b6eb);
  --tag-amber: light-dark(#b67700, #de9c31);
  --tag-green: light-dark(#429c5a, #69c27e);
  --tag-coral: light-dark(#d15e49, #fb836d);
  --tag-teal: light-dark(#009b95, #41c1ba);
  --tag-rose: light-dark(#c95a8b, #f37fb0);

  --shadow-1: 0 0 0 1px light-dark(rgba(13, 14, 17, .04), rgba(255, 255, 255, .02)), 0 1px 2px light-dark(rgba(13, 14, 17, .06), rgba(0, 0, 0, .5));
  --shadow-2: 0 1px 0 light-dark(transparent, rgba(255, 255, 255, .04)) inset, 0 2px 4px light-dark(rgba(13, 14, 17, .05), transparent), 0 8px 20px -4px light-dark(rgba(13, 14, 17, .10), rgba(0, 0, 0, .55));
  --shadow-3: 0 1px 0 light-dark(transparent, rgba(255, 255, 255, .05)) inset, 0 4px 10px light-dark(rgba(13, 14, 17, .06), transparent), 0 20px 48px -8px light-dark(rgba(13, 14, 17, .22), rgba(0, 0, 0, .7));
  --shadow-fab: 0 1px 2px light-dark(rgba(13, 14, 17, .16), rgba(0, 0, 0, .45)), 0 6px 16px -4px light-dark(rgba(52, 45, 151, .38), rgba(0, 0, 0, .6));
  --scrim: light-dark(rgba(13, 14, 17, .38), rgba(0, 0, 0, .56));
  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;
  --font: "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  /* single-storey a (as in the wordmark), l with a tail and I with serifs (HCl never reads HCI), round quotes */
  --font-features: "cv05", "cv08", "cv11", "ss03";
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.3, 1.3, .5, 1);
  --d-1: 90ms; --d-2: 160ms; --d-3: 240ms;
  --notch: env(safe-area-inset-top, 0px);
  --safe-top: var(--notch);  /* what top bars pad by: the notch, and the note-taker's bar while it shows */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Pure black (Settings > Appearance, per device, never the default; js/theme.js sets html[data-black] only while dark
   shows): for phones with black (OLED) screens. Only the canvas goes black and the words a touch softer; cards, menus,
   lines, the iris and the lavender stay as above, so cards still stand out. Each value is a light-dark() pair too, so
   it can never change light mode. */
:root[data-black] {
  --bg: light-dark(#f5f6f8, #000000);
  --surface: light-dark(#ffffff, #000000);
  --sunken: light-dark(#eeeff2, #000000);
  --page: light-dark(#ffffff, #000000);
  --field: light-dark(#ffffff, #0a0a12);
  --text: light-dark(#0d0e11, #dddde4);
  --reading-text: light-dark(#25272d, #d2d2da);
}
/* Sheets stay cards in Pure black, and so does the note-taker's screen from 700 px (a dialog there; on a phone it's
   the whole screen, the canvas): what they hold on --page (a flash card's front, Learn's question, empty tick boxes)
   takes the card's colour, as in dark, never a black hole. (In light --card and --page are both white.) */
:root[data-black] .sheet { --page: var(--card); }
@media (min-width: 700px) { :root[data-black] .nt { --page: var(--card); } }

* { box-sizing: border-box; }
/* The font shorthand resets these on every element that uses it, so they're put back everywhere. */
*, ::before, ::after { font-feature-settings: var(--font-features) !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 400 15px/22px var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--pick); color: var(--text); }
/* Windows' high contrast colours: the system's own (the browser forces these too; said, so nothing here fights it) */
@media (forced-colors: active) { ::selection { background: Highlight; color: HighlightText; } }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::placeholder { color: var(--placeholder); opacity: 1; }
/* Thin scrollbars where a mouse or a trackpad uses them (the PC, a Chromebook). A touch screen keeps its own, which
   float over the page: Chrome on a phone draws styled ones as old-style bars that take room, with a white square where
   two meet (1.16.1: a phone's Today lost 10 px to one and showed a sideways bar and that square under it). */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--control); }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
}
.num, .count, .when, .head-count, .progress, .t-meta { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ the mark and the wordmark */

/* The mark (util.js V.mark): in colour where it's the brand (the rail, the wordmark); one colour (currentColor) for
   the faint ones in empty lists. The wordmark's box reaches down to the y's tail, so its height is the mark's size
   (34 px; 38 px at the start) times 96.37 / 78.57. */
.mark { display: block; flex: none; color: var(--brand); }
.wordmark { display: block; height: 41.7px; width: auto; }
.wordmark .wm-text { fill: var(--text); }
#boot { display: grid; place-items: center; height: 100vh; height: 100dvh; }
#boot .wordmark { height: 46.6px; animation: arrive var(--d-3) var(--ease-out) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(4px); } }
/* Out of sight (the PC app keeps its page running in the tray): nothing moves, so nothing needs drawing. */
html.away *, html.away *::before, html.away *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------ the frame: tabs along the bottom, a rail when wide

   Four tabs (Today, Notes, Share, Chat). The one you're on has the logo's thread, a small wave (util.js V.weave),
   between its icon and its name: no pill behind it any more. Your picture (js/profile.js) is at the right of each
   screen's top row on a phone, and at the foot of the rail when wide. */

#app.ready:not(.gate) {
  display: grid; height: 100vh; height: 100dvh;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "view" "tabs";
}
.view { grid-area: view; overflow: auto; min-height: 0; position: relative; }
.view[data-tab=notes] { overflow: hidden; }

.tabs {
  grid-area: tabs; display: flex; justify-content: space-around;
  padding: 0 calc(6px + env(safe-area-inset-right, 0px)) var(--safe-bottom) calc(6px + env(safe-area-inset-left, 0px));
  min-height: 64px; background: var(--surface); border-top: 1px solid var(--line);
}
.rail-home, .rail-spacer, .tabs .rail-me { display: none; }
.tab {
  flex: 1; max-width: 120px; min-width: 0; display: grid; grid-template-rows: 24px 6px 15px; row-gap: 3px; justify-items: center;
  align-content: center; min-height: 64px; background: none; border: none; padding: 6px 2px; color: var(--muted);
  font: 500 12px/15px var(--font);
}
.tab-icon { position: relative; display: block; width: 24px; height: 24px; }
.tab .icon { width: 24px; height: 24px; }
.weave { display: block; width: 24px; height: 6px; overflow: visible; color: var(--accent); }
.weave path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tab .weave { visibility: hidden; }
.tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab.on { color: var(--text); }
.tab.on .tab-icon { color: var(--accent-ink); }
.tab.on .tab-label { font-weight: 600; }
.tab.on .weave { visibility: visible; }
@media (hover: hover) { .tab:not(.on):hover { color: var(--text); } }
.badge {
  position: absolute; top: -5px; left: 15px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font: 600 10.5px/18px var(--font); text-align: center;
  box-shadow: 0 0 0 2px var(--surface); font-variant-numeric: tabular-nums;
}
/* Chat's dot (1.18): an answer is being written while another screen shows. It sits where the badge would, and only
   when there's no number; it breathes gently (still with reduced motion, and while Wefty is out of sight). */
.tab-dot {
  position: absolute; top: -2px; left: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface); animation: tab-dot-breathe 1.8s ease-in-out infinite;
}
@keyframes tab-dot-breathe { 50% { opacity: .4; } }
@media (forced-colors: active) { .tab-dot { background: Highlight; } }
/* Settings on a phone is a page of its own: its back arrow (and Back) leave it, so the tabs make way. */
@media (max-width: 899px) { #app.ready[data-view=settings] .tabs { display: none; } }

@media (min-width: 900px) {
  #app.ready:not(.gate) {
    grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "tabs view";
  }
  .tabs {
    flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px; padding: 16px 0 14px;
    border-top: none; border-right: 1px solid var(--line); background: var(--bg); min-height: 0; overflow: auto;
  }
  /* (the logo is a button to Today, 1.17: 52 px to point at, the mark where it always was) */
  .rail-home {
    display: grid; place-items: center; flex: none; width: 52px; height: 52px; margin: -11px 0 5px; padding: 0;
    border: none; border-radius: 14px; background: none;
  }
  .rail-spacer { display: block; flex: 1; min-height: 12px; }
  .tab {
    flex: none; width: 64px; min-height: 0; grid-template-rows: 22px 6px 14px; padding: 8px 0 6px; border-radius: 12px;
    font-size: 11.5px; line-height: 14px;
  }
  .tab-icon, .tab .icon { width: 22px; height: 22px; }
  .tab .weave { width: 20px; }
  .badge { top: -6px; left: 13px; box-shadow: 0 0 0 2px var(--bg); }
  .tab-dot { top: -3px; left: 15px; box-shadow: 0 0 0 2px var(--bg); }
  .tabs .rail-me { display: grid; width: 52px; height: 52px; margin-top: 6px; }
  .rail-me .av { width: 36px; height: 36px; }
  .rail-me[data-mark=ring]::after { width: 44px; height: 44px; }
}
@media (min-width: 900px) and (hover: hover) { .tab:hover, .rail-home:hover { background: var(--surface-2); } }

/* Your picture: your first letter on the lavender, and a mark for how syncing goes (js/profile.js): nothing when all
   is well, a thin turning ring while a sync takes a while, an amber dot while changes wait here, a red one when the
   cloud can't be reached. */
.me {
  position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: none; border-radius: 50%; background: none; color: inherit;
}
.me.on { background: var(--surface-2); }
.av {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); font: 600 15px/1 var(--font);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.av .dot { display: none; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--bg); }
/* (changes made here still going up: a calm iris dot, until they've reached the cloud; amber and red win over it) */
.me[data-unsent] .dot, .av[data-unsent] > .dot { display: block; background: var(--accent); }
.me[data-mark=warn] .dot, .av[data-mark=warn] > .dot { display: block; background: var(--warn); }
.me[data-mark=bad] .dot, .av[data-mark=bad] > .dot { display: block; background: var(--danger); }
@media (forced-colors: active) {
  .me[data-unsent] .dot, .av[data-unsent] > .dot, .me[data-mark=warn] .dot, .av[data-mark=warn] > .dot,
  .me[data-mark=bad] .dot, .av[data-mark=bad] > .dot { forced-color-adjust: none; background: Mark; outline: 2px solid CanvasText; }
}
.me[data-mark=ring]::after {
  content: ""; position: absolute; width: 42px; height: 42px; border-radius: 50%; border: 2px solid transparent;
  border-top-color: var(--accent); border-right-color: var(--accent); animation: spin 1.1s linear infinite; pointer-events: none;
}
@media (hover: hover) { .me:hover .av { box-shadow: inset 0 0 0 1.5px var(--accent); } }

/* Each screen's one row at the top (util.js V.appHead): a title (or the logo, on Today), the screen's own buttons and
   your picture; a back arrow first where there is one. It pads for the notch and the note-taker's bar (--safe-top),
   and for a phone's rounded sides in landscape. */
header.app-head {
  display: flex; align-items: center; gap: 2px; min-height: 60px;
  padding: calc(8px + var(--safe-top)) env(safe-area-inset-right, 0px) 8px env(safe-area-inset-left, 0px);
}
.app-head .head-title { flex: 1; min-width: 0; display: grid; }
.app-head .head-grow { flex: 1; }
.app-head .head-sub { margin: 0; color: var(--muted); font: 500 13px/18px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-head .head-mark { flex: none; margin-right: 8px; }
/* (on Today the logo is a button back to its top, 1.17: 44 px to tap, the mark where it was) */
.app-head .head-home {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 1px 0 -7px; padding: 0;
  border: none; border-radius: 12px; background: none;
}
.app-head .head-home .head-mark { margin: 0; }
@media (hover: hover) { .app-head .head-home:hover { background: var(--surface-2); } }
.app-head .head-back { margin-left: -10px; margin-right: 2px; }
.app-head > .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
.app-head > .btn { flex: none; margin: 0 4px; }
.list-title .head-me { margin-left: 2px; }
@media (max-width: 899px) {
  .page > header.app-head { margin-right: -12px; }  /* (the picture sits by the screen's edge, as in the mockup) */
}
@media (min-width: 900px) {
  .app-head .head-me, .list-title .head-me { display: none; }  /* (at the foot of the rail instead) */
  .app-head .head-back { display: none; }  /* (wide, Settings is left from the rail) */
}

/* The picture's menu: what's going on first (only when something is), who you are, then Settings and the rest. */
.menu.profile-menu { width: min(304px, calc(100vw - 16px)); padding: 6px; border-radius: 14px; }
.menu-sep { height: 1px; margin: 6px 8px; background: var(--line); }
.menu-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 10px; }
.menu-head .av { width: 40px; height: 40px; font-size: 17px; flex: none; }
.menu-head .av .dot { box-shadow: 0 0 0 2.5px var(--raised); }
.mh-text { display: grid; gap: 2px; min-width: 0; }
.mh-text strong { font: 600 14.5px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-text span { color: var(--muted); font: 500 13px/18px var(--font); }
.profile-menu .menu-item { min-height: 48px; gap: 12px; padding: 0 12px; font-size: 15px; border-radius: 10px; }
.profile-menu .menu-item .icon { width: 20px; height: 20px; }
.m-status { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 12px; margin-bottom: 6px; border-radius: 10px; }
.m-status.warn { background: var(--warn-soft); }
.m-status.bad { background: var(--danger-soft); }
.m-status.send { background: var(--accent-soft); }
.m-status.send .ms-ic { color: var(--accent-ink); }
.ms-ic { display: grid; place-items: center; color: var(--warn); }
.m-status.bad .ms-ic { color: var(--danger); }
.ms-ic .icon { width: 20px; height: 20px; }
.ms-text { flex: 1; min-width: 0; display: grid; }
.ms-text strong { color: var(--text); font: 600 14px/20px var(--font); }
.ms-text span { color: var(--text-2); font: 400 13px/18px var(--font); }
.ms-link {
  flex: none; min-height: 44px; padding: 0 12px; border: none; border-radius: 8px; background: none;
  color: var(--accent-ink); font: 600 14px/1 var(--font);
}
@media (hover: hover) { .ms-link:hover { background: color-mix(in oklab, var(--text) 6%, transparent); } }
.held-list { display: grid; gap: 2px; margin: 8px 0 0; }
.held-note {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 10px; border: none; border-radius: 10px;
  background: none; color: var(--text); text-align: left; font: 500 15px/20px var(--font);
}
.held-note > span:not(.icon) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.held-note .icon { color: var(--muted); }
@media (hover: hover) { .held-note:hover { background: var(--surface-2); } }
.frame-trouble { padding-top: calc(48px + var(--safe-top)); display: grid; justify-items: start; gap: 12px; }

/* ==== 1.16: Frame (A) ==== */
/* 600-899 px (an iPad upright, a narrow PC window, a big phone on its side): the phone's layout, but Today, Share and
   Settings keep a column of at most 640 px, so their tiles and rows aren't stretched across the screen. */
@media (min-width: 600px) and (max-width: 899px) {
  .view[data-tab=today] > .page, .view[data-tab=send] > .page, .view[data-tab=files] > .page,
  .view[data-tab=clips] > .page, .view[data-tab=settings] > .page { max-width: 640px; }
}
/* Today's frame (js/today.js): the logo at the top, the greeting under it. Package B lays out the rest. */
.today-greet { padding: 4px 0 8px; }
.today-greet h1 { margin: 0; font: 600 28px/34px var(--font-display); letter-spacing: -.02em; }
.today-date { margin: 4px 0 0; color: var(--muted); font: 500 14px/20px var(--font); }
.today-cols { display: grid; gap: 16px; }
@media (min-width: 900px) { .today-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Share's switch: Send · Files · Clipboard (js/share.js). Package C styles it further. */
.segmented.share-switch { display: grid; width: 100%; margin: 0 0 12px; }
.segmented.share-switch button { position: relative; min-width: 0; }
.share-switch .badge { position: static; margin-left: 2px; box-shadow: none; }
@media (max-width: 339px) { .share-switch .share-label { font-size: 12.5px; } .share-switch button .icon { display: none; } }
.send-title { margin: 4px 2px 10px; font: 600 15px/22px var(--font); color: var(--text-2); }
/* ==== end Frame ==== */

/* ------------------------------------------------------------ bits used everywhere */

.icon { display: inline-flex; width: 18px; height: 18px; flex: none; }
.icon svg { width: 100%; height: 100%; }
.icon.big { width: 34px; height: 34px; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line-strong); color: var(--text);
  font: 600 14px/18px var(--font); white-space: nowrap;
  transition: background var(--d-1), border-color var(--d-1), color var(--d-1), transform var(--d-1) var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover { background: var(--surface-2); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; }
/* Each screen's main button: the brand's iris with white words (--primary), in both themes. In dark it catches a 1 px
   highlight along its top, so it reads as raised rather than as a flat heavy block. */
.btn.primary { background: var(--primary); border-color: transparent; color: var(--on-primary); }
:where(:root[data-theme="dark"]) .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn.primary:active:not(:disabled) { background: var(--primary-press); }
/* A second strong button on a screen that already has its main one (the round + or New note above the list): the
   Review card's Review button (js/review.js) and an empty list's New note (js/notes.js). The same solid iris in light;
   in dark the soft purple with lavender words and a thin iris edge, so the main action stays the one solid iris
   shape. Its hover and press mix in the iris edge (--accent-line). New chat on a wide Chat screen gets this same look
   below (.chat-side-head .btn.primary, from 900 px only: on a phone it's that screen's main button); a test keeps the
   two the same. */
.btn.tonal { background: light-dark(var(--primary), var(--accent-soft)); border-color: transparent; color: light-dark(var(--on-primary), var(--accent-ink)); }
:where(:root[data-theme="dark"]) .btn.tonal { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-line) 60%, transparent); }
.btn.tonal:hover:not(:disabled) { background: light-dark(var(--primary-hover), color-mix(in oklab, var(--accent-soft) 84%, var(--accent-line))); }
.btn.tonal:active:not(:disabled) { background: light-dark(var(--primary-press), color-mix(in oklab, var(--accent-soft) 72%, var(--accent-line))); }
.btn.danger { background: var(--danger-fill); border-color: transparent; color: var(--on-danger-fill); }
.btn.danger:hover:not(:disabled) { filter: brightness(.94); }
.btn.danger-quiet { background: transparent; border-color: transparent; color: var(--danger); }
.btn.danger-quiet:hover { background: var(--danger-soft); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.quiet:hover { background: var(--surface-2); color: var(--text); }
.btn.wide-btn { width: 100%; min-height: 48px; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); flex: none;
  background: transparent; border: 1px solid transparent; color: var(--text-2); padding: 0;
  transition: background var(--d-1), color var(--d-1);
}
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn::after { content: ""; position: absolute; inset: -2px; }  /* a 44 px target round a 40 px button */
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.on { background: var(--accent-soft); color: var(--accent-ink); }
.icon-btn.tiny { width: 30px; height: 30px; border-radius: 8px; }
.icon-btn.tiny .icon { width: 17px; height: 17px; }
.icon-btn.tiny::after { inset: -7px; }
.link-btn { background: none; border: none; color: var(--accent-ink); padding: 10px 0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; justify-self: center; }
kbd {
  font: 500 11px/1 var(--font); color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: var(--r-xs); padding: 3px 5px; background: var(--surface);
}

.field {
  width: 100%; min-height: 48px; background: var(--field); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 12px 14px; color: var(--text); outline: none; font: 400 15px/22px var(--font);
  transition: border-color var(--d-1), box-shadow var(--d-1);
}
.field:focus { border-color: var(--accent); box-shadow: var(--ring); }
textarea.field { resize: vertical; min-height: 48px; }
.label { display: grid; gap: 6px; font: 500 13px/18px var(--font); color: var(--text-2); margin: 14px 0 0; }
.hint, .muted { color: var(--muted); font-size: 13.5px; line-height: 20px; }
.error-text { color: var(--danger); font-size: 13.5px; min-height: 1em; margin: 8px 0; }
.error-text:empty { display: none; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.section, .list-section {
  display: flex; align-items: baseline; gap: 8px; color: var(--muted); font: 600 13px/18px var(--font);
  margin: 22px 2px 10px;
}
.page { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.page-head, .list-title {
  display: flex; align-items: center; gap: 10px; min-height: 64px;
  padding: calc(14px + var(--safe-top)) 4px 10px;
}
.page-head h1, .list-title h1 {
  margin: 0; font: 600 28px/34px var(--font-display); letter-spacing: -.02em; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page > h1 { font: 600 28px/34px var(--font-display); letter-spacing: -.02em; margin: 18px 4px 16px; }
.empty { text-align: center; color: var(--muted); padding: 56px 16px; display: grid; justify-items: center; gap: 14px; }
.empty p { margin: 0; max-width: 300px; }
.empty .mark { color: var(--faint); }
.empty.small { padding: 28px 12px; }

.chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; height: 36px; padding: 0 13px;
  border: 1px solid var(--line); background: var(--card); color: var(--text-2); border-radius: var(--r-md);
  font: 500 14px/1 var(--font); white-space: nowrap;
  transition: background var(--d-2) var(--ease-spring), color var(--d-2), border-color var(--d-2);
}
.chip:hover { border-color: var(--line-strong); }
.chip::after { content: ""; position: absolute; inset: -4px 0; }  /* 44 px tall to a finger, without overlapping */
.chip .icon { width: 16px; height: 16px; }
.chip .count { color: var(--muted); font-weight: 500; }
/* The picked chip: a black pill in light; in dark a soft iris fill with an iris edge and off-white words (a white
   pill was the brightest thing on the screen), its count lavender. */
.chip.on { background: light-dark(var(--text), var(--accent-soft)); border-color: light-dark(var(--text), var(--accent-line)); color: light-dark(var(--bg), var(--text)); font-weight: 600; }
.chip.on .count { color: light-dark(color-mix(in srgb, var(--bg) 70%, transparent), var(--accent-ink)); }
.chip.add { padding: 0 10px; }
.emoji { font-size: 15px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.dot { width: 8px; height: 8px; border-radius: 2.5px; flex: none; display: inline-block; background: var(--tag-slate); }
.dot.slate { background: var(--tag-slate); } .dot.sky { background: var(--tag-sky); } .dot.amber { background: var(--tag-amber); }
.dot.green { background: var(--tag-green); } .dot.coral { background: var(--tag-coral); } .dot.teal { background: var(--tag-teal); }
.dot.rose { background: var(--tag-rose); }

.switch {
  appearance: none; width: 44px; height: 26px; border-radius: 99px; position: relative; flex: none; cursor: pointer; margin: 0;
  background: var(--surface-2); border: 1.5px solid var(--control); transition: background var(--d-2), border-color var(--d-2);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--control);
  transition: transform var(--d-2) var(--ease-spring), background var(--d-2);
}
.switch:checked { background: var(--accent); border-color: var(--accent); }
.switch:checked::after { transform: translateX(18px); background: light-dark(#fff, var(--on-accent)); }  /* (dark: indigo on the pale track) */

.bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; flex: 1; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s var(--ease-out); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ dialogs, menus, toasts */

#layers { position: relative; z-index: 50; }
.layer {
  position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity var(--d-2) var(--ease-out); z-index: 60;
}
.layer.shown { opacity: 1; }
.layer.leaving { opacity: 0; transition-timing-function: var(--ease-in); }
.sheet {
  position: relative; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-3);
  padding: 20px 20px calc(16px + var(--safe-bottom));
  transform: translateY(24px); transition: transform var(--d-3) var(--ease-out);
}
.sheet::before {  /* the grabber */
  content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px;
  background: var(--line-strong);
}
.layer.shown .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 0 0 6px; }
.sheet-head h2 { flex: 1; margin: 0; font: 600 17px/24px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-head .icon-btn { margin: -6px -8px -6px 0; }
.sheet-body { overflow: auto; padding: 6px 0 12px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; }
.sheet-body > p { margin: 6px 0; color: var(--text-2); }
.sheet-body > .field:first-child { margin-top: 6px; }
.sheet-actions {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding-top: 14px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; border-top: 1px solid var(--line-soft);
}
@media (max-width: 699px) {
  .sheet-actions:not(:has(> :nth-child(3))) > .btn { flex: 1; min-height: 48px; }
}
@media (min-width: 700px) {
  .layer { align-items: center; padding: 24px; }
  .sheet { border-radius: var(--r-xl); padding-bottom: 18px; transform: translateY(8px) scale(.98); max-height: 86vh; }
  .sheet::before { display: none; }
  .sheet.wide { max-width: 860px; }
}
.menu-layer { background: transparent; display: block; opacity: 1; }
/* Menus float: in dark a step lighter than the cards they open over, with a stronger edge. */
.menu {
  position: fixed; min-width: 220px; background: var(--raised); border: 1px solid light-dark(var(--line), var(--line-strong));
  border-radius: 12px; padding: 6px; box-shadow: var(--shadow-3);
  /* (a short screen, a phone on its side: the menu scrolls rather than leave its last items below the edge) */
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
}
.menu-item {
  display: flex; width: 100%; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px;
  background: none; border: none; text-align: left; color: var(--text); font: 500 14px/18px var(--font);
}
.menu-item .icon { color: var(--muted); }
.menu-item:hover, .menu-item:focus { background: light-dark(var(--surface-2), color-mix(in oklab, var(--text) 6%, transparent)); outline: none; }
.menu-item.danger, .menu-item.danger .icon { color: var(--danger); }
.menu-item:disabled { opacity: .45; cursor: default; }
.menu:focus { outline: none; }  /* (a menu opened by a pointer has the keyboard itself, nothing lit: V.menu `pointer`) */

/* "More options" (1.19.1, V.contextMenu): what's acted on shows it while its menu is open; a finger's menu has rows a
   finger can hit.
   A finger's long press, one rule (1.19.8; the owner: "sometimes it selects text, or sometimes vice versa"): on a touch
   screen nothing picks words but the words people read or write (V.WORDS in js/util.js, the same list: a note's words,
   its title and Read view, Chat's messages, the note-taker's transcript, an announcement) and the boxes typed in. So a
   long press on a thing (a card, a row, a chip, a day, a button, a setting) is only ever Wefty's (its menu, picking or
   dragging) and never the phone's word picking or callout, even an inch off the thing; on words it's only ever the
   phone's (handles, Copy). Buttons inside words stay things. Only where a finger is the pointer (a phone, a tablet):
   a touch-screen Chromebook or PC with a trackpad or mouse picks any words with it, as ever. */
.ctx-open { outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: -2px; }
@media (pointer: coarse) {
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  :is(.ctx-words, .blocks, .note-title, .read-view, .chat-reply-body, .chat-you-text, .chat-note, .nt-words, .news-text, .news-note-body,
    .ai-check, .ai-gemini-net, .ai-gemini-times, .ai-gemini-first, textarea, select, [contenteditable]:not([contenteditable="false"]),
    input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file])) {
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  }
  :is(.ctx-words, .blocks, .read-view, .chat-reply-body, .chat-you-text, .chat-note, .nt-words, .news-text, .news-note-body,
    .ai-check, .ai-gemini-net, .ai-gemini-times, .ai-gemini-first) :is(button, [role=button], label, summary, img, input[type=checkbox], input[type=radio]) {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  .ctx-menu .menu-item { min-height: 44px; }
}

#toasts {
  position: fixed; left: 50%; bottom: calc(80px + var(--safe-bottom)); transform: translateX(-50%); z-index: 90;
  display: grid; gap: 8px; width: min(calc(100vw - 32px), 440px); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 8px 8px 16px;
  background: var(--toast); border: 1px solid var(--toast-edge); color: var(--on-toast); border-radius: 12px;
  box-shadow: var(--shadow-3); font: 500 14px/20px var(--font);
  animation: rise var(--d-3) var(--ease-out);
}
.toast > span:not(.icon) { flex: 1; padding: 4px 0; }
.toast .icon { width: 18px; height: 18px; color: var(--toast-ok); }
.toast.err .icon { color: var(--toast-danger); }
.toast.leaving { opacity: 0; transform: translateY(4px); transition: opacity var(--d-2) var(--ease-in), transform var(--d-2) var(--ease-in); }
.toast-action {
  background: none; border: none; color: var(--toast-action); font: 600 14px/1 var(--font); min-height: 36px; padding: 0 10px;
  border-radius: 8px;
}
.toast-action:hover { background: rgba(255, 255, 255, .08); }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
@media (min-width: 900px) { #toasts { bottom: 24px; left: auto; right: 24px; transform: none; width: 400px; } }

/* A card for what just arrived (util.js's V.notice, js/arrive.js): where toasts come up, above them, on the page's
   own surface (light or dark) with the picture. Never a dialog: nothing behind it waits for it. */
.notice {
  pointer-events: auto; position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px;
  align-items: start; padding: 12px 6px 12px 12px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line); color: var(--text); box-shadow: var(--shadow-3);
  animation: rise var(--d-3) var(--ease-out);
}
.notice.leaving { opacity: 0; transform: translateY(4px); transition: opacity var(--d-2) var(--ease-in), transform var(--d-2) var(--ease-in); }
.notice-picture {
  width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center;
  background: var(--surface-2); color: var(--muted);
}
.notice-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.notice-picture .icon { width: 26px; height: 26px; }
.notice-main { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.notice-title { font: 600 14px/20px var(--font); }
.notice-text {
  margin: 0; color: var(--text-2); font: 400 13.5px/19px var(--font); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.notice-more { margin: 0; color: var(--muted); font: 400 13px/18px var(--font); }
.notice-lines:empty { display: none; }
.notice-line { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font: 500 13px/18px var(--font); }
.notice-line .icon { width: 16px; height: 16px; }
.notice-line.ok { color: var(--ok); }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notice-actions .btn { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.notice-actions .btn .icon { width: 16px; height: 16px; }
.notice > .icon-btn { width: 32px; height: 32px; margin-top: -4px; }
.notice > .icon-btn .icon { width: 18px; height: 18px; }
@media (pointer: coarse) {
  .notice-actions .btn { min-height: 44px; }
  .notice > .icon-btn { width: 44px; height: 44px; margin: -8px -4px 0 0; }
}

#drop-hint { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--scrim); pointer-events: none; }
#drop-hint > div {
  border: 1.5px dashed var(--accent-line); border-radius: var(--r-xl); padding: 40px 56px; display: grid; justify-items: center; gap: 14px;
  background: var(--accent-wash); box-shadow: var(--shadow-3);
}
#drop-hint p { margin: 0; font: 600 17px/24px var(--font); color: var(--text); }

/* ------------------------------------------------------------ before the app: setup, connect, sign in */

#app.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: start center; padding: max(7vh, calc(24px + var(--safe-top))) 16px 48px; }
.gate-box { width: 100%; max-width: 460px; display: grid; gap: 8px; }
.gate-brand { display: grid; justify-items: center; margin-bottom: 22px; }
.gate-box h1 { font: 600 28px/34px var(--font-display); letter-spacing: -.02em; margin: 4px 0 2px; text-align: center; }
.gate-box > .muted { text-align: center; margin: 0 0 6px; }
.gate-box > .label { margin-top: 10px; }
.gate-box .btn.wide-btn { margin-top: 14px; }
.gate-box > .steps { margin: 8px 0; }
/* The old installed app's "Vault is now Wefty" (js/start.js movedScreen): the new home screen icon, as it looks. */
.gate-box > .moved-icon { justify-self: center; width: 72px; height: 72px; border-radius: 18px; margin-bottom: 6px; }
.gate-box > .moved-open { justify-content: center; text-decoration: none; }
/* An iPhone's old icon with changes the cloud hasn't got yet: wait for Synced before removing it. */
.gate-box > .moved-waiting { margin: 6px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--text); }
/* An iPhone's old icon that handed its sign-in to the new one (js/start.js's move pass): copied, signed out here. */
.gate-box > .moved-done { margin: 6px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--text); }
.gate-box > .moved-done.trouble { background: var(--warn-soft); }
.gate-box > .moved-hint { text-align: center; margin: 4px 0 0; }
.setup-step {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px; margin-top: 10px;
}
.setup-step strong { display: block; margin: 4px 0 2px; font-weight: 600; }
.setup-step p { margin: 2px 0 12px; }
.step-number {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); font: 600 14px/1 var(--font);
}
.setup-log { display: grid; gap: 6px; margin-top: 8px; }
.log-line { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.steps { padding-left: 22px; color: var(--text-2); display: grid; gap: 8px; }
.steps li::marker { color: var(--muted); font-weight: 600; }
.manual { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 16px; }
.manual summary { cursor: pointer; color: var(--text-2); font-weight: 500; min-height: 48px; display: flex; align-items: center; }
.manual[open] { padding-bottom: 16px; }
.manual .btn { margin-top: 14px; }

/* ------------------------------------------------------------ notes */

.notes-layout { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
.folders { display: none; }
.list-column {
  display: flex; flex-direction: column; min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(96px + var(--safe-bottom)) max(16px, env(safe-area-inset-left, 0px));
}
.list-column > * { flex-shrink: 0; }
.pane { display: none; }
.list-title { order: -1; }
.list-title .head-count { color: var(--muted); font: 500 14px/20px var(--font); align-self: flex-end; padding-bottom: 4px; }
/* The title's row (js/notes.js): a way back in a folder, the folders it's in above its name, the row's buttons and
   your picture. A phone's has the magnifier and a ⋯, each 44 px, the picture by the screen's edge (as on the other
   screens); the name gives way (an ellipsis) on a small phone. */
.title-back { display: contents; }
.title-stack { flex: 1; min-width: 0; display: grid; }
.title-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.title-line .head-count { align-self: auto; padding-bottom: 0; }
.list-title .folder-up { flex: none; width: 40px; height: 44px; margin: 0 2px 0 -10px; }
.list-title .list-tools .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
.list-head { display: flex; gap: 8px; align-items: center; }
.search-box {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 14px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; color: var(--muted);
  transition: border-color var(--d-1), box-shadow var(--d-1), background var(--d-1);
}
.search-box .icon { width: 20px; height: 20px; }
.search-box:focus-within { background: var(--field); border-color: var(--accent); box-shadow: var(--ring); }
/* 16 px: an iPhone zooms the page into any smaller box it types in */
.search { flex: 1; background: transparent; border: none; outline: none; height: 100%; min-width: 0; color: var(--text); font: 400 16px/22px var(--font); }
.search::placeholder { color: var(--muted); }  /* on the grey fill, --placeholder would be too faint */
.search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }  /* (our own x instead) */
.search-clear {
  position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: none;
  border-radius: 10px; background: none; color: var(--muted);
}
.search-clear::after { content: ""; position: absolute; inset: -4px; }  /* 44 px to a finger */
.search-clear .icon { width: 18px; height: 18px; }
.search-clear:hover { background: color-mix(in oklab, var(--text) 6%, transparent); color: var(--text); }
.search-back { margin-left: -10px; }
.search-hint { display: none; }
.search-found { margin: 14px 4px 2px; color: var(--muted); font: 600 13px/18px var(--font); }
.search-found:empty { display: none; }
@media (max-width: 899px) {
  /* A phone's title row and its search row take turns at the top: the search row (back, the box, its x) while
     searching, with the "Try" buttons under it in place of the folder chips. */
  .list-title { gap: 0; margin-right: -12px; }
  .list-title .head-count { display: none; }  /* (the chips count; the mockup's title is the name alone) */
  .list-column:not(.searching) > .list-head { display: none; }
  .list-column.searching > .list-head { padding: calc(8px + var(--safe-top)) 0 4px; min-height: 60px; }
  .list-column.searching > .list-title, .list-column.searching > .chips { display: none; }
  .search-box { height: 48px; }
}
.new-note { display: none; }
.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 12px 16px 6px;
}
.chips::-webkit-scrollbar { display: none; }
.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; padding-top: 8px; }
.list-section { margin: 14px 4px 2px; }
.list-section:first-child { margin-top: 4px; }
.list-section .count { margin-left: auto; font-weight: 500; }
/* Pinned and Due soon above All notes' cards: each opens its whole list (1.19.11) */
.list-go {
  display: inline-flex; align-items: center; gap: 2px; margin: -6px -6px -6px -6px; padding: 6px; border: 0;
  border-radius: var(--r-sm); background: none; color: inherit; font: inherit;
}
.list-go .list-go-chev { width: 14px; height: 14px; opacity: .7; }
.list-go:hover { color: var(--text); background: var(--surface-2); }
@media (pointer: coarse) { .list-go { min-height: 36px; margin: -9px -6px; } }
/* A card's chips (its folder, #tags, date, reminder, a test's countdown): each a tap of its own (js/notes.js chipTap) */
button.card .card-go { cursor: pointer; border-radius: var(--r-sm); }
@media (hover: hover) {
  button.card .tag.card-go:hover > span:last-child, button.card .note-tag.card-go:hover { text-decoration: underline; text-underline-offset: 2px; }
  button.card .due.card-go:hover, button.card .exam-tag.card-go:hover { box-shadow: inset 0 0 0 1px currentColor; }
}
.list-bar { display: flex; justify-content: flex-end; }

button.card {
  position: relative; display: grid; gap: 6px; text-align: left; width: 100%; padding: 14px 16px; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); min-height: 64px;
  transition: border-color var(--d-1), background var(--d-1);
}
button.card:hover { border-color: var(--line-strong); }
button.card:active { background: var(--surface-2); }
button.card.open { background: var(--accent-wash); border-color: var(--accent-line); }
button.card.done .card-title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); color: var(--muted); }
/* In dark, raised things catch a 1 px highlight along their top edge; a wide note list's flat rows stay flat (its grid
   view's cards don't). */
:where(:root[data-theme="dark"]) :is(.card, .chip, .tile, .clip) { box-shadow: inset 0 1px 0 var(--edge-hi); }
@media (min-width: 900px) {
  :where(:root[data-theme="dark"]) button.card { box-shadow: none; }
  :where(:root[data-theme="dark"]) .list.grid button.card { box-shadow: inset 0 1px 0 var(--edge-hi); }
}
.card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card-title { flex: 1; min-width: 0; font: 600 15.5px/21px var(--font); letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-top .icon { width: 16px; height: 16px; color: var(--muted); }
.card-top .icon.pinned { color: var(--accent-ink); }
.card-snippet { color: var(--text-2); font: 400 13.5px/20px var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.card-snippet.muted, .card-snippet.locked { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.card-snippet.locked .icon { width: 14px; height: 14px; }
/* A checklist's tick boxes in a card's words (js/notes.js boxed()): drawn small boxes, never a letter-like ○ */
.snip-box {
  display: inline-block; position: relative; width: .85em; height: .85em; margin: 0 .3em 0 .05em; vertical-align: -.1em;
  border: 1.5px solid var(--muted); border-radius: 3px; box-sizing: border-box;
}
.snip-box.done { background: var(--muted); border-color: transparent; }
.snip-box .icon { position: absolute; inset: 0; margin: auto; width: .7em; height: .7em; color: var(--card); }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 500 12.5px/16px var(--font); color: var(--muted); margin-top: 2px; min-width: 0; }
.card-meta .when { margin-left: auto; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tag .icon { width: 14px; height: 14px; }
.tag .emoji { font-size: 13px; }
.due {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-sm);
  font: 600 12px/1 var(--font); background: var(--surface-2); color: var(--text-2);
}
.due .icon { width: 13px; height: 13px; }
.due.late { background: var(--danger-soft); color: var(--danger); }
.due.today { background: var(--warn-soft); color: var(--warn); }
.due.soon { background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.due.done { background: var(--ok-soft); color: var(--ok); }
/* (in dark a hairline of their own colour round the deep fill) */
:where(:root[data-theme="dark"]) .due.today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 24%, transparent); }
:where(:root[data-theme="dark"]) .due.late { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 24%, transparent); }
:where(:root[data-theme="dark"]) .due.done { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 22%, transparent); }
.progress { display: inline-flex; align-items: center; gap: 7px; }
.progress .bar { width: 36px; flex: none; }

.fab {
  position: absolute; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 16px; border: none; z-index: 5;
  background: var(--primary); color: var(--on-primary); display: grid; place-items: center; box-shadow: var(--shadow-fab);
  transition: background var(--d-1), transform var(--d-1) var(--ease-out);
}
:where(:root[data-theme="dark"]) .fab { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--shadow-fab); }
.fab:hover { background: var(--primary-hover); }
.fab:active { transform: scale(.96); background: var(--primary-press); }
.fab .icon { width: 26px; height: 26px; }

.templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.template {
  display: grid; gap: 2px; justify-items: start; text-align: left; padding: 14px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line); min-height: 64px;
  transition: border-color var(--d-1), background var(--d-1);
}
.template:hover, .template:focus-visible { border-color: var(--line-strong); background: var(--surface-2); }
.template .icon {
  width: 36px; height: 36px; padding: 8px; margin-bottom: 8px; border-radius: 10px;
  background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.t-name { font: 600 14px/20px var(--font); }
.t-hint { color: var(--muted); font: 500 12.5px/16px var(--font); }

.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border-radius: 9px;
  border: 1px solid transparent; background: none; color: var(--text-2); text-align: left; min-width: 0;
  font: 500 14px/18px var(--font);
}
.nav-item .icon { width: 18px; height: 18px; color: var(--muted); }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.on { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-1); color: var(--text); font-weight: 600; }
.nav-item.on .icon { color: var(--accent-ink); }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { font: 500 12.5px/1 var(--font); color: var(--muted); }
.nav-heading { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 600 13px/18px var(--font); padding: 18px 2px 6px 10px; }
.folder-row { display: flex; align-items: center; gap: 2px; }
.folder-row .folder-more { opacity: 0; }
.folder-row:hover .folder-more, .folder-row:focus-within .folder-more { opacity: 1; }
.nav-spacer { flex: 1; min-height: 18px; }
/* each folder's emoji in a small tinted square; a colour dot when it has none */
.nav-item .emoji, .nav-item .dot-box {
  width: 24px; height: 24px; margin-left: -3px; border-radius: 7px; display: grid; place-items: center; flex: none;
  background: var(--surface-2); font-size: 13.5px;
}
.nav-item.on .emoji, .nav-item.on .dot-box { background: var(--accent-wash); }

@media (min-width: 900px) {
  .notes-layout { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); }
  .list-column { background: var(--surface); border-right: 1px solid var(--line); padding: 14px 10px 24px; }
  .list-head { padding: 0 4px; }
  .search-back, .search-found { display: none; }
  .search:placeholder-shown + .search-clear { display: none; }  /* (an x only when there's something to clear) */
  .search-clear { width: 30px; height: 30px; border-radius: 8px; }
  .search-box { height: 38px; border-radius: var(--r-md); }
  .search-box .icon { width: 18px; height: 18px; }
  .new-note { display: inline-flex; min-height: 38px; padding: 0 14px; }
  .chips { margin: 0 -10px; padding: 12px 14px 2px; }
  .chip { height: 32px; font-size: 13.5px; padding: 0 11px; }
  .list-title { order: 0; min-height: 0; padding: 14px 6px 6px; }
  .list-title h1 { font: 600 22px/28px var(--font-display); letter-spacing: -.015em; }
  .list-title .head-count { font-size: 13px; padding-bottom: 3px; }
  .list { gap: 2px; padding-top: 4px; }
  .list-section { margin: 14px 12px 4px; }
  .list-section:first-child { margin-top: 2px; }
  /* on a wide screen the cards are flat rows with hairlines between them */
  button.card { background: transparent; border-color: transparent; border-radius: var(--r-md); padding: 11px 12px 12px; gap: 5px; min-height: 0; }
  button.card::before { content: ""; position: absolute; top: -2px; left: 12px; right: 12px; height: 1px; background: var(--line-soft); }
  .list > :first-child::before, .list-section + button.card::before, .list-bar + button.card::before,
  button.card.open::before, button.card.open + button.card::before,
  button.card:hover::before, button.card:hover + button.card::before { display: none; }
  button.card:hover { background: var(--surface-2); border-color: transparent; }
  button.card.open { background: var(--accent-wash); border-color: var(--accent-line); }
  .card-title { font-size: 14.5px; line-height: 20px; }
  .card-snippet { font-size: 13px; line-height: 19px; }
  .card-meta { gap: 6px 10px; }  /* folder, due, progress, pictures and the time fit one line of a 340 px list */
  .card-meta .progress { gap: 5px; }
  .progress .bar { width: 24px; }
  .fab { display: none; }
  .pane { display: block; min-width: 0; height: 100%; overflow: hidden; background: var(--page); }
  .page-head { padding-top: 28px; }
}
@media (min-width: 1440px) and (pointer: fine) {
  .search-hint { display: inline-block; }
}
@media (min-width: 1200px) {
  .notes-layout { grid-template-columns: 236px minmax(300px, 340px) minmax(0, 1fr); }
  .folders { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 12px; overflow: auto; background: var(--bg); }
  .chips { display: none; }
}
@media (min-width: 1440px) {
  .notes-layout { grid-template-columns: 252px minmax(320px, 392px) minmax(0, 1fr); }
}

/* ------------------------------------------------------------ the open note */

.editor-layer {
  position: fixed; inset: 0; z-index: 55; background: var(--page);
  transform: translateX(16px); opacity: 0; transition: transform var(--d-3) var(--ease-out), opacity var(--d-2) var(--ease-out);
}
.editor-layer.shown { transform: none; opacity: 1; }
.editor { height: 100%; display: flex; flex-direction: column; position: relative; background: var(--page); }
.editor.dropping { box-shadow: inset 0 0 0 2px var(--accent-line); background: var(--accent-wash); }
.editor-bar {
  display: flex; align-items: center; gap: 4px; min-height: 56px; flex: none;
  padding: calc(8px + var(--safe-top)) 8px 8px 6px; border-bottom: 1px solid var(--line-soft);
}
.editor-bar .back { margin-right: 2px; }
.bar-spacer { flex: 1; }
.folder-pick {
  appearance: none; height: 36px; max-width: 46vw; padding: 0 32px 0 12px; border-radius: var(--r-md);
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f636c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
  border: 1px solid transparent; color: var(--text); font: 500 14px/1 var(--font); cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
:root[data-theme="dark"] .folder-pick {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5a5b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
}
.folder-pick:hover { border-color: var(--line-strong); }
.folder-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.folder-pick option { background: var(--card); color: var(--text); }
.editor-scroll { flex: 1; overflow: auto; display: flex; flex-direction: column; padding: 10px 20px 48px; }
.note-title {
  order: 1; width: 100%; background: none; border: none; outline: none; padding: 6px 0 10px; color: var(--text);
  font: 600 28px/34px var(--font-display); letter-spacing: -.02em;
}
.note-title::placeholder { color: var(--faint); }
.note-meta { order: 2; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.editor-body { order: 3; }
.note-meta .chip { height: 32px; padding: 0 11px; font-size: 13.5px; border-radius: 8px; border-color: var(--line-strong); }
.note-meta .chip .icon { width: 15px; height: 15px; }
.due-group { display: flex; gap: 8px; flex-wrap: wrap; }
.due-chip.late { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.due-chip.today { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
:where(:root[data-theme="dark"]) .due-chip.today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 24%, transparent); }
:where(:root[data-theme="dark"]) .due-chip.late { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 24%, transparent); }
.due-chip.soon, .due-chip.later { color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-line); }
.done-chip.on { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.blocks { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
/* A box and the see-through copy of its words under it (js/editor.js: shade) get their font from the same rules
   (.block-field > *: here, in the wide pane and for headings), so the two always match. */
.block-field { position: relative; min-width: 0; --ink: var(--text); }
.block-field > * { font: 400 16px/26px var(--font); }
.block-field > .block-input { position: relative; }
.block-input {
  width: 100%; background: none; border: none; outline: none; resize: none; overflow: hidden; padding: 4px 0; min-height: 34px;
  color: var(--text); field-sizing: content; caret-color: var(--accent);
}
.block-input::placeholder { color: var(--faint); }
/* see-through, so the bold and the highlight under picked words still show */
.block-input::selection { background: var(--pick-see); }
@media (forced-colors: active) { .block-input::selection { background: Highlight; } }  /* (the system's own, as everywhere) */
.check-row {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 0 -8px; padding: 5px 8px;
  border-radius: var(--r-md); transition: background var(--d-1);
}
.check-row:focus-within { background: var(--surface-2); }
.check-row > .block-field { flex: 1; min-width: 0; }
.check-row .block-input { display: block; }
.tick {
  position: relative; margin-top: 6px; width: 22px; height: 22px; border-radius: var(--r-sm); border: 1.75px solid var(--control);
  background: var(--page); display: grid; place-items: center; padding: 0; flex: none; color: transparent;
  transition: background var(--d-2), border-color var(--d-2);
}
.tick::after { content: ""; position: absolute; inset: -11px -10px; }  /* a 44 px target on the tick's side of the row */
.tick .icon { width: 15px; height: 15px; transform: scale(.8); transition: transform var(--d-2) var(--ease-spring); }
.tick .icon svg { stroke-width: 2.6; }
.check-row.done .tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.check-row.done .tick .icon { transform: none; }
.check-row.done .block-input { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); color: var(--muted); }
.check-row.done .block-field { --ink: var(--muted); }
.remove-item {
  position: relative; opacity: 0; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 3px; padding: 0;
  background: none; border: none; border-radius: 8px; color: var(--muted); flex: none;
}
.remove-item::after { content: ""; position: absolute; inset: -8px -6px; }
.remove-item:hover { background: var(--surface); color: var(--text); }
.check-row:hover .remove-item, .check-row:focus-within .remove-item { opacity: 1; }
/* No hover on a phone: an invisible button there was still tapped by accident, so it shows, softly. */
@media (hover: none) { .remove-item { opacity: .45; } }
.editor-tools {
  display: flex; align-items: center; gap: 4px; flex: none; min-height: 52px;
  padding: 6px 10px calc(6px + var(--safe-bottom)); border-top: 1px solid var(--line-soft); background: var(--surface);
}
.editor-tools .btn { min-height: 40px; padding: 0 12px; }
.save-state { color: var(--muted); font: 500 12.5px/16px var(--font); padding-right: 6px; }
.pictures { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 20px; }
.thumb {
  aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2);
  padding: 0; display: grid; place-items: center;
}
.thumb:hover { border-color: var(--line-strong); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb img.broken { opacity: .4; }
.viewer { display: grid; place-items: center; background: var(--sunken); border-radius: var(--r-md); }
.viewer img { max-width: 100%; max-height: 70vh; border-radius: var(--r-md); display: block; }
.locked-face { display: grid; justify-items: center; gap: 14px; padding: 64px 16px; color: var(--text-2); text-align: center; }
.locked-face p { margin: 0; }
.locked-face .icon.big {
  width: 56px; height: 56px; padding: 13px; border-radius: 16px; color: var(--accent-ink);
  background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.pane-empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); text-align: center; padding: 24px; }
.pane-empty .mark { color: var(--faint); margin-bottom: 4px; }
.pane-empty p { margin: 0; }
.pane-empty p:first-of-type { color: var(--text-2); font-weight: 500; }
.quick-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px; }

@media (min-width: 900px) {
  /* on a wide screen: the bar, then the tools under it, then the page, its words in a column of their own */
  .pane .editor-bar { padding: 8px 12px 8px 16px; min-height: 56px; }
  .pane .editor-tools { order: 1; border-top: none; border-bottom: 1px solid var(--line-soft); background: var(--page); min-height: 48px; padding: 4px 12px 4px 14px; }
  .pane .editor-scroll { order: 2; padding: 28px max(28px, calc((100% - 720px) / 2)) 56px; }
  .pane .note-title { font-size: 30px; line-height: 36px; }
  .pane .block-field > * { font-size: 15.5px; line-height: 25px; }
  .pane .check-row { min-height: 38px; padding: 3px 8px; }
  .pane .tick { margin-top: 5px; }
  .folder-pick { max-width: 280px; }
}

.pin-title { text-align: center; color: var(--text); margin: 4px 0 0; font-weight: 600; }
.pin-dots { display: flex; justify-content: center; gap: 12px; height: 36px; align-items: center; }
.pin-dots .dot { width: 12px; height: 12px; border-radius: 50%; border: 1.75px solid var(--control); background: none; }
.pin-dots .dot.full { background: var(--accent); border-color: var(--accent); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 8px auto 0; }
.pin-key {
  height: 56px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid transparent; color: var(--text);
  font: 500 22px/1 var(--font); display: grid; place-items: center; transition: background var(--d-1), transform var(--d-1);
}
.pin-key:hover { border-color: var(--line-strong); }
.pin-key:active { background: var(--accent-soft); transform: scale(.98); }
.pin-key .icon { width: 22px; height: 22px; }
.pin-key.go { background: var(--primary); color: var(--on-primary); }
.pin-key.go:hover { background: var(--primary-hover); }
.sheet-body > .hint { text-align: center; margin: 4px 0 6px; }

/* ------------------------------------------------------------ send and clipboard */

.send-card { display: grid; gap: 10px; }
.device-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.device-card > .icon, .tile .icon, .t-icon {
  display: grid; place-items: center; border-radius: 10px; flex: none;
  background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.device-card > .icon { width: 44px; height: 44px; padding: 10px; border-radius: 12px; }
.device-text { display: grid; gap: 2px; min-width: 0; }
.device-text strong { font: 600 15px/20px var(--font); }
.device-text span { color: var(--muted); font: 400 13px/18px var(--font); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile {
  display: grid; justify-items: start; gap: 10px; padding: 14px; text-align: left; min-height: 96px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text);
  transition: border-color var(--d-1), background var(--d-1);
}
.tile:hover { border-color: var(--line-strong); }
.tile:active { background: var(--surface-2); }
.tile .icon { width: 36px; height: 36px; padding: 8px; }
.tile strong { display: block; font: 600 14px/18px var(--font); }
.tile small { display: block; color: var(--muted); font: 500 12px/16px var(--font); margin-top: 2px; }
.drop-zone {
  display: grid; justify-items: center; gap: 8px; padding: 28px 16px; border-radius: var(--r-xl); color: var(--text-2);
  background: var(--accent-wash); border: 1.5px dashed var(--accent-line); transition: border-color var(--d-1), background var(--d-1);
}
.drop-zone:hover { border-color: var(--accent); }
.drop-zone strong { color: var(--text); font: 600 16px/22px var(--font); }
.drop-zone .icon { color: var(--accent-ink); }
.drop-zone .icon.big { width: 30px; height: 30px; }
.send-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 4px; }
.send-row .field { flex: 1; }
.send-row textarea.field { resize: none; field-sizing: content; max-height: 168px; }
.send-row .btn { min-height: 48px; border-radius: 12px; }
.transfers, .queue, .clips { display: grid; gap: 8px; }
.queue:empty { display: none; }
.transfer {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 10px 12px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.transfer.fresh { border-color: var(--accent-line); }
.t-icon { width: 40px; height: 40px; }
.t-icon .icon { width: 20px; height: 20px; }
.transfer.out .t-icon { background: var(--surface-2); color: var(--text-2); box-shadow: none; }
.t-main { min-width: 0; display: grid; gap: 4px; align-content: center; }
.t-name { font: 600 14.5px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-text { color: var(--text-2); font: 400 13.5px/20px var(--font); white-space: pre-wrap; word-break: break-word; max-height: 7.5em; overflow: hidden; }
.t-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; color: var(--muted); font: 500 12.5px/16px var(--font); }
.t-meta .icon { width: 14px; height: 14px; }
.t-dir { display: inline-flex; align-items: center; gap: 3px; }
.transfer.in .t-dir { color: var(--accent-ink); font-weight: 600; }
.t-status { color: var(--text-2); }
.t-status.ok { color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.transfer.fresh .t-status { color: var(--accent-ink); font-weight: 600; }
.t-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; align-items: center; }
.t-actions > .icon-btn:last-child { margin-left: auto; }
.t-actions:has(> :only-child) { grid-column: 3; grid-row: 1; }
.t-actions .btn { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.transfer .bar { flex: none; margin: 4px 0 2px; }
@media (min-width: 640px) { .transfer { align-items: center; } .t-actions { grid-column: 3; grid-row: 1; } .t-actions > .icon-btn:last-child { margin-left: 0; } }
@media (pointer: coarse) { .t-actions .btn { min-height: 44px; } }
.space-row { display: flex; align-items: center; gap: 12px; margin-top: 24px; color: var(--muted); font: 500 12.5px/16px var(--font); flex-wrap: wrap; }
.space-row .bar { min-width: 120px; }
.shared-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.shared-list li { display: flex; gap: 10px; align-items: center; min-width: 0; }
.shared-list li span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-list li .icon, .shared-list li .muted { flex: none; }
.shared-text { white-space: pre-wrap; background: var(--sunken); padding: 12px; border-radius: var(--r-md); color: var(--text); }

.latest { margin-bottom: 12px; }
.latest .section { margin: 0 0 10px; }
.latest .clip { padding: 0; border: none; background: none; }
.latest .clip-text { font: 400 16px/24px var(--font); color: var(--text); }
.empty-latest p { margin: 0; color: var(--muted); }
.clip { display: grid; gap: 8px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.clip-from { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 500 12.5px/16px var(--font); }
.clip-from .icon { width: 15px; height: 15px; }
.clip-text { white-space: pre-wrap; word-break: break-word; color: var(--text-2); }
.clip-actions { display: flex; gap: 8px; justify-content: flex-end; }
.clip-actions .btn { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.switches { display: grid; gap: 0; margin-bottom: 12px; padding: 0 16px; }
.switch-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; cursor: pointer; min-height: 64px; padding: 10px 0; }
.switch-row + .switch-row { border-top: 1px solid var(--line-soft); }
.switch-text { display: grid; gap: 2px; }
.switch-text strong { font-weight: 600; }
.switch-text span { color: var(--muted); font-size: 13px; line-height: 18px; }
.page > .btn.wide-btn { margin: 4px 0 8px; }

/* ==== 1.16: Share (C) ==== */
/* Share's switch (js/share.js): Send · Files · Clipboard in one track, the part showing raised like .segmented's
   picked button. A tab list, so it's aria-selected (not aria-checked). */
.segmented.share-switch { padding: 4px; border-radius: 14px; margin: 2px 0 16px; }
.segmented.share-switch button { min-height: 44px; gap: 8px; padding: 0 8px; border-radius: 10px; font-size: 15px; }
.segmented.share-switch button .icon { width: 18px; height: 18px; flex: none; }
.share-switch .share-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.segmented.share-switch button[aria-selected="true"] {
  background: var(--selected); border-color: light-dark(var(--line), transparent); box-shadow: var(--shadow-1);
  color: var(--text); font-weight: 600;
}
:where(:root[data-theme="dark"]) .segmented.share-switch button[aria-selected="true"] { box-shadow: var(--shadow-1), inset 0 1px 0 var(--edge-hi); }
.share-switch .badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; line-height: 20px; }
@media (max-width: 399px) { .segmented.share-switch button { gap: 5px; padding: 0 4px; font-size: 14px; } .segmented.share-switch button .icon { width: 16px; height: 16px; } }

/* Wide, the three parts are the same width, so Share's top stays put when switching (Files needs room for its column
   of places beside the list). */
@media (min-width: 900px) {
  .view[data-tab=send] > .page, .view[data-tab=files] > .page, .view[data-tab=clips] > .page { max-width: 920px; }
}

/* Send: "Send to [Your PC] ⌄" as one row (a button opening the devices when there's more than one), then Photo · A
   file · Camera, then the words and Send. */
.send-card { gap: 12px; }
.send-to-wrap { display: grid; gap: 8px; }
.send-to-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 16px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text); font: inherit;
}
button.send-to-row { cursor: pointer; transition: border-color var(--d-1), background var(--d-1); }
button.send-to-row:active { background: var(--surface-2); }
@media (hover: hover) { button.send-to-row:hover { border-color: var(--line-strong); } }
.send-to-label { flex: none; color: var(--muted); font: 500 15px/20px var(--font); }
.send-to-row > .icon { flex: none; width: 20px; height: 20px; color: var(--text-2); }
.send-to-name { min-width: 0; font: 600 16px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-to-grow { flex: 1; }
.send-hint { display: flex; align-items: center; gap: 6px; margin: 0 4px; color: var(--muted); font: 500 13px/18px var(--font); overflow-wrap: anywhere; }
.send-hint .icon { flex: none; width: 15px; height: 15px; }
.send-to-menu { min-width: 220px; }
.send-to-choice > span { flex: 1; }
.send-to-choice[aria-checked="true"] { font-weight: 600; }
.send-to-choice[aria-checked="true"] > .icon:last-child { color: var(--accent-ink); }
.send-card .tile {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 8px; text-align: center;
}
.send-card .tile .icon { width: 20px; height: 20px; padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--text); }
.send-card .tile strong { font: 600 15px/20px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 359px) { .send-card .tile { gap: 6px; } .send-card .tile strong { font-size: 14px; } .send-card .tile .icon { width: 18px; height: 18px; } }
.send-row textarea.field { min-height: 56px; padding-top: 15px; padding-bottom: 15px; font-size: 16px; }
.send-row .btn { min-height: 56px; padding: 0 20px; font-size: 16px; }
.page > .section { margin-top: 20px; }

/* Clipboard: the latest from elsewhere first and bigger, the box and Send to all, Earlier, the in-step switch at the
   foot (js/clips.js). */
.clip-latest .latest { margin-bottom: 12px; padding: 14px 16px; }
.latest .clip { gap: 10px; box-shadow: none; }  /* (one card: the dark top highlight only on the outer one) */
.latest .clip-text { font: 500 18px/26px var(--font); color: var(--text); }
.latest .clip-actions { align-items: center; }
.latest .clip-actions .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.latest .clip-actions .btn:not(.quiet) { border-color: var(--line-strong); }
.clip-from > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-who { flex: 1; }
.clip-when { flex: none; }
.clips .clip-text { color: var(--text); font: 400 15px/22px var(--font); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.clips .clip-actions .btn { min-height: 36px; }
@media (pointer: coarse) { .clips .clip-actions .btn { min-height: 44px; } }
.clip-page > .btn.wide-btn { margin: 10px 0 0; }
/* A new account's one offer (1.19, js/clips.js): Turn on, or Not now */
.clip-offer { display: grid; gap: 8px; margin-bottom: 12px; padding: 16px; }
.clip-offer h2 { margin: 0; color: var(--text); font: 600 16px/22px var(--font); }
.clip-offer p { margin: 0; color: var(--text-2); font: 400 14px/20px var(--font); }
.clip-offer-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.clip-offer-buttons .btn { min-height: 44px; }
.clip-foot:not(:empty) { margin-top: 20px; border-top: 1px solid var(--line); }
.clip-step .switch-row { padding: 12px 4px; }
.clip-step .switch-text strong { font: 500 16px/22px var(--font); }

/* (Files' chips and "on now": in the files section below, after its own rules) */
/* ==== end Share ==== */

/* ------------------------------------------------------------ settings */

.settings .settings-card { margin-bottom: 12px; display: grid; gap: 0; padding: 4px 16px; }
.settings-card h2 { margin: 12px 0 2px; font: 600 15px/22px var(--font); }
.setting { display: flex; align-items: center; gap: 14px; justify-content: space-between; min-height: 56px; padding: 10px 0; }
.settings-card > * + .setting, .settings-card > .setting + * { border-top: 1px solid var(--line-soft); }
.settings-card > h2 + * { border-top: none; }
.setting-text { display: grid; gap: 2px; min-width: 0; }
.setting-text strong { font-weight: 600; overflow-wrap: anywhere; }
.setting-text span { color: var(--muted); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.setting-buttons { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 12px; }
.setting .setting-buttons { padding: 0; flex: none; }
.setting > .btn { flex: none; }
.segmented {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; flex: none;
  background: var(--surface-2); border-radius: 12px;
}
.segmented button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text-2); font: 500 13.5px/1 var(--font);
  transition: background var(--d-2), color var(--d-2);
}
.segmented button .icon { width: 16px; height: 16px; }
.segmented button:hover { color: var(--text); }
.segmented button[aria-checked="true"] { background: var(--selected); border-color: light-dark(var(--line), transparent); box-shadow: var(--shadow-1); color: var(--text); font-weight: 600; }
/* (in dark the picked segment is the lightest step of its track, with a 1 px highlight along its top) */
:where(:root[data-theme="dark"]) .segmented button[aria-checked="true"] { box-shadow: var(--shadow-1), inset 0 1px 0 var(--edge-hi); }
@media (pointer: coarse) { .segmented button { min-height: 40px; } }
.connect { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 12px 0 4px; }
.qr { background: #fff; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line); line-height: 0; flex: none; }
.connect .steps { flex: 1; min-width: 220px; margin: 0; }
.news { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.45; }
.about { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12.5px; margin-top: 28px; }
.about .mark { color: var(--faint); }

@media (max-width: 459px) {
  .setting { flex-wrap: wrap; }
  .setting > .segmented { width: 100%; }
}

/* ==== 1.16: Settings (D) ==== */
/* The home: a search box, then a line per category (an icon, its name, how it's set), in two groups. On a phone a
   line opens its page; from 900 px the lines stay on the left and the page shows on the right (js/settingsui.js). */
.set-search { position: relative; display: flex; align-items: center; margin: 4px 0 16px; }
.set-search .set-search-ic { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.set-search-box.field { width: 100%; min-height: 48px; padding: 0 48px 0 44px; font-size: 16px; border-radius: 14px; background: var(--surface-2); }
.set-search-box::-webkit-search-cancel-button { display: none; }
.set-search .set-search-clear { position: absolute; right: 2px; width: 44px; height: 44px; }
.set-home { display: grid; gap: 14px; }
.set-group.card { padding: 0; overflow: hidden; }
.set-cat, .set-hit {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 14px 12px 16px;
  border: none; background: none; color: var(--text); text-align: left; font: inherit; position: relative;
}
.set-group > .set-cat + .set-cat::before, .set-group > .set-hit + .set-hit::before {
  content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 1px; background: var(--line-soft);
}
.set-group > .set-hit + .set-hit::before { left: 16px; }
.set-cat .setting-text, .set-hit .setting-text { flex: 1; min-width: 0; }
.set-cat .setting-text strong { font: 600 16px/22px var(--font); }
.set-sum { color: var(--muted); font: 400 14px/20px var(--font); }
.set-sum.warn { color: var(--warn); font-weight: 500; }
.set-part { white-space: nowrap; }  /* (a summary breaks only between its " · " parts) */
.set-ic {
  position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-line);
}
.set-ic .icon { width: 22px; height: 22px; }
.set-ic .set-ic-av { width: 42px; height: 42px; font-size: 17px; }
.set-ic:has(> .set-ic-av) { background: none; box-shadow: none; }
.set-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2.5px var(--card); }
.set-chev { flex: none; width: 20px; height: 20px; color: var(--muted); }
@media (hover: hover) { .set-cat:hover, .set-hit:hover { background: var(--surface-2); } }
.set-cat:focus-visible, .set-hit:focus-visible, .set-more-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Search's results: how many settings are called that, the rows (their page above each), then what only mentions it. */
.set-count { margin: 4px 4px 8px; color: var(--muted); font: 600 13.5px/20px var(--font); }
.set-results { display: grid; gap: 6px; }
.set-results .set-group { padding: 0; overflow: hidden; margin-bottom: 8px; }
.set-where { color: var(--accent-ink); font: 600 12.5px/16px var(--font); }
.set-hit.mention .set-where { color: var(--muted); }
.set-hit .setting-text strong { font: 600 15.5px/22px var(--font); }
.set-hit.mention .setting-text strong { font-weight: 500; }
.set-hit .setting-text > span:not(.set-where) { color: var(--muted); font-size: 13.5px; line-height: 19px; }
.set-hit mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.set-tip {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--text-2); font: 400 14px/20px var(--font);
}
.set-tip .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }
.set-tip strong { color: var(--text); font-weight: 600; }

/* A page: its sections are cards, each section's name sitting above its card (never a wave: the thread has its four
   places). A section named like the page keeps its name for screen readers only. */
.set-page { display: grid; }
.set-page > .settings-card { position: relative; margin: 12px 0; }
.set-page > .settings-card:first-child { margin-top: 4px; }
.set-page > .settings-card:has(> h2:not(.page-same)) { margin-top: 38px; }
.set-page > .settings-card > h2 {
  position: absolute; bottom: calc(100% + 8px); left: 4px; margin: 0; color: var(--muted); font: 600 13.5px/20px var(--font);
}
.set-page .setting:has(> input.switch) { flex-wrap: nowrap; }
.set-page > .settings-card > h2.page-same, .set-page > .settings-card > h2:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.set-page > .settings-card > h2 + * { border-top: none; }
.set-page > .settings-card > h2.page-same + *, .set-page > .settings-card > :first-child { padding-top: 12px; }
.set-page > .set-lifted { margin-top: 12px; }
.set-page .setting.lit { animation: set-lit 1.5s ease-out; border-radius: 8px; }
@keyframes set-lit { 0%, 40% { background: var(--accent-soft); box-shadow: 0 0 0 8px var(--accent-soft); } 100% { background: transparent; box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .set-page .setting.lit { animation: none; outline: 2px solid var(--accent); outline-offset: 4px; } }
.account-who { gap: 14px; justify-content: flex-start; flex-wrap: nowrap !important; }
.account-who .who-av { flex: none; width: 52px; height: 52px; font-size: 22px; }
.account-who .setting-text strong { font-size: 16.5px; }
.sync-chip {
  justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2);
  color: var(--text-2) !important; font: 500 13px/18px var(--font) !important;
}
button.sync-chip { border: 0; cursor: pointer; }
button.sync-chip:hover { box-shadow: inset 0 0 0 1px currentColor; }
.sync-chip[data-state=offline], .sync-chip[data-state=held] { background: var(--warn-soft); color: var(--warn) !important; }
.sync-chip[data-state=error], .sync-chip[data-state=asleep], .sync-chip[data-state=signed-out] { background: var(--danger-soft); color: var(--danger) !important; }

/* More options: a closed row at a page's foot, with a line saying what's in it. */
.set-more { margin: 12px 0; padding: 0; overflow: hidden; }
.set-more-head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: none;
  background: none; color: var(--text); text-align: left; font: inherit;
}
.set-more-head .setting-text { flex: 1; }
.set-more-head .setting-text strong { font-weight: 600; }
.set-more-chev { flex: none; width: 20px; height: 20px; color: var(--muted); transition: transform var(--d-2); }
.set-more-head[aria-expanded=true] .set-more-chev { transform: rotate(180deg); }
.set-more-rows { padding: 0 16px 4px; border-top: 1px solid var(--line-soft); }
.set-more-rows > .setting + .setting { border-top: 1px solid var(--line-soft); }
@media (hover: hover) { .set-more-head:hover { background: var(--surface-2); } }

/* A phone: the home and each page are pages of their own (the tabs make way, frame block). */
.settings-home > header.app-head, .settings-sub > header.app-head { min-height: 64px; }
.settings .app-head h1 { font: 600 28px/34px var(--font-display); letter-spacing: -.02em; }

/* From 900 px: the categories (and search) on the left, the page on the right. */
@media (min-width: 900px) {
  .view[data-tab=settings] { overflow: hidden; }
  .page.settings-wide {
    max-width: none; height: 100%; padding: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  }
  .settings-wide .set-side { overflow: auto; padding: 0 16px 24px; border-right: 1px solid var(--line); background: var(--bg); }
  .settings-wide .set-side > header.app-head { padding-top: 18px; }
  .settings-wide .set-main { overflow: auto; padding: 0 40px 40px; }
  .settings-wide .set-main > * { max-width: 760px; }
  .settings-wide .set-title { margin: 24px 4px 16px; font: 600 30px/38px var(--font-display); letter-spacing: -.02em; }
  .settings-wide .set-group { display: grid; gap: 4px; }
  .settings-wide .set-home { gap: 0; }
  .settings-wide .set-home > .set-group + .set-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .settings-wide .set-cat { min-height: 64px; border-radius: 14px; padding: 10px 12px; }
  .settings-wide .set-cat::before { display: none; }
  .settings-wide .set-cat[aria-current=page] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
  .settings-wide .set-cat .set-ic { width: 40px; height: 40px; }
}
@media (pointer: coarse) { .set-more-head, .set-cat, .set-hit { min-height: 64px; } }
@media (forced-colors: active) { .set-dot { forced-color-adjust: none; background: Mark; } }

/* D2: the module pages' finer parts. A section's name may carry a word on the right ("free", "paid"). */
.set-page > .settings-card > h2[data-tag] { right: 4px; display: flex; justify-content: space-between; gap: 12px; }
.set-page > .settings-card > h2[data-tag]::after { content: attr(data-tag); font-weight: 400; }
.set-page > .set-foot { margin: 4px 8px 12px; color: var(--muted); font: 400 13.5px/20px var(--font); }
.set-page > .set-foot + .set-foot { margin-top: -4px; }
.ai-month .setting-text { flex: 1; }
.ai-meter { display: block; height: 6px; margin-top: 8px; max-width: 280px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ai-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ai-meter[data-full] > span { background: var(--warn); }
.ai-gemini-check { align-items: flex-start; }
.ai-gemini-check .setting-text { flex: 1; }
.ai-gemini-check .ai-gemini-net, .ai-gemini-check .ai-gemini-first, .ai-gemini-check .ai-gemini-times { margin: 6px 0 0; padding-bottom: 0; }
.ai-gemini-check .ai-gemini-times { padding-left: 18px; }
.ai-gemini-sheet { gap: 10px; }
.ai-gemini-sheet > p { margin: 0; }
.ai-gemini-sheet .ai-steps { margin: 0; padding-left: 22px; font: 400 15px/22px var(--font); }
.ai-gemini-sheet .ai-steps strong { font-weight: 600; }
.ai-gemini-sheet .setting-buttons { padding: 0; }
.ai-gemini-sheet .ai-key-row .field { font-size: 16px; min-height: 48px; }
.ai-notes-by { align-self: stretch; }
.ai-notes-by > button { flex: 1; }
/* On a page, a row's words make room for its control beside them (wrapping under it only when there's no room). */
.set-page .setting:not(.setting-stack) > .setting-text { flex: 1 1 150px; }
/* Friends: the people (newest first, a few), a person's sheet, the stats' three tiles. */
.set-page .invite-person { cursor: pointer; justify-content: flex-start; flex-wrap: nowrap; }
.invite-person .av { flex: none; width: 36px; height: 36px; font-size: 15px; }
.invite-person .setting-text { flex: 1; }
.invite-person .setting-buttons { flex-wrap: nowrap; }
.invite-all { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 0; border: none;
  border-top: 1px solid var(--line-soft); background: none; color: var(--accent-ink); font: 600 15px/22px var(--font); text-align: left; }
.invite-all .icon { margin-left: auto; width: 18px; height: 18px; color: var(--muted); }
.stats-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.set-page > .settings-card:has(> h2:not(.page-same)) + .stats-tiles, .set-page > .stats-tiles { margin-top: 4px; }
.stats-tile { display: grid; gap: 2px; padding: 12px 14px; }
.stats-tile strong { font: 600 26px/32px var(--font-display); letter-spacing: -.01em; }
.stats-tile span { color: var(--muted); font: 400 13.5px/18px var(--font); }
.person-sheet { display: grid; gap: 4px; }
.person-sheet .setting { min-height: 0; padding: 6px 0; }
.news-all { justify-content: flex-start; }
@media (pointer: coarse) { .invite-all { min-height: 56px; } }
/* ==== end Settings ==== */

/* ------------------------------------------------------------ touch: every target 44 px or more */

@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .nav-item { min-height: 44px; }
  .menu-item { min-height: 44px; }
}

/* ==== 1.16: Polish (E) ==== */
/* A card's words (js/notes.js boxed()): a heading's words a little darker, a ticked item's grey and struck (ticked
   items come after the ones still to do). */
.card-snippet .snip-head { color: var(--text); font-weight: 600; }
.card-snippet .snip-done { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }

/* An empty folder (js/notes.js): the loom (V.loom, the thread's fourth place), what to do, and the two ways to fill
   it. Its New note is the main iris button on a phone, so the round + steps aside. */
.fab.aside { display: none; }
.empty.empty-folder { gap: 0; padding: 40px 16px 64px; }
.empty-folder .loom { margin-bottom: 20px; max-width: 100%; height: auto; }
.empty-folder > * { max-width: 100%; min-width: 0; }
.empty-folder h2 { margin: 0 0 6px; color: var(--text); font: 600 18px/24px var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.empty-folder p { margin: 0 0 22px; color: var(--text-2); font: 400 15px/22px var(--font); max-width: 300px; }
.empty-folder .btn { min-height: 48px; padding-inline: 22px; overflow: hidden; }
.empty-folder .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-folder .move-here { min-height: 44px; margin-top: 8px; padding: 10px 12px; font: 600 15px/20px var(--font); text-decoration: none; }
.loom { --loom-under: var(--bg); display: block; }
.loom .warp { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; }
.loom .peg { fill: var(--line-strong); }
.loom .gap { fill: none; stroke: var(--loom-under); stroke-width: 4; }
.loom .weft { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.loom .needle { fill: var(--text-2); stroke: var(--text-2); stroke-width: .6; stroke-linejoin: round; }
.loom .eye { fill: var(--loom-under); }
@media (min-width: 900px) { .list-column .loom { --loom-under: var(--surface); } }
@media (forced-colors: active) {
  .loom .warp, .loom .weft { stroke: CanvasText; }
  .loom .peg, .loom .needle { fill: CanvasText; stroke: CanvasText; }
  .loom .gap { stroke: Canvas; }
  .loom .eye { fill: Canvas; }
}

/* The one-time "Two things moved" tip (js/coach.js): a small card beside what it points at, which is ringed. Not a
   dialog that holds anything up: it sits in #layers, so an announcement waits for it. */
.coach {
  position: fixed; z-index: 62; width: min(300px, calc(100vw - 16px)); padding: 16px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--raised); color: var(--text); box-shadow: var(--shadow-3);
  animation: coach-in .22s var(--ease-out);
}
@keyframes coach-in { from { opacity: 0; transform: translateY(-4px); } }
.coach.side { animation-name: coach-side; }
@keyframes coach-side { from { opacity: 0; transform: translateX(-4px); } }
.coach[hidden] { display: none; }
.coach-arrow {
  position: absolute; top: -7px; width: 12px; height: 12px; background: var(--raised);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg);
}
.coach.side .coach-arrow { top: auto; left: -7px; transform: rotate(-45deg); }
.coach-title { margin: 0 0 4px; font: 600 15px/22px var(--font); }
.coach-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 12px;
  color: var(--text-2); font: 400 14px/20px var(--font); }
.coach-title + .coach-row { margin-top: 8px; }
.coach-arrow + .coach-row { margin-top: 0; }
.coach-row b { color: var(--text); font-weight: 600; }
.coach-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.coach-ic .icon { width: 20px; height: 20px; }
.coach-ic .av.mini { width: 24px; height: 24px; font-size: 12px; }
.coach-foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.coach-foot .btn { min-height: 44px; }
.coach-lit { outline: 2px solid var(--accent); outline-offset: 2px; }
.me.coach-lit { border-radius: 50%; outline-offset: 0; }
@media (forced-colors: active) { .coach-lit { outline-color: Highlight; } }
/* ==== end Polish ==== */

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  .editor-layer, .sheet { transform: none !important; }
}

/* -- editor words: headings, link chips, the writing tools, files and voice memos, the word count, the Read view */

/* headings: lines of their own, bigger */
.heading-block { padding-top: 8px; }
.blocks > .heading-block:first-child { padding-top: 0; }
.heading-block .block-field > * { font: 600 22px/30px var(--font-display); letter-spacing: -.012em; }
.heading-block.h2 .block-field > * { font: 600 18px/27px var(--font); letter-spacing: -.005em; }
.heading-block.h3 .block-field > * { font: 600 16px/26px var(--font); }
.heading-block.h3 .block-field { --ink: var(--text-2); }
.block-input.heading-input { min-height: 38px; }
.heading-block.h2 .block-input.heading-input { min-height: 35px; }
.heading-block.h3 .block-input.heading-input { color: var(--text-2); }

/* links found in the words, as chips under their line (tap opens, hold copies) */
.link-chips { display: flex; flex-wrap: wrap; gap: 8px 6px; padding: 2px 0 8px; min-width: 0; }
.check-row { flex-wrap: wrap; }
.check-row > .link-chips { flex: 0 0 100%; padding: 0 0 4px 34px; }
.link-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; height: 32px;
  padding: 0 10px 0 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  color: var(--text-2); font: 500 13px/1 var(--font);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: border-color var(--d-1), background var(--d-1);
}
.link-chip::after { content: ""; position: absolute; inset: -6px 0; }  /* 44 px tall to a finger */
.link-chip:hover { border-color: var(--line-strong); background: var(--surface-2); }
.link-chip .icon { width: 15px; height: 15px; color: var(--accent-ink); }
.chip-site { color: var(--text); font-weight: 600; white-space: nowrap; flex: none; max-width: 65%; overflow: hidden; text-overflow: ellipsis; }
.chip-tail { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip-tail:empty { display: none; }

/* the writing tools: just above the keyboard on a phone (scrolling sideways when they don't fit), at the top on the PC */
.editor-tools { position: relative; gap: 6px; container-type: inline-size; }
.tool-strip {
  display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.tool-strip::-webkit-scrollbar { display: none; }
.tool-strip.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.tool-btn {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-2);
  transition: background var(--d-1), color var(--d-1);
}
.tool-btn .icon { width: 21px; height: 21px; }
.tool-btn::after { content: ""; position: absolute; inset: -2px; }  /* 44 px */
.tool-btn:hover { background: var(--surface-2); color: var(--text); }
.tool-btn:active { background: var(--accent-soft); color: var(--accent-ink); }
.tool-btn.on { background: var(--accent-soft); color: var(--accent-ink); }
.tool-btn[aria-disabled="true"] { color: var(--faint); background: transparent; cursor: default; }
.tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tool-sep { width: 1px; height: 22px; margin: 0 5px; background: var(--line); flex: none; }
/* + More (1.19): every other tool in one menu, its button outside the strip so it never scrolls away */
.tool-btn.tool-more {
  display: inline-flex; align-items: center; gap: 4px; width: auto; padding: 0 10px 0 7px; color: var(--text-2);
  font: 600 13.5px/18px var(--font); white-space: nowrap;
}
.tool-more .icon { width: 19px; height: 19px; }
.tool-more[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.tool-more.on { background: var(--accent-soft); color: var(--accent-ink); }
.tool-more.on::before {  /* (a tool under it is on: Dictate listening) */
  content: ""; position: absolute; top: 6px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.editor.reading .tool-more, .editor-tools.recording .tool-more { display: none; }
.menu.tools-more-menu { width: min(348px, calc(100vw - 16px)); min-width: 0; padding: 8px; border-radius: 14px; }
.more-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.more-tool {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 0; min-height: 72px;
  padding: 10px 4px 8px; border: none; border-radius: 10px; background: none; color: var(--text);
  font: 500 13px/16px var(--font); text-align: center; overflow-wrap: anywhere;
}
.more-tool .icon { width: 22px; height: 22px; color: var(--text-2); }
.more-tool:hover, .more-tool:focus { background: light-dark(var(--surface-2), color-mix(in oklab, var(--text) 6%, transparent)); outline: none; }
.more-tool:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.more-tool-on {
  position: absolute; top: 5px; right: 5px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-ink); font: 600 10.5px/16px var(--font);
}
@media (forced-colors: active) { .more-tool:focus-visible { outline: 2px solid CanvasText; } }
.tools-end { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.tools-info { display: grid; justify-items: end; gap: 0; min-width: 0; padding-left: 2px; }
.tools-info .save-state { padding: 0 4px; font-size: 11.5px; line-height: 14px; white-space: nowrap; }
.word-count {
  position: relative; background: none; border: none; padding: 2px 4px; border-radius: var(--r-sm); color: var(--text-2);
  font: 500 12.5px/16px var(--font); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.word-count::after { content: ""; position: absolute; inset: -6px -4px; }
.word-count:hover { background: var(--surface-2); color: var(--text); }
.count-time { display: none; color: var(--muted); }
@container (min-width: 560px) {
  .tools-info { display: flex; align-items: center; gap: 10px; }
  .tools-info .save-state { font-size: 12.5px; line-height: 16px; }
}
@container (min-width: 760px) { .count-time { display: inline; } }
.read-hint { display: none; flex: 1; min-width: 0; padding: 0 6px; color: var(--muted); font: 500 13px/18px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor.reading .tool-strip { display: none; }
.editor.reading .read-hint { display: block; }

/* a word goal: a thin bar along the tools that fills up as the words come */
.goal-line { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--line-soft); pointer-events: none; }
.goal-line i { display: block; width: 0; height: 100%; background: var(--accent); border-radius: 0 2px 2px 0; transition: width .3s var(--ease-out); }
.goal-line.met i { background: var(--ok); }
.pane .goal-line { top: auto; bottom: -1px; }

/* recording a voice memo: the tools make way for the timer and the buttons */
.recorder { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding-left: 6px; }
.editor-tools.recording .tool-strip, .editor-tools.recording .tools-end, .editor-tools.recording .read-hint { display: none; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .3; } }
.rec-text { color: var(--text); font: 600 14px/20px var(--font); white-space: nowrap; }
.rec-time { margin-left: 4px; color: var(--danger); }
.recorder .btn { padding: 0 12px; }

/* files and voice memos in a note */
.files { display: grid; gap: 8px; margin-top: 16px; }
.pictures:not([hidden]) + .files { margin-top: 12px; }
.file-chip {
  display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 58px; padding: 6px 6px 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
}
.file-open {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 44px; padding: 2px 4px; margin: 0;
  background: none; border: none; border-radius: var(--r-sm); color: var(--text); text-align: left;
}
.file-open:hover .file-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.file-badge {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px;
  background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft);
  font: 700 10.5px/1 var(--font); letter-spacing: .02em;
}
.file-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.file-name { font: 600 14px/19px var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { color: var(--muted); font: 500 12.5px/16px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-text .bar { display: block; flex: none; width: 100%; height: 3px; margin-top: 4px; }
.file-text .bar i { width: 0; }
.audio-bar i { transition: none; }
.file-chip .file-remove { color: var(--muted); }
.file-chip.loading .file-badge { background: var(--surface-2); box-shadow: none; }
.file-chip.audio { gap: 12px; padding-left: 9px; }
.play-btn {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0;
  border: none; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  transition: background var(--d-1), transform var(--d-1) var(--ease-out);
}
.play-btn::after { content: ""; position: absolute; inset: -2px; }
.play-btn .icon { width: 17px; height: 17px; }
.play-btn:hover { background: var(--accent-hover); }
.play-btn:active { transform: scale(.96); background: var(--accent-press); }
.play-btn.loading { opacity: .6; }

/* the word count sheet */
.count-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 12px; }
.count-item { display: grid; gap: 2px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.count-item strong { color: var(--text); font: 600 22px/28px var(--font-display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; }
.count-item span { color: var(--muted); font: 500 12.5px/16px var(--font); }
.count-goal { margin: 4px 0 6px; color: var(--text-2); }
.count-goal span { color: var(--text); font-weight: 600; }

/* the Read view: the note formatted (tap the words to write there again) */
.read-view { cursor: text; padding-bottom: 8px; }
.read-body { color: var(--text); font: 400 16px/26px var(--font); overflow-wrap: anywhere; }
.pane .read-body { font-size: 15.5px; line-height: 25px; }
.read-para { margin: 0; }
.read-gap { height: 12px; }
.read-heading { margin: 14px 0 4px; color: var(--text); }
.read-body > .read-heading:first-child { margin-top: 0; }
h2.read-heading { font: 600 22px/30px var(--font-display); letter-spacing: -.012em; }
h3.read-heading { font: 600 18px/27px var(--font); letter-spacing: -.005em; }
h4.read-heading { font: 600 16px/26px var(--font); color: var(--text-2); }
.read-list { margin: 2px 0; padding-left: 26px; }
.read-list li { padding-left: 2px; }
.read-list li::marker { color: var(--muted); }
.read-list li[data-level="1"] { margin-left: 22px; }
.read-list li[data-level="2"] { margin-left: 44px; }
.read-list li[data-level="3"], .read-list li[data-level="4"] { margin-left: 66px; }
.read-check { display: flex; align-items: flex-start; gap: 12px; min-height: 36px; padding: 3px 0; }
.read-check .tick { margin-top: 2px; }
.read-check.done .tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.read-check.done .tick .icon { transform: none; }
.read-text { flex: 1; min-width: 0; }
.read-check.done .read-text { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.read-link { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.read-link:hover { text-decoration-color: currentColor; }
/* A #tag in the Read view: a button that shows the notes with it, drawn as the words it is (1.19.11) */
.read-tag {
  display: inline; margin: 0; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--accent-ink);
  font: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; white-space: normal; cursor: pointer;
}
.read-tag:hover { text-decoration: underline; text-underline-offset: 3px; }
.read-body u, .block-preview u { text-underline-offset: 3px; }
.read-body s, .block-preview s { text-decoration-color: color-mix(in srgb, currentColor 75%, transparent); }
mark.read-hl { padding: 0 2px; margin: 0 -2px; border-radius: 3px; background: var(--highlight); color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.read-code-span {
  padding: 1px 5px; border: 1px solid var(--line-soft); border-radius: var(--r-xs); background: var(--surface-2);
  font: 500 .88em/1 ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
}
.read-pre {
  margin: 6px 0; padding: 12px 14px; overflow-x: auto; white-space: pre; border: 1px solid var(--line-soft);
  border-radius: var(--r-md); background: var(--sunken); font: 400 13.5px/21px ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
}
.read-quote { margin: 6px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-strong); color: var(--text-2); }
.read-rule { margin: 14px 0; border: none; border-top: 1px solid var(--line); }
.read-empty { margin: 0; color: var(--placeholder); }

/* -- organise: folders, picking several notes, the archive, sort and grid, #tags, search filters, own templates */

.list-tools { display: flex; align-items: center; margin-left: auto; flex: none; }
.chip.add { padding: 0 12px 0 10px; border-style: dashed; border-color: var(--line-strong); color: var(--text-2); }
@media (hover: none) { .folder-row .folder-more { opacity: .6; } }

/* search: the filters it knows, and the words it found lit up */
.search-help {
  display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 10px 16px 2px;
}
.search-help::-webkit-scrollbar { display: none; }
.help-word { flex: none; color: var(--muted); font: 600 12.5px/16px var(--font); margin-right: 2px; }
.filter-pill {
  position: relative; flex: none; height: 30px; padding: 0 10px; border-radius: var(--r-full);
  border: 1px dashed var(--line-strong); background: transparent; color: var(--text-2); font: 500 13px/1 var(--font); white-space: nowrap;
}
.filter-pill::after { content: ""; position: absolute; inset: -7px 0; }  /* 44 px tall to a finger */
.filter-pill:hover { border-style: solid; background: var(--surface-2); color: var(--text); }
@media (max-width: 899px) {
  /* the "Try" buttons: plain words on rounded buttons a finger finds easily */
  .search-help { gap: 8px; padding-top: 6px; }
  .help-word { font-size: 14px; }
  .filter-pill { height: 34px; padding: 0 13px; border-style: solid; border-color: var(--line); background: var(--card); color: var(--text-2); font-size: 14px; }
  .filter-pill::after { inset: -5px 0; }
}
mark.hit { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; margin: 0 -1px; }
.note-tags { display: inline-flex; gap: 6px; min-width: 0; overflow: hidden; }
.note-tag { color: var(--accent-ink); white-space: nowrap; }
.note-tag.more { color: var(--muted); }

/* cards: a finger held on one picks it, so it never starts selecting its words */
button.card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pick { display: none; }
.list.picking .pick {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.75px solid var(--control); color: transparent; transition: background var(--d-1), border-color var(--d-1);
}
.pick .icon { width: 14px; height: 14px; color: inherit; }
.pick .icon svg { stroke-width: 2.6; }
.list.picking button.card.selected { background: var(--accent-wash); border-color: var(--accent-line); }
.list.picking button.card.selected .pick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.list.picking button.card.open:not(.selected) { background: var(--card); border-color: var(--line); }

/* the bar for what's picked: floating at the foot of the list */
.notes-layout { position: relative; }
.pick-bar {
  position: absolute; z-index: 6; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 4px; padding: 4px 8px 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  animation: rise var(--d-3) var(--ease-out);
}
.pick-top { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.pick-count { flex: 1; min-width: 0; font: 600 15px/20px var(--font); }
.pick-all { padding: 10px 8px; }
.pick-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.pick-action {
  display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 56px; padding: 6px 2px;
  border: none; border-radius: var(--r-md); background: transparent; color: var(--text-2); font: 500 12.5px/14px var(--font);
}
.pick-action .icon { width: 22px; height: 22px; }
.pick-action > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* (five in a row: one picked has More) */
.pick-action:hover { background: var(--surface-2); color: var(--text); }
.pick-action.danger { color: var(--danger); }
.pick-action.danger:hover { background: var(--danger-soft); }
.pick-action:disabled, .pick-action:disabled:hover { opacity: .4; background: transparent; cursor: default; }  /* nothing picked yet */
.notes-layout.selecting .list-column { padding-bottom: calc(150px + var(--safe-bottom)); }
/* picked notes' Export (js/export.js): in the bar's top row, beside Pick all (the row of actions below is full on a
   320 px phone) */
.pick-export {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 10px; justify-self: auto;
  border-radius: var(--r-md); text-decoration: none; white-space: nowrap;
}
.pick-export .icon { width: 18px; height: 18px; }
.pick-export:hover:not(:disabled) { background: var(--surface-2); }
.pick-export:disabled { opacity: .4; cursor: default; }

/* Export's sheet (js/export.js): Text or Markdown as two big rows, a locked note's warning above them */
.export-choices { display: grid; gap: 8px; }
.template.export-choice { width: 100%; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.template.export-choice .icon { grid-row: span 2; margin: 0; }
.template.export-choice .t-hint { color: var(--text-2); }
.export-warn {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--text); font: 500 14px/20px var(--font);
}
.export-warn .icon { flex: none; margin-top: 1px; color: var(--warn); }
.sheet-body > .export-about { margin: 12px 0 0; text-align: left; }
.export-ready { display: flex; align-items: center; gap: 10px; margin: 0; overflow-wrap: anywhere; }
.export-ready .icon { flex: none; color: var(--accent-ink); }
/* how many picked notes are folded away under "Past week" / "Older" (Pick all takes them too) */
.fold-picked { color: var(--accent-ink); font-weight: 600; margin-left: 8px; }
.fold-picked[hidden] { display: none; }

/* the Select button: by sort and grid on the PC (a phone's is "Select notes" in the ⋯) */
.select-btn {
  flex: none; height: 34px; min-height: 34px; gap: 6px; padding: 0 10px; margin-left: 2px; border-radius: var(--r-md);
  background: transparent; border-color: transparent; color: var(--text-2); font: 500 13.5px/1 var(--font); white-space: nowrap;
}
.select-btn .icon { display: none; }  /* the word alone: with a folder's ⋯, sort and grid beside it, the folder's name needs the room */
.select-btn:hover { background: var(--surface-2); color: var(--text); }
.select-btn[aria-pressed="true"], .select-btn[aria-pressed="true"]:hover { background: var(--accent-soft); color: var(--accent-ink); }

/* A phone's ⋯ (js/notes.js moreMenu): Select notes, Sort (the one in use, then its own menu), View List | Grid and an
   open folder's options. Big rows for a finger. */
.menu.notes-menu { min-width: 272px; padding: 6px; border-radius: 14px; }
.notes-menu .menu-item { min-height: 48px; gap: 12px; padding: 0 12px; font-size: 15px; border-radius: 10px; }
.notes-menu .menu-item .icon { width: 20px; height: 20px; }
.menu-more .menu-value { margin-left: auto; padding-left: 16px; color: var(--muted); font-weight: 500; }
.menu-more .menu-go { width: 16px !important; height: 16px !important; margin-left: -4px; }
.menu-row.menu-view {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 4px 0 12px; color: var(--text);
  font: 500 15px/18px var(--font);
}
.menu-view > .icon { width: 20px; height: 20px; color: var(--muted); }
.menu-view .segmented { margin-left: auto; box-shadow: inset 0 0 0 1px var(--line-soft); }
.menu-view .segmented button { min-width: 64px; min-height: 40px; font-size: 14.5px; }

/* a card dragged over a folder (the PC) */
.nav-item.drop-on, .chip.drop-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }

/* Dragging (js/drag.js, 1.17): the label under the pointer, the line where a folder would go, a folder lit to drop
   into (or crossed out: the reason is said on the drop), what's being dragged faded where it was, and a thing held by
   a finger lifted a little. */
html.dragging, html.dragging * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
  max-width: min(280px, calc(100vw - 16px)); height: 40px; padding: 0 14px 0 10px; border-radius: var(--r-md);
  background: var(--raised); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3);
  font: 600 14px/18px var(--font); will-change: transform;
}
.drag-ghost > .icon { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
.drag-ghost .emoji { font-size: 16px; }
.drag-ghost .dot-box { display: grid; place-items: center; }
.drag-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drag-count {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent);
  color: var(--on-accent); font: 600 12px/22px var(--font); text-align: center;
}
.drag-ghost.refused { border-color: var(--danger); }
.drop-line { position: fixed; z-index: 94; pointer-events: none; border-radius: 2px; background: var(--accent); }
.drop-line[hidden] { display: none; }
.drop-line::before {  /* a ring where the line starts, so a short one still reads as "here" */
  content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--accent); background: var(--bg);
}
.drop-line.across::before { left: 50%; top: -5px; margin: 0 0 0 -4.5px; }
.drag-source { opacity: .45; }
.drag-held { transform: scale(1.02); box-shadow: var(--shadow-2); transition: transform var(--d-1) var(--ease-out), box-shadow var(--d-1); }
:is(.crumb, .subfolder, .arrange-row, .arrange-end, .nav-heading).drop-on { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
:is(.nav-item, .chip, .crumb, .subfolder, .arrange-row, .arrange-end).drop-no {
  background: var(--danger-soft); border-color: var(--danger); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger);
}
/* Today's to-dos dragged onto a day of the week strip (1.19.11, a mouse) */
.wday.drop-on { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wday.drop-no { background: var(--danger-soft); border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
/* things a finger holds to drag: never their words selected or the phone's own menu */
:is(.chips .chip, .folders .nav-item, .subfolder, .arrange-row) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* On a phone (and a narrow window) the chips stay at the top of the list while something's dragged, so a folder is
   always in reach (the list scrolls by itself under them near their edge). */
html.dragging .list-column > .chips { position: sticky; top: 0; z-index: 4; background: var(--bg); box-shadow: 0 1px 0 var(--line-soft); }
@media (min-width: 900px) { html.dragging .list-column > .chips { background: var(--surface); } }

/* Arrange folders (js/organise.js): every folder as a tree, each with its dots to drag it by */
.arrange-hint { text-align: left !important; margin: 2px 0 10px !important; color: var(--text-2); }
.arrange-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }  /* (long names end in …) */
.arrange-row {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 0; border-radius: var(--r-md);
  border: 1px solid transparent; background: none; color: var(--text); font: 500 15px/20px var(--font);
}
.arrange-row[data-depth="1"] { padding-left: 22px; }
.arrange-row[data-depth="2"] { padding-left: 44px; }
.arrange-row[data-depth="3"] { padding-left: 66px; }
.arrange-row[data-depth="4"] { padding-left: 88px; }
.arrange-row.drag-held { background: var(--card); }
.arr-handle {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: none; border-radius: var(--r-md);
  background: none; color: var(--muted); cursor: grab; touch-action: none;
}
.arr-handle:hover { background: var(--surface-2); color: var(--text); }
.arr-handle:disabled { cursor: default; opacity: .6; }
.arr-handle:disabled:hover { background: none; color: var(--muted); }
.arr-handle .icon { width: 20px; height: 20px; }
.arrange-end {
  display: grid; place-items: center; min-height: 48px; margin-top: 6px; border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  color: var(--muted); font: 500 13.5px/18px var(--font);
}
html:not(.dragging) .arrange-end { visibility: hidden; }  /* (its room kept, so nothing moves as a drag starts) */
/* the toasts (the last drop's Undo) step back while dragging: a drop lands on what's under them */
html.dragging #toasts { opacity: .35; transition: opacity var(--d-1); }
html.dragging .toast { pointer-events: none; }
/* with Arrange folders open, the toasts (each move's Undo) show at the top, off the folders being dragged */
body:has(.arrange-list) #toasts { top: calc(12px + var(--safe-top)); bottom: auto; }

/* grid view: two columns on a phone, as many as fit beside the note on a wide screen */
.list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.list.grid > :not(button.card) { grid-column: 1 / -1; }
.list.grid button.card { align-content: start; padding: 12px 14px; }
.list.grid .card-snippet { -webkit-line-clamp: 6; }
.list.grid .card-meta .when { margin-left: 0; }

@media (min-width: 900px) {
  .search-help { margin: 0 -10px; padding: 8px 14px 0; flex-wrap: wrap; overflow: visible; }
  .pick-bar { grid-row: 1 / 2; grid-column: 1 / 2; left: 10px; right: 10px; }  /* over the list only (an auto line would be the edge) */
  .notes-layout.selecting .list-column { padding-bottom: 150px; }
  .list.picking button.card.selected::before, .list.picking button.card.selected + button.card::before { display: none; }
  .list.picking button.card.open:not(.selected) { background: transparent; border-color: transparent; }
  .notes-layout.grid-view { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .list.grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
  .list.grid button.card { background: var(--card); border-color: var(--line); border-radius: var(--r-lg); padding: 14px; min-height: 96px; }
  .list.grid button.card::before { display: none; }
  .list.grid button.card:hover { background: var(--card); border-color: var(--line-strong); }
  .list.grid button.card.open { background: var(--accent-wash); border-color: var(--accent-line); }
  .list.grid.picking button.card.selected { background: var(--accent-wash); border-color: var(--accent-line); }
}
@media (min-width: 1200px) {
  .pick-bar { grid-column: 2 / 3; }
  .notes-layout.grid-view { grid-template-columns: 236px minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (min-width: 1440px) {
  .notes-layout.grid-view { grid-template-columns: 252px minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* a folder's name and emoji */
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin: 8px 0 4px; }
.emoji-pick {
  height: 44px; padding: 0; display: grid; place-items: center; border-radius: var(--r-md);
  border: 1px solid transparent; background: var(--surface-2); color: var(--text-2);
}
.emoji-pick .emoji { font-size: 22px; }
.emoji-pick .dot { width: 10px; height: 10px; }
.emoji-pick:hover { border-color: var(--line-strong); }
.emoji-pick[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-ink); }
.emoji-own { margin-top: 8px; }
.sheet-body > .label:first-child { margin-top: 4px; }

/* "Move to": the folders as a list */
.folder-choices { display: grid; gap: 2px; }
.folder-choice {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--r-md);
  border: 1px solid transparent; background: none; color: var(--text); text-align: left; font: 500 15px/20px var(--font);
}
.folder-choice:hover { background: var(--surface-2); }
.folder-choice.on { background: var(--accent-wash); border-color: var(--accent-line); }
.fc-badge { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--muted); }
.fc-badge .emoji { font-size: 16px; }
.fc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-check { color: var(--accent-ink); }
.folder-choice.new { color: var(--accent-ink); }
.folder-choice.new .fc-badge { background: var(--accent-wash); color: var(--accent-ink); }
.folder-choice:disabled { color: var(--muted); cursor: default; }
.folder-choice:disabled:hover { background: none; }
.folder-choice:disabled .fc-badge { opacity: .5; }

/* folders inside folders: indented a step a level (the side list, "Move to"), a chevron to fold them away (the side
   list), the folders an open one is in above its name, and its own folders above its notes */
.folder-choice[data-depth="1"] { padding-left: 30px; }
.folder-choice[data-depth="2"] { padding-left: 48px; }
.folder-choice[data-depth="3"] { padding-left: 66px; }
.folder-choice[data-depth="4"] { padding-left: 84px; }
.folder-row[data-depth="1"] { padding-left: 14px; }
.folder-row[data-depth="2"] { padding-left: 28px; }
.folder-row[data-depth="3"] { padding-left: 42px; }
.folder-row[data-depth="4"] { padding-left: 56px; }
.twist, .twist-space { flex: none; width: 18px; }
.twist {
  height: 28px; padding: 0; display: grid; place-items: center; border: none; border-radius: 6px; background: none;
  color: var(--muted);
}
.twist:hover { background: var(--surface-2); color: var(--text); }
.twist .icon { width: 14px; height: 14px; transition: transform var(--d-2) var(--ease-out); }
.twist[aria-expanded="true"] .icon { transform: rotate(90deg); }
.nav-heading.drop-on { color: var(--accent-ink); box-shadow: inset 0 -2px 0 var(--accent); }

.crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; margin: 0 0 0 -5px; }
.crumbs[hidden] { display: none; }
.crumb {
  position: relative; flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 24px;
  padding: 0 5px; border: none; border-radius: 6px; background: none; color: var(--text-2);
  font: 500 13.5px/1 var(--font); white-space: nowrap;
}
.crumb:nth-last-child(2) { flex-shrink: 0; max-width: 60%; }  /* the folder this one is in, said in full when it can be */
.crumb::after { content: ""; position: absolute; inset: -6px 0 0; }  /* (taller to a finger, never over the name below) */
.crumb span:last-child { overflow: hidden; text-overflow: ellipsis; }
.crumb .emoji { font-size: 13px; }
.crumb:hover { background: var(--surface-2); color: var(--text); }
.crumb-gap { flex: none; color: var(--faint); }
@media (min-width: 900px) {
  .list-title .folder-up { width: 32px; height: 32px; margin: 0 2px 0 -6px; align-self: flex-end; }
  .list-title .list-tools .icon-btn { width: 40px; height: 40px; border-radius: var(--r-md); }
}

.subfolders { display: grid; gap: 8px; }
.subfolder {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 12px 0 14px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text);
  font: 600 15px/20px var(--font);
}
.subfolder:hover { border-color: var(--line-strong); }
.subfolder:active { background: var(--surface-2); }
.sf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-meta { flex: none; color: var(--muted); font: 500 12.5px/16px var(--font); font-variant-numeric: tabular-nums; }
.sf-go { width: 16px; height: 16px; flex: none; color: var(--faint); }
.subfolder.drop-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.list.grid .subfolders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.list.grid .subfolder .sf-meta { display: none; }
@media (min-width: 900px) {
  .subfolders { gap: 2px; }
  .subfolder {
    min-height: 44px; padding: 0 12px; gap: 10px; background: transparent; border-color: transparent;
    border-radius: var(--r-md); font-size: 14.5px;
  }
  .subfolder:hover { background: var(--surface-2); border-color: transparent; }
  .subfolder .fc-badge { width: 26px; height: 26px; border-radius: 7px; }
  .list.grid .subfolders { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
  .list.grid .subfolder { background: var(--card); border-color: var(--line); }
}

/* your own templates, under the built-in ones */
.t-section { margin: 20px 2px 8px; color: var(--muted); font: 600 13px/18px var(--font); }
.sheet-body > .t-tip { display: flex; align-items: center; gap: 8px; text-align: left; margin: 16px 2px 2px; }
.t-tip .icon { width: 16px; height: 16px; }
.own-template { position: relative; display: grid; }
.own-template .template { width: 100%; padding-right: 40px; }
.own-template .t-more { position: absolute; top: 8px; right: 8px; }

/* -- send: previews before and after sending, "Send to", link and text rows, the big view (js/send.js) */

/* (1.16: "Send to" is one row, in the Share block) */
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* the tray: what's picked, before Send */
.tray { display: grid; gap: 10px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tray-head { display: flex; align-items: center; gap: 10px; }
.tray-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.tray-title strong { font: 600 15px/20px var(--font); }
.tray-title span { color: var(--muted); font: 500 12.5px/16px var(--font); }
.tray-head .btn { min-height: 36px; padding: 0 12px; }
.tray-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.stage {
  position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
}
.stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage-file { display: grid; justify-items: center; gap: 2px; width: 100%; min-width: 0; padding: 8px 6px; text-align: center; }
.stage-file .icon { width: 22px; height: 22px; color: var(--text-2); margin-bottom: 2px; }
.stage-name {
  font: 500 11.5px/14px var(--font); color: var(--text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.stage-size { font: 500 11px/14px var(--font); color: var(--muted); }
.stage-x {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--toast); border: 1px solid var(--toast-edge); color: var(--on-toast);
}
.stage-x::after { content: ""; position: absolute; inset: -9px; }  /* 44 px to a finger */
.stage-x .icon { width: 14px; height: 14px; }
.tray-hint { margin: 0; color: var(--muted); font: 400 13px/18px var(--font); }

/* previews in the list: one picture, or a mosaic of those sent together; solid pills on top of them */
.transfer.has-thumb { grid-template-columns: 64px minmax(0, 1fr) auto; }
.transfer.group { grid-template-columns: auto minmax(0, 1fr) auto; }
.t-thumb, .mosaic-tile {
  position: relative; padding: 0; overflow: hidden; display: grid; place-items: center; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line);
}
.t-thumb { width: 64px; height: 64px; border-radius: var(--r-md); }
.mosaic-tile { border-radius: var(--r-sm); }
button.t-thumb:hover, .mosaic-tile:hover { border-color: var(--line-strong); }
.t-thumb img, .mosaic-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-mosaic { display: grid; grid-template-columns: repeat(2, 56px); grid-auto-rows: 56px; gap: 4px; }
.t-mosaic[data-n="3"] > :first-child { grid-row: span 2; }
.media-badge {
  position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 3px;
  border-radius: var(--r-full); background: var(--toast); color: var(--on-toast); font: 600 11px/14px var(--font);
  font-variant-numeric: tabular-nums;
}
.media-badge .icon { width: 12px; height: 12px; }
.mosaic-more {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 9px; border-radius: var(--r-full);
  background: var(--toast); color: var(--on-toast); font: 600 13px/16px var(--font); font-variant-numeric: tabular-nums;
}

/* links: the site's name, the address on a chip; long text shows four lines and "More" */
.link-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; min-width: 0;
  min-height: 30px; padding: 0 10px; border-radius: var(--r-full); border: 1px solid var(--accent-soft);
  background: var(--accent-wash); color: var(--accent-ink); font: 500 13px/18px var(--font);
}
.link-chip:hover { border-color: var(--accent-line); }
.link-chip::after { content: ""; position: absolute; inset: -7px 0; }  /* 44 px tall to a finger */
.link-chip .icon { width: 14px; height: 14px; }
.link-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-links { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.transfer .t-text { max-height: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.transfer .t-text.open { display: block; -webkit-line-clamp: unset; }
.more-btn {
  position: relative; justify-self: start; padding: 0; border: none; background: none; color: var(--accent-ink);
  font: 600 13px/18px var(--font);
}
.more-btn::after { content: ""; position: absolute; inset: -13px -12px; }

/* the big view */
.viewer-frame { position: relative; display: grid; }
.send-viewer {
  display: grid; place-items: center; min-height: 200px; overflow: hidden; background: var(--sunken); border-radius: var(--r-md);
}
.send-viewer img, .send-viewer video { display: block; max-width: 100%; max-height: 66vh; max-height: 66dvh; }
.send-viewer img { width: 100%; height: auto; object-fit: contain; }
.send-viewer video { width: 100%; background: #000; }
.send-viewer > .icon { width: 40px; height: 40px; color: var(--muted); }
.viewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--toast); border: 1px solid var(--toast-edge); color: var(--on-toast);
}
.viewer-nav::after { content: ""; position: absolute; inset: -4px; }
.viewer-nav .icon { width: 20px; height: 20px; }
.viewer-nav.prev { left: 8px; }
.viewer-nav.next { right: 8px; }
.viewer-count { margin: 8px 0 0; text-align: center; color: var(--muted); font: 500 13px/18px var(--font); font-variant-numeric: tabular-nums; }

/* -- files ---------------------------------------------------------- the Files tab (js/files.js): your PC, this phone,
   Vault Drive. A list of 60 px rows on a phone (tap opens, hold for the menu), a Name / Size / Modified table when wide. */

.files-page { max-width: 1080px; }
.files-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.files-main { display: grid; gap: 10px; min-width: 0; }

/* where: a segmented row on a phone, a list down the side when wide */
.files-sources { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 12px; }
.files-source {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px;
  padding: 0 8px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text-2);
  font: 500 13.5px/1 var(--font); transition: background var(--d-2), color var(--d-2);
}
.files-source span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-source .icon { width: 17px; height: 17px; }
.files-source:hover { color: var(--text); }
.files-source.on { background: var(--selected); border-color: light-dark(var(--line), transparent); box-shadow: var(--shadow-1); color: var(--text); font-weight: 600; }
:where(:root[data-theme="dark"]) .files-source.on { box-shadow: var(--shadow-1), inset 0 1px 0 var(--edge-hi); }  /* (as the picked segment) */
@media (pointer: coarse) { .files-source { min-height: 44px; } }
@media (max-width: 419px) { .files-source .icon { display: none; } }
/* 1.16 (Share, C): where to look as chips on a phone (a column beside the list from 900 px, as before), and "on now". */
@media (max-width: 899px) {
  .files-sources { flex-wrap: wrap; gap: 8px; padding: 0; background: none; border-radius: 0; }
  .files-source {
    flex: none; min-height: 44px; padding: 0 14px; gap: 7px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--text-2); font-size: 14.5px;
  }
  .files-source .icon { display: inline-block; width: 17px; height: 17px; }
  .files-source.on, :where(:root[data-theme="dark"]) .files-source.on { background: var(--text); border-color: transparent; color: var(--bg); box-shadow: none; }
}
@media (max-width: 399px) { .files-sources .files-source .icon { display: none; } }  /* (the three fit one row) */
.files-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.files-host.live .files-host-text > span { color: var(--text-2); }

.files-host {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.files-host > .icon {
  width: 40px; height: 40px; padding: 9px; border-radius: 11px; flex: none;
  background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.files-host-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.files-host-text strong { font: 600 15px/20px var(--font); }
.files-host-text span { color: var(--muted); font: 400 13px/18px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-host.files-wraps .files-host-text span { white-space: normal; }
.files-host-pick {
  height: 36px; max-width: 42%; padding: 0 8px; border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--field); color: var(--text); font: 500 13.5px/1 var(--font);
}

.files-roots { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
.files-roots::-webkit-scrollbar { display: none; }

.files-bar { display: flex; align-items: center; gap: 4px; min-height: 44px; min-width: 0; }
.files-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.files-crumbs::-webkit-scrollbar { display: none; }
.files-crumb {
  flex: none; max-width: 220px; min-height: 36px; padding: 0 8px; border: none; border-radius: 8px; background: none;
  color: var(--text-2); font: 500 14px/1 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.files-crumb:hover { background: var(--surface-2); color: var(--text); }
.files-crumb.here { color: var(--text); font-weight: 600; }
.files-crumb-gap { flex: none; color: var(--faint); }
@media (pointer: coarse) { .files-crumb { min-height: 44px; } }

.files-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.files-list { display: grid; min-width: 0; }
.files-columns { display: none; }
.files-row { display: flex; align-items: center; gap: 4px; min-width: 0; border-bottom: 1px solid var(--line-soft); }
.files-row:last-child { border-bottom: none; }
.files-open {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "face name" "face meta";
  column-gap: 12px; row-gap: 2px; align-items: center; min-height: 60px; padding: 8px 4px; text-align: left;
  background: none; border: none; border-radius: var(--r-md); color: var(--text);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  transition: background var(--d-1);
}
.files-open:active { background: var(--surface-2); }
@media (hover: hover) { .files-open:hover { background: var(--surface-2); } }  /* a phone's tap leaves no hover behind */
.files-icon, .files-thumb {
  grid-area: face; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; flex: none;
  background: var(--surface-2); color: var(--text-2);
}
.files-icon .icon { width: 20px; height: 20px; }
.files-icon.dir { background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.files-thumb { border: 1px solid var(--line); }
.files-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.files-name { grid-area: name; min-width: 0; align-self: end; font: 500 15px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-meta {
  grid-area: meta; align-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted);
  font: 400 12.5px/16px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.files-meta > span:empty { display: none; }
.files-size:not(:empty) + .files-date:not(:empty)::before { content: "·"; margin-right: 8px; }
.files-size.too-big { color: var(--warn); }
.files-cloud { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); }
.files-cloud .icon { width: 14px; height: 14px; }
.files-go { width: 40px; display: grid; place-items: center; flex: none; color: var(--faint); }
.files-go .icon { width: 18px; height: 18px; transform: rotate(180deg); }

.files-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0 12px; }
.files-foot:empty { display: none; }
.files-count { margin-left: auto; color: var(--muted); font: 500 12.5px/16px var(--font); }

.files-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 16px; text-align: center; color: var(--muted); }
.files-empty strong { color: var(--text); font: 600 16px/22px var(--font); }
.files-empty p { margin: 0; max-width: 380px; color: var(--text-2); font: 400 14px/20px var(--font); }
.files-empty-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.files-empty-icon .icon { width: 24px; height: 24px; }
.files-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

.files-tip { display: grid; gap: 12px; padding: 4px 16px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.files-tip .files-empty { padding: 24px 8px 2px; }
.files-tip .steps { margin: 0; }
.files-tip > .btn:not(.wide-btn) { justify-self: center; }
.files-tip .hint { margin: 0; }
.files-tip .hint.center { text-align: center; }

.files-uploads { display: grid; gap: 6px; }
.files-uploads:empty { display: none; }
.files-upload {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--accent-wash); border: 1px solid var(--accent-line);
}
.files-upload-text { flex: 1; min-width: 0; display: grid; gap: 6px; }
.files-upload .files-icon { background: var(--card); color: var(--accent-ink); }
.files-upload .files-size { color: var(--muted); font: 500 12.5px/16px var(--font); }
.files-space { margin-top: 8px; }

/* one file's sheet */
.files-sheet-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; }
.files-icon.big, .files-thumb.big { width: 56px; height: 56px; border-radius: 14px; }
.files-icon.big .icon { width: 26px; height: 26px; }
.files-sheet-name { display: grid; gap: 2px; min-width: 0; }
.files-sheet-name strong { font: 600 15px/20px var(--font); overflow-wrap: anywhere; }
.files-sheet-name span { color: var(--muted); font: 400 13.5px/20px var(--font); }
.files-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; color: var(--text-2); font: 500 13.5px/20px var(--font); }
.files-status:empty { display: none; }
.files-status .error-text { margin: 0; }
.files-status .btn { min-height: 36px; padding: 0 10px; }
.files-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.files-actions .btn { min-height: 48px; padding: 0 12px; }
.files-actions .btn.primary { grid-column: 1 / -1; }
.sheet-body > .hint .icon { width: 15px; height: 15px; vertical-align: -3px; }

/* the PC: what it shares */
.files-share .setting > .files-icon { width: 36px; height: 36px; }
.files-share .setting > .setting-text { flex: 1; }
.files-share .muted-card .setting { opacity: .55; }
.files-share .switch:disabled { opacity: .45; cursor: default; }
.files-rules { margin: 6px 0 14px; padding-left: 20px; display: grid; gap: 6px; color: var(--text-2); font: 400 14px/20px var(--font); }

@media (min-width: 700px) {
  .files-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .files-layout { grid-template-columns: 208px minmax(0, 1fr); gap: 24px; }
  .files-sources { flex-direction: column; gap: 2px; padding: 0; background: none; position: sticky; top: 16px; }
  .files-source { flex: none; justify-content: flex-start; gap: 10px; min-height: 40px; padding: 0 12px; font-size: 14px; }
  .files-source .icon { width: 18px; height: 18px; color: var(--muted); }
  .files-source:hover { background: var(--surface-2); }
  .files-source.on, :where(:root[data-theme="dark"]) .files-source.on { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-1); }  /* (as .nav-item.on) */
  .files-source.on .icon { color: var(--accent-ink); }
  .files-roots { margin: 0; padding: 2px 0 4px; flex-wrap: wrap; }
  /* a table: Name, Size, Modified */
  .files-columns {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px 88px 128px; column-gap: 12px; padding: 4px 48px 8px 4px;
    color: var(--muted); font: 600 12.5px/16px var(--font); border-bottom: 1px solid var(--line);
  }
  .files-columns span:first-child { grid-column: 2; }
  .files-columns span:nth-child(2) { grid-column: 4; text-align: right; }
  .files-columns span:nth-child(3) { grid-column: 5; }
  .files-open { grid-template-columns: 32px minmax(0, 1fr) 20px 88px 128px; grid-template-areas: "face name cloud size date"; min-height: 44px; padding: 6px 4px; }
  .files-icon, .files-thumb { width: 32px; height: 32px; border-radius: 8px; }
  .files-icon .icon { width: 18px; height: 18px; }
  .files-name { align-self: center; font-size: 14px; }
  .files-meta { display: contents; }
  .files-size { grid-area: size; text-align: right; color: var(--muted); font: 400 13px/18px var(--font); }
  .files-date { grid-area: date; color: var(--muted); font: 400 13px/18px var(--font); }
  .files-size:not(:empty) + .files-date:not(:empty)::before { content: none; }
  .files-cloud { grid-area: cloud; justify-self: center; font-size: 0; }
  .files-cloud .icon { width: 16px; height: 16px; }
  .files-row .icon-btn { width: 36px; height: 36px; }
  .files-go { width: 36px; }
}

/* -- pen ---------------------------------------------------------- drawing and handwriting (js/ink.js): a page over
   everything, the tools along the bottom on a phone (where the thumb and the S Pen are) and under the bar when wide. */

.layer.ink-layer {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0;
  background: var(--bg);
}
.ink-layer:focus { outline: none; }
.ink-bar {
  display: flex; align-items: center; gap: 4px; min-height: 56px; flex: none;
  padding: calc(8px + var(--safe-top)) 10px 8px 6px; border-bottom: 1px solid var(--line-soft); background: var(--surface);
}
.ink-title { margin: 0 4px; min-width: 0; font: 600 17px/24px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ink-bar .btn { min-height: 40px; padding: 0 14px; margin-left: 4px; }
.ink-bar .ink-delete { color: var(--danger); }
.ink-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--sunken); }
.ink-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ink-live {
  touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ink-live.erasing { cursor: cell; }
.ink-layer.saving .ink-stage { opacity: .6; pointer-events: none; }
.ink-scroll { position: absolute; top: 6px; bottom: 6px; right: 3px; width: 4px; pointer-events: none; }
.ink-scroll i { position: absolute; left: 0; right: 0; border-radius: 2px; background: var(--line-strong); }
.ink-hint {
  position: absolute; left: 50%; bottom: 16px; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: var(--r-full);
  background: var(--toast); border: 1px solid var(--toast-edge); color: var(--on-toast); font: 500 13px/18px var(--font);
  text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 6px);
  transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.ink-hint.shown { opacity: 1; transform: translate(-50%, 0); }
.ink-tools {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 18px; flex: none;
  padding: 6px 8px calc(6px + var(--safe-bottom)); border-top: 1px solid var(--line-soft); background: var(--surface);
}
.ink-group { display: flex; align-items: center; gap: 2px; }
.ink-btn .icon { width: 21px; height: 21px; }
.ink-dot { display: block; border-radius: 50%; background: currentColor; }
.ink-dot.ring { background: transparent; border: 1.75px solid currentColor; }
.ink-swatch {
  position: relative; display: grid; place-items: center; width: 36px; height: 40px; padding: 0; flex: none;
  border: none; border-radius: var(--r-md); background: none;
}
.ink-swatch::after { content: ""; position: absolute; inset: -2px -1px; }  /* 44 px tall, no gaps between */
.ink-swatch span {
  width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px light-dark(rgba(13, 14, 17, .18), rgba(255, 255, 255, .4));
  transition: transform var(--d-1) var(--ease-out);
}
.ink-swatch:hover span { transform: scale(1.08); }
.ink-swatch.on span { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 699px) {
  .ink-group { width: 100%; max-width: 400px; justify-content: space-between; }
}
@media (min-width: 700px) {
  /* wide: the tools in one row under the bar */
  .ink-tools { order: 1; border-top: none; border-bottom: 1px solid var(--line-soft); padding: 4px 12px; }
  .ink-swatch { width: 40px; }
  .ink-stage { order: 2; }
}
/* in the note: a drawing among the pictures, its page from the top, with a pen to say it opens to draw again */
.thumb.ink-thumb { position: relative; background: #ffffff; }
.ink-thumb img { object-position: top; }
:root[data-theme="dark"] .thumb.ink-thumb { background: #141414; }
:root[data-theme="dark"] .ink-thumb img { filter: invert(.92) hue-rotate(180deg); }
.ink-badge {
  position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; background: var(--card); border: 1px solid var(--line); color: var(--accent-ink);
}
.ink-badge .icon { width: 15px; height: 15px; }

/* ------------------------------------------------------------ reminders and school tools (js/reminders.js, js/study.js) */

/* the question about a typed date: just above the tools (above the phone's keyboard), never taking the caret */
.editor-ask { flex: none; padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--line-soft); }
.ask-card {
  display: grid; gap: 8px; padding: 10px 10px 10px 12px; border: 1px solid var(--accent-line); border-radius: var(--r-lg);
  background: var(--accent-wash); animation: rise var(--d-3) var(--ease-out);
}
.ask-card.after { border-color: var(--line); background: var(--card); }
.ask-top { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ask-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent-ink); }
.ask-icon.ok { color: var(--ok); }
.ask-text { flex: 1; min-width: 0; color: var(--text-2); font: 400 14px/20px var(--font); }
.ask-text strong { color: var(--text); font-weight: 600; }
.ask-close {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -4px 0 0; padding: 0; flex: none;
  border: none; border-radius: 8px; background: none; color: var(--muted);
}
.ask-close::after { content: ""; position: absolute; inset: -8px; }
.ask-close:hover { background: var(--surface-2); color: var(--text); }
.ask-close .icon { width: 17px; height: 17px; }
.ask-line { margin: 0; color: var(--muted); font: 400 13px/18px var(--font); }
.ask-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-btn {
  position: relative; min-height: 34px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--card); color: var(--text); font: 600 13.5px/18px var(--font); white-space: nowrap;
}
.ask-btn::after { content: ""; position: absolute; inset: -5px -4px; }  /* 44 px to a finger */
.ask-btn:hover { background: var(--surface-2); }
.ask-btn.primary { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.ask-btn.primary:hover { background: var(--primary-hover); }
.ask-btn.quiet { border-color: transparent; background: transparent; color: var(--text-2); }
.ask-btn.quiet:hover { background: var(--surface-2); color: var(--text); }

/* the bell, focus and repeat chips in a note, and the bell on a card */
.note-meta .remind-chip, .note-meta .focus-chip.on-now { color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-line); }
.note-meta .remind-chip.late { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.note-meta .focus-chip .num, .focus-chip.on-now span { font-variant-numeric: tabular-nums; }
.due.remind { background: var(--accent-wash); color: var(--accent-ink); }
.due.remind.late { background: var(--danger-soft); color: var(--danger); }

/* the due date and reminder sheet */
.remind-row {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card);
}
.remind-row-text { display: grid; gap: 2px; flex: 1; min-width: 0; cursor: pointer; }
.remind-row-text strong { font: 600 14.5px/20px var(--font); }
.remind-row-text .hint { font-size: 13px; line-height: 18px; }
.remind-row .time-field { width: 132px; min-height: 44px; padding: 8px 10px; flex: none; }
.remind-row.off .time-field { opacity: .5; }
.remind-hint { margin: 14px 0 8px; }
.remind-outside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.remind-outside .btn { min-height: 44px; padding: 0 12px; }
/* repeating (1.16.1): how often, a week's days as seven round toggles, when it ends, and what that says */
.repeat-box { margin-top: 2px; }
.repeat-label { display: inline-flex; align-items: center; gap: 6px; }
.repeat-label .icon { width: 15px; height: 15px; }
.repeat-field, .repeat-ends {
  appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f636c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
}
:root[data-theme="dark"] .repeat-field, :root[data-theme="dark"] .repeat-ends {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5a5b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
}
.repeat-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.repeat-day {
  position: relative; min-width: 0; height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: 99px;
  background: var(--card); color: var(--text-2); font: 600 13px/1 var(--font);
}
.repeat-day::after { content: ""; position: absolute; inset: -3px 0; }  /* 44 px to a finger */
.repeat-day:hover { border-color: var(--accent); }
.repeat-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.repeat-end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.repeat-end .repeat-until { align-self: end; }
.repeat-says { margin: 8px 0 0; }
.repeat-mark-icon { opacity: .85; }
.due .repeat-mark-icon .icon, .due .repeat-mark-icon, .today-chip .repeat-mark-icon { width: 13px; height: 13px; }

/* Upcoming: the week by day, a tick before each note and its day (or reminder) after it */
.list.upcoming { grid-template-columns: minmax(0, 1fr); }
.up-section .count:empty { display: none; }
.up-section.late { color: var(--danger); }
.up-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; min-width: 0; }
.up-row .card-meta .due { display: none; }  /* the day is the group, the time is on the right */
.up-tick {
  position: relative; display: grid; place-items: center; width: 40px; height: 44px; padding: 0; border: none; background: none;
  color: transparent;
}
.up-tick::before {
  content: ""; position: absolute; width: 22px; height: 22px; border-radius: var(--r-sm); border: 1.75px solid var(--control);
  background: var(--page); transition: background var(--d-2), border-color var(--d-2);
}
.up-tick .icon { position: relative; width: 15px; height: 15px; }
.up-tick .icon svg { stroke-width: 2.6; }
.up-tick:hover::before { border-color: var(--accent); }
.up-row.done .up-tick { color: var(--on-accent); }
.up-row.done .up-tick::before { background: var(--accent); border-color: var(--accent); }
:root[data-black] .up-row:not(.done) .up-tick::before { background: light-dark(var(--page), transparent); }  /* (Pure black: see-through, not a black hole) */
.up-when {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 84px;
  max-width: 128px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--text-2);
  font: 600 12.5px/1 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.up-when::after { content: ""; position: absolute; inset: -5px 0; }
.up-when span { overflow: hidden; text-overflow: ellipsis; }
.up-when .icon { width: 14px; height: 14px; }
.up-when:hover { border-color: var(--line-strong); color: var(--text); }
.up-when.late { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.up-row.done .up-when { color: var(--muted); }
/* picking (the Select button, a long press): only each card's round pick, so a tap on a row can only pick it */
.list.picking .up-row { grid-template-columns: minmax(0, 1fr); }
.list.picking .up-tick, .list.picking .up-when { display: none; }

/* flash cards: the study screen (1.18, js/review.js screen). The whole screen on a phone, a dialog from 700 px; over
   the full-screen note (55) and the note-taker (58), under sheets and menus (60). From the top: the deck's name with
   ⋯ and Done, "4 of 31" and its line, the card (it takes the room there is, so nothing under it ever moves), then the
   three answers in one row. */
.study-layer {
  position: fixed; inset: 0; z-index: 59; display: flex; justify-content: center; align-items: stretch; background: var(--page);
  opacity: 0; transition: opacity var(--d-2) var(--ease-out); --safe-top: var(--notch);
}
.study-layer.shown { opacity: 1; }
.study-layer.leaving { opacity: 0; transition-timing-function: var(--ease-in); }
.study { width: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--page); overflow: hidden; }
@media (min-width: 700px) {
  .study-layer { background: var(--scrim); align-items: center; padding: 24px; }
  .study { max-width: 640px; height: min(760px, 100%); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
  :root[data-black] .study { --page: var(--card); }  /* (a dialog stays a card in Pure black, as sheets do) */
}
.study-head {
  display: flex; align-items: center; gap: 4px; min-height: 56px; flex: none;
  padding: calc(6px + var(--safe-top)) max(10px, env(safe-area-inset-right, 0px)) 2px max(20px, env(safe-area-inset-left, 0px));
}
@media (min-width: 700px) { .study-head { padding-top: 8px; } }
.study-title { flex: 1; min-width: 0; margin: 0; font: 600 18px/24px var(--font); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study-head :is(.study-more, .study-edit)[hidden] { display: none; }
.study.ended .study-head :is(.study-more, .study-done, .study-edit) { display: none; }  /* (the end has its own buttons) */
.study-done { flex: none; min-height: 44px; padding: 0 14px; color: var(--accent-ink); font-size: 15px; }
.study-done:hover { color: var(--accent-ink); }
.study-where { display: grid; gap: 8px; flex: none; padding: 2px 20px 0; }
.study-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.study-progress { margin: 0; min-width: 0; color: var(--text-2); font: 600 14px/20px var(--font); font-variant-numeric: tabular-nums; }
.study-aside { flex: none; color: var(--muted); font: 500 13px/18px var(--font); font-variant-numeric: tabular-nums; }
.study-bar { display: block; flex: none; height: 4px; }
/* the topic line (1.19.7): the note the card showing is from ("Biology · Photosynthesis", one line, cut short with
   "…"), and Skip topic beside it */
.study-topic { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px; }
.study-topic[hidden], .study-skip[hidden], .study.ended .study-topic { display: none; }
.study-topic-name { flex: 1; display: flex; min-width: 0; margin: 0; overflow: hidden; color: var(--text); font: 600 15px/22px var(--font); }
.study-topic-name > :is(.study-topic-folder, .study-topic-title) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.study-topic-folder { flex: none; max-width: 45%; color: var(--muted); font-weight: 500; }
.study-topic-title { flex: 0 1 auto; min-width: 4em; }
.study-topic-folder:empty { display: none; }
.btn.study-skip { flex: none; gap: 6px; min-height: 32px; padding: 0 10px; color: var(--accent-ink); font: 600 14px/20px var(--font); white-space: nowrap; }
.btn.study-skip .icon { width: 16px; height: 16px; }
.study-skip-key { display: none; }
@media (pointer: coarse) { .btn.study-skip { min-height: 44px; margin-right: -10px; } }
@media (hover: hover) and (pointer: fine) { .study-skip-key { display: inline-block; } }
.study-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 20px; }
.study-foot { flex: none; padding: 0 20px calc(16px + var(--safe-bottom)); }
.study-foot:empty { display: none; }

/* the card: tap to flip; what it's from on top, its words in the middle, how to flip at its foot */
.flash-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 0; padding: 18px 20px; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: var(--card); color: var(--text); text-align: center;
  transition: background var(--d-2), border-color var(--d-2);
}
.study-stage > .flash-card { flex: 1 1 auto; }
.flash-card:hover:not(:disabled) { border-color: var(--control); }
.flash-card.flipped { background: var(--accent-wash); border-color: var(--accent-line); }
.flash-side { min-height: 18px; color: var(--muted); font: 600 13px/18px var(--font); overflow-wrap: anywhere; }
.flash-card.flipped .flash-side { color: var(--accent-ink); }
.flash-face { display: grid; justify-items: center; gap: 10px; width: 100%; margin: auto 0; }
.flash-q { max-width: 36ch; color: var(--muted); font: 500 15px/22px var(--font); overflow-wrap: anywhere; white-space: pre-wrap; }
.flash-words {
  max-width: 30ch; font: 600 clamp(22px, 6.6vw, 28px)/1.3 var(--font-display); letter-spacing: -.01em;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.flash-card[data-size="big"] .flash-words { font-size: clamp(26px, 8.4vw, 36px); }
.flash-card[data-size="long"] .flash-words { max-width: 40ch; font: 500 18px/27px var(--font); }
.flash-words.in-context { font-weight: 500; }
.flash-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 500 13px/18px var(--font); }
.flash-hint .icon { width: 15px; height: 15px; }
.flash-card.turned .flash-face { animation: flash-turn var(--d-3) var(--ease-out); }
@keyframes flash-turn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .flash-card.turned .flash-face { animation: none; }
  .study-layer { transition: none; }
}

/* the three answers: Still learning, Next, I know it (the screen's main button), all the same size */
/* Back (1.19.7): beside the answers when the row has room for four (measured on the row itself, so bigger text counts),
   else under Next on a slim row of its own, so the answers never get squeezed; it never moves, and is off on the
   first card */
.study-foot { container-type: inline-size; }
.study-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "still next know" ". back ."; gap: 10px; }
.study-actions > .still { grid-area: still; }
.study-actions > .skip { grid-area: next; }
.study-actions > .know { grid-area: know; }
.btn.study-back {
  grid-area: back; gap: 6px; min-height: 44px; min-width: 0; margin-top: -4px; padding: 0 6px; border-radius: var(--r-lg);
  background: transparent; border-color: transparent; color: var(--text-2); font: 600 14px/18px var(--font); white-space: nowrap;
}
.btn.study-back .icon { width: 18px; height: 18px; }
/* (a narrow row, as on a 320 px phone with bigger text: a little less padding, so "Still learning" keeps whole words) */
@container (max-width: 299.98px) { .study-actions { gap: 8px; } .btn.study-btn { padding-inline: 2px; } }
@container (min-width: 300px) {
  .study-actions { grid-template-columns: 52px repeat(3, minmax(0, 1fr)); grid-template-areas: "back still next know"; gap: 8px; }
  .btn.study-back { flex-direction: column; gap: 4px; min-height: 72px; margin-top: 0; padding: 10px 2px; border-color: var(--line-strong); font-size: 12px; line-height: 16px; }
  .btn.study-back .icon { width: 22px; height: 22px; }
}
@container (min-width: 440px) { .study-actions { grid-template-columns: 60px repeat(3, minmax(0, 1fr)); gap: 10px; } }
.btn.study-back:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn.study-back:disabled { opacity: .4; cursor: default; }
/* the answer given before, on a card Back brought back */
.btn.study-btn.was { box-shadow: 0 0 0 2px var(--accent); }
.flash-side.flash-was { color: var(--accent-ink); }
@media (forced-colors: active) { .btn.study-btn.was { outline: 2px solid Highlight; outline-offset: 2px; } }
.btn.study-btn {
  flex-direction: column; gap: 4px; min-height: 72px; padding: 10px 6px; border-radius: var(--r-lg);
  font: 600 15px/19px var(--font); white-space: normal; text-align: center; overflow-wrap: anywhere;
}
.btn.study-btn .icon { width: 22px; height: 22px; }
.btn.study-btn.still { color: var(--warn); }
.btn.study-btn.skip { background: transparent; color: var(--text-2); }
.btn.study-btn.skip:hover { background: var(--surface-2); color: var(--text); }
.study-key { display: none; }
@media (hover: hover) and (pointer: fine) {
  .study-key { display: block; position: absolute; top: 6px; right: 6px; }
  .btn.study-btn.know .study-key { color: var(--on-primary); background: transparent; border-color: color-mix(in oklab, var(--on-primary) 45%, transparent); }
}

/* the end ("Done for now"), and Learn's stop between sets */
.study-end { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 4px; text-align: center; }
.study-end-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.study-end-mark .icon { width: 30px; height: 30px; }
.study-end h3 { margin: 0; font: 600 24px/30px var(--font-display); letter-spacing: -.01em; }
.study-end p { margin: 0; max-width: 32ch; color: var(--text-2); font: 500 16px/24px var(--font); overflow-wrap: anywhere; }
.study-end .study-end-sum { color: var(--text); font-weight: 600; }
.btn.study-end-back { margin-top: 6px; gap: 6px; color: var(--text-2); }
.btn.study-end-back .icon { width: 18px; height: 18px; }
.study-end-go { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.study-end-go.one { grid-template-columns: minmax(0, 1fr); }
.study-end-go .btn { min-height: 52px; white-space: normal; text-align: center; }
/* "How flash cards work" (the ⋯) */
.study-how { display: grid; gap: 10px; margin: 4px 0 12px; padding-left: 20px; color: var(--text-2); font: 400 15px/22px var(--font); }
.study-how strong { color: var(--text); font-weight: 600; }
.sheet-body > .study-how-make { margin: 0; text-align: left; }

/* the focus timer */
.focus-box { display: grid; justify-items: center; gap: 6px; padding: 18px 0 16px; }
.focus-phase { color: var(--accent-ink); font: 600 14px/20px var(--font); }
.focus-box.resting .focus-phase { color: var(--ok); }
.focus-time { font: 600 64px/72px var(--font-display); letter-spacing: -.02em; color: var(--text); }
.focus-bar { display: block; width: min(320px, 100%); height: 6px; border-radius: 3px; margin-top: 8px; }
.focus-bar i { transition: width .5s linear; }
.focus-box.resting .focus-bar i { background: var(--ok); }
.focus-buttons { display: flex; gap: 10px; justify-content: center; }
.focus-buttons .btn { min-height: 48px; min-width: 120px; }
.focus-buttons .wide-btn { max-width: 320px; }
.focus-settings { display: grid; gap: 8px; margin-top: 16px; }
.focus-step { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px; border: 1px solid var(--line); border-radius: 12px; }
.focus-step-name { flex: 1; font: 500 14.5px/20px var(--font); }
.focus-value { min-width: 64px; text-align: center; font: 600 14.5px/20px var(--font); }
.focus-hint, .focus-week { text-align: center; margin: 12px 0 0; }
.focus-week:empty { display: none; }

/* repeating checklists */
.repeat-options { display: grid; gap: 8px; margin-top: 8px; }
.repeat-option {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text);
}
.repeat-option:hover { border-color: var(--line-strong); }
.repeat-option.on { border-color: var(--accent-line); background: var(--accent-wash); }
.repeat-mark {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1.75px solid var(--control); color: transparent;
}
.repeat-option.on .repeat-mark { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.repeat-mark .icon { width: 14px; height: 14px; }
.repeat-text { display: grid; gap: 2px; }
.repeat-text strong { font: 600 14.5px/20px var(--font); }
.repeat-text span { color: var(--muted); font: 400 13px/18px var(--font); }

@media (min-width: 900px) {
  .pane .editor-tools { order: 1; }
  .pane .editor-ask { order: 2; border-top: none; border-bottom: 1px solid var(--line-soft); background: var(--page);
    padding: 10px max(28px, calc((100% - 720px) / 2)); }
  .pane .editor-scroll { order: 3; }
  .list.upcoming { gap: 0; }
  .list.upcoming button.card::before { display: none; }
  .up-row { padding-right: 6px; }
  .up-row + .up-row { box-shadow: 0 -1px 0 var(--line-soft); }
  .up-row button.card { padding-left: 4px; }
}

/* ---------------------------------------------------------------- the study pack: Review, Learn, blanks and tests
   (js/review.js, learn.js, exams.js) */

/* What a box can't draw itself, under its own letters (js/editor.js: shade): a see-through copy of its words, a line
   per line, wrapping just as the box does and kept inside it (it never makes the box bigger or scroll). Only paint is
   added, never anything that makes letters wider (no font-weight, no padding): bold is the letters drawn again with a
   thin outline under the box's own; underline and strikethrough are lines under see-through letters; a highlight is
   a colour behind; {{blanks}} get a soft wash and a dotted line. Italic isn't drawn in the box (its marks show it). */
.blank-shade {
  position: absolute; inset: 0; overflow: hidden; padding: 4px 0; pointer-events: none; user-select: none;
  color: transparent; white-space: pre-wrap; overflow-wrap: break-word;
}
.blank-shade > div { min-height: 1lh; }
.shade-b { color: var(--ink); -webkit-text-stroke: .05em var(--ink); }
.shade-u { text-decoration: underline var(--ink); }
.shade-s { text-decoration: line-through var(--ink); }
.shade-hl { border-radius: 3px; background: var(--highlight); box-shadow: 0 0 0 1px var(--highlight); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.blank-mark, .read-blank {
  border-radius: 4px; background: var(--accent-wash); box-shadow: 0 0 0 2px var(--accent-wash);
  text-decoration: underline dotted var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
/* Windows' high contrast colours draw every letter themselves: the copy would only get in the way. */
@media (forced-colors: active) { .blank-shade { display: none; } }
/* An unseen copy of a box's words as written, laid out as the box lays them out, made for a moment to find where its
   letters are (js/editor.js: copyOf). Never hidden away, high contrast colours too, so it can always be measured. */
.block-measure {
  position: absolute; inset: 0; overflow: hidden; padding: 4px 0; pointer-events: none; user-select: none;
  visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word;
}
.block-measure > div { min-height: 1lh; }
/* Words picked across boxes (1.19.1, js/editor.js: span): the parts of the boxes without the caret, drawn as a browser
   draws picked words, under the letters (the box's own words, or its formatted copy) and never catching a press. */
.block-field.spanned { isolation: isolate; }
.block-pick { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }  /* (a line end's sliver never pushes the page sideways) */
.block-pick > i { position: absolute; background: var(--pick-see); }
::highlight(wefty-pick) { background-color: var(--pick); color: var(--text); }
@media (forced-colors: active) {
  .block-pick > i { forced-color-adjust: none; background: Highlight; }
  ::highlight(wefty-pick) { background-color: Highlight; color: HighlightText; }
}

/* The box being written in, when its words have marks (js/editor.js: letters): it draws no letters of its own, and a
   copy over it draws them all, every letter just where the box puts it (only colour and outlines here too, nothing
   that makes a letter wider). Its marks keep their room but are out of sight, but on the line with the caret (or the
   lines with the words picked), where they're faint; a link's brackets and address, code's backticks and italic's
   marks are always faint (italic stays upright, as under the box: slanted letters would sit a hair off the box's).
   Nothing is drawn behind the letters, so the caret and the words picked (the box's own) show through, and the bold
   drawn under the box (.shade-b) is left to the copy over it. */
.block-field.lettered > .block-input, .block-field.lettered > .block-input::selection { color: transparent !important; }
.block-field.lettered > .blank-shade .shade-b { color: transparent; -webkit-text-stroke-color: transparent; }
.block-letters {
  position: absolute; inset: 0; overflow: hidden; padding: 4px 0; pointer-events: none; user-select: none;
  color: var(--ink); white-space: pre-wrap; overflow-wrap: break-word;
}
.block-letters > div { min-height: 1lh; }
.block-letters .lt-b { -webkit-text-stroke: .05em var(--ink); }
.block-letters .lt-mark, .block-letters .lt-soft { -webkit-text-stroke-width: 0; }
.block-letters .lt-mark { color: transparent; }
.block-letters > .lit .lt-mark, .block-letters .lt-soft { color: var(--faint); }
/* On a touch screen they stay out of sight on the caret's line too (1.16.1, the owner: "the bold n stuff still has the
   **these** when it bolds"): there the caret is put by a finger, not walked through the marks with the arrow keys, and
   the B, U, S and highlighter buttons show what it's in. They keep their room, so the caret and every letter stay just
   where the box has them. */
@media (hover: none) and (pointer: coarse) { .block-letters > .lit .lt-mark { color: transparent; } }
.block-letters .lt-ime { text-decoration: underline var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (forced-colors: active) { .block-letters { display: none; } }

/* A box that isn't being written in shows its words formatted, the marks out of sight (js/editor.js: preview): a copy
   in the Read view's look takes the box's place, a line per line, wrapping as the box would, and the box lies over it,
   invisible but still there (a tap lands in it, screen readers read it), as does the copy under it (.blank-shade).
   The browser's Find finds (and marks) the words in the copy. */
.block-preview { padding: 4px 0; min-height: 34px; color: var(--text); white-space: pre-wrap; overflow-wrap: break-word; pointer-events: none; }
.block-preview > div { min-height: 1lh; }
.block-field.previewing > .block-input { position: absolute; inset: 0; height: 100% !important; min-height: 0; opacity: 0; }
.block-field.previewing > .blank-shade { opacity: 0; }
.heading-block .block-preview { min-height: 38px; }
.heading-block.h2 .block-preview { min-height: 35px; }
.heading-block.h3 .block-preview { color: var(--text-2); }
.check-row.done .block-preview { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); color: var(--muted); }

/* the Flash cards page, in the Notes tab's list (1.18: one button, Study, and the decks under it) */
.list.review { gap: 8px; }
.review-head { display: grid; gap: 12px; padding: 14px 14px 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.review-today { margin: 0; color: var(--text-2); font: 500 14px/22px var(--font); font-variant-numeric: tabular-nums; }
.review-today strong { color: var(--text); font: 600 17px/24px var(--font); }
.review-later { margin: -8px 0 0; }
.review-go { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.review-go .btn { min-height: 48px; font-size: 15px; }
.list.review .list-section { margin: 12px 4px 0; }
.deck-row { display: block; min-width: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.deck-main { width: 100%; }
.test-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0;
  padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card);
}
.deck-row[data-depth="1"] { margin-left: 16px; }
.deck-row[data-depth="2"] { margin-left: 32px; }
.deck-row[data-depth="3"], .deck-row[data-depth="4"] { margin-left: 48px; }
.deck-main, .test-main {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 6px 8px; border: none;
  border-radius: var(--r-md); background: none; color: var(--text); text-align: left;
}
.deck-main:hover, .test-main:hover { background: var(--surface-2); }
.deck-main .emoji, .deck-main .dot-box {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--surface-2); font-size: 16px;
}
.deck-main .dot-box .icon { width: 17px; height: 17px; color: var(--muted); }
.deck-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.deck-name { font: 600 15px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-meta { color: var(--muted); font: 500 12.5px/16px var(--font); font-variant-numeric: tabular-nums; }
.deck-row.idle .deck-name { color: var(--text-2); }
.deck-due {
  min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; flex: none; background: var(--accent-soft);
  color: var(--accent-ink); font: 600 12.5px/22px var(--font); text-align: center; font-variant-numeric: tabular-nums;
}
.deck-chev { width: 18px; height: 18px; color: var(--faint); }
.deck-go {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--card); color: var(--text-2);
  font: 600 13px/1 var(--font); white-space: nowrap;
}
.deck-go::after { content: ""; position: absolute; inset: -4px -2px; }  /* 44 px to a finger */
.deck-go .icon { width: 16px; height: 16px; }
.deck-go:hover { background: var(--surface-2); color: var(--text); }
.test-row { border-color: var(--accent-line); background: var(--accent-wash); }
.test-row .deck-go { background: var(--card); }
.test-icon { width: 20px; height: 20px; margin-left: 4px; color: var(--accent-ink); }
.test-text { flex: 1; min-width: 0; font: 600 14px/20px var(--font); font-variant-numeric: tabular-nums; }
.test-row.soon { border-color: transparent; background: var(--warn-soft); }
.test-row.soon .test-icon { color: var(--warn); }
.review-empty .hint { max-width: 320px; }
/* The page's "Make cards with AI" (js/aicards.js), under its button and in the empty page */
.review-make { display: flex; justify-content: center; margin-top: -4px; }
.review-make .btn { min-height: 44px; color: var(--accent-ink); }
.review-empty .review-make { margin-top: 4px; }
.deck-make .icon { color: var(--accent-ink); }

/* -- Make flash cards with AI (js/aicards.js): reading, the cards to pick, or what went wrong */
.aic-state { display: grid; justify-items: center; gap: 10px; max-width: 400px; margin: auto; padding: 20px 0; text-align: center; }
.aic-state h3 { margin: 6px 0 0; font: 600 19px/26px var(--font); }
.aic-state p { margin: 0; color: var(--text-2); }
.aic-state .hint { color: var(--muted); }
.aic-step { color: var(--muted); font: 500 13px/18px var(--font); font-variant-numeric: tabular-nums; }
.aic-problem-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--danger-soft); color: var(--danger); }
.aic-problem-icon .icon { width: 24px; height: 24px; }
.aic-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 4px; }
.aic-summary { margin: 0; color: var(--text); font: 600 16px/22px var(--font); min-width: 0; }
.aic-top .aic-all { flex: none; padding: 8px 0; min-height: 40px; }
.sheet-body > .aic .aic-note { margin: 2px 0; text-align: left; }
.aic-group { margin-top: 12px; }
.aic-into { margin: 0 0 2px; font: 600 14.5px/20px var(--font); color: var(--text); overflow-wrap: anywhere; }
.aic-where { margin: 0 0 8px; overflow-wrap: anywhere; }
.aic-list { display: grid; gap: 8px; }
.aic-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 10px 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
:root[data-theme="dark"] .aic-card { box-shadow: inset 0 1px 0 var(--edge-hi); }
.aic-card .aic-tick { margin-top: 12px; }
.aic-fields { display: grid; gap: 6px; min-width: 0; }
.aic-fields textarea.field {
  min-height: 44px; padding: 10px 12px; resize: none; field-sizing: content; max-height: 240px; font-size: 16px; line-height: 22px;
}
.aic-fields .aic-q { font-weight: 600; }
.aic-kind { color: var(--muted); font: 500 12.5px/16px var(--font); }
.aic-card.off { background: transparent; }
.aic-card.off .aic-fields { opacity: .5; }
.sheet-body > .aic .aic-foot { margin: 14px 0 0; text-align: left; }
@media (pointer: coarse) { .aic-card .aic-tick { width: 24px; height: 24px; margin-top: 10px; } }

/* a blank is a line, its answer marked in its sentence */
.blank-gap { display: inline-block; width: 3.2em; height: .9em; margin: 0 .1em; border-bottom: 2.5px solid var(--accent); color: transparent; overflow: hidden; vertical-align: baseline; }
.blank-fill { padding: 0 4px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); }

/* Learn, on the study screen: its question card, the choices or the box, and what was right */
.study[data-mode="learn"] .study-stage { overflow: auto; overscroll-behavior: contain; }
.learn-body { display: grid; gap: 12px; }
.learn-card {
  display: grid; align-content: center; justify-items: center; gap: 10px; min-height: 150px; padding: 22px 20px;
  border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: var(--card); text-align: center;
}
.learn-term { font: 600 22px/30px var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; white-space: pre-wrap; max-width: 34ch; }
.learn-claim { display: grid; justify-items: center; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--text-2); font: 500 16px/24px var(--font); }
.learn-claim-label { color: var(--muted); font: 600 12px/16px var(--font); }
.learn-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.learn-options.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .learn-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.learn-option {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; text-align: left;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--card); color: var(--text);
  font: 500 15px/21px var(--font); transition: background var(--d-1), border-color var(--d-1), opacity var(--d-2);
}
.learn-option:hover:not(:disabled) { border-color: var(--control); background: var(--surface-2); }
.learn-option:disabled { cursor: default; }
.learn-key {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1px solid var(--line);
  color: var(--muted); font: 600 12px/1 var(--font);
}
.learn-option-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.learn-option.right { border-color: var(--ok); background: var(--ok-soft); }
.learn-option.right .learn-key { border-color: var(--ok); color: var(--ok); }
.learn-option.wrong { border-color: var(--danger); background: var(--danger-soft); }
.learn-option.wrong .learn-key { border-color: var(--danger); color: var(--danger); }
.learn-option.faded { opacity: .5; }
/* 1.19.7: Back brought this question back: the answer given before is outlined, and said above the choices */
.learn-option.was { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.learn-option.was .learn-key { border-color: var(--accent); color: var(--accent-ink); }
.learn-was { margin: 0; color: var(--text-2); font: 500 14px/20px var(--font); overflow-wrap: anywhere; }
.learn-nav { display: flex; align-items: center; min-height: 48px; padding-top: 4px; }
.btn.learn-back { gap: 6px; min-height: 44px; padding: 0 12px 0 8px; margin-left: -8px; }
.btn.learn-back .icon { width: 18px; height: 18px; }
@media (forced-colors: active) { .learn-option.was { outline: 2px solid Highlight; } }
.learn-type { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.learn-type .btn { min-height: 48px; }
.learn-input { font-size: 16px; }  /* (16 px: an iPhone zooms the page into a smaller box as it's typed in) */
.learn-input.right { border-color: var(--ok); background: var(--ok-soft); }
.learn-input.wrong { border-color: var(--danger); background: var(--danger-soft); }
.learn-input:disabled { color: var(--text); opacity: 1; -webkit-text-fill-color: var(--text); }
.learn-feedback {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 10px 10px 14px; border-radius: var(--r-lg);
  font: 500 14px/20px var(--font); animation: rise var(--d-2) var(--ease-out);
}
.learn-feedback > .icon { width: 18px; height: 18px; }
.learn-feedback.ok { background: var(--ok-soft); color: var(--ok); }
.learn-feedback.err { background: var(--danger-soft); color: var(--text); }
.learn-feedback.err > .icon { color: var(--danger); }
.learn-said { flex: 1; min-width: 12em; }
.learn-feedback-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; max-width: 100%; }
/* (on a narrow phone the buttons wrap: Continue takes its own whole row under the others, never a ragged stack) */
.learn-feedback-actions .btn.primary { flex: 1 0 auto; }
.learn-feedback .btn { min-height: 40px; }
.learn-feedback.err .btn.quiet .icon { width: 16px; height: 16px; }
/* "Do you know it?" (a card with nothing to pick between and too long to type): Show the answer, then how it went */
.learn-options.one { grid-template-columns: minmax(0, 1fr); }
.learn-options.one .btn { min-height: 52px; }
.learn-reveal span:last-child { color: var(--text); font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
/* Edit card (the study screen's pencil, Learn's wrong answer): the card's own words, in its note */
.card-edit-field { display: grid; gap: 6px; }
.card-edit-field textarea { resize: none; min-height: 48px; field-sizing: content; max-height: 40vh; overflow-wrap: anywhere; font-size: 16px; }
.sheet-body > .card-edit-from { margin: 0 0 4px; overflow-wrap: anywhere; text-align: left; }
.sheet-body > .card-edit-tip { margin: 6px 0 0; text-align: left; }

/* tests: the countdown on the note, on its card, on the folders it covers, and what it covers */
.note-meta .exam-chip { max-width: 100%; color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-line); }
.note-meta .exam-chip span { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.note-meta .exam-chip.soon { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.note-meta .exam-chip.ask { color: var(--text-2); background: var(--card); border-color: var(--line-strong); border-style: dashed; }
.exam-tag {
  display: inline-flex; align-items: flex-start; gap: 5px; max-width: 100%; min-height: 22px; padding: 3px 8px;
  border-radius: var(--r-sm); background: var(--accent-wash); color: var(--accent-ink); font: 600 12px/16px var(--font);
  font-variant-numeric: tabular-nums;
}
.exam-tag .icon { width: 13px; height: 13px; margin-top: 1.5px; }
.exam-tag span { min-width: 0; text-wrap: balance; }
.exam-tag.soon { background: var(--warn-soft); color: var(--warn); }
.exam-banner {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 1px solid var(--accent-line);
  border-radius: var(--r-lg); background: var(--accent-wash);
}
.exam-banner.soon { border-color: transparent; background: var(--warn-soft); }
.exam-banner.soon .test-icon { color: var(--warn); }
.exam-banner-main {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 44px; padding: 6px 8px; border: none;
  border-radius: var(--r-md); background: none; color: var(--text); text-align: left; font: 600 14px/20px var(--font);
  font-variant-numeric: tabular-nums;
}
.exam-banner .btn { min-height: 36px; padding: 0 12px; }
.sheet-body > .covers-about { margin: 2px 0 2px; }
.covers-list { display: grid; gap: 2px; margin: 6px -6px 0; }
.covers-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px 4px 8px; border-radius: var(--r-md); cursor: pointer; }
.covers-row:hover { background: var(--surface-2); }
.covers-row[data-depth="1"] { padding-left: 32px; }
.covers-row[data-depth="2"] { padding-left: 56px; }
.covers-row[data-depth="3"], .covers-row[data-depth="4"] { padding-left: 80px; }
.covers-tick {
  appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border-radius: var(--r-sm); border: 1.75px solid var(--control);
  background: var(--page) no-repeat center / 14px; cursor: pointer; transition: background-color var(--d-2), border-color var(--d-2);
}
.covers-tick:checked {
  border-color: var(--accent); background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* (a picture of a tick can't follow --on-accent: in dark it's the indigo of the words on the pale fill) */
:root[data-theme="dark"] .covers-tick:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c125a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
:root[data-black] .covers-tick:not(:checked) { background-color: light-dark(var(--page), transparent); }  /* (Pure black: see-through) */
.covers-row .emoji, .covers-row .dot-box {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--surface-2); font-size: 14px;
}
.covers-row .dot-box .icon { width: 15px; height: 15px; color: var(--muted); }
.covers-name { flex: 1; min-width: 0; font: 500 14.5px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.covers-count { flex: none; color: var(--muted); font: 500 12.5px/16px var(--font); font-variant-numeric: tabular-nums; }
.sheet-body > .covers-line { margin: 12px 0 0; text-align: left; }

@media (min-width: 900px) {
  /* in the side list: flat rows with hairlines between them, like the notes */
  .list.review { gap: 2px; }
  .list.review .list-section { margin: 14px 12px 4px; }
  .review-head { margin: 2px 2px 6px; }
  .deck-row, .test-row { border-color: transparent; background: transparent; border-radius: var(--r-md); padding: 0 6px 0 0; }
  .deck-row { padding: 0; }
  .deck-row + .deck-row { box-shadow: 0 -1px 0 var(--line-soft); }
  .test-row { background: var(--accent-wash); }
  .test-row.soon { background: var(--warn-soft); }
  .deck-main, .test-main { min-height: 48px; }
  .deck-main .emoji, .deck-main .dot-box { width: 28px; height: 28px; border-radius: 8px; font-size: 14.5px; }
  .deck-name { font-size: 14.5px; }
}

/* ==== 1.16: Today (B) ==== */
/* Today (js/today.js): the greeting and the thread under it, then sections of cards. A phone shows them in one
   column; from 900 px the day's counts sit beside the greeting, the week (Monday to Friday) under the thread, and the
   sections in two columns from 1100 px (one column between, with the right one's quick actions and to-dos first). */
.page.today { padding-bottom: 32px; }
/* Today only ever scrolls up and down: Jump back in scrolls sideways inside itself, and nothing a bit too wide (a long
   word, a rounding at a phone's zoom) can make the whole screen slide sideways or bring a bar in at its foot. */
.view[data-tab=today] { overflow-x: hidden; }
.today-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 4px 0 0; }
.today-hello { min-width: 0; }
.today-greet h1 { margin: 0; font: 600 26px/32px var(--font-display); letter-spacing: -.02em; }
.today-date { margin: 4px 0 0; color: var(--muted); font: 500 14px/20px var(--font); }
.today-counts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--text-2); font: 500 14px/20px var(--font); }
.today-counts > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.today-count {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: -4px -6px; padding: 4px 6px;
  border: 0; border-radius: var(--r-sm, 8px); background: none; color: inherit; font: inherit;
}
.today-count:hover { color: var(--text); background: var(--surface-2); }
.today-count:hover .icon { color: var(--accent-ink, var(--accent)); }
.today-counts .icon { width: 16px; height: 16px; color: var(--muted); }
/* the thread under the greeting: the logo's wave, over and over (one of its four places) */
.today-line {
  height: 6px; margin: 16px 0 4px; background: light-dark(var(--line-strong), var(--thread));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3.5Q6 1.1 12 3.5T24 3.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x 0 50% / 24px 6px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3.5Q6 1.1 12 3.5T24 3.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x 0 50% / 24px 6px;
}
@media (forced-colors: active) { .today-line { background: CanvasText; } }
.today-cols { display: grid; gap: 0; }
.today-col { display: grid; align-content: start; min-width: 0; }
.today-sec { min-width: 0; }
.today-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin: 24px 0 8px; }
.today-sec-head h2 { margin: 0; color: var(--text); font: 600 16px/22px var(--font); letter-spacing: -.005em; }
.today-link {
  position: relative; min-height: 44px; margin: -11px -8px -11px 0; padding: 0 8px; border: none; border-radius: var(--r-sm);
  background: none; color: var(--accent-ink); font: 600 14px/20px var(--font);
}
.today-link.today-after { display: block; margin: 4px 0 0 auto; }
@media (hover: hover) { .today-link:hover { background: color-mix(in oklab, var(--text) 6%, transparent); } }
.today-box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--edge-hi);
}
.today-quiet { margin: 0; color: var(--muted); font: 500 14px/20px var(--font); }
.today-getting { margin-top: 16px; }
.today-trouble { margin: 16px 0 0; }
.today-welcome { margin: 16px 0 0; max-width: 760px; color: var(--text-2); font: 500 15px/22px var(--font); }

/* Quick actions (1.17): across the top under the days, as one grid: New note, Note-taker and Snap (1.19) big in its
   first row, Dictate and Flash cards smaller in its second (each keeps its row when another tile isn't there). Six
   columns: a big tile takes two, a small one three. */
.today-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.today-tile { grid-row: 2; grid-column: span 3; }
.today-tile.big { grid-row: 1; grid-column: span 2; }
.today-tile {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 52px; padding: 6px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 var(--edge-hi);
  color: var(--text); text-align: left;
}
@media (hover: hover) { .today-tile:hover { border-color: var(--line-strong); } }
.tile-ic {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.tile-ic .icon { width: 20px; height: 20px; }
.today-tile .tile-ic { position: relative; }
/* (Flash cards: how many are due today, on its icon's corner, so it shows on the smallest phone too) */
.tile-count {
  position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--card);
  font: 700 11px/18px var(--font); text-align: center; font-variant-numeric: tabular-nums;
}
.tile-text { display: grid; min-width: 0; }
/* A label never cuts off ("Note-ta..." on a phone with bigger text, 1.16.1): one that can't fit goes onto a second line. */
.tile-label {
  font: 600 14px/18px var(--font); overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.tile-text small { color: var(--muted); font: 500 12.5px/16px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 419px) { .today-tile { gap: 10px; padding: 6px 10px; } }
@media (max-width: 359px) { .today-tile:not(.big) .tile-text small { display: none; } }
/* the big two: a bigger icon and words; on a phone the icon on top, so a name has the tile's whole width */
.today-tile.big { gap: 14px; min-height: 76px; padding: 12px 16px; }
.today-tile.big .tile-ic { width: 44px; height: 44px; border-radius: 13px; }
.today-tile.big .tile-ic .icon { width: 24px; height: 24px; }
.today-tile.big .tile-label { font: 600 16px/21px var(--font); }
.today-tile.big .tile-text small { font: 500 13.5px/18px var(--font); }
@media (max-width: 599px) {
  .today-tile.big { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; min-height: 0; padding: 14px; }
  .today-tile.big .tile-ic { width: 40px; height: 40px; border-radius: 12px; }
  .today-tile.big .tile-ic .icon { width: 22px; height: 22px; }
  .today-tile.big .tile-text { align-self: stretch; }
}
@media (min-width: 900px) {
  .today-tiles { gap: 12px; }
  .today-tile.big { min-height: 84px; padding: 14px 20px; gap: 16px; }
  .today-tile.big .tile-ic { width: 48px; height: 48px; border-radius: 14px; }
  .today-tile.big .tile-label { font-size: 17px; line-height: 22px; }
  .today-tile.big .tile-text small { font-size: 14px; line-height: 20px; }
}

/* The picked day's rows (Due today and Later this week until 1.17): a row per to-do, its box on the left, its ⋯ on
   the right (1.19.2) */
.today-todo { padding: 4px 0; }
.today-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 0 8px;
  min-height: 56px; padding: 4px;
}
.today-row.dg-extra { padding-right: 12px; }
/* Test me (1.19.3, js/learn.js testMe): beside a test's Study on Today, in a test's row on the picked day, in the
   Flash cards card, and beside each deck on Notes' Flash cards page. */
.today-row.with-quiz { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.btn.today-quiz { min-height: 40px; padding: 0 12px; font-size: 13.5px; }
.today-row .btn.today-quiz { min-height: 44px; }  /* (a finger's 44 px, like the row's other buttons) */
.today-test .test-go, .fc-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.today-cards.done .fc-go { justify-content: flex-start; padding-top: 8px; }
.deck-row.with-quiz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding-right: 8px; }
.review-go .btn.review-quiz { min-height: 44px; }
/* (1.19.4: a test card too narrow for its numbers beside Test me and Study, a small phone with bigger text, puts the
   buttons on a row of their own under the numbers, now one line, instead of squeezing "18 of 52 known" into four lines
   beside them: Today stays about two screens) */
.today-tests { container-type: inline-size; }
@media (max-width: 899px) {
  @container (max-width: 340px) {
    .today-test.with-quiz { grid-template-areas: "top top" "bar bar" "nums nums" "go go"; }
    .today-test.with-quiz .test-nums { display: flex; flex-wrap: wrap; column-gap: 4px; }
    .today-test.with-quiz .test-nums > span + .pace::before { content: "· "; }
  }
}
@media (max-width: 380px) {
  /* (the smallest phones: the icon alone, its name still said by aria-label, so Today stays about two screens) */
  /* (only the word: the icon is a span too, and hiding every span left an empty 22 px pill) */
  .deck-quiz .quiz-label, .btn.today-quiz .quiz-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .deck-quiz, .btn.today-quiz { min-width: 44px; padding: 0 10px; justify-content: center; }
}
.today-row + .today-row, .today-row + .today-more-row { border-top: 1px solid var(--line-soft); }
.today-tick { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: none; background: none; border-radius: var(--r-md); }
.today-tick::before {
  content: ""; width: 22px; height: 22px; box-sizing: border-box; border-radius: var(--r-sm);
  border: 1.75px solid var(--control); background: var(--page);
}
.today-tick .icon { position: absolute; width: 15px; height: 15px; color: var(--on-accent); visibility: hidden; }
.today-tick .icon svg { stroke-width: 2.6; }
.today-tick[aria-pressed=true]::before { background: var(--accent); border-color: var(--accent); }
.today-tick[aria-pressed=true] .icon { visibility: visible; }
.today-row-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; min-width: 0; }
.today-row-text > :not(.today-chip) { grid-column: 1; }
.today-row-text strong { font: 500 15px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (the chip is in with the words since 1.18: at the row's end here, as before; under the title on a phone, below) */
.today-row-text > .today-chip { grid-column: 2; grid-row: 1 / span 2; }
.today-row.done strong { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.today-where, .today-sub {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; border: none; background: none; text-align: left;
  color: var(--muted); font: 500 13px/18px var(--font); white-space: nowrap; overflow: hidden;
}
.today-sub .today-where { flex: 1; }
.today-where > span:not(.icon):not(.emo) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.today-where .icon, .today-sub > .icon { width: 13px; height: 13px; }
.today-where .emo, .today-sub .emo { flex: none; font-size: 12px; }
.today-chip { flex: none; }
.today-chip.plain { background: var(--surface-2); color: var(--text-2); }
.today-more-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px 0 56px;
  border: none; background: none; color: var(--accent-ink); font: 600 13.5px/18px var(--font); text-align: left;
}
.today-more-row .icon { width: 16px; height: 16px; }

/* Tests coming up */
.today-tests { display: grid; gap: 8px; }
.today-test {
  display: grid; gap: 12px 12px; padding: 16px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "bar bar" "nums go";
}
.today-test.ask { grid-template-areas: "top top" "go go"; }
.today-test.ask .test-go { justify-self: start; }
.today-test .test-top { grid-area: top; display: flex; align-items: center; gap: 12px; min-width: 0; }
.today-test .today-bar { grid-area: bar; height: 6px; border-radius: 3px; }
.today-test .test-nums { grid-area: nums; display: grid; margin: 0; color: var(--muted); font: 500 14px/20px var(--font); font-variant-numeric: tabular-nums; }
.today-test .test-nums b { color: var(--text); font-weight: 600; }
.today-test .test-nums .pace { font-size: 13px; line-height: 18px; }
.today-test .test-go { grid-area: go; }
.today-days {
  flex: none; display: grid; place-content: center; justify-items: center; width: 56px; height: 64px; border-radius: 12px;
  background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-soft); color: var(--accent-ink);
}
.today-days b { font: 600 26px/28px var(--font-display); font-variant-numeric: tabular-nums; }
.today-days span { font: 600 12px/16px var(--font); }
.today-days.word b { font: 600 12.5px/16px var(--font); }
.today-test .test-text {
  display: grid; gap: 2px; min-width: 0; padding: 0; border: none; background: none; color: var(--text); text-align: left;
}
.today-test .test-text strong { font: 600 16px/22px var(--font); letter-spacing: -.01em; }
.today-test .test-text span { color: var(--muted); font: 500 14.5px/20px var(--font); }

/* Flash cards due today */
.today-cards { padding: 12px 16px 4px; }
.today-cards.one-deck { padding-bottom: 12px; }
.today-cards.done { display: grid; gap: 2px; padding: 16px; }
.today-cards.done .hint { margin: 0; }
.fc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 4px; }
.fc-n { display: flex; align-items: baseline; gap: 8px; margin: 0; min-width: 0; }
.fc-n b { font: 600 28px/32px var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fc-n span { color: var(--text-2); font: 500 14px/20px var(--font); }
.fc-note { display: flex; align-items: center; gap: 6px; margin: 0; padding-bottom: 8px; color: var(--muted); font: 500 13.5px/20px var(--font); }
.fc-note .icon { width: 16px; height: 16px; color: var(--accent-ink); }
.today-decks { display: grid; }
.today-deck {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0; border: none; border-top: 1px solid var(--line-soft);
  background: none; color: var(--text); font: 500 15px/20px var(--font); text-align: left;
}
.today-deck .emo { font-size: 15px; width: 18px; text-align: center; }
.today-deck .deck-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-deck b { font-weight: 600; font-variant-numeric: tabular-nums; }
.today-deck > .icon { width: 18px; height: 18px; color: var(--muted); }
.today-deck.more { color: var(--accent-ink); font-weight: 600; font-size: 14px; }

/* Jump back in: a row of small note cards to swipe on a phone (never .card: that's Notes' list) */
.today-jump {
  display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.today-jump::-webkit-scrollbar { display: none; }
.today-note {
  flex: none; display: grid; gap: 4px; width: 260px; max-width: 78vw; min-width: 0; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 var(--edge-hi);
  color: var(--text); text-align: left; scroll-snap-align: start;
}
@media (hover: hover) { .today-note:hover { border-color: var(--line-strong); } }
.tn-title { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 15px/20px var(--font); }
.tn-title > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-title .icon { width: 14px; height: 14px; color: var(--muted); }
.tn-title .tn-pin { color: var(--accent-ink); }
.tn-snip { color: var(--text-2); font: 400 13.5px/19px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-foot { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; color: var(--muted); font: 500 12.5px/16px var(--font); }
.tn-folder { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-foot .emo { font-size: 12px; }

/* The first-run state (a new account): what makes Today fill up, and the other devices */
.today-howtos { display: grid; gap: 8px; }
.today-howto { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.today-howto .tile-ic { width: 36px; height: 36px; }
.ht-text { display: grid; gap: 2px; min-width: 0; }
.ht-text strong { font: 600 15px/22px var(--font); }
.ht-text > span { color: var(--text-2); font: 400 14px/20px var(--font); }
.ht-text .ht-eg { margin-top: 4px; color: var(--muted); font-size: 13px; }
.ht-eg code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); font: 500 12.5px/18px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.ht-text .ht-act { display: block; margin-top: 12px; }

/* The days (1.17, every device): a strip that scrolls sideways from this week's Monday to the Friday two weeks on,
   stopping on a day; five days in sight when wide, two and a bit on a phone (running to the screen's edges, as Jump
   back in does). Up and down over it scrolls the page; a sideways swipe at its ends stays in it. No bar under it (the
   arrows, a swipe or the keys move it). */
.today-week { margin-top: 12px; }
.today-week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin: 0 0 6px; }
.today-week-title { margin: 0; min-width: 0; color: var(--muted); font: 600 13px/18px var(--font); }
.week-steps { display: flex; gap: 6px; flex: none; }
.week-step {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text-2); box-shadow: inset 0 1px 0 var(--edge-hi);
}
.week-step .icon { width: 16px; height: 16px; }
.week-step[aria-disabled=true] { color: var(--faint); background: none; box-shadow: none; cursor: default; }
@media (hover: hover) { .week-step:not([aria-disabled=true]):hover { border-color: var(--line-strong); color: var(--text); } }
/* (a finger swipes: no arrows on a touch screen) */
@media (hover: none) and (pointer: coarse) { .week-steps { display: none; } .today-week-head { min-height: 22px; } }
.today-week-days {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.today-week-days::-webkit-scrollbar { display: none; }
.wday {
  flex: none; width: calc((100% - 48px) / 5); scroll-snap-align: start;
  display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 60px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: inset 0 1px 0 var(--edge-hi);
  color: var(--text); text-align: left;
}
.wday:focus-visible { outline-offset: -3px; }  /* (inside the day: the strip cuts off what's outside it) */
@media (max-width: 899px) {
  .today-week-days { gap: 8px; margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; }
  .wday { width: calc((100% - 16px) / 2.4); min-width: 128px; min-height: 56px; padding: 8px 10px; }
}
@media (hover: hover) { .wday:hover { border-color: var(--line-strong); } }
.wday.today { background: var(--accent-wash); border-color: var(--accent-line); }
.wd-label { color: var(--muted); font: 600 12px/16px var(--font); }
.wday.today .wd-label { color: var(--accent-ink); }
.wd-item { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 14px/20px var(--font); white-space: nowrap; }
.wd-item > span:not(.icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wd-item .emo { flex: none; font-size: 13px; }
.wd-item .none { color: var(--muted); }
.wd-item .late-w { color: var(--danger); font-weight: 600; }
.wd-item .wd-sep { flex: none; color: var(--muted); }
.wd-item.test { color: var(--accent-ink); font-weight: 600; }
.wd-item.test .icon { width: 16px; height: 16px; }
.wd-item .wd-more { flex: none; color: var(--muted); font-size: 12.5px; }

/* The picked day (1.19.2, js/today.js "the picked day"): the day picked in the strip, all of it (the first five rows,
   then "Show all N"), its heading with Add, a box per to-do, each row's ⋯ at its end. A repeating note's later ones and
   other parts' things (a renewal) have no box: their mark sits where it would be. A day with nothing on it is one
   quiet line. (1.17's list of every day, and 1.18's phone version of it, are gone: the strip is the week.) */
.today-day { min-width: 0; scroll-margin-top: 16px; }
.dp-head { align-items: center; }
.dp-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; flex: 1; min-width: 0; }
.dp-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; color: var(--text); font: 600 16px/22px var(--font); letter-spacing: -.005em; }
.dp-title:focus { outline: none; }
.dp-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.dg-name { flex: none; }
.dg-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 500 13.5px/20px var(--font); }
.dg-meta { flex: none; color: var(--muted); font: 500 13px/18px var(--font); white-space: nowrap; }
.dg-meta .late-w { color: var(--danger); font-weight: 600; }
.dp-add { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.dp-add .icon { width: 16px; height: 16px; }
.dp-none { margin: 0; padding: 4px 2px; color: var(--muted); font: 500 14px/20px var(--font); }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.dp-foot .dp-upcoming { display: inline-flex; align-items: center; gap: 2px; margin: 0 -8px 0 auto; }
.dp-upcoming .icon { width: 16px; height: 16px; }
.dp-all {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 0 -8px; padding: 0 8px;
  border: none; border-radius: var(--r-sm); background: none; color: var(--accent-ink); font: 600 14px/20px var(--font);
}
.dp-all .icon { width: 16px; height: 16px; }
@media (hover: hover) { .dp-all:hover { background: color-mix(in oklab, var(--text) 6%, transparent); } }
/* a day gone by: the notes written then, a few small buttons */
.dp-written { margin-top: 8px; }
.dp-sub { margin: 0 2px 6px; color: var(--muted); font: 600 13px/18px var(--font); }
.dp-notes { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-notes > div { min-width: 0; max-width: 100%; }
.dp-note {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: inset 0 1px 0 var(--edge-hi);
  color: var(--text); font: 500 14px/20px var(--font);
}
.dp-note > span:not(.icon):not(.emo) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-note .emo { flex: none; font-size: 13px; }
.dp-note .icon { width: 14px; height: 14px; color: var(--muted); }
.dp-note.more { color: var(--accent-ink); font-weight: 600; }
@media (hover: hover) { .dp-note:hover { border-color: var(--line-strong); } }

.dg-list { margin: 0; list-style: none; }
.dg-list > li { min-width: 0; }
.dg-list > li + li { border-top: 1px solid var(--line-soft); }
.dg-lead { display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); }
.dg-lead > .icon { width: 18px; height: 18px; }
.dg-lead .sub-tile { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
button.today-row-text {
  min-height: 44px; align-content: center; padding: 0; border: none; border-radius: var(--r-sm); background: none;
  color: var(--text); text-align: left; font: inherit;
}
@media (hover: hover) { button.today-row-text:hover strong { color: var(--accent-ink); } }
/* (a repeating note's later ones read a step quieter than what can be ticked) */
.dg-repeat .today-row-text strong { color: var(--text-2); }
.today-row .dg-test { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: var(--accent-ink); }
/* each row's ⋯: what can be done with it (when, where), quiet until it's wanted */
.today-row-more {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: var(--r-md);
  background: none; color: var(--muted);
}
.today-row-more .icon { width: 20px; height: 20px; }
.today-row-more[aria-expanded=true] { background: var(--surface-2); color: var(--text); }
@media (hover: hover) { .today-row-more:hover { background: color-mix(in oklab, var(--text) 6%, transparent); color: var(--text); } }
/* a trial ending: amber, inset in the card so its corners stay round */
.dg-list > li.warn { margin: 2px 4px; padding-right: 8px; border-radius: calc(var(--r-lg) - 4px); background: var(--warn-soft); }
.dg-list > li.warn, .dg-list > li.warn + li { border-top-color: transparent; }
.today-row.warn strong, .today-row.warn .today-sub { color: var(--warn); }
.today-row.warn .sub-tile { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.today-row .btn.sub-cancel { background: var(--card); }
@media (max-width: 479px) {  /* (a phone: Cancel here goes under the words, which keep the row's width) */
  .today-row.dg-extra:has(.sub-cancel) { grid-template-columns: 44px minmax(0, 1fr); padding-bottom: 10px; }
  .today-row.dg-extra .sub-cancel { grid-column: 2; justify-self: start; }
}

/* The strip's days (1.19.2): the picked one ringed (its things are under Quick actions), a dot in a day's corner for a
   test (filled) or a reminder (a ring). */
.wday { position: relative; }
.wday[aria-selected=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 0 var(--edge-hi); }
.wday[aria-selected=true] .wd-label { color: var(--accent-ink); }
.wd-dots { position: absolute; top: 9px; right: 9px; display: flex; gap: 4px; pointer-events: none; }
.wday:has(.wd-dots) .wd-label { padding-right: 20px; }
.wd-dot { display: block; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; }
.wd-dot.test { background: var(--accent); }
.wd-dot.remind { border: 1.75px solid var(--accent); }
@media (forced-colors: active) {
  .wday[aria-selected=true] { outline: 2px solid Highlight; outline-offset: -3px; }
  .wd-dot.test { background: CanvasText; }
  .wd-dot.remind { border-color: CanvasText; }
}

/* (the tiles sit right under the days, as in the mockup's phone: their own words say what they are) */
.today-sec[data-section=quick] > .today-sec-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.today-sec[data-section=quick] { padding-top: 16px; }
@media (min-width: 900px) {
  /* (the rail has the logo: Today's top row is only its search, beside the greeting) */
  .page.today.wide { position: relative; max-width: 1200px; padding: 0 32px 40px; }
  .page.today.wide > header.app-head { position: absolute; top: 0; right: 22px; min-height: 0; padding-top: calc(16px + var(--safe-top)); }
  .page.today.wide > header.app-head .head-mark, .page.today.wide > header.app-head .head-home { display: none; }
  /* (room for the top row's buttons on the right: search, and the ⋯ that js/subs.js adds) */
  .page.today.wide .today-greet { padding: calc(24px + var(--safe-top)) 52px 0 0; }
  .page.today.wide:has(.today-more) .today-greet { padding-right: 100px; }
  .today-greet h1 { display: inline; font-size: 26px; }
  .today-hello { display: flex; align-items: baseline; gap: 0; flex-wrap: wrap; }
  .today-hello .today-date { margin: 0; color: var(--muted); font: 600 26px/32px var(--font-display); letter-spacing: -.02em; }
  .today-hello .today-date::before { content: " · "; white-space: pre; }
  .today-line { margin: 12px 0 0; }
  .today-cols { gap: 0 24px; grid-template-columns: minmax(0, 1fr); }
  .today-col.right { order: -1; }
  .today-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .today-note { width: auto; max-width: none; }
  .today-test { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top go" "bar bar" "nums nums"; }
  .today-test .test-nums { display: flex; gap: 4px; }
  .today-test .test-nums .pace { font-size: 14px; line-height: 20px; }
  /* (a dot between "18 of 52 known" and the pace, never before a pace alone: "No flash cards in it yet") */
  .today-test .test-nums > span + .pace::before { content: "· "; }
  .today-test.ask { grid-template-areas: "top go"; }
}
@media (min-width: 1100px) {
  .today-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-col.right { order: 0; }
}

/* 1.18: a calm Today on a phone (the owner: "on my phone today felt really overwhelming", js/today.js). Under 900 px:
   no title over the strip on this week, Quick actions one row of small buttons, the picked day near the top (1.19.2;
   Today's own day in 1.18), a row's time chip under its title (beside the folder), compact test and flash card cards. */
@media (max-width: 899px) {
  .today-sec-head { margin-top: 20px; }
  /* the strip: its title only while it's on another week (the picked day's heading says which day is shown) */
  .today-week[data-week="0"] .today-week-title { visibility: hidden; }

  /* Quick actions: one row of five (1.19: Snap), each an icon over its name (the big tiles took a third of the screen) */
  .today-sec[data-section=quick] { padding-top: 14px; }
  .today-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
  .today-tile, .today-tile.big {
    grid-row: 1; grid-column: auto; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 0;
    padding: 4px 0 6px; border: none; border-radius: var(--r-md); background: none; box-shadow: none; text-align: center;
  }
  .today-tile .tile-ic, .today-tile.big .tile-ic { width: 48px; height: 48px; border-radius: 15px; transition: transform var(--d-1) var(--ease-out); }
  .today-tile .tile-ic .icon, .today-tile.big .tile-ic .icon { width: 22px; height: 22px; }
  .today-tile:active .tile-ic { transform: scale(.94); }
  .today-tile .tile-text, .today-tile.big .tile-text { align-self: stretch; justify-items: center; }
  .today-tile .tile-label, .today-tile.big .tile-label { color: var(--text-2); font: 600 12px/16px var(--font); }
  .today-tile .tile-text small, .today-tile.big .tile-text small { display: none; }
  .today-tile .tile-count { box-shadow: 0 0 0 2px var(--bg); }


  /* a row: the title gets the whole width (two lines), the chip goes under it, at the end of the folder's line (or on
     a line of its own when both don't fit); the box stays by the first line */
  .today-row { align-items: start; padding: 2px 0 8px 4px; }
  .today-row.dg-extra { padding-right: 12px; }
  .today-row-text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding-top: 11px; }
  button.today-row-text { align-content: flex-start; }
  .today-row-text > strong {
    flex: 1 0 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .today-row-text > .today-sub, .today-row-text > .today-where { flex: 1 1 0; min-width: min(6.5em, 100%); }
  .today-row-text > .today-chip { margin-left: auto; }
  .today-more-row { padding-left: 52px; }

  /* Tests coming up: smaller countdown, less padding (Study stays the one clear button, beside the numbers) */
  .today-test { gap: 10px 12px; padding: 12px 14px; }
  .today-days { width: 46px; height: 50px; border-radius: 11px; }
  .today-days b { font-size: 21px; line-height: 24px; }
  .today-days span { font-size: 11px; line-height: 14px; }
  .today-days.word b { font-size: 11.5px; }
  .today-test .test-text strong { font-size: 15.5px; line-height: 21px; }
  .today-test .test-text span { font-size: 13.5px; line-height: 19px; }
  .today-test .test-nums { font-size: 13.5px; line-height: 19px; }

  /* Flash cards: the count and Study on one line, then the decks (none when one folder has them all) */
  .today-cards { padding: 8px 14px 2px; }
  .today-cards.one-deck { padding-bottom: 8px; }
  /* (Study goes under the count when both don't fit on the line: big text on a small phone) */
  .fc-top { flex-wrap: wrap; row-gap: 6px; min-height: 48px; padding-bottom: 2px; }
  .fc-n { flex: 1 1 auto; flex-wrap: wrap; column-gap: 6px; min-width: min(9.5em, 100%); }
  .fc-n b { font-size: 24px; line-height: 28px; }
  .fc-note { padding-bottom: 6px; }
  .today-deck { min-height: 44px; }
}
/* (a touch screen has nothing else in the strip's top row, so on this week the row folds away; scrolled to another
   week it opens again, smoothly once the strip has been moved: `.live`) */
@media (max-width: 899px) and (hover: none) and (pointer: coarse) {
  .today-week-head { max-height: 40px; overflow: hidden; }
  .today-week[data-week="0"] .today-week-head { max-height: 0; min-height: 0; margin-bottom: 0; opacity: 0; }
  .today-week.live .today-week-head { transition: max-height .2s var(--ease-out), margin .2s var(--ease-out), opacity .2s; }
}
@media (max-width: 899px) and (hover: hover) { .today-tile:hover .tile-ic { background: var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .today-week.live .today-week-head, .today-tile .tile-ic { transition: none; } }
/* ==== end Today ==== */
/* ==== 1.16: Subscriptions (H) ==== */
/* js/subs.js: "Coming up" on Today (a renewal soon; a trial ending, in amber), and the list in its sheet. */
.today-subs { display: grid; gap: 8px; }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }
.sub-head h2 { margin: 0; font: 600 18px/24px var(--font); letter-spacing: -.01em; }
.sub-all, .sub-more {
  min-height: 44px; padding: 0 4px; border: none; background: none; color: var(--accent-ink); font: 600 14.5px/20px var(--font);
}
.sub-more { justify-self: start; padding: 0 16px; }
.sub-soon-list, .sub-list {
  display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 1px 0 var(--edge-hi);
}
.sub-soon { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 64px; }
.sub-soon + .sub-soon, .sub-row + .sub-row { border-top: 1px solid var(--line-soft); }
.sub-soon.trial { background: var(--warn-soft); }
.sub-soon.trial .sub-soon-text strong, .sub-soon.trial .sub-soon-text span { color: var(--warn); }
.sub-tile {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-ink); font: 600 16px/1 var(--font);
}
.sub-soon.trial .sub-tile { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.sub-soon-text {
  flex: 1; min-width: 0; display: grid; gap: 2px; min-height: 44px; align-content: center; padding: 0; border: none;
  background: none; color: var(--text); text-align: left;
}
.sub-soon-text strong { font: 600 15px/20px var(--font); overflow-wrap: anywhere; }
.sub-row-text strong { font: 600 15px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-soon-text span { color: var(--muted); font: 500 13px/18px var(--font); }
.sub-row-text > span { color: var(--muted); font: 500 13px/18px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-price { flex: none; color: var(--text-2); font: 600 14px/20px var(--font); font-variant-numeric: tabular-nums; }
.btn.sub-cancel { flex: none; }
.btn.sub-cancel.small { min-height: 44px; padding: 0 12px; font-size: 13.5px; }
.sub-soon.trial .btn.sub-cancel { background: var(--card); }
@media (max-width: 479px) {  /* (a phone: the trial's Cancel here goes under its words, which keep the row's width) */
  .sub-soon.trial { flex-wrap: wrap; row-gap: 6px; padding-bottom: 12px; }
  .sub-soon.trial .sub-soon-text { flex-basis: calc(100% - 48px); }
  .sub-soon.trial .btn.sub-cancel { margin-left: 48px; }
}
.sub-page { display: grid; gap: 12px; align-content: start; }
.sub-total {
  display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--accent-wash);
  border: 1px solid light-dark(transparent, var(--line-soft));
}
.sub-total-label { color: var(--muted); font: 500 13px/18px var(--font); }
.sub-total strong { font: 600 22px/28px var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sub-row { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.sub-row-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0 10px 14px;
  border: none; background: none; color: var(--text); text-align: left;
}
@media (hover: hover) { .sub-row-main:hover, .sub-soon-text:hover strong { color: var(--accent-ink); } }
.sub-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sub-row-text > span { display: flex; align-items: center; gap: 6px; }
.sub-row.trial .sub-row-text > span { color: var(--warn); }
.sub-row.paused .sub-row-main { opacity: .6; }
.sub-chip { flex: none; padding: 1px 7px; border-radius: var(--r-full); background: var(--warn-soft); color: var(--warn); font: 600 12px/18px var(--font); }
.sub-row-price { flex: none; display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; }
.sub-row-price strong { font: 600 14.5px/20px var(--font); }
.sub-row-price span { color: var(--muted); font: 500 12.5px/16px var(--font); }
.sub-empty { padding: 8px 2px; }
.sub-empty p { margin: 4px 0; }
.sub-tip { margin: 4px 2px 0; }
.sub-edit .field.sub-field { font-size: 16px; }  /* (16 px: an iPhone zooms into a smaller box) */
.sub-pair { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; }
.sub-pair > .label { margin-top: 14px; }
.sub-edit .sub-switch { margin-top: 6px; }
.sub-edit .btn.sub-cancel { justify-self: start; margin-top: 10px; min-height: 44px; }
@media (max-width: 359px) {
  .sub-row-price span { display: none; }
  .sub-soon .sub-price { display: none; }
}
/* ==== end Subscriptions ==== */

/* ---------------------------------------------------------------- safety nets (js/history.js): a note's History */
.sheet-body > .history-about { margin: 2px 0 12px; }
.history-list { display: grid; gap: 8px; }
.history-item { border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px 12px 12px; background: var(--card); }
.history-item.open { border-color: var(--line-strong); }
.history-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; width: 100%; min-height: 44px; padding: 10px 0 4px;
  border: none; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.history-head strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.history-ago { color: var(--muted); font-size: 13px; line-height: 18px; }
.history-preview {
  margin: 0; color: var(--text-2); font-size: 14px; line-height: 20px; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.history-item.open .history-preview { display: block; -webkit-line-clamp: unset; line-clamp: none; max-height: 40vh; max-height: 40dvh; overflow: auto; }
.history-preview.sealed { color: var(--muted); }
.history-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.history-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 8px; color: var(--muted); text-align: center; }
.history-empty p { margin: 0; }
.history-empty p:first-of-type { color: var(--text-2); font-weight: 500; }
@media (max-width: 699px) {
  .history-actions .btn { min-height: 44px; }
}

/* a long list's older notes, folded away under a heading that opens them (js/notes.js `folded`) */
.list-fold {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; margin: 10px 0 2px; padding: 0 6px;
  border: none; border-radius: var(--r-md); background: none; color: var(--muted); font: 600 13px/18px var(--font);
  text-align: left; cursor: pointer;
}
.list-fold:hover { background: var(--surface-2); color: var(--text); }
.list-fold .count { margin-left: auto; font-weight: 500; }
.fold-twist { width: 14px; height: 14px; flex: none; transition: transform var(--d-2) var(--ease-out); }
.list-fold[aria-expanded="true"] .fold-twist { transform: rotate(90deg); }
.fold-notes { display: contents; }
.fold-notes[hidden] { display: none; }
@media (min-width: 900px) {
  .list-fold { margin: 10px 6px 2px; width: auto; }
  .fold-notes > button.card:first-child::before { display: none; }
}

/* ---------------------------------------------------------------- the note-taker (js/notetaker.js) and Settings > AI */
.nt-layer {
  position: fixed; inset: 0; z-index: 58; display: flex; justify-content: center; align-items: stretch; background: var(--page);
  opacity: 0; transform: translateY(12px); transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out);
}
.nt-layer.shown { opacity: 1; transform: none; }
.nt { width: 100%; min-height: 0; display: flex; flex-direction: column; background: var(--page); overflow: hidden; }
@media (min-width: 700px) {
  .nt-layer { background: var(--scrim); align-items: center; padding: 24px; transform: none; }
  .nt { max-width: 640px; height: min(760px, 100%); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
}
.nt-bar {
  display: flex; align-items: center; gap: 6px; min-height: 56px; flex: none;
  padding: calc(8px + var(--safe-top)) 14px 8px 6px; border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 700px) { .nt-bar { padding-top: 8px; } }
.nt-title { margin: 0; min-width: 0; font: 600 16px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-time { flex: none; padding: 3px 10px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); font: 600 14px/20px var(--font); }
.nt-layer.listening .nt-time { color: var(--text); }
.nt-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 20px 20px 14px; }
.nt-body:has(> .nt-live) { overflow: hidden; padding-bottom: 10px; }
.nt-foot {
  display: flex; gap: 10px; justify-content: flex-end; flex: none; flex-wrap: wrap;
  padding: 12px 16px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--line-soft); background: var(--page);
}
.nt-foot:empty { display: none; }
@media (max-width: 699px) { .nt-foot > .btn { flex: 1; min-height: 48px; } }

/* before it starts */
.nt-ready { display: grid; gap: 4px; width: 100%; max-width: 520px; margin: 0 auto; }
.nt-hero {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 12px; border-radius: 16px;
  background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.nt-hero-icon { width: 28px; height: 28px; }
.nt-ready h3 { margin: 0; font: 600 22px/28px var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.nt-lead { margin: 6px 0 2px; color: var(--text-2); }
.nt-ready .label { margin-top: 12px; }
.nt-folder {
  appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f636c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
}
:root[data-theme="dark"] .nt-folder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5a5b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
}
.nt-cards { margin-top: 14px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); min-height: 64px; }
.nt-warn {
  display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--text); font: 400 14px/20px var(--font);
}
.nt-warn .icon { margin-top: 1px; color: var(--warn); }
.nt-facts { display: grid; gap: 4px; margin: 14px 0 0; padding-left: 18px; color: var(--muted); font: 400 13.5px/20px var(--font); }
.nt-facts li::marker { color: var(--faint); }
/* the PC: the microphone, or this PC's own sound (a video, a class, a call) */
.nt-source { display: grid; gap: 8px; margin-top: 14px; }
.nt-source > .label { margin: 0; }
.nt-source-pick { justify-self: start; }
.nt-source-pick button[disabled] { opacity: .5; cursor: not-allowed; }
.nt-hint { margin: 0; color: var(--muted); font: 400 13.5px/20px var(--font); }
.nt-with-mic { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); min-height: 64px; }
.nt-test { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nt-test-result { color: var(--text-2); font: 400 13.5px/20px var(--font); }
.nt-test-result[data-state=heard] { color: var(--text); font-weight: 500; }
.nt-never { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--text-2); cursor: pointer; }
.nt-pcsound {
  display: flex; align-items: center; gap: 10px; flex: none; padding: 8px 8px 8px 12px; border-radius: var(--r-md);
  background: var(--danger-soft); color: var(--text); font: 600 14px/20px var(--font);
}
.nt-pcsound > .icon { flex: none; color: var(--danger); }
.nt-pcsound-words { flex: 1; min-width: 0; }
.nt-pcsound > .btn { flex: none; }

/* listening: the words as they come */
.nt-live { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 640px; margin: 0 auto; }
.nt-state { display: flex; align-items: center; gap: 10px; flex: none; font: 600 14px/20px var(--font); color: var(--text); }
.nt-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--faint); }
.nt-state[data-state=on] .nt-dot { background: var(--accent); animation: nt-breathe 2.4s ease-in-out infinite; }
.nt-state[data-state=paused] .nt-dot { background: var(--warn); }
@keyframes nt-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.nt-count { margin-left: auto; color: var(--muted); font: 500 13px/18px var(--font); }
.nt-live .nt-warn { margin: 0; flex: none; }
.nt-words {
  flex: 1; min-height: 0; overflow: auto; padding: 4px 2px 12px; overscroll-behavior: contain;
  color: var(--text); font: 400 17px/27px var(--font); overflow-wrap: anywhere;
}
.nt-para { margin: 0 0 14px; }
.nt-interim { color: var(--muted); }
.nt-para > .nt-interim:not(:empty)::before { content: " "; }
.nt-empty { margin: 32px auto; max-width: 300px; color: var(--muted); text-align: center; font: 400 15px/22px var(--font); }
.nt-small { flex: none; margin: 0; color: var(--muted); font: 400 12.5px/18px var(--font); }

/* Claude writing, or the notes not made */
.nt-making { display: grid; justify-items: center; gap: 10px; max-width: 400px; margin: auto; padding: 24px 0; text-align: center; }
.nt-making h3 { margin: 6px 0 0; font: 600 19px/26px var(--font); }
.nt-making p { margin: 0; }
.nt-making-time { color: var(--muted); font: 500 13px/18px var(--font); }
.nt-making-slow { color: var(--text-2); font: 400 14px/20px var(--font); }
.nt-problem p { color: var(--text-2); }
.spinner.big { width: 32px; height: 32px; border-width: 3px; }
.nt-problem-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--danger-soft); color: var(--danger); }
.nt-problem-icon .icon { width: 24px; height: 24px; }

/* while it listens: Hide on the left of its bar (its word showing), Stop on the right */
.nt-bar .nt-hide { flex: none; gap: 4px; padding: 0 12px 0 8px; }
.nt-bar .nt-hide .icon { width: 20px; height: 20px; }
.nt-bar .nt-stop { color: var(--danger); }
.nt-bar .nt-stop .icon { width: 26px; height: 26px; }  /* (the filled square, as big as the other icons look) */
.nt-bar .nt-stop:hover { background: var(--danger-soft); color: var(--danger); }
/* While it listens, Wefty's tabs stay in reach (js/notetaker.js placeLayer sets its bottom, or its left beside the
   rail): its foot then sits on the tab bar, which keeps the safe area below it. A phone's line about the background. */
.nt-layer[data-tabs=below] { --safe-bottom: 0px; }
.nt-bg { display: flex; align-items: flex-start; gap: 8px; flex: none; margin: 0; color: var(--text-2); font: 500 13.5px/19px var(--font); }
.nt-bg .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent-ink); }
/* Pocket mode (js/notetaker.js pocket): the live screen's offer on a phone, and the black screen itself. Pure black
   (an OLED screen's pixels off) whatever the theme, one faint line that's still readable up close, nothing a pocket's
   touches can scroll, zoom, select or open a menu on. Over everything, toasts too. */
.nt-pocket-tip { display: flex; align-items: center; gap: 12px; flex: none; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.nt-pocket-tip p { flex: 1; min-width: 0; margin: 0; color: var(--text-2); font: 400 13px/18px var(--font); }
.nt-pocket-tip .btn { flex: none; }
.nt-pocket {
  position: fixed; inset: 0; z-index: 1000; background: #000; outline: none; cursor: none;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
}
.nt-pocket-text { position: absolute; left: 16px; right: 16px; top: var(--pocket-y, 46%); text-align: center; pointer-events: none; }
.nt-pocket-line { margin: 0; color: #5f5f5f; font: 500 14px/20px var(--font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nt-pocket-note { margin: 8px auto 0; max-width: 320px; color: #5f5f5f; font: 400 13px/18px var(--font); overflow-wrap: anywhere; }
.nt-pocket-note:empty { display: none; }
.nt-pocket-wake { top: 0; left: 0; padding: 0; border: 0; margin: 0; min-width: 0; min-height: 0; }  /* (.sr-only: for a screen reader) */
@media (forced-colors: active) { .nt-pocket { background: Canvas; } .nt-pocket-line, .nt-pocket-note { color: CanvasText; } }

/* -- listening with its screen hidden (js/notetaker.js drawStrip): the "call in progress" bar across the top. It sits
   in #layers over the full-screen note (55), under the note-taker (58), sheets and menus (60) and toasts. Under 900 px
   every top bar that pads for the notch (--safe-top) moves below it; from 900 px the whole app is pushed down. Layers
   over it pad for the notch alone (--notch), so a drawing's bar never gets an empty band. Never on the gate screens. */
.layer, .nt-layer { --safe-top: var(--notch); }
.nt-strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 56; display: flex; align-items: center; gap: 4px;
  height: calc(36px + var(--notch)); padding: var(--notch) max(6px, env(safe-area-inset-right, 0px)) 0 max(2px, env(safe-area-inset-left, 0px));
  background: light-dark(var(--accent), var(--accent-soft)); color: light-dark(var(--on-accent), var(--accent-ink)); font: 600 13px/18px var(--font);
}
/* (in dark the soft purple with lavender words, an iris line along its bottom and a pale dot that breathes: no bright
   stripe across the top of the screen at night; paused and "not hearing" show an amber dot) */
:where(:root[data-theme="dark"]) .nt-strip { box-shadow: inset 0 -1px 0 var(--accent-line); }
html:has(#app.gate) .nt-strip { display: none; }
@media (max-width: 899px) {
  html.nt-strip-on:not(:has(#app.gate)) { --safe-top: calc(var(--notch) + 36px); }
  /* the lists and pages scroll under the bar here: a control the keyboard moves to stops below it, never behind it */
  html.nt-strip-on .view, html.nt-strip-on .list-column, html.nt-strip-on .chat-side { scroll-padding-top: var(--safe-top); }
}
@media (min-width: 900px) {
  html.nt-strip-on #app.ready:not(.gate) { padding-top: calc(36px + var(--notch)); }
}
.nt-strip-open {
  position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: none; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left;
}
.nt-strip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: color-mix(in srgb, light-dark(var(--on-accent), var(--accent-ink)) 55%, transparent); }
.nt-strip[data-state=on] .nt-strip-dot { background: light-dark(var(--on-accent), var(--accent)); animation: nt-strip-breathe 2.4s ease-in-out infinite; }
.nt-strip[data-state=paused] .nt-strip-dot, .nt-strip[data-state=trouble] .nt-strip-dot { background: light-dark(var(--on-accent-warn), var(--warn)); }
@keyframes nt-strip-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, light-dark(var(--on-accent), var(--accent)) 45%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, light-dark(var(--on-accent), var(--accent)) 0%, transparent); }
}
.nt-strip-word { flex: none; white-space: nowrap; }
.nt-strip-brief { display: none; }
.nt-strip-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.nt-strip-time { flex: none; font-variant-numeric: tabular-nums; }
.nt-strip-stop {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px;
  padding: 0 11px 0 9px; border: 1px solid color-mix(in srgb, light-dark(var(--on-accent), var(--accent-ink)) 60%, transparent); border-radius: var(--r-full);
  background: none; color: inherit; font: inherit;
}
.nt-strip-stop::after { content: ""; position: absolute; inset: -4px -2px; }  /* a 36 px tall target */
/* To a finger, 44 px tall: the targets reach 8 px under the bar, where the bars below it only have their padding. */
@media (pointer: coarse) {
  .nt-strip-open::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -8px; }
  .nt-strip-stop::after { inset: -5px -8px -13px; }  /* (from inside its 1 px border: the bar's top to 8 px under it) */
}
.nt-strip-stop .icon { width: 14px; height: 14px; }
.nt-strip-open:hover, .nt-strip-stop:hover { background: light-dark(var(--accent-hover), color-mix(in oklab, var(--accent-soft) 84%, var(--accent-line))); }
.nt-strip-open:active, .nt-strip-stop:active { background: light-dark(var(--accent-press), color-mix(in oklab, var(--accent-soft) 72%, var(--accent-line))); }
.nt-strip :focus-visible { outline: 2px solid light-dark(var(--on-accent), var(--focus)); outline-offset: -2px; }
.nt-strip-stop:disabled { opacity: .6; cursor: default; }
@media (max-width: 479px) {
  .nt-strip-full { display: none; }
  .nt-strip-brief { display: inline; }
}
@media (max-width: 339px) {
  .nt-strip-open { gap: 6px; padding: 0 6px; }
  .nt-strip-stop { width: 30px; padding: 0; }
  .nt-strip-stop-word { display: none; }
}
@media (forced-colors: active) { .nt-strip { border-bottom: 1px solid CanvasText; } }

/* a note's card while the note-taker writes into it */
.nt-card-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-sm);
  background: var(--accent-wash); color: var(--accent-ink); font: 600 12px/1 var(--font); box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.nt-card-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* the way in: above the new-note sheet's templates, and the chip on a note that has a transcript without notes */
.template.nt-entry, .template.cap-entry {
  width: 100%; margin-bottom: 8px; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center;
  border-color: var(--accent-line); background: var(--accent-wash);
}
.template.nt-entry:hover, .template.nt-entry:focus-visible, .template.cap-entry:hover, .template.cap-entry:focus-visible { border-color: var(--accent); background: var(--accent-wash); }
.template.nt-entry .icon, .template.cap-entry .icon { grid-row: span 2; margin: 0; background: var(--card); }
.template.nt-entry .t-hint, .template.cap-entry .t-hint { color: var(--text-2); }
.note-meta .nt-chip { color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-line); }

/* Settings > AI */
.ai-key { display: grid; }
.ai-ready { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--ok); font: 600 14px/20px var(--font); }
.ai-key-row { display: flex; gap: 8px; padding: 0 0 4px; }
.ai-key-row .field { flex: 1; min-width: 0; }
.ai-key-row .btn { min-height: 48px; }
.ai-key > .setting-buttons { padding-top: 0; }
.ai-console { justify-self: start; padding: 6px 0 12px; }
.ai-steps { margin: 0 0 10px; font: 400 14px/20px var(--font); }
.ai-school { margin: 0 0 10px; }
.nt-setup { display: grid; }
.nt-setup > .btn { margin-top: 8px; justify-self: start; }
.ai-check[data-state=reachable] { color: var(--ok); }
.ai-check[data-state=blocked] { color: var(--warn); }
.ai-gemini-times { margin: -4px 0 0; padding: 0 0 12px 18px; color: var(--text-2); font: 400 13px/19px var(--font); overflow-wrap: anywhere; }
.ai-gemini-times > li[data-ok=no] { color: var(--warn); }
.ai-gemini-net, .ai-gemini-first { margin: -4px 0 8px; color: var(--text-2); font: 400 13px/19px var(--font); overflow-wrap: anywhere; }
.ai-gemini-net[data-ok=no] { color: var(--warn); }
.ai-gemini-first { margin-top: -6px; padding-bottom: 12px; color: var(--text); }
/* "Write notes with Claude" belongs to "Use Claude too": set in under it, with no line between them. */

/* -- Chat ------------------------------------------------------------ the Chat tab (js/chat.js): the chats on the
   left (or alone on a phone), the open chat with its box at the bottom; answers on the page, your words in a bubble */
.view[data-tab=claude] { overflow: hidden; }
.chat-app { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.chat-side { display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 0 16px 24px; }
.chat-side-head .btn { min-height: 36px; padding: 0 12px; }
.chat-side-head .btn .icon { width: 16px; height: 16px; }
.chat-pane { display: none; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.chat-app.showing-chat .chat-side { display: none; }
.chat-app.showing-chat .chat-pane { display: flex; }
.chat-list { display: grid; gap: 2px; }
.chat-row { display: flex; align-items: center; gap: 2px; padding-right: 6px; border-radius: var(--r-md); transition: background var(--d-1); }
.chat-row:hover { background: var(--surface-2); }
.chat-row.on { background: var(--accent-soft); }
.chat-row-main {
  flex: 1; min-width: 0; display: grid; gap: 2px; padding: 10px 12px; border: none; background: none; text-align: left; color: var(--text);
}
.chat-row-title { font: 500 15px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row-meta { font: 400 12.5px/16px var(--font); color: var(--muted); }
.chat-row.on .chat-row-title { color: var(--accent-ink); font-weight: 600; }
.chat-row.on .chat-row-meta { color: var(--text-2); }

.chat-head {
  flex: none; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: calc(8px + var(--safe-top)) 8px 8px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.chat-title {
  flex: 1; min-width: 0; padding: 7px 8px; border: none; border-radius: var(--r-sm); background: none; text-align: left; color: var(--text);
  font: 600 16.5px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-title:hover { background: var(--surface-2); }
.chat-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.chat-thread { max-width: 760px; margin: 0 auto; padding: 20px 16px 28px; display: flex; flex-direction: column; gap: 26px; }
.chat-turn { display: grid; gap: 14px; min-width: 0; }
.chat-you { justify-self: end; display: grid; justify-items: end; gap: 8px; max-width: min(86%, 560px); min-width: 0; }
.chat-you-text {
  padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--accent-soft); color: var(--text);
  font: 400 15px/22px var(--font); white-space: pre-wrap; overflow-wrap: anywhere;
}
/* (1.19.8) A message's ⋯: its menu, as a finger's long press on its words picks them. */
.chat-you-line { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.chat-more {
  flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
}
.chat-more .icon { width: 18px; height: 18px; }
.chat-more:hover, .chat-more[aria-expanded=true] { background: var(--surface-2); color: var(--text); }
.chat-you .chat-more { opacity: .7; }
.chat-you:is(:hover, :focus-within) .chat-more { opacity: 1; }
@media (pointer: coarse) { .chat-more { width: 44px; height: 44px; } .chat-you .chat-more { opacity: 1; } }
.chat-claude { display: grid; gap: 10px; min-width: 0; }
.chat-reply-body { min-width: 0; }
.chat-md { font-size: 15.5px; line-height: 25px; }
.chat-md .read-para + .read-para, .chat-md .read-list + .read-para { margin-top: 0; }
.chat-code { position: relative; }
.chat-code .read-pre { padding-right: 84px; }
.chat-copy-code {
  position: absolute; top: 12px; right: 7px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--text-2); font: 500 12.5px/1 var(--font);
}
.chat-copy-code:hover { background: var(--surface-2); color: var(--text); }
.chat-copy-code .icon { width: 14px; height: 14px; }
.chat-thinking { display: flex; align-items: center; gap: 10px; min-height: 25px; color: var(--muted); font: 500 14px/20px var(--font); }
.chat-md + .chat-thinking { margin-top: 8px; }
.chat-note { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 20px; }
.chat-turn[data-state=failed] .chat-claude > .chat-note { color: var(--danger); }
.chat-waiting {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--muted);
  font: 400 13.5px/19px var(--font);
}
.chat-waiting-text { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
.chat-waiting-text > .icon { flex: none; width: 16px; height: 16px; color: var(--muted); }
.chat-waiting-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.chat-waiting-actions .btn { min-height: 32px; padding: 0 10px; gap: 6px; color: var(--text-2); font: 500 13px/18px var(--font); }
.chat-waiting-actions .btn:hover { color: var(--text); }
.chat-waiting-actions .btn .icon { width: 15px; height: 15px; }
.chat-row-waiting { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-ink); font: 500 12.5px/16px var(--font); }
.chat-row-waiting > .icon { flex: none; width: 13px; height: 13px; }
/* (1.18: the answer being written now, or one that ended while the chat wasn't shown) */
.chat-row-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.chat-row-writing .chat-row-dot { animation: tab-dot-breathe 1.8s ease-in-out infinite; }
.chat-row.unread .chat-row-title { font-weight: 650; }
/* An answer cut off at this end, being finished: the words it had said, a little quieter, then "Finishing the
   answer..." (with Stop while it waits for Wefty to be in sight). */
.chat-partial .chat-md { color: var(--text-2); }
.chat-finishing { flex-wrap: wrap; }
.chat-finishing .btn { margin-left: auto; min-height: 32px; padding: 0 10px; gap: 6px; color: var(--text-2); font: 500 13px/18px var(--font); }
.chat-finishing .btn:hover { color: var(--text); }
.chat-finishing .btn .icon { width: 15px; height: 15px; }
.chat-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat-sources-label { margin-right: 2px; color: var(--muted); font: 500 12.5px/1 var(--font); }
.chat-source {
  display: inline-flex; align-items: center; height: 26px; max-width: 200px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: var(--r-full); color: var(--text-2); font: 500 12.5px/1 var(--font); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-source:hover { border-color: var(--line-strong); color: var(--text); }
/* What Chat did in Wefty (js/chattools.js, 1.18): one calm card under the answer, a row each ("Made the folder
   Badminton · Open · Undo": the words wrap, the buttons stay on the right), "N changes in Wefty · Undo all" on top
   when there are several, the first few rows until "Show N more". An ask to delete waits above it on its own, with
   Delete and Cancel. */
.chat-actions-done { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 560px; }
.chat-actions-card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); overflow: hidden;
}
:where(:root[data-theme="dark"]) .chat-actions-card { box-shadow: inset 0 1px 0 var(--edge-hi); }
.chat-actions-card.asks { border-color: var(--line-strong); background: var(--surface); }
.chat-actions-head {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 2px 4px 2px 12px;
  border-bottom: 1px solid var(--line); color: var(--muted); font: 500 12.5px/18px var(--font);
}
.chat-actions-count { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chat-action-row + .chat-action-row { border-top: 1px solid var(--line); }
.chat-action {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  min-height: 40px; padding: 3px 4px 3px 12px; color: var(--text-2); font: 500 13px/18px var(--font);
}
.chat-action-mark { width: 15px; height: 15px; color: var(--accent-ink); }
.chat-action-label { min-width: 0; padding: 4px 0; overflow-wrap: anywhere; }
.chat-action-btns { display: flex; align-items: center; justify-content: flex-end; }
.chat-action-btn {
  min-height: 30px; padding: 0 10px; border: 0; border-radius: 15px; background: none; color: var(--accent-ink);
  font: 600 13px/18px var(--font); cursor: pointer; white-space: nowrap;
}
.chat-action-btn:hover { background: var(--accent-soft); }
.chat-action-btn:disabled { opacity: .5; cursor: default; }
.chat-action-btn.danger { color: var(--danger); }
.chat-action-btn.danger:hover { background: var(--danger-soft); }
.chat-action.undone .chat-action-label { text-decoration: line-through; color: var(--muted); }
.chat-action.undone .chat-action-mark { color: var(--muted); }
.chat-action.declined .chat-action-label { text-decoration: none; }
.chat-action-done { padding: 0 8px; color: var(--muted); font: 500 12.5px/18px var(--font); white-space: nowrap; }
.chat-action.ask .chat-action-mark { color: var(--danger); }
.chat-action.ask .chat-action-label { color: var(--text); }
.chat-action-about { grid-column: 2 / -1; padding: 0 8px 6px 0; color: var(--muted); font: 400 12.5px/17px var(--font); }
.chat-actions-more {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; padding: 0 12px;
  border: 0; border-top: 1px solid var(--line); background: none; color: var(--accent-ink); font: 600 13px/18px var(--font);
  cursor: pointer;
}
.chat-actions-more .icon { width: 15px; height: 15px; }
.chat-actions-more:hover { background: var(--accent-soft); }
@media (pointer: coarse) { .chat-action-btn { min-height: 36px; } .chat-action, .chat-actions-head, .chat-actions-more { min-height: 44px; } }
/* The calendar ask under an answer that set a reminder (1.19.10, js/chattools.js calendarAsk): a soft accent card
   ("Add it to your calendar so your phone rings, even when Wefty is closed."), the reminder (or a row each with its
   own Google Calendar button), and the buttons, which wrap on a narrow phone. Once every one was tapped it goes
   calm (.added): the plain card colour, no solid button, a check line per reminder. */
.chat-cal {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--accent-line);
  border-radius: 14px; background: var(--accent-soft); color: var(--text);
}
:where(:root[data-theme="dark"]) .chat-cal { box-shadow: inset 0 1px 0 var(--edge-hi); }
.chat-cal.added { border-color: var(--line); background: var(--surface-2); }
.chat-cal-top { display: flex; align-items: flex-start; gap: 8px; }
.chat-cal-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--accent-ink); }
.chat-cal-text { flex: 1; min-width: 0; margin: 0; font: 600 13.5px/19px var(--font); overflow-wrap: anywhere; }
.chat-cal.added .chat-cal-text { color: var(--text-2); font-weight: 500; }
.chat-cal-list { display: flex; flex-direction: column; }
.chat-cal-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; padding: 6px 0;
  color: var(--text-2); font: 500 13px/18px var(--font);
}
.chat-cal-item + .chat-cal-item { border-top: 1px solid var(--line); }
.chat-cal-what { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.chat-cal-what strong { color: var(--text); font-weight: 600; }
.chat-cal-mark { display: flex; align-items: center; gap: 4px; flex-basis: 100%; min-width: 0; color: var(--accent-ink); font: 500 12.5px/17px var(--font); overflow-wrap: anywhere; }
.chat-cal-mark .icon { width: 14px; height: 14px; }
.chat-cal-btns { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chat-cal-btn { min-height: 38px; max-width: 100%; padding: 0 14px; font-size: 13.5px; white-space: normal; text-align: start; }
.chat-cal-btn .icon { width: 16px; height: 16px; }
@media (pointer: coarse) { .chat-cal-btn { min-height: 44px; } }
/* In dark (and Pure black) .btn.tonal's soft purple is the card's own fill: the ask's main button is solid iris there,
   so it stands out from the card it sits on (it's the card's one main action; the calm .added card has none). */
:where(:root[data-theme="dark"]) .chat-cal .btn.tonal { background: var(--primary); color: var(--on-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
:where(:root[data-theme="dark"]) .chat-cal .btn.tonal:hover:not(:disabled) { background: var(--primary-hover); }
:where(:root[data-theme="dark"]) .chat-cal .btn.tonal:active:not(:disabled) { background: var(--primary-press); }
.chat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -10px; }
.chat-actions .btn { min-height: 34px; padding: 0 10px; gap: 6px; color: var(--muted); font: 500 13px/18px var(--font); }
.chat-actions .btn:hover { color: var(--text); }
.chat-actions .btn .icon { width: 16px; height: 16px; }
.chat-meta { margin-left: auto; padding-left: 10px; color: var(--muted); font: 400 12px/16px var(--font); font-variant-numeric: tabular-nums; }

.chat-attached { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.chat-attached.in-box { justify-content: flex-start; padding: 2px 2px 0; }
.chat-sent-pic img { display: block; max-width: 220px; max-height: 220px; border: 1px solid var(--line); border-radius: 14px; object-fit: cover; background: var(--surface-2); }
.chat-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; max-width: 240px; padding: 0 4px 0 4px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
}
.chat-chip .chat-pic { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.chat-chip-kind {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 6px;
  background: var(--accent-wash); color: var(--accent-ink); font: 700 9.5px/1 var(--font); letter-spacing: .02em;
}
.chat-chip-name { min-width: 0; padding-right: 6px; color: var(--text-2); font: 500 13px/18px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chip-name:empty { display: none; }
.chat-chip.note { padding-left: 0; }
/* (1.19.11: a note, file or picture sent with a message opens with a tap) */
.chat-chip-open {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 100%; padding: 0 0 0 10px; border: none;
  border-radius: var(--r-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.chat-chip-open .icon { flex: none; width: 16px; height: 16px; color: var(--muted); }
button.chat-chip.opens { color: inherit; font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) {
  .chat-chip-open:hover .chat-chip-name, button.chat-chip.opens:hover .chat-chip-name { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
  button.chat-chip.opens:hover, .chat-chip.note:has(.chat-chip-open:hover) { border-color: var(--line-strong); }
}
button.chat-sent-pic { display: block; padding: 0; border: none; border-radius: 14px; background: none; cursor: zoom-in; }
.chat-viewer img { max-height: 70vh; }
.chat-chip.going { opacity: .7; }
.chat-chip .spinner { margin-right: 6px; }
.chat-chip-x {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-left: -4px; padding: 0; border: none;
  border-radius: var(--r-sm); background: none; color: var(--muted);
}
.chat-chip-x:hover { background: var(--surface-2); color: var(--text); }
.chat-chip-x .icon { width: 15px; height: 15px; }

.chat-composer { flex: none; padding: 6px 12px 12px; background: var(--bg); }
.chat-trouble {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 760px; margin: 0 auto 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--warn-soft); color: var(--text);
  font: 400 13.5px/19px var(--font);
}
.chat-trouble > .icon { color: var(--warn); }
.chat-trouble > span { flex: 1; min-width: 180px; }
.chat-trouble .btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
/* no Gemini key yet: an invitation, not a warning */
.chat-trouble[data-kind=setup] { background: var(--accent-wash); }
.chat-trouble[data-kind=setup] > .icon { color: var(--accent-ink); }
.chat-claude-off .link-btn { display: inline; padding: 0; font: inherit; }
.chat-box {
  display: grid; gap: 4px; max-width: 760px; margin: 0 auto; padding: 6px 8px 8px; border: 1px solid var(--line-strong);
  border-radius: 20px; background: var(--field); transition: border-color var(--d-1), box-shadow var(--d-1);
}
.chat-box:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.chat-hint { margin: 0 6px; color: var(--muted); font-size: 12.5px; line-height: 17px; }
.chat-input {
  width: 100%; min-height: 38px; max-height: 200px; padding: 8px 8px 4px; border: none; outline: none; resize: none;
  background: transparent; color: var(--text); font: 400 15.5px/22px var(--font);
}
.chat-input:focus-visible { outline: none; }
.chat-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-tools-gap { flex: 1; }
.chat-tools .icon-btn { width: 36px; height: 36px; }
.chat-tools .icon-btn .icon { width: 20px; height: 20px; }
.chat-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; min-width: 0; padding: 0 11px; border: 1px solid var(--line);
  border-radius: var(--r-full); background: transparent; color: var(--text-2); font: 500 13px/1 var(--font); white-space: nowrap;
  transition: background var(--d-1), border-color var(--d-1), color var(--d-1);
}
.chat-pill .icon { width: 16px; height: 16px; }
.chat-pill:hover { background: var(--surface-2); color: var(--text); }
.chat-model { padding-right: 8px; }
.chat-model .chat-model-name { overflow: hidden; text-overflow: ellipsis; }
.chat-model .chat-pill-down { width: 14px; height: 14px; color: var(--muted); }
.chat-toggle[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.chat-go {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); transition: background var(--d-1), transform var(--d-1) var(--ease-out);
}
.chat-go:hover:not(:disabled) { background: var(--primary-hover); }
.chat-go:active:not(:disabled) { transform: scale(.94); }
.chat-go:disabled { background: var(--surface-2); color: var(--control); cursor: default; }
.chat-go.stop { background: var(--text); color: var(--bg); }
.chat-go .icon { width: 20px; height: 20px; }
@media (max-width: 419px) {
  .chat-composer { padding: 6px 8px 10px; }
  .chat-toggle { padding: 0 9px; }
  .chat-toggle > span:not(.icon) { display: none; }
}

.chat-empty { display: grid; justify-items: center; gap: 8px; padding: 12vh 16px 24px; text-align: center; color: var(--muted); }
.chat-empty h2 { margin: 8px 0 0; color: var(--text); font: 600 22px/28px var(--font-display); letter-spacing: -.01em; }
.chat-empty p { margin: 0; max-width: 340px; }
.chat-empty-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--accent-soft); color: var(--accent-ink); }
.chat-empty-mark .icon.big { width: 28px; height: 28px; }

.model-choices { display: grid; gap: 8px; }
.model-choice {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); text-align: left; color: var(--text); transition: border-color var(--d-1), background var(--d-1);
}
.model-choice:hover { border-color: var(--line-strong); }
.model-choice.on { border-color: var(--accent); background: var(--accent-wash); }
.mc-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mc-name { font: 600 15px/20px var(--font); }
.mc-about { color: var(--text-2); font-size: 14px; line-height: 20px; }
.mc-cost { color: var(--muted); font-size: 12.5px; line-height: 18px; font-variant-numeric: tabular-nums; }
.mc-check { margin-top: 2px; color: var(--accent-ink); }

.chat-note-search { margin-bottom: 8px; }
.chat-note-list { display: grid; gap: 2px; max-height: 52vh; overflow: auto; margin: 0 -8px; }
.chat-note-row {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border: none; border-radius: var(--r-md);
  background: none; text-align: left; color: var(--text);
}
.chat-note-row:hover:not(:disabled) { background: var(--surface-2); }
.chat-note-row:disabled { color: var(--muted); cursor: default; }
.chat-note-row > .icon { color: var(--muted); }
.chat-note-row .tick { margin-top: 0; }
.chat-note-row.on .tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chat-note-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-note-when { flex: none; color: var(--muted); font-size: 12.5px; }

@media (min-width: 900px) {
  .chat-app { grid-template-columns: 300px minmax(0, 1fr); }
  .chat-app .chat-side, .chat-app.showing-chat .chat-side { display: flex; padding: 0 10px 24px; border-right: 1px solid var(--line); background: var(--bg); }
  .chat-app .chat-pane, .chat-app.showing-chat .chat-pane { display: flex; background: var(--surface); }
  .chat-side-head { min-height: 0; padding: 14px 6px 10px; }
  .chat-side-head h1 { font: 600 22px/28px var(--font-display); letter-spacing: -.015em; }
  .chat-side-head .btn { margin-left: auto; }
  /* beside the chat's round Send (the screen's main button), New chat is the second one: .btn.tonal's look, the same
     four rules (test_vault_web.py's test_new_chat_on_a_wide_screen_looks_like_the_tonal_button keeps them so) */
  .chat-side-head .btn.primary { background: light-dark(var(--primary), var(--accent-soft)); color: light-dark(var(--on-primary), var(--accent-ink)); }
  :where(:root[data-theme="dark"]) .chat-side-head .btn.primary { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-line) 60%, transparent); }
  .chat-side-head .btn.primary:hover:not(:disabled) { background: light-dark(var(--primary-hover), color-mix(in oklab, var(--accent-soft) 84%, var(--accent-line))); }
  .chat-side-head .btn.primary:active:not(:disabled) { background: light-dark(var(--primary-press), color-mix(in oklab, var(--accent-soft) 72%, var(--accent-line))); }
  .chat-back { display: none; }
  .chat-head { background: var(--surface); }
  .chat-composer { background: var(--surface); padding: 6px 20px 16px; }
}

/* Send to / Dictation (1.8) */

/* dictating: the words not final yet in a small pill just above the tools (under them on a wide screen), never in
   the note itself; the Dictate tool shows pressed (.tool-btn.on) while it listens */
.dictate-pill {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 5; width: max-content;
  max-width: calc(100% - 24px); margin: 0 auto; display: flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 3px 4px 3px 12px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--card);
  box-shadow: var(--shadow-2); color: var(--muted); font: 500 13px/18px var(--font);
  animation: rise var(--d-3) var(--ease-out);
}
.dictate-pill.heard { color: var(--text-2); }
.dictate-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); animation: nt-breathe 2.4s ease-in-out infinite; }
.dictate-pill[data-state=wait] .dictate-dot { background: var(--faint); animation: none; }
.dictate-words { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dictate-stop {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; flex: none;
  border: none; border-radius: var(--r-full); background: none; color: var(--muted);
}
.dictate-stop::after { content: ""; position: absolute; inset: -8px; }
.dictate-stop:hover { background: var(--surface-2); color: var(--text); }
.dictate-stop .icon { width: 16px; height: 16px; }
@media (min-width: 900px) {
  .pane .dictate-pill { bottom: auto; top: calc(100% + 8px); }
}

/* Invites / Feedback (1.8) */
.invite-what { margin-top: 0; }
.invite-code-box { flex: 1; min-width: 200px; display: grid; gap: 6px; }
.invite-code-box .label { margin: 0; }
.invite-code-box .hint { margin: 0; }
.invite-code {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); color: var(--text);
  font: 600 24px/32px ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace; letter-spacing: .06em;
  text-align: center; user-select: all; overflow-wrap: anywhere;
}
/* Join QR codes (1.11, js/access.js's joinSheet): big enough to scan from another phone, never wider than the screen */
.join-connect { justify-content: center; }
.join-qr-box { flex: none; width: min(100%, 320px); }
.join-qr-box .qr { width: 100%; }
.join-qr-box .qr svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.join-blank {
  display: grid; place-content: center; justify-items: center; gap: 10px; width: 100%; aspect-ratio: 1;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--muted); text-align: center;
}
.join-blank .icon { width: 28px; height: 28px; }
.join-about { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.join-about p { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.join-about .join-left { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.join-buttons { justify-content: center; margin-top: 12px; }
.feedback-kinds { margin: 6px 0 10px; }
.feedback-text { min-height: 140px; }
.feedback-count { display: block; text-align: right; color: var(--muted); font-size: 12.5px; min-height: 18px; font-variant-numeric: tabular-nums; }

/* Joining (1.10, js/welcome.js): one step a screen, dots for how far along */
.welcome-dots { display: flex; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.welcome-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background var(--d-2, .2s) var(--ease-out), width var(--d-2, .2s) var(--ease-out); }
.welcome-dots span[data-state=done] { background: var(--accent-line); }
.welcome-dots span[data-state=now] { width: 22px; border-radius: var(--r-full); background: var(--accent); }
.welcome-manual { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 6px; }
.welcome-manual[hidden] { display: none; }
.welcome-status { color: var(--text-2); text-align: center; margin: 6px 0 0; min-height: 1em; }
.welcome-status:empty { display: none; }
.welcome-age { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--text); font-size: 13.5px; line-height: 20px; }
.welcome-age .icon { flex: none; width: 18px; height: 18px; color: var(--warn); margin-top: 1px; }
.welcome-kept { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text-2); font-size: 13.5px; line-height: 20px; }
.welcome-kept .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
a.btn { text-decoration: none; }  /* (start.js's "Open in Chrome": a link, for Android's intent://) */
.welcome-ios { display: grid; gap: 8px; justify-items: start; margin: 12px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.welcome-ios p { margin: 0; color: var(--text-2); }
.welcome-summary { list-style: none; padding: 0; margin: 10px 0 4px; display: grid; gap: 10px; }
.welcome-summary li { display: flex; gap: 10px; align-items: center; }
.welcome-summary li .icon { flex: none; width: 20px; height: 20px; }
.welcome-summary li[data-ok=yes] .icon { color: var(--ok); }
.welcome-summary li[data-ok=no] { color: var(--muted); }
.gate-box .link-btn.welcome-skip { margin-top: 4px; min-height: 44px; }
.setting.install-how .steps { margin: 6px 0 2px; }

/* The owner's Stats (1.10, js/access.js) */
.stats-people { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 1px; border-top: 1px solid var(--line-soft); }
.stats-people li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.stats-people li strong { font-weight: 600; }
.stats-people li span { color: var(--muted); font-size: 13.5px; line-height: 20px; overflow-wrap: anywhere; }
.stats-privacy { margin: 10px 0 0; }
.setting-buttons.stats-foot { justify-content: space-between; align-items: center; }

/* Updates for everyone (1.12, js/news.js): the pop-up with its poll and note, the owner's composer, Settings' card */
.news-sheet .sheet-head { align-items: flex-start; }
.news-sheet .sheet-head h2 { white-space: normal; overflow-wrap: anywhere; font: 600 19px/26px var(--font); letter-spacing: -.01em; }
.sheet-body > .news-from { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 20px; overflow-wrap: anywhere; }
.sheet-body > .news-count { margin: 0 0 8px; color: var(--accent-ink); font: 600 12.5px/18px var(--font); }
.news-text { margin: 4px 0 6px; }
.news-text .read-body, .news-note-body .read-body { font-size: 15px; line-height: 23px; }
.news-poll { display: grid; gap: 8px; margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.news-question { margin: 0 0 2px; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.news-option {
  display: grid; gap: 7px; width: 100%; min-height: 48px; padding: 11px 14px; text-align: left;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--card); color: var(--text);
  transition: background var(--d-1), border-color var(--d-1);
}
.news-option:hover:not(:disabled) { background: var(--surface-2); }
.news-option:disabled { cursor: default; }
.news-option.voted { border-color: var(--accent); background: var(--accent-wash); }
.news-option-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.news-option-text { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.news-voted { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--accent-ink); font: 600 12.5px/16px var(--font); }
.news-voted .icon { width: 14px; height: 14px; }
.news-tally { flex: none; color: var(--text-2); font: 500 13px/16px var(--font); font-variant-numeric: tabular-nums; }
.news-bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.news-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s var(--ease-out); }
.news-poll-hint { margin: 0; }
.news-note {
  display: grid; gap: 6px; margin: 14px 0 4px; padding: 12px 14px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg);
}
.news-note-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.news-note-head .icon { color: var(--muted); }
.news-note-head strong { min-width: 0; overflow-wrap: anywhere; }
.news-note-body { max-height: 184px; overflow: hidden; }
.news-note-more { margin: 0; }
.setting-buttons.news-note-buttons { padding: 4px 0 0; }
.news-message { min-height: 104px; }
.setting-buttons.news-compose-add { padding: 14px 0 4px; }
.news-compose-poll:not(:empty), .news-compose-note:not(:empty) {
  display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); min-width: 0;
}
.news-compose-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.news-compose-poll > .btn { justify-self: start; }
.news-answers { display: grid; gap: 8px; }
.news-answer { display: flex; align-items: center; gap: 4px; min-width: 0; }
.news-answer .field { flex: 1; min-width: 0; }
.news-results-label { margin: 4px 0 0; }
.segmented.news-results { width: 100%; }
.news-results button { min-width: 0; padding: 6px 10px; white-space: normal; line-height: 18px; text-align: center; }
.news-pick-list { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.news-pick-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px;
  border: none; border-radius: var(--r-md); background: none; color: var(--text); text-align: left;
}
.news-pick-item:hover { background: var(--surface-2); }
.news-pick-item .icon { color: var(--muted); }
.news-pick-item span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-chosen {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 4px 4px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
}
.news-chosen .icon { color: var(--muted); }
.news-chosen strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-chosen .icon-btn .icon { color: inherit; }
.setting.news-row { gap: 8px; }
.news-open {
  flex: 1; min-width: 0; display: block; margin: -6px 0; padding: 6px 0; border: none; border-radius: var(--r-sm);
  background: none; color: inherit; text-align: left;
}
.news-open:hover strong { color: var(--accent-ink); }

/* ---------------------------------------------------------------- reading aids (js/reading.js)

   Dyslexia-friendly text (html[data-reading]): a reading font, more room between letters, words and lines, a soft
   page colour and slightly softer letters, in reading text only: a note (its boxes and every copy of their words, its
   Read view), flash cards, Chat's answers and announcements. A box and its copies (.block-field > *: the box, the
   copy under it, the one over it, the formatted one and the measuring one) all get exactly the same, so every letter
   still lies just where the box puts it. Never in code. */
:root { --reading-font: var(--font); --reading-ls: .05em; --reading-ws: .16em; --reading-lh: 1.7; --tint: var(--page); --quick: var(--quick-blue); }
:root[data-reading-font="lexend"] { --reading-font: "Lexend", var(--font); }
:root[data-reading-font="opendyslexic"] { --reading-font: "OpenDyslexic", var(--font); }
:root[data-reading-tint="cream"] { --tint: var(--tint-cream); }
:root[data-reading-tint="peach"] { --tint: var(--tint-peach); }
:root[data-reading-tint="mint"] { --tint: var(--tint-mint); }
:root[data-reading-tint="sky"] { --tint: var(--tint-sky); }
:root[data-reading-tint="lilac"] { --tint: var(--tint-lilac); }
:root[data-quick="blue"] { --quick: var(--quick-blue); }
:root[data-quick="yellow"] { --quick: var(--quick-yellow); }
:root[data-quick="green"] { --quick: var(--quick-green); }
:root[data-quick="pink"] { --quick: var(--quick-pink); }
:root[data-quick="purple"] { --quick: var(--quick-purple); }

html[data-reading] .blocks .block-field > *,
html[data-reading] :is(.read-body, .read-body *:not(code, pre, pre *, .read-code-span)),
html[data-reading] :is(.note-title, .flash-words, .learn-term, .learn-option-text, .reading-sample) {
  font-family: var(--reading-font); letter-spacing: var(--reading-ls); word-spacing: var(--reading-ws); line-height: var(--reading-lh);
}
/* softer letters where notes, cards and answers are read */
html[data-reading] :is(.editor, .flash-card, .learn-card, .learn-options, .chat-md, .news-text, .news-note-body, .reading-try) { --text: var(--reading-text); }
/* italics stand upright (slanted letters are harder to read), in the accent colour so they still stand out */
html[data-reading] :is(.read-body, .block-preview, .flash-words, .learn-term) :is(em, i) { font-style: normal; color: var(--accent-ink); }
/* the page colour: the note's whole page (its tools too: they're on --page), the cards and the answers */
html[data-reading-tint] .editor { --page: var(--tint); }
html[data-reading-tint] :is(.flash-card:not(.flipped), .learn-card) { background-color: var(--tint); }
html[data-reading-tint] :is(.chat-md, .news-text > .read-body, .reading-try) { background-color: var(--tint); border-radius: var(--r-md); padding: 8px 12px; }

/* The reading ruler: a soft band one line high in the Read view (the line under the pointer, or the one last
   pressed), behind the words, never in the way of a press. Only while dyslexia-friendly text has it on. */
.read-view { position: relative; isolation: isolate; }
.reading-ruler {
  position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; border-radius: 6px;
  background: color-mix(in srgb, light-dark(var(--accent), var(--accent-3)) 13%, transparent);  /* (dark: the iris step) */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, light-dark(var(--accent), var(--accent-3)) 22%, transparent);
  transition: top var(--d-1) var(--ease-out);
}
html:not([data-reading-ruler]) .reading-ruler { display: none; }

/* Quick read (html[data-quick]): the first letters of each word drawn heavier (an outline round the letters, as the
   editor draws **bold**: never a wider letter, so nothing moves) on a soft colour (a shadow past its edges, never
   padding). In the box being written in, its copies draw them: the colour under the box (.shade-q), the heavier
   letters over it (.lt-q). */
.quick-lead {
  background: var(--quick); box-shadow: 0 0 0 1px var(--quick); border-radius: 2px; -webkit-text-stroke: .045em currentColor;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.blank-shade .shade-q { background: var(--quick); box-shadow: 0 0 0 1px var(--quick); border-radius: 2px; }
.block-letters .lt-q { -webkit-text-stroke: .045em var(--ink); }
/* (in a **bold** word, on top of the bold's own outline: never lighter than the rest of its word) */
.block-letters .lt-b .lt-q { -webkit-text-stroke-width: .095em; }
/* Quick read's colour switched off (html[data-quick-plain]): just the heavier letters, no colour behind them */
html[data-quick-plain] :is(.quick-lead, .blank-shade .shade-q) { background: none; box-shadow: none; }

/* Settings > Appearance > Reading: the colour choices (each a dot of its colour and its name), wrapping on a phone,
   and a few words drawn the way notes are now */
.setting.setting-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.swatch {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 8px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--card); color: var(--text-2); font: 500 13.5px/1 var(--font);
}
.swatch:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text); }
.swatch[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); font-weight: 600; }
.swatch-dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); flex: none; }
.swatch-dot[data-dot="tint-none"] { background: var(--page); }
.swatch-dot[data-dot="tint-cream"] { background: var(--tint-cream); }
.swatch-dot[data-dot="tint-peach"] { background: var(--tint-peach); }
.swatch-dot[data-dot="tint-mint"] { background: var(--tint-mint); }
.swatch-dot[data-dot="tint-sky"] { background: var(--tint-sky); }
.swatch-dot[data-dot="tint-lilac"] { background: var(--tint-lilac); }
.swatch-dot[data-dot="quick-blue"] { background: var(--quick-blue); }
.swatch-dot[data-dot="quick-yellow"] { background: var(--quick-yellow); }
.swatch-dot[data-dot="quick-green"] { background: var(--quick-green); }
.swatch-dot[data-dot="quick-pink"] { background: var(--quick-pink); }
.swatch-dot[data-dot="quick-purple"] { background: var(--quick-purple); }
@media (pointer: coarse) { .swatch { min-height: 44px; } }
.reading-try { display: block; }
.reading-sample { margin: 0; color: var(--text); font-size: 16px; line-height: 26px; overflow-wrap: anywhere; }

/* a switch in a menu (a note's ⋯: Quick read, dyslexia-friendly text) says whether it's on */
.menu-item .menu-state { margin-left: auto; padding-left: 16px; color: var(--muted); font-size: 13px; }
.menu-item[aria-checked="true"] .menu-state { color: var(--accent-ink); font-weight: 600; }

/* ------------------------------------------------------------ the study loop first (1.19)

   The welcome (js/welcome.js): what Wefty does in three steps, the classes as chips, and a test's class and day.
   Today's "Start here" (js/starthere.js): one calm card with the next step, its one solid iris button (the tests' and
   flash cards' go tonal while it shows), the loop in three words, and the free AI's setup when there's no key yet.
   Empty lists (Notes, Flash cards, Chat) point at the loop in one line. */
.welcome-loop { list-style: none; padding: 0; margin: 10px 0 2px; display: grid; gap: 10px; }
.welcome-loop li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 1px 0 var(--edge-hi); }
.loop-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--accent-wash);
  color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.loop-ic .icon { width: 24px; height: 24px; }
.loop-text { display: grid; gap: 2px; min-width: 0; }
.loop-text strong { font: 600 15px/21px var(--font); color: var(--text); }
.loop-text span { color: var(--text-2); font: 400 14px/20px var(--font); }
.gate-box > .welcome-setup-hint { text-align: center; margin: 2px 0 0; }
.gate-box > .welcome-next { text-align: center; margin: 4px 0 0; }
.welcome-subjects { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 4px; }
.subject-chip { max-width: 100%; }
.subject-chip > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.subject-chip .emo { font: 15px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
@media (pointer: coarse) { .subject-chip { height: 40px; } }
.welcome-own { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 6px; }
.gate-box > div.label { margin-top: 10px; }
.welcome-day { margin-top: 6px; }

.start-here { margin-top: 16px; }
.start-box { padding: 14px 16px 16px; }
.start-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -8px 4px 0; }
.start-label { margin: 0; color: var(--accent-ink); font: 600 13px/18px var(--font); letter-spacing: .01em; }
.start-close { flex: none; }
@media (pointer: coarse) { .start-close { width: 44px; height: 44px; } }
.start-next { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
/* (a phone: the words get the card's whole width; the icon is in the button) */
@media (max-width: 479px) { .start-next { grid-template-columns: minmax(0, 1fr); } .start-ic.tile-ic { display: none; } }
.start-ic.tile-ic { width: 44px; height: 44px; border-radius: 13px; }
.start-ic .icon { width: 24px; height: 24px; }
.start-text { display: grid; gap: 4px; min-width: 0; }
.start-text h2 { margin: 0; color: var(--text); font: 600 18px/24px var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.start-text p { margin: 0; color: var(--text-2); font: 400 14px/20px var(--font); max-width: 640px; }
.start-why { margin: 10px 0 0; }
.start-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.start-acts .btn { min-height: 44px; }
@media (max-width: 899px) { .start-acts .btn { flex: 1 1 auto; } }
.start-box > .start-ai-note { margin: 8px 0 0; }
.start-loop { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--line-soft); color: var(--muted); font: 500 13px/18px var(--font); }
.start-loop li { display: inline-flex; align-items: center; gap: 6px; }
.start-n { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong);
  font: 600 11px/1 var(--font); font-variant-numeric: tabular-nums; }
.start-loop li.now { color: var(--text); font-weight: 600; }
.start-loop li.now .start-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.start-ai { display: grid; justify-items: start; gap: 8px; margin-top: 12px; padding: 12px; border-radius: var(--r-md);
  background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.start-ai > p:first-child { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--text); font: 500 14px/20px var(--font); }
.start-ai > p:first-child .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent-ink); }
.start-ai > .start-ai-note { margin: 0; }
.start-ai .btn { min-height: 40px; }
@media (pointer: coarse) { .start-ai .btn { min-height: 44px; } }
/* (a phone without an AI key yet: the AI's box is the card's second ask, so the quiet second step and the loop in
   three words step aside, and Quick actions stay on the first screen) */
@media (max-width: 479px) { .start-box.no-key .start-acts .btn.quiet, .start-box.no-key .start-loop { display: none; } }

.empty .loop-line { max-width: 320px; }
.loop-line .link-btn.loop-go { display: inline; padding: 0; min-height: 0; }
@media (pointer: coarse) { .loop-line .link-btn.loop-go { display: inline-block; padding: 12px 4px; } }
.chat-empty .chat-empty-loop { color: var(--text-2); font-size: 13.5px; line-height: 20px; }

/* Notifications (1.19, js/push.js): Settings > Notifications' times and quiet hours, and Today's one offer after the
   first study session */
.push-time { width: 128px; min-height: 40px; padding: 8px 10px; flex: none; }
.push-pair { display: flex; align-items: center; gap: 12px; flex: none; }
.push-quiet { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 0 12px; }
.push-quiet .label { margin: 0; grid-auto-flow: column; align-items: center; gap: 8px; }
.warn-text { color: var(--warn); margin: 0 0 10px; }
.push-steps { margin: 0 0 12px; }
.push-trouble { margin: 0 0 10px; }
@media (max-width: 420px) {
  .setting:has(> .push-pair) { flex-wrap: wrap; }
  .setting:has(> .push-pair) > .push-pair { margin-left: auto; }
}
@media (pointer: coarse) { .push-time { min-height: 44px; } }
.push-offer { margin-top: 24px; }
.push-offer-box { padding: 14px 16px; display: grid; gap: 12px; }
.push-offer-top { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.push-offer-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); }
.push-offer-icon svg { width: 20px; height: 20px; }
.push-offer-words { min-width: 0; }
.push-offer-words h2 { margin: 0; color: var(--text); font: 600 16px/22px var(--font); }
.push-offer-words p { margin: 2px 0 0; color: var(--text-2); font: 400 14px/20px var(--font); overflow-wrap: anywhere; }
.push-offer-go { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
@media (pointer: coarse) { .push-offer-go .btn { min-height: 44px; } }

/* ==== 1.19: reasons to come back ==== */
/* The study streak (js/streak.js): a small chip beside the greeting ("🔥 6 days"; first among the counts when wide),
   a line at the end of a study go, and its sheet with this week's days. Calm: the card's colours, never a warning. */
.streak-fire { font-size: 15px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.streak-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 32px; padding: 0 12px 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--card); box-shadow: inset 0 1px 0 var(--edge-hi);
  color: var(--text); font: 600 14px/20px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.streak-chip::after { content: ""; position: absolute; inset: -6px -2px; }  /* (44 px tall for a finger) */
@media (hover: hover) { .streak-chip:hover { border-color: var(--line-strong); } }
.today-greet > .streak-chip { margin-bottom: 2px; }
.today-counts .streak-chip { min-height: 28px; padding: 0 10px 0 8px; }
.study-end .study-streak {
  display: inline-flex; align-items: center; gap: 8px; max-width: none; margin: 6px 0 2px; padding: 6px 14px;
  border-radius: var(--r-full); background: var(--warn-soft); color: var(--text); font-weight: 600;
}
.study-end .study-streak.fresh { animation: streak-in .5s var(--ease-spring) both; }
@keyframes streak-in { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .study-end .study-streak.fresh { animation: none; } }
@media (forced-colors: active) { .study-end .study-streak, .streak-chip { border: 1px solid CanvasText; } }
.sheet-body > .streak-big {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 14px; color: var(--text);
  font: 600 24px/30px var(--font-display); letter-spacing: -.01em;
}
.streak-big .streak-fire { font-size: 26px; }
.streak-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.streak-day { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.streak-dot {
  display: grid; place-items: center; width: 100%; max-width: 36px; aspect-ratio: 1; border-radius: 50%;
  background: var(--surface-2); color: var(--muted); font: 600 16px/1 var(--font);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", var(--font);
}
.streak-day[data-state=done] .streak-dot { background: var(--warn-soft); }
.streak-day[data-state=rest] .streak-dot { background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.streak-day[data-state=today] .streak-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.streak-day[data-state=later] .streak-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.streak-name { color: var(--muted); font: 600 12px/16px var(--font); }

/* Today's cards of their own (no heading over them): the week's story on Sundays and Mondays (js/week.js), and how a
   test went (js/checkin.js). */
.today-sec.today-weekly, .today-sec.today-checkin-sec { margin-top: 20px; }
.week-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0 12px; padding: 14px 6px 14px 16px; }
.week-card-mark { display: grid; padding-top: 2px; }
.week-card-text { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.week-card-text h2 { margin: 0; color: var(--text); font: 600 15.5px/22px var(--font); overflow-wrap: anywhere; }
.week-card-text p { margin: 0 0 8px; color: var(--muted); font: 500 13.5px/20px var(--font); overflow-wrap: anywhere; }
.week-card-x { margin: -6px 0 0; }
@media (max-width: 359px) { .week-card { grid-template-columns: minmax(0, 1fr) auto; } .week-card-mark { display: none; } }
.today-checkin { padding: 14px 6px 14px 16px; }
.checkin-head { display: flex; align-items: flex-start; gap: 4px; }
.checkin-text { flex: 1; min-width: 0; padding-top: 2px; }
.checkin-text h2 { margin: 0; color: var(--text); font: 600 16px/22px var(--font); overflow-wrap: anywhere; }
.checkin-text p { margin: 2px 0 0; color: var(--muted); font: 500 13.5px/20px var(--font); }
.checkin-x { flex: none; margin: -6px 0 0; }
.checkin-moods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 10px 0 0; }
.checkin-mood {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 68px; padding: 8px 4px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: transparent; color: var(--text); font: 600 13.5px/18px var(--font);
}
@media (hover: hover) { .checkin-mood:hover { border-color: var(--line-strong); background: color-mix(in oklab, var(--text) 4%, transparent); } }
.checkin-face { font-size: 26px; line-height: 30px; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.checkin-word { max-width: 100%; overflow-wrap: anywhere; }
.today-checkin.answered { padding-right: 16px; }
.checkin-top { display: flex; align-items: flex-start; gap: 12px; }
.checkin-big { flex: none; font-size: 32px; line-height: 38px; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.checkin-said { flex: 1; min-width: 0; margin: 0; padding-top: 6px; color: var(--text); font: 500 15px/22px var(--font); overflow-wrap: anywhere; }
.checkin-go { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.checkin-go .btn { min-height: 44px; white-space: normal; text-align: center; }
@media (max-width: 419px) { .checkin-go .btn { flex: 1 1 auto; } }
/* After a test (1.19.11): whether its flash cards keep coming. On its own, or under how it went. */
.today-rest { padding: 14px 16px; }
.today-sec.today-rest-sec { margin-top: 20px; }
.checkin-text.checkin-rest { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.checkin-text h3 { margin: 0; color: var(--text); font: 600 15px/21px var(--font); overflow-wrap: anywhere; }
.checkin-rest-go { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.checkin-rest-go .btn { min-height: 44px; white-space: normal; text-align: center; }
@media (max-width: 419px) { .checkin-rest-go .btn { flex: 1 1 0; } }

/* The week's picture in its sheet (js/week.js): the picture itself, which week, a first name or not. */
.week-frame { display: grid; place-items: center; margin: 4px 0 12px; }
.week-shot {
  display: block; height: min(48vh, 440px); height: min(48dvh, 440px); max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain;
  border-radius: var(--r-lg); background: #100f20; box-shadow: var(--shadow-2); transition: opacity var(--d-2);
}
.week-frame[aria-busy="true"] .week-shot { opacity: .55; }
.week-controls > .week-empty { margin: -4px 0 12px; }
.week-controls > .week-private { margin: 8px 0 0; text-align: center; }
@media (min-width: 700px) {
  .week-sheet .sheet-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 24px; }
  .week-sheet .week-frame { margin: 4px 0; }
  .week-sheet .week-shot { height: min(62vh, 440px); height: min(62dvh, 440px); }
  .week-controls > .week-private { text-align: left; }
}
.segmented.week-which { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0 0 8px; }
.week-name { display: grid; gap: 8px; margin: 0 0 4px; }
.week-name-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; cursor: pointer; }
.week-name-text { display: grid; min-width: 0; }
.week-name-text strong { color: var(--text); font: 600 15px/20px var(--font); }
.week-name-text span { color: var(--muted); font: 500 13px/18px var(--font); }

/* Today's quick actions, five in a row on a small phone (or bigger text): the icons a little smaller, so each fits its
   fifth (1.19: Snap) */
@media (max-width: 359px) {
  .today-tile .tile-ic, .today-tile.big .tile-ic { width: 42px; height: 42px; border-radius: 13px; }
  .today-tile .tile-ic .icon, .today-tile.big .tile-ic .icon { width: 20px; height: 20px; }
}
@media (max-width: 299px) {
  .today-tiles { gap: 2px; }
  .today-tile, .today-tile.big { padding-left: 0; padding-right: 0; }
  .today-tile .tile-ic, .today-tile.big .tile-ic { width: 36px; height: 36px; border-radius: 11px; }
  .today-tile .tile-label, .today-tile.big .tile-label { font-size: 11.5px; line-height: 15px; }
}

/* -- capture (1.19, js/capture.js): Snap a page's sheet (the photos along the top, then reading, the note to check or
   what went wrong), the share sheet's tidied card and where it goes, what's next after Save to Wefty, the note's
   "Read this page" chip, and Share > Clipboard's way in on an iPhone */
.sheet.cap-sheet { max-width: 640px; }
.cap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.cap-pages { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 4px; scrollbar-width: none; }
.cap-pages::-webkit-scrollbar { display: none; }
.cap-page {
  position: relative; flex: none; width: 64px; height: 84px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
}
.cap-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-pdf { display: grid; place-items: center; align-content: center; gap: 4px; height: 100%; color: var(--text-2); font: 600 12px/1 var(--font); }
.cap-page-n {
  position: absolute; left: 4px; bottom: 4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  background: color-mix(in srgb, var(--text) 72%, transparent); color: var(--bg); font: 700 11px/18px var(--font); text-align: center;
}
.cap-page .cap-page-out {
  position: absolute; top: 2px; right: 2px; width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 0; border-radius: 15px;
  background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 0 0 1px var(--line);
}
.cap-page .cap-page-out .icon { width: 15px; height: 15px; }
.cap-add {
  flex: none; display: grid; place-items: center; align-content: center; gap: 4px; width: 64px; height: 84px; padding: 4px;
  border: 1.5px dashed var(--line-strong); border-radius: 10px; background: none; color: var(--accent-ink);
  font: 600 11.5px/14px var(--font); text-align: center;
}
.cap-add:hover { background: var(--accent-wash); border-color: var(--accent-line); }
.cap-add .icon { width: 20px; height: 20px; }
.sheet-body > .cap .cap-state { padding: 16px 0 8px; }
.cap-check { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.cap-check > .label:first-child { margin-top: 0; }
.cap-title.field { font: 600 17px/24px var(--font); }
.cap-words-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.cap-words-head .label { margin: 0; }
.cap-edit.link-btn { padding: 8px 0; min-height: 40px; }
.cap-preview {
  max-height: 40vh; max-height: 40dvh; overflow: auto; overscroll-behavior: contain; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--page);
}
.cap-preview .read-body { font-size: 15px; line-height: 23px; }
textarea.field.cap-words { min-height: 200px; max-height: 50vh; resize: vertical; font: 400 15px/22px var(--font); field-sizing: content; }
.cap-unclear.hint { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; text-align: left; color: var(--text-2); }
.cap-unclear .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--warn); }
.cap-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 10px; }
.cap-where { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 48px; }
.cap-where-label { flex: none; color: var(--text-2); font: 600 14px/20px var(--font); }
.cap-where select.field { flex: 1; min-width: 0; }
.cap-cards { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--text); font: 500 15px/20px var(--font); cursor: pointer; }
.cap-share { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.sheet-body > .cap-share > .hint { margin: 0; text-align: left; }
.cap-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
:root[data-theme="dark"] .cap-card { box-shadow: inset 0 1px 0 var(--edge-hi); }
.cap-card-title { color: var(--text); font: 600 16px/22px var(--font); overflow-wrap: anywhere; }
.cap-link { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font: 500 13.5px/18px var(--font); }
.cap-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cap-link .icon { flex: none; width: 15px; height: 15px; }
.cap-card .shared-text { margin: 0; max-height: 160px; overflow: auto; overflow-wrap: anywhere; }
.cap-nexts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.cap-saved { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--text); font: 600 15px/21px var(--font); overflow-wrap: anywhere; min-width: 0; }
.cap-saved .icon { flex: none; color: var(--accent-ink); }
.cap-next {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--card); color: var(--text); text-align: left; min-width: 0;
}
.cap-next:hover { border-color: var(--line-strong); }
:root[data-theme="dark"] .cap-next { box-shadow: inset 0 1px 0 var(--edge-hi); }
.cap-next-ic {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: var(--accent-wash); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.cap-next-ic .icon { width: 19px; height: 19px; }
.cap-next-text { display: grid; gap: 1px; min-width: 0; }
.cap-next-text strong { font: 600 15px/20px var(--font); overflow-wrap: anywhere; }
.cap-next-text small { color: var(--muted); font: 500 13px/18px var(--font); overflow-wrap: anywhere; }
.cap-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.note-meta .cap-chip { color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-line); }
.cap-waiting { color: var(--muted); font: 500 12.5px/16px var(--font); }
.cap-paste-row { display: grid; gap: 8px; margin: 4px 0 12px; }
.cap-paste-row .hint { margin: 0; text-align: left; }
.cap-paste-row .btn { justify-self: start; }
@media (pointer: coarse) { .cap-page .cap-page-out::after { content: ""; position: absolute; inset: -7px; } }
/* the share sheet on a phone: its buttons in rows that fill the width, Save to Wefty last (under the thumb) */
@media (max-width: 699px) {
  .sheet:has(.cap-share) .sheet-actions > .btn { flex: 1 1 40%; min-height: 48px; }
}

/* The tour (1.19.6, js/tour.js): the screen dimmed round the real thing lit up (a hole whose shadow is the dim), a
   small card beside it that never covers it, and a calm one-time offer above the tabs. The app under it can't be
   tapped (the veil) while it shows. */
.tour { position: fixed; inset: 0; z-index: 97; }
.tour-safe {
  position: fixed; pointer-events: none; visibility: hidden;
  top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px);
}
.tour-veil { position: fixed; inset: 0; }
.tour-hole {
  position: fixed; top: 50%; left: 50%; width: 0; height: 0; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 200vmax light-dark(rgba(13, 14, 17, .58), rgba(0, 0, 0, .7));
}
.tour-card {
  position: fixed; top: 0; left: 0; box-sizing: border-box; width: min(360px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px 12px; border: 1px solid light-dark(var(--line), var(--line-strong)); border-radius: 14px;
  background: var(--raised); color: var(--text); box-shadow: var(--shadow-3);
}
.tour-card:focus { outline: none; }
.tour-count { margin: 0 0 4px; color: var(--muted); font: 500 12px/16px var(--font); letter-spacing: .02em; }
.tour-title { margin: 0; font: 600 17px/24px var(--font); overflow-wrap: anywhere; }
.tour-text { margin: 6px 0 0; color: var(--text-2); font: 400 15px/22px var(--font); overflow-wrap: anywhere; }
.tour-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tour-gap { flex: 1; }
.tour-foot .btn { min-height: 44px; min-width: 72px; }
.tour-skip { padding: 10px 4px; min-height: 44px; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .tour-hole { transition: top .25s var(--ease-out), left .25s var(--ease-out), width .25s var(--ease-out), height .25s var(--ease-out); }
  .tour-card { transition: top .25s var(--ease-out), left .25s var(--ease-out); }
  .tour { animation: tour-in .2s var(--ease-out); }
  .tour-offer { animation: tour-in var(--d-3) var(--ease-out); }
}
@keyframes tour-in { from { opacity: 0; } }
@media (forced-colors: active) { .tour-hole { outline: 3px solid Highlight; } }
.tour-offer {
  position: fixed; z-index: 52; left: 16px; right: 16px; margin: 0 auto; max-width: 440px; bottom: calc(84px + var(--safe-bottom));
  box-sizing: border-box; display: grid; grid-template-columns: 32px minmax(0, 1fr);
  align-items: center; gap: 4px 12px; padding: 12px 12px 12px 14px; border: 1px solid light-dark(var(--line), var(--line-strong));
  border-radius: 14px; background: var(--raised); color: var(--text); box-shadow: var(--shadow-3);
}
.tour-offer-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
.tour-offer p { margin: 0; font: 400 15px/21px var(--font); overflow-wrap: anywhere; }
.tour-offer-buttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tour-offer-buttons .btn { min-height: 44px; }
@media (min-width: 900px) { .tour-offer { left: auto; right: 24px; width: 400px; margin: 0; bottom: calc(24px + var(--safe-bottom)); } }