/* ============ Catleya — design tokens ============
   Loud, flat, a little cheeky: one flat colour per screen, thick ink outlines,
   hard drop shadows (no blur), fat pill buttons. */
:root {
  --butter: #F8E27A;
  --lilac: #D7C3F8;
  --mint: #BFE8CB;
  --sky: #C3E0F8;
  --coral: #F2604E;
  --peach: #FFC9A8;
  --on-color: #16131B; /* text on any of the flat colours, in both themes */

  --page: var(--butter); /* the screen's colour, set per route on <html data-route> */
  --edge: #16131B;       /* outlines */
  --drop: #16131B;       /* hard shadows */
  --bw: 3px;             /* outline width */

  --brand: #16131B;
  --brand-2: var(--coral);
  --brand-soft: rgba(22, 19, 27, .08);
  --bg: var(--page);
  --surface: #ffffff;
  --surface-2: #ffffff;
  --text: #16131B;
  --muted: #3F3946;
  --line: rgba(22, 19, 27, .16);
  --paper: #fffdf6;
  --paper-line: #c9dcf0;
  --paper-margin: #f0a7b6;
  --ink: #1f2a44;
  --danger: #D2352B;
  --ok: #1F8A4C;
  --warn: #E39A1B;
  --shadow: 0 5px 0 var(--drop);
  --radius: 22px;
  --nav-h: 76px;
  --top-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --hand: 'Caveat', 'Comic Sans MS', cursive;
  color-scheme: light;
}
:root[data-route="notebooks"], :root[data-route="files"] { --page: var(--lilac); }
:root[data-route="planner"], :root[data-route="schedule"] { --page: var(--mint); }
:root[data-route="bulletin"], :root[data-route="quizzes"], :root[data-route="links"] { --page: var(--sky); }
:root[data-route="exams"] { --page: var(--mint); }
:root[data-route="flashcards"], :root[data-route="focus"], :root[data-route="progress"] { --page: var(--peach); }
/* charts: one blue ramp, light → dark (the dark theme gets its own steps below) */
:root { --viz-0: #ecebef; --viz-1: #b7d3f6; --viz-2: #6da7ec; --viz-3: #2a78d6; --viz-4: #104281; --viz-bar: #86b6ef; --viz-accent: #2a78d6; --viz-grid: rgba(22, 19, 27, .12); }

/* Dark: black ground, outlines turn white, the screen's colour moves into the shadows. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --edge: #F4F1F8;
    --drop: var(--page);
    --brand: #F4F1F8;
    --brand-soft: rgba(255, 255, 255, .1);
    --bg: #16131B;
    --surface: #221E29;
    --surface-2: #2A2532;
    --text: #F4F1F8;
    --muted: #C9C2D3;
    --line: rgba(244, 241, 248, .18);
    --paper: #fbf8ef;
    color-scheme: dark;
    --viz-0: #2f2a38; --viz-1: #184f95; --viz-2: #2a78d6; --viz-3: #6da7ec; --viz-4: #cde2fb; --viz-bar: #256abf; --viz-accent: #6da7ec; --viz-grid: rgba(244, 241, 248, .14);
  }
}
:root[data-theme="dark"] {
  --viz-0: #2f2a38; --viz-1: #184f95; --viz-2: #2a78d6; --viz-3: #6da7ec; --viz-4: #cde2fb; --viz-bar: #256abf; --viz-accent: #6da7ec; --viz-grid: rgba(244, 241, 248, .14);
  --edge: #F4F1F8;
  --drop: var(--page);
  --brand: #F4F1F8;
  --brand-soft: rgba(255, 255, 255, .1);
  --bg: #16131B;
  --surface: #221E29;
  --surface-2: #2A2532;
  --text: #F4F1F8;
  --muted: #C9C2D3;
  --line: rgba(244, 241, 248, .18);
  --paper: #fbf8ef;
  color-scheme: dark;
}

/* ============ base / app-like behaviour ============ */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation; /* kills double-tap-to-zoom */
  height: 100%;
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  transition: background-color .25s ease;
}
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; } /* >=16px prevents iOS focus-zoom */
a { color: var(--text); text-underline-offset: 3px; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 .5rem; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); letter-spacing: -0.04em; line-height: .98; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.hand { font-family: var(--hand); }
[hidden] { display: none !important; }
.ico { display: inline-block; vertical-align: -0.18em; flex: none; }
h1 .ico, h2 .ico, h3 .ico { margin-right: 8px; vertical-align: -0.1em; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.no-select { user-select: none; -webkit-user-select: none; }
/* Things you tap or long-press (notebooks on the shelf, folders, buttons) shouldn't pop up
   iOS's Copy / Look Up menu or get selected like text. */
button, .nb, .fab, .nav a, .folder-body, .folder-tab { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* One focus ring for everything: coral, outside the black outline. */
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.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; }
.kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 2.5px solid var(--edge); border-radius: 999px;
  font-size: .8rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}

/* ============ layout ============ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--top-h) + var(--safe-t));
  padding: var(--safe-t) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
  transition: background-color .25s ease;
  user-select: none; -webkit-user-select: none;
}
.brand, .nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand-mark { width: 36px; height: 36px; flex: none; display: block; }
.theme-ico { display: grid; place-items: center; }
.brand-name { font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.topbar-title { flex: 1; min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.topbar .icon-btn { width: 46px; height: 46px; border: var(--bw) solid var(--edge); border-radius: 999px; background: var(--surface); box-shadow: 0 3px 0 var(--drop); }
.topbar .icon-btn:hover { background: var(--surface); }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + var(--safe-b));
  padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + var(--safe-b)) max(8px, env(safe-area-inset-left));
  display: flex; justify-content: space-around; gap: 4px;
  background: var(--surface);
  border-top: var(--bw) solid var(--edge);
  user-select: none; -webkit-user-select: none;
}
.nav a {
  position: relative;
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 18px; text-decoration: none; color: var(--text); font-size: .75rem; font-weight: 700;
  transition: background-color .15s, color .15s;
}
.nav a .nav-ico { display: grid; place-items: center; width: 26px; height: 26px; line-height: 1; }
.nav a.active { background: var(--edge); color: var(--surface); font-weight: 800; }
.nav a.active .nav-ico .ico { stroke-width: 2.4; }
.nav a .badge { position: absolute; top: 2px; left: calc(50% + 6px); }
.nav .nav-wide, .nav .nav-group, .nav .nav-brand { display: none; }

main#view {
  padding: 8px max(20px, env(safe-area-inset-right)) calc(var(--nav-h) + var(--safe-b) + 32px) max(20px, env(safe-area-inset-left));
  max-width: 1120px; margin: 0 auto;
  outline: none;
}
main#view.full { max-width: none; padding: 0 0 calc(var(--nav-h) + var(--safe-b)); }

@media (max-width: 379px) {
  main#view { padding-left: 16px; padding-right: 16px; }
  .nav a { font-size: .7rem; }
  :root { --nav-h: 66px; }
}
/* Landscape phones: a slimmer tab bar so there's room to read */
@media (max-height: 500px) and (orientation: landscape) { :root { --nav-h: 60px; } .nav a { flex-direction: row; gap: 6px; } }
@media (min-width: 600px) {
  main#view { padding-left: 32px; padding-right: 32px; }
  .topbar { padding-left: 32px; padding-right: 32px; }
}

/* Laptop & desktop: a black sidebar with the app's sections in groups. */
@media (min-width: 1024px) {
  :root { --side-w: 240px; }
  .nav {
    top: 0; bottom: 0; right: auto; width: var(--side-w); height: auto;
    flex-direction: column; justify-content: flex-start; gap: 2px; padding: 22px 14px;
    border-top: 0; background: #16131B; overflow-y: auto;
  }
  .nav .nav-brand { display: flex; color: #fff; padding: 0 10px 14px; }
  .nav a { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: .97rem; font-weight: 600; color: #EDE9F2; }
  .nav a:hover { background: #2A2531; color: #fff; }
  .nav a.active, .nav a.active:hover { background: var(--page); color: var(--on-color); font-weight: 800; }
  .nav a .badge { position: static; margin-left: auto; }
  .nav .nav-wide { display: flex; }
  .nav .nav-group { display: block; padding: 14px 16px 4px; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #A59EB0; }
  .nav .nav-more { margin-top: auto; }
  .nav a[data-route="more"] .nav-ico + span::after { content: ' & settings'; }
  .nav a[data-route="bulletin"] .nav-ico + span::before { content: 'Creator '; }
  .topbar { margin-left: var(--side-w); padding-left: 48px; padding-right: 48px; }
  .topbar .brand { display: none; }
  main#view { margin-left: calc(var(--side-w) + max(0px, (100vw - var(--side-w) - 1120px) / 2)); padding: 8px 48px 56px; }
  main#view.full { margin-left: var(--side-w); padding-bottom: 0; }
  #app { --nav-h: 0px; }
}

/* ============ components ============ */
.icon-btn {
  position: relative;
  border: 0; background: transparent; color: var(--text);
  width: 44px; height: 44px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.15rem; flex: none;
  transition: background-color .15s, color .15s, transform .12s, box-shadow .12s, opacity .18s;
}
@media (hover: hover) { .icon-btn:hover { background: var(--brand-soft); } }
.icon-btn:active { transform: scale(.92); }
.icon-btn:focus:not(:focus-visible) { outline: none; }
.icon-btn.on { background: var(--edge); color: var(--bg); }
.badge {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; border: 2px solid var(--edge);
  background: var(--coral); color: var(--on-color); font-size: .7rem; font-weight: 800; line-height: 16px; text-align: center;
}
.icon-btn .badge { position: absolute; top: -6px; right: -6px; }
.icon-btn .ico { pointer-events: none; }
.acct-ico { display: grid; place-items: center; }
.avatar {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--page); color: var(--on-color); font-family: var(--display); font-weight: 800; font-size: 1rem;
}
.avatar.big { width: 56px; height: 56px; font-size: 1.5rem; flex: none; border: var(--bw) solid var(--edge); }
.sync-dot { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--edge); background: var(--ok); }
.sync-dot.syncing { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
.sync-dot.offline, .sync-dot.off { background: #9a93a6; }
.sync-dot.error { background: var(--danger); }
@keyframes pulse { 50% { transform: scale(.7); } }
.acct-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.acct-head .tag { margin-top: 4px; display: inline-flex; gap: 4px; align-items: center; }
.sync-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 700; }

/* auth sheet */
.auth { gap: 14px; }
.auth-hero { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; border: var(--bw) solid var(--edge); background: var(--butter); color: var(--on-color); }
.auth-hero p { margin: 0; font-size: .92rem; font-weight: 600; }
.auth-tabs { width: 100%; }
.auth-tabs button { flex: 1; }
.auth-error { margin: 0; padding: 10px 14px; border-radius: 14px; border: 2.5px solid var(--edge); background: var(--coral); color: var(--on-color); font-weight: 700; font-size: .9rem; }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 50px; }
.pass-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.btn.block { width: 100%; }
.auth-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.linkish { border: 0; background: none; color: var(--text); font-weight: 700; cursor: pointer; padding: 10px 0; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.auth-sent { text-align: center; padding: 10px 0; }
.auth-sent .ico { margin-bottom: 8px; }

/* Buttons: a black outline and a hard shadow; they lift on hover and sink when pressed. */
.btn {
  border: var(--bw) solid var(--edge); background: var(--surface); color: var(--text);
  min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; white-space: nowrap; box-shadow: 0 4px 0 var(--drop);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s, color .15s;
}
@media (hover: hover) { .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--drop); } }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--drop); }
.btn.primary { background: var(--edge); color: var(--bg); }
.btn.accent { background: var(--coral); color: var(--on-color); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; padding: 0 10px; }
@media (hover: hover) { .btn.ghost:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--brand-soft); } }
.btn.ghost:active:not(:disabled) { transform: scale(.97); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: .88rem; box-shadow: 0 3px 0 var(--drop); border-width: 2.5px; }
.btn.small.ghost { box-shadow: none; }
.btn.big { min-height: 64px; padding: 0 30px; font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.01em; box-shadow: 0 6px 0 var(--drop); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.fab {
  display: grid; place-items: center;
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: calc(var(--nav-h) + var(--safe-b) + 20px); z-index: 25;
  width: 62px; height: 62px; border-radius: 999px; border: var(--bw) solid var(--edge);
  background: var(--coral); color: var(--on-color);
  box-shadow: 0 5px 0 var(--drop); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  animation: fabIn .45s cubic-bezier(.2, .9, .3, 1.3) .12s backwards;
}
.fab .ico { stroke-width: 3; }
@media (hover: hover) { .fab:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--drop); } }
.fab:active { transform: translateY(5px); box-shadow: 0 0 0 var(--drop); }
@media (min-width: 1024px) { .fab { right: 40px; bottom: 36px; } }
@keyframes fabIn { from { opacity: 0; transform: scale(.6) rotate(-20deg); } }

.card {
  background: var(--surface); border: var(--bw) solid var(--edge); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: 0 6px 0 var(--drop);
}
.card + .card { margin-top: 18px; }
.grid > .card + .card { margin-top: 0; }
.section { margin-bottom: 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 22px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip .ico { vertical-align: -0.15em; margin-right: 4px; }
.toggle-group button .ico { vertical-align: -0.15em; margin-right: 4px; }
.chip {
  flex: none; border: 2.5px solid var(--edge); background: var(--surface); color: var(--text);
  min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: .88rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s, transform .12s;
}
.chip:active { transform: scale(.95); }
.chip.on { background: var(--edge); color: var(--bg); font-weight: 800; }
.chip.scope { margin-right: 6px; }
.chip.scope.on { background: var(--butter); color: var(--on-color); }
.tag .ico { vertical-align: -0.15em; margin-right: 3px; }
.tag {
  display: inline-block; white-space: nowrap; padding: 1px 9px; border-radius: 999px; border: 2px solid var(--edge);
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; background: var(--surface); color: var(--text);
}
.tag.hot { background: var(--coral); color: var(--on-color); }
.tag.new { background: var(--butter); color: var(--on-color); }

.search {
  width: 100%; min-height: 52px; padding: 0 20px; border-radius: 999px; border: var(--bw) solid var(--edge); background: var(--surface);
  margin-bottom: 14px; font-weight: 600; box-shadow: 0 4px 0 var(--drop);
}

.empty { text-align: center; padding: 44px 16px; color: var(--text); }
.empty-ico { margin-bottom: 10px; }
.empty h3 { font-size: 1.6rem; }
.empty p { max-width: 420px; margin-left: auto; margin-right: auto; }

.toggle-group { display: inline-flex; background: var(--surface); border: var(--bw) solid var(--edge); border-radius: 999px; padding: 4px; gap: 2px; }
.toggle-group button { border: 0; background: transparent; min-height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 700; cursor: pointer; color: var(--text); }
.toggle-group button.on { background: var(--edge); color: var(--surface); font-weight: 800; }

/* ============ forms ============ */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 800; font-size: .9rem; }
.field input, .field select, .field textarea, .input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 2.5px solid var(--edge); background: var(--surface-2);
}
.field textarea { min-height: 0; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus, .search:focus { outline: 3px solid var(--coral); outline-offset: 2px; }
.field.check { flex-direction: row; align-items: center; gap: 10px; }
.field.check input { width: 24px; height: 24px; min-height: 0; accent-color: var(--edge); }
.hint { color: var(--muted); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--edge); cursor: pointer; }
.swatch.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--edge); }

