/* ARC8:TRACK — base tokens and shell. Extended in the task-board phase. */
:root {
  --violet: oklch(0.55 0.16 300);
  --bg: oklch(0.96 0.006 90);
  --surface: oklch(0.99 0.004 90);
  --surface-2: oklch(0.98 0.004 90);
  --line: oklch(0.86 0.008 275);
  --line-soft: oklch(0.88 0.008 275);
  --ink: oklch(0.26 0.02 275);
  --ink-soft: oklch(0.48 0.015 275);
  --ink-muted: oklch(0.58 0.015 275);
  --accent: oklch(0.52 0.12 250);
  --magenta: oklch(0.58 0.18 345);
  --green: oklch(0.55 0.14 150);
  --amber: oklch(0.62 0.14 55);
  --blue: oklch(0.52 0.12 250);
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-head: 'Chakra Petch', var(--font-body);
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --octagon: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.45; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--magenta); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: oklch(0.84 0.01 275); }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; clip-path: var(--octagon); background: var(--accent); color: var(--surface); font-family: var(--font-head); font-weight: 700; font-size: 12px; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: .5px; }
.brand-accent { color: var(--accent); }

.placeholder { max-width: 560px; margin: 12vh auto; padding: 0 20px; }
.placeholder p { color: var(--ink-soft); }
.error-status { font-family: var(--font-head); font-size: 56px; margin: 24px 0 8px; }
.error-detail { font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); padding: 12px; overflow-x: auto; }
.error-fragment { border: 1px solid var(--magenta); background: oklch(0.97 0.02 345); padding: 10px 12px; font-size: 13px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--surface); font-size: 13px; box-shadow: 0 8px 24px oklch(0.26 0.02 275 / .25); max-width: min(90vw, 480px); }
.toast-error { background: var(--magenta); }

/* ---- Forms & buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .5px; cursor: pointer; border: 1px solid oklch(0.82 0.01 275); background: var(--surface); color: var(--ink); }
.btn:hover { border-color: var(--ink-soft); }
a.btn { color: var(--ink); }
.btn:hover, a.btn:hover { color: var(--ink); }
.btn-primary, a.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn-primary:hover, a.btn-primary:hover { filter: brightness(.94); border-color: var(--accent); color: oklch(0.97 0.004 90); }
.btn-done:hover { color: oklch(0.97 0.004 90); }
.btn-danger { color: var(--magenta); }
.btn-danger:hover { border-color: var(--magenta); }
.btn-small { padding: 4px 9px; font-size: 11px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 160px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.hint { font-size: 11px; color: var(--ink-muted); }
.small { font-size: 12px; }
.muted { color: var(--ink-muted); }
.mono { font-family: var(--font-mono); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=url], select, textarea { font: inherit; font-size: 13px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236b6b7a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
select.select-compact { padding-right: 20px; padding-left: 8px; background-position: right 5px center; background-size: 10px 10px; min-width: 5.5rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.checkline input { width: auto; margin: 0; flex-shrink: 0; }
.form-error { border: 1px solid var(--magenta); background: oklch(0.97 0.02 345); color: oklch(0.45 0.16 345); padding: 10px 12px; font-size: 13px; }
.flash-stack { position: fixed; top: 66px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 6px; width: min(440px, calc(100vw - 32px)); }
.flash { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px 10px 14px; font-size: 13px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 8px 24px oklch(0.26 0.02 275 / .16); word-break: break-word; }
.flash-text { flex: 1; }
.flash-close { flex-shrink: 0; width: 24px; height: 24px; margin: -3px -4px -3px 0; border: 0; background: transparent; color: var(--ink-muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.flash-close:hover { color: var(--ink); }
.flash-success { border-color: var(--green); }
.flash-error { border-color: var(--magenta); }
.table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 8px; border-bottom: 1px solid var(--line-soft); }

/* ---- Top bar ---- */
.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px clamp(14px, 3vw, 24px); min-height: 56px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.topbar .brand { color: var(--ink); }
.topbar-spacer { flex: 1; }
.avatar { position: relative; overflow: hidden; width: 32px; height: 32px; border-radius: 50%; background: oklch(0.92 0.008 275); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--ink); flex-shrink: 0; }
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .15s ease; }
.avatar.has-image:hover .avatar-img { opacity: .5; }
.avatar-initials { position: relative; }
.avatar-link { display: inline-flex; color: var(--ink); }
.avatar-large { width: 72px; height: 72px; font-size: 22px; }

