/* ===========================================================================
   Journal — hand-written, tokenized stylesheet. No framework, no build step.
   Everything keys off the CSS custom properties in :root / [data-theme=dark].
   =========================================================================== */

/* --- design tokens -------------------------------------------------------- */
:root {
  --jbg-1: #eef2ff;
  --jbg-2: #e0e7ff;
  --jbg-3: #f5f3ff;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-solid: #ffffff;
  --panel-border: rgba(255, 255, 255, 0.9);
  --ink: #1e293b;
  --ink-soft: #475569;
  --muted: #94a3b8;
  --accent: #6366f1;
  --accent-soft: #eef2ff;
  --line: rgba(100, 116, 139, 0.16);
  --danger: #f43f5e;
  --ok: #10b981;
  --shadow: 0 10px 30px -12px rgba(79, 70, 229, 0.25);
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
}

[data-theme="dark"] {
  --jbg-1: #0b1120;
  --jbg-2: #111827;
  --jbg-3: #0f172a;
  --panel: rgba(30, 41, 59, 0.62);
  --panel-solid: #1e293b;
  --panel-border: rgba(148, 163, 184, 0.12);
  --ink: #e2e8f0;
  --ink-soft: #cbd5e1;
  --muted: #64748b;
  --accent: #818cf8;
  --accent-soft: rgba(129, 140, 248, 0.12);
  --line: rgba(148, 163, 184, 0.16);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}

