/* Group CRM. Direction B's dark shell (Geist, panels, sidebar) with Direction A's company bands,
   ink stamps, and one signal colour reserved for what waits on the owner. */
:root {
  color-scheme: dark;
  --s0: #0b0b0d; --s1: #121214; --s2: #191a1d; --s3: #222327; --s4: #2b2c31;
  --line: rgb(255 255 255 / 0.08); --line-2: rgb(255 255 255 / 0.14); --line-3: rgb(255 255 255 / 0.26);
  --t1: #eceef0; --t2: #a1a4aa; --t3: #85888e; --t4: #5d6066;
  --a: #3d6ad8; --a-text: #6f9bff;
  --ok: #45b07a; --warn: #e0ad4a;
  --sig: #f2694c; --sig-soft: rgb(242 105 76 / 0.12);
  --ttq: #1dd3b0; --spk: #cdcac0; --spk-band: #e4e0d5; --slv: #7c6cf2; --slv-band: #492deb; --on-co: #0b0b0d;
  --f: 'Geist', ui-sans-serif, system-ui, sans-serif; --m: 'Geist Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--s0); color: var(--t1); font-family: var(--f); font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
::selection { background: var(--a); color: #fff; }
:focus-visible { outline: 2px solid var(--a-text); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 10px; border: 2px solid var(--s0); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--m); font-variant-numeric: tabular-nums; }
.mute { color: var(--t3); }
.sq { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }
.sq.ttq { background: var(--ttq); } .sq.spk { background: var(--spk); } .sq.slv { background: var(--slv); }

.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.main { min-width: 0; }

/* ── Sidebar ── */
.side { border-right: 1px solid var(--line); padding: 12px 10px; }
.side-in { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; min-height: calc(100vh - 24px); }
.org { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.org-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--s3); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 5px; }
.org-mark i { border-radius: 2px; } .org-mark i:nth-child(1) { background: var(--ttq); } .org-mark i:nth-child(2) { background: var(--spk); } .org-mark i:nth-child(3) { background: var(--slv); }
.org b { font-weight: 600; } .org small { display: block; color: var(--t3); font-size: 12px; line-height: 16px; }
.search { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 0 10px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--t3); background: var(--s1); }
.search:focus-within { border-color: var(--line-3); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--t1); height: 100%; }
.search input::placeholder { color: var(--t3); }
.search input::-webkit-search-cancel-button { display: none; }
kbd { font-family: var(--m); font-size: 11px; color: var(--t3); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px; }
.results { position: absolute; top: 38px; left: 0; width: 320px; z-index: 20; background: var(--s2); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 16px 40px rgb(0 0 0 / 0.55); padding: 4px; }
.results a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 7px; color: var(--t1); }
.results a:hover, .results a:focus-visible { background: var(--s3); }
.results .x { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results small { color: var(--t3); font-size: 12px; }
.results p { margin: 0; padding: 10px; color: var(--t3); }
.nav-g { margin-top: 14px; }
.nav-g h6 { margin: 0; padding: 6px 8px; font-size: 12px; font-weight: 500; color: var(--t3); }
.nav-a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 7px; color: var(--t2); font-weight: 500; }
.nav-a i { font-size: 17px; }
.nav-a:hover { background: var(--s2); color: var(--t1); }
.nav-a.on { background: var(--s2); color: var(--t1); box-shadow: inset 0 0 0 1px var(--line); }
.nav-a .n { margin-left: auto; font-family: var(--m); font-size: 12px; color: var(--t3); }
.n.sig, b.sig { color: var(--sig); }
.sub { display: flex; flex-direction: column; margin: 2px 0 6px 17px; padding-left: 10px; border-left: 1px solid var(--line-2); }
.sub a { display: flex; gap: 8px; align-items: center; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--t2); font-size: 13px; }
.sub a span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub a:hover, .sub a.on { background: var(--s2); color: var(--t1); }
.sub .n { font-family: var(--m); font-size: 11px; color: var(--t3); }
.side-ft { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 8px 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--t3); line-height: 16px; }
.side-ft button { margin-left: auto; border: 1px solid var(--line-2); background: transparent; border-radius: 6px; height: 26px; padding: 0 8px; color: var(--t2); cursor: pointer; font-size: 12px; }
.side-ft button:hover { color: var(--t1); border-color: var(--line-3); }

/* ── Top bar ── */
.top { height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 28px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgb(11 11 13 / 0.88); backdrop-filter: blur(12px); z-index: 10; }
.crumbs { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--t3); min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs a:hover { color: var(--t1); }
.crumbs b { color: var(--t1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.crumbs i { font-size: 11px; color: var(--t4); }
.new { height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: var(--a); color: #fff; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; flex: none; }
.new:hover { background: #3560c9; }

main { padding: 28px 28px 64px; max-width: 1400px; }
.hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.eye { margin: 0 0 6px; color: var(--t3); font-size: 13px; }
.hello h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.lede { margin: 6px 0 0; color: var(--t2); }
.tot { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--s1); }
.tot div { padding: 10px 16px; border-left: 1px solid var(--line); }
.tot div:first-child { border-left: 0; }
.tot b { display: block; font-size: 20px; line-height: 26px; font-weight: 600; }
.tot span { color: var(--t3); font-size: 12px; white-space: nowrap; }

/* ── Panels ── */
.panel { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; }
.ph-h { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.ph-h h2 { margin: 0; font-size: 14px; font-weight: 600; }
.ph-h h2.late { color: var(--warn); }
.ph-h .c { font-family: var(--m); font-size: 12px; color: var(--t3); }
.ph-h .r { margin-left: auto; display: flex; gap: 6px; }
.lnk { color: var(--t2); font-size: 13px; background: none; border: 0; cursor: pointer; }
.lnk:hover { color: var(--t1); }
.lnk:disabled { opacity: 0.3; cursor: default; }
.chip { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-2); background: transparent; color: var(--t2); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chip:hover { color: var(--t1); }
.chip.on { background: var(--s3); color: var(--t1); border-color: var(--line-3); }
.empty { margin: 0; padding: 20px 16px; color: var(--t3); }
.empty.big { padding: 48px 0; text-align: center; }
.b { height: 32px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--s2); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s var(--ease), transform 0.1s var(--ease); }
.b:hover { background: var(--s3); border-color: var(--line-3); }
.b:active { transform: scale(0.98); }
.b.pri { background: var(--a); border-color: transparent; color: #fff; }
.b.pri:hover { background: #3560c9; }
.b.pri:disabled { opacity: 0.4; cursor: not-allowed; }
.b.gh { background: transparent; border-color: transparent; color: var(--t3); }
.b.gh:hover { color: var(--t1); background: var(--s2); }
.b.warn { background: var(--sig); color: var(--on-co); border-color: transparent; font-weight: 600; }
.ib { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--t3); display: grid; place-items: center; cursor: pointer; flex: none; }
.ib:hover { background: var(--s3); color: var(--t1); }

/* Avatars: people are circles, agents are rounded squares with their tool icon, the owner carries the signal. */
.av { width: 22px; height: 22px; border-radius: 50%; background: var(--s4); color: var(--t1); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.av.ag { border-radius: 6px; background: var(--s3); border: 1px solid var(--line-2); font-size: 13px; }
.av.ag.ttq { color: var(--ttq); } .av.ag.spk { color: var(--spk); } .av.ag.slv { color: var(--slv); }
.av.you { background: var(--sig); color: var(--on-co); }
.who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--t2); }
.who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border-radius: 7px; cursor: pointer; min-width: 0; }
.pick:hover { background: var(--s3); }
.pick select, .pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pick.plain { padding: 0 6px; margin-left: -6px; gap: 6px; color: var(--t2); }
.pick.plain i { font-size: 11px; color: var(--t3); }
.pick:focus-within { outline: 2px solid var(--a-text); outline-offset: 1px; }

/* Progress */
.bar { display: block; height: 4px; border-radius: 2px; background: var(--s4); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--c, var(--t1)); border-radius: 2px; }
.pc { color: var(--t2); font-size: 12px; }

/* Status: shape carries it, colour only for blocked */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); white-space: nowrap; }
.st i, .sti i { font-size: 15px; }
.st.active, .sti.active { color: var(--t1); }
.st.planned, .sti.planned { color: var(--t3); }
.st.blocked, .sti.blocked { color: var(--warn); }
.st.done, .sti.done { color: var(--ok); }
.sti { display: inline-grid; place-items: center; }

