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

:root {
  /* Type. Manrope is a variable font; its default instance is ExtraLight (200),
     so anything showing text must set an explicit weight — body does, below. */
  --font: "Manrope", "Zen Maru Gothic", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);

  /* Earthy base */
  --paper:   #E9E2D2;
  --surface: #F3EEE2;
  --raised:  #FBF8F1;
  --ink:     #2C271F;
  --muted:   #6E6453;
  --line:    #D6CCB8;

  /* Section accents */
  --clay:  #B06A4A;
  --moss:  #6E7A4F;
  --ochre: #C99A3F;
  --slate: #5C6B73;
  --plum:  #7A5A6B;

  --ok: var(--moss);
  --bad: #B0504A;

  --on-accent: #fff; /* text on a --clay / --moss fill (light themes: white) */
  --grid: rgba(110, 100, 83, 0.05); /* faint background-texture line colour */
  /* editable fields get a stronger resting border than plain dividers so they
     read as inputs before you hover. Derived from the theme's own colours, so it
     adapts to every theme without a per-theme override. */
  --field-border: color-mix(in srgb, var(--line), var(--muted));
}

/* ===== color themes ==========================================================
   A theme only overrides the palette variables; the ~1000 var() references
   across the sheet re-colour automatically. Default (no data-theme) = Sage. */

/* Tokyo Night Light — cool blue-grey (pastel) */
body[data-theme="tokyo-light"] {
  --paper: #d5d6db; --surface: #e1e2e7; --raised: #eaebf0;
  --ink: #343b58; --muted: #6a6f92; --line: #c4c8da;
  --clay: #34548a; --moss: #385f0d; --ochre: #8f5e15; --slate: #0f4b6e; --plum: #5a3e8e;
  --ok: #385f0d; --bad: #8c4351;
  --grid: rgba(52, 84, 138, 0.05);
}
/* Tokyo Night Storm — deep indigo (dark) */
body[data-theme="tokyo-storm"] {
  --paper: #24283b; --surface: #292e42; --raised: #2f3549;
  --ink: #c0caf5; --muted: #7d89b0; --line: #3b4261;
  --clay: #7aa2f7; --moss: #9ece6a; --ochre: #e0af68; --slate: #7dcfff; --plum: #bb9af7;
  --ok: #9ece6a; --bad: #f7768e;
  --on-accent: #1a1b26; /* dark text on the light accents */
  --grid: rgba(122, 162, 247, 0.05);
}

/* Gruvbox — warm cream / retro (pastel) */
body[data-theme="gruvbox"] {
  --paper: #f2e5bc; --surface: #fbf1c7; --raised: #fcf7dd;
  --ink: #3c3836; --muted: #7c6f64; --line: #e6d5a3;
  --clay: #af3a03; --moss: #79740e; --ochre: #b57614; --slate: #076678; --plum: #8f3f71;
  --ok: #79740e; --bad: #cc241d;
  --grid: rgba(124, 111, 100, 0.07);
}
/* One Dark — soft grey-blue (dark) */
body[data-theme="onedark"] {
  --paper: #282c34; --surface: #2f343f; --raised: #353b45;
  --ink: #abb2bf; --muted: #828896; --line: #3e4451;
  --clay: #d19a66; --moss: #98c379; --ochre: #e5c07b; --slate: #61afef; --plum: #c678dd;
  --ok: #98c379; --bad: #e06c75;
  --on-accent: #282c34; /* dark text on the light accents */
  --grid: rgba(171, 178, 191, 0.045);
}
/* Deep Night — near-black navy w/ teal (dark) */
body[data-theme="night"] {
  --paper: #011627; --surface: #0e2438; --raised: #13304a;
  --ink: #d6deeb; --muted: #8899a6; --line: #1d3b53;
  --clay: #7fdbca; --moss: #addb67; --ochre: #ecc48d; --slate: #82aaff; --plum: #c792ea;
  --ok: #addb67; --bad: #ff5874;
  --on-accent: #04222f; /* dark text on the light accents */
  --grid: rgba(130, 170, 255, 0.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* subtle texture: a faint hairline grid, low-contrast so content stays king */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400; /* variable font defaults to 200; keep body readable */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- top bar ---- */
.topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* narrow screens: search drops to its own line (below) */
  gap: 0.6rem 0.75rem;
  padding: 0.6rem 1rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) {
  .search { order: 5; flex-basis: 100%; max-width: none; }
}

/* ===== app dock (left nav rail) ===== */
body.has-appdock { padding-left: 64px; } /* make room for the fixed rail */
.appdock {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  box-sizing: border-box;
  background: var(--paper);
  border-right: 1px solid var(--line);
  overflow: hidden;
  transition: width 0.16s ease;
}
.appdock.open {
  width: 208px;
  box-shadow: 8px 0 26px -14px rgba(40, 30, 20, 0.45);
  border-radius: 0 14px 14px 0;
}
.appdock-exp {
  flex: 0 0 auto;
  width: 44px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.16s ease;
}
.appdock-exp:hover { background: var(--surface); color: var(--ink); }
.appdock.open .appdock-exp { transform: rotate(180deg); }
.appdock-exp svg { width: 18px; height: 18px; }
.appdock-rail { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; }
.appdock-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.appdock-btn svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--muted); }
.appdock-btn:hover { background: var(--surface); }
/* Home stays gently marked as a wayfinding anchor even when you're elsewhere */
.appdock-btn[data-dest="home"] { background: color-mix(in srgb, var(--clay) 7%, transparent); }
.appdock-btn[data-dest="home"] svg { color: color-mix(in srgb, var(--clay) 55%, var(--muted)); }
/* the section you're actually in: stronger fill + a left accent bar (you-are-here) */
.appdock-btn.on { background: color-mix(in srgb, var(--clay) 18%, transparent); color: var(--clay); box-shadow: inset 3px 0 0 var(--clay); }
.appdock-btn.on svg { color: var(--clay); }
.appdock-label { white-space: nowrap; }
/* collapsed: icons only, centred */
.appdock:not(.open) .appdock-label { display: none; }
.appdock:not(.open) .appdock-btn { justify-content: center; padding: 0; }
.appdock:not(.open) .appdock-exp { align-self: center; }
/* mobile handle + scrim (hidden on desktop) */
.appdock-handle { display: none; }
.appdock-scrim { display: none; }
@media (max-width: 760px) {
  /* the rail slides in as an overlay instead of reserving a gutter */
  body.has-appdock { padding-left: 0; }
  .appdock {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 60;
    box-shadow: 8px 0 30px -12px rgba(40, 30, 20, 0.5);
  }
  .appdock.mobile-open { transform: translateX(0); }
  .appdock-handle {
    position: fixed; left: 0; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 52px; padding: 0; z-index: 40;
    border: 1px solid var(--line); border-left: none; border-radius: 0 10px 10px 0;
    background: var(--raised); color: var(--muted); cursor: pointer;
  }
  .appdock-handle svg { width: 18px; height: 18px; }
  .appdock-scrim {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(30, 22, 14, 0.34); opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .appdock-scrim.show { display: block; opacity: 1; pointer-events: auto; }
}

.back {
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
  width: 2rem; height: 2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.back:hover { background: var(--surface); }

.crumbs { display: flex; align-items: center; gap: 0.35rem; flex: 0 1 auto; flex-wrap: wrap; min-width: 0; }
.bar-left { display: flex; align-items: center; gap: 0.5rem; flex: 0 1 auto; min-width: 0; }
.bar-modes { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
.bar-right { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; justify-content: flex-end; }
/* persistent search box: fills the middle of the condensed header, which also
   pushes the actions (Filters + account) flush to the right edge */
.search { position: relative; flex: 1 1 auto; min-width: 110px; display: flex; align-items: center; }
.crumb {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 500;
  text-transform: uppercase;   /* simulated small caps */
  letter-spacing: 0.07em;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
}
.crumb:last-child { color: var(--ink); font-weight: 700; }
.crumb:hover { background: var(--surface); }
.sep { color: var(--line); }

/* account pill: connection dot + (collapsible) username + caret. Click opens
   the account menu (status + sign out). */
.account {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  max-width: 14rem;
}
.account:hover { background: var(--raised); }
.account .uname {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.account .account-caret { width: 14px; height: 14px; color: var(--muted); flex: none; }
.account .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--muted); flex: none; }
.account[data-state="ok"]  .dot { background: var(--ok); }
.account[data-state="bad"] .dot { background: var(--bad); }
.account[data-state="checking"] .dot { animation: pulse 1.2s ease-in-out infinite; }

/* ---- content + list view ---- */
.content { padding: 1rem; max-width: 56rem; margin: 0 auto; }
/* content-filling views (library browser, Board) use the full width consistently */
body.view-wide .content { max-width: none; padding: 0.7rem 1rem; }
.loading { color: var(--muted); padding: 2rem 0; text-align: center; }

.list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--line);
}

.row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.9rem;
  background: var(--raised);
  border: none;
  font: inherit;
  color: var(--ink);
}
.row.is-folder { cursor: pointer; }
.row.is-folder:hover { background: var(--surface); }

.swatch {
  width: 0.85rem; height: 0.85rem;
  border-radius: 4px;
  background: var(--swatch, var(--muted));
  flex: none;
}

.badge {
  flex: none;
  min-width: 2.6rem;
  text-align: center;
  padding: 0.18rem 0.4rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--badge, var(--muted));
}

.name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { color: var(--muted); font-size: 0.75rem; flex: none; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .status[data-state="checking"] .dot { animation: none; }
}

/* ---- topbar user area ---- */
.user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;        /* push to the right, before the status badge */
  color: var(--muted);
  font-size: 0.85rem;
}
.user .uname { font-weight: 600; color: var(--ink); }
.logout {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 0.5rem;
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.logout:hover { background: var(--paper); }

/* the status badge sits at the far right; when a user is shown it no longer
   needs the auto margin, so neutralise it */
.user:not([hidden]) ~ .status { margin-left: 0; }

/* ---- sign-in page ---- */
.auth-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.auth-card {
  width: 100%;
  max-width: 22rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  box-shadow: 0 1px 2px rgba(44, 39, 31, 0.05), 0 8px 24px rgba(44, 39, 31, 0.06);
}
.eyebrow {
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--clay);
  font-weight: 700;
}
.auth-title { margin: 0 0 0.25rem; font-size: 1.5rem; color: var(--ink); }
.auth-sub { margin: 0 0 1.5rem; color: var(--muted); font-size: 0.9rem; }

.btn {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0.65rem;
  padding: 0.7rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { border-color: var(--muted); }
.btn.primary {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--on-accent);
}
.btn.primary:hover { background: color-mix(in srgb, var(--clay) 88%, #000); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.register { display: grid; gap: 0.6rem; }
.input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0.6rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
}
.input:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 20%, transparent);
}

.auth-msg { margin: 1rem 0 0; min-height: 1.2em; font-size: 0.85rem; color: var(--muted); }
.auth-msg[data-kind="bad"] { color: var(--clay); }
.auth-msg[data-kind="ok"]  { color: var(--moss); }

/* ---- folder toolbar + uploads ---- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.file-input { display: none; }
.toolbar .btn.upload-btn {
  width: auto;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
}
.toolbar-hint { color: var(--muted); font-size: 0.85rem; }
.toolbar-hint[data-kind="bad"] { color: var(--clay); }

/* drop target highlight */
.content.dropping {
  outline: 2px dashed var(--clay);
  outline-offset: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--clay) 6%, transparent);
}

/* ---- file rows (download links) + delete affordance ---- */
.row-wrap {
  display: flex;
  align-items: stretch;
  gap: 2px;
  background: var(--raised);
}
.row-wrap .row.is-file { flex: 1 1 auto; min-width: 0; }
.row.is-file {
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
}
.row.is-file:hover { background: var(--surface); }

.row-del {
  flex: none;
  width: 2.4rem;
  border: none;
  background: var(--raised);
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.row-wrap:hover .row-del,
.row-del:focus-visible { opacity: 1; }
.row-del:hover { color: var(--on-accent); background: var(--clay); }

/* keep delete reachable on touch devices (no hover) */
@media (hover: none) {
  .row-del { opacity: 1; }
}

/* ---- toolbar buttons ---- */
.toolbar .btn.toolbar-btn {
  width: auto;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
}

/* ---- full-window drop overlay ---- */
.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none; /* JS toggles inline display; this is a fallback default */
  place-items: center;
  background: color-mix(in srgb, var(--clay) 14%, transparent);
  backdrop-filter: blur(2px);
  pointer-events: none; /* never swallow the drop event itself */
}
.drop-overlay-msg {
  padding: 1.1rem 1.6rem;
  border: 2px dashed var(--clay);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(44, 39, 31, 0.15);
}

