/* Traction UI — light SaaS dashboard: sidebar + topbar shell, white cards on a soft gray canvas. */
:root {
  --bg:#f4f5f9; --panel:#ffffff; --line:#e6e8ef; --line-strong:#d5d9e3; --text:#101828; --muted:#667085; --faint:#98a2b3;
  --accent:#4361ee; --accent-dark:#3550d6; --accent-soft:#eef1fe; --danger:#d92d20; --danger-soft:#fee4e2; --ok:#12b76a; --ok-soft:#e6f7ef; --warn:#f79009; --warn-soft:#fef1e0;
  --radius:12px; --radius-sm:8px; --shadow:0 1px 2px rgba(16,24,40,.05); --shadow-md:0 6px 18px -6px rgba(16,24,40,.12);
  --surface-1:var(--surface-1); --surface-2:var(--surface-2); --surface-3:var(--surface-3); --track:var(--track); --hover-border:var(--hover-border);
  --sidebar:232px; --topbar:56px;
}
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2"); }
/* dark theme: follows the OS unless the user picked one from the account menu */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0f1219; --panel:#171b25; --line:#262c3a; --line-strong:#333b4d; --text:#e7eaf0; --muted:#9aa3b5; --faint:#6b7488;
  --accent:#6b86ff; --accent-dark:#5573f5; --accent-soft:#1d2540; --danger:#f97066; --danger-soft:#3a1d1d; --ok:#32d583; --ok-soft:#14332a; --warn:#fdb022; --warn-soft:#3a2b12;
  --surface-1:#1b2030; --surface-2:#1f2536; --surface-3:#232a3c; --track:#2a3145; --hover-border:#3d4c8a; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 24px -8px rgba(0,0,0,.6);
} }
:root[data-theme="dark"] {
  --bg:#0f1219; --panel:#171b25; --line:#262c3a; --line-strong:#333b4d; --text:#e7eaf0; --muted:#9aa3b5; --faint:#6b7488;
  --accent:#6b86ff; --accent-dark:#5573f5; --accent-soft:#1d2540; --danger:#f97066; --danger-soft:#3a1d1d; --ok:#32d583; --ok-soft:#14332a; --warn:#fdb022; --warn-soft:#3a2b12;
  --surface-1:#1b2030; --surface-2:#1f2536; --surface-3:#232a3c; --track:#2a3145; --hover-border:#3d4c8a; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 24px -8px rgba(0,0,0,.6);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:22px; font-weight:700; margin:0; letter-spacing:-.01em; } h2 { font-size:15px; font-weight:600; margin:16px 0 8px; } h3 { font-size:11px; font-weight:600; margin:16px 0 8px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
p { margin:6px 0; } code { background:var(--surface-2); padding:1px 5px; border-radius:4px; font-size:12px; } pre { background:var(--surface-2); padding:10px 12px; border-radius:var(--radius-sm); overflow:auto; }
kbd { font:11px/1 ui-monospace, monospace; background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px; padding:2px 5px; border-radius:4px; color:var(--muted); }
.muted { color:var(--muted); } .small { font-size:12px; } .nowrap { white-space:nowrap; } .right { margin-left:auto; } .dim { opacity:.55; } .grow { flex:1; }
.error { color:var(--danger); } .notice { background:var(--ok-soft); border:1px solid color-mix(in srgb,var(--ok) 40%,var(--panel)); color:color-mix(in srgb,var(--ok) 65%,var(--text)); padding:8px 14px; border-radius:var(--radius-sm); margin:0 0 14px; }
.tagline { color:var(--muted); margin-top:-4px; } .inline { display:inline; } .plain { list-style:none; padding:0; margin:0 0 8px; } .plain li { padding:4px 0; }
.rowline { padding:7px 0; border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .rowline:last-child { border-bottom:none; }
[hidden] { display:none !important; }

/* ---- shell */
body.app { padding-left:var(--sidebar); }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:14px 12px; gap:10px; z-index:30; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; color:var(--text); padding:4px 6px; } .brand:hover { text-decoration:none; }
.logo { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--accent),#7c3aed); color:#fff; font-weight:800; }
.sidebar .new { display:block; text-align:center; margin:4px 0 6px; }
.side-nav { display:flex; flex-direction:column; gap:2px; } .side-nav .section { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); padding:12px 10px 4px; font-weight:600; }
.side-nav a { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--radius-sm); color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-nav a:hover { background:var(--surface-2); text-decoration:none; } .side-nav a.active { background:var(--accent-soft); color:var(--accent); }
.side-nav .i { width:18px; height:18px; flex:none; color:var(--muted); } .side-nav a.active .i { color:var(--accent); }
.side-nav .pkey { font-size:10px; font-weight:700; background:var(--surface-2); color:var(--muted); border-radius:5px; padding:2px 5px; min-width:34px; text-align:center; flex:none; } .side-nav a.active .pkey { background:#dfe5fd; color:var(--accent); }
.me { margin-top:auto; display:flex; gap:10px; align-items:center; padding:8px 6px; border-top:1px solid var(--line); color:var(--text); font-size:13px; line-height:1.25; } .me:hover { text-decoration:none; }
.topbar { position:sticky; top:0; height:var(--topbar); display:flex; align-items:center; gap:10px; padding:0 24px; background:color-mix(in srgb, var(--panel) 85%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:20; }
.topbar .search { display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid transparent; border-radius:10px; padding:0 10px; width:380px; max-width:60vw; } .topbar .search:focus-within { border-color:var(--accent); background:#fff; }
.topbar .search input { border:none; background:none; padding:8px 0; width:100%; } .topbar .search input:focus { outline:none; } .topbar .search .ico .i { width:16px; height:16px; color:var(--muted); display:block; }
.iconbtn { position:relative; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--muted); cursor:pointer; list-style:none; } .iconbtn:hover { background:var(--surface-2); text-decoration:none; } .iconbtn .i { width:20px; height:20px; }
.dot { position:absolute; top:4px; right:4px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; border-radius:9px; padding:0 5px; line-height:16px; }
.burger { display:none; font-size:20px; cursor:pointer; padding:4px 8px; }
details.menu { position:relative; } details.menu summary { cursor:pointer; list-style:none; } details.menu summary::-webkit-details-marker { display:none; }
details.menu > div { position:absolute; right:0; top:42px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px; min-width:190px; z-index:40; box-shadow:var(--shadow-md); }
details.menu > div a, details.menu > div button { display:block; padding:7px 10px; width:100%; text-align:left; border-radius:6px; color:var(--text); } details.menu > div a:hover, details.menu > div button:hover { background:var(--surface-2); text-decoration:none; }
main { max-width:1180px; margin:0 auto; padding:22px 24px 60px; } main.wide { max-width:1600px; } main.focus { max-width:760px; }
body.bare main { padding-top:40px; }

/* ---- avatars & badges */
.avatar { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:color-mix(in srgb, hsl(var(--h,220) 70% 60%) 22%, var(--panel)); color:hsl(var(--h,220) 60% var(--avatar-l,32%)); font-weight:700; font-size:12px; flex:none; letter-spacing:.02em; }
.avatar.sm { width:28px; height:28px; font-size:11px; } .avatar.xs { width:22px; height:22px; font-size:9px; } .avatar.empty { background:var(--surface-2); color:var(--faint); border:1px dashed var(--line-strong); }
.who { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.badge { display:inline-flex; align-items:center; font-size:11px; font-weight:500; padding:1px 8px; border-radius:999px; background:var(--surface-2); color:#344054; white-space:nowrap; line-height:18px; }
.lozenge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:1px 8px 1px 6px; border-radius:6px; white-space:nowrap; line-height:18px; background:color-mix(in srgb, var(--c) 14%, var(--panel)); color:color-mix(in srgb, var(--c) 65%, var(--text)); }
.lozenge i { width:7px; height:7px; border-radius:50%; background:var(--c); }
.p-low { background:color-mix(in srgb,#0ea5e9 16%,var(--panel)); color:color-mix(in srgb,#0ea5e9 70%,var(--text)); } .p-medium { background:var(--warn-soft); color:color-mix(in srgb,var(--warn) 70%,var(--text)); } .p-high { background:color-mix(in srgb,#f97316 18%,var(--panel)); color:color-mix(in srgb,#ea580c 75%,var(--text)); } .p-urgent { background:var(--danger-soft); color:color-mix(in srgb,var(--danger) 80%,var(--text)); }
.h-on_track { background:var(--ok-soft); color:color-mix(in srgb,var(--ok) 65%,var(--text)); } .h-at_risk { background:var(--warn-soft); color:color-mix(in srgb,var(--warn) 70%,var(--text)); } .h-off_track { background:var(--danger-soft); color:color-mix(in srgb,var(--danger) 80%,var(--text)); }
.s-planned, .c-upcoming { background:var(--accent-soft); color:var(--accent); } .s-in_progress, .c-active { background:var(--warn-soft); color:color-mix(in srgb,var(--warn) 70%,var(--text)); } .s-completed, .s-done, .c-completed, .a-approved { background:var(--ok-soft); color:color-mix(in srgb,var(--ok) 65%,var(--text)); } .s-cancelled, .a-rejected { background:var(--danger-soft); color:color-mix(in srgb,var(--danger) 80%,var(--text)); } .s-paused, .a-pending { background:var(--surface-2); }
.key { display:inline-block; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; letter-spacing:.02em; }
.chip { display:inline-block; padding:3px 10px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--text); font-size:12px; } .chip.active { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.swatch { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.progress { display:block; height:6px; border-radius:3px; background:var(--track); overflow:hidden; } .progress span { display:block; height:100%; background:var(--accent); border-radius:3px; }
.bar { background:var(--track); border-radius:4px; height:8px; width:110px; overflow:hidden; } .bar span { display:block; height:100%; background:var(--accent); }
progress { width:96px; height:6px; vertical-align:middle; border:none; border-radius:3px; overflow:hidden; background:var(--track); } progress::-webkit-progress-bar { background:var(--track); } progress::-webkit-progress-value { background:var(--accent); border-radius:3px; } progress::-moz-progress-bar { background:var(--accent); }

/* ---- page header, tabs, toolbars */
header.page { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:16px; } header.page p { margin:2px 0 0; }
.tabs { display:flex; gap:2px; flex-wrap:wrap; background:var(--surface-3); padding:3px; border-radius:10px; } .tabs a { padding:6px 12px; border-radius:8px; color:var(--muted); font-weight:500; } .tabs a:hover { text-decoration:none; color:var(--text); }
.tabs a.active { background:var(--panel); color:var(--text); box-shadow:var(--shadow); } .tabs.sub { margin-bottom:14px; }
.tabs .count { background:var(--danger); color:#fff; border-radius:9px; padding:0 6px; font-size:11px; }
.seg { display:inline-flex; background:var(--surface-3); padding:3px; border-radius:10px; } .seg a { padding:5px 11px; border-radius:7px; color:var(--muted); font-weight:500; } .seg a:hover { text-decoration:none; } .seg a.active { background:var(--panel); color:var(--text); box-shadow:var(--shadow); }
.crumbs { color:var(--muted); margin:0 0 12px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:13px; } .crumbs a { color:var(--muted); } .crumbs a:hover { color:var(--accent); }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; } .toolbar select, .toolbar input { padding:5px 9px; font-size:13px; }
.quick-add { margin-bottom:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:8px; box-shadow:var(--shadow); } .quick-add input, .quick-add select { border-color:transparent; background:var(--surface-1); }

/* ---- forms & buttons */
input, select, textarea, button { font:inherit; padding:7px 10px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
input, textarea { width:100%; } textarea { resize:vertical; } input.h1 { font-size:20px; font-weight:700; border-color:transparent; padding-left:0; } input.h1:focus { border-color:var(--accent); padding-left:10px; }
input[type=checkbox], input[type=radio], input[type=color], input[type=file] { width:auto; padding:2px; accent-color:var(--accent); } input[type=color] { height:34px; }
label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); font-weight:500; } label.inline { flex-direction:row; align-items:center; gap:6px; }
button, .button { background:var(--accent); color:#fff; border:1px solid var(--accent); cursor:pointer; white-space:nowrap; border-radius:var(--radius-sm); padding:7px 14px; display:inline-block; font-weight:500; transition:background .12s; }
button:hover, .button:hover { background:var(--accent-dark); text-decoration:none; } button.secondary, .button.secondary { background:var(--panel); color:var(--text); border-color:var(--line-strong); } button.secondary:hover, .button.secondary:hover { background:var(--surface-1); }
button.link { background:none; border:none; color:var(--accent); padding:0; font-weight:500; } button.link:hover { background:none; text-decoration:underline; }
button.danger { color:var(--danger); border-color:#f9c7c2; background:var(--panel); } button.danger:hover { background:var(--danger-soft); } button.danger.link { border:none; background:none; }
button.small, .button.small { padding:4px 10px; font-size:12px; }
.row { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; } .row > input:not([type=checkbox]):not([type=color]):not([type=number]):not([type=date]) { flex:1; min-width:110px; } .row label { flex-direction:row; align-items:center; gap:6px; }
.row.head { border-bottom:1px solid var(--line); padding-bottom:4px; margin-bottom:6px; }
.stack { display:flex; flex-direction:column; gap:12px; } .grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; } .grid3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-top:16px; box-shadow:var(--shadow); } .panel.danger { border-color:#f9c7c2; } .panel h2:first-child, .panel h3:first-child { margin-top:0; }

/* ---- dashboard */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:8px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; color:var(--text); box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s; }
.stat:hover { text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-md); } .stat b { font-size:26px; font-weight:700; line-height:1.1; grid-column:2; } .stat > span:last-child { grid-column:2; color:var(--muted); font-size:12px; }
.stat-ico { grid-row:1 / span 2; align-self:center; display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--accent-soft); color:var(--accent); } .stat-ico .i { width:20px; height:20px; }
.stat.t2 .stat-ico { background:var(--danger-soft); color:var(--danger); } .stat.t3 .stat-ico { background:var(--ok-soft); color:#087443; } .stat.t4 .stat-ico { background:var(--warn-soft); color:#b54708; } .stat.t5 .stat-ico { background:#f4ebff; color:#6941c6; }
.auth { max-width:380px; margin:60px auto; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow-md); } .auth form { display:flex; flex-direction:column; gap:12px; margin-top:12px; } .auth h1 { font-size:24px; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.project-card { display:flex; flex-direction:column; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; color:var(--text); box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s; }
.project-card:hover { text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:var(--hover-border); } .project-card strong { font-size:15px; }

/* ---- tables */
table { width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:10px; box-shadow:var(--shadow); }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; } th { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; background:var(--surface-1); } tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--surface-1); } td.check { width:28px; } table.compact td { padding:5px 10px; }
tr.overdue td:nth-child(3) a::after, .card.overdue .title::after { content:" ⚠"; color:var(--danger); }
.scroll { overflow-x:auto; } table.sheet { min-width:1400px; } table.sheet td { white-space:nowrap; max-width:320px; overflow:hidden; text-overflow:ellipsis; }

/* ---- board */
.board { display:flex; gap:14px; overflow-x:auto; align-items:flex-start; padding-bottom:10px; }
.column { background:var(--surface-3); border-radius:14px; padding:10px; min-width:272px; width:272px; flex:0 0 auto; min-height:180px; transition:outline-color .12s; outline:2px dashed transparent; }
.column.over { outline-color:var(--accent); background:var(--accent-soft); } .column h3 { display:flex; align-items:center; gap:6px; margin:4px 6px 10px; color:var(--text); text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; }
.column .count { background:var(--panel); border-radius:999px; padding:0 8px; font-size:11px; color:var(--muted); font-weight:600; line-height:18px; } .board.static .card { cursor:pointer; }
.cards { display:flex; flex-direction:column; gap:8px; min-height:30px; }
.card { display:flex; flex-direction:column; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; color:var(--text); cursor:grab; box-shadow:var(--shadow); transition:box-shadow .12s, transform .12s; }
.card:hover { text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--hover-border); } .card .title { font-weight:600; line-height:1.35; } .card .meta { display:flex; gap:4px; flex-wrap:wrap; align-items:center; } .card .meta:empty { display:none; }
.card .foot { display:flex; gap:8px; align-items:center; margin-top:2px; }
h3.group { margin-top:18px; text-transform:none; letter-spacing:0; font-size:14px; color:var(--text); }
.bulk { display:flex; gap:6px; flex-wrap:wrap; align-items:center; position:sticky; bottom:12px; box-shadow:var(--shadow-md); } .bulk select { padding:4px 6px; font-size:12px; }