/* Stamp, from the Board Pack: nothing finished disappears, it gets stamped */
.stamp { display: inline-flex; flex-direction: column; align-items: center; padding: 2px 8px 1px; border: 2px solid var(--t1); color: var(--t1); border-radius: 2px; font-family: var(--m); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 13px; transform: rotate(-4deg); flex: none; }
.stamp small { font-size: 9px; letter-spacing: 0.04em; font-weight: 500; opacity: 0.8; }
.stamp.slam { animation: slam 0.3s var(--ease) both; }
@keyframes slam { from { transform: rotate(-4deg) scale(1.6); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }

/* ── Bands, from the Board Pack ── */
.band { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 16px; border-radius: 10px 10px 0 0; color: var(--on-co); }
.band.ttq { background: var(--ttq); } .band.spk { background: var(--spk-band); } .band.slv { background: var(--slv-band); color: #fff; }
.band.big.slv .cnt span { border-left-color: rgb(255 255 255 / 0.25); }
.band.big.slv .cnt .you b::after { background: #fff; }
.band > b { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.band .what { font-size: 13px; opacity: 0.78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.band .cnt { margin-left: auto; display: flex; gap: 16px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.band .cnt b { font-weight: 600; }
.band > i { font-size: 16px; transition: transform 0.2s var(--ease); }
a.band:hover > i { transform: translateX(3px); }
.band.big { border-radius: 12px; min-height: 0; padding: 22px 24px; align-items: flex-end; }
.band.big h1 { margin: 0; font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.03em; }
.band.big p { margin: 6px 0 0; opacity: 0.8; }
.band.big .cnt { gap: 0; }
.band.big .cnt span { display: flex; flex-direction: column; padding: 0 0 0 20px; margin-left: 20px; border-left: 1px solid rgb(11 11 13 / 0.2); font-size: 12px; opacity: 0.85; }
.band.big .cnt b { font-size: 24px; line-height: 30px; opacity: 1; }
.band.big .cnt .you b::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--on-co); margin: 0 0 4px 6px; vertical-align: middle; }

/* ── Overview ── */
.ov { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.rail { order: 2; position: sticky; top: 72px; display: flex; flex-direction: column; gap: 16px; }
.cos { order: 1; display: flex; flex-direction: column; gap: 20px; }
.co-sec { border: 1px solid var(--line); border-radius: 12px; background: var(--s1); }
.co-sec .band { border-radius: 11px 11px 0 0; }
.dcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dcard { padding: 16px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; transition: background 0.15s var(--ease); }
.dcard:first-child { border-left: 0; }
.dcard:hover { background: var(--s2); }
.dc-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dc-h b { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.dcard > p { margin: -6px 0 0; color: var(--t2); font-size: 13px; }
.dcard ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.dcard li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--t2); }
.dcard li .pt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t1); }
.dcard li .mono { font-size: 12px; color: var(--t3); }
.dcard li.more { color: var(--t3); }
.dc-f { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 6px; font-size: 12px; color: var(--t3); min-width: 0; }
.dc-f .nx { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.link-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.link-row:last-child { border-bottom: 0; }
.link-row:hover { background: var(--s2); }
.link-row .pair { display: inline-flex; align-items: center; gap: 4px; color: var(--t3); font-size: 12px; }
.link-row .x { flex: 1; min-width: 0; }
.link-row .x b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row small { color: var(--t3); font-size: 12px; }

/* ── Task rows ── */
.trow { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); position: relative; }
.trow:last-child { border-bottom: 0; }
.trow:hover { background: var(--s2); }
.trow.mine::before, .tb.mine::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 0 2px 2px 0; background: var(--sig); }
.trow .x { flex: 1; min-width: 0; }
.trow .x b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .x small { display: flex; align-items: center; gap: 6px; color: var(--t3); font-size: 12px; overflow: hidden; white-space: nowrap; }
.trow.done .x b { color: var(--t3); text-decoration: line-through; text-decoration-color: var(--t4); }
.due { font-family: var(--m); font-size: 12px; color: var(--t2); white-space: nowrap; min-width: 64px; text-align: right; }
.due.none { color: var(--t4); }
.due.today { color: var(--t1); }
.due.late { color: var(--warn); }
.due.sig { color: var(--sig); }
.ck { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--t4); background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; transition: background 0.15s var(--ease), border-color 0.15s var(--ease); }
.ck i { font-size: 10px; opacity: 0; transform: scale(0.4); transition: opacity 0.15s var(--ease), transform 0.25s var(--ease); color: var(--s0); }
.ck:hover { border-color: var(--t2); }
.ck:hover i { opacity: 0.35; transform: scale(1); color: var(--t2); }
.ck.on { background: var(--t1); border-color: var(--t1); }
.ck.on i { opacity: 1; transform: scale(1); color: var(--s0); }
.ck.sm { width: 16px; height: 16px; border-radius: 4px; }
.ck.sm i { font-size: 9px; }

/* ── Company page ── */
.tabs { display: flex; gap: 4px; margin: 16px 0 20px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; color: var(--t2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab .mono { font-size: 12px; color: var(--t3); }
.tab:hover { color: var(--t1); }
.tab.on { color: var(--t1); border-bottom-color: var(--t1); }
.dirs { display: flex; flex-direction: column; gap: 20px; }
.dsec { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 72px; position: relative; overflow: hidden; }
.dsec.hi { border-color: var(--line-3); }
.ds-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.ds-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-r { display: flex; align-items: center; gap: 12px; flex: none; }
.ds-p { display: flex; align-items: center; gap: 10px; width: 170px; }
.ds-p .mono { font-size: 13px; font-weight: 600; width: 40px; text-align: right; }
.ds-p .bar { flex: 1; height: 6px; border-radius: 3px; }
.ed { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 2px 6px; margin-left: -7px; width: 100%; min-width: 0; outline: none; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.ed:hover { border-color: var(--line); }
.ed:focus { border-color: var(--line-3); background: var(--s0); }
.ed::placeholder { color: var(--t4); }
.ed.h2 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.ed.goal { color: var(--t2); font-size: 13px; }
.ed.h1 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.ed.note { resize: vertical; color: var(--t2); line-height: 20px; font-size: 14px; }
.ptable { display: flex; flex-direction: column; }
.pr { display: grid; grid-template-columns: 96px minmax(0, 1fr) 170px 150px 80px; gap: 16px; align-items: center; padding: 11px 16px 11px 20px; border-bottom: 1px solid var(--line); }
a.pr:hover { background: var(--s2); }
.pr.head { padding-top: 8px; padding-bottom: 8px; font-size: 12px; color: var(--t3); }
.pr.done .pn b { color: var(--t3); }
.pn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pn b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.with { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 6px; height: 20px; white-space: nowrap; flex: none; }
.tk { display: flex; align-items: center; gap: 10px; }
.tk .mono { font-size: 12px; color: var(--t2); width: 34px; }
.tk .bar { flex: 1; }
.dd { font-size: 12px; color: var(--t2); text-align: right; }
.dd.late { color: var(--warn); }
.add-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 20px; color: var(--t3); }
.add-row input { flex: 1; border: 0; background: none; outline: none; height: 30px; color: var(--t1); }
.add-row input::placeholder { color: var(--t3); }
.add-row:focus-within { background: var(--s0); }
.add-row.big { padding: 12px 16px; border-top: 1px solid var(--line); }
.add-dir { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--t3); }
.add-dir input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 32px; color: var(--t1); }
.add-dir input:first-of-type { flex: 0.6; font-weight: 600; }
.add-dir:focus-within { border-color: var(--line-3); background: var(--s1); }

