/* The app (app.js): what someone signed in uses. One sky behind everything (golden hour unless they chose another),
   and on it, floating: a bar with the four places (Home, Notebooks, Handwriting), search, New and their
   account; below it the page, its parts on sheets of paper. On a phone the places move to a bar along the bottom.

   Everything here is theirs to change in Make it yours (look.js puts the choices on <html>): the sky (data-sky), the
   colour of what's chosen (data-accent), the size of the text (data-text, read here as --ts), an easier font
   (data-font), stronger contrast (data-contrast) and stiller motion (data-motion). None of it needs choosing. */

:root {
  /* the colour of what's chosen: gold unless they pick another */
  --acc: #c18b26;
  --acc-hi: #e2b45a;
  --acc-ink: #6e4a0c;
  --acc-wash: rgba(214, 164, 72, 0.16);
  --acc-line: rgba(193, 139, 38, 0.55);
  --ts: 1;
  /* subjects */
  --sj-ink: #2c3a8c;
  --sj-sky: #3d86c6;
  --sj-gold: #c99a3a;
  --sj-rose: #d0708a;
  --sj-sage: #5f9473;
  --sj-plum: #8a63b5;
  --sj-coral: #e0714f;
  --sj-slate: #6b7385;
  /* due dates */
  --due-over: #c2413a;
  --due-today: #a8650f;
  --due-soon: #2d3d9a;
  /* paper the app's parts sit on */
  --sheet: #fffdfa;
  --sheet-2: #faf6f1;
  --sheet-edge: rgba(62, 44, 92, 0.1);
  --app-card: var(--sheet);
  --bar: color-mix(in srgb, #fffdfa 74%, transparent);
  --bar-edge: rgba(255, 255, 255, 0.82);
  --fs-xs: calc(12.5px * var(--ts));
  --fs-s: calc(13.5px * var(--ts));
  --fs-m: calc(15px * var(--ts));
  --fs-l: calc(17px * var(--ts));
  --fs-xl: calc(21px * var(--ts));
}
:root[data-accent="coral"] { --acc: #d9603f; --acc-hi: #f2987c; --acc-ink: #84290f; --acc-wash: rgba(224, 104, 74, 0.15); --acc-line: rgba(217, 96, 63, 0.5); }
:root[data-accent="rose"] { --acc: #cc4f79; --acc-hi: #ef8eb0; --acc-ink: #7a1a3c; --acc-wash: rgba(212, 90, 130, 0.14); --acc-line: rgba(204, 79, 121, 0.5); }
:root[data-accent="violet"] { --acc: #7656d4; --acc-hi: #a990f2; --acc-ink: #3a2588; --acc-wash: rgba(124, 92, 214, 0.14); --acc-line: rgba(118, 86, 212, 0.5); }
:root[data-accent="sky"] { --acc: #2f7fd0; --acc-hi: #7ab6f0; --acc-ink: #134678; --acc-wash: rgba(59, 134, 214, 0.14); --acc-line: rgba(47, 127, 208, 0.5); }
:root[data-accent="mint"] { --acc: #22917a; --acc-hi: #6fcfae; --acc-ink: #0c5442; --acc-wash: rgba(42, 157, 124, 0.15); --acc-line: rgba(34, 145, 122, 0.5); }
:root[data-text="l"] { --ts: 1.125; }
:root[data-text="xl"] { --ts: 1.25; }
:root[data-font="hyper"] {
  --font-body: "Atkinson Hyperlegible Next", "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* the account's skies (the cloud sea paints its own; these are the sky above it, and what shows before it) */
:root[data-sky="dawn"] {
  --sky-0: #c9b0d9; --sky-1: #e1bcd5; --sky-2: #f0c9d0; --sky-3: #fbd9cf; --sky-4: #ffe7d6; --horizon: #ffe0c4; --cloud-lit: #fff6f1;
}
:root[data-sky="day"] {
  --sky-0: #8eb0de; --sky-1: #a9c4e8; --sky-2: #c7d9ef; --sky-3: #e0e8f2; --sky-4: #f1ede6; --horizon: #f6ecdc; --cloud-lit: #ffffff;
}
:root[data-sky="dusk"] {
  --sky-0: #4b3f8f; --sky-1: #7a58a8; --sky-2: #b06aa8; --sky-3: #db8293; --sky-4: #f2a07a; --horizon: #f7b27e; --cloud-lit: #ffd9c4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acc: #e7bd68; --acc-hi: #f3d48e; --acc-ink: #f6dda2; --acc-wash: rgba(231, 189, 104, 0.16); --acc-line: rgba(231, 189, 104, 0.5);
    --sj-ink: #a9b6ff; --sj-sky: #7cc0ff; --sj-gold: #f0c66e; --sj-rose: #f0a0b6; --sj-sage: #8fd0a6; --sj-plum: #c3a4f0; --sj-coral: #ff9c7e; --sj-slate: #a3a9c0;
    --due-over: #ff8a7e; --due-today: #f0c66e; --due-soon: #a9b6ff;
    --sheet: #141634; --sheet-2: #1a1c40; --sheet-edge: rgba(200, 206, 255, 0.12);
    --bar: color-mix(in srgb, #10122e 72%, transparent);
    --bar-edge: rgba(200, 206, 255, 0.16);
  }
  :root:not([data-theme="light"])[data-accent="coral"] { --acc: #ff9c7e; --acc-hi: #ffb9a3; --acc-ink: #ffd1c2; --acc-wash: rgba(255, 156, 126, 0.15); }
  :root:not([data-theme="light"])[data-accent="rose"] { --acc: #f39bbb; --acc-hi: #f8bed3; --acc-ink: #fbd5e3; --acc-wash: rgba(243, 155, 187, 0.15); }
  :root:not([data-theme="light"])[data-accent="violet"] { --acc: #b8a1f7; --acc-hi: #d0c1fa; --acc-ink: #e2d8fc; --acc-wash: rgba(184, 161, 247, 0.16); }
  :root:not([data-theme="light"])[data-accent="sky"] { --acc: #84bff4; --acc-hi: #acd4f8; --acc-ink: #cfe6fb; --acc-wash: rgba(132, 191, 244, 0.15); }
  :root:not([data-theme="light"])[data-accent="mint"] { --acc: #79d6b7; --acc-hi: #a6e5cf; --acc-ink: #c9f0e2; --acc-wash: rgba(121, 214, 183, 0.15); }
}
:root[data-theme="dark"] {
  --acc: #e7bd68; --acc-hi: #f3d48e; --acc-ink: #f6dda2; --acc-wash: rgba(231, 189, 104, 0.16); --acc-line: rgba(231, 189, 104, 0.5);
  --sj-ink: #a9b6ff; --sj-sky: #7cc0ff; --sj-gold: #f0c66e; --sj-rose: #f0a0b6; --sj-sage: #8fd0a6; --sj-plum: #c3a4f0; --sj-coral: #ff9c7e; --sj-slate: #a3a9c0;
  --due-over: #ff8a7e; --due-today: #f0c66e; --due-soon: #a9b6ff;
  --sheet: #141634; --sheet-2: #1a1c40; --sheet-edge: rgba(200, 206, 255, 0.12);
  --bar: color-mix(in srgb, #10122e 72%, transparent);
  --bar-edge: rgba(200, 206, 255, 0.16);
}
:root[data-theme="dark"][data-accent="coral"] { --acc: #ff9c7e; --acc-hi: #ffb9a3; --acc-ink: #ffd1c2; --acc-wash: rgba(255, 156, 126, 0.15); }
:root[data-theme="dark"][data-accent="rose"] { --acc: #f39bbb; --acc-hi: #f8bed3; --acc-ink: #fbd5e3; --acc-wash: rgba(243, 155, 187, 0.15); }
:root[data-theme="dark"][data-accent="violet"] { --acc: #b8a1f7; --acc-hi: #d0c1fa; --acc-ink: #e2d8fc; --acc-wash: rgba(184, 161, 247, 0.16); }
:root[data-theme="dark"][data-accent="sky"] { --acc: #84bff4; --acc-hi: #acd4f8; --acc-ink: #cfe6fb; --acc-wash: rgba(132, 191, 244, 0.15); }
:root[data-theme="dark"][data-accent="mint"] { --acc: #79d6b7; --acc-hi: #a6e5cf; --acc-ink: #c9f0e2; --acc-wash: rgba(121, 214, 183, 0.15); }

/* stronger contrast: solid paper and firmer edges on the app's sheets and bar (base.css darkens the text and the
   hairlines, by day and by night) */
:root[data-contrast="high"] {
  --sheet-edge: rgba(26, 28, 51, 0.38);
  --bar: #fffdfa;
  --bar-edge: rgba(26, 28, 51, 0.3);
}
:root[data-contrast="high"][data-theme="dark"] {
  --sheet-edge: rgba(230, 232, 255, 0.42);
  --bar: #10122e;
  --bar-edge: rgba(230, 232, 255, 0.36);
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]) {
    --sheet-edge: rgba(230, 232, 255, 0.42);
    --bar: #10122e;
    --bar-edge: rgba(230, 232, 255, 0.36);
  }
}
/* (stiller motion, reduced transparency and the rest of Accessibility reach every page: base.css) */

/* the primary button's rim and glint, and the focus ring, in their colour (signed in only: the landing keeps gold) */
:root[data-accent] .btn-ink {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--acc) 62%, transparent),
    inset 0 1px 0 rgba(255, 240, 210, 0.26),
    0 2px 4px rgba(30, 20, 50, 0.18),
    0 14px 30px -12px rgba(30, 20, 60, 0.48),
    0 10px 40px -14px color-mix(in srgb, var(--acc) 45%, transparent);
}
:root[data-accent] .btn-ink .ico {
  color: var(--acc-hi);
}
:root[data-accent][data-theme="dark"] .btn-ink .ico {
  color: color-mix(in srgb, var(--acc) 70%, #3a2a08);
}
@media (prefers-color-scheme: dark) {
  :root[data-accent]:not([data-theme="light"]) .btn-ink .ico {
    color: color-mix(in srgb, var(--acc) 70%, #3a2a08);
  }
}
/* (an ink ring, readable on any sky, with a halo in their colour; text fields keep their own focus look: a ring
   round the field they sit in) */
:root[data-accent] :is(a, button, select, summary, [tabindex], input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 38%, transparent);
}
:root[data-accent][data-contrast="high"] :is(a, button, select, summary, [tabindex], input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible {
  outline: 3px solid var(--ink);
  box-shadow: 0 0 0 6px var(--acc-wash);
}

/* ------------------------------------------------------------------ the frame */
body.in-app {
  background: var(--sky-4);
}
body.in-app.grain::after {
  opacity: 0;
}
.app {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-size: var(--fs-m);
}
/* one sky, fixed behind every page */
.app-sky.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 22%, var(--sky-2) 44%, var(--sky-3) 62%, var(--sky-4) 76%, var(--horizon) 84%, var(--cloud-lit) 100%);
}
.app-sky::after {
  /* a breath of paper over the sky where the pages read: brighter in the middle of the window */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 50% 46%, color-mix(in srgb, var(--air) 34%, transparent), transparent 78%);
  pointer-events: none;
}
:root[data-sky="calm"] .app-sky {
  background: var(--air);
}
:root[data-sky="calm"] .app-sky canvas,
:root[data-sky="calm"] .app-sky::after {
  display: none;
}
:root[data-contrast="high"] .app-sky::after {
  background: color-mix(in srgb, var(--air) 40%, transparent);
}

/* the bar: floating on the sky, frosted once the page moves under it */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  height: 76px;
  padding: 0 clamp(16px, 3vw, 36px);
  transition: background var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.app-bar.scrolled {
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 1px 0 var(--sheet-edge), 0 10px 30px -22px rgba(40, 30, 80, 0.35);
}
.ab-brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 6px;
  border-radius: 14px;
  color: var(--ink);
}
.ab-brand .logo-slot {
  display: block;
  width: 92px;
  height: 40px;
}
.ab-brand .logo-slot svg,
.ab-brand .logo-slot canvas {
  width: 100%;
  height: 100%;
}
/* the four places: one pill of paper floating on the sky, the one you're in lifted out of it */
.ab-places {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: var(--bar);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--bar-edge), 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 32px -18px rgba(50, 36, 90, 0.4);
}
.ab-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  font-size: var(--fs-m);
  font-weight: 560;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-1), color var(--t-1), box-shadow var(--t-2) var(--ease);
}
.ab-tab .ico {
  width: 19px;
  height: 19px;
  flex: none;
}
.ab-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.ab-tab[aria-current="page"] {
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 2px 6px -2px rgba(50, 36, 90, 0.18), 0 8px 18px -10px rgba(50, 36, 90, 0.3);
}
.ab-tab[aria-current="page"] .ico {
  color: var(--acc);
}
.ab-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  color: #fff;
  background: var(--due-over);
  box-shadow: 0 0 0 2px var(--sheet);
}
.ab-badge:empty,
.ab-badge[hidden] {
  display: none;
}
.ab-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ab-search {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 8px 0 14px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-s);
  color: var(--ink-2);
  background: var(--bar);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--bar-edge), 0 10px 26px -18px rgba(50, 36, 90, 0.4);
  cursor: pointer;
}
.ab-search:hover {
  color: var(--ink);
}
.ab-search .ico {
  width: 18px;
  height: 18px;
}
.ab-search kbd {
  padding: 3px 7px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.ab-learning {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.ab-learning[hidden] {
  display: none;
}
.ab-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--acc) 30%, transparent);
  border-top-color: var(--acc);
  animation: ab-spin 0.9s linear infinite;
}
@keyframes ab-spin {
  to {
    transform: rotate(1turn);
  }
}
.ab-count {
  font-variant-numeric: tabular-nums;
  color: var(--acc-ink);
}
.ab-new {
  --h: 44px;
  padding: 0 18px 0 14px;
  font-size: var(--fs-m);
}
.ab-new .ico {
  width: 18px;
  height: 18px;
}
.ab-new:hover .ico {
  transform: rotate(90deg);
}
.ab-me {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.ab-me .acct-dot,
.app-tabs .acct-dot {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--acc-ink);
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--acc-hi) 70%, #fff), color-mix(in srgb, var(--acc) 55%, var(--acc-hi)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 6px 16px -8px color-mix(in srgb, var(--acc) 70%, transparent);
}
.ab-me .acct-dot .ico {
  width: 20px;
  height: 20px;
}
/* (at night the colour's ink is pale: the initial on the lit dot needs a dark one) */
:root[data-theme="dark"] .acct-dot {
  color: color-mix(in srgb, var(--acc) 22%, #140e02);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .acct-dot {
    color: color-mix(in srgb, var(--acc) 22%, #140e02);
  }
}
.ab-me:hover .acct-dot {
  filter: brightness(1.04);
}
.ab-sync {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 2px var(--sheet);
  opacity: 0;
  transition: opacity var(--t-2);
}
.ab-me[data-sync="syncing"] .ab-sync {
  opacity: 1;
  background: var(--acc);
  animation: ab-pulse 1.2s ease-in-out infinite;
}
.ab-me[data-sync="offline"] .ab-sync,
.ab-me[data-sync="error"] .ab-sync {
  opacity: 1;
  background: var(--warn);
}
@keyframes ab-pulse {
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
}

/* phones: the places along the bottom, New in the middle */
.app-tabs {
  display: none;
}

/* ------------------------------------------------------------------ pages */
.app-main {
  display: block;
  min-height: calc(100vh - 76px);
  outline: none;
}
.app-page {
  width: min(100% - 2 * clamp(16px, 4vw, 48px), 1180px);
  margin: 0 auto;
  padding: 8px 0 120px;
}
.grow {
  flex: 1;
}
.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}
.sec-head h2,
.pg-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--on-sky, var(--ink));
}
.sec-head h2 {
  font-size: calc(32px * var(--ts));
  line-height: 1.05;
}
.sec-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: background var(--t-1), color var(--t-1);
}
.sec-link .ico {
  width: 16px;
  height: 16px;
  transition: transform var(--t-2) var(--ease);
}
.sec-link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--sheet) 60%, transparent);
}
.sec-link:hover .ico {
  transform: translateX(2px);
}