/* ---- Auth pages ---- */
.auth { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: clamp(24px, 10vh, 96px) 16px; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; }
.auth-card h1 { margin: 0; font-family: var(--font-head); font-size: 22px; }
.auth-card p { margin: 0; }

/* ---- Settings ---- */
.settings { max-width: 760px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 28px) 64px; display: flex; flex-direction: column; gap: 18px; }
.settings h1 { margin: 0 0 6px; font-family: var(--font-head); font-size: 26px; }
.panel { background: var(--surface); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.panel h2 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-muted); }
.panel p { margin: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.swatch:has(input:checked) { border-color: var(--swatch); box-shadow: inset 0 0 0 1px var(--swatch); }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch-dot { width: 12px; height: 12px; clip-path: var(--octagon); background: var(--swatch); }
code { font-family: var(--font-mono); font-size: 12px; }

/* ---- Board layout ---- */
.board { display: grid; grid-template-columns: 236px minmax(0, 1fr) 320px; align-items: start; }
/* Same areas sidebar, no detail rail — pages like Goals that aren't the task board. */
.board-2col { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
.sidebar { border-right: 1px solid var(--line); background: var(--surface-2); padding: 20px 0 40px; min-height: calc(100vh - 57px); position: sticky; top: 57px; }
.rail { border-left: 1px solid var(--line); background: var(--surface-2); padding: 22px 20px 48px; min-height: calc(100vh - 57px); position: sticky; top: 57px; }
.task-column { padding: 22px clamp(16px, 3vw, 28px) 56px; min-width: 0; }
/* Full wordmark, sidebar-drawer only (see .topbar .brand below, hidden at the same
   780px breakpoint) — there's otherwise-unused space above "Areas" once the drawer
   is a full-height off-canvas panel rather than a column next to the board. */
.sidebar-brand { display: none; }

.side-heading { padding: 0 18px 10px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-muted); }
.side-list { display: flex; flex-direction: column; margin-bottom: 26px; }
.side-item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font: inherit; font-size: 14px; color: var(--ink); background: transparent; border: 0; border-left: 3px solid transparent; cursor: pointer; text-align: left; width: 100%; }
.side-item:hover { background: oklch(0.94 0.008 275); color: var(--ink); }
.side-item.is-active { background: oklch(0.94 0.008 275); border-left-color: var(--item-color, var(--accent)); font-weight: 600; }
.side-item.is-muted { color: var(--ink-muted); cursor: default; }
.side-item.is-muted:hover { background: transparent; }
.side-add { color: var(--ink-muted); font-size: 13px; }
.side-item .name { flex: 1; }
.side-item .count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
.dot { width: 9px; height: 9px; flex-shrink: 0; clip-path: var(--octagon); background: var(--item-color, var(--accent)); display: inline-block; }
.week-card { margin: 0 18px; padding: 14px; border: 1px solid var(--line); background: var(--surface); }
.week-numbers { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.week-numbers .big { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1; }
.meter { height: 5px; background: oklch(0.90 0.008 275); flex: 1; }
.meter-fill { height: 100%; background: var(--accent); max-width: 100%; }
.week-card .meter { margin-top: 10px; }

.segmented { display: inline-flex; border: 1px solid var(--line); background: var(--surface); }
.segmented form { display: contents; }
.segmented button, .seg-opt span { padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .4px; cursor: pointer; background: transparent; color: oklch(0.50 0.015 275); border: 0; border-left: 1px solid var(--line); }
.segmented > form:first-child button, .seg-opt:first-child span { border-left: 0; }
.segmented button.is-active, .seg-opt input:checked + span { background: var(--accent); color: var(--surface); }
.segmented-full { display: flex; }

/* Topbar labels that shrink to save space before the 780px breakpoint reshapes the
   whole topbar (search collapses, etc.) — see the "BUNDLED SUBTASKS"/"HIDE SUBTASKS"/
   "+ NEW TASK" buttons in topbar_controls.php. */
.label-short { display: none; }
@media (max-width: 1000px) {
  .label-full { display: none; }
  .label-short { display: inline; }
}

/* Below 600px the topbar has no room left for three segmented buttons without
   wrapping onto a second line, so swap them for a <select> showing only the
   active view; the other two views become its dropdown options. */
.view-select { display: none; }
@media (max-width: 600px) {
  .segmented { display: none; }
  .view-select { display: inline-block; width: auto; min-width: 0; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 7px 26px 7px 10px; background-position: right 8px center; background-size: 10px 10px; }
}
.seg-opt { flex: 1; display: flex; }
.seg-opt span { flex: 1; text-align: center; padding: 10px 0; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.column-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.column-head h1 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 26px; letter-spacing: .3px; }
.column-head .meta { font-size: 12px; color: var(--ink-muted); }
.icon-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-soft); background: var(--surface); cursor: pointer; color: oklch(0.50 0.015 275); font: inherit; font-size: 14px; line-height: 1; flex-shrink: 0; }
.icon-btn:hover { border-color: var(--accent); color: var(--ink); }
.icon-btn-small { width: 22px; height: 22px; }
.empty-state { margin-top: 32px; padding: 32px; border: 1px dashed var(--line); text-align: center; color: var(--ink-muted); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.empty-state p { margin: 0; }

.task-list { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.task-row { --row-color: var(--blue); --area-color: var(--ink-muted); background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--area-color); cursor: pointer; }
.task-row:hover { border-color: oklch(0.72 0.02 275); border-left-color: var(--area-color); }
.task-row.is-selected { border-color: oklch(0.72 0.02 275); border-left-color: var(--area-color); box-shadow: 0 0 0 1px oklch(0.72 0.02 275); }
.task-row.is-subtask { margin-left: 28px; }
.task-row.due-overdue { --row-color: var(--magenta); }
.task-row.due-soon { --row-color: var(--amber); }
.task-row.due-later { --row-color: var(--blue); }
.task-row.due-done { --row-color: var(--green); }
.row-main { padding: 14px 16px; display: flex; gap: 13px; align-items: flex-start; }
.check-form { display: contents; }
.check { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; border: 1.5px solid oklch(0.76 0.02 275); background: var(--surface); cursor: pointer; padding: 0; display: inline-block; }
.check:hover { border-color: var(--green); }
.check.is-checked { background: var(--green); border-color: var(--green); }
.check-small { width: 13px; height: 13px; margin-top: 0; }
.row-body { flex: 1; min-width: 0; }
.sub-of { font-size: 11px; color: var(--ink-muted); margin-bottom: 4px; }
.row-title-line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.row-title { font-size: 15px; font-weight: 600; letter-spacing: .1px; }
.due-pill { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; color: var(--row-color); border: 1px solid var(--row-color); }
.badge { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; color: var(--ink-muted); border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .5px; }
.badge-high { color: var(--magenta); border-color: var(--magenta); }
.row-subcount { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
.row-desc { margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.row-metric { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.row-metric .meter { max-width: 260px; }
.row-metric .meter-fill { background: var(--row-color); }
.row-side { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.subs { border-top: 1px dashed var(--line-soft); padding: 4px 16px 10px 44px; display: flex; flex-direction: column; }
.sub { display: flex; align-items: center; gap: 11px; padding: 7px 0; font-size: 13px; }
.sub-title { flex: 1; color: oklch(0.30 0.02 275); }
.sub.is-done .sub-title { color: oklch(0.62 0.015 275); text-decoration: line-through; }
.sub-list { display: flex; flex-direction: column; border: 1px solid var(--line); }
.sub-list .sub { padding: 10px 13px; border-bottom: 1px solid oklch(0.92 0.008 275); }
.sub-list .sub:last-child { border-bottom: 0; }
.sub-add { background: transparent; border: 0; font: inherit; color: var(--ink-muted); cursor: pointer; text-align: left; }
.sub-add:hover { color: var(--accent); }

.floating { margin-top: 34px; }
.floating-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-muted); }
.floating-head .rule { flex: 1; height: 1px; background: var(--line-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; font: inherit; font-size: 13px; background: var(--surface); border: 1px dashed oklch(0.82 0.01 275); cursor: pointer; color: var(--ink); }
.chip .dot { width: 8px; height: 8px; }
.chip:hover, .chip.is-selected { border-color: var(--magenta); }

.task-row.is-done .row-title { text-decoration: line-through; color: var(--ink-muted); }
.search-form { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); min-width: 180px; }
.search-form input { border: 0; padding: 7px 0; font-size: 12px; background: transparent; width: 100%; }
.search-form input:focus { outline: none; }
.search-form:focus-within { border-color: var(--accent); }
.search-toggle { display: none; }

/* ---- Rail ---- */
.rail-heading { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-muted); margin-top: 26px; }
.rail-heading:first-child { margin-top: 0; }
.rail-title { margin: 10px 0 0; font-family: var(--font-head); font-weight: 600; font-size: 19px; line-height: 1.25; }
.rail-desc { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.rail-facts { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.rail-facts div { display: flex; justify-content: space-between; gap: 10px; }
.rail-facts dt { color: var(--ink-muted); }
.rail-facts dd { margin: 0; text-align: right; }
.rail-facts .due-overdue { color: var(--magenta); }
.rail-facts .due-soon { color: var(--amber); }
.rail-subs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.rail-subs li { display: flex; align-items: center; gap: 9px; }
.rail-subs form { display: contents; }
.rail-subs .check { margin-top: 0; }
.rail-subs li.is-done { color: var(--ink-muted); text-decoration: line-through; }
.actions { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.actions form { display: contents; }
.action { display: flex; align-items: center; gap: 11px; padding: 11px 13px; width: 100%; background: var(--surface); border: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); text-align: left; }
.action:hover, a.action:hover { border-color: var(--accent); color: var(--ink); }
.action .dot { width: 8px; height: 8px; }
.action .hint { font-size: 11px; color: oklch(0.60 0.015 275); }
.action.is-disabled { opacity: .5; cursor: not-allowed; }
.action.is-disabled:hover { border-color: var(--line); }

/* ---- Markdown (rail descriptions) ---- */
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3 { font-family: var(--font-head); font-size: 14px; margin: 14px 0 6px; color: var(--ink); }
.markdown p, .markdown ul, .markdown ol { margin: 6px 0; }
.markdown ul, .markdown ol { padding-left: 20px; }
.markdown ul.contains-task-list { list-style: none; padding-left: 4px; }
.markdown code { font-family: var(--font-mono); font-size: 12px; background: oklch(0.94 0.008 275); padding: 1px 4px; }
.markdown pre { background: oklch(0.94 0.008 275); padding: 10px; overflow-x: auto; }
.markdown pre code { background: transparent; padding: 0; }
.markdown table { border-collapse: collapse; font-size: 12px; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: 4px 8px; }
.markdown blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--ink-muted); }

/* ---- Overlay ---- */
.scrim { position: fixed; inset: 0; z-index: 80; background: oklch(0.26 0.02 275 / .42); display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow-y: auto; }
.overlay-card { width: 100%; max-width: 720px; background: var(--surface); border: 1px solid oklch(0.80 0.01 275); box-shadow: 0 18px 48px oklch(0.26 0.02 275 / .28); }
.overlay-narrow { max-width: 460px; }
.overlay-form { display: flex; flex-direction: column; }
.overlay-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.overlay-heading { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-muted); }
.overlay-body { padding: 22px 20px; display: flex; flex-direction: column; gap: 20px; }
.overlay-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.input-title { font-family: var(--font-head); font-weight: 600; font-size: 17px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.static { padding: 10px 12px; border: 1px solid var(--line); font-size: 13px; background: var(--surface-2); }
.tag { font-size: 10px; padding: 2px 6px; border: 1px solid var(--line); color: var(--ink-muted); }
.md-toolbar { display: flex; gap: 6px; font-size: 11px; color: var(--ink-muted); }
.md-toolbar button { padding: 2px 7px; border: 1px solid var(--line-soft); background: var(--surface); cursor: pointer; font: inherit; font-size: 11px; color: inherit; }
.md-toolbar button:hover { border-color: var(--accent); color: var(--ink); }
textarea.md-input { font-size: 12.5px; line-height: 1.75; min-height: 150px; resize: vertical; }
.row.nowrap { flex-wrap: nowrap; }
.input-num { width: 110px; flex: 0 0 110px; }
.link-danger { background: transparent; border: 0; font: inherit; font-size: 12px; color: var(--magenta); cursor: pointer; padding: 0; }
.link-danger:hover { text-decoration: underline; }

/* ---- Overdue decision strip ---- */
.overdue-strip { margin-top: 22px; border: 1px solid var(--magenta); background: oklch(0.97 0.02 345); padding: 16px 18px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.overdue-text { min-width: 220px; flex: 1; }
.overdue-kicker { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: oklch(0.52 0.16 345); }
.overdue-title { margin-top: 6px; font-size: 15px; font-weight: 600; }
.overdue-meta { margin-top: 3px; font-size: 12px; color: var(--ink-soft); }
.overdue-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.overdue-actions form { display: contents; }
.btn-done { background: var(--green); border-color: var(--green); color: var(--surface); }
.btn-done:hover { border-color: var(--green); filter: brightness(.95); }
.postpone-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); min-width: 240px; }
.postpone-form input[type=date] { width: auto; }
#postpone-slot:empty { display: none; }
#postpone-slot { margin: 2px 0; }

/* ---- Progress logging (rail) ---- */
.rail-progress { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.rail-progress .meter { height: 6px; }
.progress-form { display: flex; gap: 6px; align-items: center; }
.progress-form .input-num { width: 90px; flex: 0 0 90px; padding: 7px 9px; font-size: 12px; }
.progress-form input.grow { padding: 7px 9px; font-size: 12px; min-width: 0; }
.progress-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.progress-log .pos { color: var(--green); }
.progress-log .neg { color: var(--magenta); }
.progress-log .note { color: var(--ink-soft); font-family: var(--font-body); }

/* ---- Goals ---- */
.goals-strip { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.goal-card { position: relative; container-type: inline-size; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--goal-color); padding: 13px 14px; min-width: 0; }
.goal-card.is-suspended { opacity: .6; border-top-style: dashed; }
.goal-card.needs-tracking { border-color: var(--amber); }
.goal-card.is-over .goal-meter .meter-fill { background: var(--magenta); }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.goal-name { font-size: 13px; font-weight: 600; }
.goal-meter { height: 6px; background: oklch(0.91 0.008 275); margin-top: 10px; }
.goal-meter .meter-fill { background: var(--goal-color); }
.goal-note { margin-top: 7px; padding-right: 26px; font-size: 11px; color: var(--ink-muted); }
.goal-type { margin-left: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; padding: 1px 5px; border: 1px solid var(--line); color: var(--ink-muted); vertical-align: middle; }
.goal-delta { margin-left: 6px; font-family: var(--font-mono); }
.goal-delta.pos { color: var(--green); }
.goal-delta.neg { color: var(--magenta); }
/* Only shown when the card itself is wide enough to carry the extra line. */
.goal-last { display: none; margin-top: 5px; padding-right: 26px; font-size: 11px; color: var(--ink-soft); }
@container (min-width: 210px) { .goal-last { display: block; } }
.goal-actions { position: absolute; right: 9px; bottom: 9px; display: flex; gap: 4px; align-items: center; }
.goal-actions form { display: contents; }
.goal-btn { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 11px; line-height: 1; cursor: pointer; border: 1px solid oklch(0.87 0.008 275); color: var(--ink-muted); background: var(--surface); padding: 0; }
.goal-btn:hover { border-color: var(--goal-color); color: var(--goal-color); }
a.goal-btn { text-decoration: none; }
.goal-plus { font-size: 14px; color: var(--goal-color); }
.needs-tracking .goal-plus { border-color: var(--amber); color: var(--amber); }
.goal-log-form { margin-top: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.goal-log-form .input-num { width: 80px; flex: 0 0 80px; padding: 6px 8px; font-size: 12px; }
.goal-log-form input.grow { padding: 6px 8px; font-size: 12px; min-width: 60px; }
.goals-page { padding: 24px clamp(16px, 3vw, 28px) 64px; display: flex; flex-direction: column; gap: 18px; }
.goal-rows { display: flex; flex-direction: column; gap: 14px; }
.goal-row { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.goal-side { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 640px) { .goal-row { grid-template-columns: minmax(0, 1fr); } }

/* ---- Sharing & resources (rail) ---- */
.avatar-small { width: 28px; height: 28px; font-size: 11px; }
.avatar.is-owner { border-color: var(--accent); }
.avatar-add { border-style: dashed; background: transparent; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink-muted); }
.avatar-add:hover { border-color: var(--accent); color: var(--accent); }
.shared-with { margin-top: 10px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.avatar-wrap { position: relative; display: inline-flex; }
.avatar-wrap form { display: contents; }
.avatar-remove { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 9px; line-height: 1; cursor: pointer; color: var(--ink-muted); padding: 0; display: none; }
.avatar-wrap:hover .avatar-remove { display: block; }
.inline-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); margin-top: 6px; min-width: 0; }
.inline-form .row { flex-wrap: wrap; }
.inline-form input.grow { min-width: 0; flex: 1 1 120px; }
.inline-form .input-kind { flex: 0 0 auto; }
#share-slot:empty, #resource-slot:empty { display: none; }
.resources { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.resource { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-soft); background: var(--surface); font-size: 12px; --kind-color: var(--magenta); }
.resource.kind-jira { --kind-color: var(--blue); }
.resource.kind-repo { --kind-color: var(--green); }
.resource.kind-other { --kind-color: var(--ink-muted); }
.resource .kind { font-size: 10px; padding: 2px 6px; color: var(--kind-color); border: 1px solid var(--kind-color); flex-shrink: 0; }
.resource-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.resource-label:hover { color: var(--accent); }
.resource form { display: contents; }
.resource-add { padding: 9px 12px; border: 1px dashed oklch(0.82 0.01 275); font: inherit; font-size: 12px; color: var(--ink-muted); cursor: pointer; text-align: center; background: transparent; }
.resource-add:hover { border-color: var(--accent); color: var(--accent); }
.input-kind { width: auto; flex: 0 0 auto; padding: 7px 8px; font-size: 12px; }
.goal-log-form select, .progress-form select { font-size: 12px; }

/* ---- Reminders ---- */
.reminder-stack { display: flex; flex-direction: column; gap: 6px; padding: 8px clamp(14px, 3vw, 24px) 0; }
.reminder { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--amber); background: oklch(0.97 0.03 80); font-size: 13px; }
.reminder-kicker { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: oklch(0.52 0.13 60); }
.reminder-title { font-weight: 600; color: var(--ink); }
.reminder form { margin-left: auto; }
.reminder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.reminder-list li { display: flex; align-items: center; gap: 8px; }
.reminder-list .icon-btn { margin-left: auto; }
#reminder-slot:empty { display: none; }

/* =========================================================================
   Responsive layout (architecture §9.1). One breakpoint: below 780px the
   board is a single column; the areas sidebar and the detail rail become
   off-canvas drawers driven by body.areas-open / body.detail-open.
   ========================================================================= */
.drawer-toggle { display: none; }
.drawer-close { display: none; }
.drawer-scrim { display: none; }

@media (max-width: 780px) {
  .board, .board-2col { grid-template-columns: minmax(0, 1fr); }
  .task-column { padding: 16px 16px 72px; }

  /* Drawers */
  .sidebar, .rail { position: fixed; top: 0; bottom: 0; width: min(85vw, 320px); max-width: 100%; z-index: 90; overflow-y: auto; min-height: 0; transition: transform .22s ease; box-shadow: 0 0 0 transparent; }
  .sidebar { left: 0; transform: translateX(-100%); border-right: 1px solid var(--line); padding-top: 56px; }
  /* Same 56px band as .drawer-close (its top:12px + height:44px), so the wordmark
     sits on the same row as the ✕ instead of leaving that whole row empty on the left. */
  .sidebar-brand { display: flex; position: absolute; top: 0; left: 0; height: 56px; align-items: center; padding: 0 18px; color: var(--ink); }
  .rail { right: 0; transform: translateX(100%); border-left: 1px solid var(--line); padding-top: 56px; }
  body.areas-open .sidebar, body.detail-open .rail { transform: translateX(0); box-shadow: 0 18px 48px oklch(0.26 0.02 275 / .28); }
  .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 85; background: oklch(0.26 0.02 275 / .42); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  body.areas-open .drawer-scrim, body.detail-open .drawer-scrim { opacity: 1; pointer-events: auto; }
  body.areas-open, body.detail-open { overflow: hidden; }
  .drawer-close { display: inline-flex; position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); font-size: 18px; cursor: pointer; z-index: 1; }
  .drawer-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); padding: 0; flex-shrink: 0; }
  .drawer-toggle:hover { border-color: var(--accent); }
  .drawer-toggle .badge-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); }

  /* Top bar: keep it to one row of essentials; search collapses to an icon */
  .topbar { gap: 8px; padding: 8px 12px; }
  .search-toggle { display: inline-flex; }
  .search-form { display: none; }
  body.search-open .search-form { display: flex; order: 10; flex-basis: 100%; min-width: 0; }
  body.search-open .search-toggle { border-color: var(--accent); }
  .topbar .brand { display: none; }
  .segmented button { padding: 7px 8px; font-size: 11px; }
  .topbar .btn-primary { padding: 8px 10px; }

  /* Goals strip: horizontal snap-scroll so meters keep a legible width */
  .goals-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-left: -16px; margin-right: -16px; padding: 0 16px 6px; -webkit-overflow-scrolling: touch; }
  .goal-card { flex: 0 0 min(76vw, 240px); scroll-snap-align: start; }

  /* Task rows: thumb-sized targets, drop the redundant category label */
  .row-main { padding: 12px 12px; gap: 10px; }
  .check { width: 22px; height: 22px; margin: 11px; box-sizing: content-box; padding: 0; } /* 22 + 2*11 = 44px hit area */
  .check-small { width: 16px; height: 16px; margin: 14px 4px 14px 0; }
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn-small { width: 40px; height: 40px; }
  .row-cat { display: none; }
  .row-side { align-self: center; }
  .subs { padding-left: 16px; }

  /* Overdue strip: buttons stack full width */
  .overdue-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .overdue-actions .btn { width: 100%; justify-content: center; padding: 12px 14px; }
  .overdue-actions form { display: block; }

  /* Edit overlay: full-viewport sheet, no card chrome.
     align-self: flex-start (instead of the container's align-items: stretch) keeps the
     card's own height driven by its content + min-height, so a form taller than one
     screen grows past 100vh instead of being clipped to it — stretch would otherwise
     give the card a hard 100vh height and let content spill past its background,
     showing the scrim through the gap while scrolling. */
  .scrim { padding: 0; align-items: stretch; }
  .overlay-card, .overlay-narrow { max-width: none; min-height: 100vh; border: 0; box-shadow: none; align-self: flex-start; }
  .overlay-head { position: sticky; top: 0; z-index: 2; }
  .overlay-foot { position: sticky; bottom: 0; z-index: 2; }
  .overlay-head .icon-btn, .overlay-foot .btn { min-height: 44px; }

  /* Rail actions and forms: generous tap targets */
  .action { padding: 13px 13px; min-height: 44px; }
  .btn { min-height: 40px; }
  .flash-stack { position: static; }
  .chip { min-height: 40px; }

  /* Settings/goals pages */
  .settings, .goals-page { padding-left: 16px; padding-right: 16px; }
}