/* Boards */
.kan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kcol { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; min-height: 360px; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.kcol.over { border-color: var(--line-3); background: var(--s2); }
.kh { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.kh b { font-weight: 600; }
.kh .n { font-size: 12px; color: var(--t3); }
.kh .sum { margin-left: auto; font-size: 12px; color: var(--t2); }
.kb { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kcard { display: flex; flex-direction: column; gap: 6px; background: var(--s2); border: 1px solid var(--line); border-radius: 9px; padding: 12px; cursor: grab; position: relative; transition: border-color 0.15s var(--ease), transform 0.2s var(--ease); }
.kcard:hover { border-color: var(--line-3); }
.kcard.dragging { opacity: 0.4; }
.kcard small { color: var(--t3); font-size: 12px; }
.kcard b { font-weight: 600; }
.kcard .stamp { position: absolute; right: 10px; top: 10px; }
.kp { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.kp .mono { font-size: 12px; color: var(--t2); width: 34px; }
.kp .bar { flex: 1; }
.kf { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--t3); }
.kf .dd { margin-left: auto; }
.kf span:empty { flex: 1; }
.kcard.deal .amt { font-size: 15px; font-weight: 600; color: var(--t1); }
.kcard.deal p { margin: 0; color: var(--t2); font-size: 13px; }
.drop-hint { margin: 0; padding: 20px 8px; text-align: center; color: var(--t4); font-size: 13px; border: 1px dashed var(--line); border-radius: 9px; }
.kcol .add-row { padding: 4px 8px 8px 10px; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.fg { display: flex; gap: 6px; flex-wrap: wrap; }
.sel { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 7px; color: var(--t2); font-size: 13px; }
.sel select { border: 0; background: transparent; outline: none; color: var(--t1); cursor: pointer; }
.tgroup { margin-bottom: 16px; }

/* ── Project page ── */
.phead { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; margin-bottom: 20px; }
.ph-main { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 14px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.ph-co { display: flex; align-items: center; gap: 8px; color: var(--t2); font-size: 13px; }
.ph-co .sep { color: var(--t4); }
.ttl { display: flex; align-items: center; gap: 14px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--s0); border: 1px solid var(--line); border-radius: 9px; align-self: flex-start; flex-wrap: wrap; }
.seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--t3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.seg button:hover { color: var(--t1); }
.seg button.on { background: var(--s3); color: var(--t1); box-shadow: inset 0 0 0 1px var(--line-2); }
.seg button.on.blocked { color: var(--warn); } .seg button.on.done { color: var(--ok); }
.meta { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.meta > div { display: flex; flex-direction: column; gap: 2px; }
.meta small { color: var(--t3); font-size: 12px; }
.meta .pick { margin-left: -8px; }
.ph-prog { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ph-prog .big { font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.03em; }
.ph-prog .big span { font-size: 20px; color: var(--t3); margin-left: 2px; }
.ph-prog .bar { height: 6px; border-radius: 3px; }
.ph-prog dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 9px; }
.ph-prog dl div { padding: 8px 12px; } .ph-prog dl div + div { border-left: 1px solid var(--line); }
.ph-prog dt { color: var(--t3); font-size: 12px; } .ph-prog dd { margin: 0; font-weight: 600; }
.ph-prog .b.gh { align-self: flex-start; margin-top: auto; margin-left: -8px; }

.tasks { overflow: hidden; }
.tb { border-bottom: 1px solid var(--line); position: relative; }
.tb.flash { animation: flash 1.6s var(--ease) both; }
@keyframes flash { 0%, 40% { background: rgb(111 155 255 / 0.1); } 100% { background: transparent; } }
.tl { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; }
.tl:hover { background: var(--s2); }
.tl .tt { flex: 1; font-weight: 500; height: 30px; }
.tb.done .tt { color: var(--t3); text-decoration: line-through; text-decoration-color: var(--t4); }
.subc { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--t2); cursor: pointer; font-size: 12px; flex: none; }
.subc:hover { color: var(--t1); border-color: var(--line-3); }
.subc .car { font-size: 10px; transition: transform 0.2s var(--ease); }
.tb.open .subc .car { transform: rotate(180deg); }
.subc.none { border-color: transparent; color: var(--t4); opacity: 0; }
.tl:hover .subc.none, .subc.none:focus-visible, .tb.open .subc.none { opacity: 1; }
.tl .pick { width: 150px; }
.tl .pick.date { width: 104px; justify-content: flex-end; }
.tl .pick.date .due { min-width: 0; }
.tl .del { opacity: 0; }
.tl:hover .del, .tl .del:focus-visible { opacity: 1; }
.subs { padding: 2px 12px 10px 44px; }
.sl { display: flex; align-items: center; gap: 10px; height: 34px; position: relative; }
.sl::before { content: ''; position: absolute; left: -17px; top: 0; bottom: 0; border-left: 1px solid var(--line-2); }
.sl .ed { flex: 1; font-size: 13px; height: 28px; }
.sl.done .ed { color: var(--t3); text-decoration: line-through; text-decoration-color: var(--t4); }
.sl .del { opacity: 0; width: 26px; height: 26px; }
.sl:hover .del, .sl .del:focus-visible { opacity: 1; }
.subs .add-row { padding: 4px 0 0; font-size: 13px; }

/* ── Dialog and toast ── */
dialog { border: 1px solid var(--line-2); border-radius: 14px; background: var(--s1); color: var(--t1); padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgb(0 0 0 / 0.6); }
dialog[open] { animation: rise 0.22s var(--ease) both; }
dialog::backdrop { background: rgb(0 0 0 / 0.55); }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.dlg { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.dlg-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dlg-h h2 { margin: 0; font-size: 17px; font-weight: 600; }
.dlg p { margin: 0; color: var(--t2); }
.seg.sm button { height: 26px; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--t2); }
.fld input, .fld select, .fld textarea { height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--s0); color: var(--t1); outline: none; }
.fld textarea { height: auto; padding: 8px 10px; resize: vertical; }
.fld :focus { border-color: var(--a-text); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 14px; background: var(--t1); color: var(--s0); border-radius: 10px; padding: 10px 14px; font-weight: 500; box-shadow: 0 12px 32px rgb(0 0 0 / 0.5); transition: opacity 0.2s var(--ease), transform 0.3s var(--ease); z-index: 50; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { border: 0; background: none; color: var(--a); font-weight: 600; cursor: pointer; padding: 0; }

.mnav { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; animation: none !important; } }

@media (max-width: 1180px) {
  .ov { grid-template-columns: 1fr; } .rail { position: static; order: 0; } .cos { order: 1; }
  .dcards { grid-template-columns: 1fr; } .dcard { border-left: 0; border-top: 1px solid var(--line); } .dcard:first-child { border-top: 0; }
  .kan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr { grid-template-columns: 88px minmax(0, 1fr) 140px 120px 64px; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; } .side { display: none; }
  main { padding: 20px 16px 104px; } .top { padding: 0 16px; }
  .mnav { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; background: var(--s2); border: 1px solid var(--line-2); box-shadow: 0 8px 24px rgb(0 0 0 / 0.5); border-radius: 14px; padding: 6px; }
  .mnav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 9px; color: var(--t2); font-size: 11px; position: relative; }
  .mnav a i { font-size: 20px; } .mnav a .sq { width: 12px; height: 12px; margin: 4px 0; }
  .mnav a.on { background: var(--s3); color: var(--t1); }
  .mnav a b { position: absolute; top: 2px; right: calc(50% - 22px); font-family: var(--m); font-size: 10px; }
  .hello { flex-direction: column; align-items: flex-start; } .hello h1 { font-size: 24px; line-height: 30px; }
  .tot { width: 100%; } .tot div { flex: 1; padding: 8px 12px; }
  .band .what, .band .cnt span:nth-child(3) { display: none; }
  .band.big { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px; }
  .band.big h1 { font-size: 26px; line-height: 30px; }
  .band.big .cnt { margin-left: 0; width: 100%; } .band.big .cnt span { flex: 1; margin-left: 12px; padding-left: 12px; } .band.big .cnt span:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
  .band.big .cnt b { font-size: 20px; line-height: 26px; }
  .band.big .cnt span:nth-child(3) { display: flex; }
  .ds-h { flex-direction: column; align-items: stretch; } .ds-r { justify-content: space-between; } .ds-p { width: auto; flex: 1; }
  .pr { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px 12px 20px; }
  .pr.head { display: none; }
  .pr .st { grid-column: 1; grid-row: 2; } .pr .pn { grid-column: 1; grid-row: 1; } .pr .who { display: none; } .pr .tk { grid-column: 2; grid-row: 2; width: 110px; } .pr .dd { grid-column: 2; grid-row: 1; }
  .pn .with { display: none; }
  .kan { grid-template-columns: 1fr; } .kcol { min-height: 0; }
  .phead { grid-template-columns: 1fr; } .ed.h1 { font-size: 22px; line-height: 30px; }
  .ph-main { padding: 16px 16px 12px 20px; }
  .tl { flex-wrap: wrap; padding: 8px 12px; gap: 6px 8px; } .tl .tt { flex: 1 1 calc(100% - 64px); }
  .tl .pick { width: auto; } .tl .pick .who span:last-child { display: none; } .tl .pick.date { width: auto; margin-left: auto; }
  .tl .subc { margin-left: 26px; } .tl .del { opacity: 1; }
  .subs { padding-left: 38px; }
  .trow { padding: 10px 12px; } .trow .av { display: none; }
  .filters { gap: 8px; }
}

/* ── Live version ── */
.sync { font-size: 12px; color: var(--t3); display: inline-flex; align-items: center; gap: 6px; }
.sync:not(:empty)::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.sync[data-st="saving"]::before { background: var(--t3); }
.sync[data-st="error"] { color: var(--sig); } .sync[data-st="error"]::before { background: var(--sig); }
.area { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--t2); border: 1px solid var(--line-2); white-space: nowrap; flex: none; vertical-align: 1px; }
.dcard > p .area { margin-right: 6px; }
.ds-line { display: flex; align-items: center; gap: 10px; }
.ds-line .ed.h2 { width: auto; flex: 1; }
.ph-co .area { margin-left: 4px; }
.me { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 4px 2px 8px; border-top: 1px solid var(--line); }
.me .av { width: 28px; height: 28px; font-size: 12px; }
.me .x { flex: 1; min-width: 0; line-height: 16px; }
.me b { display: block; font-weight: 600; font-size: 13px; }
.me small { display: block; color: var(--t3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-h { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.tasks-h h2 { margin: 0; font-size: 16px; font-weight: 600; }
.tasks-h .c { color: var(--t3); font-size: 12px; }
.tasks-h .r { margin-left: auto; display: flex; gap: 6px; }
.panel.tasks { margin-bottom: 16px; scroll-margin-top: 72px; }
.ed.h3 { font-size: 15px; font-weight: 600; width: auto; flex: 0 1 260px; }
.tt-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tt-w .tt { width: 100%; }
.tl .tt { height: 26px; }
.ns { color: var(--t3); font-size: 12px; line-height: 16px; padding-left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -2px; }
.steps { display: inline-flex; gap: 2px; }
.steps i { width: 4px; height: 12px; border-radius: 1px; background: var(--s4); }
.steps i.on { background: var(--t1); }
.secsum { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.secsum li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.secsum a { color: var(--t1); } .secsum a:hover { text-decoration: underline; text-underline-offset: 3px; }
.secsum .mono { color: var(--t3); font-size: 12px; }
.add-sec { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--t3); }
.add-sec input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 32px; color: var(--t1); }
.add-sec:focus-within { border-color: var(--line-3); background: var(--s1); }
.add-dir select { height: 32px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--s0); padding: 0 8px; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--t2); cursor: pointer; }
.chk input { margin-top: 3px; accent-color: var(--a); }
.err { color: var(--sig); font-size: 13px; margin: 0; }
.lnk.u { text-decoration: underline; text-underline-offset: 3px; }
.kcard.deal .ed { margin-left: -7px; width: calc(100% + 7px); }
.kcard.deal .ed.dn { font-weight: 600; }
.kcard.deal .ed.nx { color: var(--t2); font-size: 13px; }
.amt-ed { display: flex; align-items: center; gap: 2px; color: var(--t3); }
.amt-ed .ed { font-size: 15px; font-weight: 600; color: var(--t1); }
.kcard.deal .kf { justify-content: space-between; }
body.login .app { grid-template-columns: 1fr; }
body.login .side, body.login .top, body.login .mnav { display: none; }
body.login main { max-width: none; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.signin { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; }
.signin h1 { margin: 6px 0 0; font-size: 24px; letter-spacing: -0.02em; }
.signin > p { margin: -8px 0 6px; color: var(--t2); }
.signin .b { height: 40px; margin-top: 4px; }
.org-mark.big { width: 40px; height: 40px; border-radius: 10px; padding: 8px; gap: 3px; }
@media (max-width: 900px) {
  .tl .subc .steps { display: none; }
  .tt-w { flex: 1 1 calc(100% - 64px); }
  .ed.h3 { flex: 1; }
  .add-dir { flex-wrap: wrap; } .add-dir input:first-of-type { flex: 1 1 100%; }
}
.meb { display: none; border: 0; background: none; padding: 0; cursor: pointer; }
.meb .av { width: 30px; height: 30px; font-size: 12px; }
@media (max-width: 900px) { .meb { display: inline-grid; } }
.top-r { display: flex; align-items: center; gap: 12px; }
.phead { align-items: start; }

/* Brand truth (5 Oct 2026): Text To Quant green #1dd3b0 and Spekule bone #e4e0d5 from the Spekule brand kit; Solviyn violet #492deb from its palette. */
.nav-a.child { padding-left: 22px; height: auto; min-height: 34px; }
.nav-a .cn { display: flex; flex-direction: column; line-height: 16px; padding: 4px 0; }
.nav-a .cn small { font-size: 11px; color: var(--t3); font-weight: 400; }
.chn { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent; color: var(--t3); font-size: 12px; cursor: pointer; }
button.chn:hover { color: var(--t1); border-color: var(--line-3); }
.chn.on { color: var(--t1); background: var(--s3); border-color: var(--line-3); }
.chs { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: 1px; }
.chs .chn { height: 16px; padding: 0 5px; font-size: 10px; cursor: default; border-radius: 4px; }
.sec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.sec-meta .lab, .t-ch .lab { font-size: 12px; color: var(--t3); margin-right: 4px; }
.brief { flex: 1 1 100%; margin-top: 4px; }
.brief summary { cursor: pointer; font-size: 12px; color: var(--t2); width: fit-content; }
.brief summary:hover { color: var(--t1); }
.brief .ed { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--t2); resize: vertical; }
.t-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0 8px; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lk { display: inline-flex; align-items: center; height: 26px; border: 1px solid var(--line-2); border-radius: 7px; font-size: 12px; color: var(--t2); overflow: hidden; }
.lk a { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; height: 100%; }
.lk a:hover { color: var(--t1); }
.lk .x { border: 0; background: none; color: var(--t4); cursor: pointer; height: 100%; padding: 0 6px; }
.lk .x:hover { color: var(--t1); }
.add-link { display: inline-flex; gap: 4px; align-items: center; }
.add-link input { height: 26px; border: 1px solid var(--line); border-radius: 7px; background: transparent; padding: 0 8px; font-size: 12px; width: 110px; outline: none; }
.add-link input[type=url] { width: 170px; }
.add-link input:focus { border-color: var(--line-3); background: var(--s0); }
.add-link .chip { height: 26px; font-size: 12px; }
@media (max-width: 900px) { .add-link { flex-wrap: wrap; } .add-link input, .add-link input[type=url] { width: 100%; } .chs { display: none; } }
.prefs { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.prefs p { margin: 0; color: var(--t2); font-size: 13px; }

/* ── Dropdown menus (lib/menu.js) ── */
.xmenu { position: fixed; inset: auto; margin: 0; z-index: 60; max-width: min(360px, calc(100vw - 16px)); max-height: 340px; display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--s2); color: var(--t1); box-shadow: 0 16px 40px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.3); font-family: var(--f); font-size: 13px; overflow: hidden; animation: xm-in 0.14s var(--ease) both; transform-origin: top left; }
.xmenu.up { transform-origin: bottom left; }
@keyframes xm-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
.xmenu.up { animation-name: xm-up; } @keyframes xm-up { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }
.xm-l { overflow-y: auto; overscroll-behavior: contain; }
.xm-q { margin: 0 0 4px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--s0); color: var(--t1); outline: none; font: inherit; }
.xm-q:focus { border-color: var(--line-3); }
.xm-g { padding: 8px 10px 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t3); }
.xm-g:first-child { padding-top: 4px; }
.xm-i { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px 0 10px; border-radius: 6px; cursor: pointer; color: var(--t2); white-space: nowrap; }
.xm-i span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.xm-i svg { width: 14px; height: 14px; flex: none; opacity: 0; color: var(--a-text); }
.xm-i.hi { background: var(--s3); color: var(--t1); }
.xm-i.on { color: var(--t1); font-weight: 500; }
.xm-i.on svg { opacity: 1; }
.xm-i.off { opacity: 0.4; cursor: default; }
.xm-i[hidden], .xm-g[hidden] { display: none; }
.xm-open { background: var(--s3); }
.fld.xm-open, .sel.xm-open { background: transparent; }
.fld.xm-open select, .sel.xm-open { border-color: var(--line-3); }
/* Native selects in forms get a consistent closed state with a chevron */
.fld select, .add-dir select, .give select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2385888e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; cursor: pointer; }
.sel select { appearance: none; -webkit-appearance: none; padding-right: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2385888e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center / 12px; }
@media (prefers-reduced-motion: reduce) { .xmenu { animation: none; } }