/* a sheet of paper on the sky: what a card is */
.app-card {
  padding: 22px 22px 20px;
  border-radius: 24px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-2);
}
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.card-t {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(26px * var(--ts));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.card-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
:root[data-accent] .btn-quiet {
  background: color-mix(in srgb, var(--sheet) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--sheet-edge), var(--sh-1);
}
:root[data-accent] .btn-quiet:hover {
  background: var(--sheet);
}

/* subjects and due dates */
.sj-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sj-ink);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.sj-dot[data-c="sky"] { background: var(--sj-sky); }
.sj-dot[data-c="gold"] { background: var(--sj-gold); }
.sj-dot[data-c="rose"] { background: var(--sj-rose); }
.sj-dot[data-c="sage"] { background: var(--sj-sage); }
.sj-dot[data-c="plum"] { background: var(--sj-plum); }
.sj-dot[data-c="coral"] { background: var(--sj-coral); }
.sj-dot[data-c="slate"] { background: var(--sj-slate); }
/* a subject's colour as --sj, for whatever is in it */
[data-color="ink"] { --sj: var(--sj-ink); }
[data-color="sky"] { --sj: var(--sj-sky); }
[data-color="gold"] { --sj: var(--sj-gold); }
[data-color="rose"] { --sj: var(--sj-rose); }
[data-color="sage"] { --sj: var(--sj-sage); }
[data-color="plum"] { --sj: var(--sj-plum); }
[data-color="coral"] { --sj: var(--sj-coral); }
[data-color="slate"] { --sj: var(--sj-slate); }
.due-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 650;
  white-space: nowrap;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.due-chip[data-tone="over"] {
  color: var(--due-over);
  background: color-mix(in srgb, var(--due-over) 12%, transparent);
}
.due-chip[data-tone="today"] {
  color: var(--due-today);
  background: color-mix(in srgb, var(--due-today) 14%, transparent);
}
.due-chip[data-tone="soon"] {
  color: var(--due-soon);
  background: color-mix(in srgb, var(--due-soon) 11%, transparent);
}
.due-chip[data-tone="done"] {
  color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, transparent);
}

/* a quiet meter (today's allowance) */
.meter {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
.meter-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.meter-top b {
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.meter-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}
.meter-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--acc), var(--acc-hi));
}

/* an empty place says what to do */
.app-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 44px 24px;
  border-radius: 24px;
  text-align: center;
  background: color-mix(in srgb, var(--sheet) 70%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 9%, transparent);
}
.app-empty .ae-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 18px;
  color: var(--acc-ink);
  background: var(--acc-wash);
}
.app-empty .ae-ico svg {
  width: 24px;
  height: 24px;
}
.app-empty b {
  font-family: var(--font-display);
  font-size: calc(26px * var(--ts));
  font-weight: 400;
}
.app-empty p {
  max-width: 420px;
  margin: 0 0 8px;
  font-size: var(--fs-m);
  line-height: 1.5;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ Home */
.hm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
}
/* (a slot with nothing in it takes no row: an empty one between two gaps left a double gap under the ask box) */
.hm > :empty {
  display: none;
}
/* (a row that scrolls sideways must not widen the page: grid items are allowed to be narrower than their content) */
.hm > *,
.lib > *,
.app-page > * {
  min-width: 0;
}
.hm-hero {
  display: grid;
  justify-items: center;
  padding: clamp(12px, 5vh, 56px) 0 8px;
  text-align: center;
}
.hm-date {
  margin: 0;
  font-size: var(--fs-s);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-sky-2, var(--ink-2));
}
.hm-line {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 132px;
  margin: 6px 0 14px;
}
.hm-line-cv {
  display: block;
  max-width: 100%;
}
/* the homework box: a big sheet of paper floating on the sky */
.hm-ask {
  display: grid;
  gap: 4px;
  width: min(100%, 800px);
  padding: 10px 10px 10px;
  border-radius: 30px;
  text-align: left;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 2px 6px -2px rgba(50, 36, 90, 0.14), 0 30px 70px -30px rgba(70, 40, 110, 0.5), 0 12px 50px -24px color-mix(in srgb, var(--acc) 40%, transparent);
  transition: box-shadow var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.hm-ask:focus-within {
  box-shadow: 0 0 0 1.5px var(--acc-line), 0 0 0 6px var(--acc-wash), 0 30px 70px -30px rgba(70, 40, 110, 0.5);
}
.hm-ask.nudge {
  animation: ha-nudge 360ms var(--ease);
}
@keyframes ha-nudge {
  20%, 60% {
    transform: translateX(-6px);
  }
  40%, 80% {
    transform: translateX(6px);
  }
}
.ha-field {
  display: grid;
  gap: 10px;
  padding: 14px 16px 6px;
}
.ha-text {
  width: 100%;
  min-height: 34px;
  max-height: 220px;
  padding: 0;
  border: 0;
  resize: none;
  font: inherit;
  font-size: calc(21px * var(--ts));
  font-weight: 450;
  line-height: 1.45;
  color: var(--ink);
  background: transparent;
  outline: none;
}
.ha-text::placeholder {
  color: var(--ink-3);
  opacity: 0.9;
}
:root[data-accent] .ha-text:focus-visible {
  outline: none;
}
.ha-photo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 6px 6px 6px;
  border-radius: 16px;
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.ha-photo[hidden] {
  display: none;
}
.ha-photo img {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  object-fit: cover;
}
.ha-photo b {
  display: block;
  font-size: var(--fs-s);
}
.ha-photo small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.ha-photo-x {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
.ha-photo-x:hover {
  background: var(--hover);
}
.ha-photo-x svg {
  width: 16px;
  height: 16px;
}
.ha-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 0 8px;
}
.ha-chips,
.ha-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ha-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 560;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  cursor: pointer;
  transition: background var(--t-1), color var(--t-1), box-shadow var(--t-1);
}
.ha-chip[hidden] {
  display: none;
}
.ha-chip .ico {
  width: 17px;
  height: 17px;
}
.ha-chip:hover,
.ha-chip[aria-expanded="true"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.ha-chip.set {
  color: var(--ink);
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.ha-go .btn {
  --h: 46px;
}
.ha-ai {
  padding: 0 22px 0 18px;
}
.ha-ai .ico {
  width: 18px;
  height: 18px;
}
.ha-ai:hover .ico {
  transform: rotate(-12deg) scale(1.12);
}
.ha-mine {
  padding: 0 18px;
}
.ha-hint {
  margin: 14px 0 0;
  font-size: var(--fs-s);
  color: var(--on-sky-2, var(--ink-2));
}
/* the other ways in, small, under the box */
.hm-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
}
.hm-ways-t {
  margin-right: 4px;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--on-sky-2, var(--ink-2));
}
.hm-way {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 13px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 560;
  color: var(--ink);
  background: color-mix(in srgb, var(--sheet) 62%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--bar-edge), 0 8px 20px -16px rgba(50, 36, 90, 0.5);
  cursor: pointer;
  transition: background var(--t-1), transform var(--t-2) var(--ease);
}
.hm-way .ico {
  width: 17px;
  height: 17px;
  color: var(--ink-2);
}
.hm-way:hover {
  background: var(--sheet);
  transform: translateY(-1px);
}