@media (min-width: 781px) {
  .drawer-toggle, .drawer-close, .drawer-scrim { display: none !important; }
}

/* ---- First-login welcome ---- */
.welcome-intro { margin: 0; color: var(--ink-soft); font-size: 13px; }

/* ---- Tags ---- */
.row-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.rail-tags { margin-top: 8px; }
.tag-label { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); }
.tag-label:hover { border-color: var(--accent); color: var(--accent); }
.tag-label.is-active { border-color: var(--accent); background: var(--accent); color: var(--surface); }
.tag-label.is-active:hover { color: var(--surface); filter: brightness(.94); }
.tag-filter { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); background: var(--surface); cursor: text; }
.tag-input:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; }
.tag-chips { display: contents; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; padding: 3px 4px 3px 8px; border: 1px solid var(--line); background: var(--surface-2); }
.tag-chip button { border: 0; background: transparent; cursor: pointer; font-size: 11px; line-height: 1; color: var(--ink-muted); padding: 0 3px; }
.tag-chip button:hover { color: var(--magenta); }
.tag-input .tag-text { flex: 1 1 140px; min-width: 100px; border: 0; padding: 4px 2px; font-size: 13px; }
.tag-input .tag-text:focus { outline: none; }

/* ---- Notices ---- */
.notice { margin: 0; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.notice-experimental { border-color: var(--amber); background: oklch(0.97 0.03 80); }

/* ---- Goals page sections and nudges ---- */
.goal-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.goal-section-head h2 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.goal-nudge { border-color: var(--amber); background: oklch(0.98 0.02 80); }
.goal-nudge .reminder-kicker { color: oklch(0.52 0.13 60); }

/* ---- Goal stats page ---- */
.stats-body { display: flex; flex-direction: column; gap: 16px; }
.chart-wrap { border: 1px solid var(--line); background: var(--surface); padding: 10px; overflow-x: auto; }
.goal-chart { width: 100%; height: auto; display: block; min-width: 320px; }
.goal-chart .axis { stroke: var(--line); stroke-width: 1; }
.goal-chart .tick { fill: var(--ink-muted); font-family: var(--font-mono); font-size: 10px; }
.goal-chart .target { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.goal-chart .target-tick { fill: var(--ink-soft); }
.goal-chart .series { stroke: var(--goal-color); stroke-width: 2; stroke-linecap: round; }
.goal-chart .point { fill: var(--goal-color); stroke: var(--surface); stroke-width: 1.5; }
.goal-chart .point.is-missed { fill: var(--magenta); }
.goal-chart .bar { fill: var(--goal-color); }
.goal-chart .bar.is-met { fill: var(--green); }
.goal-chart .bar.is-missed { fill: var(--magenta); }
.goal-chart .bar.is-untracked, .goal-chart .bar.is-suspended { fill: oklch(0.93 0.008 275); }
.goal-chart .bar-empty { fill: oklch(0.95 0.006 275); }
.table.protocol td.num, .table.protocol th.num { text-align: right; }
.table.protocol .pos { color: var(--green); }
.table.protocol .neg { color: var(--magenta); }
.table.protocol tr.status-untracked td, .table.protocol tr.status-suspended td { color: var(--ink-muted); }
.badge-met { color: var(--green); border-color: var(--green); }
.badge-missed { color: var(--magenta); border-color: var(--magenta); }
.badge-suspended, .badge-untracked { color: var(--ink-muted); }