/* Font: Inter (self-hosted, variable weight). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --sidebar: #1f2433;
  --sidebar-text: #c9cede;
  --sidebar-active: #2e3549;
  --text: #1c2030;
  --muted: #6b7185;
  --border: #e3e6ef;
  --primary: #036efc;
  --primary-text: #ffffff;
  /* Sidebar: its brightest text (names, the open page) and faint fills (counts, the + button,
     lines). White on the usual dark sidebars; Sunshine's light sidebar uses dark ones. */
  --sidebar-strong: #ffffff;
  --sidebar-tint: rgba(255, 255, 255, 0.1);
  --sidebar-line: rgba(255, 255, 255, 0.08);
  --danger: #d6455d;
  --overdue: #d6455d;
  --today: #e08a1e;
  --done: #1f9d55;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 24, 40, 0.06), 0 2px 8px rgba(20, 24, 40, 0.04);
  color-scheme: light;
}

/* Theme (Settings → Appearance): data-theme="light" | "dark" on <html>; none = Auto (follow the device). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12141c;
    --surface: #1b1e29;
    --sidebar: #0d0f15;
    --sidebar-text: #aab0c2;
    --sidebar-active: #1f2332;
    --text: #e7e9f0;
    --muted: #8d93a7; --done: #3cc177;
    --border: #2a2e3d;
    --primary: #3d8bff;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12141c;
  --surface: #1b1e29;
  --sidebar: #0d0f15;
  --sidebar-text: #aab0c2;
  --sidebar-active: #1f2332;
  --text: #e7e9f0;
  --muted: #8d93a7; --done: #3cc177;
  --border: #2a2e3d;
  --primary: #3d8bff;
  --shadow: none;
  color-scheme: dark;
}

/* Pro color themes (Settings → Pro): data-palette on <html> ("lavender" | "lagoon" | "blossom";
   none = Classic). Each swaps the accent, sidebar and background tints and has a light and a dark
   version, so it works with Light, Dark and Auto. The same rules color each theme's preview card
   in Settings (.palette-card[data-p]), so the previews always match. Classic previews use the
   defaults above. Dark rules list every color the light ones set, so they always win in dark. */
.palette-card[data-p="classic"] {
  --bg: #f6f7fb; --surface: #ffffff; --sidebar: #1f2433; --sidebar-text: #c9cede; --sidebar-active: #2e3549; --primary: #036efc; --border: #e3e6ef;
}
:root[data-palette="lavender"], .palette-card[data-p="lavender"] {
  --bg: #f6f5fc; --surface: #ffffff; --sidebar: #221d3a; --sidebar-text: #cdc7e6; --sidebar-active: #342d55; --primary: #7556e6; --border: #e5e2f3;
}
:root[data-palette="lagoon"], .palette-card[data-p="lagoon"] {
  --bg: #f2f8f8; --surface: #ffffff; --sidebar: #13302f; --sidebar-text: #bfd8d6; --sidebar-active: #1f4644; --primary: #0d8f86; --border: #dbe9e8;
}
:root[data-palette="blossom"], .palette-card[data-p="blossom"] {
  --bg: #fbf5f8; --surface: #ffffff; --sidebar: #331b29; --sidebar-text: #e3c8d6; --sidebar-active: #4a2a3c; --primary: #d23f8a; --border: #f0e0e8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .palette-card[data-p="classic"] {
    --bg: #12141c; --surface: #1b1e29; --sidebar: #0d0f15; --sidebar-text: #aab0c2; --sidebar-active: #1f2332; --primary: #3d8bff; --border: #2a2e3d;
  }
  :root[data-palette="lavender"]:not([data-theme="light"]), :root:not([data-theme="light"]) .palette-card[data-p="lavender"] {
    --bg: #13111c; --surface: #1c1928; --sidebar: #0e0c16; --sidebar-text: #b3abd0; --sidebar-active: #262139; --primary: #9a83ff; --border: #2d2840;
  }
  :root[data-palette="lagoon"]:not([data-theme="light"]), :root:not([data-theme="light"]) .palette-card[data-p="lagoon"] {
    --bg: #0e1617; --surface: #162122; --sidebar: #091011; --sidebar-text: #a3c0bd; --sidebar-active: #1a2c2d; --primary: #2cc2b4; --border: #233436;
  }
  :root[data-palette="blossom"]:not([data-theme="light"]), :root:not([data-theme="light"]) .palette-card[data-p="blossom"] {
    --bg: #1a1117; --surface: #241821; --sidebar: #110a0f; --sidebar-text: #c9aebd; --sidebar-active: #2e1e29; --primary: #f06aae; --border: #3a2733;
  }
}
:root[data-theme="dark"] .palette-card[data-p="classic"] {
  --bg: #12141c; --surface: #1b1e29; --sidebar: #0d0f15; --sidebar-text: #aab0c2; --sidebar-active: #1f2332; --primary: #3d8bff; --border: #2a2e3d;
}
:root[data-palette="lavender"][data-theme="dark"], :root[data-theme="dark"] .palette-card[data-p="lavender"] {
  --bg: #13111c; --surface: #1c1928; --sidebar: #0e0c16; --sidebar-text: #b3abd0; --sidebar-active: #262139; --primary: #9a83ff; --border: #2d2840;
}
:root[data-palette="lagoon"][data-theme="dark"], :root[data-theme="dark"] .palette-card[data-p="lagoon"] {
  --bg: #0e1617; --surface: #162122; --sidebar: #091011; --sidebar-text: #a3c0bd; --sidebar-active: #1a2c2d; --primary: #2cc2b4; --border: #233436;
}
:root[data-palette="blossom"][data-theme="dark"], :root[data-theme="dark"] .palette-card[data-p="blossom"] {
  --bg: #1a1117; --surface: #241821; --sidebar: #110a0f; --sidebar-text: #c9aebd; --sidebar-active: #2e1e29; --primary: #f06aae; --border: #3a2733;
}

/* School themes (Settings → Pro): one fixed look each, whatever Light / Dark / Auto says — app.js
   (applyLook) and the inline script in index.html also set data-theme to the theme's own mode, so
   every light- or dark-only rule follows. "html:root" outranks the light and dark rules above.
   Texas A&M: maroon and white, light. Notre Dame: navy and gold, dark (gold buttons, navy text). */
/* Sunshine (a Pro color theme, always light): butter yellow pages, a pastel sunshine yellow
   sidebar with warm brown text, and honey-brown buttons (dark enough to read on yellow; not orange,
   which means "today"). Its light sidebar uses dark --sidebar-strong / tint / line colors. */
html:root[data-palette="sunshine"], .palette-card[data-p="sunshine"] {
  --bg: #FFF6D2; --surface: #FFFDF3; --sidebar: #FFE88C; --sidebar-text: #6A5516; --sidebar-active: #FAD75A;
  --sidebar-strong: #3A2D04; --sidebar-tint: rgba(106, 85, 22, 0.1); --sidebar-line: rgba(106, 85, 22, 0.16);
  --text: #2F2709; --muted: #7C6A31; --border: #EEDFA2; --primary: #8A6100; --primary-text: #FFFFFF;
  --shadow: 0 1px 2px rgba(90, 70, 10, 0.07), 0 2px 8px rgba(90, 70, 10, 0.05); color-scheme: light;
}
/* Texas A&M colors from the university's brand guide (marcomm.tamu.edu → Brand colors): Aggie
   Maroon #500000 and White; grays #202020 / #707070 / #D1D1D1; stone #D6D3C4 (the page background
   is a light wash of it: 30% stone on white); accent maroon #732F2F (the selected item in the sidebar). */
html:root[data-palette="tamu"], .palette-card[data-p="tamu"] {
  --bg: #F3F2ED; --surface: #FFFFFF; --sidebar: #500000; --sidebar-text: #D1D1D1; --sidebar-active: #732F2F;
  --text: #202020; --muted: #707070; --border: #D1D1D1; --primary: #500000; --primary-text: #FFFFFF;
  --shadow: 0 1px 2px rgba(32, 32, 32, 0.06), 0 2px 8px rgba(32, 32, 32, 0.04); color-scheme: light;
}
html:root[data-palette="notredame"], .palette-card[data-p="notredame"] {
  --bg: #0a1a33; --surface: #10264a; --sidebar: #061226; --sidebar-text: #c3cde0; --sidebar-active: #173362;
  --text: #f3f5f9; --muted: #9fadc6; --border: #21406f; --primary: #c99700; --primary-text: #0c2340;
  --done: #3cc177; --shadow: none; color-scheme: dark;
}

/* Phones and the iPhone app, in dark mode: true black behind everything (OLED screens show black
   as switched-off pixels), with raised parts — cards, sheets, menus, the sidebar's highlight — in a
   very dark gray, like iPhone's own dark mode. Color themes keep their accent color. The school
   themes have their own look and are left alone. "html:root" outranks the dark rules above. */
@media (max-width: 760px) {
  html:root[data-theme="dark"]:not([data-palette="notredame"]) {
    --bg: #000000; --surface: #1c1c1e; --border: #2c2c2e; --sidebar: #000000; --sidebar-active: #1c1c1e; --shadow: none;
  }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]):not([data-palette="notredame"]) {
    --bg: #000000; --surface: #1c1c1e; --border: #2c2c2e; --sidebar: #000000; --sidebar-active: #1c1c1e; --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.45 var(--font);
  background: var(--bg);
  color: var(--text);
}

[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Phones/tablets: keep zoom fixed at 100%. iOS zooms into any field with text under 16px,
   so fields get 16px; touch-action stops double-tap zoom. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse) {
  html, body { touch-action: pan-x pan-y; }
  input, select, textarea { font-size: 16px; }
}

/* ---------- layout ---------- */

/* App shell: the page itself never scrolls. The sidebar and the main area each scroll on
   their own, and overscroll-behavior stops a scroll (or bounce) in one from moving the other. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.layout { display: flex; height: 100vh; height: 100dvh; }

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  height: 100%;
  overflow: hidden;
}
/* The logo stays at the top and your name + settings stay at the bottom; only the pages and
   sections in between scroll when there are many. */
.sidebar > nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -12px; padding: 0 12px; scrollbar-width: thin; }
.sidebar > .brand, .sidebar > .account { flex-shrink: 0; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--sidebar-strong);
  padding: 4px 10px 18px;
}
.brand-logo { width: 26px; height: auto; display: block; }
/* Hovering the logo: it flips around (a full turn, like a card) while growing, and stays big;
   moving off shrinks it back. Rotation and size are separate properties, so leaving undoes only
   the size (a full turn looks the same as none). Mouse only, and not with reduced motion. */
.brand-mark { position: relative; display: block; z-index: 1; perspective: 300px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .brand-logo { transition: scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .brand-mark:hover .brand-logo {
    rotate: y 360deg; scale: 1.45;
    transition: rotate 0.6s cubic-bezier(0.3, 0.7, 0.3, 1), scale 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
}

.brand-add { position: relative; margin-left: auto; }
.brand-add-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--sidebar-tint); color: var(--sidebar-text);
  transition: background 0.15s, color 0.15s;
}
.brand-add-btn svg { width: 14px; height: 14px; }
.brand-add-btn:hover { background: var(--sidebar-active); color: var(--sidebar-strong); }
.brand-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex; flex-direction: column; gap: 2px;
}
.brand-menu[hidden] { display: none; }
.brand-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: none; padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 14px; font-weight: 500; letter-spacing: normal; color: var(--text);
}
.brand-menu button:hover, .brand-menu button:focus-visible { background: var(--bg); outline: none; }
.brand-menu-icon { width: 18px; text-align: center; display: inline-grid; place-items: center; color: var(--muted); }
.brand-menu-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.danger .brand-menu-icon { color: inherit; }

nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.nav-item:hover { background: var(--sidebar-active); color: var(--sidebar-strong); }
.nav-item.active { background: var(--sidebar-active); color: var(--sidebar-strong); font-weight: 600; }
.nav-item.add { color: var(--muted); margin-top: 4px; }