/* ---- placement step (drop → choose folder or lesson) ---- */
.place-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  /* The drop's destination chooser washes the app in blue. */
  background: color-mix(in srgb, #3a5f8a 42%, transparent);
  backdrop-filter: blur(3px);
  animation: place-fade 0.14s ease-out;
}
@keyframes place-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.place-surface {
  width: min(54rem, 100%);
  max-height: min(40rem, calc(100vh - 2.5rem));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(20, 30, 45, 0.4);
  overflow: hidden;
}
.place-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.place-title { font-weight: 700; font-size: 1.05rem; }
.place-count {
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--paper);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.place-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  width: 2rem;
  height: 2rem;
}
.place-close:hover { background: var(--paper); color: var(--ink); }
.place-body {
  display: flex;
  min-height: 0;
  flex: 1;
}
.place-divider {
  width: 1px;
  background: var(--line);
  flex: 0 0 auto;
}
.place-pane {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem;
  gap: 0.7rem;
  overflow: hidden;
}
.place-pane-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ink);
}
.place-pane-head svg { width: 1.2rem; height: 1.2rem; color: var(--clay); }
.place-lessons .place-pane-head svg { color: var(--moss); }
.place-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.82rem;
}
.place-crumb {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
}
.place-crumb:hover { background: var(--paper); color: var(--ink); }
.place-crumb-sep { color: var(--line); }
.place-list,
.place-lesson-list {
  flex: 1;
  min-height: 6rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.4rem;
  background: var(--raised);
}
.place-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.5rem 0.55rem;
  border-radius: 9px;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
}
.place-row:hover { background: var(--paper); }
.place-row-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  background: var(--moss);
  flex: 0 0 auto;
}
.place-row-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.place-row-chev { color: var(--muted); display: flex; }
.place-row-chev svg { width: 1rem; height: 1rem; }
.place-empty {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.6rem;
  margin: 0;
}
.place-type-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.place-type-chip {
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
}
.place-search,
.place-input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--raised);
  color: var(--ink);
  font: inherit;
}
.place-go {
  border: none;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  background: var(--moss);
  color: var(--on-accent);
  font-weight: 600;
  cursor: pointer;
}
.place-go:hover { filter: brightness(1.05); }
.place-go:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: default;
}
.place-files .place-go { background: var(--clay); }
.place-new {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 0.5rem;
  cursor: pointer;
  font: inherit;
}
.place-new.on,
.place-new:hover { color: var(--ink); border-color: var(--moss); }
.place-new-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.3rem;
}
.place-form-label { font-size: 0.8rem; color: var(--muted); }
.place-types { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.place-type-toggle {
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.place-type-toggle.on {
  background: var(--moss);
  color: var(--on-accent);
  border-color: var(--moss);
}
.place-custom-row { display: flex; gap: 0.4rem; }
.place-custom { flex: 1; }
.place-custom-add {
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
  border-radius: 9px;
  padding: 0 0.8rem;
  cursor: pointer;
  font: inherit;
}
@media (max-width: 760px) {
  .place-body { flex-direction: column; overflow-y: auto; }
  .place-divider { width: auto; height: 1px; }
  .place-list,
  .place-lesson-list { min-height: 5rem; }
}

/* ---- schedule editor: lesson picker ---- */
.sched-lesson-pick {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--raised);
  color: var(--muted);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  font: inherit;
}
.sched-lesson-pick.on { color: var(--ink); border-color: var(--moss); }
.sched-lesson-panel {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.sched-lesson-list {
  max-height: 11rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* ---- lesson badges on schedule cards / chips ---- */
.sched-card-lesson,
.wk-chip-lesson {
  display: inline-flex;
  align-items: center;
  color: var(--moss);
}
.sched-card-lesson { margin-left: 0.35rem; }
.sched-card-lesson svg { width: 0.95rem; height: 0.95rem; }
.wk-chip-lesson { margin-left: auto; }
.wk-chip-lesson svg { width: 0.7rem; height: 0.7rem; }

/* ---- Lessons workspace module (recent lessons + done/planned) ---- */
.lessons-mod-new {
  display: block; width: 100%; margin: 0 0 0.4rem;
  padding: 0.4rem 0.6rem; border: 1px dashed var(--line); border-radius: 8px;
  background: transparent; color: var(--clay); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.lessons-mod-new:hover { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 8%, transparent); }
.lesson-create-pop { width: 260px; max-width: 78vw; }
.lessons-mod-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.2rem;
  overflow-y: auto;
  height: 100%;
}
.lessons-mod-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--raised);
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.lessons-mod-card:hover { border-color: var(--moss); }
.lessons-mod-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.lessons-mod-name { font-weight: 600; }
.lessons-mod-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.lessons-mod-usage {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.82rem;
}
.lessons-mod-usage-cap {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
}
.lessons-mod-usage-cap.is-done { background: color-mix(in srgb, var(--moss) 22%, transparent); color: var(--moss); }
.lessons-mod-usage-cap.is-planned { background: color-mix(in srgb, var(--ochre) 24%, transparent); color: var(--ochre); }
.lessons-mod-usage-names { color: var(--ink); }
.lessons-mod-usage-names.is-empty { color: var(--muted); }

/* ---- reusable-lesson hub ---- */
.lesson-hub-types { margin: 0 0 0.75rem; }
.hub-files-host { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.hub-files { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
.hub-file {
  display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%;
  padding: 0.3rem 0.55rem; border: 1px solid var(--line);
  border-radius: 0.5rem; background: var(--raised);
  cursor: pointer; font: inherit; color: var(--ink); text-align: left;
}
.hub-file:hover { border-color: var(--clay); }
.hub-file .badge { flex: 0 0 auto; }
.hub-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-open-folder {
  padding: 0.35rem 0.7rem; border: 1px solid var(--line);
  border-radius: 0.5rem; background: transparent; cursor: pointer;
  font: inherit; color: var(--clay);
}
.hub-open-folder:hover { background: var(--surface); }
.hub-classes { display: flex; flex-direction: column; gap: 0.4rem; }
/* embedded lesson videos */
.hub-videos-host { display: flex; flex-direction: column; gap: 0.6rem; }
.hub-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 0.6rem; }
.hub-video { display: flex; flex-direction: column; gap: 0.25rem; }
.hub-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.hub-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hub-video-meta { display: flex; align-items: center; gap: 0.4rem; }
.hub-video-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; color: var(--muted); }
.hub-video-rm {
  flex: none; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--muted); font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.hub-video-rm:hover { color: var(--bad); border-color: var(--bad); }
.hub-video-add { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hub-video-url { flex: 2 1 200px; }
.hub-video-titlein { flex: 1 1 120px; }

/* ---- lessons tracker grid (Workspace "Lessons" tab) ---- */
.tracker-host { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.6rem; height: 100%; box-sizing: border-box; }
.tracker-scroll { overflow: auto; flex: 1 1 auto; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--raised); }
.tracker-grid { border-collapse: separate; border-spacing: 0; font-size: 0.85rem; }
.tracker-grid th, .tracker-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.tracker-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 0.4rem 0.55rem; font-weight: 600; white-space: nowrap; }
.tracker-corner { position: sticky; left: 0; z-index: 3; text-align: left; }
.tracker-colh { text-align: center; }
.tracker-rowh { position: sticky; left: 0; z-index: 1; background: var(--raised); text-align: left; padding: 0; }
.tracker-lesson { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; width: 100%; padding: 0.4rem 0.55rem; background: transparent; border: none; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.tracker-lesson:hover { background: var(--surface); }
.tracker-lesson-name { font-weight: 500; white-space: nowrap; }
.tracker-row-archived { opacity: 0.6; }
.tracker-arch-badge {
  margin-left: 0.35rem; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.28rem;
}
.tracker-cell { width: 2.2rem; height: 2.2rem; text-align: center; vertical-align: middle; color: var(--raised); }
.tracker-cell.is-done { background: #DCE1CC; background: color-mix(in srgb, var(--moss) 22%, var(--raised)); color: var(--moss); }
.tracker-cell.is-done svg { width: 1.05rem; height: 1.05rem; vertical-align: middle; }
.tracker-cell.is-planned { background: #F0E4C6; background: color-mix(in srgb, var(--ochre) 18%, var(--raised)); }
.tracker-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ochre); vertical-align: middle; }
.tracker-legend { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--muted); }
.tracker-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.tracker-swatch { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 0.25rem; border: 1px solid var(--line); }
.tracker-swatch.is-done { background: #C3CDA6; background: color-mix(in srgb, var(--moss) 40%, var(--raised)); }
.tracker-swatch.is-planned { background: #E6CE93; background: color-mix(in srgb, var(--ochre) 40%, var(--raised)); }
/* compact tracker (dock/canvas module): minimalist, tighter, no border chrome */
.tracker-mod-host { height: 100%; }
.tracker-scroll.tracker-compact { border: none; border-radius: 0; background: transparent; height: 100%; font-size: 0.78rem; }
.tracker-compact .tracker-grid thead th { padding: 0.25rem 0.4rem; background: var(--raised); }
.tracker-compact .tracker-rowh { background: var(--raised); }
.tracker-compact .tracker-lesson { padding: 0.25rem 0.4rem; }
.tracker-compact .tracker-cell { width: 1.7rem; height: 1.7rem; }
.tracker-compact .tracker-cell.is-done svg { width: 0.85rem; height: 0.85rem; }
.tracker-compact .tracker-dot { width: 0.5rem; height: 0.5rem; }

/* ---- upload progress panel ---- */
.upanel {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  width: min(22rem, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(44, 39, 31, 0.18);
  overflow: hidden;
}
.upanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.upanel-title { font-weight: 600; font-size: 0.9rem; }
.upanel-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.upanel-close:hover { color: var(--ink); }
.upanel-list { max-height: 16rem; overflow-y: auto; }

.uitem { padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--line); }
.uitem:last-child { border-bottom: none; }
.uitem-name {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uitem-bar {
  height: 5px;
  margin: 0.35rem 0 0.2rem;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.uitem-fill {
  height: 100%;
  width: 0%;
  background: var(--clay);
  border-radius: 999px;
  transition: width 0.15s ease;
}
.uitem[data-state="done"] .uitem-fill { background: var(--moss); }
.uitem[data-state="failed"] .uitem-fill { background: #b0473a; }
.uitem-status { font-size: 0.72rem; color: var(--muted); min-height: 0.9em; }
.uitem[data-state="failed"] .uitem-status { color: var(--clay); }

/* ---- inline create / rename input ---- */
.inline-row { background: var(--raised); }
.inline-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--clay);
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
  outline: none;
}
.inline-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 25%, transparent); }

/* ---- right-click context menu ---- */
.ctxmenu {
  position: fixed;
  z-index: 70;
  min-width: 11rem;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(44, 39, 31, 0.18);
  display: flex;
  flex-direction: column;
}
.ctxitem {
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}
.ctxitem:hover { background: var(--paper); }
.ctxitem.danger { color: var(--clay); }
.ctxitem.danger:hover { background: var(--clay); color: var(--on-accent); }

/* ---- grid / icon view ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}
.card-wrap { position: relative; display: flex; }
.card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 0.6rem 0.8rem;
  background: var(--raised);
  border: var(--cell-border-width, 1px) var(--cell-border-style, solid) var(--line);
  border-radius: 12px;
  font: inherit;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.card.is-folder:hover,
.card.is-file:hover { background: var(--surface); }

.card-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
}
/* folder glyph drawn in CSS, tinted by the folder's colour */
.folder-glyph {
  position: relative;
  background: var(--swatch, var(--muted));
  border-radius: 4px 6px 6px 6px;
  opacity: 0.92;
}
.folder-glyph::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 4px;
  width: 40%;
  height: 8px;
  background: var(--swatch, var(--muted));
  border-radius: 3px 3px 0 0;
}
.card .badge { font-size: 0.8rem; padding: 0.3rem 0.45rem; }

.card-name {
  width: 100%;
  font-size: 0.85rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.card-meta { font-size: 0.72rem; color: var(--muted); }

.card-del {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.card-wrap:hover .card-del,
.card-del:focus-visible { opacity: 1; }
.card-del:hover { background: var(--clay); color: var(--on-accent); }
@media (hover: none) { .card-del { opacity: 1; } }

/* Renaming inside a grid tile: let the input spill past the tile's edges so
   a long filename is actually visible while you edit it. */
.inline-card { justify-content: center; overflow: visible; z-index: 6; }
.inline-card .inline-input {
  width: max(100%, 230px);
  flex: none;
  background: var(--raised);
  box-shadow: 0 6px 18px -8px rgba(20, 14, 8, 0.5);
}

/* ---- popover (grid style, colour picker) ---- */
.popover {
  position: fixed;
  z-index: 70;
  padding: 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(44, 39, 31, 0.18);
}
.stack { display: flex; flex-direction: column; gap: 0.35rem; }
.popover-label { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
.segmented { display: flex; gap: 0.25rem; }
.seg {
  flex: 1;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--raised);
  color: var(--ink);
  cursor: pointer;
}
.seg.on { background: var(--clay); color: var(--on-accent); border-color: var(--clay); }

/* ---- colour picker ---- */
.colorpicker { display: flex; gap: 0.9rem; }
.swatches {
  display: grid;
  grid-template-columns: repeat(2, 1.6rem);
  gap: 0.4rem;
  align-content: start;
}
.swatch-btn {
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}
.swatch-btn.on { box-shadow: 0 0 0 2px var(--ink); }
.custom-color { display: flex; flex-direction: column; gap: 0.5rem; min-width: 9rem; }
.native-color {
  width: 100%;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--raised);
  cursor: pointer;
  padding: 0.15rem;
}
.hex-input {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
}
.hex-input:focus { border-color: var(--clay); }
.custom-actions { display: flex; gap: 0.4rem; }
.custom-actions .btn { flex: 1; }

/* --- map (treemap) view ------------------------------------------------- */
/* The stage fills the content column; its height is set inline to the
   viewport. Boxes are absolutely positioned by the squarify layout in JS.
   --cell-border-width / --cell-border-style are set on the stage by
   applyGridStyle() and inherit down to every box, so the frame thickness and
   dash style match the grid controls. --box-color is set per box. */
.map-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper);
}

.map-box {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  border: var(--cell-border-width, 1px) var(--cell-border-style, solid)
    var(--box-color, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--box-color, var(--muted)) 8%, var(--surface));
  cursor: pointer;
  transition: filter 0.08s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.map-box.is-file {
  background: color-mix(in srgb, var(--box-color, var(--muted)) 16%, var(--surface));
}
.map-box:hover {
  filter: brightness(1.04);
}

.map-label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  height: 20px; /* keep in sync with MAP_LABEL_H in app.js */
  padding: 0.1rem 0.4rem;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.map-label-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-label-meta {
  font-size: 0.68rem;
  color: var(--muted);
  flex: none;
}

.map-body {
  position: absolute;
  overflow: hidden;
}

/* --- file preview (takes over the content area) ------------------------- */
.preview-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}

/* The body fills the whole stage; the bar floats on top of it. */
.preview-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

/* Hover-reveal control bar: hidden until you hover the preview (or focus a
   control with the keyboard, or tap on touch, which toggles .show-controls). */
.preview-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--paper) 92%, transparent),
    transparent
  );
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.preview-stage:hover .preview-bar,
.preview-stage:focus-within .preview-bar,
.preview-stage.show-controls .preview-bar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.preview-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
  cursor: pointer;
}
.preview-back:hover { background: var(--surface); }

.preview-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-dl {
  flex: none;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.85rem;
}
.preview-dl:hover { background: var(--surface); }

/* Image: contain within the stage, centred. */
.preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* PDF: fill the stage. */
.preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--raised);
}

/* Text & code: scrollable, monospace, soft paper background. */
.preview-code {
  margin: 0;
  align-self: stretch;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  padding: 2.4rem 1.1rem 1.1rem; /* top room for the hover bar */
  background: var(--raised);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  tab-size: 4;
  white-space: pre;
}

/* Extracted document text (.docx / .rtf): wrapped, readable prose. */
.preview-prose {
  margin: 0;
  align-self: stretch;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  padding: 2.6rem clamp(1rem, 6vw, 4rem) 2rem;
  background: var(--raised);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* highlight.js theme, mapped onto Atelier's palette so code feels native. */
.preview-code .hljs { color: var(--ink); background: transparent; }
.hljs-comment, .hljs-quote { color: var(--muted); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section,
.hljs-meta, .hljs-link { color: var(--clay); }
.hljs-string, .hljs-attr, .hljs-addition, .hljs-regexp,
.hljs-symbol, .hljs-bullet, .hljs-template-tag { color: var(--moss); }
.hljs-number, .hljs-built_in, .hljs-builtin-name,
.hljs-type, .hljs-params { color: var(--ochre); }
.hljs-title, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--plum); }
.hljs-variable, .hljs-template-variable, .hljs-tag, .hljs-attribute { color: var(--slate); }
.hljs-deletion { color: var(--clay); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* --- drag-to-move affordances ------------------------------------------- */
/* The item being dragged fades back; valid drop targets "lift" toward you. */
.map-box.dragging {
  opacity: 0.4;
}
.map-box.is-folder.drag-over {
  transform: scale(1.04);
  filter: brightness(1.06);
  border-color: var(--clay);
  box-shadow: 0 0 0 2px var(--clay), 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 5;
}
/* Dropping on empty stage area moves into the current folder. */
.map-stage.drag-over {
  box-shadow: inset 0 0 0 3px var(--clay);
}
/* Breadcrumbs accept drops too, for moving an item up and out. */
.crumb.drag-over {
  background: var(--clay);
  color: var(--paper);
  border-radius: 6px;
}

/* --- "go up a level" affordances ---------------------------------------- */
/* Map empty state doubles as a drop target. */
.map-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  pointer-events: none;
}

/* The up-lane appears only while dragging (body.moving). On desktop it's a strip
   down the left edge of the map; on narrow screens it becomes a short bar across
   the top. Hover it to climb a level, or drop on it to move the item up. */
.map-up-lane {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 54px;
  z-index: 6;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: color-mix(in srgb, var(--clay) 14%, var(--surface));
  border-right: 2px dashed var(--clay);
  color: var(--clay);
  cursor: alias;
}
body.moving .map-up-lane {
  display: flex;
}
.map-up-icon {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
.map-up-label {
  font-size: 0.6rem;
  max-width: 48px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}
.map-up-lane.drag-over {
  background: var(--clay);
  color: var(--paper);
  box-shadow: inset 0 0 0 2px var(--clay);
}

/* List/grid up item. */
.row.is-up,
.card.is-up {
  color: var(--muted);
}
.row.is-up .up-ic,
.card.is-up .up-ic {
  font-weight: 700;
  color: var(--clay);
  margin-right: 0.4rem;
}
.card.is-up {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.card.is-up .up-ic {
  font-size: 1.5rem;
  margin: 0;
}
.row.is-up.drag-over,
.card.is-up.drag-over {
  background: var(--clay);
  color: var(--paper);
}
.row.is-up.drag-over .up-ic,
.card.is-up.drag-over .up-ic {
  color: var(--paper);
}

/* Dropping on empty list/grid space moves into the current folder. */
.list.drag-over,
.grid.drag-over {
  box-shadow: inset 0 0 0 2px var(--clay);
  border-radius: 10px;
}
.empty-hint {
  color: var(--muted);
  padding: 1.4rem 0.4rem;
  text-align: center;
}

/* The in-flow mobile bar sits above the stage and is hidden until dragging. */
.map-up-bar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 38px;
  flex: none;
  margin-bottom: 0.5rem;
  border: 2px dashed var(--clay);
  border-radius: 10px;
  background: color-mix(in srgb, var(--clay) 14%, var(--surface));
  color: var(--clay);
  cursor: alias;
}
.map-up-bar.drag-over {
  background: var(--clay);
  color: var(--paper);
}

/* Mobile: hide the left lane; use the in-flow top bar (which pushes the map
   down) while dragging. */
@media (max-width: 560px) {
  .map-up-lane {
    display: none !important;
  }
  body.moving .map-up-bar {
    display: flex;
  }
  .map-up-bar .map-up-icon {
    font-size: 1.1rem;
  }
  .map-up-bar .map-up-label {
    font-size: 0.72rem;
    max-width: 60vw;
  }
}

/* --- search ------------------------------------------------------------- */
.search { display: flex; align-items: center; flex: 0 0 auto; position: relative; }
.search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.search-toggle:hover { color: var(--ink); }
.search-toggle svg { width: 18px; height: 18px; }
.search-input {
  flex: 1 1 auto; width: auto; min-width: 0; opacity: 1;
  margin-left: 0.4rem; padding: 0 1.9rem 0 0.6rem;
  height: 36px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--raised); color: var(--ink);
  font: inherit; font-size: 0.9rem;
  pointer-events: auto;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 14%, transparent); }