/* ── People ── */
.avs { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.avs .av { box-shadow: 0 0 0 2px var(--s1); } .avs .av + .av { margin-right: -6px; }
.av.more { font-size: 10px; background: var(--s3); color: var(--t2); }
.also { display: inline-flex; align-items: center; gap: 2px; color: var(--t3); font-size: 11px; margin-left: -6px; flex: none; }
.also .av { width: 18px; height: 18px; font-size: 9px; box-shadow: 0 0 0 2px var(--s1); } .also .av + .av { margin-left: -5px; }
.chn.ppl { gap: 6px; padding-left: 3px; } .chn.ppl .av { width: 16px; height: 16px; font-size: 9px; }
.team { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.team .lab { font-size: 12px; color: var(--t3); margin-right: 4px; }
.tm { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 3px; border: 1px solid var(--line-2); border-radius: 14px; font-size: 13px; color: var(--t1); }
.tm small { color: var(--t3); font-size: 11px; }
.tm .x { border: 0; background: none; color: var(--t4); cursor: pointer; padding: 0 2px; display: grid; place-items: center; }
.tm .x:hover { color: var(--t1); }
.tm.add { border-style: dashed; color: var(--t2); padding: 0 10px; cursor: pointer; }
.tm.add:hover { color: var(--t1); border-color: var(--line-3); }
.tm.add select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.person.hi { border-color: var(--line-3); }
.person .ph-h .av { width: 32px; height: 32px; font-size: 13px; }
.pn-x { min-width: 0; } .pn-x h2 { margin: 0; font-size: 15px; font-weight: 600; } .pn-x small { color: var(--t3); font-size: 12px; }
.person .cnt { font-size: 12px; color: var(--t2); } .person .cnt.late { color: var(--warn); } .person .cnt b { font-size: 14px; }
.more-l { display: block; padding: 8px 16px; font-size: 13px; color: var(--t2); border-bottom: 1px solid var(--line); }
.give { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; color: var(--t3); }
.give input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 30px; color: var(--t1); }
.give select { max-width: 180px; height: 30px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--s0); padding: 0 8px; color: var(--t2); }
.give .b { height: 30px; }
.give:focus-within { background: var(--s0); }
@media (max-width: 900px) { .give { flex-wrap: wrap; } .give input { flex: 1 1 100%; } .give select { flex: 1; max-width: none; } }