/* get set up */
.hm-steps {
  padding: 22px 24px;
  border-radius: 26px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-2);
}
.st-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}
.st-intro {
  flex: 1;
}
.st-intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(28px * var(--ts));
  font-weight: 400;
}
.st-intro p {
  margin: 2px 0 0;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.st-bar {
  width: 140px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.st-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--acc), var(--acc-hi));
}
.st-hide {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
.st-hide:hover {
  background: var(--hover);
}
.st-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-step {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.st-step.next {
  background: var(--sheet);
  box-shadow: inset 0 0 0 1.5px var(--acc-line), 0 10px 24px -16px color-mix(in srgb, var(--acc) 60%, transparent);
}
.st-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.st-step.next .st-n {
  color: var(--acc-ink);
  background: var(--acc-wash);
}
.st-step.done .st-n {
  color: var(--good);
  background: color-mix(in srgb, var(--good) 13%, transparent);
}
.st-n svg {
  width: 16px;
  height: 16px;
}
.st-txt b {
  font-size: var(--fs-m);
}
.st-txt p {
  margin: 4px 0 0;
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--ink-2);
}
.st-step .btn {
  justify-self: start;
}
.st-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--good);
}
.st-done .ico {
  width: 16px;
  height: 16px;
}

/* up next: homework as cards along a row, the notebook's colour along the top */
.nx-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 14px;
  margin: -10px -10px 0;
  padding: 10px 10px 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 10px;
  scrollbar-width: thin;
}
.nx {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* (the card's width is the row's, never its longest notebook name's) */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-height: 170px;
  padding: 18px 16px 12px 18px;
  border-radius: 22px;
  scroll-snap-align: start;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-2);
  overflow: hidden;
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.nx::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--sj, color-mix(in srgb, var(--ink) 20%, transparent));
}
.nx:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-3);
}
.nx.is-done {
  opacity: 0.7;
}
.nx-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nx-sj {
  /* (a block, so a long notebook name ends in an ellipsis: a flex box can't show one) */
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nx-open {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 0;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  cursor: pointer;
}
.nx-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: var(--fs-l);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.nx-sj .sj-dot {
  margin-right: 7px;
  vertical-align: 0;
}
.nx-top .due-chip {
  flex: none;
}
.nx-open:hover .nx-title {
  text-decoration: underline;
  text-decoration-color: var(--acc-line);
  text-underline-offset: 4px;
}
.nx-snip {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--ink-2);
}
.nx-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -4px 0 -2px;
}
.nx-tick-t {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
}
.wk-ring {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  font-size: var(--fs-s);
  color: var(--ink-2);
  background: color-mix(in srgb, var(--sheet) 65%, transparent);
  box-shadow: inset 0 0 0 1px var(--bar-edge);
}
.wk-ring b {
  color: var(--ink);
}
.wk-svg svg {
  display: block;
  width: 26px;
  height: 26px;
  transform: rotate(-90deg);
}
.wk-track {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 12%, transparent);
  stroke-width: 4;
}
.wk-fill {
  fill: none;
  stroke: var(--acc);
  stroke-width: 4;
  stroke-linecap: round;
}
.hm-quiet-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--sheet) 70%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 8%, transparent);
}
.hm-quiet-card .ico {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--ink-3);
}
.hm-quiet-card p {
  margin: 0;
  font-size: var(--fs-m);
  color: var(--ink-2);
}

/* notebooks: covers on a shelf */
.nb-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--ts)), 1fr));
  gap: 18px;
}
.nb {
  --nb: var(--sj-ink);
  position: relative;
  display: block;
  aspect-ratio: 0.76;
  border-radius: 8px 18px 18px 8px;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(130% 90% at 15% 0%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, rgba(0, 0, 0, 0.03) 2px 4px),
    linear-gradient(160deg, color-mix(in srgb, var(--nb) 82%, #fff), var(--nb) 55%, color-mix(in srgb, var(--nb) 78%, #000));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    inset -3px 0 0 rgba(255, 255, 255, 0.14),
    0 2px 3px rgba(30, 20, 50, 0.16),
    0 16px 30px -16px rgba(40, 24, 80, 0.55),
    6px 6px 0 -1px var(--sheet-2),
    6px 6px 0 0 var(--sheet-edge);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.nb[data-color="ink"] { --nb: var(--sj-ink); }
.nb[data-color="sky"] { --nb: var(--sj-sky); }
.nb[data-color="gold"] { --nb: var(--sj-gold); }
.nb[data-color="rose"] { --nb: var(--sj-rose); }
.nb[data-color="sage"] { --nb: var(--sj-sage); }
.nb[data-color="plum"] { --nb: var(--sj-plum); }
.nb[data-color="coral"] { --nb: var(--sj-coral); }
.nb[data-color="slate"] { --nb: var(--sj-slate); }
.nb:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    inset -3px 0 0 rgba(255, 255, 255, 0.14),
    0 4px 6px rgba(30, 20, 50, 0.16),
    0 26px 40px -18px rgba(40, 24, 80, 0.6),
    6px 6px 0 -1px var(--sheet-2),
    6px 6px 0 0 var(--sheet-edge);
}
.nb.drop-on {
  transform: translateY(-4px) scale(1.03);
  outline: 3px solid var(--acc);
  outline-offset: 3px;
}
.nb-spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 16px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.04) 70%, rgba(255, 255, 255, 0.14));
}
.nb-band {
  position: absolute;
  inset: auto 0 18% 16px;
  height: 9px;
  background: rgba(255, 255, 255, 0.16);
}
.nb-label {
  position: absolute;
  left: 26px;
  right: 12px;
  top: 22%;
  display: grid;
  gap: 2px;
  padding: 10px 12px 9px;
  border-radius: 6px;
  color: #1a1c33;
  background: #fffdf6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  transform: rotate(-1.2deg);
}
.nb-label b {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: calc(21px * var(--ts));
  font-weight: 400;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nb-label small {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #6a6a80;
}
.nb-sticker {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  transform: rotate(8deg);
}
.nb-add {
  display: grid;
  place-items: center;
  border: 0;
  font: inherit;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--sheet) 46%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 14%, transparent);
  cursor: pointer;
}
.nb-add:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--sheet) 75%, transparent);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px var(--acc-line);
}
.nb-add-in {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: var(--fs-s);
  font-weight: 600;
}
.nb-add-in .ico {
  width: 26px;
  height: 26px;
}