.search-clear {
  display: none;
  position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%);
  width: 1.4rem; height: 1.4rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 1.15rem; line-height: 1;
}
.search.has-query .search-clear {
  display: inline-flex; align-items: center; justify-content: center;
}
.search-clear:hover { color: var(--ink); background: var(--surface); }

@media (max-width: 560px) {
  .crumbs { flex: 1 1 auto; min-width: 0; }
  .search.open .search-input { width: min(58vw, 240px); }
}

/* --- labels ------------------------------------------------------------- */
.label-ic {
  display: inline-flex; align-items: center; flex: none;
  color: var(--label-color, var(--muted));
}
.label-ic svg { width: 16px; height: 16px; display: block; }
.row .label-ic { margin-left: 0.35rem; }
.card { position: relative; }
.card-label { position: absolute; top: 0.45rem; right: 0.5rem; }
.card-label svg { width: 18px; height: 18px; }
.map-label-ic { margin-left: 0.25rem; }
.map-label-ic svg { width: 13px; height: 13px; display: block; }

.labelpicker { display: flex; flex-direction: column; gap: 0.55rem; }
.label-options { display: flex; gap: 0.35rem; }
.label-opt {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--label-color, var(--muted)); cursor: pointer;
}
.label-opt svg { width: 19px; height: 19px; }
.label-opt:hover { background: var(--raised); }
.label-opt.on {
  border-color: var(--label-color, var(--clay));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--label-color, var(--clay)) 32%, transparent);
}

.label-ic { cursor: pointer; }
.label-ic:hover { filter: brightness(1.15); }

.map-label-ic { pointer-events: auto; cursor: pointer; }

/* --- header center zone: search + filter chips -------------------------- */
.center { display: flex; align-items: center; gap: 0.6rem; flex: 0 1 auto; min-width: 0; }
.filter-chips { display: flex; align-items: center; gap: 0.25rem; flex: 0 1 auto; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.chip svg { width: 17px; height: 17px; }
.chip:hover { color: var(--label-color, var(--ink)); border-color: var(--label-color, var(--line)); }
.chip.on {
  color: var(--label-color, var(--clay));
  border-color: var(--label-color, var(--clay));
  background: color-mix(in srgb, var(--label-color, var(--clay)) 16%, var(--surface));
}

@media (max-width: 680px) {
  /* Chips stay visible and wrap in the filter bar; just tighten spacing. */
  .filter-chips { gap: 0.15rem; }
  .chip { width: 27px; height: 27px; }
  .chip svg { width: 15px; height: 15px; }
}

/* --- global search results --------------------------------------------- */
.results-head {
  font-family: var(--font-display, inherit);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0.2rem 0 0.6rem;
}
.results-list { gap: 0.15rem; }
.result-row { align-items: center; }
.result-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.result-main .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-path {
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- map: thicker folder frames + clearer nesting ---------------------- */
.map-box.is-folder {
  border-width: 2px;
  background: color-mix(in srgb, var(--box-color, var(--muted)) 5%, var(--surface));
}

/* --- tags: filter chips, item chips, picker ----------------------------- */
.chip-sep {
  width: 1px; height: 18px; flex: none;
  background: var(--line); margin: 0 0.15rem;
}
.tag-chip {
  width: auto; padding: 0 0.55rem; gap: 0;
  font-size: 0.76rem; font-weight: 600; white-space: nowrap;
  color: var(--tag-color, var(--muted));
  border-color: color-mix(in srgb, var(--tag-color, var(--muted)) 40%, var(--line));
}
.tag-chip:hover {
  color: var(--tag-color, var(--ink));
  border-color: var(--tag-color, var(--line));
}
.tag-chip.on {
  color: var(--tag-color, var(--clay));
  border-color: var(--tag-color, var(--clay));
  background: color-mix(in srgb, var(--tag-color, var(--clay)) 16%, var(--surface));
}
.filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.filter-chips::-webkit-scrollbar { display: none; }

/* small #name chips shown on items */
.item-tag {
  display: inline-flex; align-items: center;
  padding: 0 0.4rem; height: 1.15rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; white-space: nowrap;
  color: var(--tag-color, var(--muted));
  background: color-mix(in srgb, var(--tag-color, var(--muted)) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tag-color, var(--muted)) 38%, transparent);
}
/* tags may shrink — the item's NAME wins the space fight on small screens */
.row-tags { display: inline-flex; gap: 0.25rem; margin-left: 0.35rem; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.row-tags-more, .place-type-more {
  flex: none; font-size: 0.68rem; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 0.35rem;
  align-self: center; white-space: nowrap;
}
/* the "Apps" group heading in the account menu */
.account-apps-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); padding: 6px 10px 2px;
}
/* App rows at the top of search results */
.app-result-ic {
  flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: color-mix(in srgb, var(--clay) 12%, transparent); color: var(--clay);
}
.app-result-ic svg { width: 17px; height: 17px; }
.card-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.3rem; }

/* tag picker popover */
.tagpicker { display: flex; flex-direction: column; gap: 0.6rem; min-width: 210px; max-width: 290px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.3rem; max-height: 180px; overflow-y: auto; }
.tag-empty { font-size: 0.8rem; color: var(--muted); }
.tag-opt {
  padding: 0.18rem 0.55rem; border-radius: 999px; cursor: pointer;
  font-size: 0.78rem; font-weight: 600;
  color: var(--tag-color, var(--muted)); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--tag-color, var(--muted)) 35%, var(--line));
}
.tag-opt:hover { background: var(--raised); }
.tag-opt.on {
  background: color-mix(in srgb, var(--tag-color, var(--muted)) 18%, var(--surface));
  border-color: var(--tag-color, var(--clay));
  box-shadow: 0 0 0 1px var(--tag-color, var(--clay)) inset;
}
.tag-create {
  display: flex; align-items: center; gap: 0.4rem;
  border-top: 1px solid var(--line); padding-top: 0.55rem;
}
.tag-color-input {
  width: 32px; height: 32px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer;
}
.tag-name-input {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 0.5rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--raised); color: var(--ink); font: inherit; font-size: 0.85rem;
}
.tag-name-input:focus { outline: none; border-color: var(--clay); }

/* --- filter bar (chips live below the header now, and wrap) -------------- */
.filterbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}
.chip-manage { color: var(--muted); }
.chip-manage svg { width: 15px; height: 15px; }
.chip-manage:hover { color: var(--ink); border-color: var(--line); background: var(--raised); }

/* When space is tight, collapse the breadcrumb to just the current folder
   (the rest stays reachable via the back button) so it never gets clipped, and
   shrink the account pill to its dot + caret. */
@media (max-width: 680px) {
  .topbar { gap: 0.5rem; }
  .crumbs { flex-wrap: nowrap; overflow: hidden; }
  .crumb:not(:last-child) { display: none; }
  .sep { display: none; }
  .crumb:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .account .uname { display: none; }
}