/* ---- calendar & timeline */
.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } .dow { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:2px 6px; font-weight:600; }
.day { background:var(--panel); border:1px solid var(--line); border-radius:10px; min-height:96px; padding:6px; font-size:12px; } .day.dim { opacity:.45; } .day.today { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); } .day .num { color:var(--muted); font-weight:600; }
.cal-item { display:block; background:color-mix(in srgb, var(--c) 14%, var(--panel)); border-left:3px solid var(--c); color:var(--text); padding:2px 6px; margin-top:3px; border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.timeline { --span:42; font-size:12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .tl-row { display:grid; grid-template-columns:260px 1fr; border-bottom:1px solid var(--line); } .tl-row.head { position:sticky; top:0; background:var(--surface-1); }
.tl-label { padding:6px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tl-days { display:grid; grid-template-columns:repeat(var(--span),minmax(22px,1fr)); position:relative; min-height:30px; }
.tl-day { font-size:10px; color:var(--muted); text-align:center; border-left:1px solid var(--line); padding:5px 0; } .tl-day.today { background:var(--accent-soft); color:var(--accent); font-weight:700; }
.tl-bar { grid-column:calc(var(--o) + 1) / span var(--s); background:color-mix(in srgb, var(--c) 28%, var(--panel)); border-left:3px solid var(--c); margin:5px 0; padding:1px 8px; border-radius:6px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- detail pages, wiki, editor */
.split { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr); gap:24px; } .split aside .panel { margin-top:0; margin-bottom:14px; } .split.doc { grid-template-columns:minmax(0,1fr) 250px; } .focus .split.doc { grid-template-columns:1fr; } .focus .toc { display:none; }
.split .main > form.stack:first-child, article.main { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.toc { position:sticky; top:calc(var(--topbar) + 16px); align-self:start; } .toc li { padding-left:calc(var(--d,0) * 12px); }
.tree li { padding-left:calc(var(--d,0) * 18px); } .tree { list-style:none; padding:0; margin:0; }
.comment { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; } .comment blockquote { margin:0 0 4px; padding-left:8px; border-left:3px solid #fde68a; color:var(--muted); }
.update { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.activity div { padding:4px 0; border-bottom:1px solid var(--line); } .activity div:last-child { border-bottom:none; }
.prose { line-height:1.65; } .prose > :first-child { margin-top:0; } .prose h1,.prose h2,.prose h3 { margin:18px 0 6px; text-transform:none; letter-spacing:0; color:var(--text); font-weight:700; } .prose h1{font-size:22px} .prose h2{font-size:18px} .prose h3{font-size:15px}
.prose table { width:auto; box-shadow:none; } .prose img { max-width:100%; } .prose blockquote { border-left:3px solid var(--line-strong); margin:8px 0; padding-left:12px; color:var(--muted); } .prose input[type=checkbox] { margin-right:6px; } .prose a { text-decoration:underline; text-decoration-color:var(--hover-border); }
.prose.editable { border:1px dashed transparent; padding:6px; border-radius:8px; cursor:text; } .prose.editable:hover { border-color:var(--line-strong); }
.editor-body { display:grid; grid-template-columns:1fr; gap:12px; } .editor-body.split2 { grid-template-columns:1fr 1fr; } #editor { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; line-height:1.55; }
.preview { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; overflow:auto; }
.burndown { width:100%; max-width:640px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); }
.excalidraw-host { height:calc(100vh - 150px); min-height:480px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel); }
.prose img[src*="/diagrams/"] { border:1px solid var(--line); border-radius:8px; background:#fff; padding:4px; }
:root[data-theme="dark"] .prose img[src*="/diagrams/"] { filter:invert(.92) hue-rotate(180deg); }

/* ---- palette, floating, slash */
#palette { position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:60; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; backdrop-filter:blur(2px); }
.palette { background:var(--panel); border-radius:14px; width:580px; max-width:92vw; padding:10px; box-shadow:0 24px 60px rgba(16,24,40,.3); }
.palette input { font-size:16px; padding:11px 12px; } .palette ul { list-style:none; margin:8px 0 0; padding:0; max-height:50vh; overflow:auto; } .palette li { padding:8px 10px; border-radius:8px; cursor:pointer; } .palette li.active, .palette li:hover { background:var(--accent-soft); } .palette .kind { color:var(--muted); font-size:11px; margin-right:8px; text-transform:uppercase; font-weight:600; }
#floating { position:absolute; z-index:40; background:var(--text); color:#fff; padding:5px 10px; border-radius:8px; font-size:12px; display:flex; gap:10px; box-shadow:var(--shadow-md); } #floating button { background:none; border:none; color:#fff; padding:0; cursor:pointer; }
#slash { position:absolute; z-index:45; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-md); padding:4px; } #slash div { padding:5px 12px; cursor:pointer; border-radius:6px; } #slash div.active, #slash div:hover { background:var(--accent-soft); }

@media (max-width: 960px) {
  body.app { padding-left:0; } .sidebar { transform:translateX(-100%); transition:transform .15s; box-shadow:var(--shadow-md); } #nav-toggle:checked ~ .sidebar { transform:none; }
  .burger { display:block; } .topbar { padding:0 14px; } main { padding:16px 14px 60px; }
  .split, .split.doc { grid-template-columns:1fr; } .toc { position:static; } .tl-row { grid-template-columns:140px 1fr; } table.sheet { min-width:1000px; }
  .stats { grid-template-columns:repeat(2,1fr); } .stat b { font-size:22px; } .panel, section.panel { overflow-x:auto; }
}

/* ---- elevation pass: focus, skip link, toast, empty states, hero login, details panel, board extras */
:root[data-theme="dark"] { --avatar-l:78%; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --avatar-l:78%; } }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.skip { position:absolute; left:-999px; top:8px; background:var(--accent); color:#fff; padding:6px 10px; border-radius:6px; z-index:100; } .skip:focus { left:8px; }
.toast { position:fixed; top:calc(var(--topbar) + 12px); right:20px; z-index:70; background:var(--text); color:var(--bg); padding:10px 16px; border-radius:10px; box-shadow:var(--shadow-md); font-weight:500; animation:toast-in .2s ease-out; transition:opacity .4s, transform .4s; } .toast.gone { opacity:0; transform:translateY(-8px); pointer-events:none; }
body.bare .toast { position:static; display:inline-block; margin-bottom:12px; } @keyframes toast-in { from { opacity:0; transform:translateY(-8px); } }
.empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:28px 12px; text-align:center; } .empty-ico { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent); margin-bottom:6px; } .empty-ico .i { width:22px; height:22px; }
.drop-hint { display:block; border:1px dashed var(--line-strong); border-radius:10px; padding:16px; text-align:center; color:var(--faint); font-size:12px; }
.col-add { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; color:var(--muted); font-weight:600; } .col-add:hover { background:var(--panel); color:var(--accent); text-decoration:none; }
.clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:0; }
.auth-wrap { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; max-width:920px; margin:40px auto; }
.hero { padding:32px; } .hero h1 { font-size:34px; margin:14px 0 4px; letter-spacing:-.02em; } .hero p { font-size:18px; color:var(--muted); margin:0 0 16px; } .hero ul { padding-left:18px; color:var(--muted); line-height:1.9; }
.auth-wrap .auth { margin:0; }
.details .field { display:grid; grid-template-columns:96px 1fr; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--line); } .details .field:last-of-type { border-bottom:none; } .details .field > span { font-size:12px; color:var(--muted); font-weight:500; }
.details .field select, .details .field input { padding:5px 8px; font-size:13px; border-color:transparent; background:var(--surface-1); width:100%; } .details .field select:hover, .details .field input:hover { border-color:var(--line-strong); } .details .field input[type=checkbox] { width:auto; }
.split .main > form.stack:first-child { padding:20px 22px; }
.topbar { box-shadow:var(--shadow); }
@media (max-width: 960px) { .auth-wrap { grid-template-columns:1fr; margin:16px auto; } .hero { padding:8px 4px; text-align:center; } .hero ul { display:none; } }
.only-dark { display:none; } :root[data-theme="dark"] .only-dark { display:inline; } :root[data-theme="dark"] .only-light { display:none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-dark { display:inline; } :root:not([data-theme="light"]) .only-light { display:none; } }
.hero .wordmark { max-width:100%; height:auto; margin-bottom:8px; } .logo { border-radius:8px; }
/* ---- EasyMDE theming (vendored editor) */
.EasyMDEContainer .CodeMirror { background:var(--panel); color:var(--text); border:1px solid var(--line-strong); border-radius:0 0 var(--radius-sm) var(--radius-sm); font:14px/1.6 Inter, system-ui, sans-serif; padding:6px 4px; }
.EasyMDEContainer .CodeMirror-focused { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.EasyMDEContainer .CodeMirror-cursor { border-left-color:var(--text); } .EasyMDEContainer .CodeMirror-selected { background:var(--accent-soft) !important; }
.EasyMDEContainer .cm-s-easymde .cm-header { color:var(--text); } .EasyMDEContainer .cm-s-easymde .cm-link, .EasyMDEContainer .cm-s-easymde .cm-url { color:var(--accent); } .EasyMDEContainer .cm-s-easymde .cm-comment { background:var(--surface-2); color:var(--text); }
.EasyMDEContainer .CodeMirror-placeholder { color:var(--faint) !important; }
.editor-toolbar { background:var(--surface-1); border:1px solid var(--line-strong); border-bottom:none; border-radius:var(--radius-sm) var(--radius-sm) 0 0; padding:4px 6px; display:flex; flex-wrap:wrap; gap:2px; opacity:1 !important; }
.editor-toolbar button.mde-btn { width:auto; height:28px; padding:0 8px; border:1px solid transparent; border-radius:6px; background:none; color:var(--text); font:12px/1 Inter, system-ui, sans-serif; font-weight:600; min-width:0; }
.editor-toolbar button.mde-btn:hover, .editor-toolbar button.mde-btn.active { background:var(--panel); border-color:var(--line-strong); color:var(--accent); }
.editor-toolbar i.separator { border-left:1px solid var(--line-strong); border-right:none; margin:4px 4px; }
.editor-toolbar.fullscreen { background:var(--surface-1); } .EasyMDEContainer .CodeMirror-fullscreen, .EasyMDEContainer .editor-preview-side { background:var(--panel); }
.editor-preview, .editor-preview-side { background:var(--panel); color:var(--text); border-color:var(--line-strong); padding:14px; }
.editor-preview-side { border-left:1px solid var(--line-strong); }
.EasyMDEContainer .editor-preview.prose img, .editor-preview-side.prose img { max-width:100%; }
/* full screen / side-by-side must sit above the app shell and follow the theme */
.EasyMDEContainer .CodeMirror-fullscreen, .editor-toolbar.fullscreen, .editor-preview-side, .editor-preview-active-side, .editor-preview-full { z-index:120 !important; }
.EasyMDEContainer .CodeMirror-fullscreen, .EasyMDEContainer .CodeMirror-sided, .editor-preview-side, .editor-preview-full, .editor-toolbar.fullscreen { background:var(--panel) !important; color:var(--text); }
.editor-toolbar.fullscreen::before, .editor-toolbar.fullscreen::after { display:none; }