/* ── Actions layer (actions.js): task panel, menus, palette, quick add ──
   Measured rules from design-resources/dashboards: 1px borders, shadow only on what floats,
   120–180ms on colour and opacity, menus scale in from 0.98, priority by shape not colour. */
button.search { width: 100%; cursor: pointer; font: inherit; text-align: left; }
button.search span { flex: 1; min-width: 0; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.search:hover { border-color: var(--line-3); color: var(--t2); }

/* Priority and comment marks in rows */
span.pri { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--t3); vertical-align: -3px; margin-right: 6px; }
span.pri svg { width: 12px; height: 12px; } span.pri rect { fill: var(--s4); } span.pri rect.on { fill: var(--t2); }
span.pri.urgent { color: var(--warn); } span.pri.urgent i { font-size: 15px; }
span.pri.none { color: var(--t4); }
.tl > .pri { margin-right: -2px; }
.talk { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; color: var(--t3); font-size: 12px; font-weight: 400; vertical-align: 0; }
.ns .ph-text-align-left { margin-left: 8px; }
.trow .ib.more { opacity: 0; width: 28px; height: 28px; margin-right: -6px; }
.trow:hover .ib.more, .trow .ib.more:focus-visible { opacity: 1; }
.tl .ib.open, .tl .ib.more { opacity: 0; }
.tl:hover .ib.open, .tl:hover .ib.more, .tl .ib:focus-visible { opacity: 1; }
.tb.sel > .tl { background: var(--s2); box-shadow: inset 2px 0 0 var(--a-text); }

/* Side panel */
.drawer[hidden] { display: none; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); z-index: 30; background: var(--s1); border-left: 1px solid var(--line-2); box-shadow: -24px 0 64px rgb(0 0 0 / 0.45); display: flex; flex-direction: column; animation: dr-in 0.18s var(--ease) both; }
@keyframes dr-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.dr-h { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); color: var(--t3); font-size: 13px; flex: none; min-width: 0; }
.dr-h > span:not(.sq) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-h .ph-caret-right { font-size: 10px; color: var(--t4); }
.dr-p { color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .dr-p:hover { color: var(--t1); }
.dr-h .r { margin-left: auto; display: flex; gap: 2px; flex: none; }
.dr-b { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 32px; display: flex; flex-direction: column; gap: 20px; }
.dr-t { display: flex; gap: 12px; align-items: flex-start; }
.ck.big { width: 22px; height: 22px; margin-top: 5px; } .ck.big i { font-size: 12px; }
.ed.dt { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; resize: none; overflow: hidden; padding: 2px 6px; }
.ed.dt.done { color: var(--t3); text-decoration: line-through; text-decoration-color: var(--t4); }
.props { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; }
.props > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; }
.props dt { color: var(--t3); font-size: 13px; }
.props dd { margin: 0; min-width: 0; display: flex; align-items: center; }
.props dd.wrap { flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.props .pick { margin-left: -8px; } .props .pick.plain { margin-left: -6px; color: var(--t1); }
.props .pick.date { margin-right: 4px; } .props .pick.date .due { min-width: 0; text-align: left; }
.props .seg { flex-wrap: nowrap; } .props .seg button { padding: 0 8px; gap: 4px; }
.props .seg button .pri { margin: 0; }
.props .seg button span:not(.pri) { display: none; } .props .seg button.on span:not(.pri) { display: inline; }
.dr-s h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--t2); display: flex; align-items: center; gap: 8px; }
.dr-s h3 .mono { font-weight: 400; color: var(--t3); font-size: 12px; }
.dr-s > .bar { margin-bottom: 8px; }
.ed.dn { resize: none; min-height: 64px; line-height: 20px; color: var(--t1); border-color: var(--line); padding: 8px 10px; margin-left: 0; }
.ed.dn:hover { border-color: var(--line-2); }
.dr-steps .sl::before { display: none; }
.dr-steps .add-row { padding: 4px 0 0 2px; font-size: 13px; }
.cmts { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.cmts:empty { display: none; }
.cmt { display: flex; gap: 10px; } .cmt .av { margin-top: 1px; }
.cx { flex: 1; min-width: 0; }
.cm-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; } .cm-h b { font-weight: 600; } .cm-h time { color: var(--t3); font-size: 12px; }
.cm-h .lnk { margin-left: auto; opacity: 0; } .cmt:hover .cm-h .lnk, .cm-h .lnk:focus-visible { opacity: 1; }
.cx p { margin: 2px 0 0; color: var(--t1); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-new { display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--s0); }
.cm-new:focus-within { border-color: var(--line-3); }
.cm-new textarea { flex: 1; border: 0; background: none; outline: none; resize: none; min-height: 22px; max-height: 200px; line-height: 20px; padding: 1px 0; }
.cm-new .av { margin-bottom: 0; }
.cm-new .ib { width: 28px; height: 28px; color: var(--a-text); }
.dr-f { margin: auto 0 0; color: var(--t4); font-size: 12px; }
@media (min-width: 1680px) { body.dr-open main { padding-right: 528px; } }
@media (max-width: 900px) { .drawer { width: 100vw; border-left: 0; } .props > div { grid-template-columns: 84px minmax(0, 1fr); } }