/* their hand and today, side by side */
.hm-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
}
.hh-paper {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 10px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(80, 120, 190, 0.18) 31px 32px),
    var(--paper);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.hh-cv {
  display: block;
  max-width: 100%;
}
.hh-meta {
  display: grid;
  gap: 2px;
  margin-top: 12px;
}
.hh-meta b {
  font-size: var(--fs-l);
}
.hh-meta span,
.hh-pitch {
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--ink-2);
}
.hp-name {
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ pages as pictures and rows */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(196px * var(--ts))), 1fr));
  gap: 22px 18px;
}
/* a page: its picture on a slip of paper, its name and notebook under it (on the sheet, so they read on any sky) */
.pg-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px 10px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--sheet) 88%, transparent);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-1);
  transition: background var(--t-1), box-shadow var(--t-2) var(--ease);
}
.pg-card:hover {
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-2);
}
.pg-open {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.pg-thumb {
  position: relative;
  aspect-ratio: 0.773;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(40, 30, 70, 0.08), 0 2px 4px -1px rgba(40, 30, 70, 0.12), 0 18px 34px -20px rgba(50, 30, 90, 0.55);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.pg-open:hover .pg-thumb,
.pg-open:focus-visible .pg-thumb {
  transform: translateY(-3px) rotate(-0.6deg);
  box-shadow: 0 0 0 1px rgba(40, 30, 70, 0.08), 0 4px 8px -2px rgba(40, 30, 70, 0.14), 0 30px 46px -22px rgba(50, 30, 90, 0.6);
}
.pg-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  animation: pg-in 400ms var(--ease);
}
@keyframes pg-in {
  from {
    opacity: 0;
  }
}
.pg-thumb.empty {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(180deg, transparent 0 21px, rgba(80, 120, 190, 0.16) 21px 22px), var(--paper);
}
.pg-thumb.empty span {
  font-size: var(--fs-s);
  color: #8a8a9a;
}
.pg-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 0 2px;
}
.pg-text {
  display: grid;
  /* (its column is the card's, never as wide as a long title or notebook name) */
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}
.pg-title {
  overflow: hidden;
  overflow-wrap: break-word;
  font-size: var(--fs-m);
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pg-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.pg-sj {
  /* (one line, a long notebook name ends in an ellipsis) */
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pg-sj .sj-dot {
  margin-right: 6px;
}
/* (and a due date never runs out of a narrow card) */
.pg-sub .due-chip {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  line-height: 26px;
  text-overflow: ellipsis;
}
.pg-when {
  color: var(--ink-3);
}
.pg-card.is-done .pg-thumb {
  opacity: 0.62;
}
.pg-card.is-done .pg-title {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
.pg-more {
  width: 34px;
  height: 34px;
  margin: -4px -6px 0 0;
}
.done-tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: -1px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  box-shadow: inset 0 0 0 1.8px color-mix(in srgb, var(--ink) 28%, transparent);
  cursor: pointer;
  transition: background var(--t-1), box-shadow var(--t-1), color var(--t-1), transform var(--t-2) var(--ease);
}
.done-tick svg {
  width: 15px;
  height: 15px;
}
.done-tick:hover {
  color: color-mix(in srgb, var(--good) 70%, transparent);
  box-shadow: inset 0 0 0 1.8px var(--good);
}
.done-tick[aria-pressed="true"] {
  color: #fff;
  background: var(--good);
  box-shadow: none;
  animation: tick-pop 360ms var(--ease);
}
@keyframes tick-pop {
  40% {
    transform: scale(1.22);
  }
}
/* Home's recent pages: one row that scrolls */
.pg-grid-row {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(172px, 196px);
  margin: -10px -10px 0;
  padding: 10px 10px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.pg-grid-row .pg-card {
  scroll-snap-align: start;
}
.pg-rows {
  display: grid;
  overflow: hidden;
  border-radius: 20px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-1);
}
.pg-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 150px 120px 110px 34px;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 8px 14px 8px 16px;
  border-top: 1px solid var(--line);
}
.pg-row:first-child {
  border-top: 0;
}
.pg-row-head {
  min-height: 40px;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--sheet-2);
}
.pr-open {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  cursor: pointer;
}
.pr-title {
  overflow: hidden;
  font-size: var(--fs-m);
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-open:hover .pr-title {
  text-decoration: underline;
  text-decoration-color: var(--acc-line);
  text-underline-offset: 4px;
}
.pr-snip {
  overflow: hidden;
  font-size: var(--fs-s);
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-sj {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-s);
  font-weight: 560;
  color: var(--ink-2);
  white-space: nowrap;
}
.pr-sj > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-when {
  font-size: var(--fs-s);
  color: var(--ink-3);
}
.pg-row.is-done .pr-title {
  color: var(--ink-3);
  text-decoration: line-through;
}
.pr-gap {
  width: 26px;
}
body.dragging-page .nb,
body.dragging-page .ab-tab[data-r="pages"] {
  outline: 2px dashed color-mix(in srgb, var(--acc) 60%, transparent);
  outline-offset: 3px;
}
.ab-tab.drop-on {
  background: var(--acc-wash);
}

/* ------------------------------------------------------------------ narrower windows and phones */
@media (max-width: 1180px) {
  .ab-search-t,
  .ab-search kbd {
    display: none;
  }
  .ab-search {
    justify-content: center;
    width: 44px;
    padding: 0;
  }
  .st-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .ab-tab {
    padding: 0 14px;
  }
  /* (the other places as icons: their names kept for a screen reader, and as a tooltip) */
  .ab-tab:not([aria-current="page"]) .ab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .hm-duo {
    grid-template-columns: 1fr;
  }
  .pg-row {
    grid-template-columns: 26px minmax(0, 1fr) 130px 110px 34px;
  }
  .pg-row > .pr-when {
    display: none;
  }
}
@media (max-width: 760px) {
  .app-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: 62px;
    padding: 0 12px 0 10px;
  }
  .ab-places,
  .ab-new,
  .ab-learning-t {
    display: none;
  }
  .ab-brand .logo-slot {
    width: 78px;
    height: 34px;
  }
  .ab-right {
    grid-column: 3;
    gap: 6px;
  }
  .ab-search {
    width: 42px;
    height: 42px;
  }
  .app-tabs {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    height: 70px;
    padding: 0 4px;
    border-radius: 26px;
    background: var(--bar);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: inset 0 0 0 1px var(--bar-edge), 0 20px 44px -18px rgba(40, 30, 80, 0.55);
  }
  .at-tab {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 56px;
    padding-top: 8px;
    border-radius: 18px;
    font-size: calc(11.5px * var(--ts));
    font-weight: 600;
    color: var(--ink-3);
    text-decoration: none;
  }
  .at-tab .ico {
    width: 23px;
    height: 23px;
  }
  .at-ico {
    position: relative;
    display: block;
    height: 24px;
  }
  .at-ico .ab-badge {
    position: absolute;
    top: -6px;
    left: 14px;
  }
  .at-tab[aria-current="page"] {
    color: var(--ink);
  }
  .at-tab[aria-current="page"] .ico {
    color: var(--acc);
  }
  .at-new {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 20px;
    color: var(--acc-hi);
    background: radial-gradient(120% 120% at 30% -30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, var(--primary-top), var(--primary) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 60%, transparent), 0 12px 24px -10px rgba(30, 20, 60, 0.55);
    cursor: pointer;
  }
  .at-new svg {
    width: 24px;
    height: 24px;
  }
  .app-page {
    width: calc(100% - 32px);
    padding-bottom: 130px;
  }
  .hm {
    gap: 40px;
  }
  .hm-hero {
    padding-top: 6px;
  }
  .hm-line {
    min-height: 96px;
    margin: 2px 0 10px;
  }
  .hm-ask {
    border-radius: 24px;
  }
  .ha-field {
    padding: 12px 12px 4px;
  }
  .ha-text {
    font-size: calc(18px * var(--ts));
  }
  .ha-row {
    flex-direction: column;
    align-items: stretch;
    padding: 4px 2px 2px;
  }
  .ha-go .btn {
    flex: 1;
  }
  .hm-ways {
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin: 20px -16px 0;
    padding: 2px 16px 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hm-way {
    flex: none;
  }
  .hm-hero > .hm-ways {
    justify-self: stretch;
  }
  .hm-ways-t {
    flex: none;
    white-space: nowrap;
  }
  .sec-head h2 {
    font-size: calc(27px * var(--ts));
  }
  .st-head {
    flex-wrap: wrap;
    gap: 10px 18px;
  }
  /* (the heading and its line take the width; the bar and Hide go under them) */
  .st-intro {
    flex: 1 1 100%;
  }
  .st-bar {
    flex: 1;
    max-width: 220px;
  }
  .st-list {
    grid-template-columns: 1fr;
  }
  .nb-shelf {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 14px;
  }
  .pg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }
  .pg-grid-row {
    grid-template-columns: none;
    grid-auto-columns: min(62vw, 250px);
  }
  /* (a card is narrow on a phone: the name sits between the tick and the menu, and its notebook and due date take
     the card's whole width under them, rather than a squeezed column) */
  .pg-card .pg-meta {
    row-gap: 6px;
  }
  .pg-card .pg-text {
    display: contents;
  }
  .pg-card .pg-sub {
    grid-row: 2;
    grid-column: 1 / -1;
    padding-left: 2px;
  }
  .pg-card .pg-meta > .pg-more {
    grid-row: 1;
    grid-column: 3;
  }
  .pg-row {
    grid-template-columns: 26px minmax(0, 1fr) auto 34px;
    gap: 10px;
  }
  .pg-row > .pr-sj,
  .pg-row > .pr-when,
  .pg-row-head {
    display: none;
  }
  .nx-row {
    grid-auto-columns: minmax(240px, 82%);
  }
}

/* ------------------------------------------------------------------ menus, the due-date picker */
.app-pop {
  position: fixed;
  z-index: 300;
  min-width: 220px;
  max-width: min(calc(360px * var(--ts)), calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overscroll-behavior: contain;
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  color: var(--ink);
  background: var(--veil-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--veil-edge), 0 0 0 1px var(--line), var(--sh-float);
  animation: pop-in 140ms var(--ease);
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
.pm {
  display: grid;
  gap: 1px;
}
.pm-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: calc(14.5px * var(--ts));
  text-align: left;
  color: var(--ink);
  background: none;
  cursor: pointer;
}
.pm-item:hover,
.pm-item:focus-visible {
  background: var(--hover);
  outline: none;
}
.pm-item:disabled {
  opacity: 0.45;
  cursor: default;
}
.pm-item .ico {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--ink-3);
}
.pm-item .sj-dot {
  margin: 0 3.5px;
}
.pm-item.danger,
.pm-item.danger .ico {
  color: var(--bad);
}
.pm-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-label small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  font-size: calc(12.5px * var(--ts));
  font-weight: 450;
  color: var(--ink-3);
  text-overflow: ellipsis;
}
.pm-create .pm-item {
  min-height: 48px;
  padding: 5px 10px;
}
.pm-create .pm-head {
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11.5px;
}
.pm-hint {
  font-size: 12.5px;
  color: var(--ink-3);
}
.pm-check,
.pm-more {
  color: var(--ink-2) !important;
}
.pm-sep {
  height: 1px;
  margin: 5px 8px;
  background: var(--line);
}
.pm-head {
  padding: 8px 10px 6px;
  overflow: hidden;
  font-size: calc(12.5px * var(--ts));
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-back .ico {
  color: var(--ink-2);
}

.dp {
  display: grid;
  gap: 10px;
  padding: 8px;
}
.dp-head {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dp-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dp-q {
  display: grid;
  gap: 1px;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  cursor: pointer;
}
.dp-q:hover,
.dp-q:focus-visible {
  background: var(--hover);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.dp-q.on {
  box-shadow: inset 0 0 0 1.5px var(--acc);
}
.dp-q b {
  font-size: calc(14px * var(--ts));
  font-weight: 620;
}
.dp-q span {
  font-size: calc(12.5px * var(--ts));
  color: var(--ink-3);
}
.dp-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
}
.dp-in {
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--app-card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color-scheme: inherit;
}
.dp .btn,
.dp-done {
  justify-self: start;
}

/* ------------------------------------------------------------------ search (⌘K) */
.cp-back {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: min(14vh, 120px) 16px 16px;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: cp-fade 140ms ease;
}
@keyframes cp-fade {
  from {
    opacity: 0;
  }
}
.cp {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(640px, 100%);
  max-height: min(70vh, 560px);
  overflow: hidden;
  border-radius: 20px;
  background: var(--veil-strong);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--veil-edge), 0 0 0 1px var(--line), var(--sh-float), 0 40px 90px -40px rgba(20, 16, 50, 0.6);
  animation: pop-in 160ms var(--ease);
}
.cp-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.cp-top .ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ink-3);
}
.cp-in {
  flex: 1;
  min-width: 0;
  height: 60px;
  border: 0;
  font: inherit;
  font-size: calc(18px * var(--ts));
  color: var(--ink);
  background: none;
  outline: none;
}
.cp-in::-webkit-search-cancel-button {
  display: none;
}
.cp-list {
  overflow-y: auto;
  padding: 6px 8px 10px;
}
.cp-head {
  padding: 10px 10px 4px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: none;
  cursor: pointer;
}
.cp-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--acc) 12%, transparent);
}
.cp-item .ico {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
}
.cp-item .sj-dot {
  margin: 0 4px;
}
.cp-label {
  display: grid;
  flex: 1;
  min-width: 0;
  font-size: var(--fs-m);
}
.cp-label small {
  overflow: hidden;
  font-size: calc(12.5px * var(--ts));
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.cp-foot kbd {
  margin-right: 3px;
  padding: 1px 6px;
}
.cp-item kbd {
  flex: none;
  font-size: 11.5px;
  white-space: nowrap;
}

/* keyboard shortcuts */
.ks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: 12px;
}
@media (max-width: 720px) {
  .ks {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ks-then {
  align-self: center;
  margin: 0 2px;
  font-size: 12px;
  color: var(--ink-3);
}
.ks h4 {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ks h4:first-child {
  margin-top: 4px;
}
.ks-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-s);
}
.ks-keys {
  display: flex;
  gap: 4px;
}

/* a toast you can take back */
.toast-undo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.toast-act {
  flex: none;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: var(--gold-hi);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
.toast-act:hover {
  background: rgba(255, 255, 255, 0.16);
}
.app-ask {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.app-ask .af-input {
  width: 100%;
  height: 48px;
}
.af-err {
  font-size: var(--fs-s);
  font-weight: 560;
  color: var(--bad);
}

/* ------------------------------------------------------------------ the studio, inside the app */
.st-back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.st-back:hover {
  background: var(--hover);
}
.st-back > svg {
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}
.st-subject,
.st-due {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  max-width: 180px;
  height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 560;
  color: var(--ink-3);
  white-space: nowrap;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
}
.st-subject span,
.st-due span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-subject:hover,
.st-due:hover,
.st-subject[aria-expanded="true"],
.st-due[aria-expanded="true"] {
  color: var(--ink);
  background: var(--hover);
}
.st-subject.set,
.st-due.set {
  color: var(--ink);
}
.st-subject .ico,
.st-due .ico {
  width: 15px;
  height: 15px;
}
.st-due[data-tone="over"] {
  color: var(--due-over);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--due-over) 40%, transparent);
}
.st-due[data-tone="today"] {
  color: var(--due-today);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--due-today) 40%, transparent);
}
.st-menu .mi-sm {
  display: none;
}