/* Drag to reorder classes / organizations */
.group-nav .nav-item { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.reordering { cursor: grabbing; }
.reordering .nav-item { cursor: grabbing; }
/* The others glide out of the way; the dragged one follows the pointer with no lag, but eases its
   lift (size and shadow) and, on release, glides into its new slot. */
.group-nav .nav-item {
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease,
    translate 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reordering .nav-item { position: relative; }
.nav-item.dragging, .nav-item.dropping { background: var(--sidebar-active); color: var(--sidebar-strong); z-index: 2; }
.group-nav .nav-item.dragging {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  scale: 1.03;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease, scale 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.group-nav .nav-item.dropping { transition: translate 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.22s ease, box-shadow 0.22s ease; }
.group-nav.no-motion .nav-item { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .group-nav .nav-item { transition: none; } }

/* Compact sidebar (Settings → Appearance): classes and organizations sit closer together. */
:root[data-sidebar="compact"] .group-nav { display: flex; flex-direction: column; gap: 0; }
:root[data-sidebar="compact"] .group-nav .nav-item { padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
:root[data-sidebar="compact"] .group-nav .count { font-size: 11px; }
.nav-item.add:hover { color: var(--sidebar-strong); }

.nav-icon { width: 18px; text-align: center; flex-shrink: 0; }
.nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.nav-item .dot { margin: 0 4px; }

/* Sidebar counts: plain numbers in a tidy right-hand column (no bubbles); red while something
   in that class is overdue. */
.count {
  margin-left: auto; min-width: 18px; padding: 0; text-align: right;
  font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0;
  color: var(--sidebar-text); opacity: 0.6; transition: color 0.15s ease, opacity 0.15s ease;
}
.nav-item:hover .count, .nav-item.active .count { opacity: 0.9; }
.count.late { color: color-mix(in srgb, var(--overdue) 78%, var(--sidebar-strong)); opacity: 1; font-weight: 600; }
.count:empty { display: none; }

.nav-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 18px 10px 6px;
}
/* Section headings: the name, and a ⋯ (rename / delete) that shows on hover, focus or touch. */
.nav-block .nav-section { display: flex; align-items: center; gap: 6px; padding: 12px 4px 4px 10px; min-height: 36px; }
.nav-section-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-more {
  width: 24px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 6px;
  background: none; color: var(--sidebar-text); cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background-color 0.15s ease;
}
.section-more svg { width: 15px; height: 15px; fill: currentColor; }
.nav-block:hover .section-more, .section-more:focus-visible, .section-more[aria-expanded="true"] { opacity: 1; }
.section-more:hover, .section-more[aria-expanded="true"] { background: var(--sidebar-active); color: var(--sidebar-strong); }
.section-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
@media (hover: none) { .section-more { opacity: 0.7; } }
.section-menu { position: fixed; top: 0; left: 0; right: auto; z-index: 40; min-width: 170px; animation: pop-in 0.14s cubic-bezier(0.2, 0.9, 0.3, 1.2); transform-origin: top right; }
.section-menu .danger { color: var(--danger); }
.menu-sep { height: 1px; margin: 3px 4px; background: var(--border); }

.link-btn {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 10px;
  text-align: left;
}
.link-btn:hover { color: #fff; }

.main { flex: 1; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 24px 32px 48px; }
/* Content width limits live on the children so the scrollbar stays at the window edge. */
.main > * { max-width: 900px; }
.main.wide > * { max-width: 1280px; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.title-wrap { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.title-wrap h1 { margin: 0; font-size: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-text { min-width: 0; display: flex; flex-direction: column; }
.page-eyebrow { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.page-subtitle { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.title-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
/* The personal group (named after you, in Personal): a person in its color instead of a dot. */
/* It takes exactly the space a dot takes wherever it is (dots are sized per place), so names line
   up with the other groups; the person is drawn a little larger, centered on that spot. */
.dot.person-mark, .title-dot.person-mark { background: none !important; border-radius: 0; position: relative; color: var(--mark, var(--muted)); }
.dot.person-mark svg {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%);
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.title-dot.person-mark { width: 22px; height: 22px; display: inline-grid; place-items: center; }
.title-dot.person-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* In the dark sidebar the gray reads too faint; use the sidebar's text color. */
.sidebar .dot.person-mark { color: var(--sidebar-text); }
.title-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.title-tools { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.title-tools:empty { display: none; }
.title-tools .info-btn.danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }

.menu-btn {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 18px;
}

.scrim { display: none; }

/* ---------- controls ---------- */

.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 4px 10px; font-size: 13px; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 8px 10px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: transparent; }

label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
label .muted { font-weight: 400; }
.muted { color: var(--muted); }
.error { color: var(--danger); margin: 0; font-size: 14px; }

.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

/* ---------- cards & lists ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}


.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
.toggle { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.toggle input { width: auto; }

.group { margin-bottom: 22px; }
.group h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 8px 2px;
}
.group-toggle {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 4px 2px 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; border-radius: 6px;
}
.group-toggle:hover { color: var(--text); }
.group.overdue .group-toggle:hover, .group.today .group-toggle:hover { filter: brightness(0.85); }
.chev { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.15s ease; }
.group.collapsed .chev { transform: rotate(-90deg); }
/* Sections fold smoothly: the body's single grid row animates between full height and 0. */
.group { transition: margin-bottom 0.22s ease; }
.group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease; }
.group-body > .list { min-height: 0; overflow: hidden; }
.group.collapsed .group-body { grid-template-rows: 0fr; opacity: 0; }
.group.collapsed { margin-bottom: 12px; }
.group.overdue h3 { color: var(--overdue); }
.group.today h3 { color: var(--today); }

.list { list-style: none; margin: 0; padding: 0; }

.item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.item:last-child { border-bottom: 0; }
.item .check { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--primary); }
/* Events (calendar day view): no checkbox, so the name starts where checkboxes do. */
/* Calendar day view mixes to-dos and events: each row's details line starts at the left edge
   (where checkboxes are), under the checkbox, so to-do and event details line up. The 4px
   matches the checkbox's built-in left margin. */
.day-list .item { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 0; align-items: start; }
.day-list .item .body { display: contents; }
.day-list .item .check { grid-column: 1; grid-row: 1; }
.day-list .item .title { grid-column: 2; grid-row: 1; }
.day-list .item.event .title { grid-column: 1 / 3; margin-left: 4px; }
.day-list .item .meta, .day-list .item .notes { grid-column: 1 / 3; margin-left: 4px; }
.day-list .item .actions { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.item .body { flex: 1; min-width: 0; }
.item .title { font-weight: 600; word-break: break-word; }
.item.done .title { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.item .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--muted); margin-top: 2px; align-items: center; }
.item .notes { font-size: 13px; color: var(--muted); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.item .due.overdue { color: var(--overdue); font-weight: 600; }
.item .due.today { color: var(--today); font-weight: 600; }
.item .actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.item:hover .actions, .item:focus-within .actions { opacity: 1; }

.icon-btn {
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--muted);
}
.icon-btn:hover { background: var(--bg); color: var(--text); }
.icon-btn.danger:hover { color: var(--danger); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.chip:hover { text-decoration: underline; }

.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty .big { font-size: 40px; margin-bottom: 8px; }
.empty-icon {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 15px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary);
}
.empty-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.kind-tag { font-size: 12px; color: var(--muted); }

/* ---------- dialogs ---------- */

dialog {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  width: min(440px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
dialog::backdrop { background: rgba(10, 12, 20, 0.45); }
.dialog-form { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.dialog-form h2 { margin: 0 0 4px; font-size: 19px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* Controls ease between states instead of snapping. */
.btn, .nav-item, .icon-btn, .link-btn, .tab, .choice, .swatch, .segmented button, .account-link, .group-toggle,
input, select, textarea, .cal-chip, .cal-cell, .item {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
}
.btn:active, .icon-btn:active { transform: scale(0.97); }
.brand-menu:not([hidden]) { animation: pop-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2); transform-origin: top right; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pop-ups ease in. */
dialog[open] { animation: dialog-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
dialog[open]::backdrop { animation: backdrop-in 0.18s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } }
@keyframes backdrop-in { from { opacity: 0; } }
dialog.closing { animation: dialog-out 0.14s ease-in forwards; }
dialog.closing::backdrop { animation: backdrop-out 0.14s ease-in forwards; }
@keyframes dialog-out { to { opacity: 0; transform: translateY(4px) scale(0.98); } }
@keyframes backdrop-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog[open], dialog[open]::backdrop { animation: none; } }

/* ---------- to-do / event editor ---------- */
/* A big window: the title across the top, then When + Notes on the left and List + Location on
   the right, each in a soft panel. Phones get a full-screen sheet that slides up. */
/* (The class editor shares .item-dialog / .item-form / .item-head / .title-input in their small size.) */
.item-dialog { width: min(460px, calc(100vw - 32px)); }
.item-form { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 18px; }
.item-head { display: flex; align-items: center; gap: 10px; }
.editor-dialog {
  width: min(920px, calc(100vw - 48px)); max-width: none; height: min(720px, calc(100vh - 48px)); height: min(720px, calc(100dvh - 48px));
  max-height: none; overflow: hidden; border-radius: 18px; --close-ms: 140;
}
.editor-form { gap: 0; padding: 0; height: 100%; min-height: 0; }
.editor-form .item-head { padding: 18px 18px 0 26px; }
.item-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--muted); flex: 1; }
.item-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; transition: background 0.2s ease; }
.item-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.item-icon.is-todo, .item-icon.is-event { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.item-close {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; padding: 0; display: grid; place-items: center;
  color: var(--muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.item-close:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.item-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.item-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.item-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding: 12px 26px 20px; }

.title-input {
  border: 0; border-bottom: 1.5px solid var(--border); border-radius: 0; background: none;
  font-size: 21px; font-weight: 600; padding: 4px 2px 8px; color: var(--text); transition: border-color 0.2s ease;
}
.editor-form .title-input { font-size: 27px; font-weight: 650; letter-spacing: -0.015em; padding: 6px 2px 10px; }
.title-input:focus { outline: none; border-bottom-color: var(--primary); }
.title-input::placeholder { color: var(--muted); font-weight: 500; opacity: 0.6; }

.item-body { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: stretch; }
.item-main, .item-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.item-panel {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 16px 16px;
  background: color-mix(in srgb, var(--bg) 75%, var(--surface)); border: 1px solid var(--border); border-radius: 14px;
}
.item-panel[hidden] { display: none; }
.panel-label { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.notes-panel { flex: 1 0 auto; }
.notes-panel textarea { flex: 1; resize: none; min-height: 140px; line-height: 1.5; }
/* The panels rise in one after another as the editor opens. */
.editor-dialog.entering .title-input, .editor-dialog.entering .item-panel { animation: panel-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

.item-foot { padding: 12px 18px 16px 26px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.item-foot .dialog-actions { margin-top: 0; }
.item-foot .error:not([hidden]) { animation: reveal 0.2s ease-out; }

/* List: one choice per section (new items), then the group picker slides in. */
.kind-field { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kind-field[hidden] { display: none; }
.kind-field label { position: relative; cursor: pointer; flex-direction: row; font-weight: 500; }
.kind-field input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kind-field span {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; color: var(--text);
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.kind-field span svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.15s ease; }
.kind-field label:hover span { background: color-mix(in srgb, var(--text) 5%, transparent); }
.kind-field input:checked + span { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--primary); font-weight: 600; }
.kind-field input:checked + span svg { stroke: var(--primary); }
.kind-field input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
.kind-field input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.where-fixed { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); }
.where-fixed[hidden] { display: none; }
.where-fixed svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.where-fixed .muted { font-weight: 500; }
.group-field { display: grid; overflow: hidden; max-height: 0; opacity: 0; margin-top: -12px; transition: max-height 0.22s ease, opacity 0.2s ease, margin-top 0.22s ease; }
.group-field.shown { max-height: 60px; opacity: 1; margin-top: 0; overflow: visible; }
.where-panel:not(:has(.kind-field:not([hidden]), .where-fixed:not([hidden]), .group-field.shown)) { display: none; }

/* Icon rows */
.field-row { display: flex; align-items: center; gap: 10px; }
.field-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field-row input, .field-row select, .field-row textarea, .field-row .dd { flex: 1; min-width: 0; }

/* When: Multiple days / Repeat weekly sit side by side under the times. */
.when-toggles { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.when-toggles:not(:has(> :not([hidden]))) { display: none; }
.repeat-block[hidden], .multi-row[hidden] { display: none; }
.repeat-toggle { font-size: 14px; color: var(--text); }
.repeat-toggle input { flex: none; }
.repeat-fold, .zone-fold {
  display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr); opacity: 0; margin-top: -12px;
  transition: grid-template-rows 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease, margin-top 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.repeat-fold.open, .zone-fold.open { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }
.repeat-fold.no-anim, .zone-fold.no-anim { transition: none; }
.repeat-inner, .zone-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.zone-fold.open .zone-inner { overflow: visible; }
.repeat-inner { padding: 2px; margin: -2px; } /* room for focus rings */
.weekday-picker { display: flex; gap: 6px; }
.weekday-picker button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.weekday-picker button:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--text); }
.weekday-picker button:active { transform: scale(0.94); }
.weekday-picker button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.weekday-picker button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.repeat-until { display: flex; align-items: center; gap: 10px; }
.repeat-until-label { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.repeat-until .pk { flex: 0 1 200px; min-width: 0; }
.repeat-summary, .zone-hint { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.repeat-summary { min-height: 1.4em; }
.zone-hint:empty { display: none; }
.zone-hint { padding-left: 28px; }
@media (max-width: 400px) { .weekday-picker { gap: 4px; } .weekday-picker button { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .repeat-fold, .zone-fold, .weekday-picker button, .group-field { transition: none; }
  .editor-dialog.entering .title-input, .editor-dialog.entering .item-panel { animation: none; }
}

/* Phones: a full-screen sheet in the iPhone style (grouped panels on the page color), panels in
   the order you fill them in, Cancel / Save pinned at the bottom. */
@media (max-width: 760px) {
  .editor-dialog {
    width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; inset: 0; border: 0; border-radius: 0;
    background: var(--bg); --close-ms: 220;
  }
  .editor-dialog[open] { animation: sheet-up 0.34s cubic-bezier(0.2, 0.9, 0.25, 1); }
  .editor-dialog.closing { animation: sheet-down 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }
  .notes-panel textarea { resize: vertical; }
  .editor-form .item-head { padding: calc(env(safe-area-inset-top) + 12px) 12px 0 18px; }
  .item-scroll { padding: 10px 16px 20px; gap: 14px; }
  .editor-form .title-input { font-size: 24px; }
  .item-body, .item-main, .item-side { display: contents; }
  .item-body { display: flex; flex-direction: column; gap: 14px; }
  .item-panel { background: var(--surface); }
  .when-panel { order: 1; } .where-panel { order: 2; } .location-row { order: 3; } .notes-panel { order: 4; }
  .item-foot { padding: 10px 16px calc(env(safe-area-inset-bottom) + 12px); background: var(--surface); }
  .item-foot .dialog-actions .btn { padding: 10px 16px; font-size: 15px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .editor-dialog[open], .editor-dialog.closing { animation: none; } }


/* Segmented pickers (category; and the small type switch when editing) */
fieldset.seg, fieldset.mini-seg { flex-direction: row; min-width: 0; }
.seg, .mini-seg { border: 0; margin: 0; padding: 3px; display: flex; gap: 3px; background: var(--bg); border-radius: 10px; }
.seg label, .mini-seg label { flex: 1; position: relative; cursor: pointer; }
.seg input, .mini-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg span, .mini-seg span {
  display: block; text-align: center; padding: 7px 8px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--muted); transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.seg label:hover span, .mini-seg label:hover span { color: var(--text); }
.seg input:checked + span, .mini-seg input:checked + span { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.seg input:focus-visible + span, .mini-seg input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
.seg input:disabled + span { opacity: 0.4; cursor: not-allowed; }
.mini-seg { flex: 0 0 auto; padding: 2px; border-radius: 8px; }
.mini-seg span { padding: 4px 10px; font-size: 12px; border-radius: 6px; white-space: nowrap; }
.mini-seg label { flex: 0 0 auto; }


/* Class / organization pop-up: header dot previews the chosen color. */
.group-icon { background: color-mix(in srgb, var(--group-color, var(--primary)) 16%, var(--surface)); transition: background 0.2s ease; }
.group-icon span { width: 12px; height: 12px; border-radius: 50%; background: var(--group-color, var(--primary)); transition: background 0.2s ease; }
.color-block { display: flex; flex-direction: column; gap: 8px; }
.color-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.color-block .swatches { margin-top: 0; }
.swatch { transition: transform 0.12s ease, border-color 0.15s ease; }
.swatch:hover { transform: scale(1.1); }

.dialog-actions .delete-left { margin-right: auto; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -8px; }
.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.swatch.selected { border-color: var(--text); box-shadow: inset 0 0 0 2px var(--surface); }

/* Eyedropper circle: rainbow ring around a plain center, or filled with the custom color once chosen. */
.swatch-custom {
  display: grid;
  place-items: center;
  background: conic-gradient(#f43f5e, #f5a524, #eab308, #2fa36b, #0ea5b7, #4f6bed, #a855f7, #f43f5e);
}
.swatch-custom span {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.swatch-custom svg { width: 9px; height: 9px; }
.swatch-custom:hover span { color: var(--text); }
.swatch-custom.has-color span { background: var(--custom); color: var(--custom-ink); }
.swatch-custom[aria-expanded="true"]:not(.selected) { border-color: var(--border); }

/* Hex box revealed by the eyedropper: color preview (doubles as a native picker) inside the input. */
.custom-color { margin-top: -4px; animation: reveal 0.15s ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }
.hex-field { position: relative; width: 160px; }
.hex-field input[name="hex"] {
  padding-left: 40px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hex-field input[name="hex"].invalid { border-color: var(--danger); outline-color: var(--danger); }
.hex-field input[type="color"] {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 6px;
  background: none; cursor: pointer; overflow: hidden;
}
.hex-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.hex-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.hex-field input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }

/* ---------- login ---------- */

.login { height: 100vh; height: 100dvh; overflow-y: auto; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; margin-bottom: 6px; }
.login-logo { width: 72px; height: auto; margin-bottom: 10px; filter: drop-shadow(0 4px 10px rgba(20, 24, 40, 0.12)); }
.login-card h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.login-brand p { margin: 0; font-size: 14px; }
.empty-logo { width: 64px; height: auto; margin-bottom: 8px; }

/* Sign in / Create account: a white thumb slides under the active tab. */
.tabs { position: relative; display: flex; background: var(--bg); border-radius: 8px; padding: 3px; gap: 3px; }
.tab-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4.5px); border-radius: 6px;
  background: var(--surface); box-shadow: var(--shadow); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.login-card[data-mode="signup"] .tab-thumb { transform: translateX(calc(100% + 3px)); }
.tab { position: relative; flex: 1; border: 0; background: none; padding: 7px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 600; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.hint { font-size: 13px; margin: 0; }

/* Create account fields fold away (0fr ⇄ 1fr) instead of popping; the negative margin hides the
   card's gap while folded. */
.signup-extra {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: -14px;
  transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease, margin-top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.signup-extra.open { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }
.signup-extra-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 2px; margin: -2px; }

/* Entrance: the card rises and fades in, the logo eases in just after. Leaving: fades out. */
.login:not([hidden]) .login-card { animation: login-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.login:not([hidden]) .login-logo { animation: logo-in 0.5s 0.08s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes login-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes logo-in { from { opacity: 0; transform: scale(0.85); } }
.login.leaving .login-card { transition: opacity 0.2s ease, transform 0.2s ease; opacity: 0; transform: scale(0.98); }
#login-error:not([hidden]) { animation: reveal 0.2s ease-out; }
/* Sign-in card folds: parts that slide away / in when switching to "Forgot password?". The
   negative margin hides the card's 14px gap while a fold is closed. */
.fold {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease, margin-top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fold-inner { min-height: 0; overflow: hidden; padding: 2px; margin: -2px; display: flex; flex-direction: column; }
.login-card:not([data-mode="forgot"]) .show-in-forgot,
.login-card[data-mode="forgot"] .hide-in-forgot { grid-template-rows: 0fr; opacity: 0; margin-top: -14px; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.forgot-link, .back-link {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--primary);
}
.forgot-link:hover, .back-link:hover { text-decoration: underline; }
.login-card[data-mode="signup"] .forgot-link { visibility: hidden; }
.back-link { align-self: center; font-size: 13.5px; padding: 2px 4px; }
.forgot-intro { margin: 0; font-size: 14px; line-height: 1.45; text-align: center; }
.forgot-sent {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--done) 12%, var(--surface));
  animation: reveal 0.2s ease-out;
}
.forgot-sent svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--done); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.forgot-sent a { color: var(--primary); font-weight: 600; }
/* New-password page (forgot.finallyapp.us). */
.reset-fields { display: flex; flex-direction: column; gap: 14px; }
.reset-fields[hidden], .reset-action[hidden] { display: none; }
.reset-action { text-align: center; text-decoration: none; justify-content: center; }

/* Sign-in site, while a new user confirms their email / answers the profile questions: the
   pop-ups show over the plain background, without the sign-in card. */
.login.onboarding .login-card { display: none; }

/* Field messages under the sign-in inputs: slide open / closed (0fr ⇄ 1fr). The negative margin
   hides the label's gap while closed. */
.field-msg {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: -4px;
  transition: grid-template-rows 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease, margin-top 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.field-msg.show { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }
.field-msg > div { min-height: 0; overflow: hidden; }
.field-msg span {
  display: flex; align-items: flex-start; gap: 6px; padding-top: 2px;
  font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--danger);
}
.field-msg span::before {
  content: "!"; flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1;
  background: var(--danger); color: #fff;
}
.login-card input.invalid { border-color: var(--danger); }
.login-card input.invalid:focus { outline-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }

/* Checkboxes in toggles (Remember this device, Show completed): rounded square that fills blue
   with a white check. */
.toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 0; padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--muted) 55%, var(--border)); border-radius: 5px; background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
}
.toggle input[type="checkbox"]::after {
  content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.toggle input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.toggle input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.toggle input[type="checkbox"]:hover { border-color: var(--primary); }
.toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.toggle.remember { gap: 10px; font-size: 14px; font-weight: 500; color: var(--text); user-select: none; }

.account { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--sidebar-line); padding-top: 12px; margin-top: 12px; }
.account-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 6px 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.account-link:hover, .account-link.active { background: var(--sidebar-active); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.account-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.account-name { color: var(--sidebar-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-type { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0.02em; }
.gear { color: var(--muted); font-size: 14px; margin-left: auto; padding: 0 2px; }
.account-link:hover .gear { color: var(--sidebar-strong); }

/* profile form (first-time prompt + settings) */
.profile-form { display: flex; flex-direction: column; gap: 14px; }
.profile-form fieldset, .theme-field { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.profile-form legend, .theme-field legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 6px; }
.choices { display: flex; gap: 8px; }
.choice { flex: 1; flex-direction: row; justify-content: center; position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; cursor: pointer; color: var(--text); font-size: 15px; font-weight: 500; background: var(--surface); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); font-weight: 600; }
.choice:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.choice:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.profile-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 4px; }
.profile-intro img { width: 48px; height: auto; margin-bottom: 6px; }
.profile-intro p { margin: 0; font-size: 14px; }
.profile-dialog { width: min(480px, calc(100vw - 32px)); }
/* Setup screens' entrance (setupEntrance in app.js): logo pops, then each piece rises in turn. */
.profile-dialog.entering .w-in { animation: setup-rise 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(90ms + var(--i) * 55ms); }
.profile-dialog.entering .profile-intro img.w-in { animation-name: setup-pop; animation-duration: 0.5s; }
@keyframes setup-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes setup-pop { from { opacity: 0; transform: scale(0.7) rotate(-8deg); } 60% { transform: scale(1.06) rotate(2deg); } }
/* Student setup: type a class or organization, Enter/Add puts it in the list as a chip. */
.student-setup { width: min(520px, calc(100vw - 32px)); }
.setup-adder { display: flex; flex-direction: column; gap: 8px; }
.setup-adder-head { display: flex; align-items: baseline; justify-content: space-between; }
.setup-adder-title { font-size: 13px; font-weight: 700; color: var(--text); }
.setup-adder-count { font-size: 12px; }
.setup-adder-row { display: flex; gap: 8px; }
.setup-adder-row input { flex: 1; min-width: 0; }
.setup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.setup-chips:empty { display: none; }
.setup-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 4px 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--chip) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--chip) 30%, var(--border));
  font-size: 13.5px; font-weight: 600;
}
.setup-chip .dot { width: 8px; height: 8px; }
.setup-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.setup-chip-x {
  width: 22px; height: 22px; flex-shrink: 0; border: 0; border-radius: 50%; background: none; color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.setup-chip-x:hover { background: color-mix(in srgb, var(--chip) 20%, var(--surface)); color: var(--text); }
.setup-skip { margin-right: auto; font-size: 13.5px; }
.canvas-ask { width: min(440px, calc(100vw - 32px)); }
.canvas-ask .dialog-actions { justify-content: center; }
/* "Current college student?" Yes folds open the school and graduation year; No folds them away. */
.student-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease; }
.student-fold.open { grid-template-rows: 1fr; opacity: 1; }
.student-fold-inner { min-height: 0; overflow: hidden; padding: 0 2px; margin: 0 -2px; } /* room for focus rings */
.settings-card .student-fold .setting-row:first-child { border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .student-fold { transition: none; } .profile-dialog.entering .w-in { animation: none; } }

/* ---------- sections: new / rename pop-up, setup template ---------- */
.section-icon { display: grid; place-items: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.section-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.section-hint { margin: -4px 2px 0; font-size: 13px; }
.template-options { display: flex; flex-direction: column; gap: 10px; }
.template-card {
  position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px; cursor: pointer;
  font-weight: 400; color: var(--text); margin: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.template-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.template-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.template-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.template-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
.template-emoji {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary);
}
.template-emoji svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.template-text { display: flex; flex-direction: column; gap: 3px; }
.template-name { font-weight: 700; font-size: 15px; }
.template-desc { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.template-desc b { color: var(--text); font-weight: 600; }

/* ---------- settings ---------- */
/* A window over the app: sections in a sidebar on the left, the chosen one on the right. It keeps
   one size, so switching sections never resizes it. */
.settings-dialog { width: min(860px, calc(100vw - 32px)); height: min(600px, calc(100vh - 48px)); height: min(600px, calc(100dvh - 48px)); max-height: none; overflow: hidden; }
.settings-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: 100%; }
.settings-nav { background: var(--bg); border-right: 1px solid var(--border); padding: 20px 12px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.settings-title { margin: 0 0 0 10px; font-size: 18px; font-weight: 700; }
.settings-tabs { position: relative; display: flex; flex-direction: column; gap: 2px; }
.settings-tab {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); text-align: left; transition: color 0.18s ease;
}
.settings-tab svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--text); }
.settings-tab.active svg { color: var(--primary); }
.settings-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* The highlight behind the chosen tab glides between them. */
.settings-thumb {
  position: absolute; left: 0; top: 0; width: var(--w, 0); height: var(--h, 0); border-radius: 8px;
  background: var(--surface); box-shadow: var(--shadow);
  transform: translate(var(--x, 0), var(--y, 0));
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.settings-thumb.instant { transition: none; }
.settings-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 6px 26px; }
.settings-head h3 { margin: 0; font-size: 20px; font-weight: 700; }
.settings-close {
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.settings-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.settings-close:hover { background: var(--bg); color: var(--text); }
.settings-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.settings-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 26px 26px; }
.settings-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .settings-thumb, .settings-tab { transition: none; } }
/* Phones: nearly full screen; the sections become a tab row under the title. */
@media (max-width: 760px) {
  .settings-dialog { width: calc(100vw - 16px); max-width: none; height: calc(100vh - 16px); height: calc(100dvh - 16px); }
  .settings-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings-nav { min-width: 0; }
  .settings-nav { border-right: 0; border-bottom: 1px solid var(--border); padding: 14px 12px 10px; gap: 10px; }
  .settings-title { margin-left: 4px; padding-right: 40px; }
  .settings-tabs { flex-direction: row; background: var(--border); border-radius: 10px; padding: 3px; gap: 0; }
  .settings-tab { flex: 1; justify-content: center; gap: 6px; padding: 7px 4px; font-size: 13px; }
  .settings-tab svg { width: 15px; height: 15px; }
  .settings-head { position: absolute; top: 8px; right: 8px; padding: 0; }
  .settings-head h3 { display: none; }
  .settings-body { padding: 14px 14px 22px; }
}
@media (max-width: 400px) { .settings-tab svg { display: none; } }

/* An on/off switch (admin page Beta column, Settings → Beta features). */
.switch { position: relative; display: inline-flex; cursor: pointer; vertical-align: middle; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch-track {
  width: 38px; height: 22px; border-radius: 999px; background: var(--border); position: relative;
  transition: background-color 0.2s ease;
}
.switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-thumb { transition: none; } }

/* ---------- settings → Beta features ---------- */
.import-card { margin-top: 12px; }

/* ---------- Settings → Import: import a calendar, link Canvas ---------- */
.import-dialog { width: min(520px, calc(100vw - 32px)); }
.import-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.import-step { display: flex; flex-direction: column; gap: 12px; }
.import-step[hidden] { display: none; }
.import-link .hint { margin: 6px 2px 0; font-size: 12.5px; line-height: 1.45; }
.import-file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.import-file[hidden] { display: none; }
.import-filename { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.import-found { margin: 0; font-size: 14.5px; line-height: 1.5; }
.import-unclear { display: flex; flex-direction: column; gap: 8px; }
.import-unclear[hidden] { display: none; }
.import-unclear-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.import-setall { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.import-setall .link-btn { color: var(--primary); font-weight: 600; font-size: 12.5px; padding: 0; }
.import-unclear-list { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--radius); }
.import-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.import-row + .import-row { border-top: 1px solid var(--border); }
.import-row-text { flex: 1; min-width: 0; }
.import-row-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-row-when { font-size: 12px; color: var(--muted); }
.import-row .mini-seg { flex-shrink: 0; }
.import-target { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.import-past { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.import-past[hidden] { display: none; }
.import-result { margin: 4px 0; font-size: 15px; line-height: 1.55; }
.canvas-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Google Classroom (Settings → Import and its window). */
.classroom-icon { background: color-mix(in srgb, #1e8e3e 14%, var(--surface)); color: #1e8e3e; }
.gcal-icon { background: color-mix(in srgb, #1a73e8 14%, var(--surface)); color: #1a73e8; }
.gcal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.classroom-who { margin: -4px 0 0; font-size: 13px; }
.classroom-who:empty { display: none; }
.classroom-loading { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.classroom-spinner {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--muted) 30%, transparent); border-top-color: var(--primary);
  animation: classroom-spin 0.8s linear infinite;
}
@keyframes classroom-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .classroom-spinner { animation-duration: 2.4s; } }
.classroom-status { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.classroom-status b { color: var(--text); font-weight: 600; }
.classroom-status.warn { color: var(--overdue); }

/* ---------- import and link windows (Import a calendar, Link Canvas, Google Classroom / Calendar) ---------- */
/* One big window: a header with the source's mark, a scrolling body on the page color, a footer
   with how many are chosen and the buttons. Phones get a full-screen sheet. */
.link-dialog {
  width: min(980px, calc(100vw - 48px)); max-width: none;
  height: min(760px, calc(100vh - 48px)); height: min(760px, calc(100dvh - 48px)); max-height: none;
  overflow: hidden; border-radius: 18px; --close-ms: 140;
}
.link-form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.link-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px 26px; border-bottom: 1px solid var(--border); }
.link-head .item-icon { width: 40px; height: 40px; border-radius: 12px; }
.link-head .item-icon svg { width: 21px; height: 21px; }
.link-titles { flex: 1; min-width: 0; }
.link-titles h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.link-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.link-sub:empty { display: none; }
.link-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 32px;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
}
.link-body > .import-step { max-width: 880px; margin: 0 auto; gap: 16px; }
.link-body > .import-step[hidden] { display: none; }
.link-foot { display: flex; align-items: center; gap: 16px; padding: 12px 18px 14px 26px; border-top: 1px solid var(--border); background: var(--surface); }
.link-foot .error { flex: 1; min-width: 0; font-size: 13.5px; }
.link-foot .dialog-actions { margin: 0 0 0 auto; flex-shrink: 0; }
.link-foot .dialog-actions .btn { padding-left: 18px; padding-right: 18px; }

/* Step 1 (a link or a file): centered, roomy. */
.link-body > .link-source { max-width: 600px; padding-top: clamp(8px, 7vh, 64px); gap: 18px; }
.link-source .import-link input { font-size: 15px; padding: 12px 14px; border-radius: 12px; }
.link-source .seg span { padding: 9px 12px; }
.link-source .import-link .hint { font-size: 13px; margin-top: 10px; }
.link-lead { margin: 0 0 4px; font-size: 22px; font-weight: 650; letter-spacing: -0.015em; text-align: center; }
.link-lead + .link-lead-sub { margin: -10px 0 6px; text-align: center; font-size: 14px; color: var(--muted); }
/* Loading and done: centered. */
.link-body > .link-loading { flex-direction: row; align-items: center; justify-content: center; gap: 12px; height: 100%; }
.link-loading p { margin: 0; font-size: 14.5px; }
.link-body > .link-done { align-items: center; justify-content: center; text-align: center; min-height: 100%; gap: 16px; max-width: 520px; }
.link-done .import-result { font-size: 16px; }
.done-check { width: 64px; height: 64px; }
.done-check circle { fill: color-mix(in srgb, var(--done) 12%, transparent); stroke: var(--done); stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 145; }
.done-check path { fill: none; stroke: var(--done); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; }
.link-done:not([hidden]) .done-check circle { animation: draw 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.link-done:not([hidden]) .done-check path { animation: draw 0.32s 0.38s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.link-done:not([hidden]) .done-check { animation: done-pop 0.5s 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes done-pop { 40% { transform: scale(1.08); } }

/* Above the rows: what was found, and "For the rest: Don't import · New groups". */
.link-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.link-intro .import-found { font-size: 15px; }
.pb-bulk { display: inline-flex; align-items: baseline; gap: 4px; font-size: 13px; color: var(--muted); }
.pb-bulk[hidden] { display: none; }
.pb-bulk .link-btn { padding: 2px 6px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--primary); }
.pb-bulk .link-btn:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.pb-bulk .link-btn[hidden] { display: none; }
/* Extra questions (to-do or event, past to-dos) sit in panels under the rows. */
.link-panel { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.link-panel[hidden] { display: none; }
.link-panel .import-unclear-list { max-height: 260px; }
.link-body .classroom-note { margin: 0 2px; font-size: 12.5px; }

/* The footer's progress: "2 of 3 chosen" with a bar that turns green when everything's chosen. */
.link-progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.link-progress[hidden] { display: none; }
.link-progress-bar { width: 96px; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.link-progress-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--primary); transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease; }
.link-progress.complete .link-progress-bar i { background: var(--done); }
.link-progress.complete { color: var(--text); font-weight: 600; }

/* A row: mark, name, details and what will happen; the three-way switch on the right. */
.pb-list { display: flex; flex-direction: column; gap: 10px; }
.pb-row {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  animation: pb-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--d, 0ms);
}
@keyframes pb-in { from { opacity: 0; transform: translateY(10px); } }
/* A colored edge for the choice: gray (not imported), blue (new), the group's color (sent). */
.pb-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--edge, transparent);
  transform: scaleY(0); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease;
}
.pb-row:not([data-state=""])::before { transform: none; }
.pb-row[data-state="skip"] { --edge: color-mix(in srgb, var(--muted) 55%, transparent); background: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.pb-row[data-state="new"] { --edge: var(--primary); }
.pb-row[data-state="send"] { --edge: var(--g); }
.pb-row.nudge { animation: pb-nudge 0.6s ease; }
@keyframes pb-nudge {
  0%, 100% { box-shadow: none; transform: none; }
  20% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--overdue) 30%, transparent); transform: translateX(-4px); }
  45% { transform: translateX(4px); }
  70% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--overdue) 20%, transparent); transform: translateX(-2px); }
}
.pb-mark { align-self: flex-start; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; flex-shrink: 0; background: var(--c, color-mix(in srgb, var(--muted) 45%, transparent)); }
.pb-text { flex: 1; min-width: 0; }
.pb-name { font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; transition: color 0.25s ease, opacity 0.25s ease; }
.pb-row[data-state="skip"] .pb-name { color: var(--muted); }
.pb-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.pb-out { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 24px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.pb-out b { color: var(--text); font-weight: 600; }
.pb-out .pb-in { color: var(--muted); }
.pb-out.swap { animation: pb-swap 0.26s ease both; }
@keyframes pb-swap { from { opacity: 0; transform: translateY(3px); } }
.pb-open { font-style: italic; opacity: 0.8; }
.pb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex-shrink: 0; }
.pb-suggest {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--primary) 50%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, transparent);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--primary);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.pb-suggest:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); border-style: solid; }
.pb-suggest:active { transform: scale(0.97); }
.pb-suggest:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The three-way switch: a thumb glides under the chosen button. */
.pb-seg { position: relative; display: grid; grid-template-columns: repeat(3, 166px); gap: 2px; padding: 3px; flex-shrink: 0; background: var(--bg); border-radius: 11px; }
.pb-seg.two { grid-template-columns: repeat(2, 190px); }
.pb-seg button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0;
  padding: 9px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 550; color: var(--muted); transition: color 0.2s ease, background-color 0.15s ease;
}
.pb-seg button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.pb-seg button svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pb-seg button .pb-chev { width: 12px; height: 12px; margin-left: -2px; opacity: 0.7; transition: transform 0.2s ease; }
.pb-seg button.open .pb-chev { transform: rotate(180deg); }
.pb-seg button:hover { color: var(--text); }
.pb-seg .pb-short { display: none; }
.pb-seg:not(.chosen) button:hover, .pb-seg button[aria-checked="false"]:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.pb-seg button[aria-checked="true"] { color: var(--text); font-weight: 650; }
.pb-seg button[data-mode="new"][aria-checked="true"] svg { color: var(--primary); }
.pb-seg button[data-mode="send"][aria-checked="true"] > svg:first-child { color: var(--g); }
.pb-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pb-thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: var(--w, 0); border-radius: 8px;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 0 0 1px color-mix(in srgb, var(--edge, var(--border)) 40%, transparent);
  opacity: 0; transform: translateX(var(--x, 0)) scale(0.92);
  transition: transform 0.34s cubic-bezier(0.3, 0.9, 0.3, 1.04), width 0.34s cubic-bezier(0.3, 0.9, 0.3, 1.04), opacity 0.2s ease, box-shadow 0.25s ease;
}
.pb-seg.chosen .pb-thumb { opacity: 1; transform: translateX(var(--x, 0)); }
.pb-seg.no-slide .pb-thumb { transition: opacity 0.2s ease, transform 0.2s ease; }
.pb-row[data-state="skip"] .pb-thumb { --edge: var(--muted); }