/* ============ modal sheet ============ */
.backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(22, 19, 27, .5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .25s ease;
}
.backdrop.show { opacity: 1; }
.sheet {
  width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--edge); border-bottom: 0; border-radius: 28px 28px 0 0;
  transform: translateY(40px) scale(.98); transition: transform .32s cubic-bezier(.2, .9, .25, 1.05);
  padding-bottom: var(--safe-b);
}
.sheet.wide { max-width: 760px; }
.backdrop.show .sheet { transform: none; }
@media (min-width: 640px) {
  .backdrop { align-items: center; padding: 20px; }
  .sheet { border-radius: 28px; border-bottom: var(--bw) solid var(--edge); box-shadow: 0 8px 0 var(--drop); }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 16px 0 24px; }
.sheet-head h2 { margin: 0; font-size: 1.7rem; }
.sheet-body { padding: 18px 24px; overflow-y: auto; }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px 20px; border-top: 2px solid var(--line); flex-wrap: wrap; }

/* ============ toasts ============ */
#toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b) + 18px); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { background: var(--edge); color: var(--bg); padding: 12px 20px; border-radius: 999px; font-weight: 800; opacity: 0; transform: translateY(10px); transition: all .25s; max-width: 100%; box-shadow: 0 4px 0 var(--coral); }
.toast.show { opacity: 1; transform: none; }
.toast.has-action { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; pointer-events: auto; }
.toast-btn { flex: none; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--butter); color: var(--on-color); font-weight: 800; cursor: pointer; }
.toast-btn:hover { filter: brightness(1.05); }