/* --- tag manager popover ------------------------------------------------ */
.tagmanager { display: flex; flex-direction: column; gap: 0.4rem; min-width: 230px; max-width: 300px; }
.tagman-title { font-weight: 600; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.15rem; }
.tagman-row { display: flex; align-items: center; gap: 0.35rem; }
.tagman-color {
  width: 28px; height: 28px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer;
}
.tagman-hash { color: var(--muted); font-weight: 600; }
.tagman-name {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 0.45rem;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--raised); color: var(--ink); font: inherit; font-size: 0.85rem;
}
.tagman-name:focus { outline: none; border-color: var(--clay); }
.tagman-del {
  flex: none; width: 28px; height: 28px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  font-size: 1.15rem; line-height: 1;
}
.tagman-del:hover {
  color: var(--bad, #b3402e); border-color: var(--bad, #b3402e);
  background: color-mix(in srgb, var(--bad, #b3402e) 10%, var(--surface));
}

/* --- typography: simulated small caps for headers, weight mix elsewhere -- */
/* Manrope has no true small-caps glyphs, so "small caps" = uppercase + tracking
   + a heavier weight to keep the colour even. Used on header/label chrome only,
   never on file or folder names in the listing (those stay as typed). */
.smallcaps {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* search-results heading reads as a small-caps label */
.results-head {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

/* gentle weight hierarchy: names sit a touch heavier than their metadata */
.row .name,
.card-name { font-weight: 500; }
.meta,
.card-meta,
.map-label-meta,
.result-path { font-weight: 400; }

/* --- account dropdown menu ---------------------------------------------- */
.account-menu { display: flex; flex-direction: column; gap: 0.05rem; min-width: 180px; }
.account-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 0.1rem 0.4rem 0.25rem;
}
.account-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.account-status .dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--muted); flex: none;
}
.account-status[data-state="ok"]  .dot { background: var(--ok); }
.account-status[data-state="bad"] .dot { background: var(--bad); }
.account-status[data-state="checking"] .dot { animation: pulse 1.2s ease-in-out infinite; }
.account-sep { height: 1px; background: var(--line); margin: 0.35rem 0; }
.account-signout {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 7px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
}
.account-signout:hover { background: var(--surface); color: var(--bad); }

/* --- "go to location" on search/filter results -------------------------- */
.go-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
  margin-left: 0.4rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.go-loc svg { width: 13px; height: 13px; }
.result-row:hover .go-loc,
.result-row:focus-within .go-loc { opacity: 1; }
.go-loc:hover { color: var(--clay); border-color: var(--clay); background: var(--raised); }
/* touch devices have no hover, so keep it visible there */
@media (hover: none) {
  .go-loc { opacity: 1; }
}

/* brief highlight when you arrive at an item via "go to location" */
.flash { animation: flash-bg 1.6s ease-out; }
@keyframes flash-bg {
  0%   { background-color: color-mix(in srgb, var(--ochre) 48%, transparent); }
  55%  { background-color: color-mix(in srgb, var(--ochre) 32%, transparent); }
  100% { background-color: transparent; }
}

.result-row { cursor: pointer; }
.result-row:hover { background: var(--surface); }
.result-row:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
@media (max-width: 560px) {
  .go-loc span { display: none; } /* icon-only on small screens */
  .go-loc { opacity: 1; }
}

/* --- whole-database map (sections as columns) --------------------------- */
.wholemap {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}
.map-col {
  flex: 1 0 300px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.map-col-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 8px;
  padding: 0.3rem 0.1rem 0.5rem;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 2px solid var(--col-color, var(--line));
}
.map-col.is-starred .map-col-head { color: var(--ochre); }
.map-col-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.map-empty-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

/* --- condensed map: readable text tiles on narrow screens --------------- */
.map-stage.condensed { overflow-y: auto; overflow-x: hidden; padding: 8px; }
.map-col-body.condensed { overflow-y: auto; }

.map-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.map-tile {
  flex: 1 1 130px;
  min-width: 130px;
  min-height: 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  position: relative;
  cursor: pointer;
  border: var(--cell-border-width, 1px) var(--cell-border-style, solid)
    var(--box-color, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--box-color, var(--muted)) 8%, var(--surface));
  transition: filter 0.08s ease;
}
.map-tile.is-file {
  background: color-mix(in srgb, var(--box-color, var(--muted)) 16%, var(--surface));
}
.map-tile:hover { filter: brightness(1.04); }
.map-tile-name {
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.map-tile-meta {
  margin-top: auto;
  font-size: 0.7rem;
  color: var(--muted);
}
.map-tile-ic { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; }

/* whole-database map, condensed: stack sections vertically, scroll down */
.wholemap.condensed {
  flex-direction: column;
  gap: 18px;
  overflow-x: hidden;
  overflow-y: auto;
}
.wholemap.condensed .map-col { flex: none; width: 100%; min-width: 0; }
.wholemap.condensed .map-col-body { height: auto; overflow: visible; }

/* ======================= to-do mode ===================================== */
.todo-screen { max-width: 720px; margin: 0 auto; }

.todo-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.todo-back {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.2rem 0.3rem 0.2rem 0;
  border-radius: 7px;
}
.todo-back svg { width: 16px; height: 16px; }
.todo-back:hover { color: var(--clay); }
.todo-title-h {
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.todo-bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.todo-sort {
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}
.todo-add-btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--clay);
  background: var(--clay);
  color: var(--raised);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.todo-add-btn:hover { filter: brightness(1.05); }

/* --- add / edit form --- */
.todo-form {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.todo-f-title {
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  width: 100%;
  box-sizing: border-box;
}
.todo-f-title:focus,
.todo-f-note:focus,
.todo-f-date:focus,
.todo-f-time:focus,
.todo-sort:focus { outline: none; border-color: var(--clay); }
.todo-f-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-right: 0.2rem;
}
.todo-f-prio { display: flex; align-items: center; gap: 0.4rem; }
.todo-fprio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.todo-fprio-dot.p1 { --c: var(--ochre); }
.todo-fprio-dot.p2 { --c: var(--clay); }
.todo-fprio-dot.p3 { --c: var(--bad); }
.todo-fprio-dot:hover { border-color: var(--c); }
.todo-fprio-dot.on { background: var(--c); border-color: var(--c); }
.todo-f-fields { display: flex; flex-direction: column; gap: 0.6rem; }
.todo-f-note {
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  width: 100%;
  box-sizing: border-box;
}
.todo-f-dt { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.todo-f-date,
.todo-f-time {
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}
.todo-f-actions { display: flex; gap: 0.5rem; }
.todo-f-save {
  font: inherit;
  font-weight: 500;
  border: 1px solid var(--clay);
  background: var(--clay);
  color: var(--raised);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.todo-f-cancel {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

/* --- task list --- */
.todo-items { display: flex; flex-direction: column; gap: 0.45rem; }
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--prio, var(--line));
  cursor: pointer;
}
.todo-item:hover { background: var(--surface); }
.todo-check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.todo-item.has-prio .todo-check { border-color: var(--prio); }
.todo-check:hover { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 16%, transparent); }
.todo-check svg { width: 12px; height: 12px; }
.todo-check.done { border-color: var(--moss); background: var(--moss); color: var(--raised); }
.todo-main { flex: 1 1 auto; min-width: 0; }
.todo-item-title {
  position: relative;
  font-size: 0.95rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.todo-item-title::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.todo-item.completing .todo-item-title::after { transform: scaleX(1); }
.todo-item.completing { opacity: 0.5; transition: opacity 0.3s ease; }
.todo-sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.todo-due { color: var(--slate); }
.todo-due.overdue { color: var(--bad); font-weight: 500; }
.todo-note { color: var(--muted); }
.todo-item-actions {
  display: flex;
  gap: 0.2rem;
  flex: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.todo-item:hover .todo-item-actions,
.todo-item:focus-within .todo-item-actions { opacity: 1; }
@media (hover: none) { .todo-item-actions { opacity: 1; } }
.todo-ic {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0.2rem;
  border-radius: 6px;
  display: inline-flex;
}
.todo-ic svg { width: 15px; height: 15px; }
.todo-ic:hover { color: var(--clay); background: var(--paper); }

/* completed section */
.todo-completed { margin-top: 1.4rem; }
.todo-completed-headrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.3rem;
  margin-bottom: 0.5rem;
}
.todo-completed-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0;
}
.todo-comp-caret { display: inline-flex; transition: transform 0.15s ease; }
.todo-comp-caret svg { width: 13px; height: 13px; transform: rotate(180deg); }
.todo-comp-caret.open svg { transform: rotate(-90deg); }
.todo-comp-count {
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.7rem;
}
.todo-clear {
  margin-left: auto;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
}
.todo-clear:hover { color: var(--bad); }
.todo-item.is-done { cursor: default; border-left-color: var(--line); }
.todo-item.is-done .todo-item-title { color: var(--muted); text-decoration: line-through; }
.todo-empty,
.todo-none { color: var(--muted); font-size: 0.85rem; padding: 1.2rem 0.4rem; text-align: center; }
.todo-none { padding: 0.8rem; }

/* --- to-do toggle in the filter bar + the item due/priority picker ------- */
.todo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  margin-right: 0.35rem;
}
.todo-toggle svg { width: 14px; height: 14px; }
.todo-toggle:hover { color: var(--clay); border-color: var(--clay); }
.todo-toggle.on { background: var(--clay); border-color: var(--clay); color: var(--raised); }

.todo-picker { display: flex; flex-direction: column; gap: 0.6rem; min-width: 210px; }
.todo-picker-h { font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.todo-picker .todo-f-dt { gap: 0.4rem; }

/* --- swipe gestures on task rows (touch) -------------------------------- */
.todo-row { position: relative; overflow: hidden; border-radius: 10px; }
.todo-row .todo-item {
  position: relative;
  z-index: 2;
  touch-action: pan-y; /* vertical scroll stays native; we handle horizontal */
}
.todo-swipe-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  color: var(--raised);
}
.todo-swipe-bg.complete {
  background: var(--moss);
  justify-content: flex-start;
  padding-left: 1.1rem;
}
.todo-swipe-bg.complete svg { width: 20px; height: 20px; }
.todo-row-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  opacity: 0; /* only revealed by a left-swipe, never during complete/reopen */
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.todo-row.swiping-left .todo-row-actions { opacity: 1; pointer-events: auto; }
.todo-row-del {
  width: 88px;
  border: none;
  background: var(--bad);
  color: var(--raised);
  font: inherit;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
}
.todo-row-del:hover { filter: brightness(1.05); }

/* --- "flagged for to-do" badge on browse rows + results ----------------- */
.due-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
}
.due-prio { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.due-text {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: var(--slate);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.45rem 0.05rem 0.35rem;
  white-space: nowrap;
}
.due-text svg { width: 11px; height: 11px; opacity: 0.8; }
.due-text.overdue { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.card-due { margin-top: 0.25rem; }

/* the flagged filter chip uses the shared .chip styles; tint when active */
.flag-chip.on { color: var(--raised); background: var(--ochre); border-color: var(--ochre); }

/* ======================= status board (kanban) ========================== */
.board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  align-items: stretch;
}
.board-col {
  flex: 1 0 280px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: color-mix(in srgb, var(--col-color, var(--line)) 6%, var(--surface));
  border: 1px solid var(--line);
  border-top: 3px solid var(--col-color, var(--line));
  border-radius: 10px;
}
.board-col-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.7rem;
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.board-col-head svg { width: 15px; height: 15px; color: var(--col-color, var(--muted)); }
.board-col-name { flex: 1 1 auto; }
.board-col-count {
  flex: none;
  color: var(--muted);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
}
.board-col-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.board-col-body.drop-on { background: color-mix(in srgb, var(--col-color, var(--moss)) 14%, transparent); }
.board-card {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.board-card:hover { border-color: var(--clay); }
.board-card.dragging { opacity: 0.45; }
.board-swatch { width: 0.85rem; height: 0.85rem; border-radius: 4px; flex: none; margin-top: 2px; }
.board-badge {
  flex: none;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--raised);
  background: var(--badge, var(--muted));
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
  margin-top: 1px;
}
.board-card-body { min-width: 0; flex: 1 1 auto; }
.board-card-name {
  font-size: 0.86rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.board-card-loc {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-card-due { margin-top: 0.3rem; }
.board-empty {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
  padding: 1rem 0;
}

/* board cards: own the touch gesture so drag works (mouse + touch) */
.board-card { touch-action: none; -webkit-user-select: none; user-select: none; }
.board-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transform: rotate(1.5deg);
  margin: 0;
}

/* --- to-do focus mode ------------------------------------------------- */
.todo-focus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  padding: 0;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.todo-focus-btn svg { width: 16px; height: 16px; }
.todo-focus-btn:hover { color: var(--clay); border-color: var(--clay); }
.todo-focus-btn.on {
  color: var(--raised);
  background: var(--clay);
  border-color: var(--clay);
}

/* When focus is on, hide the app chrome so only the to-do screen shows. */
body.todo-focus .topbar,
body.todo-focus .filterbar,
body.app-focus .topbar,
body.app-focus .filterbar { display: none; }
body.todo-focus .content,
body.app-focus .content { padding-top: 1.5rem; }

/* --- go-to-location button on board cards ------------------------------ */
.board-card { position: relative; }
.board-card-body { padding-right: 1.3rem; }
.board-go {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.board-go svg { width: 14px; height: 14px; }
.board-go:hover { color: var(--clay); border-color: var(--clay); background: var(--raised); }

/* header settings cog */
.settings-cog {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.settings-cog:hover { color: var(--clay); border-color: var(--clay); }
.settings-cog svg { width: 18px; height: 18px; }

/* archived-lessons list (Settings) */
.opt-archived { display: flex; flex-direction: column; gap: 0.35rem; }
.opt-archived-empty { color: var(--muted); font-size: 0.86rem; font-style: italic; }
.opt-archived-row { display: flex; align-items: center; gap: 0.5rem; }
.opt-archived-name {
  flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: none; padding: 0.2rem 0; font: inherit; font-weight: 600; color: var(--ink);
  cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--clay) 45%, transparent);
  text-underline-offset: 2px;
}
.opt-archived-name:hover { color: var(--clay); }
.opt-archived-restore {
  flex: 0 0 auto; padding: 0.25rem 0.6rem; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--clay); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.opt-archived-restore:hover { border-color: var(--clay); }
.opt-open-archive {
  padding: 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--clay); font: inherit; font-weight: 600; cursor: pointer;
}
.opt-open-archive:hover { border-color: var(--clay); }

/* ===== onboarding tour ===== */
.tour-overlay { position: fixed; inset: 0; z-index: 3000; }
/* the ring's enormous shadow is the dimmer; the hole is the spotlight */
.tour-ring {
  position: fixed; border: 2px solid var(--clay); border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(20, 14, 8, 0.55);
  transition: all 0.25s ease; pointer-events: none;
}
.tour-ring-none { left: 50%; top: 50%; width: 0; height: 0; border: none; }
.tour-card {
  position: fixed; width: min(340px, calc(100vw - 24px));
  background: var(--raised); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 40px -18px rgba(20, 14, 8, 0.6);
  padding: 0.85rem 1rem 0.9rem; color: var(--ink);
}
.tour-card-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; }
.tour-title { flex: 1 1 auto; font-weight: 700; font-size: 1.02rem; }
.tour-skip { background: none; border: none; color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; }
.tour-skip:hover { color: var(--clay); }
.tour-body { font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.tour-dots { display: flex; gap: 5px; margin: 0.7rem 0 0.6rem; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.tour-dot.on { background: var(--clay); }
.tour-nav { display: flex; justify-content: flex-end; gap: 0.5rem; }
.tour-back {
  padding: 0.3rem 0.8rem; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.tour-next {
  padding: 0.3rem 1rem; border: 1px solid var(--clay); border-radius: 8px;
  background: var(--clay); color: var(--on-accent); font: inherit; font-weight: 600; cursor: pointer;
}
.tour-next:hover { filter: brightness(1.05); }

/* Invites (Settings, owner only) */
.opt-invites { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.opt-invite-new {
  padding: 0.35rem 0.8rem; border: 1px dashed var(--line); border-radius: 8px;
  background: transparent; color: var(--clay); font: inherit; font-weight: 600; cursor: pointer;
}
.opt-invite-new:hover:not(:disabled) { border-color: var(--clay); }
.opt-invite-reveal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; width: 100%;
  padding: 0.5rem; border: 1px solid var(--clay); border-radius: 10px;
  background: color-mix(in srgb, var(--clay) 7%, var(--raised));
}
.opt-invite-code {
  flex: 1 1 auto; min-width: 150px; font: inherit; font-family: ui-monospace, monospace;
  letter-spacing: 0.06em; padding: 0.3rem 0.5rem; border: 1px solid var(--field-border);
  border-radius: 7px; background: var(--raised); color: var(--ink);
}
.opt-invite-copy {
  padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--clay); font: inherit; font-weight: 600; cursor: pointer;
}
.opt-invite-note { flex-basis: 100%; color: var(--muted); font-size: 0.78rem; }
.opt-invite-list { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; }
.opt-invite-empty { color: var(--muted); font-size: 0.85rem; font-style: italic; }
.opt-invite-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; }
.opt-invite-prefix { font-family: ui-monospace, monospace; color: var(--ink); }
.opt-invite-status.is-active { color: var(--ok); }
.opt-invite-status.is-used { color: var(--muted); }
.opt-invite-status.is-dead { color: var(--muted); text-decoration: line-through; }
.opt-invite-revoke {
  margin-left: auto; padding: 0.15rem 0.55rem; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--bad); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.opt-invite-revoke:hover { border-color: var(--bad); }

/* Cloud sync status (Settings) */
.opt-sync { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.opt-sync-off { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.opt-sync-line { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--ink); }
.opt-sync-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.opt-sync-dot.is-ok { background: var(--ok); }
.opt-sync-dot.is-running { background: var(--ochre); }
.opt-sync-dot.is-bad { background: var(--bad); }
.opt-sync-now {
  padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--clay); font: inherit; font-weight: 600; cursor: pointer;
}
.opt-sync-now:hover:not(:disabled) { border-color: var(--clay); }
.opt-sync-now:disabled { opacity: 0.6; cursor: default; }
.opt-sync-provider { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.opt-sync-disconnect {
  padding: 0.25rem 0.7rem; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--bad); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.opt-sync-disconnect:hover { border-color: var(--bad); }

/* ===== archive page ===== */
.archive-body { padding: 0.9rem 0.95rem; }
.archive-grid { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.archive-grid th {
  text-align: left; padding: 0.4rem 0.6rem; color: var(--muted);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--line);
}
.archive-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.archive-sortable:hover { color: var(--clay); }
.archive-grid td { padding: 0.5rem 0.6rem; border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 40%); vertical-align: middle; }
.archive-name {
  background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
  text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--clay) 45%, transparent); text-underline-offset: 2px;
}
.archive-name:hover { color: var(--clay); }
.archive-classes, .archive-date { color: var(--muted); white-space: nowrap; }
.archive-actions { text-align: right; white-space: nowrap; }
.archive-btn {
  padding: 0.25rem 0.6rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
  color: var(--ink); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; margin-left: 0.35rem;
}
.archive-btn:hover { border-color: var(--clay); color: var(--clay); }
.archive-del:hover { border-color: var(--bad); color: var(--bad); }

/* archive link at the top of the Lessons tab */
.tracker-topbar { display: flex; justify-content: flex-end; margin-bottom: 0.4rem; }
.tracker-archive-link {
  background: none; border: 1px solid var(--line); border-radius: 7px; padding: 0.25rem 0.6rem;
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--clay); cursor: pointer;
}
.tracker-archive-link:hover { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 8%, transparent); }

/* --- Filters menu (all filters live behind this one button now) -------- */
.filter-menu-btn { display: inline-flex; }
.filter-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  max-width: 232px;
}

/* --- home module manager (reorder / add / remove) --------------------- */
.modmgr { display: flex; flex-direction: column; gap: 6px; min-width: 224px; max-width: 264px; }
.modmgr-title { font-weight: 700; font-size: 0.85rem; color: var(--ink); padding: 2px 2px 4px; }
.modmgr-list { display: flex; flex-direction: column; gap: 3px; }
.modmgr-empty { color: var(--muted); font-size: 0.82rem; font-style: italic; padding: 4px 2px; }
.modmgr-row { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border-radius: 8px; }
.modmgr-row:hover { background: var(--surface); }
.modmgr-name { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modmgr-btn {
  flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px; background: var(--raised); color: var(--muted);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.modmgr-btn:hover:not(:disabled) { border-color: var(--clay); color: var(--clay); }
.modmgr-btn:disabled { opacity: 0.35; cursor: default; }
.modmgr-btn svg { width: 14px; height: 14px; }
.modmgr-rm:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.modmgr-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 6px 2px 2px; }
.modmgr-add { display: flex; flex-wrap: wrap; gap: 4px; }
.modmgr-chip {
  border: 1px dashed var(--line); border-radius: 999px; background: transparent; color: var(--clay);
  font: inherit; font-size: 0.78rem; padding: 3px 9px; cursor: pointer;
}
.modmgr-chip:hover { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 8%, transparent); }

/* iOS Safari zooms the page in when you focus an input whose font is smaller
   than 16px, and won't zoom back out. On touch devices, render form controls at
   16px so focusing them never triggers that zoom. Desktop (fine pointer) keeps
   the compact sizes. */
@media (pointer: coarse) {
  .search-input,
  .input,
  .todo-sort,
  .todo-f-title,
  .todo-f-note,
  .todo-f-date,
  .todo-f-time,
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* Tappable item surfaces shouldn't grab text on press-drag (it interrupts the
   map drag) or pop iOS's selection/callout on a long press (which is now our
   context-menu gesture). Text inside previews stays selectable. */
.map-box,
.row,
.card,
.result-row,
.board-card,
.todo-item {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* --- pointer-based map drag (mouse + touch) ---------------------------- */
.map-drag-shield {
  position: fixed;
  inset: 0;
  z-index: 998;
  touch-action: none; /* we own the gesture; no scrolling/zooming mid-drag */
  cursor: grabbing;
  background: transparent;
}
.map-drag-ghost {
  position: fixed;
  z-index: 999;
  transform: translate(-50%, -135%); /* float just above the finger/cursor */
  pointer-events: none;
  max-width: 60vw;
  padding: 0.3rem 0.6rem;
  background: var(--clay);
  color: var(--raised);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* --- soft shadows on pressable buttons (not hover-only affordances) ----- */
.btn,
.todo-toggle,
.todo-add-btn,
.todo-focus-btn,
.segmented button {
  box-shadow: 0 1px 2px rgba(44, 39, 31, 0.1), 0 2px 6px rgba(44, 39, 31, 0.07);
}
.btn:active,
.todo-toggle:active,
.todo-add-btn:active,
.todo-focus-btn:active,
.segmented button:active {
  box-shadow: 0 1px 2px rgba(44, 39, 31, 0.12);
  transform: translateY(0.5px);
}

/* map tiles never grab their own text (breaks drag + the long-press gesture) */
.map-box,
.map-box * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* touch long-press feedback: a quick iOS-style pulse before the menu opens */
@keyframes boxPress {
  0% { transform: scale(1); }
  45% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.map-box.pressing { animation: boxPress 0.34s ease; }

/* an item just landed in this folder — a subtle border pulse so you can see
   where it went, without interrupting the flow */
@keyframes mapArrive {
  0% {
    border-color: var(--clay);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--clay) 38%, transparent);
  }
  100% {
    border-color: var(--box-color, var(--line));
    box-shadow: none;
  }
}
.map-box.arrived { animation: mapArrive 0.75s ease; }

/* --- context-menu icon action row (iPhone-style, up to 3 across) -------- */
.cm-actions {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.cm-action {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.cm-action svg { width: 20px; height: 20px; }
.cm-action:hover { color: var(--clay); border-color: var(--clay); background: var(--raised); }

/* --- "Move to" picker --------------------------------------------------- */
.move-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.25rem 0.75rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.move-back {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.2rem 0.3rem 0.2rem 0;
}
.move-back svg { width: 16px; height: 16px; }
.move-back:hover { color: var(--clay); }
.move-title {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 0.95rem;
  color: var(--ink);
}
.move-lead { color: var(--muted); }
.move-name { overflow-wrap: anywhere; }
.move-loc { color: var(--muted); font-size: 0.85rem; }
.move-spacer { flex: 1 1 auto; }
.move-here { white-space: nowrap; }
.move-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: none;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.move-cancel svg { width: 18px; height: 18px; }
.move-cancel:hover { color: var(--bad); border-color: var(--bad); }

.move-list { display: flex; flex-direction: column; gap: 0.3rem; }
.move-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
button.move-row { cursor: pointer; }
.move-row.is-folder:hover { border-color: var(--clay); }
.move-row.is-file { opacity: 0.5; }
.move-swatch { width: 0.95rem; height: 0.95rem; border-radius: 4px; flex: none; }
.move-badge {
  flex: none;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--raised);
  background: var(--badge, var(--muted));
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
}
.move-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.move-row-meta { flex: none; color: var(--muted); font-size: 0.78rem; }
.move-chev { flex: none; display: inline-flex; color: var(--muted); }
.move-chev svg { width: 16px; height: 16px; }
.move-empty { color: var(--muted); font-style: italic; padding: 1rem 0; }

/* --- app-wide selection lockdown --------------------------------------- */
/* The UI behaves like an app: nothing in the chrome (toolbars, tiles, board
   headers, breadcrumbs, chips) is selectable, which kills the iOS long-press
   text-selection that was breaking drags, and stops stray desktop selections.
   Selection is re-enabled only where you actually read or type text. */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.preview-body,
.preview-body *,
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* --- folder toolbar: collapse to icons on mobile ----------------------- */
/* Desktop is unchanged: the icon span is hidden and the text label shows. */
.toolbar-btn.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.toolbar-btn.has-icon .tb-ic {
  display: none;
  align-items: center;
  justify-content: center;
}
.toolbar-btn.has-icon .tb-ic svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 600px) {
  /* Mobile: hide the words, show the icon, shrink to a tidy square button
     (theme + drop shadow inherited from .btn are kept). */
  .toolbar-btn.has-icon .btn-label {
    display: none;
  }
  .toolbar-btn.has-icon .tb-ic {
    display: inline-flex;
  }
  .toolbar-btn.has-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
  }
  .toolbar-btn.has-icon .tb-ic svg {
    width: 21px;
    height: 21px;
  }
}