/* the studio's bar on narrower windows: the page's name comes first; its subject and due date fold to a dot and
   an icon (their names are in the tooltip and the menu) */
.st-top .st-title {
  min-width: 120px;
}
@media (max-width: 1240px) {
  .st-due > span {
    display: none;
  }
  .st-due {
    padding: 0 9px;
  }
  .st-subject {
    max-width: 130px;
  }
}
@media (max-width: 1000px) {
  .st-subject > span:not(.sj-dot) {
    display: none;
  }
  .st-subject {
    padding: 0 10px;
  }
  .st-top .st-title {
    min-width: 90px;
  }
}

/* How Ditto works */
.hw {
  display: grid;
  gap: 6px;
}
.hw-steps {
  display: grid;
  gap: 10px;
  margin: 8px 0 18px;
  padding: 0;
  list-style: none;
}
.hw-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hw-step b {
  font-size: calc(15.5px * var(--ts));
}
.hw-step p {
  margin: 3px 0 0;
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--ink-3);
}
.hw-n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 18px;
  color: #5a3e0a;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold));
}
.hw h4 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hw-where {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-where li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--ink-2);
}
.hw-where .ico {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--ink-3);
}
.hw-where b {
  color: var(--ink);
}
@media (max-width: 560px) {
  .hw-step {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .hw-step .btn {
    grid-column: 2;
    justify-self: start;
  }
}


/* ------------------------------------------------------------------ paste it, Ditto writes it (paste.js) */
.modal.wide:has(.ps) {
  width: min(720px, 100%);
}
.ps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 18px;
  border-radius: 16px;
  transition: box-shadow var(--t-1);
}
.ps.drop {
  box-shadow: 0 0 0 2px var(--acc);
}
.ps-label {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 640;
  color: var(--ink);
}
.ps-text,
.ps-prompt {
  width: 100%;
  min-height: 180px;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-2);
  resize: vertical;
  outline: none;
}
.ps-text:focus-visible,
.ps-prompt:focus-visible {
  box-shadow: inset 0 0 0 2px var(--acc);
}
.ps-text::placeholder {
  color: var(--ink-3);
}
.ps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ps-file small {
  font-size: 13px;
  color: var(--ink-3);
}
.ps-status {
  min-height: 1.2em;
  font-size: 13.5px;
  color: var(--ink-2);
}
.ps-status:empty {
  display: none;
}
.ps-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
}
.ps-opt input {
  accent-color: var(--acc);
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.ps-looks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ps-look {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
  transition: background var(--t-1), box-shadow var(--t-1);
}
.ps-look:hover {
  background: var(--hover);
}
.ps-look[aria-checked="true"] {
  background: color-mix(in srgb, var(--acc) 8%, var(--sheet));
  box-shadow: inset 0 0 0 2px var(--acc);
}
.ps-look b {
  font-size: 14.5px;
  font-weight: 640;
}
.ps-look small {
  font-size: 12.5px;
  color: var(--ink-3);
}
.ps-go {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
/* their own AI: a second, quieter way in, folded away */
.ps-own {
  margin-top: 8px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ps-own summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  border-radius: 16px;
}
.ps-own summary::-webkit-details-marker {
  display: none;
}
.ps-own summary:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.ps-own summary > .ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ink-2);
}
.ps-own summary span {
  display: grid;
  gap: 1px;
}
.ps-own summary b {
  font-size: 14.5px;
  font-weight: 640;
}
.ps-own summary small {
  font-size: 13px;
  color: var(--ink-3);
}
.ps-own-in {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}
.ps-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.ps-ai {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ps-prompt {
  min-height: 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.ps-mark-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ps-mark-row p {
  flex: 1;
  min-width: 220px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}
.ps-mark {
  cursor: grab;
}
@media (max-width: 560px) {
  .ps-text {
    height: 150px;
    min-height: 120px;
  }
  .ps-look {
    padding: 9px 10px;
  }
  /* (Write it in my hand stays in reach at the foot while the sheet scrolls) */
  .ps-go {
    position: sticky;
    bottom: calc(-1 * max(20px, env(safe-area-inset-bottom)));
    z-index: 2;
    margin: 0 -20px;
    padding: 18px 20px max(16px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 18px);
  }
  .ps-go .btn {
    flex: 1;
  }
}

/* ------------------------------------------------------------------ "How should Ditto write it?" (writestyle.js) */
.modal.ws-modal {
  width: min(820px, 100%);
  padding: 30px 30px 24px;
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 60%),
    var(--surface);
}
.ws {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 20px;
}
/* (the homework's field: the box it sits in shows the focus, in their colour) */
.ws-what:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--acc-line), 0 0 0 4px var(--acc-wash);
}
.ws-extra:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--acc-line), 0 0 0 4px var(--acc-wash);
}
.ws-for {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: var(--fs-m);
  font-weight: 600;
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.ws-for > .ico {
  width: 17px;
  height: 17px;
  color: var(--ink-3);
}
.ws-for > span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-for-sj {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.ws-for-sj .ico {
  width: 14px;
  height: 14px;
}
.ws-what {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.ws-task {
  width: 100%;
  min-height: 64px;
  padding: 0;
  border: 0;
  resize: vertical;
  font: inherit;
  font-size: var(--fs-l);
  line-height: 1.45;
  color: var(--ink);
  background: transparent;
  outline: none;
}
.ws-task.ws-need::placeholder {
  color: var(--bad);
}
.ws-what-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ws-photo-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 600;
  background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.ws-photo-tag[hidden] {
  display: none;
}
.ws-photo-tag .ico {
  width: 16px;
  height: 16px;
}
.ws-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
}
.ws-inline .ico {
  width: 16px;
  height: 16px;
}
.ws-styles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.ws-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 14px 14px 14px;
  border-radius: 18px;
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  cursor: pointer;
  transition: box-shadow var(--t-1), background var(--t-1), transform var(--t-2) var(--ease);
}
.ws-card:hover {
  box-shadow: inset 0 0 0 1px var(--line-3);
  transform: translateY(-1px);
}
.ws-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ws-card:has(.ws-radio:checked) {
  background: color-mix(in srgb, var(--acc) 7%, var(--sheet));
  box-shadow: inset 0 0 0 2px var(--acc), 0 10px 24px -16px color-mix(in srgb, var(--acc) 70%, transparent);
}
.ws-card:has(.ws-radio:focus-visible) {
  outline: 2.5px solid var(--acc);
  outline-offset: 3px;
}
.ws-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.ws-ico svg {
  width: 19px;
  height: 19px;
}
.ws-card:has(.ws-radio:checked) .ws-ico {
  color: var(--acc-ink);
  background: var(--acc-wash);
}
.ws-txt b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-m);
  font-weight: 650;
}
.ws-txt small {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-s);
  line-height: 1.4;
  color: var(--ink-2);
}
.ws-tag {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--acc-ink);
  background: var(--acc-wash);
}
.ws-tag[data-kind="usual"] {
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.ws-tag[hidden] {
  display: none;
}
.ws-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.ws-opt {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ws-opt-t {
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--ink-2);
}
.ws-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.ws-seg button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
.ws-seg button[aria-checked="true"] {
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 1px 3px rgba(40, 30, 70, 0.16), 0 0 0 1px var(--sheet-edge);
}
.ws-select {
  height: 38px;
  padding: 0 34px 0 12px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: var(--fs-s);
  color: var(--ink);
  background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23686880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.ws-extra {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: var(--fs-m);
  color: var(--ink);
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
}
.ws-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.ws-noask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-s);
  color: var(--ink-2);
  cursor: pointer;
}
.ws-check {
  width: 18px;
  height: 18px;
  accent-color: var(--acc);
}
.ws-foot .btn {
  --h: 46px;
}
.ws-go {
  padding: 0 24px 0 20px;
}
@media (max-width: 640px) {
  .modal.ws-modal {
    padding: 24px 18px 0;
  }
  /* (Write it stays in reach at the foot while the styles scroll) */
  .ws-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -18px;
    padding: 22px 18px max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 16px);
  }
  .ws-styles .ws-card {
    padding: 12px;
  }
  .ws-styles {
    grid-template-columns: 1fr;
  }
  .ws-foot .btn {
    flex: 1;
  }
  .ws-noask {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ the app's type: a round display face (Fredoka),
   curvy and welcoming where a book's narrow serif, and then a soft serif, read as formal */
:root.app-type {
  --font-display: "Fredoka", "Nunito", "Quicksand", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}

/* ------------------------------------------------------------------ page headings */
.pg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin: clamp(8px, 3vh, 28px) 0 30px;
}
.pg-head-t {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.pg-head h1 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: calc(clamp(44px, 5.4vw, 64px) * var(--ts));
  line-height: 1;
}
.pg-head p {
  margin: 0;
  font-size: var(--fs-m);
  color: var(--on-sky-2, var(--ink-2));
}
.pg-head-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pg-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  height: 32px;
  margin: 0 0 6px -8px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.pg-back:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--sheet) 60%, transparent);
}
.pg-back .ico {
  width: 17px;
  height: 17px;
}
.pg-sticker {
  font-size: 0.8em;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}