/* Send to: a menu of your groups by section. */
.pb-menu {
  position: fixed; z-index: 80; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24);
  opacity: 0; transform: scale(0.96) translateY(-4px); transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.pb-menu.show { opacity: 1; transform: none; }
.pb-menu:focus { outline: none; }
.pb-menu-search { padding: 8px; border-bottom: 1px solid var(--border); }
.pb-menu-search input { width: 100%; padding: 8px 10px; font-size: 14px; border-radius: 8px; }
.pb-menu-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 5px 6px; }
.pb-menu-sec { padding: 9px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.pb-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; user-select: none; }
.pb-opt.active { background: var(--bg); }
.pb-opt.selected { font-weight: 600; }
.pb-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-tick { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.pb-opt.selected .pb-tick { visibility: visible; }
.pb-menu-empty { padding: 12px 10px; font-size: 13px; color: var(--muted); }

@media (max-width: 960px) {
  .pb-seg { grid-template-columns: repeat(3, 138px); }
  .pb-seg.two { grid-template-columns: repeat(2, 160px); }
}
/* Phones: a full-screen sheet; each row's switch goes under its name, full width. */
@media (max-width: 760px) {
  .link-dialog { width: 100vw; height: 100vh; height: 100dvh; margin: 0; inset: 0; border: 0; border-radius: 0; --close-ms: 220; }
  .link-dialog[open] { animation: sheet-up 0.34s cubic-bezier(0.2, 0.9, 0.25, 1); }
  .link-dialog.closing { animation: sheet-down 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }
  .link-head { padding: calc(env(safe-area-inset-top) + 12px) 12px 12px 18px; }
  .link-body { padding: 16px 14px 24px; }
  .link-foot { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px calc(env(safe-area-inset-bottom) + 12px); }
  .link-foot .dialog-actions .btn { padding: 10px 16px; font-size: 15px; }
  .pb-row { flex-wrap: wrap; padding: 14px 14px 12px 16px; gap: 10px 12px; }
  .pb-text { flex: 1 1 calc(100% - 30px); }
  .pb-seg, .pb-seg.two { flex: 1 1 100%; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
  .pb-seg.two { --n: 2; }
  .pb-seg button { flex-direction: column; gap: 3px; padding: 7px 4px 6px; font-size: 12px; line-height: 1.2; }
  .pb-seg button svg { width: 16px; height: 16px; }
  .pb-seg button .pb-chev { display: none; }
  .pb-seg .pb-long { display: none; }
  .pb-seg .pb-short { display: inline-flex; }
  .pb-seg button > span { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .link-dialog[open], .link-dialog.closing, .pb-row, .pb-out.swap, .pb-row.nudge { animation: none; }
  .done-check circle, .done-check path { stroke-dashoffset: 0; animation: none !important; }
}

.beta-note {
  margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.45; color: var(--text);
  background: color-mix(in srgb, var(--today) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--today) 30%, var(--border));
}
/* Settings → Time zone */
.tz-note { margin: 12px 4px 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tz-row .dd-trigger:disabled { opacity: 0.55; }
.beta-status { margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: var(--done); animation: reveal 0.2s ease-out; }

/* ---------- settings → Pro ---------- */
.settings-tab .tab-lock { display: inline-flex; margin-left: auto; opacity: 0.8; }
.settings-tab .tab-lock svg { width: 13px; height: 13px; }
@media (max-width: 760px) {
  .settings-tab .tab-lock { margin-left: 2px; }
  .settings-tab .tab-lock svg { display: block; }
  /* Five sections can be wider than a phone: the tab row scrolls sideways if it must. */
  .settings-tabs { overflow-x: auto; scrollbar-width: none; }
  .settings-tab { flex: 1 0 auto; width: auto; padding-left: 8px; padding-right: 8px; }
}
.pro-locked {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}
.pro-lock-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary); }
.pro-lock-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pro-locked-title { font-weight: 700; font-size: 14.5px; }
.pro-locked-text { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
/* Locked: the themes show as a preview that can't be picked. */
.pro-preview { opacity: 0.55; filter: saturate(0.7); pointer-events: none; user-select: none; }
.setting-block { padding: 14px 0 16px; display: flex; flex-direction: column; gap: 12px; }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.palette-card {
  display: flex; flex-direction: column; gap: 7px; padding: 6px 6px 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.palette-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.palette-card:active { transform: scale(0.98); }
.palette-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.palette-card[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
/* A tiny Finally: dark sidebar with a highlighted entry, a page with lines and a button. */
.palette-preview { display: flex; height: 62px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); }
.pp-side { width: 32%; background: var(--sidebar); display: flex; flex-direction: column; gap: 4px; padding: 7px 5px; }
.pp-side i { display: block; height: 5px; border-radius: 3px; background: var(--sidebar-text); opacity: 0.45; }
.pp-side i:first-child { background: var(--sidebar-active); opacity: 1; box-shadow: inset 2px 0 0 var(--primary); }
.pp-main { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 8px 7px; }
.pp-line { height: 7px; border-radius: 3px; background: var(--surface); border: 1px solid var(--border); }
.pp-line.short { width: 65%; }
.pp-btn { margin-top: auto; align-self: flex-end; width: 42%; height: 9px; border-radius: 4px; background: var(--primary); }
.palette-name { font-size: 13px; font-weight: 600; }
.palette-card[aria-checked="true"] .palette-name { color: var(--primary); }
/* Switching colors cross-fades the window (recolor in app.js). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; }
.settings-card { padding: 4px 18px; }
.settings-card .btn { text-decoration: none; display: inline-flex; align-items: center; }

/* label | control rows, separated by hairlines */
.setting-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.5fr); align-items: center; gap: 16px; padding: 14px 0; }
.setting-row + .setting-row { border-top: 1px solid var(--border); }
.setting-row[hidden] { display: none; }
.setting-label { font-size: 14px; font-weight: 600; color: var(--text); }
.setting-hint { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.setting-control { display: flex; justify-content: flex-end; min-width: 0; }
.setting-control .seg { width: 100%; max-width: 320px; }
.setting-control select { max-width: 320px; }
.setting-value { color: var(--text); font-size: 14px; }
.mono-ish { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.name-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 320px; }
/* Email row (Settings → Account) and its slide-open steps. */
.email-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; flex-wrap: wrap; }
.email-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.verified-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--done) 15%, var(--surface)); color: var(--done); flex-shrink: 0;
}
.verified-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.verified-badge.just-verified { animation: pop-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.email-flow {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
.email-flow.open { grid-template-rows: 1fr; opacity: 1; }
.email-flow-inner { min-height: 0; overflow: hidden; }
.email-flow + .setting-row { border-top: 1px solid var(--border); }
.email-step { display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 16px; }
.email-field { display: flex; flex-direction: column; gap: 4px; }
.email-field input { width: 100%; }
.email-flow input.invalid { border-color: var(--danger); }
.email-sent, .email-dev { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.email-sent strong { color: var(--text); }
.email-dev { padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--today) 12%, var(--surface)); color: var(--text); }
.code-input {
  max-width: 220px; font-size: 22px; font-weight: 700; letter-spacing: 0.4em; text-align: center;
  font-variant-numeric: tabular-nums; padding: 8px 10px 8px calc(10px + 0.4em);
}
.code-input::placeholder { color: color-mix(in srgb, var(--muted) 45%, transparent); }
.email-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.email-actions .spacer { flex: 1; }
.email-actions .link-btn { padding: 6px 2px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); }
.email-actions .link-btn:hover { color: var(--text); }
.email-actions .danger-link, .email-actions .danger-link:hover { color: var(--danger); }
/* The required pop-up: steps fill its width. */
.email-gate .email-step { padding: 8px 0 0; }
.email-gate .code-input { max-width: none; }
.type-badge { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.type-badge.type-admin { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); border-color: transparent; }
.type-badge.type-plus { background: color-mix(in srgb, #8b5cf6 14%, var(--surface)); color: #8b5cf6; border-color: transparent; }

/* The profile form inside the Settings card: Save sits at the bottom right. */
.settings-card.profile-form { gap: 0; }
.settings-card .form-actions { border-top: 1px solid var(--border); padding: 12px 0 10px; }
.saved { font-size: 13px; color: #2fa36b; font-weight: 600; animation: pop-in 0.18s ease; }

/* Welcome pop-up (and phones): label above control. */
.profile-dialog .setting-row, .profile-dialog .setting-row + .setting-row { grid-template-columns: 1fr; gap: 6px; padding: 8px 0; border-top: 0; }
.profile-dialog .setting-control { justify-content: stretch; }
.profile-dialog .setting-control .seg, .profile-dialog .name-inputs, .profile-dialog .setting-control select { max-width: none; }
.profile-dialog .setting-label { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .setting-row { grid-template-columns: 1fr; gap: 8px; }
  .setting-control { justify-content: stretch; }
  .setting-control .seg, .name-inputs, .setting-control select { max-width: none; }
}

/* ---------- in-app dropdowns (ui.js) ---------- */
.dd { position: relative; width: 100%; min-width: 0; }
.dd-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.dd-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 8px 10px;
  font: inherit; color: inherit; cursor: pointer; min-height: 38px;
}
.dd-trigger:hover { border-color: color-mix(in srgb, var(--muted) 60%, var(--border)); }
.dd-trigger:focus-visible, .dd.open .dd-trigger { outline: 2px solid var(--primary); outline-offset: -1px; border-color: transparent; }
.dd-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.dd-trigger.placeholder .dd-label { color: var(--muted); }
.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-chevron { width: 12px; height: 12px; flex-shrink: 0; color: var(--muted); transition: transform 0.18s ease; }
.dd.open .dd-chevron { transform: rotate(180deg); }
.dd-menu {
  position: fixed; z-index: 60; overflow-y: auto; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  opacity: 0; transform: scale(0.97) translateY(-2px); transition: opacity 0.12s ease, transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.dd-menu.show { opacity: 1; transform: none; }
.dd-menu[hidden] { display: none; }
.dd-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--text); user-select: none;
}
.dd-option.active { background: var(--bg); }
.dd-option.selected { font-weight: 600; }
.dd-option.disabled { opacity: 0.45; cursor: not-allowed; }
.dd-tick { width: 14px; height: 14px; color: var(--primary); visibility: hidden; flex-shrink: 0; }
.dd-option.selected .dd-tick { visibility: visible; }
.dd-empty { padding: 10px; font-size: 13px; color: var(--muted); }
/* Searchable menus: the search box stays at the top while the list scrolls under it. */
.dd-search { position: sticky; top: -5px; z-index: 1; margin: -5px -5px 4px; padding: 6px; background: var(--surface); border-bottom: 1px solid var(--border); }
.dd-search input { width: 100%; padding: 7px 10px; font-size: 14px; border-radius: 8px; }
.dd-list { display: flex; flex-direction: column; gap: 1px; }
.dd-list .dd-option span { white-space: normal; overflow-wrap: anywhere; }
.setting-control .dd { max-width: 320px; }
.profile-dialog .setting-control .dd { max-width: none; }
@media (max-width: 640px) { .setting-control .dd { max-width: none; } }
@media (pointer: coarse) { .dd-option { padding: 11px 12px; font-size: 16px; } }

/* ---------- in-app date / time pickers (ui.js) ---------- */
.pk { position: relative; min-width: 0; }
.pk-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.pk-trigger { justify-content: flex-start; gap: 8px; }
.pk-icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.when-row { gap: 8px; }
.when-row .pk-date { flex: 1 1 0; min-width: 0; }
.when-row .pk-time { flex: 0 0 136px; }
/* Events: [date] [start] to [end] on one line; the two times drop their clock icons. To-dos
   keep [date] [due time]. */
.when-row .pk-end, .when-row .time-to, .when-row .time-from { display: none; }
.when-row.is-event .pk-date { flex: 1.15 1 0; }
.when-row.is-event .pk-time { flex: 1 1 0; min-width: 0; }
.when-row.is-event .pk-time .pk-icon { display: none; }
.when-row.is-event .pk-end { display: block; }
.when-row.is-event .time-to { display: inline; flex-shrink: 0; font-size: 13px; color: var(--muted); }
/* Several-day events: "from" start date + time, then "to" end date + time lined up under them. */
.when-row .pk-enddate { display: none; }
.when-row.is-event.multi {
  display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px 10px; align-items: center;
  grid-template-areas: "from sd st" "to ed et";
}
.when-row.is-event.multi .time-from { display: inline; grid-area: from; font-size: 13px; color: var(--muted); }
.when-row.is-event.multi .time-to { grid-area: to; }
.when-row.is-event.multi > .pk-date:not(.pk-enddate) { grid-area: sd; }
.when-row.is-event.multi > .pk-time:not(.pk-end) { grid-area: st; }
.when-row.is-event.multi .pk-enddate { display: block; grid-area: ed; }
.when-row.is-event.multi > .pk-end { grid-area: et; }
/* Narrow: the times sit on a line just under the date. */
@media (max-width: 520px) {
  .when-row.is-event:not(.multi) { flex-wrap: wrap; row-gap: 8px; }
  .when-row.is-event:not(.multi) .pk-date { flex: 1 1 100%; }
  .when-row.is-event.multi .pk-icon { display: none; }
}

.pk-pop { padding: 10px; }
.pk-pop-date { width: 272px; }
.pk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pk-title { font-size: 14px; font-weight: 700; color: var(--text); }
.pk-nav { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 18px; cursor: pointer; }
.pk-nav:hover { background: var(--bg); }
.pk-dow, .pk-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.pk-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; letter-spacing: 0.03em; }
.pk-day {
  height: 34px; border: 0; background: none; border-radius: 50%; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums;
  transition: background 0.12s ease, color 0.12s ease;
}
.pk-day:hover { background: var(--bg); }
.pk-day.out { color: var(--muted); opacity: 0.55; }
.pk-day.today { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); font-weight: 700; }
.pk-day.selected { background: var(--primary); color: #fff; box-shadow: none; font-weight: 700; }
.pk-day:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pk-foot { display: flex; gap: 4px; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.pk-link { border: 0; background: none; color: var(--primary); font-size: 13px; font-weight: 600; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.pk-link:hover { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }

.pk-pop-time { width: 210px; display: flex; flex-direction: column; gap: 6px; }
.pk-time-input { font-size: 14px; }
.pk-time-hint { margin: 0; font-size: 12px; color: var(--danger); }
.pk-times { max-height: 220px; overflow-y: auto; }
.pk-none { color: var(--muted); }
@media (pointer: coarse) { .pk-day { height: 40px; font-size: 15px; } .pk-pop-date { width: 300px; } .pk-time-input { font-size: 16px; } }

/* ---------- in-app confirm / notice pop-ups (ui.js) ---------- */
.ask-dialog { width: min(400px, calc(100vw - 32px)); }
.ask-body { padding: 22px 22px 6px; }
.ask-body h2 { margin: 0 0 6px; font-size: 17px; line-height: 1.35; word-break: break-word; }
.ask-body p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.ask-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 18px; }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-solid:hover { filter: brightness(1.08); }

/* ---------- calendar ---------- */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.btn.icon { width: 32px; padding: 4px 0; font-size: 17px; line-height: 1; }
.cal-actions { display: flex; align-items: center; gap: 10px; }

/* "+ New" splits into [To-do] [Event]: the New button folds away while the two options widen in. */
/* Header "+ New" (calendar, Home, Homework): a quiet white button that splits evenly into
   To-do and Event halves. Only the "+" and the icons are blue. */
.new-split, .new-single { position: relative; width: 220px; height: 42px; flex-shrink: 0; }
.new-main, .new-opt {
  position: absolute; top: 0; bottom: 0; border: 1px solid var(--border); border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap;
  background: var(--surface); box-shadow: var(--shadow);
}
.new-plus { color: var(--primary); font-size: 18px; font-weight: 500; line-height: 1; margin-top: -1px; }
.new-main {
  left: 0; right: 0;
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.15s;
}
.new-main:focus-visible, .new-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.new-options { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.16s ease; }
/* Each half is just under 50% wide, leaving a small gap down the middle where the button splits. */
.new-main:hover { border-color: color-mix(in srgb, var(--muted) 55%, var(--border)); }
.new-opt { width: calc(50% - 3px); transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.15s, border-color 0.15s, color 0.15s; }
.new-opt svg { width: 17px; height: 17px; fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.new-opt[data-new-type="todo"] { left: 0; transform: translateX(6px) scale(0.97); }
.new-opt[data-new-type="event"] { right: 0; transform: translateX(-6px) scale(0.97); }
.new-opt:hover {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); color: var(--primary);
}
.new-split.open .new-main { opacity: 0; transform: scale(0.97); pointer-events: none; }
.new-split.open .new-options { opacity: 1; pointer-events: auto; }
.new-split.open .new-opt { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .new-split:hover .new-main { opacity: 0; transform: scale(0.97); pointer-events: none; }
  .new-split:hover .new-options { opacity: 1; pointer-events: auto; }
  .new-split:hover .new-opt { transform: none; }
}

/* Day menu: grows from where the day was clicked. */
.day-pop {
  position: fixed; z-index: 40; min-width: 170px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: scale(0.92); transition: opacity 0.14s ease, transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.day-pop[hidden] { display: none; }
.day-pop.show { opacity: 1; transform: none; }
.day-pop-date { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 4px; }
.day-pop button {
  display: flex; align-items: center; gap: 10px; border: 0; background: none; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text);
}
.day-pop button:hover, .day-pop button:focus-visible { background: var(--bg); outline: none; }
.pop-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.pop-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pop-icon.is-todo { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.pop-icon.is-event { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .new-main, .new-options, .new-opt, .day-pop { transition: none; } }
.cal-cell { cursor: pointer; }
.cal-cell:hover:not(:has(.cal-chip:hover, .cal-date:hover, .cal-more:hover)) { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.cal-cell.outside:hover:not(:has(.cal-chip:hover, .cal-date:hover, .cal-more:hover)) { background: color-mix(in srgb, var(--primary) 5%, var(--bg)); }
.segmented { display: inline-flex; background: var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.segmented button { border: 0; background: none; padding: 5px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
/* Calendar To-dos / Both / Events slider: same track as .segmented, with a thumb that glides. */
.show-filter { --opt: 34px; position: relative; display: inline-flex; align-self: stretch; background: var(--border); border-radius: 9px; padding: 3px; gap: 2px; flex-shrink: 0; }
.show-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: var(--opt); border-radius: 7px;
  background: var(--surface); box-shadow: var(--shadow);
  transform: translateX(calc(var(--at, 1) * (var(--opt) + 2px))); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.show-opt {
  position: relative; width: var(--opt); min-height: 26px; border: 0; background: none; padding: 0; border-radius: 7px;
  display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: color 0.18s ease;
}
.show-opt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.show-opt:hover { color: var(--text); }
.show-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.show-filter[data-show="todo"] .show-todo { color: var(--primary); }
.show-filter[data-show="both"] .show-both { color: var(--text); }
.show-filter[data-show="event"] .show-event { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .show-thumb, .show-opt { transition: none; } }
/* While the filter eases the calendar to a new size, cells clip anything that doesn't fit yet. */
.cal-body.resizing .cal-cell, .cal-body.resizing .cal-day-col { overflow: hidden; }
/* Day view Time ⇄ Group: rows glide between cards, so cards don't clip them meanwhile. */
.cal-body.regrouping .day-card, .home.regrouping .day-card { overflow: visible; }
.cal-body.regrouping .day-row, .home.regrouping .day-row { z-index: 1; }

.cal-month { overflow: hidden; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays div { padding: 8px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--border); }
.cal-cell { min-height: 108px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-grid > .cal-cell:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-cell.outside { background: var(--bg); }
.cal-cell.outside .cal-date { color: var(--muted); opacity: 0.6; }
.cal-date { align-self: flex-start; border: 0; background: none; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); padding: 0; }
.cal-date:hover { background: var(--bg); }
.cal-cell.today .cal-date { background: var(--primary); color: #fff; }
.cal-chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-dots { display: none; }

.cal-chip {
  display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; text-align: left;
  border: 0; border-radius: 5px; padding: 3px 6px 3px 8px; cursor: pointer; font-size: 12px; font-weight: 500;
  color: var(--text); background: color-mix(in srgb, var(--chip) 14%, var(--surface));
  box-shadow: inset 3px 0 0 var(--chip);
}
.cal-chip:hover { background: color-mix(in srgb, var(--chip) 24%, var(--surface)); }
/* To-dos: a small circle (checks it off). Events: no circle, time first. */
.cal-chip-text { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.cal-check {
  flex-shrink: 0; width: 12px; height: 12px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--chip); background: var(--surface); position: relative;
  transition: background 0.12s;
}
.cal-check:hover { background: color-mix(in srgb, var(--chip) 30%, var(--surface)); }
.cal-check.checked { background: var(--chip); }
.cal-check.checked::after {
  content: ""; position: absolute; left: 3px; top: 0.5px; width: 3px; height: 6px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
@media (pointer: coarse) {
  /* Bigger target for fingers. */
  .cal-check { width: 17px; height: 17px; }
  .cal-check.checked::after { left: 5px; top: 1.5px; width: 4px; height: 8px; border-width: 0 2px 2px 0; }
}
.cal-chip.event.done .cal-chip-title { text-decoration: none; }
.cal-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.done { opacity: 0.55; }
.cal-chip.done .cal-chip-title { text-decoration: line-through; }
.cal-chip.overdue { color: var(--overdue); }
.cal-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.cal-more { border: 0; background: none; text-align: left; font-size: 12px; color: var(--muted); cursor: pointer; padding: 1px 6px; }
.cal-more:hover { color: var(--text); }
.cal-chips .cut { display: none; }
/* Month view fills the window instead of scrolling: the page becomes a column and the grid's
   week rows share whatever height is left (never shorter than 48px). */
.main.fit { display: flex; flex-direction: column; padding-bottom: 24px; }
.main.fit > #view, .main.fit .cal-body, .main.fit .cal-month, .main.fit .day-canvas.timeline-mode { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main.fit .cal-grid { flex: 1; min-height: 0; grid-template-rows: repeat(var(--weeks), minmax(48px, 1fr)); }
.main.fit .cal-cell { min-height: 0; overflow: hidden; padding: 5px; gap: 3px; }
.main.fit .cal-date { width: 24px; height: 24px; }
.main.fit .cal-chips { flex: 1; min-height: 0; position: relative; overflow: hidden; }

.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; }
.cal-day-col { border-right: 1px solid var(--border); min-height: 320px; display: flex; flex-direction: column; min-width: 0; }
.cal-day-col:last-child { border-right: 0; }
.cal-day-head { border: 0; border-bottom: 1px solid var(--border); background: none; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.cal-day-head:hover { background: var(--bg); }
.cal-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cal-dnum { font-size: 18px; font-weight: 700; color: var(--text); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.cal-day-col.today .cal-dnum { background: var(--primary); color: #fff; }
.cal-day-items { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-day-items .cal-chip { align-items: flex-start; gap: 6px; padding: 5px 6px 5px 9px; }
.cal-day-items .cal-chip-text { flex-direction: column; align-items: flex-start; gap: 1px; }
.cal-day-items .cal-check { margin-top: 2px; }
.cal-day-items .cal-chip-title { white-space: normal; word-break: break-word; }
.cal-none { color: var(--muted); font-size: 13px; text-align: center; padding-top: 8px; opacity: 0.6; }
/* Week columns and the day view: empty space is clickable to add (like month cells). */
.cal-day-col { cursor: pointer; }
.cal-day-col:hover:not(:has(.cal-chip:hover, .cal-day-head:hover)) .cal-day-items { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.cal-day-items { flex: 1; }
/* ---------- calendar day view ---------- */
.day-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; cursor: default; }
.day-tools-row { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.day-count { font-size: 13px; color: var(--muted); }
/* Home / Homework: what the page is, with an encouragement under it. */
/* Home / Homework encouragement next to the switch: a touch larger, in the main text color. */
.home-cheer { min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text); }
.home .day-tools .segmented { flex-shrink: 0; }
/* Home: To-dos / Both / Events slider beside the Chronological / Group switch. */
.home-switches { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.home-switches .show-filter { --opt: 30px; }
.home-switches .show-opt { min-height: 22px; }
.home-switches .show-opt svg { width: 15px; height: 15px; }
@media (max-width: 760px) {
  .home .day-tools { flex-direction: column; align-items: stretch; gap: 10px; }
  .home-switches .segmented { flex: 1; }
}
.small-seg button { padding: 4px 12px; font-size: 12px; }
.day-card { overflow: hidden; cursor: default; }
.day-row {
  display: grid; grid-template-columns: 72px 22px minmax(0, 1fr); align-items: start; column-gap: 10px;
  padding: 12px 16px; cursor: pointer; position: relative;
}
.day-section .day-row { grid-template-columns: 22px minmax(0, 1fr); }
.day-row + .day-row { border-top: 1px solid var(--border); }
.day-row:hover { background: var(--bg); }
.day-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.day-time { font-size: 12.5px; font-weight: 600; color: var(--text); padding-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-time.anytime { color: var(--muted); font-weight: 500; }
.day-mark { display: flex; justify-content: center; padding-top: 3px; }
.day-mark .cal-check { width: 16px; height: 16px; border-width: 2px; }
.day-mark .cal-check.checked::after { left: 4px; top: 1px; width: 4px; height: 8px; border-width: 0 2px 2px 0; }
.day-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35; word-break: break-word; }
.day-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 3px; font-size: 13px; color: var(--muted); }
.day-sub .sep { opacity: 0.5; }
.day-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.day-group { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; }
.day-group .dot { width: 8px; height: 8px; }
.day-notes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.day-overdue { color: var(--overdue); font-weight: 600; }
/* Events: a solid bar in their color on a faint tint — no checkbox. */
.day-row.event { background: color-mix(in srgb, var(--chip) 7%, var(--surface)); }
.day-row.event:hover { background: color-mix(in srgb, var(--chip) 12%, var(--surface)); }
.event-bar { width: 4px; align-self: stretch; min-height: 20px; height: 100%; border-radius: 3px; background: var(--chip); }
.day-row.event .day-mark { align-self: stretch; padding: 2px 0; }
/* Done to-dos and past events quiet down. */
.day-row.done .day-title { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.day-row.done .day-sub { opacity: 0.7; }
.day-section { margin-bottom: 16px; cursor: default; }
.day-section-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 4px; font-size: 13px; font-weight: 700; color: var(--text); }
.day-section-head .muted { font-weight: 500; font-size: 12px; }
@media (max-width: 760px) {
  .day-row { grid-template-columns: 58px 20px minmax(0, 1fr); padding: 12px; column-gap: 8px; }
  .day-time { font-size: 12px; }
}

.day-canvas { min-height: calc(100vh - 200px); min-height: calc(100dvh - 200px); display: flex; flex-direction: column; cursor: pointer; border-radius: var(--radius); }
.day-canvas .day-list { cursor: default; }
.day-filler { flex: 1; min-height: 120px; border-radius: var(--radius); transition: background 0.15s; }
.day-filler:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.day-empty:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.day-hint { font-size: 13px; margin-top: 6px; opacity: 0.8; }

/* Day view Chronological: a box that fills the window under the switch. Hours down the left,
   a 24-hour track that scrolls inside the box, untimed items in an "Any time" strip on top. */
.main.fit .day-canvas.timeline-mode { flex: 1; min-height: 0; cursor: default; }
.tl { --hour: 60px; --gutter: 64px; flex: 1; min-height: 260px; display: flex; flex-direction: column; overflow: hidden; }
.tl-allday {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--border); cursor: pointer; max-height: 30%; overflow-y: auto; flex-shrink: 0;
}
.tl-allday-label {
  width: calc(var(--gutter) - 10px); flex-shrink: 0; text-align: right; padding-top: 6px;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.tl-allday-items { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tl-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 0 14px; cursor: pointer; }
.tl-day { position: relative; height: calc(24 * var(--hour)); }
/* Hour lines run across the track; the label sits on its line in the left column. */
.tl-hour { position: absolute; left: 0; right: 0; top: var(--top); height: 0; border-top: 1px solid var(--border); margin-left: var(--gutter); pointer-events: none; }
.tl-hour::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--hour) / 2); border-top: 1px dashed color-mix(in srgb, var(--border) 60%, transparent); }
.tl-hour span {
  position: absolute; right: calc(100% + 10px); top: 0; transform: translateY(-50%);
  font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tl-track { position: absolute; inset: 0 10px 0 calc(var(--gutter) + 4px); }

/* Items: to-dos are outlined in their color with the round check; events a solid bar on a tint. */
.tl-item {
  display: flex; align-items: flex-start; gap: 7px; min-width: 0; overflow: hidden;
  padding: 5px 8px 5px 10px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--text);
  background: color-mix(in srgb, var(--chip) 14%, var(--surface));
  box-shadow: inset 3px 0 0 var(--chip), 0 0 0 1px color-mix(in srgb, var(--chip) 22%, transparent);
  transition: background 0.15s, box-shadow 0.15s;
}
.tl-track > .tl-item {
  position: absolute; top: var(--top); height: var(--h);
  left: calc(var(--col) * 100% / var(--cols)); width: calc(100% / var(--cols) - 3px);
}
.tl-track > .tl-item:hover, .tl-track > .tl-item:focus-visible { z-index: 2; }
.tl-item:hover { background: color-mix(in srgb, var(--chip) 22%, var(--surface)); }
.tl-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.tl-item.todo { background: var(--surface); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--chip) 55%, transparent); padding-left: 8px; }
.tl-item.todo:hover { background: color-mix(in srgb, var(--chip) 8%, var(--surface)); }
.tl-item .cal-check { width: 15px; height: 15px; border-width: 2px; margin-top: 1px; }
.tl-item .cal-check.checked::after { left: 3.5px; top: 0.5px; width: 4px; height: 7px; border-width: 0 2px 2px 0; }
.tl-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tl-title { font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-time { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-group { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-group .dot { width: 7px; height: 7px; flex-shrink: 0; }
/* Half-hour blocks: title and time on one line, no group line. */
.tl-item.short { align-items: center; padding-top: 2px; padding-bottom: 2px; }
.tl-item.short .cal-check { margin-top: 0; }
.tl-item.short .tl-text { flex-direction: row; align-items: baseline; gap: 6px; }
/* On one line the title keeps its room and the time gives way first. */
.tl-item.short .tl-title, .tl-allday .tl-title { flex-shrink: 0; max-width: 100%; }
.tl-item.short .tl-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The hour label next to the now line steps aside. */
.tl-hour.near-now span { opacity: 0; }
.tl-item.short .tl-group { display: none; }
/* Any time strip: compact chips. */
.tl-allday .tl-item { padding: 4px 10px 4px 8px; align-items: center; max-width: 100%; }
.tl-allday .tl-item.event { padding-left: 10px; }
.tl-allday .tl-item .cal-check { margin-top: 0; }
.tl-allday .tl-text { flex-direction: row; align-items: baseline; gap: 6px; }
.tl-allday .tl-group { display: none; }
/* Done to-dos and past events quiet down; overdue to-dos turn red. */
.tl-item.done .tl-title { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.tl-item.done, .tl-item.past { opacity: 0.6; }
.tl-item.overdue .tl-title { color: var(--overdue); }
/* Now: a line across the day with a dot on the hour column's edge. */
.tl-now { position: absolute; top: var(--top); left: calc(var(--gutter) - 4px); right: 0; height: 0; border-top: 2px solid var(--overdue); z-index: 3; pointer-events: none; transition: top 0.6s ease; }
.tl-now::before { content: ""; position: absolute; left: -4px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--overdue); }
/* Chronological ⇄ Group: blocks glide in and out of the box, so let them show over its edges. */
.cal-body.regrouping .tl-item { z-index: 2; }
@media (max-width: 760px) {
  .tl { --hour: 52px; --gutter: 50px; }
  .tl-hour span { right: calc(100% + 7px); font-size: 10.5px; }
  .tl-track { right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .tl-item, .tl-now { transition: none; } }

/* Week view (computers): the timeline seven days wide. Day headings and the "Any time" row are
   pinned at the top of the box; the hours scroll under them, labeled down the left. */
.wk { --hour: 48px; --gutter: 60px; }
.main.fit .wk { flex: 1; min-height: 0; }
.wk .tl-scroll { padding: 0 0 14px; }
.wk .tl-scroll:hover .tl-day { background: none; }
.wk-sticky { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--border); }
.wk-head, .wk-allday, .wk-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wk-head { position: relative; padding: 8px 10px 6px var(--gutter); }
.wk-zone {
  position: absolute; left: 0; bottom: 10px; width: calc(var(--gutter) - 10px); text-align: right;
  font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-dhead {
  border: 0; background: none; padding: 4px 0 6px; margin: 0 2px; border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; color: var(--text);
  transition: background 0.15s ease;
}
.wk-dhead:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.wk-dhead:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.wk-dhead .cal-dnum { transition: background 0.15s ease, color 0.15s ease; }
.wk-dhead.past .cal-dnum, .wk-dhead.past .cal-dow { color: var(--muted); }
.wk-dhead.today .cal-dow { color: var(--primary); }
.wk-dhead.today .cal-dnum { background: var(--primary); color: var(--primary-text); }
.wk-allday { position: relative; padding: 0 10px 8px var(--gutter); align-items: start; max-height: 132px; overflow-y: auto; }
.wk-allday .tl-allday-label { position: absolute; left: 0; top: 5px; padding-top: 0; }
.wk-allday-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 24px; padding: 0 2px; cursor: pointer; }
.wk-allday .tl-item { padding: 3px 6px; font-size: 11.5px; }
.wk-grid { margin-top: 14px; }
.wk-cols { position: absolute; inset: 0 10px 0 var(--gutter); }
.wk-col { position: relative; border-left: 1px solid var(--border); cursor: pointer; transition: background 0.15s ease; }
.wk-col:last-child { border-right: 1px solid var(--border); }
.wk-col.today { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.wk-col > .tl-item {
  position: absolute; top: var(--top); height: var(--h);
  left: calc(3px + var(--col) * (100% - 6px) / var(--cols)); width: calc((100% - 6px) / var(--cols) - 2px);
}
.wk-col > .tl-item:hover, .wk-col > .tl-item:focus-visible { z-index: 2; }
.wk .tl-item { font-size: 11.5px; gap: 5px; padding: 4px 6px 4px 8px; border-radius: 6px; }
.wk .tl-item.todo { padding-left: 6px; }
.wk .tl-item .cal-check { width: 14px; height: 14px; }
.wk .tl-item .cal-check.checked::after { left: 3px; top: 0; }
.wk .tl-time { font-size: 10.5px; }
/* Narrow days: titles wrap onto up to three lines in blocks tall enough for them. */
.wk-col > .tl-item:not(.short) .tl-title { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.wk .tl-group { display: none; }
.wk .tl-item.short .tl-time { display: none; }
.wk-col .tl-now { left: -1px; }
@media (prefers-reduced-motion: reduce) { .wk-dhead, .wk-col { transition: none; } }

/* Home: the calendar's day-view rows, in foldable sections with day-view style headings. */
/* Section headings (Overdue, Today, …): large titles with a count pill; Overdue and Today
   tint their pill instead of coloring the whole title. */
.home .group { margin-bottom: 26px; }
.home .group.collapsed { margin-bottom: 14px; }
.home .group h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; text-transform: none; letter-spacing: -0.01em; color: var(--text); margin: 0 0 10px;
  transition: font-size 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Folded sections step back: smaller titles, easing to and from the open size. */
.home .group.collapsed h3 { font-size: 15px; margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .home .group h3 { transition: none; } }
.home .group-toggle { gap: 9px; font-weight: 700; padding: 2px 6px 2px 0; }
.home .group-toggle .chev { width: 14px; height: 14px; color: var(--muted); }
/* Hovering a heading only darkens its arrow (no dimming of the title or counts). */
.home .home-group .group-toggle:hover { filter: none; color: inherit; }
.home .group-toggle:hover .chev { color: var(--text); }
/* Count pills: folded, one total; open, it splits into a to-do pill and an event pill (both
   blue, told apart by icon). Both states stay in the page and ease between widths. */
.sec-count { display: inline-flex; align-items: center; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sec-total, .sec-part {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; line-height: 1;
  padding: 4px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden;
}
.sec-total { background: color-mix(in srgb, var(--muted) 14%, var(--surface)); color: var(--muted); }
.home-group.overdue .sec-total { background: color-mix(in srgb, var(--overdue) 14%, var(--surface)); color: var(--overdue); }
.home-group.today .sec-total { background: color-mix(in srgb, var(--today) 16%, var(--surface)); color: var(--today); }
.sec-part svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sec-part.todo { background: color-mix(in srgb, var(--primary) 13%, var(--surface)); color: var(--primary); }
.sec-part.event { background: color-mix(in srgb, var(--primary) 13%, var(--surface)); color: var(--primary); }
.sec-part + .sec-part { margin-left: 4px; }
.sec-part.zero { opacity: 0.5; }
/* Completed - Past Week counts are green. */
.home-group.completed .sec-total, .home-group.completed .sec-part {
  background: color-mix(in srgb, var(--done) 15%, var(--surface)); color: var(--done);
}
/* Small Hide button that follows the completed section's counts. */
.hide-done {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; padding: 3px 10px; border-radius: 999px;
  transition: color 0.15s, border-color 0.15s;
}
.hide-done:hover { color: var(--text); border-color: color-mix(in srgb, var(--muted) 60%, var(--border)); }
.hide-done:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.home-group.overdue .sec-part.todo { background: color-mix(in srgb, var(--overdue) 14%, var(--surface)); color: var(--overdue); }
.sec-split { display: inline-flex; }
.sec-total, .sec-split {
  max-width: 140px;
  transition: max-width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease, padding 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Open: the total folds away, the split shows. Folded: the reverse. */
.home .group:not(.collapsed) .sec-total { max-width: 0; opacity: 0; padding-left: 0; padding-right: 0; }
.home .group.collapsed .sec-split { max-width: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sec-total, .sec-split { transition: none; } }
.group-body > .home-subs { min-height: 0; overflow: hidden; }
/* Group mode: small group headings inside each time section, like the day view's. */
.home-sub + .home-sub { margin-top: 12px; }
.home-sub-head { display: flex; align-items: center; gap: 7px; margin: 0 0 6px 4px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.home-sub-head .dot { width: 8px; height: 8px; }
.home-sub-head .muted { font-weight: 500; font-size: 12px; }
.day-end { display: block; font-weight: 500; color: var(--muted); }
.day-date { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 1px; }
.day-row.past { opacity: 0.6; }
.home-foot { display: flex; justify-content: center; margin: 6px 0 8px; }
.show-done {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; transition: color 0.15s, border-color 0.15s;
}
.show-done:hover { color: var(--text); border-color: color-mix(in srgb, var(--muted) 60%, var(--border)); }
.show-done:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- mobile ---------- */

@media (max-width: 760px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .sidebar.open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
  .scrim.open { opacity: 1; pointer-events: auto; }
  .menu-btn { display: block; }
  .main { padding: 16px 16px 40px; }
  .title-wrap h1 { font-size: 21px; }
  .menu-btn { align-self: flex-start; }
  /* calendar on phones: month shows dots (tap a day for details); week stacks by day */
  .cal-actions { width: 100%; gap: 8px; }
  .cal-toolbar .segmented { flex: 1; min-width: 0; }
  .segmented button { flex: 1; }
  .cal-toolbar .segmented button { padding-left: 6px; padding-right: 6px; }
  .show-filter { --opt: 30px; }
  .cal-cell { min-height: 54px; padding: 4px 2px; align-items: center; cursor: pointer; }
  .cal-weekdays div { padding: 6px 0; text-align: center; font-size: 10px; }
  .cal-date { align-self: center; width: 26px; height: 26px; }
  .cal-chips { display: none; }
  .cal-dots { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; max-width: 100%; }
  .cal-dots span { width: 6px; height: 6px; border-radius: 50%; }
  .cal-week { grid-template-columns: 1fr; }
  .cal-day-col { min-height: 0; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--border); }
  .cal-day-col:last-child { border-bottom: 0; }
  .cal-day-head { border-bottom: 0; border-right: 1px solid var(--border); width: 64px; flex-shrink: 0; }
  .cal-day-items { flex: 1; min-width: 0; }
  .cal-none { text-align: left; padding: 6px 4px; }
  .topbar { flex-wrap: wrap; }
  .title-actions { width: 100%; justify-content: flex-start; }
  .title-actions:empty { display: none; }
  #add-assignment { flex: 1; }
  .new-split, .new-single { width: 100%; }
        .item .actions { opacity: 1; }
  .row { flex-direction: column; }
}

/* ---------- info pop-up (click a to-do or event) ---------- */
.info-pop {
  position: fixed; z-index: 45; width: 320px; max-width: calc(100vw - 16px); padding: 14px 14px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(10, 14, 30, 0.22), 0 2px 6px rgba(10, 14, 30, 0.08);
  opacity: 0; transform: scale(0.94); transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  outline: none;
}
.info-pop[hidden] { display: none; }
.info-pop.show { opacity: 1; transform: none; }
.info-head { display: flex; align-items: flex-start; gap: 10px; }
.info-type {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary);
}
.info-type svg, .info-row svg, .info-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.info-type svg { width: 17px; height: 17px; }
.info-titles { flex: 1; min-width: 0; }
.info-kind { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.info-title { margin: 1px 0 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text); word-break: break-word; }
.info-status { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 650; padding: 2px 7px; border-radius: 999px; }
.info-status.done { background: color-mix(in srgb, var(--done) 15%, var(--surface)); color: var(--done); }
/* From Canvas: Canvas's red mark and its name, small, after the type. */
.info-source {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 999px;
  font-size: 11px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--muted);
  background: color-mix(in srgb, var(--muted) 11%, var(--surface));
}
.info-source svg { width: 12px; height: 12px; fill: #e2231a; flex-shrink: 0; }
.info-source.gcal svg { fill: none; stroke: #1a73e8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.info-source.classroom svg { fill: none; stroke: #1e8e3e; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.info-status.overdue { background: color-mix(in srgb, var(--overdue) 14%, var(--surface)); color: var(--overdue); }
.info-btn {
  width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 8px; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.info-btn svg { width: 17px; height: 17px; }
.info-btn:hover { background: var(--bg); color: var(--text); }
.info-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.info-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.info-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); line-height: 1.4; }
.info-row svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); margin-top: 1px; }
.info-dot-wrap { width: 17px; height: 20px; flex-shrink: 0; display: grid; place-items: center; }
.info-dot { width: 10px; height: 10px; border-radius: 50%; }
.info-loc { color: inherit; text-decoration: none; word-break: break-word; }
.info-loc:hover { color: var(--primary); text-decoration: underline; }
.info-notes span { white-space: pre-wrap; word-break: break-word; color: var(--muted); }
.item { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .info-pop { transition: none; } }

/* ---------- Home progress ring (right column, computers only) ---------- */
.side-col { display: none; }
/* Only when there's room for the list (~620px+) beside it: laptop and desktop screens. List pages
   get a column of their own on the right for the widgets, which scrolls separately from the page.
   The round arrow on its edge folds it away to nothing but the line (and the arrow, now pointing
   back) and opens it again; the page widens into the space. */
@media (min-width: 1180px) {
  .side-col:not([hidden]) {
    display: block; position: relative; flex-shrink: 0; width: 284px; height: 100%;
    border-left: 1px solid var(--border); transition: width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .side-col.collapsed { width: 0; }
}
.side-scroll {
  width: 284px; height: 100%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: 24px 32px 32px; display: flex; flex-direction: column; align-items: center;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.side-col.collapsed .side-scroll { opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0s linear 0.26s; }
.side-toggle {
  position: absolute; top: 30px; left: -13px; z-index: 5; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: left 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.15s, border-color 0.15s;
}
.side-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.26s ease; }
.side-toggle:hover { color: var(--text); border-color: color-mix(in srgb, var(--muted) 50%, var(--border)); }
.side-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Folded: the arrow sits just inside the window edge and points back. */
.side-col.collapsed .side-toggle { left: -38px; }
.side-col.collapsed .side-toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .side-col, .side-scroll, .side-toggle, .side-toggle svg { transition: none !important; } }
.widgets { display: flex; flex-direction: column; gap: 12px; width: 220px; }
.widget {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.ring-card { align-items: center; gap: 12px; padding-bottom: 18px; }
.widget-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.widget-title { font-size: 13px; font-weight: 700; color: var(--text); }
.widget-note { font-size: 12px; color: var(--muted); }
.widget-caption, .widget-empty { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.widget-empty { padding: 4px 0 2px; }
.widget-badge {
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--primary) 13%, var(--surface)); color: var(--primary);
}
.widget-badge.now { background: color-mix(in srgb, var(--done) 15%, var(--surface)); color: var(--done); }
/* The small button under the widgets that opens the editor. */
.widgets-edit {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--muted); padding: 5px 10px; border-radius: 999px; transition: color 0.15s, background-color 0.15s;
}
.widgets-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.widgets-edit:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.widgets-edit:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Next up: the item in its color, with when, where and which group. */
.next-item {
  display: flex; gap: 10px; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; border-radius: 8px;
}
.next-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.next-bar { width: 4px; flex-shrink: 0; border-radius: 2px; background: var(--chip); }
.next-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.next-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.next-item:hover .next-title { color: var(--primary); }
.next-when { font-size: 13px; color: var(--text); }
.next-loc, .next-group { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.next-loc svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.next-group .dot { width: 8px; height: 8px; margin: 0 2px; }

/* This week: one bar per day. */
.wk-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wk-col {
  display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; cursor: pointer;
  color: var(--muted); border-radius: 7px; transition: background-color 0.15s;
}
.wk-col:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.wk-col:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
.wk-n { font-size: 11px; font-weight: 600; min-height: 14px; font-variant-numeric: tabular-nums; }
.wk-track { position: relative; width: 12px; height: 64px; border-radius: 6px; background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; }
.wk-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 6px; background: color-mix(in srgb, var(--primary) 55%, var(--surface)); transition: height 0.3s ease; }
.wk-d { font-size: 11px; font-weight: 600; }
.wk-col.today { color: var(--primary); }
.wk-col.today .wk-fill { background: var(--primary); }
.wk-col.past { opacity: 0.55; }

/* Streak: the number of days, and the last week as dots (today last). */
.streak-num { font-size: 34px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.streak-num span { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.streak-num.zero { color: var(--muted); }
.streak-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.streak-day { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.streak-day i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border); box-sizing: border-box; }
.streak-day.on i { background: var(--done); border-color: var(--done); }
.streak-day.today { color: var(--text); }
.streak-day.today:not(.on) i { border-style: dashed; border-color: color-mix(in srgb, var(--muted) 60%, var(--border)); }

/* Mini month. */
.mm-nav { display: flex; gap: 2px; }
.mm-nav button {
  width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1;
}
.mm-nav button:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--text); }
.mm-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; text-align: center; }
.mm-dow { font-size: 10.5px; font-weight: 600; color: var(--muted); padding-bottom: 2px; }
.mm-day {
  position: relative; height: 26px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 7px;
  font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums;
}
.mm-day:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.mm-day:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; }
.mm-day.out { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.mm-day.today { background: var(--primary); color: var(--primary-text); font-weight: 700; }

/* Edit widgets window. */
.widgets-dialog { width: min(420px, calc(100vw - 32px)); }
.widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.widget-row {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 4px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); position: relative;
}
.widget-row.dragging { z-index: 2; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); }
.widget-grip {
  width: 26px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border: 0; background: none; border-radius: 6px;
  color: var(--muted); cursor: grab; touch-action: none;
}
.widget-row.dragging .widget-grip { cursor: grabbing; }
.widget-grip svg { width: 16px; height: 16px; fill: currentColor; }
.widget-grip:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
.widget-toggle { flex: 1; align-items: flex-start; gap: 10px; min-width: 0; }
.widget-toggle input { margin-top: 2px !important; }
.widget-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.widget-row-name { font-size: 14px; font-weight: 600; color: var(--text); }
.widget-row-hint { font-size: 12.5px; font-weight: 400; color: var(--muted); line-height: 1.35; }
.widgets-reset { margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .wk-fill { transition: none; } }
.ring-head { position: relative; align-self: stretch; display: flex; justify-content: center; }
.ring-period {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 4px 8px; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--text);
}
.ring-period .chev { width: 12px; height: 12px; color: var(--muted); transition: transform 0.15s ease; }
.ring-period[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ring-period:hover { background: var(--bg); }
.ring-period:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ring-menu {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 5; min-width: 150px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; gap: 2px;
}
.ring-menu[hidden] { display: none; }
.ring-menu button {
  border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--text);
}
.ring-menu button:hover, .ring-menu button:focus-visible { background: var(--bg); outline: none; }
.ring-menu button[aria-checked="true"] { color: var(--primary); font-weight: 600; }
.ring { position: relative; width: 180px; height: 180px; }
.ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--border); stroke-width: 9; }
.ring-fill {
  fill: none; stroke: var(--primary); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), stroke 0.3s ease;
}
.ring.complete .ring-fill { stroke: var(--done); }
.ring-center { position: absolute; inset: 0; display: grid; place-items: center; }
.ring-num { font-size: 38px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ring-of { font-size: 20px; font-weight: 600; color: var(--muted); }
.ring-check svg { width: 58px; height: 58px; fill: none; stroke: var(--done); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ring-caption { font-size: 13px; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ring-fill { transition: none; } }

/* ---------- iPhone app (.in-app, set by index.html) ----------
   The pages are tabs along the bottom instead of a sidebar; Lists holds the sections and their
   groups. Large titles, 44-point tap targets, iPhone-size switches, and pop-up windows that rise
   from the bottom as sheets. Nothing here applies to the website itself. */
.tabbar, .back-link { display: none; }
.in-app { -webkit-tap-highlight-color: transparent; }
.in-app .layout { flex-direction: column; }
.in-app .sidebar, .in-app .scrim, .in-app .menu-btn { display: none !important; }
/* --safe-bottom: the home-indicator area, set by the iPhone app (pages run all the way down,
   under the floating tab bar). --tabbar-space: room left under each page so its end clears the bar. */
.in-app {
  --tabbar-bottom: max(8px, calc(var(--safe-bottom, 0px) - 10px));
  --tabbar-space: calc(64px + var(--tabbar-bottom) + 18px);
}
.in-app .main { flex: 1; min-height: 0; height: auto; padding: 10px 16px var(--tabbar-space); }
.in-app .main.fit { padding-bottom: var(--tabbar-space); }
.in-app .tabbar, .in-app .topbar, .in-app .segmented, .in-app .show-filter, .in-app .btn, .in-app .list-row {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* Tab bar: a floating pane of frosted glass over the page — what's underneath shows through,
   blurred, as it scrolls by. A soft bubble marks the current tab and glides between tabs. */
.in-app .tabbar {
  display: flex; flex-direction: row; gap: 0; padding: 6px;
  position: fixed; left: 16px; right: 16px; bottom: var(--tabbar-bottom); z-index: 20; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  border: 0.5px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 10px 30px rgba(10, 14, 30, 0.16), 0 2px 6px rgba(10, 14, 30, 0.08);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.in-app .tab-glow {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: var(--w, 0px); transform: translateX(var(--x, 0px));
  border-radius: 999px; pointer-events: none;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.38s cubic-bezier(0.3, 1.3, 0.5, 1), width 0.3s ease;
}
.in-app .tab-glow[hidden] { display: none; }
/* Typing in a field: the bar steps aside so it never sits on the keyboard. */
.in-app:has(#app input:focus, #app textarea:focus, #settings-dialog input:focus) .tabbar { opacity: 0; pointer-events: none; transform: translateY(12px); }
.in-app .tab-item {
  position: relative; flex: 1; min-width: 0; min-height: 52px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 4px 0; cursor: pointer; text-decoration: none; color: var(--muted);
}
.in-app .tab-item[hidden] { display: none; }
.in-app .tab-item svg {
  width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.in-app .tab-item.active { color: var(--primary); }
.in-app .tab-item.active svg { stroke-width: 2.1; }
/* Today's date inside the calendar icon. */
.tab-date { fill: currentColor; stroke: none; font: 700 8.2px var(--font); }
.in-app .tab-item:active svg { transform: scale(0.88); }
.in-app .tab-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 10px; }

/* Large titles; "‹ Lists" above a class / organization's title. */
.in-app .topbar { gap: 12px; margin-bottom: 16px; }
.in-app .title-wrap h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; white-space: normal; }
.in-app .title-dot { width: 16px; height: 16px; }
.in-app .back-link {
  display: inline-flex; flex-basis: 100%; align-items: center; gap: 1px; margin: 0 0 -6px -6px;
  color: var(--primary); font-size: 17px; text-decoration: none; min-height: 36px;
}
.in-app .back-link[hidden] { display: none; }
.in-app .back-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons, switches and segmented controls at iPhone sizes */
.in-app .btn { min-height: 44px; padding: 10px 16px; border-radius: 12px; font-size: 16px; font-weight: 600; }
.in-app .btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: 10px; }
.in-app .btn.icon { width: 40px; min-height: 40px; padding: 0; font-size: 20px; }
.in-app .new-split, .in-app .new-single { height: 46px; }
.in-app .new-main, .in-app .new-opt { border-radius: 12px; font-size: 16px; }
.in-app .segmented { border-radius: 10px; padding: 2px; }
.in-app .segmented button { min-height: 32px; padding: 6px 12px; border-radius: 8px; font-size: 14px; }
.in-app .show-filter { border-radius: 10px; padding: 2px; }
.in-app .switch-track { width: 51px; height: 31px; }
.in-app .switch-thumb { top: 2px; left: 2px; width: 27px; height: 27px; }
.in-app .switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); }
.in-app input:not([type=checkbox]):not([type=radio]):not([type=file]), .in-app select, .in-app textarea { min-height: 44px; border-radius: 10px; padding: 10px 12px; }
.in-app label { font-size: 14px; }

/* Lists of to-dos and events: bigger text and checkboxes, rounder cards. */
.in-app .card { border-radius: 14px; }
.in-app .day-row { grid-template-columns: 64px 26px minmax(0, 1fr); padding: 14px 16px; }
.in-app .day-section .day-row { grid-template-columns: 26px minmax(0, 1fr); }
.in-app .day-time { font-size: 13px; padding-top: 3px; }
.in-app .day-title { font-size: 16.5px; }
.in-app .day-sub { font-size: 14px; }
.in-app .day-mark { padding-top: 0; }
.in-app .day-mark .cal-check { width: 22px; height: 22px; }
.in-app .day-mark .cal-check.checked::after { left: 6px; top: 2px; width: 6px; height: 11px; border-width: 0 2.4px 2.4px 0; }
.in-app .day-row:hover { background: none; }
.in-app .day-row.event:hover { background: color-mix(in srgb, var(--chip) 7%, var(--surface)); }
.in-app .day-row:active { background: var(--bg); }
.in-app .show-done { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.in-app .info-btn { width: 38px; height: 38px; }

/* Lists page: each section as a rounded group of rows. */
.lists { display: flex; flex-direction: column; gap: 24px; }
.list-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 6px 16px; }
.list-head h2 {
  flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.list-more {
  width: 40px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 9px;
  background: none; color: var(--muted); cursor: pointer;
}
.list-more svg { width: 20px; height: 20px; fill: currentColor; }
.list-more:active, .list-more[aria-expanded="true"] { background: var(--border); color: var(--text); }
.list-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.list-row {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 12px 0 18px;
  border: 0; background: none; font: inherit; font-size: 16.5px; text-align: left; color: var(--text); text-decoration: none; cursor: pointer;
}
.list-row + .list-row::before { content: ""; position: absolute; top: 0; left: 46px; right: 0; border-top: 1px solid var(--border); }
.list-row:active { background: var(--bg); }
.list-row .dot { width: 12px; height: 12px; margin: 0 1px; }
.list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.list-count { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.list-chev { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
.list-add { color: var(--primary); }
.list-add .list-name { font-weight: 500; }
.list-plus { width: 14px; text-align: center; font-size: 24px; font-weight: 400; line-height: 1; }

/* Pop-up windows rise from the bottom as sheets (small confirmations stay centered). */
.in-app dialog.item-dialog {
  width: 100vw; max-width: none; margin: auto 0 0; border: 0; border-radius: 18px 18px 0 0;
  max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain;
}
/* Settings is a page of its own in the app: it fills the screen above the tab bar, no window. */
.in-app dialog.settings-dialog {
  position: fixed; inset: 0; z-index: 15; width: auto; max-width: none; height: auto; max-height: none;
  margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--bg); overflow: hidden; animation: none;
}
.in-app dialog.settings-dialog.closing { display: none; }
.in-app .settings-head { display: none; }
.in-app .settings-nav { background: var(--bg); border-bottom: 0; padding: 10px 16px 8px; gap: 14px; }
.in-app .settings-title { margin: 0; padding: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.in-app .settings-body { padding: 8px 16px var(--tabbar-space); }
.in-app .settings-tab:focus-visible { outline: none; }
.in-app .settings-tab { min-height: 36px; }
.in-app dialog.item-dialog .dialog-form { padding: 22px 18px 28px; }
@media (prefers-reduced-motion: no-preference) {
  .in-app dialog.item-dialog[open] { animation: sheet-in 0.32s cubic-bezier(0.2, 0.85, 0.25, 1); }
  .in-app dialog.item-dialog.closing { animation: sheet-out 0.2s ease-in forwards; }
}
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
/* Sheet buttons share the width, like an iPhone sheet's. */
.in-app dialog.item-dialog .dialog-actions { gap: 10px; }
.in-app dialog.item-dialog .dialog-actions .btn { flex: 1; }
.in-app dialog.item-dialog .dialog-actions .delete-left { margin-right: 0; }
.in-app .brand-menu { min-width: 210px; border-radius: 14px; padding: 6px; }
.in-app .brand-menu button { min-height: 44px; font-size: 16px; border-radius: 9px; }

/* Round + beside the title (opens To-do / Event), and Today on the calendar. */
.add-circle {
  width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--primary); color: var(--primary-text);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 30%, transparent); transition: transform 0.15s ease;
}
.add-circle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.add-circle:active { transform: scale(0.9); }
.add-circle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.today-btn { border: 0; background: none; padding: 6px 2px; min-height: 36px; cursor: pointer; font: inherit; font-size: 17px; color: var(--primary); }
.today-btn:active { opacity: 0.5; }
.in-app .topbar { align-items: center; }
.in-app .title-actions { width: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 14px; flex-shrink: 0; }
.in-app .title-wrap { flex: 1 1 0; }
/* Calendar: Day / Week / Month and the To-dos / Both / Events slider share one row under the title;
   the calendar itself takes sideways swipes. */
.in-app .cal-toolbar { margin-bottom: 12px; }
.in-app .cal-actions { width: 100%; gap: 8px; }
.in-app .cal-actions .segmented { flex: 1; min-width: 0; }
.in-app .cal-body { touch-action: pan-y; }
.in-app .cal-body > * { will-change: transform; }
/* No text selection or long-press callouts on the app's own controls and rows (fields still work). */
.in-app #app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.in-app #app input, .in-app #app textarea, .in-app dialog input, .in-app dialog textarea { -webkit-user-select: text; user-select: text; }
.in-app .cal-none { visibility: hidden; }
/* Empty pages: just the icon and words, no card around them. */
.in-app .card.empty { background: none; border: 0; box-shadow: none; padding-top: 56px; }
@media (prefers-reduced-motion: reduce) { .in-app .tab-glow, .in-app .tabbar { transition: none; } }

/* Calendar day view in the app: a row of the week's days, then the hours as one open, borderless
   timeline that scrolls naturally (no box, no scrollbar) and runs on under the glass tab bar. */
.in-app .day-tools { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 4px; }
.wk-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wk-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 2px; border: 0; background: none;
  cursor: pointer; color: var(--text); font: inherit;
}
.wk-name { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; }
.wk-num {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color 0.2s ease, color 0.2s ease;
}
.wk-day.today .wk-num { color: var(--primary); font-weight: 700; }
.wk-day.on .wk-num { background: var(--text); color: var(--bg); font-weight: 700; }
.wk-day.on.today .wk-num { background: var(--primary); color: var(--primary-text); }
.wk-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: 0.6; }
.wk-dot.none { visibility: hidden; }
.wk-day:active .wk-num { transform: scale(0.9); }
.in-app .day-count { font-size: 14px; color: var(--muted); }
.in-app .icon-seg button { min-height: 30px; padding: 4px 12px; display: grid; place-items: center; }
.in-app .icon-seg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.in-app .main.fit:has(.timeline-mode) { padding-bottom: 0; }
.in-app .tl.card { background: none; border: 0; box-shadow: none; border-radius: 0; }
.in-app .tl { --hour: 64px; --gutter: 52px; margin: 0 -16px; }
.in-app .tl-allday { border-bottom: 0.5px solid var(--border); padding: 8px 16px 10px 0; }
.in-app .tl-scroll {
  padding: 12px 0 var(--tabbar-space); scrollbar-width: none; overscroll-behavior: contain; cursor: default;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
}
.in-app .tl-scroll::-webkit-scrollbar { display: none; }
.in-app .tl-scroll:hover .tl-day:not(:has(.tl-item:hover)) { background: none; }
.in-app .tl-hour { border-top-width: 0.5px; }
.in-app .tl-hour::after { display: none; }
.in-app .tl-track { right: 16px; }
.in-app .tl-item { border-radius: 9px; font-size: 13.5px; padding: 6px 10px; }
.in-app .tl-item .cal-check { width: 18px; height: 18px; }
.in-app .tl-item .cal-check.checked::after { left: 4.5px; top: 1px; width: 5px; height: 9px; }
/* The gear draws to the edges of its box; a little smaller so it matches the other tab icons. */
.in-app .tab-item[data-tab="settings"] svg { width: 25px; height: 25px; stroke-width: 1.85; }
/* Taps answer at once: the pressed look shows the moment a finger lands, then eases back. */
.in-app .btn, .in-app .add-circle, .in-app .today-btn, .in-app .segmented button, .in-app .cal-check, .in-app .new-opt { transition-duration: 0.12s; }
.in-app .btn:active { transform: scale(0.97); opacity: 0.85; transition-duration: 0s; }
.in-app .segmented button:active, .in-app .list-more:active, .in-app .back-link:active { opacity: 0.55; }
.in-app .cal-check:active { transform: scale(0.85); }
.in-app .day-row:active, .in-app .list-row:active, .in-app .add-circle:active { transition-duration: 0s; }
.in-app .tl-allday-label { white-space: nowrap; font-size: 10.5px; }
/* Home / Homework header in the app: the encouragement as a quiet subtitle under the big title,
   then one tidy row — To-dos / Both / Events on the left, the Chronological / Group icons on the
   right, both the same height — and clear space before the first section. */
.in-app .home .day-tools { gap: 14px; margin-bottom: 26px; }
.in-app .home-cheer { font-size: 15px; line-height: 1.4; color: var(--muted); margin-top: -6px; }
.in-app .home-switches { justify-content: space-between; }
.in-app .home-switches .segmented { flex: 0 0 auto; }
.in-app .home-switches .show-filter { --opt: 40px; border-radius: 10px; padding: 2px; }
.in-app .home-switches .show-opt { min-height: 32px; }
.in-app .home-switches .show-opt svg { width: 17px; height: 17px; }
.in-app .icon-seg button { min-width: 44px; min-height: 32px; }

/* Hover tips (data-tip on icon-only controls): a small label in reversed colors. */
.hover-tip {
  position: fixed; z-index: 100; pointer-events: none; max-width: 240px;
  padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 500; line-height: 1.35; white-space: nowrap;
  background: var(--text); color: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0; transform: translateY(-3px); transition: opacity 0.12s ease, transform 0.12s ease;
}
.hover-tip[data-side="above"] { transform: translateY(3px); }
.hover-tip.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hover-tip { transition: none; transform: none; } }