/* --- map drag: reliability + current-level drop ------------------------ */
/* One uniform gesture surface across the whole box (text, labels, icons, and
   nested tiles) so the touch hold fires everywhere — not just on bare spots.
   pan-y keeps vertical scrolling of the map; the JS switches the box to
   touch-action:none the instant the hold lands so the drag can go any way. */
.map-box,
.map-box *,
.map-stage {
  touch-action: pan-y;
}
/* Dropping on empty stage space lands the item at the current level. */
.map-stage.drag-over {
  box-shadow: inset 0 0 0 2px var(--clay);
  background: color-mix(in srgb, var(--clay) 5%, transparent);
}

/* --- mobile: fit the folder toolbar onto one row ----------------------- */
@media (max-width: 600px) {
  .toolbar {
    gap: 0.4rem;
  }
  .toolbar-btn.has-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px; /* a touch less rounded, tighter footprint */
  }
  .segmented {
    gap: 0.15rem;
  }
  .seg {
    padding: 0.34rem 0.42rem;
    font-size: 0.76rem;
    border-radius: 7px;
  }
}

/* --- condensed tiles: same reliable drag as the treemap ----------------- */
.map-tile,
.map-tile * {
  touch-action: pan-y; /* uniform surface; JS claims it (none) once a hold lands */
}
.map-tile.pressing {
  animation: boxPress 0.34s ease;
}
.map-tile.dragging {
  opacity: 0.45;
}
.map-tile.is-folder.drag-over {
  border-color: var(--clay);
  box-shadow: inset 0 0 0 2px var(--clay);
}
.map-tiles.drag-over {
  box-shadow: inset 0 0 0 2px var(--clay);
  border-radius: 10px;
  background: color-mix(in srgb, var(--clay) 5%, transparent);
}

/* --- touch-only fixed "up a level" drop zone --------------------------- */
.map-up-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 52px;
  padding-top: env(safe-area-inset-top, 0);
  background: color-mix(in srgb, var(--clay) 18%, var(--surface));
  border-bottom: 2px dashed var(--clay);
  color: var(--clay);
  font-size: 0.85rem;
  font-weight: 600;
}
.map-up-fixed-ic {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}
.map-up-fixed.drag-over {
  background: var(--clay);
  color: var(--paper);
}

/* --- mode toggles: condense to icons on mobile (still touch-friendly) --- */
@media (max-width: 600px) {
  .filterbar { gap: 0.3rem; padding: 0.4rem 0.6rem; }
  .todo-toggle span { display: none; }
  .todo-toggle {
    width: 40px;
    height: 36px;
    padding: 0;
    justify-content: center;
    margin-right: 0.2rem;
    border-radius: 11px;
  }
  .todo-toggle svg { width: 19px; height: 19px; }
}

/* =====================================================================
   WEEKLY TEACHING SCHEDULE
   ===================================================================== */
.sched-screen { display: flex; flex-direction: column; min-height: 0; }
.sched-host { padding: 0 0.25rem; }
.sched-bar .sched-title { font-weight: 700; letter-spacing: 0.02em; }
.sched-bar-spacer { flex: 1 1 auto; }
.sched-viewseg { flex: none; }
.sched-empty { color: var(--muted); font-style: italic; padding: 1.5rem 0.25rem; }

/* ---- full-page schedule as a "window" card ----
   Same idiom as the dashboard/lesson-hub wrap (.dash-screen, commit d3aad32):
   raised card, hairline border, tinted header. .sched-screen exists ONLY on
   the full page (openSchedule); Workspace tiles and the home calendar blade
   render straight into their own hosts, so nothing here leaks into them. */
.sched-screen {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 34px -20px rgba(20, 14, 8, 0.45);
  overflow: hidden;
}
/* Day view reads best as a centered column; the grid views use the width. */
.sched-screen[data-view="day"] { max-width: 860px; margin: 0 auto; width: 100%; }
/* the top bar becomes the card's window header */
.sched-screen .sched-bar {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 60%, var(--raised));
}
.sched-screen .sched-host { padding: 0.35rem 0.95rem 0.95rem; }
/* the Day/Week/Month/Year switcher, restyled from four raised buttons to the
   compact pill chips the timetable toggle uses (.sched-daytype-seg look) */
.sched-screen .sched-viewseg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.sched-screen .sched-viewseg .seg,
.sched-screen .sched-viewseg .seg:hover {
  border: none;
  box-shadow: none;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.28rem 0.72rem;
  transform: none;
}
.sched-screen .sched-viewseg .seg:hover { color: var(--ink); }
.sched-screen .sched-viewseg .seg.on { background: var(--clay); color: var(--on-accent); }
/* the date navigator: a slim second row under the header */
.sched-screen .sched-datenav { padding: 0.55rem 0 0.35rem; }
.sched-screen .sched-navlabel { font-size: 0.98rem; }
.sched-screen .sched-navbtn { width: 32px; height: 32px; }
.sched-screen .sched-navbtn svg { width: 16px; height: 16px; }
.sched-screen .sched-today { padding: 0.32rem 0.65rem; font-size: 0.78rem; }
/* the day view fills the card's own column instead of re-centering */
.sched-screen[data-view="day"] .sched-dayview { max-width: none; }
@media (max-width: 600px) {
  .sched-screen .sched-bar { padding: 0.45rem 0.6rem; }
  .sched-screen .sched-host { padding: 0.25rem 0.6rem 0.6rem; }
  .sched-screen .sched-viewseg .seg { padding: 0.26rem 0.5rem; font-size: 0.72rem; }
}

/* date navigator */
.sched-datenav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.25rem;
}
.sched-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
}
.sched-navbtn svg { width: 18px; height: 18px; }
.sched-navbtn:hover { border-color: var(--clay); color: var(--clay); }
.sched-navlabel { font-size: 1.05rem; font-weight: 700; color: var(--ink); flex: 1 1 auto; }

/* ---- date nav mounted inside the schedule window header ---- */
.sched-bar { flex-wrap: wrap; } /* narrow screens: the nav wraps to its own line */
.sched-bar-nav { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; margin-left: 0.5rem; }
.sched-bar-nav .sched-datenav { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0; }
.sched-bar-nav .sched-navbtn { width: 26px; height: 26px; border-radius: 8px; }
.sched-bar-nav .sched-navbtn svg { width: 14px; height: 14px; }
/* the label hugs its arrows instead of stretching (flex:none beats 1 1 auto) */
.sched-bar-nav .sched-navlabel { flex: 0 0 auto; font-size: 0.95rem; white-space: nowrap; }
.sched-bar-nav .sched-today { padding: 2px 10px; font-size: 0.78rem; }

/* ---- the home calendar module's single control row ---- */
.sched-bladerow { display: flex; align-items: center; gap: 0.3rem; margin: 0 0 0.55rem; min-width: 0; }
.sched-bladerow .sched-navbtn { width: 24px; height: 24px; border-radius: 7px; flex: none; }
.sched-bladerow .sched-navbtn svg { width: 13px; height: 13px; }
.sched-navlabel-sm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.sched-bladerow .sched-today { padding: 1px 8px; font-size: 0.74rem; margin-left: 0.1rem; }
.sched-bladerow .sched-daytype { margin-left: auto; }
.sched-daytype-compact .sched-daytype-btn { padding: 2px 8px; font-size: 0.76rem; }
.sched-today {
  flex: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clay);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.sched-today:hover { border-color: var(--clay); }

/* layout (timetable) toggle */
.sched-layoutrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.1rem 0.25rem 0.7rem;
}
.sched-layout-label { font-size: 0.82rem; color: var(--muted); }
.sched-layseg { flex: none; }

/* ---- day view ---- */
.sched-day { display: flex; flex-direction: column; gap: 0.4rem; padding-bottom: 2rem; }
.sched-row {
  display: flex;
  align-items: stretch;
  gap: 0.7rem;
  padding: 0.4rem 0.3rem;
  border-radius: 10px;
}
.sched-row.is-break { opacity: 0.75; }
.sched-time {
  flex: none;
  width: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.2rem 0.1rem;
}
.sched-period-label { font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.sched-period-time { font-size: 0.72rem; color: var(--muted); }
.sched-rowbody { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.4rem; min-width: 0; }

.sched-addslot {
  flex: 1 1 auto;
  min-height: 44px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  padding: 0 0.8rem;
}
.sched-addslot:hover { color: var(--clay); border-color: var(--clay); }
.sched-addmini {
  flex: none;
  width: 40px;
  font: inherit;
  font-size: 1.2rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.sched-addmini:hover { color: var(--clay); border-color: var(--clay); }

.sched-card {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--sched-color, var(--muted));
  background: color-mix(in srgb, var(--sched-color, var(--muted)) 12%, var(--raised));
  color: var(--ink);
}
.sched-card:hover { border-color: var(--sched-color, var(--clay)); }
.sched-card-main { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.sched-card-subject { font-weight: 700; }
.sched-card-class {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--raised);
  background: var(--sched-color, var(--muted));
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
}
.sched-card-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- week view ---- */
.sched-week-scroll { overflow-x: auto; padding-bottom: 2rem; }
.sched-week {
  display: grid;
  grid-template-columns: 56px repeat(var(--cols, 6), minmax(86px, 1fr));
  gap: 3px;
  min-width: 620px;
}
.sched-wk-corner { background: transparent; }
.sched-wk-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.35rem 0.2rem;
  font: inherit;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}
.sched-wk-dayhead .wk-dow { font-size: 0.72rem; color: var(--muted); }
.sched-wk-dayhead .wk-date { font-weight: 700; }
.sched-wk-dayhead.today { border-color: var(--clay); color: var(--clay); }
.sched-wk-dayhead.today .wk-dow { color: var(--clay); }
.sched-wk-rowlabel {
  display: flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.2rem 0.3rem;
}
.sched-wk-rowlabel.is-break,
.sched-wk-rowlabel.is-optional { font-weight: 500; opacity: 0.7; }
.sched-wk-cell {
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  font: inherit;
  cursor: pointer;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.sched-wk-cell.is-break,
.sched-wk-cell.is-optional { background: var(--surface); }
.sched-wk-cell:hover { border-color: var(--clay); }
.sched-wk-chip {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font: inherit;
  font-size: 0.7rem;
  line-height: 1.2;
  cursor: pointer;
  color: var(--ink);
  background: color-mix(in srgb, var(--sched-color, var(--muted)) 20%, var(--raised));
  border: none;
  border-left: 3px solid var(--sched-color, var(--muted));
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sched-wk-chip:hover { filter: brightness(0.97); }

/* ---- entry editor modal ---- */
.sched-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(44, 39, 31, 0.4);
}
.sched-modal {
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 18px 50px rgba(44, 39, 31, 0.28);
}
.sched-modal-head { margin-bottom: 0.7rem; }
.sched-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.sched-modal-sub { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; }
.sched-field { margin-bottom: 0.8rem; }
.sched-field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.sched-input { width: 100%; box-sizing: border-box; }
.sched-note { min-height: 64px; resize: vertical; }
.sched-gc-row { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.sched-gc-cap { width: 46px; flex: none; font-size: 0.78rem; color: var(--muted); }
.sched-gc-btn {
  width: 38px;
  height: 36px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
}
.sched-gc-btn:hover { border-color: var(--clay); }
.sched-gc-btn.on { background: var(--clay); border-color: var(--clay); color: var(--raised); }
.sched-custom-toggle {
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  margin: 0.2rem 0 0.4rem;
}
.sched-custom-toggle.on { color: var(--clay); border-color: var(--clay); }
.sched-custom-input { display: none; }
.sched-gc-preview { font-size: 0.8rem; color: var(--muted); }
.sched-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sched-swatch {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
}
.sched-swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--raised) inset; }
.sched-swatch-auto {
  width: auto;
  padding: 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
}
.sched-swatch-auto.on { border-color: var(--sched-color, var(--clay)); color: var(--clay); }
.sched-modal-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.sched-modal-actions-spacer { flex: 1 1 auto; }
.sched-modal-actions .btn { width: auto; padding: 0.5rem 1rem; }
.sched-del { color: var(--bad); border-color: var(--line); }
.sched-del:hover { border-color: var(--bad); }

/* =====================================================================
   SCHEDULE — wider page, compact toggle, month / year, drag
   ===================================================================== */

/* Calendar gets the full page width; the day view stays a readable column. */
body.sched-wide .content { max-width: 96rem; }
.sched-dayview { max-width: 760px; margin: 0 auto; }
@media (max-width: 600px) {
  .sched-bar .sched-title { display: none; } /* room for the 4-way switch */
  .sched-viewseg .seg { padding: 0.3rem 0.4rem; font-size: 0.74rem; }
}

/* compact, modern day-type toggle (replaces the bulky labelled segment) */
.sched-daytype {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0 0.25rem 0.6rem;
}
.sched-daytype-ic { display: inline-flex; color: var(--muted); }
.sched-daytype-ic svg { width: 15px; height: 15px; }
.sched-daytype-seg {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.sched-daytype-btn {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
}
.sched-daytype-btn:hover { color: var(--ink); }
.sched-daytype-btn.on { background: var(--clay); color: var(--raised); }

/* week: filled (absent) cells, in-cell add affordance, 45 badge */
.sched-wk-cell.is-absent {
  background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--paper) 6px, var(--paper) 12px);
  opacity: 0.5;
  border-style: dashed;
}
.sched-wk-cell { position: relative; }
.sched-wk-add {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  align-self: flex-end;
  margin-top: auto;
  padding: 0 0.1rem;
  min-height: 14px;
  opacity: 0.55;
}
.sched-wk-add:hover { color: var(--clay); opacity: 1; }
.sched-wk-dayhead { position: relative; }
.wk-45 {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--raised);
  background: var(--ochre);
  border-radius: 4px;
  padding: 0 0.18rem;
  line-height: 1.35;
}

/* ---- month view ---- */
.sched-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding-bottom: 2rem;
}
.sched-mo-dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.2rem 0;
}
.sched-mo-cell {
  position: relative;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.3rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sched-mo-cell.is-blank { background: transparent; border: none; cursor: default; }
.sched-mo-cell.today { border-color: var(--clay); }
.sched-mo-cell:not(.is-blank):hover { border-color: var(--clay); }
.sched-mo-cellhead { display: flex; align-items: center; justify-content: space-between; }
.sched-mo-num { font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.sched-mo-cell.today .sched-mo-num { color: var(--clay); }
.sched-mo-45 {
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--raised);
  background: var(--ochre);
  border-radius: 4px;
  padding: 0 0.18rem;
  line-height: 1.4;
}
.sched-mo-pills { display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; }
.sched-mo-pill { width: 100%; height: 5px; border-radius: 3px; }
.sched-mo-more { font-size: 0.62rem; color: var(--muted); }
@media (max-width: 600px) {
  .sched-mo-cell { min-height: 56px; }
  .sched-mo-pill { height: 4px; }
}

/* ---- year view ---- */
.sched-year {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 1rem 1.2rem;
  padding-bottom: 2rem;
}
.sched-yr-month {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.55rem 0.6rem;
  background: var(--raised);
}
.sched-yr-cap { font-size: 0.85rem; font-weight: 700; color: var(--ink); margin-bottom: 0.35rem; }
.sched-yr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.sched-yr-dow { text-align: center; font-size: 0.56rem; color: var(--muted); padding-bottom: 2px; }
.sched-yr-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.62rem;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.sched-yr-day.is-blank { cursor: default; }
.sched-yr-day:not(.is-blank):hover { background: var(--surface); }
.sched-yr-day.today { color: var(--clay); font-weight: 800; box-shadow: inset 0 0 0 1px var(--clay); }
.sched-yr-day .yr-num { line-height: 1; }
.sched-yr-day .yr-dot {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.sched-yr-day.has { color: var(--ink); font-weight: 600; }

/* ---- day-view drag ---- */
.sched-card { touch-action: pan-y; }
.sched-card.pressing { animation: boxPress 0.34s ease; }
.sched-card.dragging { opacity: 0.45; }
.sched-row.drop-on {
  background: color-mix(in srgb, var(--clay) 10%, transparent);
  box-shadow: inset 0 0 0 2px var(--clay);
  border-radius: 10px;
}
.sched-drag-shield { position: fixed; inset: 0; z-index: 998; touch-action: none; }
.sched-drag-ghost {
  position: fixed;
  z-index: 999;
  transform: translate(-50%, -135%);
  pointer-events: none;
  max-width: 60vw;
  padding: 0.3rem 0.6rem;
  background: var(--clay);
  color: var(--raised);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================================
   SCHEDULE v3 — holiday pill, month pill columns, week chip flow, planner
   ===================================================================== */

/* day view: holiday pill shares the row with the day-type toggle */
.sched-daytrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.25rem 0.6rem;
}
.sched-daytrow-spacer { flex: 1 1 auto; }
.sched-daytrow .sched-daytype { padding: 0; }
.sched-holiday-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, var(--raised));
  border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line));
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
}
.sched-holiday-pill svg { width: 15px; height: 15px; flex: none; }
.sched-holiday-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* month: pills flow in two columns so the day stays a fixed size */
.sched-mo-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; align-content: flex-start; }
.sched-mo-pill { width: auto; height: 5px; border-radius: 3px; }
.sched-mo-more { grid-column: 1 / -1; }