/* --- reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

body {
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(135deg, var(--jbg-1), var(--jbg-2) 55%, var(--jbg-3));
  background-attachment: fixed;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

/* --- tiny utility layer (only what the templates use) --------------------- */
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.grow { flex: 1 1 auto; }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.center { justify-content: center; }
.end { justify-content: flex-end; }
.hidden { display: none; }
.relative { position: relative; }
.mt-1 { margin-top: 0.4rem; }
.mt-2 { margin-top: 0.75rem; }
.mt-3 { margin-top: 1rem; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.tiny { font-size: 0.72rem; }
.danger { color: var(--danger); }

.ico { width: 1.25rem; height: 1.25rem; }
.ico-sm { width: 1rem; height: 1rem; flex-shrink: 0; }
/* Skill-card header: a long description must wrap, not shove the +Perk / Edit
   actions off the row (which had collapsed the pencil icon to zero width). */
.skill-head > .row:first-child, .skill-head .col { min-width: 0; }
.skill-head > .row:last-child { flex-shrink: 0; }
.ico-xs { width: 0.9rem; height: 0.9rem; }
.ico-lg { width: 1.5rem; height: 1.5rem; }
/* Inline icons that sit within a line of text (e.g. the sticky/clipper filter
   labels) — sized in em so they scale with the text and align to the baseline. */
.ico-inline { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.ico-clip { color: var(--accent); }
.emoji-ico { font-size: 1.2rem; line-height: 1.25rem; display: inline-block; }
.thumb { width: 3rem; height: 3rem; border-radius: 0.6rem; object-fit: cover; }

/* Staged uploads (chosen, not yet posted) */
.upload-staging { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.upload-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--muted); }
.upload-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-pct { font-variant-numeric: tabular-nums; color: var(--accent); }

/* Saved attachments on a note */
.attachments { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.att-img { position: relative; margin: 0; }
.att-img img { max-width: 16rem; max-height: 16rem; border-radius: 0.7rem; display: block; border: 1px solid var(--border); }
.att-file { position: relative; display: inline-flex; align-items: center; }
.att-file > a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.7rem; border: 1px solid var(--border);
  border-radius: 0.7rem; background: var(--surface); color: var(--text); text-decoration: none; max-width: 18rem; }
.att-file > a:hover { border-color: var(--accent); color: var(--accent); }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { color: var(--muted); font-size: 0.75rem; }
.att-del { position: absolute; top: 0.3rem; right: 0.3rem; width: 1.4rem; height: 1.4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 88%, transparent); color: #fff; font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.att-del:hover { filter: brightness(1.1); }

/* --- layout ---------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem;
  align-items: start;
}
/* Tablet portrait (600–1024px, e.g. 800px WXGA+): keep both columns but slim
   the sidebar, so the calendar/search stay beside the timeline instead of
   sinking to the bottom. */
@media (max-width: 1024px) {
  .app-shell { grid-template-columns: 280px minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
}
/* On phones the timeline matters most, so it comes first; the calendar /
   search / tags sidebar drops below it and stops being sticky.
   minmax(0, …) matters: a bare 1fr track has an implicit min-width of auto,
   so one memo with wide unbreakable content (loaded via infinite scroll or a
   filter reset) would blow the single column — and the whole page — out to
   its content width. */
@media (max-width: 700px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .sidebar { position: static; top: auto; max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
  .app-shell { padding: 0.6rem; gap: 0.75rem; }
  .composer-foot { flex-direction: column; align-items: stretch; }
  .composer-foot > .row { width: 100%; }
  .composer-foot select { flex: 1 1 auto; }
  .composer-foot .btn-primary { width: 100%; }
  .timeline-head { flex-wrap: wrap; margin: 1rem 0.25rem 0.75rem; }
  .jmodal { padding: 1.25rem; }
}

.panel {
  background: var(--panel);
  backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* --- sidebar --------------------------------------------------------------- */
/* The sidebar scrolls on its own axis, independent of the timeline: it's capped
   to the viewport height and scrolls internally (wheel/touch) with the bar
   hidden across all engines. `min-height: 0` lets the flex column actually
   shrink to the cap so overflow can kick in. */
.sidebar {
  position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
  max-height: calc(100vh - 3rem); min-height: 0; overflow-y: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge */
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chromium/WebKit */
/* Phones: the sidebar is a normal stacked block that scrolls away with the page,
   NOT a viewport-tall sticky panel. Capping its height (above) made it shorter
   than the screen, so `position: sticky` pinned it on top of the feed and the
   calendar bled through while scrolling. This override MUST sit after the base
   rule to win the cascade (equal specificity → source order decides). */
@media (max-width: 700px) {
  .sidebar { position: static; top: auto; max-height: none; overflow: visible; }
}
.brand { padding: 1rem 1.25rem; position: relative; z-index: 30; }
.brand-name { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.icon-btn { color: var(--muted); padding: 0.35rem; border-radius: 0.6rem; transition: all 0.15s; display: inline-flex; }
.icon-btn:hover { color: var(--accent); background: var(--accent-soft); }

.side-card { padding: 1rem 1.25rem; }
.field {
  width: 100%; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink);
  border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; font-size: 0.9rem;
}
.field:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.field-auto { width: auto; }
.swatch { width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--line); border-radius: 0.6rem; background: none; }

.search-wrap { position: relative; }
.search-wrap .ico-sm { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-wrap .field { padding-left: 2.2rem; }

.notif { position: absolute; right: 0; margin-top: 0.5rem; width: 16rem; padding: 0.75rem; z-index: 40; }
.notif-badge { position: absolute; top: -2px; right: -2px; font-size: 10px; background: var(--danger); color: #fff; border-radius: 999px; padding: 0 4px; }

/* --- calendar -------------------------------------------------------------- */
/* Calendar capped to ~85% width (centered) so it's about 15% smaller overall —
   the square day cells scale with the grid width, so all six week-rows fit
   without the last one clipping on mobile (the sidebar doesn't scroll there,
   only the timeline does). Fonts trimmed to match. */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 0 auto 0.5rem; max-width: 85%; }
.cal-title { font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; max-width: 85%; margin-inline: auto; }
.cal-dow { font-size: 0.62rem; color: var(--muted); padding: 0.2rem 0; }
.cal-day { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; border-radius: 0.5rem; cursor: pointer; color: var(--ink-soft); }
.cal-day:hover { background: var(--accent-soft); }
.cal-day.today { outline: 1.5px solid var(--accent); font-weight: 700; }
.cal-day.selected { background: var(--accent); color: #fff; }
.cal-day.has-dot::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal-day.selected.has-dot::after { background: #fff; }
.cal-day.has-reminder::before { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }

/* --- tags ------------------------------------------------------------------ */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag { font-size: 0.78rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); cursor: pointer; border: 1px solid transparent; transition: all 0.15s; }
.tag:hover { border-color: var(--accent); }
.tag.active { background: var(--accent); color: #fff; }

/* --- composer -------------------------------------------------------------- */
.composer { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.composer-tools { display: flex; gap: 0.25rem; color: var(--muted); }
.composer-text { width: 100%; border: none; background: transparent; resize: vertical; min-height: 70px;
  color: var(--ink); font-size: 0.95rem; line-height: 1.5; }
.composer-text:focus { outline: none; }
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  border-top: 1px solid var(--line); padding-top: 0.6rem; }

.btn-primary { background: var(--accent); color: #fff; border-radius: 0.7rem; padding: 0.5rem 1.1rem;
  font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { color: var(--ink-soft); border-radius: 0.7rem; padding: 0.5rem 1rem; font-size: 0.9rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-outline { border: 1px solid var(--line); }

/* --- timeline & memos ------------------------------------------------------ */
.timeline-head { display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0.75rem;
  position: sticky; top: 0; z-index: 20; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm);
  background: var(--panel); backdrop-filter: blur(12px); border: 1px solid var(--panel-border); }
.timeline-head h2 { font-size: 1.4rem; font-weight: 700; }
.timeline-head .count { color: var(--muted); font-size: 0.9rem; }
.feed { display: flex; flex-direction: column; gap: 1rem; }

/* Pastebin pages (anonymous create + read-only view) */
.paste-shell { max-width: 760px; margin: 2.5rem auto; padding: 1rem; }
.paste-card { background: var(--panel); backdrop-filter: blur(14px); border: 1px solid var(--panel-border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.75rem; }
.paste-h1 { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.paste-text { width: 100%; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink);
  border-radius: var(--radius-sm); padding: 0.8rem; font-size: 0.92rem; line-height: 1.5; resize: vertical;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.paste-text:focus { outline: 2px solid var(--accent); }
.paste-linkbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.paste-url { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
.paste-body { margin-top: 0.75rem; }
.paste-empty { text-align: center; }

/* Composer/edit: Public-paste checkbox toggles which controls show (CSS :has) */
.paste-toggle { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; white-space: nowrap; }
.paste-toggle input { margin: 0; width: auto; }
.paste-n { width: 6.5rem; }
.paste-when-on { display: none !important; }
.paste-row:has(.paste-cb:checked) .paste-when-on { display: inline-flex !important; }
.paste-row:has(.paste-cb:checked) .paste-when-off { display: none !important; }

/* Secret-link strip shown on a rendered paste card */
.paste-link { display: flex; gap: 0.4rem; align-items: center; margin: 0.45rem 0; font-size: 0.82rem; }
.paste-link input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; }
.paste-badge { font-size: 0.68rem; font-weight: 600; padding: 0.08rem 0.45rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); white-space: nowrap; }
.paste-badge.anon { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.paste-badge.dead { background: color-mix(in srgb, #ef4444 16%, transparent); color: #b91c1c; }

/* Back-to-top floating button (visibility toggled by app.js on scroll) */
.scroll-top { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 60; width: 2.75rem; height: 2.75rem;
  border-radius: 999px; background: var(--accent); color: #fff; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.scroll-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top:hover { filter: brightness(1.08); }

.memo { padding: 1.1rem 1.3rem; background: var(--panel); backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border); border-radius: 1.1rem; box-shadow: var(--shadow); }
.memo-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.memo-stamp { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.memo-actions { display: flex; gap: 0.15rem; opacity: 0; transition: opacity 0.15s; }
.memo:hover .memo-actions { opacity: 1; }
.act { color: var(--muted); padding: 0.3rem; border-radius: 0.5rem; display: inline-flex; }
.act:hover { color: var(--accent); background: var(--accent-soft); }
.act-danger:hover { color: var(--danger); }
.act-on { color: var(--ok); }
.pinned { color: var(--accent); display: inline-flex; }

/* Pin scopes — colour signals where a note is pinned */
.pin-all { color: var(--accent); }      /* everywhere — indigo */
.pin-workspace { color: #f59e0b; }       /* this workspace — amber */
.pin-public { color: #10b981; }          /* public view — green */

.pin-menu { position: relative; }
.pin-menu > summary { list-style: none; }
.pin-menu > summary::-webkit-details-marker { display: none; }
.pin-pop { position: absolute; right: 0; margin-top: 0.35rem; z-index: 40; width: 13rem;
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem; }
.pin-opt { display: flex; align-items: center; gap: 0.45rem; text-align: left; white-space: nowrap;
  padding: 0.4rem 0.5rem; border-radius: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.pin-opt:hover { background: var(--accent-soft); }
.ws-dot { font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ws) 18%, transparent); color: var(--ws); }
.author { font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.collab-badge { font-size: 0.65rem; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.member-row { padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.memo-body { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; overflow-wrap: anywhere; }
.memo-body pre { max-width: 100%; overflow-x: auto; }
.memo-body img { max-width: 100%; height: auto; }
/* Markdown tables (clipped pages, hand-written pipes). display:block lets a
   wide table scroll inside its own card instead of stretching the page. */
.memo-body table { border-collapse: collapse; font-size: 0.88rem; margin: 0.5rem 0;
  display: block; max-width: 100%; overflow-x: auto; }
.memo-body th, .memo-body td { border: 1px solid var(--line); padding: 0.3rem 0.6rem;
  text-align: left; vertical-align: top; }
.memo-body th { background: color-mix(in srgb, var(--muted) 12%, transparent); font-weight: 600; }
.memo-body tr:nth-child(even) td { background: color-mix(in srgb, var(--muted) 5%, transparent); }
.memo-body h1, .memo-body h2, .memo-body h3 { color: var(--ink); font-weight: 700; margin: 0.4rem 0; }
.memo-body h2 { font-size: 1.15rem; }
.memo-body h3 { font-size: 1.02rem; }
.memo-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.memo-body ul, .memo-body ol { padding-left: 1.2rem; margin: 0.3rem 0; }
.memo-body ul { list-style: disc; }
.memo-body ol { list-style: decimal; }
.memo-body img { border-radius: 0.75rem; margin: 0.4rem 0; }
.memo-body code { background: var(--accent-soft); padding: 0.1rem 0.35rem; border-radius: 0.35rem; font-size: 0.85em; }
.memo-body pre { padding: 0.9rem 1.1rem; border-radius: 0.7rem; overflow-x: auto; margin: 0.5rem 0; font-size: 0.84rem; line-height: 1.5; }
.memo-body pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.prose-block { margin: 0.2rem 0; }

.checklist { margin: 0.3rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.check-item { display: flex; align-items: flex-start; gap: 0.55rem; }
.check-box { flex: none; width: 1.2rem; height: 1.2rem; border-radius: 0.4rem; border: 1.5px solid var(--muted);
  position: relative; display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-top: 0.21rem; }
/* The heroicons check only fills ~60% of its box, so draw a crisp, bold checkmark
   that actually fills the checkbox instead. */
.check-box svg { display: none; }
.check-item.checked .check-box { background: var(--accent); border-color: var(--accent); }
.check-item.checked .check-box::after {
  content: ""; width: 0.32rem; height: 0.6rem; margin-top: -0.12rem;
  border: solid #fff; border-width: 0 0.16rem 0.16rem 0; transform: rotate(45deg);
}
.check-item.checked > span { color: var(--muted); text-decoration: line-through; }
.check-item > span { flex: 1; }
.task-due { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.7rem; padding: 0.05rem 0.45rem;
  border-radius: 999px; background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); white-space: nowrap; cursor: pointer; }
.task-done { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.7rem; padding: 0.05rem 0.45rem;
  border-radius: 999px; background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); white-space: nowrap; }
.view-tabs { display: inline-flex; gap: 0.15rem; }
.view-tab { color: var(--muted); padding: 0.3rem; border-radius: 0.5rem; display: inline-flex; }
.view-tab:hover { background: var(--accent-soft); color: var(--accent); }
.view-tab.on { background: var(--accent); color: #fff; }
.task-due-add { color: var(--muted); display: inline-flex; opacity: 0.4; transition: opacity 0.15s; }
.check-item:hover .task-due-add { opacity: 1; }
.task-due-add:hover { color: var(--accent); }

.link-card { display: block; padding: 0.8rem 1rem; margin: 0.4rem 0; border: 1px solid var(--line);
  border-radius: 0.85rem; background: var(--panel-solid); text-decoration: none; transition: border-color 0.15s; }
.link-card:hover { border-color: var(--accent); }
.link-card-title { font-weight: 700; color: var(--ink); }
.link-card-url { font-size: 0.78rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; }

/* --- modals & flash -------------------------------------------------------- */
.jmodal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.jmodal { background: var(--panel-solid); border-radius: var(--radius); padding: 1.75rem; width: 100%; max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); }
.jmodal h3 { font-size: 1.3rem; font-weight: 700; text-align: center; margin-bottom: 1.25rem; }
.jmodal label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin: 0.75rem 0 0.3rem; }
.jmodal-wide { max-width: 560px; }
.transfer-warn { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); border-radius: 0.75rem;
  background: color-mix(in srgb, #f59e0b 12%, transparent); }
.transfer-warn p { margin: 0; }
.people-panel .people-col { gap: 0.3rem; min-width: 11rem; }

/* --- inactivity lock screen -------------------------------------------------
   Above everything, including the pomodoro overlay (300). Solid background on
   purpose: the page underneath must not shine through a privacy screen. */
.lock-screen { position: fixed; inset: 0; z-index: 500; background: var(--jbg-1, #14101a);
  color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lock-box { display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  width: 100%; max-width: 280px; text-align: center; }
.lock-box h2 { margin: 0; font-size: 1.15rem; }
.lock-icon { font-size: 2.5rem; }
.lock-pin { text-align: center; font-size: 1.3rem; letter-spacing: 0.4em;
  font-variant-numeric: tabular-nums; }
.lock-error { color: #ef4444; margin: 0; }

/* --- secure notes ------------------------------------------------------------ */
.secure-locked { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.2rem; }
.secure-badge { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); }
.secure-toggle { align-items: center; white-space: nowrap; }
.search-items-toggle { align-items: center; white-space: nowrap; }
.trait-row { align-items: center; margin-top: 0.4rem; }
.trait-row .grow { flex: 1; min-width: 0; }
.trait-emoji { width: 3.2rem; text-align: center; flex: none; }
.trait-habit { width: 7rem; flex: none; }
.jmodal-wide h3 { text-align: left; margin-bottom: 0; }

/* Version label in the brand + the version-history modal */
.brand-stack { display: inline-flex; flex-direction: column; line-height: 1.1; }
.version-tag { align-self: flex-start; font-size: 0.7rem; font-weight: 600; color: var(--muted);
  background: var(--accent-soft); padding: 0.05rem 0.4rem; border-radius: 999px; margin-top: 0.15rem; cursor: pointer; }
.version-tag:hover { color: var(--accent); }
.version-history { margin-top: 1rem; max-height: 65vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.version-entry { border-left: 2px solid var(--accent-soft); padding-left: 0.85rem; }
.version-head { font-weight: 600; gap: 0.5rem; }
.version-num { color: var(--accent); font-weight: 700; }
.version-changes { margin: 0.5rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.version-changes li { font-size: 0.9rem; color: var(--ink-soft); }

.hr { border: none; border-top: 1px solid var(--line); margin: 1rem 0; }
.swatch-pick { cursor: pointer; line-height: 0; }
.swatch-dot { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 2px solid transparent; }
.swatch-pick input:checked + .swatch-dot { border-color: var(--ink); outline: 2px solid var(--panel-solid); }

.flash-group { position: fixed; top: 1rem; right: 1rem; z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; }
.flash { padding: 0.75rem 1rem; border-radius: 0.75rem; color: #fff; box-shadow: var(--shadow); cursor: pointer; max-width: 320px; }
.flash-info { background: var(--accent); }
.flash-error { background: var(--danger); }

/* Location picker + display */
.map-box { width: 100%; height: 260px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--accent-soft); }
.map-fallback { display: flex; align-items: center; justify-content: center; height: 100%; padding: 1rem; text-align: center; font-size: 0.85rem; color: var(--muted); }
.loc-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.memo-loc { margin-top: 0.6rem; }
.memo-loc a { text-decoration: none; color: var(--ink-soft); }
.loc-map { width: 100%; max-height: 180px; object-fit: cover; border-radius: 0.6rem; border: 1px solid var(--line); }
.loc-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--accent); margin-top: 0.25rem; }

/* Reminders on memo cards */
.memo-reminders { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.rem-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; padding: 0.15rem 0.55rem;
  border-radius: 999px; background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.rem-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.rem-add { font-size: 0.72rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.25rem; }
.rem-add:hover { color: var(--accent); }
.rem-jump { cursor: pointer; }
.rem-jump:hover span { color: var(--accent); }

#offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100; text-align: center;
  background: var(--warning, #f59e0b); color: #1f2937; font-size: 0.85rem; font-weight: 600;
  padding: 0.5rem 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
#offline-banner[hidden] { display: none; }

.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }

/* Files page (flat list of every uploaded file) */
.files-page { max-width: 1000px; margin: 1.5rem auto; padding: 0 1rem; }
.files-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.files-head h1 { font-size: 1.5rem; font-weight: 700; }
.files-search { flex: 1; min-width: 200px; max-width: 420px; margin-left: auto; }
.files-empty { padding: 2rem; text-align: center; }
.files-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.files-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
.files-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.files-table tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.files-thumb { width: 52px; }
.files-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.files-thumb .ico { width: 28px; height: 28px; color: var(--muted); }
.files-name { font-weight: 500; word-break: break-all; }
.files-note { color: var(--accent); }
.files-note:hover { text-decoration: underline; }
/* Per-card Copy dropdown (mirrors the pin menu) + paste-page copy buttons */
.copy-menu { position: relative; }
.copy-menu > summary { list-style: none; }
.copy-menu > summary::-webkit-details-marker { display: none; }
.copy-pop { position: absolute; right: 0; margin-top: 0.35rem; z-index: 40; width: 12rem;
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem; }
.copy-opt { display: flex; align-items: center; gap: 0.45rem; text-align: left; white-space: nowrap;
  padding: 0.4rem 0.5rem; border-radius: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.copy-opt:hover { background: var(--accent-soft); }
.copy-opt.copied, .copied { color: var(--ok); font-weight: 600; }
.paste-expired { color: var(--danger); font-weight: 600; }
/* ===================== Tasks (full task tracker) ===================== */
.tasks-page { max-width: 1280px; margin: 1.25rem auto; padding: 0 1rem; }
/* Extra top space so the floated "subtasks" toggle (see .search-items-toggle
   below) has room to sit above the search box with a gap, while the whole row of
   controls shifts down together and stays mutually aligned. */
.tasks-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; margin-bottom: 1rem; }
.tasks-head h1 { font-size: 1.5rem; font-weight: 700; }
.tasks-search { flex: 1; min-width: 160px; max-width: 320px; }
/* Float the "subtasks" toggle above the search box, right-aligned, so it never
   stacks a second line under the field (which made the field taller than the
   other toolbar controls and broke their alignment). Out of flow = zero height. */
.tasks-search .search-items-toggle { position: absolute; top: -1.4rem; right: 0.2rem; }
.tasks-tagfilter { margin: -0.5rem 0 0.75rem; }
.tasks-empty { padding: 2rem; text-align: center; }

/* Board / List segmented toggle */
.seg-group { display: inline-flex; border: 1px solid var(--line); border-radius: 0.7rem; overflow: hidden; }
.seg { padding: 0.4rem 0.8rem; font-size: 0.85rem; color: var(--ink-soft); }
.seg.on { background: var(--accent); color: #fff; }

/* Status + priority color tokens */
.st-backlog { --st: var(--muted); }
.st-doing   { --st: #6366f1; }
.st-blocked { --st: #f43f5e; }
.st-done    { --st: #f59e0b; }
.st-finish  { --st: #10b981; }
.pr-low     { --pr: var(--muted); }
.pr-medium  { --pr: #6366f1; }
.pr-high    { --pr: #f59e0b; }
.pr-urgent  { --pr: #f43f5e; }

/* Kanban board */
.kanban { display: flex; gap: 0.85rem; align-items: flex-start; overflow-x: auto; padding-bottom: 0.75rem; }
.kanban-col { flex: 1; min-width: 250px; background: color-mix(in srgb, var(--muted) 8%, transparent);
  border-radius: var(--radius-sm); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.kanban-col.drop-hover { outline: 2px dashed var(--accent); outline-offset: -2px; }
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600;
  font-size: 0.85rem; padding: 0.15rem 0.25rem; border-left: 3px solid var(--st); padding-left: 0.5rem; }
.kanban-col-head .count { color: var(--muted); font-weight: 500; }
.kanban-cards { display: flex; flex-direction: column; gap: 0.5rem; min-height: 2rem; }

/* Task card */
.task-card { background: var(--panel-solid); border: 1px solid var(--line); border-left: 3px solid var(--pr);
  border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; box-shadow: var(--shadow); }
.kanban .task-card { cursor: grab; }
.kanban .task-card:active { cursor: grabbing; }
.task-card.dragging { opacity: 0.45; }
.task-card-top { display: flex; align-items: center; gap: 0.4rem; }
.task-status { font-size: 0.68rem; font-weight: 600; padding: 0.08rem 0.45rem; border-radius: 999px;
  background: color-mix(in srgb, var(--st) 16%, transparent); color: var(--st); }
.task-pri { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pr); }
.task-actions { margin-left: auto; display: flex; gap: 0.1rem; }
.task-title { font-size: 0.95rem; font-weight: 600; margin: 0.4rem 0 0.1rem; cursor: pointer; line-height: 1.3; }
.task-desc { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.3rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.task-progress { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0; }
.task-bar { flex: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 25%, transparent); overflow: hidden; }
.task-bar > span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.task-items { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.3rem 0; }
.task-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; cursor: pointer; }
.task-item.done { color: var(--muted); text-decoration: line-through; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.45rem; font-size: 0.72rem; }
.task-assignee { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--ink-soft); }
.task-due { font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--ink-soft); }
.task-due.due-overdue { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.task-due.due-today, .task-due.due-soon { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.task-tag { color: var(--accent); cursor: pointer; }
.task-tag:hover { text-decoration: underline; }

/* List mode: stack full cards in a column */
.tasks-list { display: flex; flex-direction: column; gap: 0.6rem; max-width: 820px; }

/* Task form modal */
.task-form { text-align: left; }
.task-form-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.9rem; }
.task-form .field-label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--ink-soft); margin: 0; }
.task-form-subtasks { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.25rem; }
/* Task linked-note references */
.task-form-notes { display: flex; flex-direction: column; gap: 0.35rem; }
.task-note-chips, .task-notes-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.task-notes-row { margin: 0.3rem 0; }
.task-note-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; padding: 0.15rem 0.5rem;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.task-note-chip button { display: inline-flex; color: inherit; opacity: 0.65; }
.task-note-chip button:hover { opacity: 1; }
.task-note-results { display: flex; flex-direction: column; gap: 0.1rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.25rem; max-height: 11rem; overflow: auto; }
.task-note-result { display: flex; align-items: center; gap: 0.4rem; text-align: left; padding: 0.35rem 0.5rem;
  border-radius: 0.4rem; font-size: 0.84rem; }
.task-note-result:hover { background: var(--accent-soft); }
.task-note-ref { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.74rem; padding: 0.1rem 0.45rem;
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.task-note-ref:hover { text-decoration: underline; }
/* Task attachments + comments (in the edit modal) */
.task-form-files, .task-form-comments { display: flex; flex-direction: column; gap: 0.4rem; }
.task-form-comments { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 0.85rem; }
.task-att-list { display: flex; flex-direction: column; gap: 0.3rem; }
.task-att { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.task-att > a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; min-width: 0; }
.task-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.task-att-thumb { width: 2rem; height: 2rem; object-fit: cover; border-radius: 0.4rem; }
.task-upload-label { display: inline-flex; align-items: center; gap: 0.3rem; align-self: flex-start; cursor: pointer; }
.task-upload-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--muted); }

.upload-dropzone { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center;
  padding: 0.9rem; border: 1.5px dashed var(--line); border-radius: var(--radius-sm); background: var(--accent-soft);
  transition: border-color 0.15s, background 0.15s; }
.upload-dropzone.drag-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.upload-dropzone .upload-hint { color: var(--muted); }
.upload-dropzone .task-upload-row { width: 100%; justify-content: center; }
.task-comment { background: color-mix(in srgb, var(--muted) 8%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; }
.task-comment-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.task-comment-author { font-weight: 600; font-size: 0.82rem; }
.task-comment-head .danger { margin-left: auto; display: inline-flex; }
.task-comment-body { font-size: 0.88rem; white-space: pre-wrap; }
.task-comment-add { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.3rem; }
.task-comment-add button { align-self: flex-end; }
/* Shared/public task board */
.board-share-url { display: flex; align-items: center; gap: 0.4rem; margin: -0.25rem 0 0.75rem; font-size: 0.85rem; }
.board-share-url .paste-url { max-width: 26rem; }
.public-board { max-width: 1280px; margin: 1.25rem auto; padding: 0 1rem; }
.board-readonly { padding: 0.1rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--ink-soft); font-weight: 600; }
/* Registration + public-board commenting */
.reg-form { display: flex; flex-direction: column; gap: 0.6rem; }
.reg-label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--ink-soft); }
.reg-benefits { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.9rem 0 1.1rem; padding: 0.8rem 0.9rem;
  border-radius: var(--radius-sm); background: var(--accent-soft); }
.reg-benefits li { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.85rem; color: var(--ink); }
.reg-benefits li .ico-xs { color: var(--ok); flex: none; margin-top: 0.15rem; }

/* Company → board access grants (admin user modal) */
.company-row { border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; }
.company-row:last-child { border-bottom: none; }
.company-grants { margin: 0.15rem 0 0.2rem; }
.company-grants summary { cursor: pointer; padding: 0.15rem 0; }
.company-grants .grant-option { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--ink);
  padding: 0.15rem 0 0.15rem 0.9rem; cursor: pointer; }

/* Compact register page — narrow, vertically centered, no scroll */
.reg-page { max-width: 625px; margin: 0 auto; padding: 1rem; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center; }
.reg-page .paste-card { padding: 0.8rem 1.4rem; }
.reg-page .paste-h1 { font-size: 1.2rem; margin-bottom: 0.15rem; }
.reg-page .paste-card > .muted.small { font-size: 0.78rem; }
.reg-page .reg-benefits { gap: 0.25rem; margin: 0.5rem 0 0.6rem; padding: 0.55rem 0.8rem; }
.reg-page .reg-benefits li { font-size: 0.8rem; }
.reg-page .reg-form { gap: 0.35rem; }
.reg-page .reg-label { font-size: 0.78rem; }
.reg-page .reg-form .field { padding: 0.4rem 0.7rem; }
.reg-page .reg-form .btn-primary { margin-top: 0.4rem !important; }
.task-clickable { cursor: pointer; }
.public-login { margin-top: 0.5rem; }
.collab-badge + .collab-badge { margin-left: 0.25rem; }
/* --- Beautiful scrollbars --------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 50%, transparent) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 68%, transparent); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* --- Workspace board background image (full-page, semi-transparent) --------- */
.board-page-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--board-bg) center / cover no-repeat fixed;
  opacity: 0.28; filter: blur(2px) saturate(1.2);
}
.board-bg-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: -0.25rem 0 0.75rem; }

/* --- Comment replies -------------------------------------------------------- */
.reply-btn { color: var(--accent); display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.15rem; }
.reply-btn:hover { text-decoration: underline; }
.reply-form { margin: 0.35rem 0; }
.task-reply { margin: 0.35rem 0 0 1.1rem; padding-left: 0.6rem; border-left: 2px solid var(--line); }
/* Task reference number */
.task-num { font-weight: 800; font-size: 1.12em; color: var(--accent); letter-spacing: -0.01em; }
/* Promote a note checkbox into the task board (sits before the deadline bell) */
.task-promote { display: inline-flex; color: var(--muted); padding: 0 0.15rem; }
.task-promote:hover { color: var(--accent); }
/* Board: show-finished toggle */
.show-finished { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.show-finished input { width: auto; margin: 0; }
/* Tall modals (e.g. the task form with many subtasks) scroll instead of overflowing */
.jmodal { max-height: calc(100vh - 2rem); overflow-y: auto; }
/* --- Full-height Kanban: fixed header, independently scrolling columns ------ */
.tasks-page { height: 100vh; max-width: none; margin: 0; padding: 1rem 1rem 0;
  display: flex; flex-direction: column; overflow: hidden; }
.tasks-head, .board-share-url, .board-bg-controls, .tasks-tagfilter { flex-shrink: 0; }
.tasks-page > .kanban, .tasks-page > .tasks-list { flex: 1 1 auto; min-height: 0; }
.tasks-page > .tasks-list { overflow-y: auto; padding-bottom: 1rem; }
.kanban { align-items: stretch; overflow-x: auto; overflow-y: hidden; padding-bottom: 1rem; }
.kanban-col { min-height: 0; }
.kanban-cards { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 2px 0;
  /* fade cards out as they scroll up toward the header */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
/* Per-workspace PNG logo, shown before the workspace name */
.ws-logo { height: 30px; width: auto; max-width: 120px; object-fit: contain;
  vertical-align: middle; margin-right: 0.5rem; }
.ws-logo-sm { height: 15px; width: auto; max-width: 48px; object-fit: contain;
  vertical-align: middle; margin-right: 4px; border-radius: 2px; }
.tasks-head h1 { display: inline-flex; align-items: center; }
/* Drop the first card below the top fade so it isn't dimmed at rest */
.kanban-cards { padding-top: 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
/* Subtask drag-to-reorder (edit form) */
.subtask-row { align-items: center; }
.drag-handle { cursor: grab; user-select: none; color: var(--muted, #94a3b8);
  font-size: 1.05rem; line-height: 1; padding: 0 .15rem; flex: 0 0 auto; }
.drag-handle:active { cursor: grabbing; }
.subtask-row.dragging { opacity: .5; }
.subtask-row.drop-target { box-shadow: inset 0 2px 0 0 var(--accent, #6366f1); }
/* Read-only task view modal */
.task-view .task-items { list-style: none; padding-left: 0; }
.task-view .task-item input[disabled] { cursor: default; }
.task-view .subtask-row { display: flex; align-items: center; gap: 0.4rem; }
.task-view .subtask-row .task-item { flex: 1; min-width: 0; }
.task-view .subtask-row .task-item { overflow: hidden; text-overflow: ellipsis; }
.subtask-timer { flex: 0 0 auto; padding: 0.2rem; }
.subtask-timer.act-on { color: var(--ok); }
.subtask-row .task-sw { flex: 0 0 auto; font-size: 0.78rem; color: var(--ok); font-variant-numeric: tabular-nums; }
/* Subtask rows in a modal: override `.jmodal label` margins for tighter spacing */
.jmodal .task-items { gap: 0.2rem; }
.jmodal .task-item { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
/* Image attachment lightbox */
.lightbox-overlay { position: fixed; inset: 0; z-index: 80; display: flex;
  align-items: center; justify-content: center; padding: 2rem;
  background: rgba(15, 23, 42, 0.78); backdrop-filter: blur(4px); cursor: zoom-out; }
.lightbox-box { display: flex; flex-direction: column; gap: 0.6rem; max-width: 92vw;
  max-height: 92vh; cursor: default; }
.lightbox-img { max-width: 92vw; max-height: 82vh; object-fit: contain;
  border-radius: var(--radius); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); background: #fff; }
.lightbox-bar { display: flex; align-items: center; gap: 0.6rem; }
.lightbox-name { color: #fff; font-size: 0.85rem; margin-right: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-att a[data-lightbox-src] { cursor: zoom-in; }
/* Task subscribers (read-only chips in the task view) */
.task-subs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.task-sub-chip { font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.task-form-subs { display: flex; flex-direction: column; gap: 0.4rem; }
/* --- Toast --------------------------------------------------------------- */
#toast-host { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 120; display: flex; flex-direction: column; gap: 0.4rem; align-items: center; pointer-events: none; }
.toast { background: #1e293b; color: #fff; padding: 0.55rem 0.95rem; border-radius: 999px;
  font-size: 0.82rem; box-shadow: 0 10px 25px -8px rgba(0,0,0,0.5); opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translateY(0); }

/* --- Shareable task card (rendered to an image) -------------------------- */
.share-card { background: var(--panel-solid); color: var(--ink); padding: 1.1rem 1.25rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-sizing: border-box; }
.share-card-num { font-weight: 800; color: var(--accent); font-size: 0.95rem; }
.share-card-title { font-weight: 700; font-size: 1.15rem; line-height: 1.25; margin: 0.1rem 0 0.35rem; }
.share-card-meta { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.5rem; }
.share-card-desc { font-size: 0.9rem; color: var(--ink-soft); white-space: pre-wrap; margin-bottom: 0.5rem; }
.share-card-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.share-card-items li { font-size: 0.9rem; }
.share-card-items li.done { color: var(--muted); text-decoration: line-through; }

/* --- Annotate / share modal --------------------------------------------- */
.share-overlay { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(15,23,42,0.7); backdrop-filter: blur(3px); }
.share-box { background: var(--panel-solid); border-radius: var(--radius); padding: 1rem; max-width: 94vw;
  max-height: 94vh; overflow: auto; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 0.6rem; }
.share-tools, .share-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.share-tools .seg { padding: 0.3rem 0.6rem; border-radius: 0.5rem; font-size: 0.8rem; color: var(--muted); border: 1px solid var(--line); }
.share-tools .seg.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.share-color { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 0.4rem; background: none; }
.share-canvas-wrap { display: flex; justify-content: center; background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0.5rem; }
.share-canvas { border-radius: 0.4rem; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.3); touch-action: none; cursor: crosshair; max-width: 100%; height: auto; }
.share-actions { justify-content: flex-end; }
/* Feature/bug request badge + rows */
.req-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem;
  margin-left: 0.35rem; padding: 0 0.3rem; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 0.68rem; font-weight: 700; }
.req-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; }
/* Remote session box (private board task view only) */
.remote-box { margin-top: 0.6rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.remote-cred { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; }
.remote-cred code { font-weight: 700; background: var(--panel-solid); padding: 0.1rem 0.4rem; border-radius: 0.35rem; }
/* Request type toggle + remote help */
.req-intro { margin-bottom: 0.6rem; line-height: 1.45; }
.private-toggle { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.65rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.private-toggle > span { display: flex; flex-direction: column; gap: 0.1rem; }
.private-toggle-label { font-size: 0.85rem; font-weight: 600; }
.private-toggle input { margin-top: 0.2rem; flex: none; }
.task-private { font-size: 0.8rem; line-height: 1; }
.online-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600;
  padding: 0.2rem 0.6rem; border-radius: 999px; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.online-chip .online-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--ok); flex: none;
  animation: timerpulse 1.6s ease-in-out infinite; }
.req-type { display: inline-flex; gap: 0.3rem; margin-bottom: 0.5rem; }
.req-type .seg { padding: 0.35rem 0.7rem; border-radius: 0.5rem; font-size: 0.82rem; color: var(--muted); border: 1px solid var(--line); }
.req-type .seg.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.remote-apps { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.remote-apps label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; }
.help-app { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.help-app:last-child { border-bottom: none; }
/* Task time tracking */
.task-timer { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem;
  padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.task-timer:hover { border-color: var(--accent); color: var(--accent); }
.task-timer.on { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent); animation: timerpulse 2s ease-in-out infinite; }
@keyframes timerpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.62; } }
.task-time-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem;
  padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); background: var(--accent-soft); }
.task-time-total { font-size: 0.85rem; font-weight: 600; }
.task-sw { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ok); font-size: 0.9rem; }
/* "Currently working on" live banner in the board header */
.active-timers { display: flex; flex-wrap: wrap; gap: 0.5rem; flex-basis: 100%; margin-top: 0.1rem; }
.active-timer { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem;
  padding: 0.3rem 0.75rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.active-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--ok); flex: none;
  animation: timerpulse 1.3s ease-in-out infinite; }
.active-who { font-weight: 700; color: var(--accent); }
.active-timer strong { font-weight: 700; }
.active-stop { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; font-weight: 600;
  padding: 0.12rem 0.5rem; border-radius: 999px; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); cursor: pointer; }
.active-stop:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); }

/* ===========================================================================
   Growth tracker — skills level up from daily check-ins, perks unlock on a
   branching prerequisite tree. Bronze/Silver/Gold/Platinum, Audible-style:
   locked badges are dimmed/grayscale, unlocked ones pop in full color.
   =========================================================================== */
.habits-page { max-width: 60rem; margin: 0 auto; }
.skill-card { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.skill-icon { font-size: 1.8rem; line-height: 1; }
.streak-tag { background: color-mix(in srgb, #f97316 18%, transparent); color: #f97316; }

.xp-bar { height: 0.4rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.xp-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; }

.checkin-done { color: var(--ok); }

.heatmap { display: grid; grid-template-rows: repeat(7, minmax(9px, 14px)); grid-auto-flow: column; grid-auto-columns: minmax(9px, 14px); gap: 3px; margin: 0.2rem 0; }
.heatmap-day { width: 100%; aspect-ratio: 1; border-radius: 3px; background: var(--line); cursor: pointer; transition: transform 0.1s; }
.heatmap-day:hover { transform: scale(1.25); }
.heatmap-day.checked { background: var(--accent); }
.heatmap-day.today { outline: 1.5px solid var(--accent); outline-offset: 1px; }

/* --- perk constellation ------------------------------------------------- */
.constellation-wrap { position: relative; margin-top: 0.5rem; }
.constellation-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.constellation-svg path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.constellation-svg .edge-dim { stroke: var(--line); }
.constellation-svg .edge-lit { stroke: var(--accent); }
.constellation-nodes { position: relative; }

/* One node = badge circle + name caption, centered on its layout point. */
.perk-node { position: absolute; transform: translate(-50%, -50%); width: 6.8rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.perk-node .perk-badge { position: static; transform: none; }
.perk-node .perk-badge:hover { transform: scale(1.08); }
.perk-node-name { font-size: 0.64rem; font-weight: 600; color: var(--ink-soft); text-align: center;
  line-height: 1.15; max-height: 2.3em; overflow: hidden; padding: 0.05rem 0.3rem; border-radius: 0.4rem;
  background: color-mix(in srgb, var(--panel-solid) 78%, transparent); }
.perk-node-name.locked { color: var(--muted); font-weight: 500; }

.perk-badge { position: absolute; transform: translate(-50%, -50%); width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  background: var(--panel-solid); border: 3px solid var(--muted); box-shadow: var(--shadow); cursor: pointer;
  transition: transform 0.15s; }
.perk-badge:hover { transform: translate(-50%, -50%) scale(1.08); }
.perk-badge.locked { filter: grayscale(1) brightness(0.75); opacity: 0.5; }
.perk-badge[data-tier="bronze"] { border-color: #cd7f32; }
.perk-badge[data-tier="silver"] { border-color: #c0c0c0; }
.perk-badge[data-tier="gold"] { border-color: #ffd700; }
.perk-badge[data-tier="platinum"] { border-color: #7dd3fc; box-shadow: 0 0 0.6rem rgba(125, 211, 252, 0.6); }

/* Badge detail modal */
.perk-detail { max-width: 400px; display: flex; flex-direction: column; gap: 0.75rem; }
.perk-detail-head { display: flex; align-items: center; gap: 0.75rem; }
.perk-detail-head h3 { margin: 0; }
.perk-detail-head.locked { filter: grayscale(0.6); opacity: 0.85; }
.perk-detail-icon { font-size: 2.4rem; width: 3.6rem; height: 3.6rem; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.perk-detail-icon[data-tier="bronze"] { border-color: #cd7f32; }
.perk-detail-icon[data-tier="silver"] { border-color: #c0c0c0; }
.perk-detail-icon[data-tier="gold"] { border-color: #ffd700; }
.perk-detail-icon[data-tier="platinum"] { border-color: #7dd3fc; box-shadow: 0 0 0.6rem rgba(125, 211, 252, 0.6); }
.perk-detail-desc { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }
.perk-status { display: flex; flex-direction: column; gap: 0.5rem; }
.perk-status.unlocked { color: var(--ok); font-weight: 600; }
.perk-progress { height: 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 22%, transparent);
  overflow: hidden; }
.perk-progress-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.3s; }
.perk-detail-prereqs { display: flex; flex-direction: column; gap: 0.35rem; }

/* Goal cards use the same badge but inline, not absolutely positioned. */
.goal-card .perk-badge { position: static; transform: none; flex: none; }
.goal-card .perk-badge:hover { transform: scale(1.08); }
.goal-card { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.goal-card:first-of-type { border-top: none; }
.prereq-chip { opacity: 0.55; }
.prereq-chip.met { opacity: 1; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }

/* --- recurring tasks: card chip + show/hide toggle in Done column heads ---- */
.task-recur { font-size: 0.72rem; line-height: 1; cursor: default; }
.recur-toggle { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; margin-right: 0.5rem;
  font-size: 0.72rem; font-weight: 500; cursor: pointer; opacity: 0.75; }
.recur-toggle:hover { opacity: 1; }
.recur-toggle input { margin: 0; accent-color: var(--accent); cursor: pointer; }

/* --- skill quick-nav: sticky rail on desktop, hamburger drawer on mobile --- */
.habits-layout { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.habits-main { min-width: 0; }
.skill-nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.1rem;
  max-height: calc(100vh - 2rem); overflow-y: auto; padding: 0.6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-solid); }
.skill-nav-title { padding: 0.1rem 0.55rem 0.35rem; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.66rem; }
.skill-nav-item { display: flex; align-items: center; gap: 0.45rem; padding: 0.38rem 0.55rem;
  border-radius: 0.5rem; color: var(--ink); text-decoration: none; font-size: 0.84rem; font-weight: 600; }
.skill-nav-item:hover { background: var(--accent-soft); color: var(--accent); }
.skill-nav-ico { flex: none; width: 1.3rem; text-align: center; }
.skill-nav-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-nav-done { color: var(--ok); font-size: 0.78rem; flex: none; }
.skill-nav-fab { display: none; }
.skill-card, #goals-panel { scroll-margin-top: 0.75rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media (max-width: 900px) {
  .habits-layout { display: block; }
  .habits-layout > .skill-nav { display: none; }
  .skill-nav-fab { display: flex; position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 70;
    width: 2.75rem; height: 2.75rem; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; border: none; box-shadow: var(--shadow);
    font-size: 1.15rem; cursor: pointer; }
  .skill-nav-overlay { position: fixed; inset: 0; z-index: 75; background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px); }
  .skill-nav-overlay .skill-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(78vw, 20rem);
    max-height: none; border-radius: 0; border-width: 0 1px 0 0; padding: 1rem 0.75rem;
    animation: drawer-in 0.18s ease; }
  @keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
}

/* --- template picker ------------------------------------------------------ */
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0.75rem 0; }
.template-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem;
  padding: 0.9rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-solid); }
.template-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.template-icon { font-size: 1.8rem; }

/* --- perk prerequisite picker ---------------------------------------------- */
.prereq-picker { max-height: 10rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; font-weight: 400; }
.prereq-option { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink); cursor: pointer; }
.active-timer .task-sw { color: var(--ok); font-size: 0.82rem; }

/* --- timer start/stop history table ---------------------------------------- */
.history-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.85rem; }
.history-table th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
.history-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.history-table tbody tr:last-child td { border-bottom: none; }
/* --- Money (YNAB-style envelope budgeting) --------------------------------- */
.money-page h1 { font-size: 1.3rem; }
.money-tabs .tab { border-radius: 0.6rem; padding: 0.35rem 0.8rem; }
.money-tabs .tab.active { background: var(--accent); color: #fff; }
.month-label { min-width: 9rem; text-align: center; }

.rta-card { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.8rem 1rem; flex-wrap: wrap; }
.rta-amount { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rta-card.amt-pos .rta-amount { color: var(--ok); }
.rta-card.amt-neg .rta-amount { color: var(--danger); }
.rta-card.amt-zero .rta-amount { color: var(--muted); }
/* Desktop/tablet: keep Ready to Assign pinned to the top while the category
   list scrolls under it. Phones don't stick it (the value rides in the assign
   sheet instead). solid backdrop so scrolling rows don't bleed through. */
@media (min-width: 641px) {
  .rta-card { position: sticky; top: 0.5rem; z-index: 15; background: var(--panel-solid); }
}
/* Ready to Assign echoed in the phone assign sheet, coloured by sign (green when
   there's money left to give a job). */
.sheet-rta { font-weight: 700; font-variant-numeric: tabular-nums; }
.sheet-rta.amt-pos { color: var(--ok); }
.sheet-rta.amt-neg { color: var(--danger); }
.sheet-rta.amt-zero { color: var(--muted); }

.money-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.money-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
.money-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.money-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.money-table .num, .money-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-table .center { text-align: center; }
.money-table .nowrap { white-space: nowrap; }
.money-table .group-row td { font-weight: 700; color: var(--ink-soft); background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.money-table .total-row td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: none; }

.assign-input { max-width: 8.5rem; text-align: right; font-variant-numeric: tabular-nums; padding: 0.25rem 0.5rem; }
.money-input { text-align: right; font-variant-numeric: tabular-nums; }
/* Quick-assign +50rb / +100rb buttons — desktop inline beside the Assigned box,
   and (larger) inside the phone assign sheet. */
.assign-wrap { display: inline-flex; align-items: center; gap: 0.3rem; justify-content: flex-end; }
.assign-bumps { display: inline-flex; gap: 0.2rem; }
.bump-btn {
  font-size: 0.68rem; line-height: 1; padding: 0.22rem 0.4rem; border-radius: 0.4rem;
  border: 1px solid var(--line); background: var(--panel-solid); color: var(--muted);
  cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; transition: all 0.12s;
}
.bump-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.bump-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sheet-bumps { justify-content: stretch; }
.bump-btn.lg { flex: 1; font-size: 1rem; padding: 0.6rem 1rem; font-weight: 600; }
.avail-chip { padding: 0.15rem 0.55rem; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.avail-chip.amt-pos { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.avail-chip.amt-neg { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.avail-chip.amt-zero { color: var(--muted); }
.amt-pos { color: var(--ok); }
.amt-neg { color: var(--danger); }

.acct-chips { align-items: stretch; }
.acct-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.45rem 0.8rem;
  border: 1px solid var(--line); border-radius: 0.7rem; background: var(--panel-solid); color: var(--ink);
  cursor: pointer; font-size: 0.82rem; transition: all 0.15s; }
.acct-chip:hover { border-color: var(--accent); }
.acct-chip.active { border-color: var(--accent); outline: 1.5px solid var(--accent); }
.acct-chip strong { font-variant-numeric: tabular-nums; }

.cleared-toggle { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 0.95rem; padding: 0.15rem 0.3rem; border-radius: 0.4rem; }
.cleared-toggle.on { color: var(--ok); }
.cleared-toggle:hover { background: var(--accent-soft); }

.linklike { border: none; background: none; padding: 0; color: var(--ink); cursor: pointer; font-size: inherit; text-align: left; }
.linklike:hover { color: var(--accent); }

.spend-row { display: grid; grid-template-columns: minmax(8rem, 16rem) 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.spend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spend-bar-track { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 999px; height: 0.7rem; overflow: hidden; }
.spend-bar { background: var(--accent); height: 100%; border-radius: 999px; }
.spend-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }


/* --- Top nav: wraps into two rows with larger, consistent icons ------------- */
.topnav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 0.1rem 0.15rem; max-width: 11.5rem; }
.topnav .icon-btn .ico { width: 1.4rem; height: 1.4rem; }

/* --- Full-page sections (Money, Growth): centered with breathing room ------- */
.money-page, .habits-page, .metrics-page, .insights-page { max-width: 1100px; margin: 1.25rem auto 3rem; padding: 0 1.25rem; }

/* Wide tables scroll inside their card, never the page (phone-friendly). */
.money-page .panel { overflow-x: auto; padding: 1rem 1.25rem; }
.table-scroll { overflow-x: auto; }

/* --- budget goal progress bars ---------------------------------------------- */
.goal-bar { height: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 999px; margin-top: 4px; max-width: 11rem; overflow: hidden; }
.goal-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.25s; }
.goal-fill.done { background: var(--ok); }


/* --- Measure page (metric trackers) ------------------------------------------ */
.metric-card { padding: 1.1rem 1.35rem; }
.metric-icon { font-size: 1.6rem; line-height: 1; }
.metric-chart svg { width: 100%; height: 150px; display: block; }
.metric-line { stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.metric-dot { fill: var(--accent); }
.metric-add { align-items: center; }
.metric-add .field-auto { max-width: 9rem; }
.metric-note { max-width: 14rem; flex: 1; min-width: 8rem; }
.metric-history-toggle { cursor: pointer; padding: 0.3rem 0; display: inline-block; }
.metric-card details { margin-top: 0.25rem; }
.metric-card .metric-add { margin-top: 0.35rem; }
.metric-card .metric-history-toggle { color: var(--muted); }
.metric-card .money-table { margin-top: 0.5rem; }
.metric-edit { max-width: 6.5rem; text-align: right; padding: 0.2rem 0.45rem; display: inline-block; }
.metrics-page .btn-ghost.tiny.active { color: var(--accent); border-color: var(--accent); }
.lang-toggle { display: inline-flex; gap: 2px; margin-left: 0.4rem; }
.lang-toggle .btn-ghost.tiny.active { color: var(--accent); font-weight: 700; }
@media (max-width: 640px) {
  .metric-add .field-auto { max-width: 7rem; }
  .metric-note { min-width: 100%; order: 4; }
}

/* --- Sticky notes ------------------------------------------------------------ */
.s-yellow { --sticky-bg: #fef9c3; --sticky-bar: #fde68a; }
.s-green  { --sticky-bg: #dcfce7; --sticky-bar: #bbf7d0; }
.s-pink   { --sticky-bg: #fce7f3; --sticky-bar: #fbcfe8; }
.s-purple { --sticky-bg: #f3e8ff; --sticky-bar: #e9d5ff; }
.s-blue   { --sticky-bg: #e0f2fe; --sticky-bar: #bae6fd; }
.s-gray   { --sticky-bg: #f4f4f5; --sticky-bar: #e4e4e7; }
[data-theme="dark"] .s-yellow { --sticky-bg: #423d1f; --sticky-bar: #57501f; }
[data-theme="dark"] .s-green  { --sticky-bg: #1d3b28; --sticky-bar: #235233; }
[data-theme="dark"] .s-pink   { --sticky-bg: #43243a; --sticky-bar: #5b2c4c; }
[data-theme="dark"] .s-purple { --sticky-bg: #362a4d; --sticky-bar: #473566; }
[data-theme="dark"] .s-blue   { --sticky-bg: #1d3448; --sticky-bar: #204a66; }
[data-theme="dark"] .s-gray   { --sticky-bg: #2b2b2e; --sticky-bar: #3b3b40; }

/* the chromeless single-note editor (/sticky/:id) */
.sticky-note { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--sticky-bg); }
.sticky-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: var(--sticky-bar);
  cursor: grab; user-select: none; }
.sticky-bar:active { cursor: grabbing; }
.sticky-btn { border: none; background: none; cursor: pointer; font-size: 0.95rem; line-height: 1;
  padding: 4px 7px; border-radius: 6px; opacity: 0.65; }
.sticky-btn:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
.sticky-colors { display: flex; gap: 5px; margin: 0 auto; }
.sticky-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.18);
  background: var(--sticky-bg); cursor: pointer; padding: 0; }
.sticky-dot.active { outline: 2px solid rgba(0, 0, 0, 0.35); outline-offset: 1px; }
.sticky-body { flex: 1; display: flex; min-height: 0; }
/* blurred = read mode: rendered Markdown replaces the textarea (StickyEditor hook) */
.sticky-view { display: none; }
body.sticky-viewing .sticky-note .sticky-body { display: none; }
body.sticky-viewing .sticky-note .sticky-view { display: block; flex: 1; min-height: 0; overflow-y: auto;
  padding: 0.75rem 0.9rem; margin: 0; cursor: text; font-size: 1rem; color: inherit; }
.sticky-view > :first-child { margin-top: 0; }
.sticky-body form { flex: 1; display: flex; }
.sticky-body textarea { flex: 1; border: none; background: transparent; resize: none; padding: 0.75rem 0.9rem;
  font: inherit; font-size: 0.95rem; line-height: 1.45; color: var(--ink, inherit); outline: none; }
.sticky-stale { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.8rem; font-size: 0.78rem; text-decoration: none; color: var(--ink); }
.sticky-gone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; text-align: center; padding: 1rem; }

/* the /sticky list */
.sticky-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }
.sticky-card { border-radius: 0.8rem; background: var(--sticky-bg); border: 1px solid var(--sticky-bar);
  display: flex; flex-direction: column; min-height: 9rem; overflow: hidden; }
.sticky-card-body { flex: 1; padding: 0.7rem 0.85rem; color: var(--ink, inherit); text-decoration: none;
  font-size: 0.86rem; white-space: pre-wrap; word-break: break-word; }
.sticky-card-body:hover { background: rgba(0, 0, 0, 0.04); }
.sticky-card-foot { padding: 0.3rem 0.55rem; background: var(--sticky-bar); }

/* sticky indicator on timeline cards */
.sticky-flag { background: var(--sticky-bg); border: 1px solid var(--sticky-bar); border-radius: 999px;
  padding: 0 7px; font-size: 0.72rem; text-decoration: none; color: var(--ink); white-space: nowrap; }
.sticky-flag:hover { border-color: var(--accent); }

/* --- emoji picker -------------------------------------------------------------- */
.emoji-picker { position: relative; display: inline-block; }
.emoji-current { cursor: pointer; min-width: 4.5rem; text-align: center; font-size: 1.1rem; }
.emoji-caret { font-size: 0.65rem; color: var(--muted); }
/* Expands INLINE (not absolutely positioned): scrolling modals clipped a
   floating dropdown, so the grid pushes the form open instead — never cut off. */
.emoji-picker { display: block; }
.emoji-pop { width: 100%; margin-top: 4px; padding: 0.6rem; display: flex; flex-direction: column;
  gap: 0.45rem; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 0.8rem; }
.emoji-search { width: 100%; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); gap: 2px;
  max-height: 11rem; overflow-y: auto; }
.emoji-cell { border: none; background: none; font-size: 1.25rem; line-height: 1.7rem; cursor: pointer;
  border-radius: 0.4rem; padding: 2px; }
.emoji-cell:hover { background: var(--accent-soft); }

/* Toolbar (insert) variant: the trigger is a plain icon button sitting in the
   editor's icon row, and the dropdown FLOATS below it (absolute) so it doesn't
   shove the composer open like the in-form variant deliberately does. */
.emoji-picker.emoji-insert { display: inline-flex; position: relative; }
.emoji-picker.emoji-insert .emoji-trigger { font-size: 1.05rem; line-height: 1; }
.emoji-picker.emoji-insert .emoji-pop {
  position: absolute; top: 100%; left: 0; z-index: 50; width: 15rem; margin-top: 4px;
}
/* Every .panel / .memo card is its own stacking context (backdrop-filter), which
   would otherwise trap this floating dropdown so a later card or the sticky
   Timeline bar paints over it. While the dropdown is open, lift its container
   above those siblings. */
.panel:has(.emoji-insert .emoji-pop),
.memo:has(.emoji-insert .emoji-pop) { position: relative; z-index: 60; }

/* --- PWA install button --------------------------------------------------------- */
.pwa-install { position: fixed; bottom: 18px; right: 18px; z-index: 90; border: none; cursor: pointer;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 0.65rem 1.1rem;
  border-radius: 999px; box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45); animation: pwa-pulse 2.2s infinite; }
.pwa-install:hover { animation: none; transform: scale(1.04); }
@keyframes pwa-pulse {
  0% { box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45), 0 0 0 0 rgba(99, 102, 241, 0.45); }
  70% { box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45), 0 0 0 14px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45), 0 0 0 0 rgba(99, 102, 241, 0); }
}
@media (display-mode: standalone) { .pwa-install { display: none !important; } }

/* ---- Pomodoro overlay ---- */
.pomodoro-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(24, 16, 28, 0.94); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; color: #f5f2fa; text-align: center; padding: 1rem; }
.pomodoro-overlay.pomo-break { background: rgba(10, 30, 24, 0.94); }
.pomo-close { position: absolute; top: 0.9rem; right: 1.2rem; background: none; border: none; color: inherit; font-size: 1.5rem; cursor: pointer; opacity: 0.7; }
.pomo-close:hover { opacity: 1; }
.pomo-task { font-size: 1.05rem; opacity: 0.85; max-width: 80vw; }
.pomo-clock { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.pomo-phase { font-size: 1.25rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.pomo-time { font-size: clamp(4.5rem, 20vw, 11rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pomo-dots { min-height: 1.4em; font-size: 1.1rem; opacity: 0.9; }
.pomo-toggle { font-size: 1.15rem; padding: 0.6rem 2.4rem; }
.pomo-elapsed { font-size: 0.95rem; opacity: 0.8; }
.pomo-elapsed .task-sw { font-variant-numeric: tabular-nums; }
.pomo-stop { color: #ffb4b4; }

/* ---- Subtask due date: hidden native input + pill trigger ---- */
.subtask-row { position: relative; }
.subtask-due-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.due-pill { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.due-pill.empty { border-color: color-mix(in srgb, var(--muted) 40%, transparent); background: none; color: var(--muted); }
.due-pill:hover { border-color: var(--accent); color: var(--accent); }

.sticky-filter { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; cursor: pointer; user-select: none; }

/* ---- Food Diary ---- */
/* The insight panel is a bare .panel (no padding of its own, unlike its
   .side-card sibling), which left the summary, trend graph and legend flush
   against the card edge. Match the sibling card's padding. */
.food-insight { padding: 1rem 1.25rem; }
.food-cal { max-width: 22rem; }
.food-time { font-size: 0.75rem; opacity: 0.75; padding: 0.1rem 0.4rem; white-space: nowrap; }
.food-day-head { margin: 0.5rem 0 0.4rem; font-size: 1rem; }
.food-day-head .count { color: var(--muted); font-weight: 500; }
.food-entry { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.7rem 0.8rem; margin-bottom: 0.5rem; }
.food-photo { width: 72px; height: 72px; border-radius: 0.7rem; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; }
.food-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.food-photo-placeholder { background: color-mix(in srgb, var(--muted) 12%, transparent); font-size: 1.7rem; }
.food-entry-main { flex: 1; min-width: 0; }
.food-traits { margin-top: 0.3rem; }
.food-traits .tag { font-size: 0.75rem; }
.food-kind { opacity: 0.75; }
.food-del { opacity: 0.6; }
.food-summary { list-style: none; padding: 0; margin: 0.25rem 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.15rem 1rem; }
.food-trend { margin-top: 0.75rem; }
.food-trend-svg { width: 100%; height: 130px; display: block; margin: 0.4rem 0; }
.food-trend-svg .axis { stroke: color-mix(in srgb, var(--muted) 35%, transparent); stroke-width: 1; }
.food-legend { display: inline-flex; align-items: center; gap: 0.3rem; }
.food-legend .dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; display: inline-block; }
/* trait chips: thumb-sized toggles, the checkbox itself is invisible */
.food-trait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.45rem; }
.trait-chip { display: flex; align-items: center; padding: 0.45rem 0.65rem; border: 1.5px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 0.7rem; cursor: pointer; font-size: 0.9rem; user-select: none; }
.trait-chip input { position: absolute; opacity: 0; pointer-events: none; }
.trait-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
.food-form { max-width: 540px; max-height: 92vh; overflow-y: auto; }
.food-range input { max-width: 10rem; }
@media (max-width: 640px) {
  .food-cal { max-width: none; }
  .food-trait-grid { grid-template-columns: 1fr 1fr; }
  .food-photo { width: 62px; height: 62px; }
}

/* Phones. Rule #1: the PAGE is never wider than the device - a single flex row
   that refuses to wrap forces the layout viewport wide and the browser zooms
   the whole app out ("everything is tiny"). So rows wrap, side padding slims,
   and secondary table columns (.m-hide) collapse so what remains fills the
   width at a readable size. Anything still wider scrolls inside its panel. */
@media (max-width: 640px) {
  .money-page, .habits-page, .metrics-page, .insights-page { padding: 0 0.6rem; margin-top: 0.75rem; }
  .money-page .panel { padding: 0.7rem 0.6rem; }
  .money-page .row, .money-page .row-between, .money-tabs { flex-wrap: wrap; row-gap: 0.35rem; }
  .money-table { font-size: 0.875rem; width: 100%; }
  .money-table td, .money-table th { padding: 0.35rem 0.3rem; }
  .money-table .m-hide { display: none; }
  .assign-input { max-width: 5.5rem; }
  .spend-row { grid-template-columns: minmax(6rem, 9rem) 1fr auto; }
  .rta-amount { font-size: 1.4rem; }
  .acct-chip { padding: 0.35rem 0.55rem; }
  .jmodal { width: calc(100vw - 1.2rem); max-height: 92vh; overflow-y: auto; padding: 0.9rem 0.8rem; }

  /* Touch-first budgeting: finger-height rows; the row itself is the tap
     target (inline input and category link hand their taps to the row, which
     opens the bottom-sheet editor via the BudgetTouch hook). */
  .money-table tbody td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .budget-table tr[data-cat] { cursor: pointer; }
  .budget-table tr[data-cat] .assign-input, .budget-table tr[data-cat] .linklike { pointer-events: none; }
  .budget-table tr[data-cat] .assign-input { border-color: transparent; background: none; text-align: right; }

  /* Kanban: one full column per screen, swipe to the next (native scroll-snap).
     The 88% basis leaves a sliver of the next column as a "there's more" hint. */
  .kanban { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .kanban-col { flex: 0 0 88%; min-width: 88%; scroll-snap-align: center; }
}

/* Bottom sheet for assigning on phones */
.sheet-overlay { align-items: flex-end; padding: 0; }
.assign-sheet { background: var(--panel-solid); border-radius: 1.1rem 1.1rem 0 0; padding: 1.1rem 1.1rem 1.4rem; width: 100%;
  max-width: 480px; margin: 0 auto; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); }
.sheet-title { margin: 0 0 0.4rem; }
.sheet-facts { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.9rem; margin-bottom: 0.7rem; }
.sheet-amount { font-size: 1.7rem; text-align: right; padding: 0.65rem 0.8rem; width: 100%; font-variant-numeric: tabular-nums; }
.sheet-actions { justify-content: flex-end; margin-top: 0.3rem; }
.sheet-actions .btn-primary, .sheet-actions .btn-ghost { padding: 0.6rem 1.4rem; font-size: 1rem; }

/* pantau/watch on the public board: overlay sibling so clicks never open the task */
.pub-card-wrap { position: relative; }
.watch-btn { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 2; border: none; cursor: pointer;
  background: color-mix(in srgb, var(--panel-solid) 82%, transparent); border-radius: 50%;
  width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center;
  color: var(--muted); opacity: 0.55; }
.watch-btn:hover { opacity: 1; color: var(--accent); }
.watch-btn.on { opacity: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* live task-list checkboxes on stickies */
.sticky-view input[type="checkbox"] { cursor: pointer; width: 1.05em; height: 1.05em; accent-color: var(--accent); }
.sticky-view li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.1em; }
.food-section-label { margin-bottom: -0.35rem; }
.protein-grid .trait-chip.on { border-color: #10b981; background: color-mix(in srgb, #10b981 12%, transparent); color: #0d9668; }

/* --- Insights page ------------------------------------------------------------ */
.insights-page .panel { padding: 1.1rem 1.35rem; }
.insights-page a.link { color: var(--accent); text-decoration: underline; }
.insight-setup { border-top: 1px dashed var(--line); padding-top: 0.75rem; }
.insight-setup .field { max-width: 24rem; }
.insight-row { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  gap: 0.6rem; align-items: center; }
.insight-bar-track { height: 10px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.insight-bar { height: 100%; border-radius: 999px; background: var(--muted); transition: width 0.25s; }
.insight-bar-yes { background: var(--accent); }
.insight-notable { color: var(--accent); border-color: var(--accent); font-weight: 700; }
@media (max-width: 640px) {
  .insight-row { grid-template-columns: 1fr auto; }
  .insight-row .insight-bar-track { grid-column: 1 / -1; order: 3; }
}
.insight-group { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.06em; }

/* --- Money advisor -------------------------------------------------------------- */
.advisor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.6rem; margin-top: 0.4rem; }
.advisor-stat { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.advisor-months { max-width: 5.5rem; }
.advisor-result { border-top: 1px dashed var(--line); padding-top: 0.6rem; }
.calc-pane { margin-top: 1rem; }
.calc-result { border-top: 1px dashed var(--line); padding-top: 0.6rem; margin-top: 0.4rem; }
.calc-verdict { padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--panel-border); }
.calc-caveat { font-style: italic; opacity: 0.85; }
.tag.advisor-comfortable { color: var(--ok); border-color: var(--ok); font-weight: 700; }
.tag.advisor-tight { color: #d97706; border-color: #d97706; font-weight: 700; }
.tag.advisor-danger { color: var(--danger); border-color: var(--danger); font-weight: 700; }
.advisor-scen-line { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 6 4;
  stroke-linejoin: round; stroke-linecap: round; }
.advisor-zero-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; }
/* transparent per-day columns that carry the hover <title> tooltip */
.advisor-hit { fill: transparent; }
.advisor-hit:hover { fill: var(--accent); fill-opacity: 0.08; }
.advisor-burn { border-top: 1px dashed var(--line); padding-top: 0.6rem; margin-top: 0.4rem; }
.advisor-up-row { display: grid; grid-template-columns: 4.5rem 1fr auto auto; gap: 0.5rem;
  align-items: baseline; }
.advisor-up-row + .advisor-up-row { border-top: 1px solid var(--line); padding-top: 0.25rem; }
.advisor-up-row > :nth-child(n+3) { text-align: right; }
.advisor-up-head { border-bottom: 1px solid var(--line); padding-bottom: 0.15rem; }
.advisor-up-cum { color: var(--accent); font-variant-numeric: tabular-nums; }

/* --- AI money proposals --------------------------------------------------------- */
.proposals-card { border: 1px solid var(--accent); }
.proposal-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem;
  align-items: center; padding: 0.4rem 0; cursor: pointer; }
.proposal-row + .proposal-row { border-top: 1px solid var(--line); }
.proposal-summary { font-size: 0.9rem; }
.proposals-actions { border-top: 1px dashed var(--line); padding-top: 0.5rem; margin-top: 0.2rem; }

/* --- Reports drill-down --------------------------------------------------------- */
.spend-clickable { width: 100%; border: none; background: none; text-align: left; cursor: pointer;
  padding: 0.25rem 0.3rem; border-radius: var(--radius-sm); color: inherit; font: inherit; }
.spend-clickable:hover { background: var(--accent-soft); }
.spend-clickable.open { background: var(--accent-soft); }
.drill-caret { color: var(--muted); margin-right: 0.15rem; }
.drilldown { margin: 0.1rem 0 0.5rem 1.4rem; padding-left: 0.6rem;
  border-left: 2px solid var(--line); }
.drilldown-row { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 0.5rem;
  align-items: baseline; padding: 0.15rem 0; }