/* a notebook opened: its cover's colour as a band behind the heading */
.pg-head-nb {
  position: relative;
  padding: 24px 28px;
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, rgba(0, 0, 0, 0.03) 2px 4px),
    linear-gradient(160deg, color-mix(in srgb, var(--sj) 82%, #fff), var(--sj) 60%, color-mix(in srgb, var(--sj) 80%, #000));
  box-shadow: 0 2px 4px rgba(30, 20, 50, 0.14), 0 22px 44px -22px rgba(40, 24, 80, 0.6);
}
.pg-head-nb h1,
.pg-head-nb p,
.pg-head-nb .pg-back {
  color: #fff;
}
.pg-head-nb p {
  opacity: 0.86;
}
.pg-head-nb .pg-back:hover {
  background: rgba(255, 255, 255, 0.16);
}
.pg-head-nb .ab-round {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.pg-head-nb .ab-round:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* ------------------------------------------------------------------ Notebooks */
.lib-shelf {
  margin-bottom: 52px;
}
.lib-shelf[hidden] {
  display: none;
}
.lib-sec-head:empty {
  display: none;
}
.lib-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.lib-tools:empty {
  display: none;
}
.lib-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(320px, 100%);
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink-3);
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-1);
}
.lib-search:focus-within {
  box-shadow: 0 0 0 1.5px var(--acc-line), 0 0 0 5px var(--acc-wash);
}
.lib-search .ico {
  flex: none;
  width: 18px;
  height: 18px;
}
.lib-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  font: inherit;
  font-size: var(--fs-m);
  color: var(--ink);
  background: transparent;
  outline: none;
}
.seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sheet) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--bar-edge), var(--sh-1);
}
.seg button {
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
.seg button:hover {
  color: var(--ink);
}
.seg button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 2px 6px -2px rgba(40, 30, 70, 0.2);
}
.lib-view.seg .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
}
.lib-view.seg .icon-btn[aria-pressed="true"] {
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 2px 6px -2px rgba(40, 30, 70, 0.2);
}
.lib-sort {
  height: 44px;
  border-radius: 999px;
  padding-left: 16px;
}
.lib-foot {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.lib-foot:empty {
  display: none;
}

/* ------------------------------------------------------------------ Handwriting */
.app-sec {
  margin-bottom: 40px;
}
.app-sec[hidden] {
  display: none;
}
.hand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.hand-card {
  display: grid;
  gap: 14px;
  padding: 16px 16px 14px;
  border-radius: 24px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-2);
}
.hand-card.is-default {
  box-shadow: 0 0 0 2px var(--acc), 0 18px 40px -22px color-mix(in srgb, var(--acc) 70%, transparent);
}
.hand-card.flash {
  animation: hand-flash 1.4s var(--ease);
}
@keyframes hand-flash {
  20%, 60% {
    box-shadow: 0 0 0 4px var(--acc), 0 0 0 10px var(--acc-wash);
  }
}
.hh-paper.big {
  min-height: 150px;
}
.hc-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
}
.hc-meta b {
  display: block;
  font-size: var(--fs-l);
}
.hc-meta span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.badge-def {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--acc-ink);
  background: var(--acc-wash);
}
.hand-card .card-acts {
  align-items: center;
  margin-top: 0;
  padding: 0 2px;
}
.hand-new {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 260px;
  text-align: center;
  background: color-mix(in srgb, var(--sheet) 55%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 12%, transparent);
}
.hand-new b {
  font-family: var(--font-display);
  font-size: calc(26px * var(--ts));
  font-weight: 400;
}
.hand-new p {
  max-width: 300px;
  margin: 0;
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--ink-2);
}
.hand-tips h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: calc(26px * var(--ts));
  font-weight: 400;
}
.hand-tips ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  font-size: var(--fs-m);
  line-height: 1.5;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .pg-head {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 22px;
  }
  .pg-head-nb {
    padding: 20px;
  }
  /* (a column: its children no longer shrink to the width by themselves, so a long notebook name wraps in its band) */
  .pg-head > * {
    max-width: 100%;
  }
  .pg-head h1 {
    overflow-wrap: anywhere;
  }
  .lib-search {
    width: 100%;
  }
  .lib-tools {
    gap: 8px;
  }
  .hand-grid {
    grid-template-columns: 1fr;
  }
}
.pm-emoji {
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
}

/* ------------------------------------------------------------------ Settings */
.set-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: 32px;
  align-items: start;
}
.set-nav {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 2px;
}
.set-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: var(--fs-m);
  font-weight: 540;
  color: var(--ink-2);
  text-decoration: none;
}
.set-nav a .ico {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
}
.set-nav a:hover {
  color: var(--ink);
  background: var(--hover);
}
.set-nav a[aria-current] {
  color: var(--ink);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.set-nav a[aria-current] .ico {
  color: var(--ink);
}
.set-body {
  display: grid;
  gap: 16px;
}
.set-card {
  padding: 22px 24px;
}
.set-card-head {
  margin-bottom: 10px;
}
.set-card-head h2 {
  font-family: var(--font-display);
  font-size: calc(26px * var(--ts));
  font-weight: 400;
  letter-spacing: -0.01em;
}
.set-card-head p {
  margin-top: 4px;
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--ink-3);
}
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.set-row-t {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.set-row-t b,
.set-row-t label {
  font-size: var(--fs-m);
  font-weight: 600;
}
.set-row-t label {
  cursor: pointer;
}
.set-row-t span {
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--ink-3);
}
.set-row-c {
  flex: none;
  display: flex;
  align-items: center;
  max-width: 60%;
}
.set-val {
  font-size: 14.5px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  text-align: right;
}
.set-select {
  min-width: 220px;
  max-width: 100%;
}
.set-who {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 16px;
}
.set-who div {
  display: grid;
}
.set-who b {
  font-size: 17px;
}
.set-who span {
  font-size: 14px;
  color: var(--ink-3);
}
.acct-dot.big {
  width: 52px;
  height: 52px;
  font-size: 22px;
}
.set-card .acct-inline {
  padding-bottom: 12px;
}
.set-preview {
  margin: 4px 0 12px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  background: #fffdf8;
  min-height: 120px;
}
.set-preview canvas {
  display: block;
  max-width: 100%;
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform var(--t-1);
}
.swatch:hover {
  transform: scale(1.08);
}
.swatch[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--ink);
}
.switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  appearance: none;
  cursor: pointer;
  transition: background var(--t-1);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--t-2) var(--ease);
}
.switch:checked {
  background: var(--good);
}
.switch:checked::after {
  transform: translateX(18px);
}
.switch:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.set-plan-now {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 14px;
}
.set-plan-now > div {
  display: grid;
}
.set-plan-now b {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
}
.set-plan-now span {
  font-size: 13.5px;
  color: var(--ink-3);
}
.set-card .meter + .meter {
  margin-top: 12px;
}
.set-card .meter + .set-row {
  margin-top: 14px;
}
.set-bill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 16px;
}
.plan-list {
  display: grid;
  gap: 10px;
}
.plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.plan-row.on {
  background: color-mix(in srgb, var(--gold-hi) 12%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 60%, transparent);
}
.plan-row-t {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.plan-row-name {
  display: flex;
  align-items: center;
  gap: 9px;
}
.plan-row-name .ico {
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}
.plan-row-name b {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
}
.plan-pop {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  color: #5a3e0a;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold));
}
.plan-row-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.plan-row ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
/* (each feature its own dot, so a line that wraps still reads as a list) */
.plan-row li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.plan-row li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateY(-2px);
  background: var(--ink-4);
}
.plan-cur {
  flex: none;
  font-size: 13.5px;
  font-weight: 620;
  color: var(--ink-2);
}
.plan-row .btn {
  flex: none;
}
.set-danger {
  background: color-mix(in srgb, var(--bad) 5%, var(--sheet));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 22%, transparent);
}

/* a group's own heading inside a card (Accessibility: Reading, Seeing, Moving and pressing) */
.set-sub {
  margin: 20px 0 2px;
  font-size: calc(12px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.set-sub + .set-row {
  border-top: 0;
}
.set-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-s);
  color: var(--ink-3);
}
.switch:disabled {
  opacity: 0.4;
  cursor: default;
}
/* a section that's getting ready: its sheet's outline, quietly breathing */
.set-skel {
  display: grid;
  gap: 14px;
  min-height: 280px;
}
.set-skel span {
  height: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  animation: skel 1.4s ease-in-out infinite;
}
.set-skel span:first-child {
  width: 40%;
  height: 26px;
}
.set-skel span:nth-child(3) {
  width: 82%;
}
.set-skel span:nth-child(4) {
  width: 64%;
}
@keyframes skel {
  50% {
    opacity: 0.45;
  }
}

/* Accessibility's preview: a piece of the app, drawn with its own parts, that every switch shows on */
.axp {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 8px 0 6px;
  padding: 14px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--sky-0), var(--sky-2) 46%, var(--sky-4) 80%, var(--horizon));
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  user-select: none;
}
:root[data-sky="calm"] .axp {
  background: var(--air-lo);
}
.axp-sky {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 2px 0;
}
/* (a sun and a cloud behind the bar, so frosted and solid glass can be told apart) */
.axp-sky::before,
.axp-sky::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.axp-sky::before {
  left: calc(50% + 40px);
  width: 150px;
  height: 30px;
  margin-top: -2px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cloud-lit) 90%, transparent), transparent);
}
.axp-sky::after {
  left: calc(50% - 150px);
  width: 170px;
  height: 36px;
  margin-top: -14px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cloud-lit) 95%, transparent), transparent);
}
.axp-bar {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bar);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--bar-edge), 0 10px 26px -16px rgba(50, 36, 90, 0.45);
}
.axp-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 560;
  color: var(--ink-2);
}
.axp-tab .ico {
  width: 17px;
  height: 17px;
}
.axp-tab.on {
  color: var(--ink);
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 2px 6px -2px rgba(50, 36, 90, 0.18);
}
.axp-tab.on .ico {
  color: var(--acc);
}
.axp-sheet {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--sh-1);
}
.axp-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.axp-h {
  font-size: var(--fs-l);
  font-weight: 650;
}
.axp-sheet p {
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--ink-2);
}
.axp-sheet a {
  font-weight: 600;
  color: var(--acc-ink);
  text-decoration: none;
}
.axp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.axp .btn {
  pointer-events: none;
}