/* week: chips fill across before wrapping down; subject truncates, class never */
.sched-week { grid-template-columns: 48px repeat(var(--cols, 6), minmax(104px, 1fr)); }
.sched-wk-cell { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 3px; }
.sched-wk-chip {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex: 1 1 84px;
  min-width: 0;
  width: auto;
}
.wk-chip-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wk-chip-cls { flex: none; font-weight: 700; }
.sched-wk-add { flex: 1 0 100%; align-self: stretch; margin-top: 0; text-align: right; }

/* ---- year planner ---- */
.sched-yr-frame { position: relative; padding-bottom: 2rem; }
.sched-yr-scroll {
  overflow: auto;
  max-height: 74vh;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}
.sched-yr-planner {
  display: grid;
  grid-template-columns: 38px repeat(12, 104px);
  width: max-content;
  gap: 1px;
}
/* Wide screens: all 12 months already fit, so stretch them to fill the space
   instead of leaving an awkward gap past December. Narrow screens keep the
   fixed-width, horizontally-scrolling layout untouched. */
@media (min-width: 1300px) {
  .sched-yr-planner {
    grid-template-columns: 38px repeat(12, 1fr);
    width: 100%;
  }
}
.yp-corner,
.yp-mhead,
.yp-wd,
.yp-cell { background: var(--raised); }
.yp-mhead {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: center;
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--ink);
  padding: 0.4rem 0;
}
.yp-corner { position: sticky; top: 0; left: 0; z-index: 3; }
.yp-wd {
  position: sticky;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: var(--muted);
}
.yp-wd.is-sun { color: var(--bad); }
.yp-cell {
  position: relative;
  min-height: 25px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 0.3rem;
  font: inherit;
  font-size: 0.7rem;
  color: var(--ink);
  border: none;
  cursor: pointer;
}
.yp-cell.is-empty { background: var(--surface); opacity: 0.45; cursor: default; }
.yp-cell.is-sun:not(.is-empty) { background: color-mix(in srgb, var(--bad) 6%, var(--raised)); }
.yp-cell:not(.is-empty):hover { background: var(--surface); }
.yp-cell.today { box-shadow: inset 0 0 0 2px var(--clay); font-weight: 800; }
/* national holiday: lunch-like background + a distinct red border */
.yp-cell.holiday { background: var(--surface); box-shadow: inset 0 0 0 2px var(--bad); }
.yp-cell.holiday .yp-num { color: var(--bad); font-weight: 700; }
.yp-num { flex: none; }
.yp-holiday-ic { display: inline-flex; margin-left: auto; color: var(--bad); }
.yp-holiday-ic svg { width: 12px; height: 12px; }
.yp-dot { width: 5px; height: 5px; border-radius: 50%; margin-left: auto; flex: none; }
.yp-page {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clay);
  background: color-mix(in srgb, var(--raised) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(3px);
}
.yp-page:hover { border-color: var(--clay); box-shadow: 0 3px 11px rgba(0, 0, 0, 0.18); }
.yp-page svg { width: 18px; height: 18px; }
.yp-page-l { left: 4px; }
.yp-page-r { right: 4px; }
.yp-page-off { visibility: hidden; }

/* =====================================================================
   TO-DO — focus label, pull-to-add, form swipe
   ===================================================================== */

/* focus button gains a text label when there's room (larger phones / tablets) */
.todo-focus-label { display: none; }
@media (min-width: 560px) {
  .todo-focus-btn { width: auto; padding: 0 0.65rem; gap: 0.35rem; }
  .todo-focus-label { display: inline; font-size: 0.82rem; font-weight: 600; }
}

/* pull-down-to-add indicator */
.todo-pull {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: height 0.2s ease;
}
.todo-pull.dragging { transition: none; }
.todo-pull-plus {
  margin-bottom: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(44, 39, 31, 0.1);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.todo-pull.armed .todo-pull-plus {
  transform: scale(1.18) rotate(90deg);
  color: var(--raised);
  background: var(--clay);
  border-color: var(--clay);
}

/* new-task form glides in from the top, and swipes up and away on submit */
.todo-form { animation: todoFormIn 0.22s ease; transition: transform 0.24s ease, opacity 0.24s ease; }
.todo-form.swipe-out { transform: translateY(-115%); opacity: 0; }
@keyframes todoFormIn {
  from { transform: translateY(-28%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* =====================================================================
   TO-DO LISTS — switcher, picker, settings modal, minimalist mode
   ===================================================================== */

/* the title doubles as a list switcher */
.todo-list-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 52vw;
  padding: 0.32rem 0.5rem 0.32rem 0; /* stripe sits flush on the left */
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.todo-list-switcher:hover { background: var(--surface); }
.todo-sw-stripe {
  align-self: stretch;
  width: 5px;
  flex: none;
  border-radius: 9px 0 0 9px;
  margin-right: 0.5rem;
}
.todo-sw-ic { display: inline-flex; color: var(--muted); flex: none; }
.todo-sw-ic svg { width: 17px; height: 17px; display: block; }
.todo-sw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.todo-sw-chev { display: inline-flex; color: var(--muted); flex: none; }
@media (max-width: 600px) {
  .todo-sw-name { display: none; } /* tight screens: stripe + icon only */
  .todo-list-switcher { max-width: none; }
}
.todo-sw-chev svg { width: 15px; height: 15px; transform: rotate(90deg); }

/* list picker popover (lives inside .popover) */
.todo-listpicker { min-width: 224px; max-width: 280px; }
.tlp-head {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 0.2rem 0.5rem 0.45rem;
}
.tlp-head-edit { display: flex; align-items: center; gap: 0.3rem; text-transform: none; letter-spacing: 0; }
.tlp-back { display: inline-flex; padding: 0.1rem; background: none; border: none; color: var(--muted); cursor: pointer; }
.tlp-back svg { width: 16px; height: 16px; }
.tlp-rows { display: flex; flex-direction: column; gap: 1px; max-height: 50vh; overflow-y: auto; }
.tlp-row { display: flex; align-items: center; border-radius: 8px; }
.tlp-row.on { background: var(--surface); }
.tlp-pick {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem 0.55rem;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
}
.tlp-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlp-check { display: inline-flex; color: var(--clay); flex: none; }
.tlp-check svg { width: 15px; height: 15px; }
.tlp-edit { display: inline-flex; padding: 0.45rem; margin-right: 0.15rem; background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 7px; }
.tlp-edit:hover { background: var(--paper); color: var(--ink); }
.tlp-edit svg { width: 15px; height: 15px; }
.tlp-add {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.55rem;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  color: var(--clay);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.tlp-add:hover { background: var(--surface); }
.tlp-plus { font-size: 1.1rem; line-height: 1; }
.tlp-newwrap { display: flex; gap: 0.4rem; padding: 0.4rem 0.4rem 0.2rem; }
.tlp-newinput {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
}
.tlp-newok { flex: none; padding: 0 0.7rem; border-radius: 8px; }
.tlp-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.55rem 0.45rem; }
.tlp-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--raised);
  cursor: pointer;
  padding: 0;
}
.tlp-swatch.is-inbox { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.tlp-swatch.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--raised) inset; }
.tlp-edit-actions { display: flex; gap: 0.5rem; padding: 0.3rem 0.45rem 0.2rem; }
.tlp-save { flex: 1 1 auto; }
.tlp-del { flex: none; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--bad); padding: 0 0.7rem; cursor: pointer; font: inherit; font-weight: 600; }
.tlp-del:hover { background: color-mix(in srgb, var(--bad) 10%, var(--raised)); border-color: var(--bad); }

/* account-menu Settings entry (matches sign-out spacing) */
.account-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.account-item:hover { background: var(--surface); }

/* settings modal */
.opt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(44, 39, 31, 0.32);
}
.opt-panel {
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(44, 39, 31, 0.28);
  padding: 1rem 1.1rem 1.25rem;
}
.opt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.opt-title { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.opt-close { display: inline-flex; padding: 0.3rem; background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 8px; }
.opt-close:hover { background: var(--surface); color: var(--ink); }
.opt-close svg { width: 18px; height: 18px; }
.opt-section { margin-top: 0.9rem; }
.opt-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
/* theme picker */
.opt-themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.opt-theme {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  cursor: pointer; font: inherit; color: var(--ink); text-align: left;
}
.opt-theme:hover { border-color: var(--clay); }
.opt-theme.on { border-color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); }
.opt-theme-sw { flex: 0 0 auto; display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.opt-theme-sw span { width: 14px; height: 22px; display: block; }
.opt-theme-label { font-size: 0.9rem; font-weight: 600; }
.opt-row { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.6rem 0; }
.opt-row-txt { flex: 1 1 auto; min-width: 0; }
.opt-row-title { font-size: 0.96rem; font-weight: 600; color: var(--ink); }
.opt-row-desc { font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.4; }
.opt-switch {
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: var(--line);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
  margin-top: 0.1rem;
}
.opt-switch.on { background: var(--moss); }
.opt-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: 0 1px 3px rgba(44, 39, 31, 0.25);
  transition: transform 0.15s ease;
}
.opt-switch.on .opt-knob { transform: translateX(18px); }
.opt-hint { font-size: 0.8rem; color: var(--muted); margin-top: 1rem; font-style: italic; }

/* ---- School day: the timetable editor (Settings → School day) ----------
   Reuses the Settings modal chrome; these style its two screens (the
   timetable list, and the per-timetable row editor). */
.tt-panel { max-width: 560px; }
.tt-intro { margin-top: 0.15rem; }
.tt-back {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 0.4rem 0 0;
  cursor: pointer;
}
.tt-back:hover { color: var(--ink); }
.tt-list { display: grid; gap: 0.45rem; margin-top: 0.9rem; }
.tt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
}
.tt-row-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-weight: 500; }
.tt-row-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-row-short {
  flex: none;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.08rem 0.5rem;
}
.tt-row-acts { display: flex; gap: 0.3rem; flex: none; }
.tt-act {
  border: 1px solid var(--field-border);
  background: var(--raised);
  color: var(--ink);
  border-radius: 7px;
  padding: 0.25rem 0.55rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.tt-act:hover { border-color: var(--clay); color: var(--clay); }
.tt-act-del:hover { border-color: var(--bad); color: var(--bad); }
.tt-new, .tt-addrow {
  margin-top: 0.7rem;
  border: 1.5px dashed var(--field-border);
  background: none;
  color: var(--muted);
  border-radius: 9px;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
  width: 100%;
}
.tt-new:hover, .tt-addrow:hover { border-color: var(--clay); color: var(--clay); }
.tt-form { margin-top: 0.9rem; }
.tt-field-row { display: flex; gap: 0.6rem; }
.tt-field { display: grid; gap: 0.2rem; flex: 1; min-width: 0; }
.tt-field > label { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.tt-input {
  border: 1px solid var(--field-border);
  background: var(--raised);
  color: var(--ink);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.88rem;
  min-width: 0;
  width: 100%;
}
.tt-input:focus { outline: none; border-color: var(--clay); }
.tt-field .tt-input-short { max-width: 10rem; }
/* the editor grid: label | start | end | kind | remove */
.tt-periods-head, .tt-period {
  display: grid;
  grid-template-columns: 1fr 4.4rem 4.4rem 6rem 1.9rem;
  gap: 0.35rem;
  align-items: center;
}
.tt-periods-head {
  margin: 0.9rem 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
}
.tt-periods { display: grid; gap: 0.35rem; }
.tt-period .tt-act-del { padding: 0.25rem 0; text-align: center; }
.tt-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.tt-save {
  border: 1px solid var(--clay);
  background: var(--clay);
  color: var(--on-accent);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.tt-save:hover { filter: brightness(1.06); }
@media (max-width: 560px) {
  .tt-periods-head, .tt-period { grid-template-columns: 1fr 3.6rem 3.6rem 4.9rem 1.6rem; }
  .tt-field-row { flex-direction: column; }
  .tt-field .tt-input-short { max-width: none; }
}

/* minimalist / gesture mode: back becomes a button, New task is gone */
body.app-minimal .todo-back {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 31px;
  padding: 0 0.55rem;
}

/* =====================================================================
   MINIMALIST CALENDAR + BOARD (mobile, app-minimal)
   ===================================================================== */

/* compact top bar: icon-only back, truncating title, focus toggle */
.sched-bar-min .sched-title,
.sched-bar-min .todo-title-h {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.sched-bar-min .sched-bar-spacer { flex: 0 1 auto; }
.sched-bar-min .todo-back span { display: none; } /* chevron only — no text */
.sched-bar-min .todo-back { padding: 0 0.5rem; }
.sched-focus-btn { width: 31px; padding: 0; }

/* Day/Week/Month/Year as icons, living between the nav arrows */
.sched-viewseg-ic .seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.34rem 0.5rem;
}
.sched-viewseg-ic .seg svg { width: 18px; height: 18px; display: block; }

.sched-datenav-min {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sched-datenav-min .sched-viewseg { flex: 0 0 auto; }
.sched-today-ic {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clay);
}
.sched-today-ic svg { width: 19px; height: 19px; }

/* =====================================================================
   MINIMALIST v2 — switcher pill follow-ups, icon back, compact day view
   ===================================================================== */

/* colored dot used inside the list-picker rows (switcher itself uses a stripe) */
.todo-sw-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--clay); flex: none; }
.todo-sw-dot.is-inbox { background: var(--muted); }

/* icon-only back across every minimalist bar (to-do, calendar, board) */
body.app-minimal .todo-back span { display: none; }

/* the minimalist calendar bar shows the current date as its title */
.sched-bar-min .sched-title { display: flex; align-items: center; }

/* condensed 7/6-period control: calendar-clock icon + the number, tap toggles */
.sched-daytype-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.3rem 0.5rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sched-daytype-mini svg { width: 19px; height: 19px; color: var(--muted); display: block; }
.sched-dt-num { font-size: 0.95rem; line-height: 1; }

/* compact day view so a full timetable fits without scrolling on mobile */
@media (max-width: 600px) {
  body.app-minimal .sched-dayview { max-width: none; }
  body.app-minimal .sched-row { gap: 0.5rem; padding: 0.15rem 0.2rem; align-items: center; }
  body.app-minimal .sched-time {
    width: 44px;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  body.app-minimal .sched-period-label { font-size: 1rem; }
  body.app-minimal .sched-period-time {
    font-size: 0.58rem;
    line-height: 1.15;
    white-space: nowrap;
  }
  body.app-minimal .sched-addslot { min-height: 30px; font-size: 0.8rem; border-radius: 8px; }
  body.app-minimal .sched-daytrow { padding-bottom: 0.35rem; }
}

/* =====================================================================
   LESSON DASHBOARD (stacked, width-clamped; inherits minimalist + focus)
   ===================================================================== */
.dash-screen { max-width: 760px; margin: 0 auto; padding: 0 0.25rem; }

/* ---- full-screen dashboard / lesson hub as a "window" card ----
   The compact in-blade version (.dash-compact) stays bare; only the full-page
   version gets the card chrome, with the nav + title as its window header. */
.dash-screen:not(.dash-compact) {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 34px -20px rgba(20, 14, 8, 0.45);
  padding: 0;
  overflow: hidden;
}
.dash-screen:not(.dash-compact) .dash-bar {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 60%, var(--raised));
}
.dash-screen:not(.dash-compact) .dash-head { padding: 0.85rem 0.95rem 0.7rem; }
.dash-screen:not(.dash-compact) .lesson-hub-types { padding: 0 0.95rem; margin-bottom: 0.5rem; }
.dash-screen:not(.dash-compact) .dash-sections { padding: 0.15rem 0.95rem 0.95rem; }

.dash-title { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.dash-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--clay); flex: none; }
.dash-dot.is-none { background: var(--muted); }
.dash-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 1rem;
}
.dash-sub { color: var(--muted); font-size: 0.95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dash-editbtn {
  flex: none;
  padding: 0.4rem 0.8rem;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.dash-editbtn:hover { border-color: var(--clay); color: var(--clay); }

/* each section is a subtle nested card so the page isn't one flat wall */
.dash-section {
  margin-bottom: 0.85rem;
  background: var(--surface);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
}
.dash-section:last-child { margin-bottom: 0; }
.dash-section-title {
  margin: 0 0 0.65rem;
  padding-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.dash-empty { color: var(--muted); font-style: italic; font-size: 0.9rem; padding: 0.1rem 0.1rem; }

/* ---- dashboard: helpful links widget ---- */
.dash-link-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0.6rem; }
.dash-link-row { display: flex; align-items: stretch; gap: 5px; }
.dash-link-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}
.dash-link-main:hover { border-color: var(--clay); }
.dash-link-ic { display: inline-flex; color: var(--clay); flex: none; }
.dash-link-ic svg { width: 18px; height: 18px; }
.dash-link-txt { min-width: 0; }
.dash-link-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-link-url { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-link-btn {
  flex: none;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
}
.dash-link-btn:hover { color: var(--ink); }
.dash-link-del:hover { color: var(--bad); border-color: var(--bad); }
.dash-link-btn svg { width: 16px; height: 16px; }
.dash-link-add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  background: none;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--clay);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.dash-link-add:hover { background: var(--surface); border-style: solid; }
.dash-link-plus { font-size: 1.1rem; line-height: 1; }
.dash-link-form { display: flex; flex-direction: column; gap: 8px; }
.dash-link-input {
  padding: 0.55rem 0.7rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.dash-link-input:focus { outline: none; border-color: var(--clay); }
.dash-link-form-actions { display: flex; gap: 0.5rem; }
.dash-save {
  padding: 0.4rem 0.9rem;
  border-radius: 9px;
  background: var(--clay);
  border: 1px solid var(--clay);
  color: var(--raised);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.dash-save:hover { filter: brightness(1.05); }

/* ---- dashboard: lists section ---- */
.dash-list-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.dash-list-main:hover { border-color: var(--clay); }
.dash-list-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

/* "Lessons" subheader in the to-do list picker */
.tlp-subhead {
  margin: 0.4rem 0.5rem 0.15rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---- dashboard: files section ---- */
.dash-block-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.6rem 0;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.dash-range-info { font-size: 0.84rem; color: var(--muted); min-width: 0; }
.dash-range-btn {
  flex: none;
  background: none;
  border: none;
  color: var(--clay);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
}
.dash-range-btn:hover { text-decoration: underline; }
.dash-extend-lbl { font-size: 0.85rem; color: var(--muted); }

/* ---- browse-and-pick modal (files) ---- */
.picker-panel { display: flex; flex-direction: column; max-height: 78vh; padding: 0; }
.picker-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
}
.picker-up {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}
.picker-up svg { width: 16px; height: 16px; }
.picker-loc { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-body { overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 3px; }
.picker-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.picker-row:hover { border-color: var(--clay); }
.picker-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.picker-ic { display: inline-flex; color: var(--muted); flex: none; }
.picker-ic svg { width: 18px; height: 18px; }
.picker-file .picker-ic { color: var(--clay); }
.picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-attach {
  flex: none;
  padding: 0.3rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--clay);
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}
.picker-attach:hover { border-color: var(--clay); }

/* ---- dashboard: this-day (date selector + plan note) ---- */
.dash-day-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.dash-day-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
}
.dash-day-arrow:hover:not(:disabled) { color: var(--clay); border-color: var(--clay); }
.dash-day-arrow:disabled { opacity: 0.35; cursor: default; }
.dash-day-arrow svg { width: 17px; height: 17px; }
.dash-day-label { flex: 1 1 auto; text-align: center; font-weight: 700; font-size: 1rem; }
.dash-day-meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.6rem; }
/* attached reusable lesson for the selected day */
.dash-lesson { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin-bottom: 0.6rem; }
.dash-lesson-cap {
  flex: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--moss); padding: 0.12rem 0.4rem; border-radius: 0.4rem;
  background: #E1E6D2; background: color-mix(in srgb, var(--moss) 16%, var(--raised));
}
.dash-lesson-name {
  font: inherit; font-weight: 600; color: var(--ink); background: none; border: none; padding: 0; cursor: pointer;
  text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--clay) 45%, transparent);
  text-underline-offset: 2px;
}
.dash-lesson-name:hover { color: var(--clay); }
.dash-note {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 84px;
  padding: 0.6rem 0.7rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}