/* Action menu */
.amenu { min-width: 232px; max-height: 480px; transform-origin: top right; }
.amenu .xm-i { gap: 10px; }
.amenu .xm-i > i:first-child, .amenu .xm-i > .pri, .amenu .xm-i > .av { width: 18px; flex: none; font-size: 15px; text-align: center; margin: 0; color: var(--t3); }
.amenu .xm-i > .av { width: 18px; height: 18px; font-size: 9px; color: var(--t1); }
.amenu .xm-i.hi > i:first-child { color: var(--t1); }
.amenu .xm-i kbd { margin-left: auto; }
.amenu .xm-i .ok { color: var(--a-text); font-size: 13px; margin-left: auto; }
.amenu .xm-i.warn { color: var(--sig); } .amenu .xm-i.warn > i:first-child { color: var(--sig); }
.amenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* Command palette */
#pal { width: min(620px, calc(100vw - 32px)); margin-top: 12vh; padding: 0; overflow: hidden; }
#pal[open] { animation: pal-in 0.14s var(--ease) both; }
@keyframes pal-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
#pal::backdrop { background: rgb(0 0 0 / 0.5); }
.pal-q { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--t3); }
.pal-q i { font-size: 18px; }
.pal-q input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 15px; color: var(--t1); }
.pal-q input::placeholder { color: var(--t3); }
.pal-l { max-height: min(420px, 56vh); overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 6px; }
.pal-l .xm-g { padding: 10px 10px 4px; }
.pal-i { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 7px; cursor: pointer; color: var(--t2); }
.pal-i > i { font-size: 16px; width: 18px; text-align: center; color: var(--t3); }
.pal-i .av { width: 18px; height: 18px; font-size: 9px; }
.pal-i .sq { margin: 0 4px; }
.pal-i .pl { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t1); }
.pal-i small { flex: 1; min-width: 0; color: var(--t3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-i kbd { margin-left: auto; }
.pal-i.hi { background: var(--s3); } .pal-i.hi > i { color: var(--t1); }
.pal-e { margin: 0; padding: 20px 12px; color: var(--t3); }
.pal-f { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); color: var(--t3); font-size: 12px; }
.pal-f kbd { margin-right: 3px; }
.ck.mini { width: 14px; height: 14px; border-width: 1.5px; cursor: inherit; margin: 0 2px; } .ck.mini.on { background: var(--t3); border-color: var(--t3); }
@media (max-width: 900px) { #pal { margin-top: 16px; } .pal-f { display: none; } }

/* Quick add: what it understood */
.qp { display: inline-flex; gap: 6px; flex: none; }
.qp:empty { display: none; }
.qp span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--s3); color: var(--t1); font-size: 12px; white-space: nowrap; }
.qp i { color: var(--a-text); }
.fld .qp { margin-top: -2px; }

/* Shortcuts sheet */
.keys { margin: 0; display: flex; flex-direction: column; }
.keys > div { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.keys dt { flex: none; width: 210px; display: flex; gap: 4px; align-items: center; color: var(--t3); font-size: 12px; }
.keys dd { margin: 0; color: var(--t1); font-size: 13px; }
.keys code, .dlg code { font-family: var(--m); font-size: 12px; color: var(--t1); background: var(--s3); border-radius: 4px; padding: 1px 5px; }
.keys-h { margin: 8px 0 -6px; font-size: 14px; font-weight: 600; }
@media (max-width: 900px) { .keys dt { width: 130px; } }
@media (prefers-reduced-motion: reduce) { .drawer, #pal[open] { animation: none; } }
.dr-b:focus { outline: none; }
.xm-row { display: flex; gap: 2px; padding: 0 4px 4px; }
.amenu .xm-c { min-height: 30px; padding: 0 7px; gap: 4px; border: 0; background: none; font: inherit; font-size: 12px; justify-content: center; flex: 1; }
.amenu .xm-c > .av, .amenu .xm-c > .pri, .amenu .xm-c > i { width: auto; margin: 0; }
.amenu .xm-c > .av { width: 20px; height: 20px; font-size: 10px; }
.amenu .xm-c.on { background: var(--s4); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--t1); }
.amenu .xm-c.hi { background: var(--s3); }
.amenu .xm-c span { flex: none; }
.xm-i .pri svg, .pal-i .pri svg { opacity: 1; width: 12px; height: 12px; color: inherit; }
@media (hover: none) { .trow .ib.more, .tl .ib.open, .tl .ib.more, .cm-h .lnk { opacity: 1; } }

/* ── Phase 2 and 3 (views.js) ── */
.tb-b { display: grid; color: var(--t2); position: relative; }
.inb b { position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--sig); color: var(--on-co); font: 600 10px/15px var(--m); text-align: center; }
.vseg { margin-left: 8px; } .vseg button { gap: 6px; }
@media (max-width: 900px) { .vseg span { display: none; } .tasks-h { flex-wrap: wrap; } }
.rep { display: inline-flex; color: var(--t3); margin-left: 8px; font-size: 13px; vertical-align: -1px; }
.dr-hint { margin-left: 10px; font-size: 12px; }

/* Selection */
.selb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--t4); background: transparent; display: grid; place-items: center; padding: 0; cursor: pointer; flex: none; opacity: 0; transition: opacity 0.12s var(--ease); }
.selb i { font-size: 9px; opacity: 0; color: var(--s0); }
.selb.on { background: var(--a-text); border-color: var(--a-text); opacity: 1; } .selb.on i { opacity: 1; }
.trow:hover .selb, .tl:hover .selb, .scard:hover .selb, .selb:focus-visible, body.picking .selb { opacity: 1; }
.trow .selb { margin: 0 -4px 0 -8px; } .tl .selb { margin-left: -6px; }
.trow.picked, .tb.picked > .tl, .scard.picked { background: rgb(111 155 255 / 0.08); }
.bulk { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; background: var(--s2); border: 1px solid var(--line-3); border-radius: 12px; box-shadow: 0 16px 40px rgb(0 0 0 / 0.55); max-width: calc(100vw - 24px); overflow-x: auto; animation: bk-in 0.16s var(--ease) both; }
@keyframes bk-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.bulk[hidden] { display: none; }
.bk-n { color: var(--t2); font-size: 13px; white-space: nowrap; margin-right: 6px; } .bk-n b { color: var(--t1); }
.bulk .b { height: 30px; white-space: nowrap; }
@media (max-width: 900px) { .bulk { bottom: 88px; } .bulk .b { padding: 0 8px; } }

/* Board by section */
.sboard { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.scol { flex: 0 0 288px; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 160px); transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.scol .kb { overflow-y: auto; min-height: 60px; }
.scol .add-row { padding: 4px 10px 8px; }
.over-z { border-color: var(--a-text) !important; background: rgb(111 155 255 / 0.06) !important; }
.scard { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--s2); border: 1px solid var(--line); border-radius: 9px; cursor: grab; transition: border-color 0.15s var(--ease); }
.scard:hover { border-color: var(--line-3); } .scard.cur { border-color: var(--a-text); }
.scard.dragging, .cchip.dragging { opacity: 0.4; }
.sc-t { display: flex; align-items: flex-start; gap: 8px; } .sc-t .selb, .sc-t .ck { margin-top: 1px; }
.sc-t .selb { position: absolute; margin-left: -26px; } .scard { position: relative; }
.sc-t a { flex: 1; min-width: 0; font-weight: 500; line-height: 20px; }
.scard.done .sc-t a { color: var(--t3); text-decoration: line-through; text-decoration-color: var(--t4); }
.sc-n { color: var(--t3); font-size: 12px; line-height: 16px; }
.sc-p { display: flex; align-items: center; gap: 8px; } .sc-p .mono { font-size: 11px; color: var(--t3); }
.sc-f { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.sc-f .chs { margin-left: 0; } .sc-f .talk, .sc-f .rep { margin-left: 0; }
.sc-f .due { margin-left: auto; min-width: 0; }
.sc-f .cost { color: var(--t3); font-size: 11px; }

/* Calendar */
.cal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 6px; } .cal-nav h3 { margin: 0 6px; font-size: 15px; font-weight: 600; min-width: 132px; text-align: center; }
.cal-h .mute { font-size: 12px; }
.cal-g { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--s1); }
.cal-w, .cal-d { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-w span { padding: 8px 10px; font-size: 12px; color: var(--t3); border-bottom: 1px solid var(--line); }
.cday { min-height: 116px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: background 0.12s var(--ease); }
.cday:nth-child(7n) { border-right: 0; }
.cday.wk { background: rgb(255 255 255 / 0.012); }
.cday.out .cd-h .mono { color: var(--t4); }
.cd-h { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 2px; }
.cd-h .mono { font-size: 12px; color: var(--t2); }
.cday.today .cd-h .mono { background: var(--sig); color: var(--on-co); border-radius: 10px; padding: 0 7px; font-weight: 600; }
.cd-add { width: 22px; height: 22px; opacity: 0; } .cday:hover .cd-add, .cd-add:focus-visible { opacity: 1; }
.cchip a { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px; border-radius: 5px; background: var(--s3); font-size: 12px; color: var(--t1); min-width: 0; cursor: grab; }
.cchip a:hover { background: var(--s4); }
.cchip .pri { margin: 0; width: 12px; } .cchip .cx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchip .ini { flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--s4); display: grid; place-items: center; font-size: 9px; font-weight: 600; color: var(--t2); }
.cchip.done a { color: var(--t3); text-decoration: line-through; text-decoration-color: var(--t4); background: transparent; }
.cchip.late a { box-shadow: inset 2px 0 0 var(--warn); }
.cchip.picked a { box-shadow: inset 0 0 0 1px var(--a-text); }
.cmore { border: 0; background: none; color: var(--t3); font-size: 12px; text-align: left; padding: 2px 6px; cursor: pointer; } .cmore:hover { color: var(--t1); }
.cal-nd { margin-top: 12px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 12px; transition: border-color 0.15s var(--ease); }
.cal-nd h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--t2); } .cal-nd h3 .mono { color: var(--t3); font-weight: 400; }
.cal-ndl { display: flex; flex-wrap: wrap; gap: 6px; } .cal-ndl .cchip { max-width: 260px; }
@media (max-width: 900px) { .cday { min-height: 72px; padding: 3px; } .cday .cchip .cx, .cday .cchip .ini, .cday .cchip .sq, .cday .cchip .pri { display: none; } .cday .cchip a { height: 6px; padding: 0; border-radius: 3px; background: var(--t3); } .cday .cchip.late a { background: var(--warn); box-shadow: none; } .cal-w span { padding: 6px 4px; } .cd-add { display: none; } }