/* the colours, named, for someone who asked for meaning without colour */
.acc-name {
  display: none;
}
:root[data-shapes="on"] .acc-picks {
  gap: 8px;
}
:root[data-shapes="on"] .acc-pick {
  display: inline-flex;
  gap: 7px;
  width: auto;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
:root[data-shapes="on"] .acc-pick::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
}
:root[data-shapes="on"] .acc-pick svg {
  display: none;
}
:root[data-shapes="on"] .acc-pick .acc-name {
  display: inline;
}
:root[data-shapes="on"] .acc-pick[aria-checked="true"] {
  box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
:root[data-shapes="on"] .acc-pick[aria-checked="true"]::after {
  content: "✓";
  font-weight: 800;
}

/* ------------------------------------------------------------------ Make it yours */
.sky-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sky-pick {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 2px;
  padding: 8px 8px 12px;
  border: 0;
  border-radius: 20px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--sheet-edge);
  cursor: pointer;
  transition: box-shadow var(--t-1), transform var(--t-2) var(--ease);
}
.sky-pick:hover {
  transform: translateY(-2px);
}
.sky-pick[aria-checked="true"] {
  background: var(--sheet);
  box-shadow: inset 0 0 0 2px var(--acc), 0 12px 26px -16px color-mix(in srgb, var(--acc) 70%, transparent);
}
.sky-pick b {
  padding: 0 6px;
  margin-top: 8px;
  font-size: var(--fs-m);
}
.sky-pick small {
  padding: 0 6px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.sky-win {
  position: relative;
  display: block;
  height: 88px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #787ac4, #a896d6 32%, #dab0d2 58%, #fac0b0 76%, #ffd296 86%, #fbf6ee 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.sky-win::after {
  /* the cloud sea along the foot */
  content: "";
  position: absolute;
  inset: auto -10% -14px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(60% 80% at 30% 40%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%), radial-gradient(50% 70% at 75% 50%, rgba(255, 250, 245, 0.9), rgba(255, 255, 255, 0) 70%);
}
.sky-sun {
  position: absolute;
  right: 22%;
  bottom: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 40%, rgba(255, 220, 160, 0.6) 70%, transparent 72%);
  box-shadow: 0 0 22px 8px rgba(255, 214, 150, 0.55);
}
.sky-pick[data-sky="dawn"] .sky-win { background: linear-gradient(180deg, #b096ce, #d6a8ce 32%, #f0bac8 58%, #fccec4 76%, #ffe0c8 88%, #fff6f1 100%); }
.sky-pick[data-sky="day"] .sky-win { background: linear-gradient(180deg, #7096d2, #92b4e4 32%, #b8d0ee 58%, #d8e4f0 76%, #f2ece2 88%, #ffffff 100%); }
.sky-pick[data-sky="day"] .sky-sun { box-shadow: 0 0 18px 6px rgba(255, 246, 220, 0.6); }
.sky-pick[data-sky="dusk"] .sky-win { background: linear-gradient(180deg, #3e3480, #66489c 32%, #a05c9e 56%, #d67480 74%, #f4965e 86%, #ffd4bc 100%); }
.sky-pick[data-sky="dusk"] .sky-sun { background: radial-gradient(circle, #ffe6c4 40%, rgba(255, 150, 90, 0.6) 70%, transparent 72%); box-shadow: 0 0 22px 8px rgba(255, 140, 80, 0.5); }
.sky-pick[data-sky="living"] .sky-win { background: linear-gradient(90deg, #d6a8ce 0 25%, #92b4e4 25% 50%, #dab0d2 50% 75%, #66489c 75%); }
.sky-pick[data-sky="living"] .sky-win::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 240, 225, 0.75));
}
.sky-pick[data-sky="calm"] .sky-win { background: repeating-linear-gradient(180deg, transparent 0 15px, rgba(80, 120, 190, 0.16) 15px 16px), #fffdf8; }
.sky-pick[data-sky="calm"] .sky-win::after,
.sky-pick[data-sky="calm"] .sky-sun,
.sky-pick[data-sky="living"] .sky-sun {
  display: none;
}
.acc-picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.acc-pick {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform var(--t-2) var(--ease);
}
.acc-pick svg {
  width: 18px;
  height: 18px;
  opacity: 0;
}
.acc-pick:hover {
  transform: scale(1.08);
}
.acc-pick[aria-checked="true"] {
  box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5px var(--c);
}
.acc-pick[aria-checked="true"] svg {
  opacity: 1;
}
.acc-pick[data-acc="gold"] { --c: #c18b26; }
.acc-pick[data-acc="coral"] { --c: #d9603f; }
.acc-pick[data-acc="rose"] { --c: #cc4f79; }
.acc-pick[data-acc="violet"] { --c: #7656d4; }
.acc-pick[data-acc="sky"] { --c: #2f7fd0; }
.acc-pick[data-acc="mint"] { --c: #22917a; }
.ts-seg button:nth-child(2) {
  font-size: calc(var(--fs-s) * 1.12);
}
.ts-seg button:nth-child(3) {
  font-size: calc(var(--fs-s) * 1.25);
}
.set-range-box {
  display: grid;
  gap: 6px;
  width: min(320px, 100%);
}
.set-range-ends {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
}
.set-range {
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: var(--acc);
  cursor: pointer;
}
.set-range-now {
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.set-styles {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.set-card .switch:checked {
  background: var(--acc);
}
.set-nav a[aria-current] .ico {
  color: var(--acc);
}
.lib-view.seg .icon-btn {
  padding: 0;
}
.hand-card.hand-new {
  background: color-mix(in srgb, var(--sheet) 50%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 14%, transparent);
  cursor: pointer;
}
.hand-card.hand-new:hover {
  background: color-mix(in srgb, var(--sheet) 78%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--acc-line);
}
.set-select {
  height: 42px;
  max-width: 100%;
  padding: 0 36px 0 14px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: var(--fs-s);
  color: var(--ink);
  background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23686880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* a way past the bar for the keyboard */
.app-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  color: var(--on-primary);
  background: var(--primary);
  transform: translateY(-160%);
  transition: transform var(--t-2) var(--ease);
  cursor: pointer;
}
.app-skip:focus-visible {
  transform: none;
}
/* a notebook's paper and pen */
.nbp {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.nbp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
}
.nbp-row .set-select {
  width: min(280px, 60%);
}
/* a new account's notebooks, one click each */
.nb-starters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.nb-starters-t {
  margin-right: 4px;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--on-sky-2, var(--ink-2));
}
.nb-starter-st {
  font-size: 16px;
  line-height: 1;
}
/* (dusk's sky is deep at the top: a little more paper light behind the greeting there) */
:root[data-sky="dusk"] .app-sky::after {
  background: radial-gradient(70% 50% at 50% 28%, color-mix(in srgb, var(--air) 46%, transparent), transparent 76%);
}

/* (on a phone the toasts sit above the bar along the bottom) */
@media (max-width: 760px) {
  body.in-app .toast-root {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* Settings on a tablet and a phone: one column, its sections a row of pills to swipe along */
@media (max-width: 860px) {
  .set-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .set-nav {
    position: static;
    display: flex;
    gap: 6px;
    margin-inline: calc(50% - 50vw);
    padding: 2px calc(50vw - 50%) 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .set-nav::-webkit-scrollbar {
    display: none;
  }
  .set-nav a {
    flex: none;
    padding: 0 16px 0 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sheet) 60%, transparent);
    box-shadow: inset 0 0 0 1px var(--bar-edge);
  }
}
@media (max-width: 560px) {
  .set-card {
    padding: 20px 16px 16px;
  }
  .set-row {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .set-row-t {
    flex: 1 1 170px;
  }
  .set-row-c {
    max-width: 100%;
  }
  .set-row-c:has(> .seg, > .acc-picks, > .swatches, > .set-select, > .set-range-box) {
    flex: 1 1 100%;
  }
  .set-row-c > .seg {
    width: 100%;
  }
  .set-row-c > .seg button {
    flex: 1 1 auto;
    padding: 0 10px;
    white-space: nowrap;
  }
  .set-select {
    width: 100%;
    min-width: 0;
  }
  .acc-picks,
  .swatches {
    justify-content: flex-start;
  }
  .sky-picks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .axp {
    padding: 10px;
  }
  .axp-sheet {
    padding: 14px;
  }
  .set-plan-now b {
    font-size: 28px;
  }
  .plan-row {
    flex-wrap: wrap;
  }
}

/* ------------------------------------------------------------------ polish, 2026-10-16 */
/* (New handwriting is a button: none of the browser's own border on it) */
.hand-card.hand-new {
  border: 0;
  font: inherit;
  color: var(--ink);
}
/* a notebook's name fits its label: the type gives way a little on a narrow cover before it's cut short */
.nb {
  container-type: inline-size;
}
.nb-label {
  right: 10px;
  padding: 9px 10px 8px;
}
.nb-label b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: max(11px, min(calc(21px * var(--ts)), calc(14cqi * var(--ts)), calc(108cqi / var(--w, 6))));
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  /* (Up next's heading stays on one line: the ring says only the count, and the rest to a screen reader) */
  .wk-more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .sec-head h2 {
    white-space: nowrap;
  }
  .hand-card.hand-new {
    min-height: 170px;
  }
}
@media (max-width: 560px) {
  /* a page as a row: its name across the width, its due date under it */
  .pg-row {
    grid-template-columns: 26px minmax(0, 1fr) 34px;
    grid-template-areas: "tick open more" ". due more";
    row-gap: 2px;
  }
  .pg-row > .done-tick,
  .pg-row > .pr-gap {
    grid-area: tick;
  }
  .pg-row > .pr-open {
    grid-area: open;
  }
  .pg-row > .pr-due {
    grid-area: due;
  }
  .pg-row > .pr-due:empty {
    display: none;
  }
  .pg-row > .pg-more {
    grid-area: more;
    align-self: center;
  }
}
@media (max-width: 560px) {
  /* (three notebooks to a row on a phone, as a shelf of them looks) */
  .nb-shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 12px;
  }
  .nb-label {
    left: 19px;
    right: 7px;
    padding: 7px 8px 6px;
  }
  .nb-label b {
    font-size: max(11px, min(calc(21px * var(--ts)), calc(15cqi * var(--ts)), calc(104cqi / var(--w, 6))));
  }
  .nb-sticker {
    right: 8px;
    bottom: 8px;
    font-size: 22px;
  }
  .nb-add-in {
    font-size: var(--fs-xs);
  }
}
/* Bigger buttons, for the app's own small round controls (base.css does the rest) */
/* (a tick or an ink keeps its size and gains a reach round it) */
:root[data-targets="large"] .done-tick,
:root[data-targets="large"] .swatch {
  position: relative;
}
:root[data-targets="large"] .done-tick::after,
:root[data-targets="large"] .swatch::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}
/* (on a touch screen the small round controls have the same reach, whatever the setting: a 26 px tick is too small
   for a finger) */
@media (pointer: coarse) {
  .done-tick {
    position: relative;
  }
  .done-tick::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
  }
}
:root[data-targets="large"] .acc-pick {
  min-width: 44px;
  height: 44px;
}
:root[data-targets="large"] .swatches {
  gap: 14px;
}
:root[data-targets="large"] .set-range {
  height: 44px;
}
:root[data-targets="large"] .switch {
  width: 56px;
  height: 34px;
}
:root[data-targets="large"] .switch::after {
  width: 28px;
  height: 28px;
}
:root[data-targets="large"] .switch:checked::after {
  transform: translateX(22px);
}
/* a menu on a phone: a sheet from the foot of the screen, over a dimmed page */
.app-pop-scrim {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: var(--scrim);
  animation: m-fade var(--t-2) var(--ease-soft);
}
.app-pop.is-sheet {
  left: 8px;
  right: 8px;
  top: auto;
  bottom: max(8px, env(safe-area-inset-bottom));
  width: auto;
  max-width: none;
  max-height: min(86dvh, calc(100dvh - 24px));
  padding: 8px;
  border-radius: 24px;
  background: var(--veil-strong);
  animation: m-sheet 0.4s var(--ease);
}
.app-pop.is-sheet .pm-item {
  min-height: 48px;
  font-size: var(--fs-m);
}
.app-pop.is-sheet.pm-create .pm-item {
  min-height: 54px;
}
/* (no hand of their own yet: the invitation across the whole row) */
.hand-grid > .app-empty {
  grid-column: 1 / -1;
}
@media (max-width: 560px) {
  /* the library's tools on a phone: search, then what to show across the width, then the order and the view */
  .lib-tools > .grow {
    display: none;
  }
  .lib-tools > .seg:not(.lib-view) {
    flex: 1 1 100%;
  }
  .lib-tools > .seg:not(.lib-view) button {
    flex: 1;
  }
  .lib-tools > .lib-sort {
    flex: 1;
  }
}
.cp-cancel {
  flex: none;
  height: 40px;
  padding: 0 4px 0 8px;
  border: 0;
  font: inherit;
  font-size: var(--fs-m);
  font-weight: 600;
  color: var(--acc-ink);
  background: none;
  cursor: pointer;
}
@media (max-width: 560px) {
  .cp-back {
    padding: max(10px, env(safe-area-inset-top)) 10px 10px;
  }
  .cp {
    max-height: min(78dvh, 640px);
  }
}
.set-row-c > .set-select {
  width: 260px;
}
@media (max-width: 560px) {
  .set-row-c > .set-select {
    width: 100%;
  }
}
/* (at night the + on the phone's bar is cream: its icon needs a dark ink) */
:root[data-theme="dark"] .at-new {
  color: color-mix(in srgb, var(--acc) 60%, #2a1d05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .at-new {
    color: color-mix(in srgb, var(--acc) 60%, #2a1d05);
  }
}
@media (max-width: 860px) {
  /* (the section you're in, plain to see among the pills) */
  .set-nav a[aria-current] {
    background: var(--sheet);
    box-shadow: inset 0 0 0 1.5px var(--acc), var(--sh-1);
  }
}
/* (a section's link sits on the sky, sometimes where the sun or the moon lights it: a breath of paper behind it keeps
   it readable there) */
.sec-head .sec-link {
  background: color-mix(in srgb, var(--sheet) 46%, transparent);
}
.sec-head .sec-link:hover {
  background: color-mix(in srgb, var(--sheet) 80%, transparent);
}
@media (max-width: 860px) {
  :root[data-transparency="reduced"] .set-nav a {
    background: var(--sheet);
  }
}
/* a sheet's outline while what goes on it is read (Home's handwriting and today, Your handwriting) */
.skel-card {
  min-height: 230px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--sheet) 70%, transparent);
  box-shadow: 0 0 0 1px var(--sheet-edge);
  animation: skel 1.4s ease-in-out infinite;
}
/* rows that scroll sideways run to the window's edges on narrower screens, their first card still lined up with the
   page (as a shelf does) */
/* (scroll-padding's % is of the row itself, which is the window's width here, so it is the page's gutter written out:
   the cards snap to the page's edge, not to the window's) */
@media (max-width: 760px) {
  .nx-row,
  .pg-grid-row {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    scroll-padding-inline: 16px;
  }
}
:root[data-shapes="on"] .set-row-acc {
  flex-wrap: wrap;
}
:root[data-shapes="on"] .set-row-acc .set-row-c {
  flex: 1 1 100%;
  max-width: 100%;
}
:root[data-shapes="on"] .set-row-acc .acc-picks {
  justify-content: flex-start;
}

/* Home: choose a task in plain language, or browse the full tool catalog. */
.hm-start { width: min(100%, 1040px); margin: 28px auto 0; text-align: left; }
.hm-start-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.hm-start-head h2 { margin: 0; font: inherit; font-size: 16px; font-weight: 650; color: var(--on-sky, var(--ink)); }
.hm-task-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hm-way.hm-task { width: 100%; height: auto; min-height: 86px; padding: 16px; gap: 12px; border-radius: 18px; justify-content: flex-start; align-items: flex-start; text-align: left; }
.hm-task > .ico { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; }
.hm-task strong { display: block; font-size: 14px; font-weight: 650; }
.hm-task small { display: block; margin-top: 5px; color: var(--ink-2); font-size: 12px; line-height: 1.5; font-weight: 400; }
.cp { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.cp-modes { display: flex; gap: 6px; padding: 8px 16px 12px; border-bottom: 1px solid var(--line); }
.cp-mode { border: 1px solid transparent; padding: 8px 14px; border-radius: 999px; color: var(--ink-2); background: transparent; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 38px; }
.cp-mode[aria-pressed="true"] { background: var(--sheet); border-color: var(--line); color: var(--ink); }
.cp-mode:hover { background: var(--sheet); }
.cp-empty { padding: 18px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 760px) {
  .hm-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-way.hm-task { min-height: 112px; padding: 13px; flex-direction: column; gap: 9px; }
  .hm-start-head { gap: 8px; }
  .hm-start-head h2 { font-size: 15px; }
  .hm-start-head .btn { flex-shrink: 0; }
  .ab-search { width: auto; padding-inline: 11px; }
  .ab-search-t { display: inline; font-size: 12px; }
}

/* Home keeps one main task visible; the full tool list stays one click away. */
.hm-simple { max-width: 1040px; margin-inline:auto; gap:36px; }
.hm-simple .hm-hero { padding:36px 0 0; }
.hm-simple-title { margin:0 0 10px; font-size:clamp(28px,4vw,40px);line-height:1.2;letter-spacing:-.035em;color:var(--on-sky,var(--ink)); }
.hm-simple .ha-hint { margin:0 0 26px;max-width:600px; }
.hm-simple .hm-start { width:min(100%,800px);margin-top:18px; }
.hm-simple .hm-task-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hm-simple .hm-way.hm-task { min-height:88px; }
.hm-simple .hm-start-head { margin:12px 0 0; }
.hm-simple .ha-row { align-items:center; }
.hm-simple .ha-go { flex-direction:row-reverse; }
.ha-options { position:relative;text-align:left; }
.ha-options summary { padding:10px 8px;cursor:pointer;font-size:13px;color:var(--ink-2);border-radius:10px; }
.ha-options summary:focus-visible { outline:2px solid var(--ink);outline-offset:2px; }
.ha-options[open] .ha-chips { position:absolute;top:100%;left:0;z-index:20;width:270px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--sheet,#fff);box-shadow:0 8px 24px #25263a20; }
.tour-dialog { max-width:520px; }
.tour-progress { margin:2px 0 20px;font-size:12px;font-weight:650;color:var(--ink-2); }
.tour-symbol { display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;border:1px solid var(--line);border-radius:16px;background:var(--sheet); }
.tour-symbol .ico { width:24px;height:24px; }
.tour-title { margin:0 0 12px;font-size:24px;line-height:1.25; }
.tour-description { margin:0 0 16px;line-height:1.65; }
.tour-tip { margin:0;padding:14px;border-radius:12px;background:var(--sheet);font-size:14px;line-height:1.6;color:var(--ink-2); }
.tour-controls { display:flex;align-items:center;gap:8px;margin-top:26px;flex-wrap:wrap; }
.tour-controls .btn { min-height:44px; }
@media(max-width:760px) {
  .hm-simple .hm-hero { padding-top:20px; }
  .hm-simple .ha-row { flex-direction:row; }
  .hm-simple .ha-go { flex:1;justify-content:flex-start; }
  .hm-simple .ha-go .btn { flex:initial; }
  .hm-simple .hm-way.hm-task { min-height:100px; }
  .hm-simple .hm-start-head { gap:10px; }
  .hm-simple .ha-hint { font-size:14px;margin-bottom:20px; }
  .tour-controls { gap:6px; }
  .tour-controls .btn { padding-inline:12px; }
}

/* Live tour: the highlighted app control remains interactive. */
.tour-live-root { position:fixed;inset:0;z-index:1100;pointer-events:none; }
.tour-spotlight { position:fixed;border:2px solid var(--acc,#a87827);border-radius:14px;box-shadow:0 0 0 9999px #18182b88;pointer-events:none; }
.tour-live-card { position:fixed;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--sheet,#fff);color:var(--ink);box-shadow:0 12px 48px #16162c44;pointer-events:auto;text-align:left; }
.tour-live-card .tour-progress { margin-bottom:12px; }
.tour-live-card .tour-title { font-size:21px; }
.tour-live-card .tour-description { margin-bottom:12px;font-size:14px;line-height:1.65; }
.tour-live-hint { font-size:12px;line-height:1.5;color:var(--ink-2);margin:0; }
.tour-live-card .tour-controls { margin-top:18px;gap:5px; }
.tour-live-card .tour-controls .btn { padding-inline:10px;font-size:13px; }
.ha-notebook { max-width:240px;background:var(--sheet,#fff);color:var(--ink);border:1px solid var(--line);padding-inline:10px;cursor:pointer;font:inherit;font-size:13px; }

/* A small number of clear starts, with preferences out of the way. */
.hm-handwriting-link, .hm-resume-workspace { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 10px 0; color: var(--on-sky, var(--ink)); font-size: 14px; text-decoration: none; }
.hm-handwriting-link:hover, .hm-resume-workspace:hover { text-decoration: underline; }
.hm-resume-workspace[hidden] { display: none; }
.ws-advanced { margin: 16px 0; border-top: 1px solid var(--line); padding-top: 14px; }
.ws-advanced summary { cursor: pointer; color: var(--text-2); font-size: 14px; }
.ws-advanced[open] summary { margin-bottom: 16px; }
.ws-advanced .ws-styles { margin-bottom: 16px; }
@media (max-width: 600px) { .hm-handwriting-link, .hm-resume-workspace { font-size: 13px; } }