/* ---------- home page (finallyapp.us, signed out) ---------- */
/* Its own scrolling page. Pieces rise in as the page opens (.lp-in) and as they scroll into view
   (.lp-reveal → .shown); the app picture checks off a to-do and fills its ring. All still with
   reduced motion. */
.landing {
  height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth;
  background:
    radial-gradient(1100px 520px at 85% -10%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 70%),
    radial-gradient(700px 420px at -10% 20%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%),
    var(--bg);
}
.landing.leaving { transition: opacity 0.22s ease, transform 0.22s ease; opacity: 0; transform: scale(0.99); }
.lp-nav {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px;
  padding: 14px max(24px, calc((100% - 1160px) / 2));
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease, background 0.2s ease;
}
.landing.scrolled .lp-nav { border-bottom-color: var(--border); }
.lp-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.lp-brand img { width: 26px; height: auto; }
.lp-links { display: flex; flex-direction: row; gap: 4px; margin-right: auto; }
.lp-links a { padding: 6px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color 0.15s ease, background 0.15s ease; }
.lp-links a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.lp-nav-actions { display: flex; gap: 8px; }
.lp-nav .btn { font-weight: 600; font-size: 14px; }
.lp-ghost { background: transparent; }
.lp-ghost:hover { background: var(--surface); }
.btn.lp-big { padding: 11px 20px; font-size: 15px; font-weight: 600; border-radius: 10px; }
.landing .btn { transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease; }
.landing .btn.primary { box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--primary) 60%, transparent); }
.landing .btn:active { transform: scale(0.97); }