.dash-note:focus { outline: none; border-color: var(--clay); }

/* ---- reusable panel grid: 1 column on narrow, more as width allows ---- */
/* Order-preserving (unlike CSS multi-column) and never overflows on mobile, */
/* because each track's min is capped at 100% of the container. Tune per-use  */
/* with --panel-min (panel breakpoint) and --panel-gap.                        */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--panel-min, 360px), 100%), 1fr));
  gap: var(--panel-gap, 1.6rem);
  align-items: start;
}

/* ---- dashboard: two balanced columns on wide screens ---- */
.dash-sections { --panel-min: 440px; }
@media (min-width: 900px) {
  .dash-screen { max-width: 1080px; }
}

/* ---- suspend transitions/animations during an active window resize ---- */
body.win-resizing *,
body.win-resizing *::before,
body.win-resizing *::after {
  transition: none !important;
  animation-duration: 0s !important;
}

/* ---- To-do: completed beside active on wide screens (reuses .panel-grid) ---- */
.todo-panels { --panel-min: 380px; }
@media (min-width: 940px) {
  .todo-screen { max-width: 880px; }
  /* a lone active list (no completed yet) stays a comfortable centered column */
  .todo-list-host > .todo-items:only-child {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- unified navigation: home + back cluster (mode bars) ---- */
.nav-cluster { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
}
.nav-btn:hover { color: var(--ink); border-color: var(--clay); }
.nav-btn svg { width: 18px; height: 18px; }

/* back affordance in the breadcrumb row (only shown when there's drill history) */
.crumb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  margin-right: 4px;
  flex: none;
}
.crumb-back:hover { color: var(--clay); border-color: var(--clay); }
.crumb-back svg { width: 16px; height: 16px; }

/* ---- settings: segmented control (layout presets) ---- */
.opt-seg {
  display: inline-flex;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.opt-seg-btn {
  padding: 0.3rem 0.7rem;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.opt-seg-btn:hover { color: var(--ink); }
.opt-seg-btn.on { background: var(--raised); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

/* ---- wider-content preset: relax centered max-widths ---- */
@media (min-width: 900px) {
  body.layout-wide .dash-screen { max-width: 1400px; }
  body.layout-wide .todo-screen { max-width: 1100px; }
}

/* ===================================================================
   WORKSPACE CANVAS (beta) — isolated tiling overlay. Also pilots the
   depth/glass visual language we want to spread through the app.
   =================================================================== */
.canvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--clay) 10%, var(--paper)) 0%, var(--paper) 55%),
    var(--paper);
}
.canvas-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--raised) 70%, transparent);
  backdrop-filter: blur(10px);
}
.canvas-bar-title { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.5rem; }
.canvas-beta {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clay);
  background: color-mix(in srgb, var(--clay) 14%, transparent);
  border-radius: 5px;
  padding: 1px 5px;
}
.canvas-bar-spacer { flex: 1 1 auto; }
.canvas-tool {
  padding: 0.4rem 0.8rem;
  background: color-mix(in srgb, var(--raised) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
}
.canvas-tool:hover { border-color: var(--clay); color: var(--clay); }
.canvas-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; padding: 0; }
.canvas-close svg { width: 16px; height: 16px; }

.canvas-surface {
  position: relative;
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px;
}
.canvas-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 64px 88px;
  pointer-events: none;
}
.canvas-layer { position: relative; min-height: 100%; }

.canvas-tile {
  position: absolute;
  container-type: inline-size;
  container-name: tile;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--raised) 60%, var(--line));
  background: color-mix(in srgb, var(--raised) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset,
    0 10px 30px -12px rgba(40, 30, 20, 0.45),
    0 2px 8px -4px rgba(40, 30, 20, 0.3);
  overflow: hidden;
  transition: box-shadow 0.16s ease;
}
.canvas-tile.dragging {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset,
    0 22px 50px -14px rgba(40, 30, 20, 0.55),
    0 4px 14px -4px rgba(40, 30, 20, 0.4);
  z-index: 5;
}
.canvas-tile-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  cursor: grab;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background: color-mix(in srgb, var(--raised) 40%, transparent);
  touch-action: none;
}
.canvas-tile.dragging .canvas-tile-head { cursor: grabbing; }
.canvas-grip { display: inline-flex; color: var(--muted); flex: none; }
.canvas-grip svg { width: 15px; height: 15px; }
.canvas-tile-name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-tile-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
}
.canvas-tile-x:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.canvas-tile-x svg { width: 14px; height: 14px; }
.canvas-tile-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding: 0.5rem;
}
.canvas-tile-hint { font-weight: 700; color: var(--ink); }
.canvas-tile-sub { font-size: 0.78rem; color: var(--muted); }
.canvas-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--muted) 45%, transparent) 50% 62%, transparent 62% 74%, color-mix(in srgb, var(--muted) 45%, transparent) 74% 86%, transparent 86%);
}

/* ---- canvas: pop-out FAB controls ---- */
.canvas-fab {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--raised) 60%, var(--line));
  background: color-mix(in srgb, var(--raised) 70%, transparent);
  backdrop-filter: blur(12px);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 22px -10px rgba(40, 30, 20, 0.5);
}
.canvas-fab:hover { color: var(--clay); border-color: var(--clay); }
.canvas-fab svg { width: 20px; height: 20px; }
.canvas-pop {
  position: absolute;
  top: 70px;
  left: 16px;
  z-index: 21;
  width: 220px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--raised) 60%, var(--line));
  background: color-mix(in srgb, var(--raised) 80%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 16px 40px -14px rgba(40, 30, 20, 0.55);
}
.canvas-overlay.pop-open .canvas-pop { display: flex; }
.canvas-pop-title {
  font-weight: 800;
  padding: 0.3rem 0.5rem 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.canvas-pop-item {
  text-align: left;
  padding: 0.55rem 0.6rem;
  background: none;
  border: none;
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.canvas-pop-item:hover { background: color-mix(in srgb, var(--clay) 12%, transparent); color: var(--clay); }
.canvas-pop-close { color: var(--bad); }
.canvas-pop-close:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }

/* ---- canvas: tile expand button ---- */
.canvas-tile-exp {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
}
.canvas-tile-exp:hover { color: var(--clay); background: color-mix(in srgb, var(--clay) 10%, transparent); }
.canvas-tile-exp svg { width: 15px; height: 15px; }

/* ---- canvas: live module content ---- */
.cm-msg {
  margin: auto;
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
}
.cm-list { display: flex; flex-direction: column; gap: 2px; }
.cm-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
}
.cm-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.cm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.cm-stripe { flex: none; width: 3px; align-self: stretch; min-height: 16px; border-radius: 2px; background: var(--muted); }
.cm-cal-per { flex: none; min-width: 26px; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.cm-row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.cm-row-meta { flex: none; font-size: 0.72rem; color: var(--muted); }
.cm-cal-date { font-weight: 700; font-size: 0.8rem; color: var(--ink); padding: 0.1rem 0.45rem 0.4rem; }

/* ---- canvas: tiles respond to their OWN size (container queries) ----
   This is the "little iPhone" foundation: as a tile shrinks, its content
   compacts the same way a narrow viewport would. Real feature views will
   plug into this same mechanism. */
@container tile (max-width: 220px) {
  .cm-row-meta { display: none; }
  .cm-row-title { font-size: 0.82rem; }
}
@container tile (max-width: 160px) {
  .cm-cal-per { display: none; }
  .cm-cal-date { font-size: 0.72rem; }
  .canvas-tile-name { font-size: 0.85rem; }
  .canvas-tile-exp { display: none; }
}

/* ---- the REAL To-do list hosted inside a tile ----
   Same markup the full screen uses; these rules only tighten spacing and, as the
   tile narrows, shed secondary affordances so the core list stays legible. They
   are scoped to .tile-todo and gated behind @container, so the global To-do
   screen (never inside a .canvas-tile) is completely untouched. */
.tile-todo { padding: 2px; }
.tile-todo .todo-items { gap: 6px; }
.tile-todo .panel-grid.todo-panels { gap: 10px; }
.tile-todo .todo-empty,
.tile-todo .todo-none { padding: 0.6rem 0.4rem; }
@container tile (max-width: 360px) {
  .tile-todo .todo-item { padding: 7px 9px; }
  .tile-todo .todo-item-title { font-size: 0.9rem; }
}
@container tile (max-width: 260px) {
  .tile-todo .todo-item-actions { display: none; } /* swipe still deletes; expand for the full row */
  .tile-todo .todo-sub { display: none; }
  .tile-todo .todo-item { padding: 6px 8px; }
  .tile-todo .todo-item-title { font-size: 0.84rem; }
  .tile-todo .todo-completed-head { font-size: 0.8rem; }
}
@container tile (max-width: 180px) {
  .tile-todo .todo-completed { display: none; } /* keep just the active list */
  .tile-todo .todo-item-title { font-size: 0.8rem; }
  .tile-todo .todo-check { transform: scale(0.9); }
}

/* ---- inline quick-add row for a tile (reusable across module tiles) ----
   Sits outside the live list host, so it persists across refreshes and keeps
   focus for rapid entry. */
.tile-add {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 2px 2px 7px;
  background: color-mix(in srgb, var(--raised) 90%, transparent);
}
.tile-add-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--raised) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 9px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tile-add-input::placeholder { color: var(--muted); }
.tile-add-input:focus {
  border-color: color-mix(in srgb, var(--clay) 45%, var(--line));
  background: var(--raised);
}
.tile-add-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: color-mix(in srgb, var(--clay) 16%, var(--raised));
  color: var(--clay);
  cursor: pointer;
  transition: background 0.15s ease;
}
.tile-add-btn:hover { background: color-mix(in srgb, var(--clay) 26%, var(--raised)); }
.tile-add-btn:disabled { opacity: 0.5; cursor: default; }
.tile-add-btn svg { width: 17px; height: 17px; }
@container tile (max-width: 200px) {
  .tile-add-input { font-size: 0.82rem; padding: 6px 8px; }
  .tile-add-btn { width: 28px; height: 28px; }
}

/* ---- the REAL Schedule day view hosted inside a tile ----
   Same markup the full screen uses; gated behind @container + scoped to
   .tile-sched, so the full Schedule screen is untouched. As the tile narrows it
   sheds the period clock, class badge, and notes, keeping the period list legible. */
.tile-sched { padding: 2px; }
.tile-sched .sched-dayview { gap: 8px; }
@container tile (max-width: 360px) {
  .tile-sched .sched-period-time { display: none; }
  .tile-sched .sched-card-subject { font-size: 0.86rem; }
  .tile-sched .sched-card-note { display: none; }
}
@container tile (max-width: 260px) {
  .tile-sched .sched-card-class { display: none; }
  .tile-sched .sched-row { font-size: 0.82rem; }
  .tile-sched .sched-addslot,
  .tile-sched .sched-addmini { font-size: 0.78rem; }
}
@container tile (max-width: 180px) {
  .tile-sched .sched-daytrow { display: none; } /* day-type toggle hidden; date nav stays */
  .tile-sched .sched-period-label { font-size: 0.78rem; }
}

/* ---- the REAL kanban Board hosted inside a tile ----
   renderBoard fills the tile; columns keep their min-width and scroll
   horizontally, then shrink via @container so more than one column shows on
   narrow tiles. Scoped to .tile-board, so the full Board screen is untouched. */
.board-host { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; }
.tile-board { width: 100%; min-height: 0; }
/* Wide-ish tile (still fits three columns): shrink them so all three show
   without horizontal scroll. */