/* Activity and inbox */
.actg { margin-bottom: 16px; }
.act { display: flex; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); position: relative; }
.act:last-child { border-bottom: 0; }
.act.new::before { content: ''; position: absolute; left: 6px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--sig); }
.act .av { margin-top: 1px; }
.ax { flex: 1; min-width: 0; } .ax p { margin: 0; color: var(--t2); overflow-wrap: anywhere; } .ax p b { color: var(--t1); font-weight: 600; }
.ax a { color: var(--t1); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; } .ax a:hover { text-decoration-color: var(--t1); }
.ax small { display: flex; align-items: center; gap: 6px; color: var(--t3); font-size: 12px; margin-top: 2px; }
.ax blockquote { margin: 6px 0 2px; padding: 6px 10px; border-left: 2px solid var(--line-3); color: var(--t1); white-space: pre-wrap; background: var(--s0); border-radius: 0 6px 6px 0; }
.men { color: var(--a-text); font-weight: 500; }

/* Money */
.money { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; }
.mo-r { display: flex; justify-content: space-between; font-size: 13px; color: var(--t3); } .mo-r b { color: var(--t1); font-weight: 600; }
.money p { margin: 2px 0 0; font-size: 12px; color: var(--t3); } .money p.over { color: var(--warn); }
.meta-amt { height: 28px; } .meta-amt .ed { width: 96px; font-size: 14px; font-weight: 400; }
.sec-cost { margin-left: auto; gap: 4px; } .sec-cost .lab { margin-right: 2px; } .sec-cost .ed { width: 64px; font-size: 13px; font-weight: 500; }
.props .amt-ed .ed { width: 120px; font-size: 14px; font-weight: 400; }
.ph-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; align-items: center; }
.ph-acts .b.gh { margin-left: -4px; }
.ph-prog .ph-acts .b.gh { margin-top: 0; }

/* Output */
.outp { margin-bottom: 20px; }
.outp .ph-h .c { font-family: var(--f); }
.or { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, 76px) 120px; gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.or:last-child { border-bottom: 0; } a.or:hover { background: var(--s2); }
.or.head { font-size: 12px; color: var(--t3); padding-top: 7px; padding-bottom: 7px; }
.or .mono { text-align: right; font-size: 13px; color: var(--t2); } .or b.mono { color: var(--t1); } .or .late { color: var(--warn); }
.or.head span:not(:first-child) { text-align: right; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 24px; justify-content: flex-end; }
.spark i { width: 10px; background: var(--s4); border-radius: 2px 2px 0 0; } .spark i.now { background: var(--t1); }
@media (max-width: 900px) { .or { grid-template-columns: minmax(0, 1fr) 52px 52px 64px; } .or > :nth-child(4), .or > :nth-child(5) { display: none; } .or .who span:last-child { display: none; } }
@media (prefers-reduced-motion: reduce) { .bulk { animation: none; } }
/* Claude connector, in the account dialog */
.prefs.cn { border-top: 1px solid var(--line); padding-top: 14px; }
.cn-h { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cn-link { display: flex; gap: 6px; } .cn-link input { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--s0); padding: 0 10px; font-family: var(--m); font-size: 12px; color: var(--t1); outline: none; }
.warn-t { color: var(--warn) !important; font-size: 12px !important; }
.cn-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--t2); font-size: 13px; } .cn-steps b { color: var(--t1); font-weight: 500; }
.cn-steps code { font-family: var(--m); font-size: 11px; background: var(--s3); border-radius: 4px; padding: 1px 4px; overflow-wrap: anywhere; }
.cn-acts { display: flex; gap: 6px; }
#dlg:has(.cn) { width: min(560px, calc(100vw - 32px)); }
.sh-l { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 9px; }
.sh-l li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sh-l li:last-child { border-bottom: 0; } .sh-l b { font-weight: 600; font-size: 13px; }
.sh-m { display: inline-flex; align-items: center; gap: 2px; flex: 1; min-width: 0; } .sh-m .av { width: 18px; height: 18px; font-size: 9px; } .sh-m small { margin-left: 6px; color: var(--t3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-a { display: flex; gap: 2px; } .sh-a .b { height: 28px; }
.sh-new { display: flex; gap: 6px; } .sh-new input { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--s0); padding: 0 10px; color: var(--t1); outline: none; } .sh-new input:focus { border-color: var(--line-3); }
.via { display: inline-flex; align-items: center; gap: 3px; }
#dlg:has(.cn) { max-height: calc(100vh - 32px); overflow-y: auto; }
/* personal assistants */
.as-l { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 9px; }
.as-l li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.as-l li:last-child { border-bottom: 0; } .as-l b { font-weight: 600; font-size: 13px; } .as-l small { color: var(--t3); font-size: 12px; }
.as-team { margin-top: 6px; }
#asst code { font-family: var(--m); font-size: 11px; background: var(--s3); border-radius: 4px; padding: 1px 4px; }
.act .botav { display: inline-grid; place-items: center; color: var(--t2); }
.act blockquote.rep { white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; }
.act.bot .ax > p { unicode-bidi: plaintext; text-align: start; }
.rep-t { font-weight: 500; color: var(--t1); }

/* ── Time on tasks (work.js) ── */
.tmr-w { display: inline-flex; align-items: center; gap: 2px; }
.tmr-w:empty { display: none; }
.tmr { height: 30px; max-width: 280px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--s1); color: var(--t1); font-size: 13px; cursor: pointer; }
.tmr:hover { border-color: var(--line-3); }
.tmr .ph-record { color: var(--sig); animation: tmr-pulse 1.6s ease-in-out infinite; }
.tmr .ph-sparkle, .tmr .ph-robot { color: var(--a-text); }
.tmr .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tmr .mono { color: var(--t2); font-size: 12px; }
.tmr-x { color: var(--t2); } .tmr-x:hover { color: var(--sig); }
@keyframes tmr-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .tmr .ph-record { animation: none; } }
@media (max-width: 700px) { .tmr { max-width: 150px; } .tmr .tt { display: none; } }
.tm-now { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.b.tmr-on { border-color: rgb(242 105 76 / 0.45); color: var(--t1); } .b.tmr-on i { color: var(--sig); } .b.tmr-on .mono { color: var(--t2); }
.tm-by { display: inline-flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--t3); } .tm-by > span { display: inline-flex; align-items: center; gap: 5px; } .tm-by .av { width: 18px; height: 18px; font-size: 9px; }
.tlog { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--line); border-radius: 9px; }
.tlog li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-bottom: 1px solid var(--line); min-height: 40px; }
.tlog li:last-child { border-bottom: 0; } .tlog li.more { color: var(--t3); font-size: 12px; min-height: 32px; }
.tlog li.run { background: rgb(242 105 76 / 0.05); }
.tlog .av { width: 20px; height: 20px; font-size: 10px; }
.tl-x { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tl-x b { font-size: 13px; font-weight: 500; }
.tl-x small { color: var(--t3); font-size: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .tl-x small a { color: var(--a-text); }
.tl-d { font-size: 13px; color: var(--t1); white-space: nowrap; }
.tlog li.run .tl-d { color: var(--sig); }
.tlog .del { opacity: 0; width: 26px; height: 26px; } .tlog li:hover .del, .tlog .del:focus-visible { opacity: 1; }
.tm-add { display: flex; gap: 6px; }
.tm-add input { height: 30px; border: 1px solid var(--line); border-radius: 7px; background: transparent; padding: 0 8px; font-size: 13px; outline: none; min-width: 0; color: var(--t1); }
.tm-add input[name=dur] { width: 84px; font-family: var(--m); } .tm-add input[name=note] { flex: 1; }
.tm-add input:focus { border-color: var(--line-3); background: var(--s0); }
.tm-add .b { height: 30px; }

/* ── Work reports ── */
.rlist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 9px; }
.rlist li { border-bottom: 1px solid var(--line); } .rlist li:last-child { border-bottom: 0; }
.rlist a, a.rrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--t1); }
.rlist a:hover, a.rrow:hover { background: var(--s2); }
.rlist a > i, a.rrow > i { color: var(--a-text); font-size: 16px; flex: none; }
.rx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rx b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rx small { color: var(--t3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rrow { padding: 10px 16px; border-bottom: 1px solid var(--line); } a.rrow:last-child { border-bottom: 0; }
.rrow .tw, .trow2 .tw { font-size: 12px; white-space: nowrap; } .rrow .td, .trow2 .td { font-size: 13px; min-width: 64px; text-align: right; }
.oc { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); color: var(--t2); white-space: nowrap; flex: none; }
.oc.ok { color: var(--ok); border-color: rgb(69 176 122 / 0.35); } .oc.warn { color: var(--warn); border-color: rgb(224 173 74 / 0.35); } .oc.sig { color: var(--sig); border-color: rgb(242 105 76 / 0.4); } .oc.mute { color: var(--t3); }
.oc.live { color: var(--a-text); border-color: rgb(111 155 255 / 0.4); } .oc.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-text); animation: tmr-pulse 1.6s ease-in-out infinite; }
.rep-h { align-items: flex-start; } .rep-h h1 { overflow-wrap: anywhere; }
.rep-a { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.rep-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--s1); overflow: hidden; }
.rep-f > div { padding: 10px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-right: -1px; margin-bottom: -1px; }
.rep-f dt { color: var(--t3); font-size: 12px; } .rep-f dd { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.rep-s { margin-bottom: 16px; }
.rep-p { margin: 0; padding: 12px 16px; color: var(--t1); white-space: pre-wrap; overflow-wrap: anywhere; }
.ph-h.sub-h { border-top: 1px solid var(--line); }
.mdx { padding: 6px 16px 14px; color: var(--t1); overflow-wrap: anywhere; }
.mdx h2, .mdx h3, .mdx h4 { margin: 16px 0 6px; font-size: 15px; font-weight: 600; } .mdx h3 { font-size: 14px; } .mdx h4 { font-size: 13px; color: var(--t2); }
.mdx p { margin: 8px 0; } .mdx ul, .mdx ol { margin: 8px 0; padding-left: 22px; } .mdx li { margin: 3px 0; }
.mdx code { font-family: var(--m); font-size: 12px; background: var(--s3); border-radius: 4px; padding: 1px 4px; }
.mdx pre { background: var(--s0); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; } .mdx pre code { background: none; padding: 0; }
.mdx a { color: var(--a-text); text-decoration: underline; text-underline-offset: 3px; }
.tline { list-style: none; margin: 0; padding: 6px 0; }
.tline li { display: grid; grid-template-columns: 76px 56px 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 5px 16px; }
.tline li.none { display: block; color: var(--t3); }
.tline time { color: var(--t2); font-size: 12px; } .tline .off { color: var(--t4); font-size: 12px; }
.tline li > i { color: var(--t3); margin-top: 3px; }
.tline li.stp > i { color: var(--a-text); } .tline li.stp.problem > i { color: var(--warn); } .tline li.stp.result > i { color: var(--ok); }
.tline .ev { min-width: 0; overflow-wrap: anywhere; }
.tline li.stp .ev { color: var(--t1); white-space: pre-wrap; }
.tline .kd { display: inline-block; margin-right: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--t3); }
.tline li.call .ev { color: var(--t3); font-size: 12px; } .tline li.call code { font-family: var(--m); color: var(--t2); margin-right: 8px; }
.tline li.call small { display: block; font-size: 11px; color: var(--t4); }
.tline li.bad code, .bad-t { color: var(--sig); }
@media (max-width: 700px) { .tline li { grid-template-columns: 60px 18px minmax(0, 1fr); } .tline .off { display: none; } .rep-h { flex-direction: column; } }