.lp-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center;
  max-width: 1160px; margin: 0 auto; padding: 72px 24px 88px;
}
.lp-eyebrow {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}
.lp-hero h1 { margin: 18px 0 16px; font-size: clamp(38px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 750; }
.lp-accent { color: var(--primary); }
.lp-lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 520px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lp-small { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* The app picture */
.lp-shot { perspective: 1600px; }
.lp-window {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) 128px; min-height: 330px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 30px 70px -20px rgba(20, 24, 40, 0.28), 0 8px 24px -8px rgba(20, 24, 40, 0.12);
  transform: rotateY(-7deg) rotateX(3deg); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp-shot:hover .lp-window { transform: rotateY(-2deg) rotateX(1deg); }
.lp-win-side { background: var(--sidebar); padding: 14px 10px; display: flex; flex-direction: column; gap: 7px; }
.lp-win-brand { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.lp-win-brand img { width: 13px; height: auto; }
.lp-win-brand span { height: 6px; flex: 1; border-radius: 3px; background: var(--sidebar-text); opacity: 0.6; }
.lp-win-side i { display: block; height: 7px; border-radius: 4px; background: var(--sidebar-text); opacity: 0.35; }
.lp-win-side i.on { background: var(--sidebar-active); opacity: 1; box-shadow: inset 2px 0 0 var(--primary); height: 12px; }
.lp-win-side b { height: 1px; background: var(--sidebar-line); margin: 6px 0; }
.lp-win-side i.dot { position: relative; padding-left: 12px; background: none; opacity: 1; }
.lp-win-side i.dot::before { content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.lp-win-side i.dot::after { content: ""; position: absolute; left: 12px; right: 0; top: 1px; height: 5px; border-radius: 3px; background: var(--sidebar-text); opacity: 0.4; }
.lp-win-main { padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-win-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.lp-win-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.lp-win-head { font-size: 11px; font-weight: 700; display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }
.lp-win-head span { font-size: 10px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--today) 18%, var(--surface)); color: var(--today); }
.lp-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.lp-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lp-t b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s ease; }
.lp-t em { font-style: normal; font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.lp-t em::before, .lp-pcard em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.lp-when { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.lp-check { width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid color-mix(in srgb, var(--muted) 70%, transparent); flex-shrink: 0; position: relative; transition: background 0.25s ease, border-color 0.25s ease; }
.lp-check::after { content: ""; position: absolute; left: 4.3px; top: 1.6px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) scale(0); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.lp-row-done .lp-check, .lp-shot.play .lp-row-auto .lp-check { background: var(--done); border-color: var(--done); }
.lp-row-done .lp-check::after, .lp-shot.play .lp-row-auto .lp-check::after { transform: rotate(45deg) scale(1); }
.lp-row-done .lp-t b, .lp-shot.play .lp-row-auto .lp-t b { color: var(--muted); text-decoration: line-through; }
.lp-shot.play .lp-row-auto .lp-check { transition-delay: 0.9s; }
.lp-shot.play .lp-row-auto .lp-check::after { transition-delay: 0.9s; }
.lp-shot.play .lp-row-auto .lp-t b { transition-delay: 0.9s; }
.lp-bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--c); flex-shrink: 0; margin: 0 6px 0 6px; }
.lp-event { background: color-mix(in srgb, #c2410c 8%, var(--surface)); }
.lp-win-widgets { padding: 18px 12px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--surface) 50%, var(--bg)); }
.lp-ring { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.lp-ring svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.lp-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.lp-ring .track { stroke: color-mix(in srgb, var(--muted) 18%, transparent); }
.lp-ring .fill { stroke: var(--primary); stroke-dasharray: 251.3; stroke-dashoffset: 188.5; transition: stroke-dashoffset 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.95s; }
.lp-shot.play .lp-ring .fill { stroke-dashoffset: 125.7; }
.lp-ring-num { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; }
.lp-ring-num b { grid-area: 1 / 1; font-size: 22px; font-weight: 750; letter-spacing: -0.03em; transition: opacity 0.25s ease 1s, transform 0.25s ease 1s; }
.lp-ring-num small { font-size: 9.5px; color: var(--muted); }
.lp-ring-b { opacity: 0; transform: translateY(6px); }
.lp-shot.play .lp-ring-a { opacity: 0; transform: translateY(-6px); }
.lp-shot.play .lp-ring-b { opacity: 1; transform: none; }
.lp-mini { display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.lp-mini-head { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.lp-mini-title { font-size: 11.5px; font-weight: 600; }
.lp-mini-badge { align-self: flex-start; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }

/* Sections */
.lp-section { max-width: 1160px; margin: 0 auto; padding: 72px 24px; }
.lp-h2 { margin: 0; font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -0.03em; line-height: 1.1; font-weight: 750; text-align: center; }
.lp-sub { margin: 12px auto 0; max-width: 560px; text-align: center; font-size: 16.5px; line-height: 1.55; color: var(--muted); }
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.lp-card {
  padding: 22px 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.5s ease;
}
.lp-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(20, 24, 40, 0.3); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.lp-card h3 { margin: 16px 0 6px; font-size: 16.5px; letter-spacing: -0.01em; }
.lp-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.lp-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.lp-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-icon.lp-canvas { color: #e13e2b; background: color-mix(in srgb, #e13e2b 12%, var(--surface)); }
.lp-icon.lp-canvas svg { fill: currentColor; stroke: none; }

.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 56px; align-items: center; }
.lp-split .lp-h2, .lp-split .lp-sub { text-align: left; margin-left: 0; }
.lp-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-list li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 500; }
.lp-list li::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--done) 16%, var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d55' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3.2 3 6.3-6.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.lp-phone { justify-self: center; width: 250px; padding: 10px; border-radius: 44px; background: #111; box-shadow: 0 30px 60px -20px rgba(20, 24, 40, 0.4), inset 0 0 0 2px #2a2a2a; }
.lp-phone-screen { position: relative; height: 470px; border-radius: 35px; overflow: hidden; background: var(--bg); padding: 46px 14px 0; display: flex; flex-direction: column; gap: 9px; }
.lp-phone-island { position: absolute; top: 11px; left: 50%; width: 80px; height: 24px; margin-left: -40px; border-radius: 14px; background: #111; }
.lp-phone-title { font-size: 26px; font-weight: 750; letter-spacing: -0.03em; margin: 6px 0 2px 2px; }
.lp-prow { position: relative; border-radius: 13px; overflow: hidden; }
.lp-phead { font-size: 12px; font-weight: 700; margin: 4px 0 -2px 2px; }
.lp-pgo { position: absolute; inset: 0; background: var(--done); }
.lp-pgo::after { content: ""; position: absolute; left: 18px; top: 50%; width: 6px; height: 12px; margin-top: -8px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.lp-pcard { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 11px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; }
.lp-pcard .lp-check { grid-row: span 2; }
.lp-pcard b { font-size: 13px; font-weight: 600; }
.lp-pcard em { font-style: normal; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.lp-phone.shown .lp-swipe .lp-pcard { animation: lp-swipe 3.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s infinite; }
@keyframes lp-swipe { 0%, 12% { transform: none; } 30%, 52% { transform: translateX(56px); } 70%, 100% { transform: none; } }
.lp-ptabs { margin-top: auto; display: flex; justify-content: space-around; padding: 14px 8px 22px; border-top: 1px solid var(--border); background: var(--surface); margin-left: -14px; margin-right: -14px; }
.lp-ptabs i { width: 20px; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.lp-ptabs i.on { background: var(--primary); }

.lp-themes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.lp-theme { cursor: default; pointer-events: none; }

.lp-final { max-width: 760px; margin: 24px auto 64px; padding: 48px 24px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; }
.lp-final img { width: 52px; height: auto; filter: drop-shadow(0 4px 10px rgba(20, 24, 40, 0.14)); }
.lp-final h2 { margin: 14px 0 8px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; font-weight: 750; }
.lp-final p { margin: 0; color: var(--muted); font-size: 16px; }
.lp-final .lp-cta { justify-content: center; }
.lp-foot { display: flex; justify-content: space-between; align-items: center; max-width: 1160px; margin: 0 auto; padding: 22px 24px 32px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); }
.lp-foot-link { border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; padding: 0; }
.lp-foot-link:hover { color: var(--text); }
.lp-foot-links { display: flex; gap: 18px; align-items: center; }
a.lp-foot-link { text-decoration: none; }

/* Motion */
.landing:not([hidden]) .lp-in { animation: lp-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(80ms + var(--d, 0) * 70ms); }
.landing:not([hidden]) .lp-shot.lp-in { animation-name: lp-float-in; animation-duration: 0.9s; }
@keyframes lp-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes lp-float-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
.lp-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lp-reveal.shown { opacity: 1; transform: none; }
.lp-grid .lp-card:nth-child(3n + 2) { transition-delay: 70ms; }
.lp-grid .lp-card:nth-child(3n + 3) { transition-delay: 140ms; }
.lp-grid .lp-card.shown:hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .landing { scroll-behavior: auto; }
  .landing:not([hidden]) .lp-in, .lp-phone.shown .lp-swipe .lp-pcard { animation: none; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-window, .lp-window * , .lp-check, .lp-check::after { transition: none !important; }
  .landing.leaving { transition: none; }
}

/* Sign-in card on finallyapp.us: back to the home page. */
.login { position: relative; }
.login-home {
  position: absolute; top: 18px; left: 18px; display: flex; align-items: center; gap: 4px; padding: 7px 12px 7px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.login-home:hover { border-color: var(--muted); }
.login-home:active { transform: scale(0.97); }
.login-home svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login.onboarding .login-home { display: none; }

@media (max-width: 980px) {
  .lp-hero { grid-template-columns: 1fr; gap: 48px; padding-top: 48px; text-align: center; }
  .lp-lead { margin: 0 auto; }
  .lp-hero .lp-cta { justify-content: center; }
  .lp-window { transform: none; }
  .lp-shot { max-width: 620px; margin: 0 auto; width: 100%; text-align: left; }
  .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-split { grid-template-columns: 1fr; gap: 40px; }
  .lp-split .lp-h2, .lp-split .lp-sub { text-align: center; margin-left: auto; }
  .lp-list { align-items: center; }
}
@media (max-width: 640px) {
  .lp-nav { padding: 10px 16px; gap: 10px; }
  .lp-links { display: none; }
  .lp-nav-actions { margin-left: auto; }
  .lp-nav .btn { padding: 7px 12px; font-size: 13.5px; }
  .lp-nav .lp-ghost { border-color: transparent; }
  .lp-hero { padding: 36px 16px 56px; }
  .lp-hero h1 { font-size: 38px; }
  .lp-lead { font-size: 16.5px; }
  .lp-hero .btn.lp-big { flex: 1 1 100%; }
  .lp-window { grid-template-columns: 0 minmax(0, 1fr) 0; min-height: 0; }
  .lp-win-side, .lp-win-widgets { visibility: hidden; padding: 0; border: 0; }
  .lp-section { padding: 52px 16px; }
  .lp-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .lp-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-final { margin: 8px 16px 48px; padding: 36px 20px; }
  .lp-final .btn.lp-big { flex: 1 1 100%; }
  .lp-foot { padding: 20px 16px 28px; }
  .login-home { top: calc(env(safe-area-inset-top) + 12px); left: 12px; }
}

/* ---------- Quick add (Home) ---------- */
.qa { --qa-h: 58px; margin: 2px 0 20px; }
.qa-box {
  display: flex; align-items: center; gap: 12px; height: var(--qa-h); padding: 0 9px 0 15px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow); cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.qa-box:hover { border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); }
.qa.focused .qa-box {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent), 0 8px 24px rgba(20, 24, 40, 0.07);
}
.qa-icon {
  position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.qa-icon svg {
  position: absolute; inset: 7px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 0.22s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.qa-icon svg + svg { opacity: 0; transform: rotate(-90deg) scale(0.4); stroke-width: 1.9; }
.qa.typing .qa-icon { background: var(--primary); color: var(--primary-text); }
.qa.typing .qa-icon svg:first-child { opacity: 0; transform: rotate(90deg) scale(0.4); }
.qa.typing .qa-icon svg + svg { opacity: 1; transform: none; }

.qa-field { position: relative; flex: 1; min-width: 0; height: 100%; }
.qa-input, .qa-mirror, .qa-ph {
  font-size: 17px; font-weight: 500; letter-spacing: -0.005em; line-height: var(--qa-h);
}
.qa .qa-input {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; caret-color: var(--primary);
}
.qa .qa-input:focus { outline: none; }
.qa-mirror {
  position: absolute; inset: 0; overflow: hidden; white-space: pre; color: transparent; pointer-events: none;
}
.qa-hl {
  color: transparent; border-radius: 5px; padding: 3px 0;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
  animation: qa-hl-in 0.28s ease;
}
.qa-hl.group { background: color-mix(in srgb, var(--g, var(--primary)) 20%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--g, var(--primary)) 20%, transparent); }
.qa-hl.location { background: color-mix(in srgb, var(--muted) 18%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted) 18%, transparent); }
@keyframes qa-hl-in { from { background-color: transparent; box-shadow: 0 0 0 2px transparent; } }
.qa-ph {
  position: absolute; inset: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
  color: var(--muted); font-weight: 400; transition: opacity 0.15s ease;
}
/* Resting: "Add a to-do or event…". Focused and empty: rotating examples in its place. */
.qa-ph-lead, .qa-ph-ex { position: absolute; left: 0; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.qa-ph-lead { transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.qa-ph-ex { opacity: 0; transform: translateY(7px); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.qa.focused .qa-ph-lead { opacity: 0; transform: translateY(-7px); }
.qa.focused .qa-ph-ex { opacity: 1; transform: none; }
.qa.focused .qa-ph-ex.out { opacity: 0; transform: translateY(-7px); }
.qa.focused .qa-ph-ex.in { opacity: 0; transform: translateY(7px); transition: none; }
.qa.typing .qa-ph { opacity: 0; }

.qa-go {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 15px;
  border: 0; border-radius: 10px; background: var(--primary); color: var(--primary-text); font-size: 14px; font-weight: 600; cursor: pointer;
  opacity: 0; transform: translateX(6px) scale(0.92); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15), filter 0.15s ease;
}
.qa-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.qa.typing .qa-go { opacity: 1; transform: none; pointer-events: auto; }
.qa-go:hover { filter: brightness(1.08); }
.qa-go:active { transform: scale(0.96); }
.qa.sending .qa-go { opacity: 0.6; }
.qa.sending .qa-box { transform: scale(0.995); }

.qa-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.qa.typing .qa-fold { grid-template-rows: 1fr; }
.qa-fold-in { min-height: 0; overflow: hidden; }
.qa-chips { min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; gap: 7px; padding: 0 4px; transition: padding 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.qa.typing .qa-chips { padding: 11px 4px 2px; }
.qa-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; max-width: 100%; overflow: hidden; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500; cursor: default;
  transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2), width 0.2s ease, padding 0.2s ease, margin 0.2s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button.qa-chip { cursor: pointer; }
button.qa-chip:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.qa-chip > svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qa-chip .pb-chev { width: 13px; height: 13px; margin-right: -3px; opacity: 0.55; transition: transform 0.2s ease; }
.qa-chip.open .pb-chev { transform: rotate(180deg); }
.qa-chip .dot { width: 9px; height: 9px; }
.qa-chip-text { display: inline-block; overflow: hidden; text-overflow: ellipsis; }
.qa-chip.date, .qa-chip.time, .qa-chip.repeat {
  color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, transparent); background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}
.qa-chip.type { font-weight: 600; }
.qa-chip.soft { color: var(--muted); border-style: dashed; background: transparent; border-color: var(--border); }
.qa-chip.entering { opacity: 0; transform: translateY(5px) scale(0.85); }
.qa-chip.leaving { opacity: 0; transform: scale(0.85); padding-left: 0; padding-right: 0; margin-right: -7px; border-width: 0; pointer-events: none; }
.qa-x {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 -5px 0 0; border-radius: 50%; cursor: pointer;
  color: currentColor; opacity: 0.55; transition: opacity 0.15s ease, background-color 0.15s ease;
}
.qa-x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.qa-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }

.qa-note {
  display: flex; align-items: center; gap: 7px; max-height: 0; overflow: hidden; padding: 0 6px; opacity: 0; transform: translateY(-4px);
  font-size: 13px; color: var(--muted);
  transition: max-height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.28s ease;
}
.qa-note.show { max-height: 40px; opacity: 1; transform: none; padding-top: 10px; }
.qa-note b { color: var(--text); font-weight: 600; }
.qa-note .dot { display: inline-block; width: 8px; height: 8px; margin: 0 4px 0 2px; vertical-align: 0; }
.qa-note .person-mark { width: 13px; height: 13px; }
.qa-note.ok > .pb-tick { visibility: visible; stroke: var(--done); width: 16px; height: 16px; }
.qa-note.error { color: var(--danger); }
.qa-undo { margin-left: 4px; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--primary); font-weight: 600; font-size: 13px; cursor: pointer; }
.qa-undo:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.qa-menu { z-index: 90; }
.qa-menu .dot { width: 9px; height: 9px; flex-shrink: 0; }

/* The row it just made slides into place and glows once. */
.day-row.qa-new { animation: qa-new 1.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes qa-new {
  0% { opacity: 0; transform: translateY(-8px); background-color: color-mix(in srgb, var(--primary) 16%, transparent); }
  18% { opacity: 1; transform: none; background-color: color-mix(in srgb, var(--primary) 16%, transparent); }
  100% { background-color: transparent; }
}

@media (max-width: 760px) {
  .qa { --qa-h: 52px; margin-bottom: 16px; }
  .qa-input, .qa-mirror, .qa-ph { font-size: 16px; }
  .qa-box { padding: 0 7px 0 12px; gap: 10px; border-radius: 14px; }
  .qa-go { width: 38px; padding: 0; justify-content: center; }
  .qa-go span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qa *, .qa-box, .day-row.qa-new { transition: none !important; animation: none !important; }
}

/* ---------- Guided tour ---------- */
.tour { position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.tour.show { opacity: 1; }
.tour-block { position: absolute; inset: 0; pointer-events: auto; }
.tour-hole {
  position: absolute; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 4000px rgba(9, 11, 18, 0.56);
  transition: left 0.5s cubic-bezier(0.25, 0.9, 0.25, 1), top 0.5s cubic-bezier(0.25, 0.9, 0.25, 1), width 0.5s cubic-bezier(0.25, 0.9, 0.25, 1), height 0.5s cubic-bezier(0.25, 0.9, 0.25, 1);
}
.tour.centered .tour-hole { box-shadow: 0 0 0 4000px rgba(9, 11, 18, 0.6); }
/* The spotlight's ring is its own layer: mixed into the dimming shadow, some browsers drop the dim. */
.tour-hole::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 60%, transparent), 0 0 24px color-mix(in srgb, var(--primary) 28%, transparent); transition: opacity 0.3s ease; }
.tour.centered .tour-hole::after { opacity: 0; }
.tour-card {
  position: absolute; width: 340px; max-width: calc(100vw - 24px); padding: 20px 20px 16px; pointer-events: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  transition: left 0.5s cubic-bezier(0.25, 0.9, 0.25, 1), top 0.5s cubic-bezier(0.25, 0.9, 0.25, 1), opacity 0.22s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.tour-card:focus { outline: none; }
.tour-card.leaving { opacity: 0; transform: scale(0.97); transition: opacity 0.12s ease, transform 0.12s ease; }
.tour-card.arriving { opacity: 0; transform: translateY(8px) scale(0.98); transition: none; }
.tour.centered .tour-card { width: 380px; text-align: center; padding: 28px 26px 18px; }
.tour-art { display: flex; justify-content: center; margin-bottom: 12px; }
.tour-art img { animation: tour-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.tour-art svg { width: 54px; height: 54px; fill: none; stroke: var(--done); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tour-art svg circle { stroke-dasharray: 150; stroke-dashoffset: 0; }
.tour-art svg path { stroke-dasharray: 40; stroke-dashoffset: 0; }
.tour-art svg.draw circle { animation: tour-draw 0.6s ease both; }
.tour-art svg.draw path { animation: tour-draw-tick 0.4s 0.45s ease both; }
@keyframes tour-draw { from { stroke-dashoffset: 150; } }
@keyframes tour-draw-tick { from { stroke-dashoffset: 40; } }
@keyframes tour-pop { from { opacity: 0; transform: scale(0.5) rotate(-12deg); } }
.tour-count { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--primary); margin-bottom: 4px; }
.tour-count:empty { display: none; }
.tour-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tour.centered .tour-title { font-size: 22px; }
.tour-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tour-text b { color: var(--text); font-weight: 600; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.tour.centered .tour-foot { flex-direction: column-reverse; gap: 14px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--border); transition: width 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.3s ease; }
.tour-dots i.past { background: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.tour-dots i.on { width: 18px; background: var(--primary); }
.tour-btns { display: flex; align-items: center; gap: 6px; }
.tour.centered .tour-btns { flex-direction: row-reverse; width: 100%; justify-content: center; }
.tour.centered .tour-next { min-width: 160px; }
.tour-btns .btn { padding: 7px 14px; font-size: 14px; }
.tour-skip { border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.tour-skip:hover { color: var(--text); background: var(--bg); }
.tour-back[hidden], .tour-skip[hidden] { display: none; }
.settings-panel[data-panel="profile"] .settings-card + .settings-card { margin-top: 14px; }

@media (max-width: 760px) {
  .tour-card { width: calc(100vw - 24px); }
  .tour.centered .tour-card { width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .tour, .tour-hole, .tour-card, .tour-dots i { transition: none !important; }
  .tour-art img, .tour-art svg * { animation: none !important; }
}

/* Quick add's + is a button: the To-do / Event menu, or (while typing) the full editor. */
button.qa-icon { border: 0; padding: 0; cursor: pointer; }
button.qa-icon:hover { transform: scale(1.08); background: color-mix(in srgb, var(--primary) 20%, transparent); }
.qa.typing button.qa-icon:hover { background: var(--primary); filter: brightness(1.1); }
button.qa-icon:active { transform: scale(0.94); }
button.qa-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- View menu (Home, Homework) ---------- */
.view-wrap { position: relative; flex-shrink: 0; }
.view-btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.2s ease;
}
.view-btn > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.view-btn:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.view-btn.open { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.view-btn.open > svg { transform: rotate(180deg); }
.view-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.view-sum { color: var(--primary); font-weight: 600; display: inline-block; }
.view-sum:empty { display: none; }
.view-sum::before { content: "·"; color: var(--muted); font-weight: 400; margin-right: 7px; }
.view-dot { display: none; }

.view-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 300px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px rgba(10, 14, 30, 0.18);
  opacity: 0; transform: translateY(-6px) scale(0.97); transform-origin: top right;
  transition: opacity 0.14s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.view-menu.show { opacity: 1; transform: none; }
.vm-row + .vm-row { margin-top: 14px; }
.vm-head { margin: 0 0 7px 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.vm-seg {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 3px; border-radius: 10px; background: var(--bg);
}
.vm-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: 8px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(10, 14, 30, 0.1), 0 1px 6px rgba(10, 14, 30, 0.06);
  transform: translateX(calc(100% * var(--at))); transition: transform 0.28s cubic-bezier(0.25, 0.9, 0.3, 1.1);
}
.vm-seg button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 6px;
  border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: color 0.2s ease;
}
.vm-seg button svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vm-seg button:hover { color: var(--text); }
.vm-seg button[aria-checked="true"] { color: var(--text); font-weight: 600; }
.vm-seg button[aria-checked="true"] svg { color: var(--primary); }
.vm-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.vm-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.vm-keys kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-right: 2px; padding: 0 4px;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface);
  font: 600 11px/1 var(--font); color: var(--text);
}
@media (max-width: 760px) {
  .view-sum { display: none; }
  .view-btn.changed .view-dot { display: block; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
  .view-btn { padding: 0 9px; }
  .view-label { display: none; }
  .view-menu { width: min(300px, calc(100vw - 32px)); }
  .vm-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view-menu, .vm-thumb, .view-btn > svg { transition: none !important; }
}
/* Phones: the View button stays on the encouragement's line, at its right. */
@media (max-width: 760px) {
  .home .day-tools:has(.view-wrap) { flex-direction: row; align-items: center; }
  .home .day-tools:has(.view-wrap) .home-cheer { flex: 1; }
  .view-btn { height: 34px; width: 38px; justify-content: center; }
}

/* Day and week timelines: no hover tint on blank space (the week strip's hover must not reach the day columns). */
.wk-cols > .wk-col:hover { background: transparent; }
.wk-cols > .wk-col.today:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }

/* ---------- Calendar header (website): ‹ › Today beside the title, then View and + New ---------- */
.cal-nav2 { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.cal-arrow {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.cal-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cal-arrow:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.cal-arrow:active { transform: scale(0.92); }
.cal-arrow:focus-visible, .cal-today-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Today: only while you're away from today; it fades and slides in beside the arrows. */
.cal-today-pill {
  height: 28px; margin-left: 6px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)); color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer;
  opacity: 0; transform: translateX(-6px) scale(0.92); pointer-events: none; visibility: hidden;
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s 0.2s, background-color 0.15s ease;
}
.cal-today-pill.away { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s, background-color 0.15s ease; }
.cal-today-pill:hover { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.title-actions .view-wrap { display: flex; }
.title-actions .view-btn { height: 38px; padding: 0 13px 0 11px; border-radius: 10px; font-size: 14px; }
.title-actions .view-label { font-weight: 600; }
/* View menu: a row that folds in and out (Arrange, Day view only). */
.vm-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease; }
.vm-fold > div { min-height: 0; overflow: hidden; }
.vm-fold.open { grid-template-rows: 1fr; opacity: 1; }
.vm-fold .vm-row { padding-top: 14px; }
.vm-row + .vm-fold .vm-row { margin-top: 0; }
.vm-seg button span:only-child { margin: 0; }
@media (max-width: 760px) {
  .title-actions:has(.view-wrap) { flex-wrap: nowrap; }
  .title-actions .view-btn { width: 44px; padding: 0; justify-content: center; }
  .title-actions .new-split { flex: 1; width: auto; }
  .cal-nav2 { margin-left: 0; }
  .cal-arrow { width: 30px; }
  .cal-today-pill { height: 26px; padding: 0 9px; margin-left: 2px; font-size: 12px; }
  .cal-arrow { width: 28px; height: 30px; }
  .title-wrap:has(.cal-nav2) { gap: 6px; }
  .title-wrap:has(.cal-nav2) h1 { font-size: 19px; }
  /* The View button is at the left on phones: its menu opens from there. */
  .title-actions .view-menu { right: auto; left: 0; transform-origin: top left; }
}
@media (prefers-reduced-motion: reduce) { .cal-today-pill, .vm-fold { transition: none !important; } }
/* The arrows sit left of the title (so they stay put as the title changes); Today stays after it. */
.title-tools:has(.cal-nav2), .cal-nav2 { display: contents; }
.cal-nav2 .cal-arrow { order: -1; }
.cal-nav2 .cal-arrow + .cal-arrow { margin-left: -8px; }
.cal-nav2 .cal-arrow:first-child { margin-left: -6px; }
.cal-today-pill { margin-left: 0; }
/* Today now sits in the right-hand buttons, before View. */
.title-actions .cal-today-pill { height: 32px; margin: 0; padding: 0 14px; transform: translateX(6px) scale(0.92); }
.title-actions .cal-today-pill.away { transform: none; }
@media (max-width: 760px) {
  .title-actions .cal-today-pill:not(.away) { display: none; }
  .title-actions .cal-today-pill { height: 34px; }
}

/* No text selection in the app itself (lists, calendar, sidebar, headers, menus): clicks and
   drags there are for using it. Typing fields, the details card (title, notes, place) and the
   pop-up windows' contents (Settings, the editor, import) stay selectable so things can be copied. */
#app, .day-pop, .view-menu, .pb-menu, .tour, .hover-tip, .settings-nav, .link-head, .item-head {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#app input, #app textarea, #app [contenteditable] { -webkit-user-select: text; user-select: text; }

/* ---------- Quick add: search ("/" first) ---------- */
.qa-icon svg:nth-child(3) { opacity: 0; transform: scale(0.4) rotate(-45deg); stroke-width: 2.2; }
.qa.searching .qa-icon { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.qa.searching .qa-icon svg:first-child, .qa.searching .qa-icon svg:nth-child(2) { opacity: 0; transform: rotate(90deg) scale(0.4); }
.qa.searching .qa-icon svg:nth-child(3) { opacity: 1; transform: none; }
.qa.searching button.qa-icon:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); filter: none; }
.qa.searching .qa-go, .qa.searching .qa-chips { display: none; }
.qa-slash {
  color: transparent; border-radius: 5px; padding: 3px 0;
  background: color-mix(in srgb, var(--primary) 15%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.qa-ghost { color: var(--muted); font-weight: 400; margin-left: 6px; }
.qa-results { display: none; }
.qa.searching .qa-results { display: block; padding-top: 10px; animation: qa-res-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes qa-res-in { from { opacity: 0; transform: translateY(-4px); } }
.qa-res-list { margin: 0; max-height: min(430px, 55vh); overflow-y: auto; overscroll-behavior: contain; }
.qa-results .day-row.qa-active { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.qa-results .day-title mark { background: color-mix(in srgb, var(--primary) 20%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.qa-res-hint { display: flex; align-items: center; gap: 8px; padding: 6px 6px 2px; font-size: 13px; color: var(--muted); }
.qa-res-hint svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.qa-res-more { padding: 8px 6px 0; font-size: 12.5px; color: var(--muted); }
/* While searching, the list below steps back. */
.home-sections, .home-foot { transition: opacity 0.2s ease; }
.qa.searching ~ .home-sections, .qa.searching ~ .home-foot { opacity: 0.35; }

/* ---------- Section pages: the sidebar's section headings are links ---------- */
.nav-section-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: -4px 0 -4px -6px; padding: 4px 6px; border-radius: 7px;
  color: inherit; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-section-link:hover { background: var(--sidebar-tint); color: var(--sidebar-strong); }
.nav-section-link.active { background: var(--sidebar-active); color: var(--sidebar-strong); }
.nav-section-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }

/* View menu: From — one chip per section, wrapping. */
.vm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vm-chips button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.vm-chips button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vm-chips button:hover { color: var(--text); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.vm-chips button[aria-checked="true"] { color: var(--primary); font-weight: 600; border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.vm-chips button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* The sidebar shows no counts (the user's choice, 2026-11-11). */
#sidebar .count { display: none; }

/* ---------- Search anywhere (⌘K) ---------- */
.palette { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.pal-back { position: absolute; inset: 0; background: rgba(9, 11, 18, 0.42); opacity: 0; transition: opacity 0.18s ease; }
.pal-box {
  position: relative; width: 620px; max-width: 100%; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
  opacity: 0; transform: translateY(-10px) scale(0.98); transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.palette.show .pal-back { opacity: 1; }
.palette.show .pal-box { opacity: 1; transform: none; }
.pal-head { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.pal-head > svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; }
.pal-head input { flex: 1; height: 58px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 17px; font-weight: 500; outline: none; -webkit-user-select: text; user-select: text; }
.pal-head input:focus { outline: none; }
.palette kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-right: 2px;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface);
  font: 600 11px/1 var(--font); color: var(--muted);
}
.pal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.pal-sec { padding: 6px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.pal-list .day-row { border-radius: 10px; border-bottom: 0; }
.pal-list .day-row.pal-active { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.pal-list .day-title mark { background: color-mix(in srgb, var(--primary) 20%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.pal-note { padding: 14px 10px; font-size: 13px; color: var(--muted); }
.pal-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
@media (max-width: 760px) {
  .palette { padding-top: calc(env(safe-area-inset-top) + 12px); }
  .pal-box { max-height: 80vh; }
  .pal-head input { font-size: 16px; height: 52px; }
  .pal-head kbd, .pal-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pal-back, .pal-box { transition: none !important; } }

/* ---------- Clean up duplicates (Settings → Clean up) ---------- */
.dupes-icon { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.dupes-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dupes-dialog { max-width: 760px; }
.dupes-count { flex: 1; min-width: 0; margin: 0; font-size: 13px; }
.dupes-list { display: flex; flex-direction: column; gap: 12px; }
.dup-set {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden;
  animation: dup-in 0.32s var(--d, 0ms) cubic-bezier(0.2, 0.8, 0.2, 1) both; transition: opacity 0.2s ease, border-color 0.2s ease;
}
@keyframes dup-in { from { opacity: 0; transform: translateY(6px); } }
.dup-set.off { opacity: 0.55; }
.dup-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.dup-on { position: relative; display: grid; place-items: center; gap: 0; cursor: pointer; }
.dup-on input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dup-box {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border);
  background: var(--surface); transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dup-box .pb-tick { visibility: visible; width: 13px; height: 13px; stroke: var(--primary-text); opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.dup-on input:checked + .dup-box { background: var(--primary); border-color: var(--primary); }
.dup-on input:checked + .dup-box .pb-tick { opacity: 1; transform: none; }
.dup-on input:focus-visible + .dup-box { outline: 2px solid var(--primary); outline-offset: 2px; }
.dup-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; }
.dup-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dup-mark.todo { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.dup-mark.event { background: color-mix(in srgb, var(--today) 14%, transparent); color: var(--today); }
.dup-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup-when { margin-left: 10px; font-weight: 500; font-size: 13px; color: var(--muted); }
.dup-n { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.dup-rows { display: flex; flex-direction: column; }
.dup-row { position: relative; display: flex; flex-direction: row; align-items: center; color: var(--text); font-size: 14px; gap: 12px; padding: 10px 14px; cursor: pointer; transition: background-color 0.15s ease; }
.dup-row + .dup-row { border-top: 1px solid var(--border); }
.dup-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.dup-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dup-radio { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--border); transition: border-color 0.15s ease, border-width 0.15s ease; }
.dup-row.keep .dup-radio { border: 5.5px solid var(--done); }
.dup-row input:focus-visible ~ .dup-radio { outline: 2px solid var(--primary); outline-offset: 2px; }
.dup-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; transition: opacity 0.2s ease; }
.dup-title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s ease; }
.dup-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: 12.5px; color: var(--muted); }
.dup-sub i { font-style: normal; opacity: 0.6; }
.dup-sub .dot { width: 8px; height: 8px; }
.dup-sub .person-mark { width: 12px; height: 12px; }
.dup-row.drop .dup-title { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.dup-set.off .dup-row.drop .dup-title { text-decoration: none; }
.dup-tag { position: relative; flex-shrink: 0; display: grid; font-size: 12px; font-weight: 600; }
.dup-tag > span { grid-area: 1 / 1; justify-self: end; padding: 3px 9px; border-radius: 999px; transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.t-keep { color: var(--done); background: color-mix(in srgb, var(--done) 12%, transparent); }
.t-drop { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.dup-row.keep .t-drop, .dup-row.drop .t-keep { opacity: 0; transform: scale(0.8); }
.dup-set.off .dup-tag { opacity: 0; }
@media (max-width: 760px) {
  .dup-when { display: block; margin: 2px 0 0; }
  .dup-name { white-space: normal; }
  .dupes-count { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dup-set { animation: none; } .dup-tag > span, .dup-box, .dup-box .pb-tick { transition: none; } }