@container tile (max-width: 900px) {
  .tile-board .board-col { flex-basis: 230px; min-width: 216px; }
}
/* Too narrow for three columns (~3×216 + gaps): stack them vertically instead
   of leaving the board half-cut behind a horizontal scroll. This is container-
   based, so it also stacks when the WORKSPACE tile is narrow on a wide window —
   the full-screen Board keeps its own window-based rule. */
@container tile (max-width: 700px) {
  .tile-board { flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .tile-board .board-col { flex: 0 0 auto; width: 100%; min-width: 0; min-height: 148px; }
  .tile-board .board-card-loc { display: revert; }
}

/* ---- the "map everything" overview hosted inside a tile (read-only) ----
   Forced condensed; fills the tile and scrolls. Scoped to .tile-map-host. */
.tile-map-host { width: 100%; min-height: 0; }
.tile-map-host .wholemap.tile-map { width: 100%; }
.tile-map-host .map-col-head { font-size: 0.84rem; }
@container tile (max-width: 240px) {
  .tile-map-host .map-col-head { font-size: 0.78rem; }
}

/* ---- a lesson's helpful links hosted inside a tile ---- */
.tile-links { padding: 2px; }
.tile-links .dash-link-url { font-size: 0.74rem; }
@container tile (max-width: 220px) {
  .tile-links .dash-link-url { display: none; }
}

/* ---- canvas: edge-reveal side drawer (replaces the corner FAB) ----
   At rest only a slim vertical "grabber" shows at the left edge, so no tile is
   covered. Hovering the edge (desktop) or tapping the grabber (mobile) slides
   the full-height menu out. */
.canvas-drawer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 250px;
  transform: translateX(-250px);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100000;
  display: flex;
}
.canvas-drawer:hover,
.canvas-drawer.open { transform: translateX(0); }
.canvas-drawer-panel {
  flex: 1 1 auto;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1.1rem 0.8rem;
  background: color-mix(in srgb, var(--raised) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  border-right: 1px solid color-mix(in srgb, var(--raised) 55%, var(--line));
  box-shadow: 10px 0 44px -16px rgba(40, 30, 20, 0.5);
}
/* the always-visible affordance: a full-height hover strip with a centered pill */
.canvas-handle {
  position: absolute;
  top: 0;
  left: 100%;
  width: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.canvas-handle-bar {
  width: 5px;
  height: 52px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--clay) 50%, var(--line));
  box-shadow: 0 1px 4px rgba(40, 30, 20, 0.18);
  transition: height 0.2s ease, width 0.2s ease, background 0.2s ease;
}
.canvas-handle:hover .canvas-handle-bar,
.canvas-drawer:hover .canvas-handle-bar {
  background: var(--clay);
  height: 76px;
  width: 6px;
}

/* ============ blades home (beta) ============
   Header + app-nav bar stay; the content area becomes two squared blade panels
   on the left and a Workspace pane on the right, with a draggable splitter. */
body.home-blades .content { max-width: none; padding: 0.7rem; }

.blades { display: flex; align-items: stretch; gap: 0; --blade-left: 42%; }
.blades-left {
  flex: 0 0 var(--blade-left);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.blades-right { flex: 1 1 auto; min-width: 0; display: flex; }
.blades-split {
  flex: 0 0 14px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
}
.blades-split-bar {
  width: 4px;
  height: 54px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--clay) 40%, var(--line));
  transition: height 0.18s ease, background 0.18s ease;
}
.blades-split:hover .blades-split-bar { height: 80px; background: var(--clay); }

.blade {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px -14px rgba(40, 30, 20, 0.4);
  overflow: hidden;
}
.blade-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.blade-title { font-weight: 700; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.blade-full {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.blade-full:hover { background: color-mix(in srgb, var(--clay) 14%, transparent); color: var(--clay); }
.blade-full svg { width: 16px; height: 16px; }
.blade-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px; }
.blade-pad { padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.blade-dash-lesson { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.blade-dash-sub { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.blade-openbtn {
  margin-top: 2px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--raised);
  background: var(--clay);
  border: none;
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
}
.blade-openbtn:hover { background: color-mix(in srgb, var(--clay) 88%, black); }
.blade-workspace { background: color-mix(in srgb, var(--clay) 5%, var(--raised)); }
.blade-ws-body { align-items: center; justify-content: center; text-align: center; }

@media (max-width: 760px) {
  .blades { flex-direction: column; height: auto !important; }
  .blades-left { flex: 0 0 auto; width: auto; }
  .blades-right { flex: 0 0 auto; }
  .blades-split { display: none; }
  .blade { flex: 0 0 auto; min-height: 240px; }
  .blade-workspace { min-height: 160px; }
}

/* ---- Files blade: a self-contained folder navigator ---- */
.blade-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 8px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--raised) 92%, transparent);
}
.blade-up {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--clay);
  background: color-mix(in srgb, var(--clay) 10%, transparent);
  border: none;
  border-radius: 8px;
  padding: 4px 9px 4px 7px;
  cursor: pointer;
}
.blade-up:hover { background: color-mix(in srgb, var(--clay) 18%, transparent); }
.blade-up-ic { font-weight: 700; }
.blade-up-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blade-path {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blade-filelist { border: none; background: transparent; gap: 2px; }
.blade-loading { color: var(--muted); padding: 0.6rem 0.4rem; font-size: 0.85rem; }

/* ---- compact Lesson Dashboard inside a blade ---- */
.dash-screen.dash-compact { max-width: none; margin: 0; padding: 0; }
.dash-compact .dash-section { margin-bottom: 0.9rem; }
.dash-compact .dash-section:last-child { margin-bottom: 0.2rem; }
.dash-compact .dash-section-title { font-size: 0.82rem; margin: 0 0 0.4rem; padding-bottom: 0.3rem; }
.dash-head-compact { padding: 0.1rem 0.15rem 0.55rem; gap: 0.5rem; }
.dash-head-compact .dash-sub { font-size: 0.8rem; }
.dash-head-compact .dash-editbtn { padding: 3px 9px; font-size: 0.78rem; }

/* blade header color dot (Lesson Dashboard shows its lesson colour) */
.blade-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

/* tighter blade-home spacing */
body.home-blades .content { padding: 0.5rem; }
.blades-left { gap: 8px; }
.blade-head { padding: 6px 10px; }
.blade-body { padding: 6px; }

/* ============ mobile / responsive polish ============ */

/* (1) Schedule tile: trim spacing, especially as the tile/window narrows */
.tile-sched .sched-dayview { gap: 7px; }
.tile-sched .sched-day { gap: 5px; }
.tile-sched .sched-datenav { margin-bottom: 6px; }
@container tile (max-width: 300px) {
  .tile-sched .sched-datenav { gap: 4px; margin-bottom: 4px; }
  .tile-sched .sched-row { padding-top: 5px; padding-bottom: 5px; }
  .tile-sched .sched-day { gap: 4px; }
}

/* (2) Board: stack the three columns when too narrow ("condensed" board).
   Works for the full board (media query) and for a Workspace tile (container). */
@media (max-width: 640px) {
  .board { flex-direction: column; overflow-x: hidden; overflow-y: auto; gap: 10px; }
  .board-col { flex: 0 0 auto; min-width: 0; width: 100%; min-height: auto; }
  .board-col-body { overflow: visible; }
  .board-col-head { padding: 5px 10px; font-size: 0.85rem; } /* thinner header */
  .board-card { padding: 8px 10px; } /* condensed, still touch-friendly */
}
@container tile (max-width: 340px) {
  .tile-board { flex-direction: column; overflow-x: hidden; overflow-y: auto; height: auto; }
  .tile-board .board-col { flex: 0 0 auto; min-width: 0; width: 100%; min-height: auto; }
  .tile-board .board-col-body { overflow: visible; }
  .tile-board .board-col-head { padding: 4px 9px; font-size: 0.82rem; }
  .tile-board .board-card { padding: 7px 9px; }
}

/* (3) Blade home on mobile: the Workspace pane collapses to a header bar with a
   full-screen button (no room to run it live alongside the other blades). */
@media (max-width: 760px) {
  .blade-workspace .blade-body { display: none; }
  .blade-workspace { min-height: 0; flex: 0 0 auto; }
}

/* (4) Workspace "move mode": tile content is inert so dragging/panning never
   trips a module; the whole tile is a drag handle. */
.canvas-arrange .canvas-tile-body { pointer-events: none; }
.canvas-arrange .canvas-tile {
  cursor: move;
  outline: 2px dashed color-mix(in srgb, var(--clay) 55%, transparent);
  outline-offset: -2px;
}
.canvas-arrange .canvas-tile-head { cursor: move; }
.canvas-arrange-hint {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: var(--ink);
  color: var(--raised);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- blade title-bar tabs (e.g. Lesson ⇄ Calendar) ---- */
.blade-tabs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.blade-tab {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.blade-tab:hover { color: var(--ink); }
.blade-tab.on { color: var(--ink); background: color-mix(in srgb, var(--clay) 14%, transparent); }
.blade-cal { padding-top: 2px; }

/* compact dashboard identity (lesson name + colour dot, since tabs replace the blade title) */
.dash-compact-id {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font: inherit;
  border: none;
  background: transparent;
  padding: 2px 6px 2px 2px;
  margin: -2px 0;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
}
.dash-compact-id:hover { background: color-mix(in srgb, var(--clay) 12%, transparent); }
.dash-compact-name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-compact-chev { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.dash-compact-chev svg { width: 14px; height: 14px; }
.blade-calside {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 3px 8px;
  cursor: pointer;
}
.blade-calside:hover { color: var(--clay); background: color-mix(in srgb, var(--clay) 13%, transparent); }
.blade-calside svg { width: 14px; height: 14px; }

/* ---- left column balance: condense Files, give the calendar/lesson more room ---- */
.blades-left .blade-files { flex: 0 1 36%; min-height: 130px; }
.blades-left .blade-dash { flex: 1 1 auto; }

/* ---- home Calendar: compact view switcher (Day / Week / Month / Year) ---- */
.blade-calsw { display: flex; gap: 3px; margin-bottom: 7px; flex-wrap: wrap; }
/* single-letter view switcher living in the module header (Calendar tab only) */
.blade-calsw-head {
  display: inline-flex; gap: 2px; flex: none; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2px;
}
.blade-calsw-hbtn {
  width: 24px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px; background: transparent;
  font: inherit; font-size: 0.74rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.blade-calsw-hbtn:hover { color: var(--ink); }
.blade-calsw-hbtn.on { background: var(--clay); color: var(--on-accent); }
.blade-calsw-btn {
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 3px 9px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.blade-calsw-btn:hover { color: var(--ink); }
.blade-calsw-btn.on { color: var(--ink); background: color-mix(in srgb, var(--clay) 15%, transparent); }

/* ---- heavily condensed nav + grids inside a home Calendar blade, so day/week/
   month all fit; contents fill whatever width the blade is given ---- */
.blade-cal .sched-datenav { gap: 4px; margin-bottom: 6px; }
.blade-cal .sched-navbtn { padding: 3px 7px; }
.blade-cal .sched-navbtn svg { width: 14px; height: 14px; }
.blade-cal .sched-navlabel { font-size: 0.82rem; }
.blade-cal .sched-today { padding: 3px 9px; font-size: 0.76rem; }
.blade-cal .sched-daytrow { margin-bottom: 5px; }
.blade-cal-week, .blade-cal-month { font-size: 0.7rem; }
.blade-cal-week .sched-week { width: 100%; }
.blade-cal-week .sched-wk-cell { padding: 3px; min-height: 0; }
.blade-cal-month .sched-month { width: 100%; }
.blade-cal-month .sched-mo-cell { padding: 2px; min-height: 0; }

/* ---- inline docked Workspace: auto-grid of live, non-movable module cards ---- */
.blade-workspace .blade-body { padding: 6px; }
/* Masonry-ish columns: N flex columns, each stacking its module cards. Cards in
   a column flex to share height evenly, so two modules in one column each get
   half — a compact module "tucks under" a full one. */
.dock-cols {
  display: flex;
  gap: 10px;
  align-items: stretch;
  min-height: 100%;
  height: 100%;
}
.dock-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dock-card {
  flex: 1 1 0; /* share the column's height with any card stacked beside it */
  display: flex;
  flex-direction: column;
  min-height: 120px;
  min-width: 0;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px -10px rgba(40, 30, 20, 0.35);
}
.dock-card-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.dock-card-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-card-exp {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.dock-card-exp:hover { background: color-mix(in srgb, var(--clay) 14%, transparent); color: var(--clay); }
.dock-card-exp svg { width: 14px; height: 14px; }
/* drag grip — subtle until hovered; the whole card is a drop target */
.dock-card-grip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; margin-right: 1px; color: var(--muted); cursor: grab; opacity: 0; transition: opacity 0.12s ease; }
.dock-card:hover .dock-card-grip { opacity: 0.7; }
.dock-card-grip:active { cursor: grabbing; }
.dock-card-grip svg { width: 13px; height: 13px; }
.dock-card.dragging { opacity: 0.5; }
.dock-card.drag-over { outline: 2px dashed var(--clay); outline-offset: -3px; }
/* reorder controls — subtle until the card is hovered */
.dock-card-move { flex: 0 0 auto; display: inline-flex; gap: 1px; opacity: 0; transition: opacity 0.12s ease; }
.dock-card:hover .dock-card-move, .dock-card-move:focus-within { opacity: 1; }
.dock-card-mv {
  width: 20px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
}
.dock-card-mv:hover { background: color-mix(in srgb, var(--clay) 14%, transparent); color: var(--clay); }
.dock-card-mv svg { width: 13px; height: 13px; }
/* compact modules read at a glance: tighter body padding */
.dock-card-compact .dock-card-body { padding: 3px; }
.dock-card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 6px;
  container-type: inline-size;
  container-name: tile;
}

/* settings gear in the Workspace blade header (choose home modules) */
.blade-gear {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.blade-gear:hover { background: color-mix(in srgb, var(--clay) 14%, transparent); color: var(--clay); }
.blade-gear svg { width: 16px; height: 16px; }

/* home glyph on the root breadcrumb (intuitive "back home") */
.crumb-home { display: inline-flex; align-items: center; gap: 5px; }
.crumb-home svg { width: 15px; height: 15px; }

/* Links module: clickable source-lesson header + tightened rows (save vertical space) */
.tile-links-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font: inherit;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px 6px;
  color: var(--ink);
}
.tile-links-head:hover .tile-links-lesson { color: var(--clay); }
.tile-links-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }
.tile-links-dot.is-none { background: var(--line); }
.tile-links-lesson {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-links-chev { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.tile-links-chev svg { width: 13px; height: 13px; }
.tile-links .dash-link-url { display: none; }
.tile-links .dash-link-row { padding-top: 3px; padding-bottom: 3px; }
.tile-links .dash-link-add { padding-top: 4px; padding-bottom: 4px; }

/* embedded draggable Files map (Workspace "Files" tab + Map module) */
.wsfiles { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.blade-wsfiles { height: 100%; }
.wsfiles-head { display: flex; align-items: center; gap: 6px; padding: 4px 4px 8px; flex: 0 0 auto; }
.wsfiles-up {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.wsfiles-up:hover:not(:disabled) { background: color-mix(in srgb, var(--clay) 14%, transparent); color: var(--clay); }
.wsfiles-up:disabled { opacity: 0.35; cursor: default; }
.wsfiles-up svg { width: 15px; height: 15px; }
.wsfiles-loc {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wsfiles-stage { flex: 1 1 auto; min-height: 0; overflow: auto; }
.wsfiles-stage .wholemap { height: auto; }

/* the full-screen map views span the width (independent of the home layout) */
body.map-wide .content { max-width: none; padding: 0.7rem 1rem; }

/* embedded Files: New folder button in the header */
.wsfiles-newf {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.wsfiles-newf:hover { background: color-mix(in srgb, var(--clay) 14%, transparent); color: var(--clay); }
.wsfiles-newf svg { width: 16px; height: 16px; }

/* ===== editable fields: clearer resting border on every theme ================
   Appended last so it wins over each field's base `border: … var(--line)`.
   Focus still highlights in --clay (existing :focus rules, plus the group below
   for fields that lacked one), so the hover/focus cue is preserved. */
textarea,
.input,
.search-input,
.sched-input,
.sched-note,
.todo-f-title,
.todo-f-note,
.todo-f-date,
.todo-f-time,
.tile-add-input,
.tag-name-input,
.hex-input {
  border-color: var(--field-border);
}
textarea:focus,
.input:focus,
.sched-input:focus,
.sched-note:focus,
.todo-f-title:focus,
.todo-f-note:focus,
.todo-f-date:focus,
.todo-f-time:focus,
.tile-add-input:focus {
  border-color: var(--clay);
  outline: none;
}