/* ============ home ============ */
.today-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 8px 0 26px; }
.today-head h1 { margin: 14px 0 0; max-width: 16ch; }
.today-head .btn-row { padding-top: 6px; }
.upnext {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px;
  background: #16131B; color: #fff; border-radius: 26px; padding: 22px 26px; margin-bottom: 32px; text-decoration: none;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--page) 45%, #16131B);
}
:root[data-theme="dark"] .upnext { border: var(--bw) solid var(--edge); box-shadow: 0 6px 0 var(--page); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .upnext { border: var(--bw) solid var(--edge); box-shadow: 0 6px 0 var(--page); } }
.upnext-label { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--page); }
.upnext-title { font-family: var(--display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-top: 4px; }
.upnext-sub { color: #D9D4E0; margin-top: 4px; font-weight: 600; }
.class-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.class-strip li { padding: 8px 14px; border: 2.5px solid #fff; border-radius: 16px; line-height: 1.25; }
.class-strip li small { display: block; font-size: .75rem; font-weight: 700; }
.class-strip li b { font-weight: 700; }
.class-strip li.past { border-color: #4A4452; color: #A59EB0; }
.class-strip li.past b { text-decoration: line-through; }
.class-strip li.next { background: var(--page); border-color: var(--page); color: var(--on-color); }
.class-strip li.next b { font-weight: 800; }
@media (max-width: 599px) { .class-strip { display: none; } .upnext { padding: 18px 20px; margin-bottom: 26px; } }
.home-cols { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; margin-bottom: 36px; }
.home-cols > :first-child { flex: 7 1 380px; min-width: 0; }
.home-cols > :last-child { flex: 5 1 300px; min-width: 0; }
.quick-add { display: flex; align-items: center; gap: 10px; min-height: 58px; margin-top: 16px; padding: 0 8px 0 18px; border: var(--bw) dashed var(--edge); border-radius: 20px; }
.quick-add input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-weight: 600; min-height: 48px; }
.quick-add input::placeholder { color: var(--muted); }
.your-stuff { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 32px; }
.your-stuff a {
  min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 2.5px solid var(--edge); border-radius: 18px; background: var(--surface); color: var(--text); text-decoration: none;
  font-size: .8rem; font-weight: 800; box-shadow: 0 3px 0 var(--drop);
}
@media (min-width: 1024px) { .your-stuff { display: none; } }
.list { display: flex; flex-direction: column; gap: 14px; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-height: 60px;
  background: var(--surface); border: var(--bw) solid var(--edge); border-radius: 20px; text-decoration: none; color: var(--text);
  box-shadow: 0 4px 0 var(--drop);
}
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub { color: var(--muted); font-size: .85rem; font-weight: 600; }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 2px solid var(--edge); }
.row-ico, .file-ico, .n-ico { display: grid; place-items: center; flex: none; }
.notif-ask { margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; background: var(--butter); color: var(--on-color); }
.notif-ask .muted { color: var(--on-color); }
.verdict { font-weight: 800; display: flex; gap: 6px; align-items: center; }
.board-card { padding: 18px 20px; border: var(--bw) solid var(--edge); border-radius: 22px; box-shadow: 0 5px 0 var(--drop); color: var(--on-color); text-decoration: none; display: block; }
.board-card .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .8rem; font-weight: 700; }
.board-card .meta .when { margin-left: auto; }
.board-card .tag { background: #fff; color: var(--on-color); border-color: var(--on-color); }
.board-card h3 { margin: 10px 0 4px; font-size: 1.3rem; }
.board-card p { margin: 0; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============ notebooks shelf ============ */
.shelf { display: grid; gap: 24px 20px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 600px) { .shelf { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.nb {
  position: relative; aspect-ratio: 3 / 3.8; border-radius: 22px; padding: 16px;
  color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  border: var(--bw) solid var(--edge); box-shadow: 0 6px 0 var(--drop);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) { .nb:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--drop); } }
.nb:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--drop); }
.shelf.enter .nb, .enter .shelf .nb { animation: nbIn .5s cubic-bezier(.2, .8, .3, 1.15) backwards; animation-delay: calc(var(--i, 0) * 40ms + 60ms); }
@keyframes nbIn { from { opacity: 0; transform: translateY(14px) rotate(1.5deg); } }
.nb-label { background: #fff; color: var(--on-color); border: 2.5px solid #16131B; border-radius: 14px; padding: 10px 12px; }
.nb-title { font-family: var(--display); font-size: 1.35rem; line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; word-break: break-word; }
.nb-sub { font-size: .7rem; font-weight: 800; color: #3F3946; margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
.nb-meta { font-size: .78rem; font-weight: 800; display: flex; justify-content: space-between; gap: 4px; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.nb-band { display: none; }
.nb-label, .nb-meta { position: relative; z-index: 1; }
.nb.opening { transform: translateY(-8px) scale(1.04); box-shadow: 0 14px 0 var(--drop); transition: transform .25s, box-shadow .25s; }
.nb-new { background: transparent; border-style: dashed; color: var(--text); align-items: center; justify-content: center; gap: 8px; box-shadow: none; font-family: var(--display); font-size: 1.2rem; font-weight: 800; cursor: pointer; }
@media (hover: hover) { .nb-new:hover { box-shadow: none; background: var(--brand-soft); } }
/* the ⋯ on a notebook: shows on hover / keyboard focus, or when you hold the notebook on a touch screen */
.nb-wrap { position: relative; display: grid; }
.nb-wrap > .nb { width: 100%; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.nb-more {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 999px; border: 2.5px solid #16131B; background: #fff; color: #16131B; cursor: pointer; box-shadow: 0 3px 0 #16131B;
  opacity: 0; pointer-events: none; transform: scale(.8); transition: opacity .15s, transform .15s;
}
.nb-more .ico { pointer-events: none; }
.nb-wrap:focus-within .nb-more, .nb-wrap.menu-open .nb-more { opacity: 1; pointer-events: auto; transform: none; }
@media (hover: hover) {
  .nb-wrap:hover .nb-more { opacity: 1; pointer-events: auto; transform: translateY(-3px); }
  .nb-wrap:hover .nb-more:hover { background: var(--butter); }
}
.nb-wrap.menu-open .nb { transform: translateY(-3px); box-shadow: 0 9px 0 var(--drop); }
.nb-wrap:has(.nb.opening) .nb-more { opacity: 0; }

/* small pop-up menus (⋯ buttons) */
.pop-menu {
  position: fixed; z-index: 200; min-width: 170px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); color: var(--text); border: var(--bw) solid var(--edge); border-radius: 18px; box-shadow: 0 5px 0 var(--drop);
  animation: popIn .14s ease-out;
}
.pop-menu button {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px;
  background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.pop-menu button:hover, .pop-menu button:focus-visible { background: var(--brand-soft); outline: none; }
.pop-menu button.danger { color: var(--danger); }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } }

.group-title { margin: 30px 0 16px; font-family: var(--display); font-size: 1.6rem; letter-spacing: -0.03em; font-weight: 800; }

/* ============ notebook editor ============ */
/* Long-pressing the notebook must never select the page or pop up Copy / Look Up (iOS);
   only the text you're typing in is selectable. */
.editor { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.editor .ptext[contenteditable="true"], .editor .ptext[contenteditable="true"] * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.editor { display: flex; flex-direction: column; height: calc(100dvh - var(--top-h) - var(--safe-t) - var(--nav-h) - var(--safe-b)); }
.toolbar {
  display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; flex: none; user-select: none; -webkit-user-select: none;
}
.toolbar::-webkit-scrollbar { display: none; }
.toolbar .sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px; flex: none; }
.toolbar .pageno { font-weight: 800; font-size: .85rem; color: var(--muted); padding: 0 4px; white-space: nowrap; }
.toolbar .pageno .side-tag { display: block; font-size: .62rem; line-height: 1; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; }
.toolbar.tools { border-bottom: 0; }
.subbar { background: var(--surface-2); }
.subbar .swatch { width: 26px; height: 26px; flex: none; }
.size-dot { border-radius: 50%; background: currentColor; display: block; }
.stage {
  flex: 1; overflow: hidden auto; padding: 22px 0 40px; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  /* a desk under the notebook, lit by a warm lamp; the material comes from data-desk */
  --desk: #b98c5f;
  --desk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --desk-planks: repeating-linear-gradient(180deg, transparent 0 157px, rgba(60, 30, 10, .16) 157px 159px, rgba(255, 255, 255, .07) 159px 160px);
  --desk-streaks: repeating-linear-gradient(92deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px, rgba(0, 0, 0, .04) 9px 11px, transparent 11px 23px);
  --lamp: rgba(255, 220, 160, .3);
  --vignette: rgba(20, 8, 0, .28);
  background-color: var(--desk);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 0%, var(--lamp), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 35%, transparent 55%, var(--vignette)),
    var(--desk-planks),
    var(--desk-streaks),
    var(--desk-grain);
  box-shadow: inset 0 10px 30px rgba(0, 0, 0, .25);
  transition: background-color .4s ease;
}
.stage[data-desk="walnut"] {
  --desk: #5b3b27;
  --desk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .11' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .06 0 0 0 0 .02 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --desk-planks: repeating-linear-gradient(180deg, transparent 0 157px, rgba(0, 0, 0, .3) 157px 159px, rgba(255, 220, 180, .05) 159px 160px);
  --desk-streaks: repeating-linear-gradient(91deg, rgba(255, 210, 160, .035) 0 1px, transparent 1px 7px, rgba(0, 0, 0, .06) 7px 9px, transparent 9px 19px);
  --lamp: rgba(255, 190, 110, .26);
  --vignette: rgba(0, 0, 0, .45);
}
.stage[data-desk="cherry"] {
  --desk: #9c5537;
  --desk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .08' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .08 0 0 0 0 .03 0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --desk-planks: repeating-linear-gradient(180deg, transparent 0 157px, rgba(50, 10, 0, .22) 157px 159px, rgba(255, 220, 190, .07) 159px 160px);
  --lamp: rgba(255, 210, 150, .28);
  --vignette: rgba(30, 5, 0, .35);
}
.stage[data-desk="felt"] {
  --desk: #315a4a;
  --desk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --desk-planks: none;
  --desk-streaks: none;
  --lamp: rgba(255, 225, 160, .22);
  --vignette: rgba(0, 15, 8, .4);
}
/* "Match theme": oak by day, walnut by night */
:root[data-theme="dark"] .stage[data-desk="auto"] {
  --desk: #5b3b27;
  --desk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .11' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .06 0 0 0 0 .02 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --desk-planks: repeating-linear-gradient(180deg, transparent 0 157px, rgba(0, 0, 0, .3) 157px 159px, rgba(255, 220, 180, .05) 159px 160px);
  --lamp: rgba(255, 190, 110, .26);
  --vignette: rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stage[data-desk="auto"] {
    --desk: #5b3b27;
    --desk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .11' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .06 0 0 0 0 .02 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
    --desk-planks: repeating-linear-gradient(180deg, transparent 0 157px, rgba(0, 0, 0, .3) 157px 159px, rgba(255, 220, 180, .05) 159px 160px);
    --lamp: rgba(255, 190, 110, .26);
    --vignette: rgba(0, 0, 0, .45);
  }
}
/* little material swatches for the desk pickers */
.desk-chip { display: inline-flex; align-items: center; gap: 6px; }
.stage.zoomed { overflow: auto; touch-action: pan-x pan-y; } /* sideways swipes turn pages until you zoom in */
.sizer.pinching { will-change: transform; }
.zoom-label { border: 0; background: none; cursor: pointer; min-width: 48px; padding: 0 2px; font: 800 .8rem var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.zoom-label:hover { color: var(--brand); }
.font-chip { flex: none; padding: 3px 10px; font-size: 1rem; font-weight: 400; line-height: 1.3; white-space: nowrap; }
.desk-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); background: linear-gradient(135deg, #b98c5f 50%, #5b3b27 50%); }
.desk-dot[data-desk="oak"] { background: #b98c5f; }
.desk-dot[data-desk="walnut"] { background: #5b3b27; }
.desk-dot[data-desk="cherry"] { background: #9c5537; }
.desk-dot[data-desk="felt"] { background: #315a4a; }
/* the desk holds the scrolling stage plus the page arrows, which don't scroll */
.desk { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-arrow {
  position: absolute; top: 50%; z-index: 8; width: 40px; height: 56px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #4a3626;
  background: color-mix(in srgb, #fffdf6 82%, transparent); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(30, 15, 0, .25), inset 0 0 0 1px rgba(120, 90, 50, .15);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: .78; transform: translateY(-50%);
  transition: opacity .2s, transform .2s cubic-bezier(.2, .9, .3, 1.3), background-color .2s;
}
/* sit just outside the book when there's room, otherwise tuck in over its edges */
.side-arrow.prev { left: max(4px, calc(50% - var(--book-w, 560px) / 2 - 56px)); }
.side-arrow.next { right: max(4px, calc(50% - var(--book-w, 560px) / 2 - 56px)); }
.side-arrow:hover, .side-arrow:focus-visible { opacity: 1; background: #fffdf6; }
.side-arrow.prev:hover { transform: translate(-2px, -50%); }
.side-arrow.next:hover { transform: translate(2px, -50%); }
.side-arrow:active { transform: translateY(-50%) scale(.9); }
.side-arrow.add { color: var(--brand); }
.side-arrow.off { opacity: 0; pointer-events: none; transform: translate(6px, -50%); }
@media (pointer: coarse) { .side-arrow { width: 36px; height: 52px; } }
.sizer { position: relative; margin: 0 auto; perspective: 2400px; transform-style: preserve-3d; }
.paper {
  position: absolute; top: 0; left: 0; width: var(--paper-w, 560px); transform-origin: 0 0;
  background-color: var(--paper); border-radius: 2px 6px 6px 2px;
  /* the stack of pages underneath peeks out on the right */
  box-shadow: 1px 1px 0 #ece6d6, 2px 2px 0 #dcd4c0, 3px 3px 0 #efe9da, 4px 4px 0 #d6cdb8, 5px 5px 0 #ebe4d3, 6px 6px 0 #cfc5ae, 8px 10px 22px rgba(30, 15, 0, .35);
  color: var(--ink); overflow: hidden;
}
.paper::after { /* a faint tooth to the paper */
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.paper.measure::after { display: none; }
.paper.snap, .leaf .paper { box-shadow: none; }
.paper.measure { position: fixed; left: -10000px; top: 0; visibility: hidden; pointer-events: none; transform: none; box-shadow: none; }
.paper.measure .ptext { overflow: visible; }
.paper.lined {
  background-image:
    linear-gradient(90deg, transparent 59px, var(--paper-margin) 59px, var(--paper-margin) 61px, transparent 61px),
    repeating-linear-gradient(transparent 0 31px, var(--paper-line) 31px 32px);
  background-position: 0 0, 0 32px;
}
.paper.grid { background-image: linear-gradient(var(--paper-line) 1px, transparent 1px), linear-gradient(90deg, var(--paper-line) 1px, transparent 1px); background-size: 32px 32px; }
.paper.dots { background-image: radial-gradient(#b7c6d8 1.4px, transparent 1.6px); background-size: 32px 32px; background-position: 16px 16px; }
.paper.blank { background-image: none; }
.paper .pbg { position: absolute; inset: 0 0 auto 0; width: 100%; pointer-events: none; }
.ptext {
  position: absolute; inset: 0; padding: 32px 28px 32px 72px; outline: none; overflow: hidden;
  font-size: 19px; line-height: 32px; font-family: var(--nb-font, var(--font)); color: var(--ink);
  white-space: pre-wrap; word-wrap: break-word; caret-color: var(--brand);
}
.paper.blank .ptext, .paper.grid .ptext, .paper.dots .ptext, .paper.pdf .ptext { padding-left: 32px; }
.ptext h1, .ptext h2 { font-family: var(--hand); font-size: 40px; line-height: 64px; margin: 0; color: #6d3a9c; } /* paper stays light in dark mode */
.ptext h2 { font-size: 30px; line-height: 32px; }
.ptext p, .ptext div { margin: 0; }
.ptext ul, .ptext ol { margin: 0; padding-left: 28px; }
.ptext img { max-width: 100%; }
.pcheck {
  display: inline-block; width: 20px; height: 20px; vertical-align: -3px; margin-right: 2px; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 5px; background: transparent; user-select: none;
}
.pcheck[data-checked="1"] {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.pnum { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: var(--hand); font-size: 18px; color: #9a92a6; pointer-events: none; }
.paper.pdf .pnum { display: none; }
.paper:not(.pdf):not(.has-content) .ptext:empty::before { content: attr(data-placeholder); color: #a9a2b5; }
.pimgs { position: absolute; inset: 0; pointer-events: none; }
.pimg { position: absolute; touch-action: none; user-select: none; -webkit-user-select: none; }
.pimg img { width: 100%; height: 100%; display: block; pointer-events: none; border-radius: 2px; }
.mode-view .pimg { pointer-events: auto; cursor: grab; }
.pimg.sel { outline: 3px solid var(--brand); outline-offset: 2px; }
.pimg .handle { display: none; position: absolute; right: -14px; bottom: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; cursor: nwse-resize; }
.pimg .del { display: none; position: absolute; right: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--danger); color: #fff; border: 3px solid #fff; font-size: 12px; line-height: 1; cursor: pointer; }
.pimg.sel .handle, .pimg.sel .del { display: block; }
.ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ink.live { touch-action: none; }
.drawing .ink.live { pointer-events: auto; cursor: crosshair; }
.mode-eraser .ink.live { cursor: cell; }
.rings {
  position: absolute; left: -14px; top: 10px; bottom: 10px; width: 30px; z-index: 6; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='28'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fafafa'/%3E%3Cstop offset='.45' stop-color='%23a9a9b2'/%3E%3Cstop offset='1' stop-color='%23e4e4ea'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='23' cy='14' r='3.4' fill='%23302a38' opacity='.75'/%3E%3Crect x='1' y='11' width='23.5' height='5.5' rx='2.75' fill='url(%23m)' stroke='%23777' stroke-width='.5'/%3E%3C/svg%3E") repeat-y 0 0 / 30px 28px;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .3));
}
.corner {
  position: absolute; bottom: 0; z-index: 5; width: 44px; height: 44px; border: 0; padding: 0; cursor: pointer;
  background: transparent; transition: width .15s, height .15s;
}
.corner.next { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: linear-gradient(315deg, var(--paper) 0 49%, #e1d9c4 50%, #f6f1e4 75%, #e9e2d0 100%); box-shadow: -3px -3px 6px rgba(0, 0, 0, .12); }
.corner.prev { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); background: linear-gradient(45deg, var(--paper) 0 49%, #e1d9c4 50%, #f6f1e4 75%, #e9e2d0 100%); }
.corner:hover, .corner:focus-visible { width: 64px; height: 64px; }
.corner.add::after { content: '+'; position: absolute; right: 7px; bottom: 3px; font: 800 18px var(--font); color: var(--brand); }

/* open book: the back of the last turned sheet lies on the left, and you can write on it too */
.left-page {
  position: absolute; top: 0; right: 100%; z-index: 1; overflow: hidden; cursor: pointer;
  background: var(--paper); border-radius: 6px 2px 2px 6px;
  box-shadow: -1px 1px 0 #ece6d6, -2px 2px 0 #dcd4c0, -3px 3px 0 #efe9da, -4px 4px 0 #d6cdb8, -5px 5px 0 #ebe4d3, -6px 6px 0 #cfc5ae, -8px 10px 22px rgba(30, 15, 0, .35);
}
.left-page.inside { border-radius: 10px 3px 3px 10px; pointer-events: none; cursor: default; }
.left-page.active { cursor: auto; }
.left-page .paper, .page-back .paper, .right-static .paper.back { box-shadow: none; }
.page-back { position: absolute; inset: 0; }
.right-static { position: absolute; top: 0; left: 0; z-index: 1; cursor: pointer; }
.right-static[hidden] { display: none; }
.imprint { /* what's written on the front shows through, mirrored and faint */
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  transform: scaleX(-1); opacity: .085; filter: blur(.6px) grayscale(.4); mix-blend-mode: multiply;
}
/* the back of a sheet: its margin rule shows through on the right, so writing starts on the left */
.paper.back.lined {
  background-image:
    linear-gradient(90deg, transparent 499px, color-mix(in srgb, var(--paper-margin) 45%, transparent) 499px 501px, transparent 501px),
    repeating-linear-gradient(transparent 0 31px, var(--paper-line) 31px 32px);
  background-position: 0 0, 0 32px;
}
.paper.back.lined .ptext { padding: 32px 72px 32px 28px; }
.toolbar .icon-btn[hidden] { display: none; }
/* Phones: pages turn with a swipe or the arrows beside the book and zoom with a pinch, so the
   toolbar drops those buttons and Undo, Redo and Options stay on screen. */
@media (max-width: 560px) {
  .toolbar .wide-only, .toolbar .zoom-label.at-fit, .toolbar .zoom-label.at-fit + .wide-only + .sep { display: none; }
  .toolbar .icon-btn { width: 38px; }
}
@media (max-width: 430px) { .editor .toolbar.tools { gap: 1px; padding-inline: 4px; } }
@media (max-width: 370px) {
  .editor .toolbar { gap: 1px; padding-inline: 4px; }
  .editor .toolbar .icon-btn { width: 33px; }
}
.paper.imprint-page { background: none !important; box-shadow: none !important; }
.paper.imprint-page::after, .imprint-page .ptext:empty::before { content: none; display: none; }
.leaf-shade.mirror { transform: scaleX(-1); opacity: .25; }
.sizer.spread .corner.prev { left: calc(-1 * var(--page-w)); }

/* shapes on the page */
.pshapes { position: absolute; inset: 0; pointer-events: none; }
.pshape { position: absolute; transform-origin: 50% 50%; touch-action: none; user-select: none; -webkit-user-select: none; }
.pshape::before { content: ''; position: absolute; inset: -10px; } /* easier to grab, thin lines too */
.mode-view .pshape, .mode-shape .pshape { pointer-events: auto; cursor: grab; }
.pshape.sel { outline: 2px dashed var(--brand); outline-offset: 8px; border-radius: 4px; }
.pshape .handle, .pshape .del, .pshape .rot {
  --hs: calc(26px / var(--scale, 1));
  display: none; position: absolute; z-index: 1; width: var(--hs); height: var(--hs); padding: 0; border-radius: 50%; border: calc(3px / var(--scale, 1)) solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.pshape .handle { right: calc(var(--hs) / -1.6); bottom: calc(var(--hs) / -1.6); background: var(--brand); cursor: nwse-resize; }
.pshape .del { right: calc(var(--hs) / -1.6); top: calc(var(--hs) / -1.6); background: var(--danger); color: #fff; cursor: pointer; place-items: center; }
.pshape .rot { left: 50%; top: calc(var(--hs) * -1.9); margin-left: calc(var(--hs) / -2); background: var(--brand-2); cursor: grab; }
.pshape .rot::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(var(--hs) * .55); margin-left: -1px; background: var(--brand-2); }
.pshape.sel .handle, .pshape.sel .rot { display: block; }
.pshape.sel .del { display: grid; }
.shape-ghost { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; opacity: .85; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25)); }
.shape-btn { touch-action: pan-x; }
.fill-dot { display: block; width: 18px; height: 18px; border-radius: 5px; border: 2.5px solid currentColor; }
.fill-dot.tint { background: color-mix(in srgb, currentColor 25%, transparent); }
.fill-dot.solid { background: currentColor; }
.chip.assist { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: .78rem; }

/* a sheet turning around the spine */
.leaf { position: absolute; left: 0; top: 0; z-index: 4; transform-origin: 0 50%; transform-style: preserve-3d; pointer-events: none; }
.leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 2px 6px 6px 2px; }
.leaf-face.back { transform: rotateY(180deg); }
.leaf-face .paper { box-shadow: none; }
.leaf-back { transform-origin: 0 0; filter: brightness(.96); }
.leaf-back.lined { background-image: repeating-linear-gradient(transparent 0 31px, var(--paper-line) 31px 32px); background-position: 0 32px; }
.leaf-shade { position: absolute; inset: 0; pointer-events: none; opacity: .6; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 30%, rgba(255, 255, 255, .12) 70%, rgba(0, 0, 0, .06)); }
.leaf-static { position: absolute; left: 0; top: 0; z-index: 3; overflow: hidden; border-radius: 2px 6px 6px 2px; }
.flip-shadow { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 60%); opacity: 0; }

/* the notebook cover */
.leaf.cover { z-index: 7; }
.cover-face, .cover-inside { position: absolute; inset: 0; border-radius: 3px 10px 10px 3px; }
.cover-face {
  background-color: var(--cover);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, .25) 18px, rgba(255, 255, 255, .14) 18px, transparent 26px),
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .18), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset -6px 0 12px rgba(0, 0, 0, .15);
  display: flex; align-items: center; justify-content: center;
}
.cover-label {
  width: 62%; padding: 18px 16px; background: rgba(255, 253, 246, .95); border-radius: 8px; text-align: center; color: #2b2233;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transform: translateY(-14%);
}
.cover-title { font-family: var(--hand); font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 700; line-height: 1.05; word-break: break-word; }
.cover-sub { margin-top: 8px; font-size: .75rem; font-weight: 800; color: #6f6680; text-transform: uppercase; letter-spacing: .05em; }
.cover-band { position: absolute; top: 0; bottom: 0; right: 12%; width: 14px; background: linear-gradient(90deg, #1d1922, #3a3442 50%, #1d1922); box-shadow: 0 0 4px rgba(0, 0, 0, .4); }
.cover-inside {
  background-color: color-mix(in srgb, var(--cover) 18%, #f7f2e6);
  display: flex; align-items: center; justify-content: center;
}
.inside-card { width: 70%; padding: 18px; border: 2px solid color-mix(in srgb, var(--cover) 60%, #000); border-radius: 10px; text-align: center; color: #3a3245; background: rgba(255, 255, 255, .6); }
.inside-card small { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #7a7086; }
.inside-name { font-family: var(--hand); font-size: 2rem; font-weight: 700; margin: 4px 0 8px; border-bottom: 2px dotted #a79fb2; }
.pdf-viewer { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 8px 80px; }
.pdf-viewer canvas { max-width: 100%; height: auto !important; box-shadow: var(--shadow); background: #fff; }

/* ============ planner: the week as flat notes on the page ============ */
.week-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 8px 0 22px; }
.week-head .icon-btn { text-decoration: none; color: var(--text); width: 52px; height: 52px; border: var(--bw) solid var(--edge); border-radius: 999px; background: var(--surface); box-shadow: 0 4px 0 var(--drop); }
.week-head .icon-btn:active { transform: translateY(4px); box-shadow: none; }
.week-title { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; order: -1; }
@media (min-width: 600px) { .week-title { flex-basis: 260px; } }
.week-title h1 { margin: 0; }
.wall-hint { font-size: .85rem; font-weight: 600; margin: 0 0 14px; }

/* A brick wall with the week stuck on it; scrolls sideways when the week doesn't fit. */
.wall-scroll {
  padding: 18px 16px 26px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none;
  border: var(--bw) solid var(--edge); border-radius: 26px; box-shadow: 0 6px 0 var(--drop);
  background-color: #C2553B; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%23D9C7AF'/%3E%3Crect x='2' y='2' width='56' height='26' rx='3' fill='%23C2553B'/%3E%3Crect x='62' y='2' width='56' height='26' rx='3' fill='%23B04A33'/%3E%3Crect x='-28' y='32' width='56' height='26' rx='3' fill='%23BA513A'/%3E%3Crect x='32' y='32' width='56' height='26' rx='3' fill='%23C95F43'/%3E%3Crect x='92' y='32' width='56' height='26' rx='3' fill='%23BB523B'/%3E%3Crect x='8' y='6' width='20' height='3' rx='1.5' fill='%23fff' opacity='.12'/%3E%3Crect x='70' y='36' width='18' height='3' rx='1.5' fill='%23fff' opacity='.1'/%3E%3C/svg%3E"); background-size: 120px 60px;
}
.wall-scroll::-webkit-scrollbar { display: none; } /* the rail below does the scrolling UI */
/* the trash can on the left of the wall: drag a note in to crumple it up; tap it to look inside */
.wall-wrap { display: flex; align-items: stretch; gap: 14px; }
.wall-wrap > .wall-scroll { flex: 1; min-width: 0; }
.trash-dock {
  flex: none; width: 118px; padding: 10px 4px 10px; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  border: var(--bw) dashed transparent; border-radius: 26px; background: none; color: var(--text); cursor: pointer;
  font: inherit; user-select: none; -webkit-user-select: none; transition: border-color .15s, background-color .15s;
}
.trash-dock:hover .can-svg { transform: translateY(-2px); }
.trash-dock.ready { border-color: var(--edge); background: color-mix(in srgb, var(--surface) 45%, transparent); }
.trash-dock.over { background: color-mix(in srgb, var(--coral) 30%, transparent); }
.trash-dock.eating { z-index: 400; } /* in front of the paper ball, so it drops behind the can */
.trash-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1.15; color: var(--muted); }
.trash-dock.ready .trash-label { color: var(--text); }
.can-wrap { position: relative; display: block; width: 96px; }
.can-svg { display: block; width: 100%; height: auto; overflow: visible; transition: transform .2s; }
.can-body { fill: #DADFE6; stroke: #16131B; stroke-width: 3; stroke-linejoin: round; }
.can-ridge { stroke: #9AA3AF; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.can-rim { fill: #C3CAD3; stroke: #16131B; stroke-width: 3; }
.can-lid { transform-box: fill-box; transform-origin: 2% 100%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.can-lid-top { fill: #EEF1F5; stroke: #16131B; stroke-width: 3; }
.can-handle { fill: none; stroke: #16131B; stroke-width: 3.5; stroke-linecap: round; }
.can-ball { stroke: #16131B; stroke-width: 1.6; stroke-linejoin: round; }
.trash-dock.full .can-lid { transform: rotate(-9deg); }         /* it's got stuff in it, the lid doesn't sit flat */
.trash-dock.ready .can-lid { transform: rotate(-22deg); }        /* a note is being dragged: the lid lifts */
.trash-dock.over .can-lid, .trash-dock.open .can-lid { transform: rotate(-62deg); }
.trash-dock.over .can-svg { animation: canWant .5s ease-in-out infinite alternate; }
@keyframes canWant { from { transform: rotate(-2deg); } to { transform: rotate(2deg) translateY(-2px); } }
.bin-count {
  position: absolute; top: 18%; right: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: var(--coral); color: var(--on-color); border: 2.5px solid #16131B; font-size: .72rem; font-weight: 800; line-height: 19px; text-align: center;
}
.sticky.ghost.binning { transform: rotate(-12deg) scale(.7); opacity: .85; transition: transform .15s, opacity .15s; }
.sticky.ghost.crumpling .sticky-paper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3Cpath d='M68 86 L110 162 M136 62 L128 50 M60 72 L68 86'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.55' stroke-width='1.4' transform='translate(1.6 1.4)'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 62 L68 86 L60 72 L42 0 L0 0Z M128 50 L200 78 L200 0 L122 0 L136 62Z M46 132 L110 162 L72 200 L0 200 L0 152Z' fill='%23000' fill-opacity='.05'/%3E%3C/svg%3E") center / 100% 100%, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3Cpath d='M68 86 L110 162 M136 62 L128 50 M60 72 L68 86'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.55' stroke-width='1.4' transform='translate(1.6 1.4)'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 62 L68 86 L60 72 L42 0 L0 0Z M128 50 L200 78 L200 0 L122 0 L136 62Z M46 132 L110 162 L72 200 L0 200 L0 152Z' fill='%23000' fill-opacity='.05'/%3E%3C/svg%3E") center / 55% 65% no-repeat; animation: creaseIn .25s ease-out both;
}
@keyframes creaseIn { from { opacity: 0; } to { opacity: 1; } }
.sticky.binned-away { visibility: hidden; }
/* Phones: the wall goes edge to edge, so the can stands in the bottom-left corner (the + button is bottom right). */
@media (max-width: 599px) {
  .wall-wrap { display: block; }
  .trash-dock {
    position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: calc(var(--nav-h) + var(--safe-b) + 16px); z-index: 25;
    width: 70px; padding: 6px; border-radius: 22px; transform-origin: 0 100%; transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), background-color .15s, border-color .15s;
  }
  .trash-dock .trash-label { display: none; }
  .trash-dock .can-wrap { width: 56px; }
  .trash-dock.ready { transform: scale(1.4); background: var(--surface); }
  .trash-dock.eating { z-index: 400; }
  :root[data-route="planner"] #toasts { bottom: calc(var(--nav-h) + var(--safe-b) + 104px); }
}
/* a crumpled paper ball (on its way into the can) */
.paper-ball {
  position: fixed; z-index: 350; pointer-events: none; will-change: transform;
  filter: drop-shadow(1.5px 0 0 #16131B) drop-shadow(-1.5px 0 0 #16131B) drop-shadow(0 1.5px 0 #16131B) drop-shadow(0 -1.5px 0 #16131B);
}
.paper-ball-in {
  width: 100%; height: 100%;
  clip-path: polygon(30% 8%, 52% 15%, 73% 5%, 91% 27%, 83% 48%, 95% 70%, 75% 91%, 54% 83%, 31% 95%, 11% 75%, 18% 52%, 5% 30%);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .55), transparent 38%),
    radial-gradient(circle at 55% 58%, transparent 42%, rgba(0, 0, 0, .3) 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3Cpath d='M68 86 L110 162 M136 62 L128 50 M60 72 L68 86'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.55' stroke-width='1.4' transform='translate(1.6 1.4)'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 62 L68 86 L60 72 L42 0 L0 0Z M128 50 L200 78 L200 0 L122 0 L136 62Z M46 132 L110 162 L72 200 L0 200 L0 152Z' fill='%23000' fill-opacity='.05'/%3E%3C/svg%3E") center / 100% 100%,
    var(--note);
}
/* a note that's been crumpled and put back: creases and slightly uneven edges */
.sticky.crumpled .sticky-paper { border-radius: 7px 14px 24px 5px / 12px 5px 18px 9px; transform: skew(-.6deg, .5deg); }
.sticky.crumpled .sticky-paper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply; opacity: .75;
  background: radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, .1), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3Cpath d='M68 86 L110 162 M136 62 L128 50 M60 72 L68 86'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.55' stroke-width='1.4' transform='translate(1.6 1.4)'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 62 L68 86 L60 72 L42 0 L0 0Z M128 50 L200 78 L200 0 L122 0 L136 62Z M46 132 L110 162 L72 200 L0 200 L0 152Z' fill='%23000' fill-opacity='.05'/%3E%3C/svg%3E") center / 100% 100%;
}
.sticky.crumpled-more .sticky-paper::after { opacity: 1; background: radial-gradient(ellipse at 30% 20%, rgba(0, 0, 0, .12), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, .14), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3Cpath d='M68 86 L110 162 M136 62 L128 50 M60 72 L68 86'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.55' stroke-width='1.4' transform='translate(1.6 1.4)'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 62 L68 86 L60 72 L42 0 L0 0Z M128 50 L200 78 L200 0 L122 0 L136 62Z M46 132 L110 162 L72 200 L0 200 L0 152Z' fill='%23000' fill-opacity='.05'/%3E%3C/svg%3E") center / 100% 100%, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3Cpath d='M68 86 L110 162 M136 62 L128 50 M60 72 L68 86'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.55' stroke-width='1.4' transform='translate(1.6 1.4)'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 62 L68 86 L60 72 L42 0 L0 0Z M128 50 L200 78 L200 0 L122 0 L136 62Z M46 132 L110 162 L72 200 L0 200 L0 152Z' fill='%23000' fill-opacity='.05'/%3E%3C/svg%3E") center / 70% 80% no-repeat; }
/* taken out of the can: it unfolds back onto the wall */
.sticky.uncrumple { animation: uncrumple .75s cubic-bezier(.2, .8, .3, 1.15) backwards; }
@keyframes uncrumple {
  0% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.3) rotate(-40deg); clip-path: polygon(30% 8%, 52% 15%, 73% 5%, 91% 27%, 83% 48%, 95% 70%, 75% 91%, 54% 83%, 31% 95%, 11% 75%, 18% 52%, 5% 30%); filter: brightness(.85); }
  55% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.06) rotate(3deg); clip-path: polygon(0% -20%, 33% -20%, 66% -20%, 120% -20%, 120% 33%, 120% 66%, 120% 120%, 66% 120%, 33% 120%, -20% 120%, -20% 66%, -20% 33%); filter: brightness(1); }
  100% { clip-path: polygon(0% -20%, 33% -20%, 66% -20%, 120% -20%, 120% 33%, 120% 66%, 120% 120%, 66% 120%, 33% 120%, -20% 120%, -20% 66%, -20% 33%); }
}
/* inside the can */
.bin-hint { margin-top: -6px; }
.bin-grid { display: grid; gap: 22px 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 10px 2px 6px; }
.bin-note { display: flex; flex-direction: column; gap: 8px; transform: rotate(var(--r, 0deg)); }
.bin-paper {
  position: relative; aspect-ratio: 1 / .9; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  background: radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, .35), transparent 45%), radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, .14), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3Cpath d='M68 86 L110 162 M136 62 L128 50 M60 72 L68 86'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.55' stroke-width='1.4' transform='translate(1.6 1.4)'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 62 L68 86 L60 72 L42 0 L0 0Z M128 50 L200 78 L200 0 L122 0 L136 62Z M46 132 L110 162 L72 200 L0 200 L0 152Z' fill='%23000' fill-opacity='.05'/%3E%3C/svg%3E") center / 100% 100%, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.2' stroke-width='1.6'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3Cpath d='M68 86 L110 162 M136 62 L128 50 M60 72 L68 86'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.55' stroke-width='1.4' transform='translate(1.6 1.4)'%3E%3Cpath d='M0 62 L68 86 L128 50 L200 78'/%3E%3Cpath d='M42 0 L60 72 L46 132 L72 200'/%3E%3Cpath d='M122 0 L136 62 L182 118 L166 200'/%3E%3Cpath d='M0 152 L58 128 L110 162 L200 140'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 62 L68 86 L60 72 L42 0 L0 0Z M128 50 L200 78 L200 0 L122 0 L136 62Z M46 132 L110 162 L72 200 L0 200 L0 152Z' fill='%23000' fill-opacity='.05'/%3E%3C/svg%3E") center / 60% 70% no-repeat, var(--note);
  color: var(--on-color); border: 2.5px solid #16131B; border-radius: 10px 4px 18px 6px / 6px 14px 8px 16px;
  box-shadow: 0 4px 0 rgba(22, 19, 27, .5); transform: skew(-2deg, 1.5deg) scale(.97);
}
.bin-title { font-family: var(--hand); font-size: 1.3rem; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bin-meta, .bin-when { font-size: .72rem; font-weight: 700; opacity: .75; }
.bin-when { margin-top: auto; }
.bin-burn { display: flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 800; color: #9C2A12; }
.bin-actions { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.bin-actions .icon-btn { width: 36px; height: 36px; }
.bin-empty { padding: 20px 0; }
.bin-foot { display: flex; justify-content: flex-start; margin-top: 16px; }
@media (max-width: 599px) { .wall-scroll { margin: 0 -20px; border-radius: 0; border-left: 0; border-right: 0; } }
:root[data-theme="dark"] .wall-scroll { box-shadow: inset 0 0 0 999px rgba(10, 6, 12, .38), 0 6px 0 var(--drop); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wall-scroll { box-shadow: inset 0 0 0 999px rgba(10, 6, 12, .38), 0 6px 0 var(--drop); } }
.wall {
  position: relative;
  --col-min: 72vw;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--col-min), 1fr); gap: 16px;
  min-width: max(100%, calc(var(--cols, 8) * var(--col-min) + (var(--cols, 8) - 1) * 16px)); min-height: 360px;
}
@media (min-width: 600px) { .wall { --col-min: 200px; } }
@media (min-width: 1024px) { .wall { --col-min: 150px; } }

/* the rail: a little map of the week with a lens over what's on screen */
.wall-rail { display: flex; align-items: center; gap: 10px; max-width: 620px; margin: 16px auto 72px; /* clear of the FAB */ user-select: none; -webkit-user-select: none; }
.rail-arrow {
  flex: none; width: 44px; height: 44px; border: var(--bw) solid var(--edge); border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--text); background: var(--surface); box-shadow: 0 3px 0 var(--drop);
  transition: transform .12s, box-shadow .12s, opacity .2s;
}
.rail-arrow:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.rail-arrow:disabled { opacity: .35; cursor: default; }
.rail-track {
  position: relative; flex: 1; height: 52px; border-radius: 999px; overflow: hidden; touch-action: none;
  background: var(--surface); border: var(--bw) solid var(--edge);
}
.rail-map { position: absolute; inset: 0; display: flex; }
.rail-day {
  flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text); font: 800 .72rem/1 var(--font); text-transform: uppercase;
}
.rail-day + .rail-day { box-shadow: inset 2px 0 0 var(--line); }
.rail-day.today .rail-label { padding: 1px 6px; border-radius: 999px; background: var(--edge); color: var(--surface); }
.rail-notes { display: flex; gap: 2px; height: 8px; }
.rail-notes i { width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid var(--edge); }
.rail-lens {
  position: absolute; top: 3px; bottom: 3px; z-index: 1; min-width: 28px; border-radius: 999px; cursor: grab; touch-action: none;
  border: 2.5px solid var(--edge); background: color-mix(in srgb, var(--page) 55%, transparent);
}
.rail-lens.dragging { cursor: grabbing; }
.rail-grip { position: absolute; left: 50%; bottom: 4px; width: 20px; height: 4px; margin-left: -10px; border-radius: 2px; background: var(--edge); }

/* A day column: a pill with the day on top, the notes underneath. */
.zone { position: relative; display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start; border-radius: 22px; transition: background-color .15s; }
.zone.drop { background-color: rgba(255, 255, 255, .22); outline: var(--bw) dashed #fff; outline-offset: 4px; }
.zone.past { opacity: .7; }
.zone-label {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px; padding: 8px 14px;
  border: var(--bw) solid #16131B; border-radius: 18px; background: #fff; color: #16131B; white-space: nowrap; overflow: hidden;
  box-shadow: 0 4px 0 rgba(22, 19, 27, .55);
}
.zl-day { grid-column: 1 / -1; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
.zl-date { font-size: .82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.zone-count { font-size: .75rem; font-weight: 700; color: #3F3946; }
.zone.today .zone-label { background: #16131B; color: var(--mint); border-color: #16131B; }
.zone.today .zone-count { color: inherit; opacity: .8; }
.zone.overdue .zone-label { background: var(--coral); color: var(--on-color); }
.zone.overdue .zone-count { color: inherit; }

.notes { display: flex; flex-direction: column; gap: 24px; padding: 10px 4px 6px; }

.add-plan {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px;
  padding: 8px; border: 2.5px dashed #16131B; border-radius: 14px; background: rgba(255, 253, 246, .82);
  color: #16131B; font-weight: 800; cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.add-plan:hover, .add-plan:focus-visible { background: #fff; transform: rotate(-1deg); }

.sticky.draft { cursor: text; animation: noteStick .35s cubic-bezier(.2, .8, .3, 1.3) backwards; }
.sticky.draft:hover { transform: none; }
.sticky.draft .sticky-paper { padding: 18px 12px 10px; }
.sticky.draft textarea {
  flex: 1; min-height: 0; width: 100%; border: 0; background: transparent; resize: none; outline: none; padding: 0;
  font-family: var(--hand); font-weight: 700; font-size: 1.45rem; line-height: 1.05; color: var(--on-color);
}
.sticky.draft textarea::placeholder { color: rgba(22, 19, 27, .55); }
.draft-actions { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.draft-actions .icon-btn { width: 40px; height: 40px; color: var(--on-color); }
.draft-actions .btn { background: #16131B; color: #fff; border-color: #16131B; box-shadow: none; }

.sticky {
  --note: #F8E27A;
  position: relative; aspect-ratio: 1 / 1; max-height: 190px;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(calc(var(--r, 0deg) * .6));
  transition: transform .15s ease;
  cursor: grab; outline: none;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
@media (hover: hover) { .sticky:hover { transform: translate(var(--dx, 0), calc(var(--dy, 0px) - 4px)) rotate(0deg) scale(1.03); z-index: 2; } }
.sticky:focus-visible { z-index: 2; }
.sticky:focus-visible .sticky-paper { outline: 3px solid var(--coral); outline-offset: 3px; }
.sticky-shadow { display: none; }
.sticky-paper {
  position: relative; height: 100%; min-height: 0; padding: 20px 14px 12px;
  display: flex; flex-direction: column; gap: 4px; overflow: visible;
  background: var(--note); color: var(--on-color);
  border: 2.5px solid #16131B; border-radius: 3px 3px 22px 3px; /* a curled-up corner */
  box-shadow: 0 5px 0 rgba(22, 19, 27, .6);
}
.sticky-paper::before { /* a strip of tape holding it to the wall */
  content: ''; position: absolute; top: -11px; left: 50%; width: 54px; height: 20px; margin-left: -27px;
  background: rgba(255, 253, 240, .72); border: 1.5px solid rgba(22, 19, 27, .35); transform: rotate(-3deg);
}
.sticky-title {
  font-family: var(--hand); font-weight: 700; font-size: 1.45rem; line-height: 1.02; overflow-wrap: anywhere; padding-right: 26px;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 12px), transparent); mask-image: linear-gradient(#000 calc(100% - 12px), transparent);
}
.sticky .t-meta { margin-top: auto; font-size: .76rem; font-weight: 700; color: var(--on-color); gap: 8px; display: flex; flex-wrap: wrap; }
.t-meta span { display: inline-flex; gap: 3px; align-items: center; }
.sticky .t-subj { font-weight: 800; }
.tick {
  position: absolute; top: 9px; right: 9px; z-index: 1; width: 28px; height: 28px; padding: 0;
  border-radius: 50%; border: 2.5px solid #16131B; background: #fff;
  color: transparent; display: grid; place-items: center; cursor: pointer;
}
.tick::before { content: ''; position: absolute; inset: -9px; } /* a bigger target for thumbs */
.tick:hover { color: rgba(22, 19, 27, .35); }
.sticky.done .tick { background: #16131B; color: #fff; }
.sticky.done .sticky-paper { filter: saturate(.55); }
.sticky.done .sticky-title { text-decoration: line-through; text-decoration-thickness: 2.5px; opacity: .6; }
.sticky-flag {
  align-self: flex-start; font-size: .68rem; font-weight: 800; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-color); background: var(--coral); border: 2px solid #16131B; padding: 0 7px; border-radius: 999px;
}
.sticky-flag.med { background: #fff; }
.sticky.lifted { opacity: .2; }
.sticky.ghost { position: fixed; z-index: 300; margin: 0; pointer-events: none; transition: none; transform: rotate(4deg) scale(1.05); }
.sticky.ghost .sticky-paper { box-shadow: 0 14px 0 rgba(22, 19, 27, .5); }
.sticky.enter { animation: noteIn .45s cubic-bezier(.2, .8, .3, 1.15) backwards; animation-delay: var(--delay, 0s); }
.sticky.stick { animation: noteStick .45s cubic-bezier(.2, .8, .3, 1.3) backwards; }
.sticky.wiggle { animation: wiggle .4s ease; }
@keyframes noteIn { from { opacity: 0; transform: translateY(-14px) rotate(-6deg) scale(1.06); } }
@keyframes noteStick { 0% { opacity: 0; transform: rotate(8deg) scale(1.2); } 60% { opacity: 1; transform: scale(.97); } }
@keyframes wiggle { 30% { transform: rotate(4deg) scale(1.04); } 65% { transform: rotate(-3deg); } }

/* task rows on the home screen */
.task {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px 10px 18px; margin-bottom: 14px;
  border: var(--bw) solid var(--edge); border-radius: 20px; background: var(--surface); box-shadow: 0 5px 0 var(--drop); cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
@media (hover: hover) { .task:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--drop); } }
.task input[type=checkbox] { width: 26px; height: 26px; margin: 0; accent-color: var(--edge); flex: none; cursor: pointer; }
.task .grow { flex: 1; min-width: 0; }
.task .t-title { font-weight: 800; word-break: break-word; }
.task.done { background: var(--edge); color: var(--bg); box-shadow: 0 5px 0 color-mix(in srgb, var(--page) 50%, var(--drop)); }
.task.done .t-title { text-decoration: line-through; }
.task.done .t-meta { color: inherit; opacity: .8; }
.task .t-meta { font-size: .8rem; font-weight: 600; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.task .t-subj { font-weight: 800; }
.task .note-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge); background: var(--note); flex: none; }
.task .tag { flex: none; }

/* ============ schedule ============ */
.sched-wrap { overflow-x: auto; background: var(--surface); border: var(--bw) solid var(--edge); border-radius: var(--radius); box-shadow: 0 6px 0 var(--drop); }
.sched { display: grid; grid-template-columns: 52px repeat(var(--days), minmax(92px, 1fr)); min-width: calc(52px + var(--days) * 92px); position: relative; }
.sched-h { position: sticky; top: 0; background: var(--surface); z-index: 2; text-align: center; font-weight: 800; padding: 10px 0; border-bottom: var(--bw) solid var(--edge); font-size: .85rem; text-transform: uppercase; }
.sched-h.today { background: var(--edge); color: var(--surface); }
.sched-times { position: relative; }
.sched-time { position: absolute; right: 6px; font-size: .72rem; font-weight: 700; color: var(--muted); transform: translateY(-50%); }
.sched-col { position: relative; border-left: 2px solid var(--line); background-image: repeating-linear-gradient(var(--line) 0 1px, transparent 1px var(--hour)); cursor: copy; }
.sched-col.today { background-color: color-mix(in srgb, var(--page) 35%, transparent); }
.cls {
  position: absolute; left: 3px; right: 3px; border-radius: 12px; padding: 4px 6px; color: #fff; overflow: hidden; cursor: pointer;
  font-size: .72rem; font-weight: 600; line-height: 1.2; border: 2px solid var(--edge);
}
.cls b { display: block; font-size: .8rem; font-weight: 800; }
.now-line { position: absolute; left: 0; right: 0; height: 3px; background: var(--coral); z-index: 1; pointer-events: none; }

/* ============ quiz ============ */
.q-card { margin-bottom: 18px; }
.q-card .q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.q-card .q-num { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.choice-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.choice-row input[type=text] { flex: 1; }
.choice-row input[type=radio] { width: 22px; height: 22px; accent-color: var(--edge); }
.play { max-width: 680px; margin: 0 auto; }
.progress { height: 14px; background: var(--surface); border: 2.5px solid var(--edge); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
.progress > div { height: 100%; background: var(--coral); transition: width .3s; }
.answer {
  display: flex; align-items: center; width: 100%; min-height: 64px; text-align: left; padding: 12px 20px; margin-bottom: 16px; border-radius: 20px;
  border: var(--bw) solid var(--edge); background: var(--surface); color: var(--text); font-weight: 700; font-size: 1.02rem; cursor: pointer;
  box-shadow: 0 5px 0 var(--drop); transition: transform .12s, box-shadow .12s;
}
@media (hover: hover) { .answer:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--drop); } }
.answer:active:not(:disabled) { transform: translateY(5px); box-shadow: none; }
.answer.correct { background: var(--mint); color: var(--on-color); }
.answer.wrong { background: var(--coral); color: var(--on-color); }
.score-ring { width: 150px; height: 150px; border-radius: 50%; margin: 10px auto 18px; display: grid; place-items: center; font-family: var(--display); font-size: 2.2rem; font-weight: 800; border: var(--bw) solid var(--edge); box-shadow: 0 6px 0 var(--drop); }

/* ============ bulletin ============ */
.board { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
.note {
  position: relative; padding: 18px 20px 16px; border-radius: 22px; color: var(--on-color);
  border: var(--bw) solid var(--edge); box-shadow: 0 6px 0 var(--drop);
}
.pushpin { display: none; }
.pushpin.pinned { display: inline-flex; position: absolute; top: -14px; right: 18px; width: auto; height: auto; padding: 1px 10px; border-radius: 999px; border: 2.5px solid var(--edge); background: var(--coral); }
.pushpin.pinned::after { content: 'PINNED'; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: var(--on-color); }
.note h3 { font-size: 1.35rem; margin: 6px 0 6px; }
.note .body { white-space: pre-wrap; word-wrap: break-word; margin-bottom: 12px; font-weight: 500; }
.note .meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .78rem; font-weight: 700; flex-wrap: wrap; }
.note .tag { background: #fff; color: var(--on-color); border-color: var(--on-color); }
.note.unread::before { content: 'NEW'; position: absolute; top: -14px; left: 18px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: var(--on-color); background: var(--butter); border: 2.5px solid var(--edge); padding: 1px 10px; border-radius: 999px; }
.note img { border-radius: 14px; border: 2.5px solid #16131B; margin-bottom: 10px; }
.note a { color: var(--on-color); word-break: break-all; }
.note .btn.ghost { color: var(--on-color); }

/* ============ links ============ */
.link-card { display: flex; gap: 14px; align-items: center; }
.link-card .fav { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; overflow: hidden; background: #fff; border: 2.5px solid var(--edge); }
.site-logo { display: grid; place-items: center; width: 100%; height: 100%; }
.site-logo img { width: 26px; height: 26px; object-fit: contain; }
.site-logo.letter { background: var(--coral); color: var(--on-color); font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.link-card .grow { flex: 1; min-width: 0; }
.link-card .title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card .url { font-size: .8rem; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fire { font-size: .72rem; font-weight: 800; white-space: nowrap; display: inline-flex; gap: 3px; align-items: center; padding: 1px 8px; border: 2px solid var(--edge); border-radius: 999px; background: var(--coral); color: var(--on-color); }

/* ============ notification panel ============ */
.notif-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; border-bottom: 2px solid var(--line); cursor: pointer; }
.notif-item.unread .n-title::after { content: ' NEW'; font-size: .65rem; font-weight: 800; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--coral); color: var(--on-color); vertical-align: .15em; }
.notif-item .n-title { font-weight: 800; }
.notif-item .n-body { font-size: .9rem; color: var(--muted); }
.notif-item .n-time { font-size: .75rem; font-weight: 600; color: var(--muted); }

/* ============ alarm ============ */
.alarm { text-align: center; }
.alarm .bell { display: inline-block; animation: ring 1s infinite; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }

/* ============ more / settings ============ */
.menu { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 28px; }
.menu a {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; min-height: 130px; justify-content: flex-end;
  background: var(--surface); border: var(--bw) solid var(--edge); border-radius: 22px; text-decoration: none; color: var(--text);
  font-family: var(--display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 5px 0 var(--drop);
  transition: transform .12s, box-shadow .12s;
}
@media (hover: hover) { .menu a:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--drop); } }
.menu a:active { transform: translateY(5px); box-shadow: none; }
.menu a .m-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: auto; border-radius: 14px; border: 2.5px solid #16131B; background: var(--tile, var(--butter)); color: var(--on-color); }
.menu a small { font-family: var(--font); font-size: .82rem; letter-spacing: 0; color: var(--muted); font-weight: 600; }
.credits { text-align: center; padding: 24px 12px; }
.credits img { width: 72px; height: 72px; }
.editable-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.editable-list .chip { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.editable-list .chip button { border: 0; background: none; cursor: pointer; color: inherit; padding: 4px; margin-right: -6px; font-size: .9rem; display: grid; place-items: center; }
.editable-list .chip button .ico { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .btn:active, .fab:active, .nb:active, .answer:active, .menu a:active, .task:hover, .nb:hover, .btn:hover { transform: none !important; }
}

@media print {
  .topbar, .nav, .fab, .toolbar, .btn { display: none !important; }
  main#view { margin: 0; padding: 0; }
}

/* ============ subject files ============ */
.group-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.group-files { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); text-decoration: none; letter-spacing: 0; text-transform: none; font-size: .8rem; }

.folders { display: grid; gap: 22px 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding-top: 12px; }
.folder {
  --folder: #7b3fa0;
  position: relative; display: block; text-decoration: none; color: inherit; aspect-ratio: 4 / 3;
  transition: transform .15s;
}
.folder:hover, .folder:focus-visible { transform: translateY(-3px); }
.folder-tab {
  position: absolute; left: 0; top: -12px; width: 46%; height: 26px; border-radius: 10px 14px 0 0;
  background: color-mix(in srgb, var(--folder) 78%, #000);
}
.folder-body {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 14px;
  border-radius: 4px 14px 14px 14px; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--folder) 88%, #fff) 0%, var(--folder) 55%, color-mix(in srgb, var(--folder) 82%, #000) 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 10px 20px -8px rgba(40, 20, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.folder-body::before { /* a sheet of paper peeking out */
  content: ''; position: absolute; left: 10%; right: 10%; top: -6px; height: 30%; background: #fffdf6; border-radius: 4px; z-index: -1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
/* folder finishes */
.folder { --finish: none; }
.folder[data-finish="stripes"] { --finish: repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 7px, transparent 7px 15px); }
.folder[data-finish="linen"] { --finish: repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 4px); }
.folder[data-finish="kraft"] { --finish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }
.folder .folder-body { background-image: var(--finish), linear-gradient(160deg, color-mix(in srgb, var(--folder) 88%, #fff) 0%, var(--folder) 55%, color-mix(in srgb, var(--folder) 82%, #000) 100%); }
.folder-sticker {
  position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 253, 246, .92); color: color-mix(in srgb, var(--folder) 80%, #000);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transform: rotate(-8deg);
}
.folder-wrap { position: relative; animation: nbIn .5s cubic-bezier(.2, .8, .3, 1.15) backwards; animation-delay: calc(var(--i, 0) * 35ms + 40ms); }
.folder-more {
  position: absolute; top: 6px; right: 6px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 10px; padding: 0;
  display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .14);
  opacity: .85; transition: opacity .18s, background-color .18s, transform .12s;
}
.folder-more:hover, .folder-more:focus-visible { opacity: 1; background: rgba(0, 0, 0, .28); }
.folder-more:active { transform: scale(.9); }
@media (hover: hover) { .folder-wrap:not(:hover) .folder-more:not(:focus-visible) { opacity: 0; } }
.folder-preview-wrap { display: grid; place-items: center; padding: 18px 0 4px; }
.folder.preview { width: 170px; transition: none; }
.folder.preview .folder-body, .folder.preview .folder-tab { transition: background-color .2s; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.sticker-btn {
  height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  display: grid; place-items: center; cursor: pointer; font-size: .7rem; font-weight: 800;
  transition: background-color .15s, border-color .15s, transform .12s;
}
.sticker-btn:active { transform: scale(.92); }
.sticker-btn.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.custom-swatch { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.custom-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.folder-name { font-weight: 800; font-size: 1rem; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.folder-meta { font-size: .75rem; font-weight: 700; opacity: .9; }
.folder.empty .folder-body { filter: saturate(.35); opacity: .7; }
.folder.empty .folder-body::before { display: none; }

.file-list { display: flex; flex-direction: column; gap: 8px; }
.file-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 10px; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--text);
}
.file-row:hover { border-color: var(--brand); }
.file-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-row .title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .sub { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-thumb {
  --kind: #6f6680;
  flex: none; width: 46px; height: 52px; border-radius: 6px 14px 6px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: color-mix(in srgb, var(--kind) 14%, var(--surface)); color: var(--kind); border: 1px solid color-mix(in srgb, var(--kind) 30%, transparent);
}
.file-thumb small { font-size: .6rem; font-weight: 900; letter-spacing: .03em; }
.file-thumb.img { padding: 0; overflow: hidden; border: 1px solid var(--line); }
.file-thumb.img img { width: 100%; height: 100%; object-fit: cover; }
.file-sheet { text-align: center; }
.file-sheet .btn-row { justify-content: center; }
.file-name { word-break: break-word; margin-top: 12px; }
.file-preview { display: grid; place-items: center; }
.file-preview .file-thumb { width: 84px; height: 96px; }
.file-preview .file-thumb .ico { width: 36px; height: 36px; }
.file-preview img { max-height: 50vh; border-radius: 10px; box-shadow: var(--shadow); }
.drop-hint { font-size: .8rem; text-align: center; margin-top: 16px; }
@media (pointer: coarse) { .drop-hint { display: none; } }
#view.dropping { outline: 3px dashed var(--brand); outline-offset: -8px; border-radius: 18px; background: color-mix(in srgb, var(--brand-soft) 50%, transparent); }

/* phone alarms: setup guide */
.setup-steps { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 10px; }
.setup-step { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.step-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: .8rem; font-weight: 800; margin-top: 1px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: 0 5px; border-radius: 5px; }
.alarm-explain { display: flex; gap: 12px; align-items: center; color: var(--brand); }
.alarm-explain p { margin: 0; color: var(--text, inherit); }
.code-input { width: 100%; text-align: center; font: 800 1.8rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .35em; padding: 12px 8px; border-radius: 14px; }

/* ============ flat style for subject files & the notebook desk ============ */
.group-files { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 2.5px solid var(--edge); background: var(--surface); color: var(--text); font-family: var(--font); font-size: .82rem; font-weight: 800; letter-spacing: 0; text-decoration: none; box-shadow: 0 3px 0 var(--drop); }
.folder-tab { border: var(--bw) solid var(--edge); border-bottom: 0; background: var(--folder); }
.folder .folder-body, .folder-body {
  border: var(--bw) solid var(--edge); border-radius: 6px 22px 22px 22px; box-shadow: 0 6px 0 var(--drop);
  background-color: var(--folder); background-image: var(--finish);
}
.folder-body::before { border: 2.5px solid #16131B; }
.folder-sticker { border: 2.5px solid #16131B; box-shadow: none; transform: none; }
.folder:hover, .folder:focus-visible { transform: translateY(-3px); }
.folder-more { background: #fff; color: #16131B; border: 2.5px solid #16131B; }
.folder-more:hover, .folder-more:focus-visible { background: #fff; }
.folder-name { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.02em; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.file-row { min-height: 64px; padding: 10px 12px; border: var(--bw) solid var(--edge); border-radius: 20px; box-shadow: 0 4px 0 var(--drop); }
.file-row:hover { border-color: var(--edge); }
.file-thumb { border: 2.5px solid var(--edge); background: color-mix(in srgb, var(--kind) 22%, var(--surface)); color: var(--text); }
.file-preview img { border: var(--bw) solid var(--edge); box-shadow: 0 5px 0 var(--drop); }
#view.dropping { outline: var(--bw) dashed var(--edge); background: color-mix(in srgb, var(--surface) 40%, transparent); }
.step-n { background: var(--edge); color: var(--bg); width: 28px; height: 28px; }
.sticker-btn { border: 2.5px solid var(--edge); background: var(--surface); }
.sticker-btn.on { border-color: var(--edge); background: var(--edge); color: var(--bg); }

/* Handwritten headings on a page keep their natural spacing. */
.ptext h1, .ptext h2, .ptext h3 { letter-spacing: normal; font-weight: 700; }
/* The page itself stays light in both themes, so its handles and selections stay ink-black. */
.stage { --brand: #16131B; }
.toolbar { border-bottom: var(--bw) solid var(--edge); }
.toolbar.tools { border-bottom: 0; }

/* ============ first-run welcome ============ */
.welcome {
  position: fixed; inset: 0; z-index: 150; overflow-y: auto; background: var(--butter); color: var(--on-color);
  padding: calc(var(--safe-t) + 24px) max(24px, env(safe-area-inset-right)) calc(var(--safe-b) + 24px) max(24px, env(safe-area-inset-left));
  display: flex; justify-content: center; transition: background-color .3s ease;
}
.welcome.step-2 { background: var(--lilac); }
.welcome-in { width: 100%; max-width: 440px; min-height: 100%; display: flex; flex-direction: column; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; }
.welcome .kicker { border-color: var(--on-color); }
.welcome h2 { margin: 26px 0 0; font-size: clamp(2.4rem, 1.8rem + 3vw, 3.2rem); }
.welcome p.lead { margin: 16px 0 26px; font-size: 1.08rem; font-weight: 600; }
.welcome .linkish { color: var(--on-color); }
.choice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 70px; margin-bottom: 18px; padding: 0 22px;
  border: var(--bw) solid #16131B; border-radius: 22px; background: #fff; color: #16131B; box-shadow: 0 6px 0 #16131B; cursor: pointer; text-align: left;
  transition: transform .12s, box-shadow .12s;
}
.choice:active { transform: translateY(6px); box-shadow: none; }
.choice b { font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.choice small { font-size: .82rem; font-weight: 700; text-align: right; }
.choice[aria-pressed="true"] { background: #16131B; color: #fff; }
.choice[aria-pressed="true"] b { color: var(--butter); }
.choice input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--display); font-size: 1.4rem; font-weight: 800; color: inherit; }
.welcome-actions { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.welcome-actions .btn.big { width: 100%; border-color: #16131B; box-shadow: 0 6px 0 #16131B; }
.welcome-actions .btn.primary { background: #16131B; color: var(--butter); }
.preview-note {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 18px;
  border: var(--bw) solid #16131B; border-radius: 22px; background: #fff; box-shadow: 0 6px 0 #16131B;
}
.preview-note + .preview-note { transform: rotate(-1.5deg); }
.preview-note > span { flex: none; width: 46px; height: 46px; border-radius: 12px; border: 2.5px solid #16131B; background: var(--coral); }
.preview-note + .preview-note > span { background: var(--butter); }
.preview-note small { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.preview-note div { font-weight: 700; line-height: 1.3; }

/* a picture dragged over the other page of the open book */
.drop-target { outline: 4px dashed var(--coral); outline-offset: -6px; }
.nb.landscape { aspect-ratio: 4 / 3.1; }

/* ============ sign-in screen ============ */
/* The app stays hidden until we know who's signed in, and while nobody is. */
html.booting #app, html.gated #app { visibility: hidden; }
html.booting body { background: var(--butter); }
.gate { position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--text); }
.gate-in { min-height: 100%; display: flex; flex-direction: column; }
.gate-hero {
  position: relative; overflow: hidden; flex: none; display: flex; align-items: flex-start; justify-content: space-between;
  min-height: 300px; padding: calc(var(--safe-t) + 36px) 24px 26px;
  background: var(--butter); color: var(--on-color);
  border: var(--bw) solid var(--edge); border-top: 0; border-radius: 0 0 38px 38px;
}
.gate-brand { position: relative; z-index: 1; max-width: 52%; }
.gate-word { font-family: var(--display); font-weight: 800; font-size: 2.7rem; letter-spacing: -0.05em; line-height: 1; }
.gate-word span { color: var(--coral); }
.gate-brand p { margin: 12px 0 0; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.gate-brand br { display: none; }
.gate-art-wrap { position: absolute; right: 2px; bottom: 6px; width: min(58%, 290px); }
.gate-art { display: block; width: 100%; height: auto; }

.gate-panel { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; padding: 30px max(20px, env(safe-area-inset-right)) calc(var(--safe-b) + 22px) max(20px, env(safe-area-inset-left)); }
.gate-form { gap: 16px; }
.gate-head h1 { font-size: clamp(2.1rem, 1.7rem + 2vw, 2.7rem); margin: 0 0 8px; }
.gate-head p { margin: 0; color: var(--muted); font-weight: 600; }
.gate-field {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 8px 0 20px; cursor: text;
  border: 2.5px solid var(--edge); border-radius: 999px; background: var(--brand-soft); color: var(--muted);
}
.gate-field:focus-within { outline: 3px solid var(--coral); outline-offset: 2px; }
.gate-field input { flex: 1; min-width: 0; min-height: 56px; padding: 0 12px 0 0; border: 0; background: transparent; outline: none; color: var(--text); font-weight: 600; }
.gate-field input::placeholder { color: var(--muted); opacity: .9; }
.gate-field input:-webkit-autofill { -webkit-text-fill-color: var(--text); transition: background-color 600000s 0s; }
.gate-eye { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.gate-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.gate-row .linkish { padding: 8px 0; }
.gate-check { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; cursor: pointer; }
.gate-check input {
  -webkit-appearance: none; appearance: none; flex: none; width: 26px; height: 26px; margin: 0; cursor: pointer;
  border: 2.5px solid var(--edge); border-radius: 8px; background: var(--surface);
}
.gate-check input:checked {
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316131B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 17px no-repeat;
}
.gate-go { margin-top: 4px; }
.gate-or { display: flex; align-items: center; gap: 12px; margin: 26px 0 16px; color: var(--muted); font-weight: 700; font-size: .88rem; }
.gate-or::before, .gate-or::after { content: ''; flex: 1; height: 2px; background: var(--line); }
.gate-alts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gate-alts.one { grid-template-columns: 1fr; }
.gate-alt { min-height: 56px; }
.gate-logo { display: grid; place-items: center; }
.gate-switch { margin: 22px 0 0; text-align: center; font-weight: 600; }
.gate-switch .linkish { padding: 6px 2px; font-size: 1rem; font-weight: 800; }
.gate-fine { margin: auto 0 0; padding-top: 22px; text-align: center; font-size: .78rem; color: var(--muted); }
.gate-offline {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 16px;
  border: 2.5px solid var(--edge); background: var(--sky); color: var(--on-color); font-weight: 700; font-size: .88rem; line-height: 1.35;
}
.gate-offline .ico { margin-top: 1px; }
.gate .auth-sent h3 { font-size: 1.6rem; margin-top: 6px; }

/* While we check for a saved login: just the brand. */
.gate.splash .gate-hero { flex: 1; min-height: 100%; border: 0; border-radius: 0; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 26px; }
.gate.splash .gate-brand { max-width: none; animation: gate-breathe 1.6s ease-in-out infinite; }
.gate.splash .gate-art-wrap { position: static; width: min(64%, 280px); }
.gate.splash .gate-panel { display: none; }
@keyframes gate-breathe { 50% { opacity: .55; } }

@media (min-width: 900px) {
  .gate-in { flex-direction: row; }
  .gate:not(.splash) .gate-hero {
    flex: 1 1 50%; min-height: 100vh; position: sticky; top: 0; flex-direction: column; justify-content: space-between; padding: 56px;
    border-top: var(--bw) solid transparent; border-left: 0; border-radius: 0 48px 48px 0;
  }
  .gate:not(.splash) .gate-brand { max-width: 460px; }
  .gate-word { font-size: 4.2rem; }
  .gate-brand p { font-size: 1.3rem; }
  .gate-brand br { display: inline; }
  .gate:not(.splash) .gate-art-wrap { position: static; align-self: center; width: min(86%, 500px); margin-bottom: 4vh; }
  .gate-panel { flex: 1 1 50%; max-width: none; justify-content: center; padding: 56px 48px; }
  .gate-panel > * { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
  .gate-fine { margin-top: 0; }
}
/* ============ admin console ============ */
.admin-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 26px; }
.admin-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 20px; text-decoration: none; color: var(--text);
  background: var(--surface); border: var(--bw) solid var(--edge); box-shadow: 0 4px 0 var(--drop);
}
.admin-stat b { font-family: var(--display); font-size: 2rem; line-height: 1.05; letter-spacing: -0.03em; margin-top: 6px; }
.admin-stat small { font-weight: 700; color: var(--muted); }
.admin-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.admin-grid > .card + .card { margin-top: 0; }
.admin-card h2 .ico { vertical-align: -0.15em; margin-right: 6px; }
.admin-card .list { gap: 10px; }
.admin-card .row { box-shadow: none; border-width: 2.5px; padding: 10px 14px; min-height: 0; flex-wrap: wrap; }
.admin-card .row .grow { min-width: 160px; }
.admin-card .row .sub { white-space: normal; }
.admin-card .row .avatar { flex: none; }
.admin-sub { font-size: 1.05rem; margin: 22px 0 10px; }
.admin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-inline { display: flex; gap: 8px; margin-top: 12px; }
.admin-inline input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2.5px solid var(--edge); background: var(--surface); color: var(--text); }
.admin-problem { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; }
.admin-problem .ico { flex: none; margin-top: 2px; }
.admin-offline { display: flex; gap: 10px; align-items: center; font-weight: 700; background: var(--butter); color: var(--on-color); margin-bottom: 20px; }
.admin-fb { padding: 12px 14px; border: 2.5px solid var(--edge); border-radius: 18px; }
.admin-fb.done { opacity: .6; }
.admin-fb-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.admin-fb-head .muted { margin-left: auto; font-size: .8rem; font-weight: 600; }
.admin-fb p { white-space: pre-wrap; word-wrap: break-word; margin: 8px 0 10px; font-weight: 500; }
.plan-line { font-weight: 600; }
section.card[hidden] { display: none !important; }

/* ============ the creators' banner above every screen ============ */
.site-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 4px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
  padding: 8px 8px 8px 16px; border: var(--bw) solid var(--edge); border-radius: 18px; box-shadow: 0 4px 0 var(--drop);
  background: var(--sky); color: var(--on-color); font-weight: 700;
}
.site-banner[data-kind="warn"] { background: var(--butter); }
.site-banner[data-kind="party"] { background: var(--mint); }
.site-banner[data-kind="urgent"] { background: var(--coral); }
.site-banner > .ico { flex: none; }
.site-banner .sb-text { flex: 1; min-width: 0; word-wrap: break-word; }
.site-banner .sb-close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.site-banner .sb-close:hover { background: rgba(22, 19, 27, .1); }
.site-banner:has(+ main#view.full) { display: none; }
@media (min-width: 600px) { .site-banner { margin-left: 32px; margin-right: 32px; } }
@media (min-width: 1024px) {
  .site-banner { margin: 4px 48px 10px calc(var(--side-w) + 48px + max(0px, (100vw - var(--side-w) - 1120px) / 2)); max-width: calc(1120px - 96px); }
}

@media (prefers-reduced-motion: reduce) { .gate.splash .gate-brand { animation: none; } }


/* ============ the pomodoro pill in the top bar ============ */
.focus-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; flex: none;
  border: var(--bw) solid var(--edge); border-radius: 999px; background: var(--coral); color: var(--on-color);
  font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: none; box-shadow: 0 3px 0 var(--drop);
}
.focus-pill.break { background: var(--mint); }
.focus-pill.paused { background: var(--surface); color: var(--text); }
.focus-pill .ico { display: block; }
@media (max-width: 379px) { .focus-pill { padding: 0 10px; } .focus-pill > span:first-child { display: none; } }

/* ============ notebook: split screen with a PDF ============ */
.work { flex: 1; min-height: 0; display: flex; }
.work > .desk { flex: 1; min-width: 0; }
.pdf-pane { flex: none; width: var(--split-w, 42%); min-width: 0; display: flex; flex-direction: column; background: var(--surface-2); border-left: var(--bw) solid var(--edge); }
.pp-bar { gap: 2px; }
.pp-ico { display: grid; place-items: center; padding: 0 4px; color: var(--muted); }
.pp-title { min-width: 0; flex: 0 1 auto; font-weight: 800; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-body { flex: 1; min-height: 0; overflow: auto; padding: 12px; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.pp-pages { display: flex; flex-direction: column; align-items: center; gap: 12px; width: max-content; min-width: 100%; }
.pp-page { position: relative; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); border-radius: 3px; overflow: hidden; }
.pp-page canvas { display: block; width: 100%; height: 100%; }
.pp-num { position: absolute; right: 6px; bottom: 4px; font-size: .7rem; font-weight: 800; color: #6b6577; background: rgba(255, 255, 255, .8); padding: 0 6px; border-radius: 999px; }
.pp-status { padding: 24px; color: var(--muted); font-weight: 600; }
.splitter { flex: none; width: 14px; margin: 0 -7px; z-index: 9; cursor: col-resize; display: grid; place-items: center; touch-action: none; position: relative; }
.splitter-grip { width: 6px; height: 54px; border-radius: 999px; background: var(--edge); opacity: .55; transition: opacity .15s, transform .15s; }
.splitter:hover .splitter-grip, .splitter.dragging .splitter-grip, .splitter:focus-visible .splitter-grip { opacity: 1; transform: scaleY(1.2); }
/* Narrow screens: the PDF sits under the notebook instead. */
@media (max-width: 719px) {
  .work.split { flex-direction: column; }
  .work.split .pdf-pane { width: auto; height: var(--split-h, 45%); border-left: 0; border-top: var(--bw) solid var(--edge); }
  .work.split .splitter { width: auto; height: 18px; margin: -9px 0; cursor: row-resize; }
  .work.split .splitter-grip { width: 54px; height: 6px; }
  .work.split .side-arrow { display: none; }
}

/* ============ notebook: bookmark tabs along the top of the page ============ */
.stage.has-tabs { padding-top: 46px; }
.bm-tabs { position: absolute; left: 22px; right: 10px; bottom: 100%; z-index: 3; display: flex; gap: 6px; justify-content: flex-end; overflow: hidden; pointer-events: none; padding-top: 6px; }
.bm-tab {
  pointer-events: auto; flex: 0 1 auto; min-width: 34px; max-width: 120px; height: 26px; padding: 0 10px; margin-bottom: -4px;
  border: 0; border-radius: 8px 8px 0 0; background: var(--bm, var(--coral)); color: #16131B; cursor: pointer;
  font: 800 .72rem/26px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 -6px 6px -4px rgba(0, 0, 0, .18), 0 -1px 3px rgba(0, 0, 0, .15); transition: transform .15s;
}
.bm-tab:hover, .bm-tab:focus-visible { transform: translateY(-3px); }
.bm-tab.here { height: 32px; margin-bottom: -6px; transform: translateY(-4px); box-shadow: 0 -2px 6px rgba(0, 0, 0, .22); }
.bm-chip { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--bm); color: #16131B; border: 2px solid var(--edge); }
.bm-row { cursor: pointer; }

/* ============ notebook export / print ============ */
.print-root { display: none; }
@media print {
  html.printing, html.printing body { background: #fff !important; }
  html.printing body > *:not(.print-root) { display: none !important; }
  html.printing .print-root { display: block; }
  .print-root { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-sheet { position: relative; overflow: hidden; break-after: page; page-break-after: always; break-inside: avoid; }
  .print-sheet:last-child { break-after: auto; page-break-after: auto; }
  .print-sheet .paper { position: absolute; top: 0; transform-origin: 0 0; box-shadow: none; border-radius: 0; }
  .print-sheet .paper::after { display: none; }
  .print-root.plain .paper { background-image: none !important; }
  .print-sheet .ptext:empty::before { content: none; }
}

/* ============ flashcards ============ */
.study-banner { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; padding: 22px 26px; margin-bottom: 28px; border-radius: 26px; background: #16131B; color: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--page) 55%, #16131B); }
.study-banner .btn { background: var(--page); color: var(--on-color); border-color: var(--page); box-shadow: none; }
.study-banner.done { background: var(--surface); color: var(--text); border: var(--bw) solid var(--edge); box-shadow: 0 6px 0 var(--drop); }
.sb-num { font-family: var(--display); font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.sb-label { font-weight: 700; opacity: .85; }
.deck-grid { display: grid; gap: 26px 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 20px; }
.deck { position: relative; display: block; text-decoration: none; color: var(--text); padding-top: 10px; }
.deck-stack, .deck-stack::before { position: absolute; left: 10px; right: 10px; top: 4px; height: 60px; border: var(--bw) solid var(--edge); border-radius: 20px; background: color-mix(in srgb, var(--deck) 35%, var(--surface)); }
.deck-stack::before { content: ''; left: 8px; right: 8px; top: -8px; background: color-mix(in srgb, var(--deck) 18%, var(--surface)); }
.deck-body { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 170px; padding: 18px; border: var(--bw) solid var(--edge); border-radius: 22px; background: var(--surface); box-shadow: 0 6px 0 var(--drop); border-top: 12px solid var(--deck); transition: transform .12s, box-shadow .12s; }
@media (hover: hover) { .deck:hover .deck-body { transform: translateY(-3px); box-shadow: 0 9px 0 var(--drop); } }
.deck-title { font-family: var(--display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; word-break: break-word; }
.deck-sub { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.deck-counts { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; font-size: .82rem; font-weight: 700; color: var(--muted); }
.deck-counts b { color: var(--text); font-size: 1rem; }
.dc.due b { color: var(--danger); }
.deck-go { align-self: flex-start; margin-top: 6px; }
.deck-done { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; color: var(--ok); margin-top: 6px; }
.deck-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat { display: flex; flex-direction: column; padding: 12px 16px; border: 2.5px solid var(--edge); border-radius: 18px; background: var(--surface); }
.stat b { font-family: var(--display); font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.stat span { font-size: .78rem; font-weight: 700; color: var(--muted); }
.new-card { margin-bottom: 28px; }
.new-card h3 { display: flex; align-items: center; gap: 6px; }
.card-faces { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 599px) { .card-faces { grid-template-columns: 1fr; } }
.card-faces textarea { width: 100%; resize: vertical; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 2.5px solid var(--edge); background: var(--surface-2); font-weight: 600; line-height: 1.35; }
.card-faces textarea:focus { outline: 3px solid var(--coral); outline-offset: 2px; }
.card-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.card-row { padding: 12px; border: 2.5px solid var(--edge); border-radius: 20px; background: var(--surface); }
.card-row .card-faces { margin-bottom: 6px; }
.card-row textarea { resize: none; overflow: hidden; min-height: 44px; background: transparent; border-color: var(--line); }
.card-meta { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; }
.card-meta .icon-btn { margin-left: auto; width: 36px; height: 36px; }
/* studying */
main#view.study-view { max-width: 760px; }
.study-top { display: flex; align-items: center; gap: 12px; margin: 4px 0 22px; }
.study-progress { flex: 1; height: 14px; border: 2.5px solid var(--edge); border-radius: 999px; overflow: hidden; background: var(--surface); }
.study-progress span { display: block; height: 100%; width: 0; background: var(--edge); border-radius: 999px; transition: width .3s cubic-bezier(.2, .8, .2, 1); }
.study-count { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.study-stage { perspective: 1600px; }
.flashcard { position: relative; min-height: min(56vh, 420px); cursor: pointer; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, .7, .2, 1); outline: none; }
.flashcard.flipped { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 34px 28px;
  border: var(--bw) solid var(--edge); border-radius: 28px; background: var(--surface); box-shadow: 0 8px 0 var(--drop);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; overflow: auto;
}
.fc-front { border-top: 14px solid var(--deck); }
.fc-back { transform: rotateY(180deg); background: color-mix(in srgb, var(--deck) 14%, var(--surface)); }
.flashcard:focus-visible .fc-face { outline: 3px solid var(--coral); outline-offset: 3px; }
.fc-tag { position: absolute; top: 14px; left: 18px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fc-text { font-family: var(--display); font-size: clamp(1.4rem, 1rem + 2vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; white-space: pre-wrap; word-break: break-word; }
.fc-back .fc-text { font-family: var(--font); font-size: clamp(1.1rem, .95rem + 1vw, 1.6rem); font-weight: 700; }
.fc-q { font-size: .9rem; font-weight: 700; color: var(--muted); white-space: pre-wrap; max-width: 46ch; }
.study-actions { margin-top: 26px; min-height: 74px; display: flex; justify-content: center; }
.reveal { min-width: 220px; }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.grade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 66px; border: var(--bw) solid var(--edge); border-radius: 20px; background: var(--surface); color: var(--on-color); cursor: pointer; box-shadow: 0 4px 0 var(--drop); font-weight: 800; transition: transform .1s, box-shadow .1s; }
.grade:active { transform: translateY(4px); box-shadow: none; }
.grade small { font-weight: 700; opacity: .75; }
.grade.again { background: #FFB4A8; }
.grade.hard { background: var(--butter); }
.grade.good { background: var(--mint); }
.grade.easy { background: var(--sky); }
.study-keys { text-align: center; font-size: .8rem; margin-top: 14px; }
@media (pointer: coarse) { .study-keys { display: none; } }
.study-done { text-align: center; padding: 40px 10px; }

/* ============ focus (pomodoro) ============ */
.focus-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; margin-bottom: 30px; }
@media (max-width: 859px) { .focus-grid { grid-template-columns: 1fr; } }
.focus-side { display: flex; flex-direction: column; gap: 18px; }
.focus-side .card + .card { margin-top: 0; }
.timer-card { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px 20px 26px; border: var(--bw) solid var(--edge); border-radius: 30px; background: var(--surface); box-shadow: 0 6px 0 var(--drop); }
.phase-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.phase-chips .chip.on { background: var(--edge); color: var(--surface); }
.ring-wrap { position: relative; width: min(78vw, 320px); aspect-ratio: 1; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring-track { stroke: var(--brand-soft); }
.ring-bar { stroke: var(--coral); stroke-linecap: round; transition: stroke-dashoffset .5s linear, stroke .3s; }
[data-phase="short"] .ring-bar, [data-phase="long"] .ring-bar { stroke: #3f9a5b; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ring-time { font-family: var(--display); font-size: clamp(3.4rem, 2.6rem + 4vw, 5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ring-label { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ring-dots { display: flex; gap: 6px; margin-top: 6px; }
.ring-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--edge); }
.ring-dots i.on { background: var(--edge); }
.timer-buttons { display: flex; align-items: center; gap: 16px; }
.icon-btn.round { width: 54px; height: 54px; border-radius: 999px; border: var(--bw) solid var(--edge); background: var(--surface); box-shadow: 0 3px 0 var(--drop); }
.play-btn { min-width: 170px; }
.focus-subject { display: flex; align-items: center; gap: 10px; width: min(100%, 380px); min-height: 52px; padding: 0 16px; border: var(--bw) dashed var(--edge); border-radius: 18px; }
.focus-subject input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-weight: 700; min-height: 46px; }
.focus-exit { display: none; }
.focus-today { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; color: var(--text); }
.ft-num { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.ft-num small { font-family: var(--font); font-size: .8rem; color: var(--muted); }
.ft-label { font-size: .75rem; font-weight: 700; color: var(--muted); }
.sound-card h3, .lengths-card h3 { display: flex; align-items: center; gap: 8px; }
.noise-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.noise { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 2.5px solid var(--edge); border-radius: 16px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.noise b { grid-column: 2; }
.noise small { grid-column: 2; font-size: .72rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.noise.on { background: var(--edge); color: var(--surface); }
.noise.on small { color: inherit; opacity: .75; }
.noise-wave { grid-row: 1 / 3; width: 30px; height: 22px; border-radius: 6px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); opacity: .55; -webkit-mask: linear-gradient(transparent 30%, #000 30% 70%, transparent 70%); mask: linear-gradient(transparent 30%, #000 30% 70%, transparent 70%); }
.noise-wave.off { background: none; border: 2px dashed currentColor; -webkit-mask: none; mask: none; opacity: .4; }
.noise-wave.pink { -webkit-mask: linear-gradient(transparent 20%, #000 20% 80%, transparent 80%); mask: linear-gradient(transparent 20%, #000 20% 80%, transparent 80%); }
.noise-wave.brown { -webkit-mask: linear-gradient(transparent 5%, #000 5% 95%, transparent 95%); mask: linear-gradient(transparent 5%, #000 5% 95%, transparent 95%); }
.noise.playing .noise-wave { animation: wave 1.2s linear infinite; opacity: .9; }
@keyframes wave { to { background-position: 10px 0; } }
.vol-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--muted); }
.vol-row input { flex: 1; accent-color: var(--coral); }
.lens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.len { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 800; color: var(--muted); }
.len input { min-height: 44px; padding: 6px 12px; border-radius: 12px; border: 2.5px solid var(--edge); background: var(--surface-2); font-weight: 800; color: var(--text); }
/* focus mode: just the timer */
html.focus-mode .topbar, html.focus-mode .nav, html.focus-mode #view > .page-head, html.focus-mode .focus-side, html.focus-mode .focus-pill { display: none !important; }
html.focus-mode main#view { margin: 0 !important; max-width: none; padding: max(24px, env(safe-area-inset-top)) 16px 24px; min-height: 100dvh; display: grid; place-items: center; }
html.focus-mode .focus-grid { grid-template-columns: 1fr; width: min(100%, 560px); margin: 0; }
html.focus-mode .timer-card { border: 0; box-shadow: none; background: transparent; }
html.focus-mode .ring-wrap { width: min(80vw, 62vh, 460px); }
html.focus-mode .focus-mode-row .btn:first-child { display: none; }
html.focus-mode .focus-exit { display: inline-flex; }

/* ============ exams ============ */
.exam-hero { display: flex; align-items: center; gap: 22px; width: 100%; padding: 20px 24px; margin-bottom: 26px; text-align: left; cursor: pointer; border: var(--bw) solid var(--edge); border-radius: 26px; background: var(--exam, var(--surface)); color: var(--on-color); box-shadow: 0 6px 0 var(--drop); font: inherit; }
.exam-hero.calm { background: var(--surface); color: var(--text); cursor: default; }
.exam-hero .upnext-label { color: inherit; opacity: .75; }
.eh-count { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; border: var(--bw) solid #16131B; border-radius: 24px; background: #fff; }
.eh-count b { font-family: var(--display); font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.eh-count span { font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.eh-title { font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-top: 2px; }
.eh-sub { font-weight: 700; margin-top: 4px; }
.eh-topics { margin-top: 6px; font-weight: 600; opacity: .85; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 479px) { .exam-hero { flex-direction: column; align-items: flex-start; } }
.cal-card { margin-bottom: 30px; padding: 16px; border: var(--bw) solid var(--edge); border-radius: 26px; background: var(--surface); box-shadow: 0 6px 0 var(--drop); }
.cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.cal-head h2 { margin: 0 auto 0 4px; }
.exam-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 0; }
.cal-day { min-height: 92px; padding: 6px; display: flex; flex-direction: column; gap: 4px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; min-width: 0; transition: background-color .15s; }
.cal-day:hover { background: var(--brand-soft); }
.cal-day.other { opacity: .4; }
.cal-day.past .cal-num { color: var(--muted); }
.cal-day.today { border-color: var(--edge); border-width: var(--bw); }
.cal-day.today .cal-num { background: var(--edge); color: var(--surface); }
.cal-num { align-self: flex-start; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.cal-exam { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 4px 6px; border: 2px solid var(--edge); border-radius: 10px; background: var(--exam); color: var(--on-color); cursor: pointer; text-align: left; min-width: 0; font: inherit; line-height: 1.15; }
.cal-exam b, .cal-exam small { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-exam b { font-size: .75rem; font-weight: 800; }
.cal-exam small { font-size: .65rem; font-weight: 700; }
@media (max-width: 599px) {
  .cal-card { padding: 10px; margin-left: -6px; margin-right: -6px; }
  .exam-cal { gap: 3px; }
  .cal-day { min-height: 58px; padding: 3px; border-radius: 10px; }
  .cal-exam { padding: 0; height: 8px; border-width: 1.5px; border-radius: 999px; }
  .cal-exam b, .cal-exam small { display: none; }
}
.exam-cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 40px; }
.exam-row .title { white-space: normal; }
.exam-swatch { width: 14px; align-self: stretch; flex: none; border-radius: 999px; background: var(--exam); border: 2px solid var(--edge); }
.zone-exam { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 2.5px solid #16131B; border-radius: 12px; background: #16131B; color: #fff; font-size: .75rem; font-weight: 800; text-decoration: none; }
.zone-exam span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ progress ============ */
.streak-hero { display: grid; grid-template-columns: auto 1fr minmax(240px, 320px); align-items: center; gap: 18px 24px; padding: 22px 26px; margin-bottom: 22px; border-radius: 28px; background: #16131B; color: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--page) 55%, #16131B); }
@media (max-width: 799px) { .streak-hero { grid-template-columns: auto 1fr; } .goal { grid-column: 1 / -1; } }
.sh-flame { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; background: var(--peach); color: #C2421F; }
.streak-hero.cold .sh-flame { background: #3A3442; color: #A59EB0; }
.sh-num { font-family: var(--display); font-size: clamp(3rem, 2.4rem + 3vw, 4.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: .95; }
.sh-num span { font-size: .4em; letter-spacing: -0.02em; }
.sh-label { font-weight: 700; color: #D9D4E0; margin-top: 4px; max-width: 34ch; }
.sh-best { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: .8rem; font-weight: 800; color: var(--peach); }
.goal { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 2.5px solid #4A4452; border-radius: 20px; }
.goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.goal small { color: #D9D4E0; font-weight: 600; }
.goal .linkish { color: #D9D4E0; font-size: .8rem; }
.goal .btn { align-self: flex-start; background: var(--peach); color: var(--on-color); border-color: var(--peach); box-shadow: none; }
.meter { height: 14px; border-radius: 999px; background: #184f95; overflow: hidden; }
.meter span { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: #86b6ef; transition: width .4s; }
.kpi-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 22px; }
.kpi-row.small { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 2.5px solid var(--edge); border-radius: 20px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 0 4px 0 var(--drop); min-width: 0; }
.kpi-row.small .stat-tile { box-shadow: none; padding: 10px 12px; }
.st-label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.st-value { font-size: 1.9rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.st-sub { font-size: .78rem; font-weight: 600; color: var(--muted); }
.viz-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; margin-bottom: 40px; }
.viz-grid .card + .card { margin-top: 0; }
.viz-stack { display: flex; flex-direction: column; gap: 22px; }
.viz-stack .card + .card { margin-top: 0; }
.viz-card { min-width: 0; }
.viz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.viz-head h3 { margin: 0; }
.viz-head p { margin: 2px 0 0; font-size: .82rem; font-weight: 600; }
.col-chart { display: grid; grid-template-columns: auto 1fr; gap: 8px; height: 220px; }
.col-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 22px; font-size: .7rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.col-axis span { transform: translateY(-50%); }
.col-axis span:last-child { transform: translateY(50%); }
.col-plot { position: relative; padding-bottom: 22px; }
.col-plot .grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--viz-grid); margin-bottom: 22px; }
.col-plot .grid:first-child { background: var(--muted); opacity: .5; }
.goal-line { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--muted); margin-bottom: 22px; pointer-events: none; z-index: 1; opacity: .6; }
.goal-line span { position: absolute; right: 0; top: -18px; font-size: .68rem; font-weight: 800; color: var(--muted); background: var(--surface); padding: 0 4px; }
.cols { position: absolute; inset: 0 0 0 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; }
.col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 22px; outline: none; cursor: default; }
.col-bar { display: block; width: min(24px, 70%); min-height: 2px; background: var(--viz-bar); border-radius: 4px 4px 0 0; transition: filter .15s; }
.col.today .col-bar { background: var(--viz-accent); }
.col:hover .col-bar, .col:focus-visible .col-bar { filter: brightness(1.15); outline: 2px solid var(--edge); outline-offset: 1px; }
.col-val { font-size: .66rem; font-weight: 800; white-space: nowrap; margin-bottom: 3px; color: var(--text); }
.col-day { position: absolute; bottom: 0; font-size: .68rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.col.today .col-day { color: var(--text); font-weight: 800; }
.viz-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.viz-table th, .viz-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.viz-table td:not(:first-child), .viz-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.heat-wrap { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.heat-days { display: grid; grid-template-rows: 16px repeat(7, 14px); gap: 3px; font-size: .62rem; font-weight: 700; color: var(--muted); }
.heat { display: flex; gap: 3px; }
.heat-col { display: grid; grid-template-rows: 16px repeat(7, 14px); gap: 3px; }
.heat-month { font-size: .62rem; font-weight: 800; color: var(--muted); white-space: nowrap; width: 14px; overflow: visible; }
.cell { display: block; width: 14px; height: 14px; border-radius: 4px; background: var(--viz-0); outline: none; }
.cell.l1 { background: var(--viz-1); }
.cell.l2 { background: var(--viz-2); }
.cell.l3 { background: var(--viz-3); }
.cell.l4 { background: var(--viz-4); }
.cell.future { background: none; }
.cell.today { box-shadow: 0 0 0 2px var(--edge); }
.heat .cell:hover, .heat .cell:focus-visible { box-shadow: 0 0 0 2px var(--coral); }
.heat-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 10px; font-size: .7rem; font-weight: 700; color: var(--muted); }
.heat-legend span:first-child { margin-right: 4px; }
.heat-legend span:last-child { margin-left: 4px; }
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 10px; outline: none; }
.hb-name { font-size: .85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 18px; display: flex; align-items: center; }
.hb-bar { display: block; height: 18px; min-width: 3px; background: var(--viz-bar); border-radius: 0 4px 4px 0; }
.hbar:first-child .hb-bar { background: var(--viz-accent); }
.hbar:hover .hb-bar, .hbar:focus-visible .hb-bar { filter: brightness(1.15); }
.hb-val { font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.viz-tip { position: fixed; z-index: 400; display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--edge); color: var(--surface); pointer-events: none; box-shadow: 0 3px 0 var(--coral); max-width: 260px; }
.viz-tip b { font-size: .95rem; }
.viz-tip span { font-size: .75rem; font-weight: 600; opacity: .8; }

/* ============ home: the study strip ============ */
.study-strip { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 30px; }
@media (max-width: 799px) { .study-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ss-item { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; border: var(--bw) solid var(--edge); border-radius: 20px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 0 4px 0 var(--drop); min-width: 0; }
.ss-item > div { min-width: 0; }
.ss-item b { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item small { display: block; font-size: .76rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item .ico { flex: none; }
.ss-streak { background: var(--peach); color: var(--on-color); }
.ss-streak small { color: var(--on-color); opacity: .75; }
.ss-streak.cold { background: var(--surface); color: var(--text); }
.ss-exam { background: var(--exam); color: var(--on-color); }
.ss-exam small { color: var(--on-color); opacity: .75; }