/* ── Admin ── */
.adm { margin-bottom: 16px; }
.pp { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.5fr) 64px 104px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.pp:last-child { border-bottom: 0; } .pp.head { font-size: 12px; color: var(--t3); padding-top: 7px; padding-bottom: 7px; }
.pp.off { opacity: 0.6; }
.pp .who .av { width: 28px; height: 28px; font-size: 12px; }
.pp-n { display: flex; flex-direction: column; min-width: 0; } .pp-n b { color: var(--t1); font-weight: 600; } .pp-n small { color: var(--t3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp .em { font-size: 12px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accs { display: flex; flex-wrap: wrap; gap: 4px; }
.acc { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--s3); color: var(--t2); font-size: 12px; white-space: nowrap; }
.acc.adm { color: var(--t1); background: rgb(61 106 216 / 0.22); }
.lk-i { display: flex; gap: 6px; color: var(--t3); font-size: 16px; }
.pp-a { display: flex; justify-content: flex-end; gap: 2px; }
@media (max-width: 900px) { .pp { grid-template-columns: minmax(0, 1fr) auto; } .pp > .em, .pp > .accs, .pp > .lk-i, .pp.head > span:nth-child(n+2):not(:last-child) { display: none; } }
.fs { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fs legend { padding: 0 6px; font-size: 13px; color: var(--t2); }
.fs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .fs-row .lab { width: 100%; font-size: 12px; color: var(--t3); }
.chk.in span { display: inline-flex; align-items: center; gap: 6px; } .chk b { color: var(--t1); font-weight: 600; }
.fs-n { margin: 0; font-size: 12px; }
.pin-box { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 10px; background: var(--s0); }
.pin-box > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .pin-box > div:last-child { border-bottom: 0; }
.pin-box dt { color: var(--t3); font-size: 13px; } .pin-box dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; text-align: right; } .pin-box dd.big { font-size: 22px; letter-spacing: 0.12em; font-weight: 600; }
.trow2 { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.trow2:last-child { border-bottom: 0; }
.trow2 .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .trow2 .tx a { color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trow2 .tx a:hover { text-decoration: underline; text-underline-offset: 3px; }
.trow2 .tx small { color: var(--t3); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.trow2 .tx > b { font-weight: 600; }
.via-t { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--t2); white-space: nowrap; } .via-t a { color: var(--a-text); }
.ttab .tr { display: grid; grid-template-columns: minmax(0, 1.4fr) 84px repeat(var(--vias, 4), 76px) 56px minmax(80px, 1fr); gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.ttab .tr.head { font-size: 12px; color: var(--t3); padding-top: 7px; padding-bottom: 7px; } .ttab .tr.head span { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; } .ttab .tr.head span:first-child { justify-content: flex-start; }
.ttab .tr .mono { text-align: right; font-size: 13px; color: var(--t2); } .ttab .tr b.mono { color: var(--t1); }
.tbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--s3); }
.tbar i, .legend i { display: block; height: 100%; }
.v-web { background: var(--t1); } .v-manual { background: var(--t3); } .v-claude { background: var(--a-text); } .v-agent { background: var(--slv); } .v-telegram { background: var(--ttq); }
.legend { display: flex; gap: 14px; margin: 0; padding: 10px 16px; font-size: 12px; color: var(--t3); border-top: 1px solid var(--line); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 900px) { .ttab .tr { grid-template-columns: minmax(0, 1fr) 72px 72px; } .ttab .tr > :nth-child(n+3):not(:last-child) { display: none; } .trow2 .tw { display: none; } }
/* With the task panel open, the top bar's controls (timer, inbox, New) move clear of it. */
@media (min-width: 901px) { body.dr-open .top { padding-right: calc(min(500px, 100vw) + 20px); } }