/* Empire — Atlas palette & type, Ledger density & rules. Approved in mockup round 2. Tokens first; nothing below hardcodes a colour. */ :root{ /* Sea Mist — coastal fog. Pale mist blue base, deep teal accent, sage and coral semantics. Approved 2026-07-28. */ --pap:#eef2ec; --tint:#e5ecea; --card:rgba(255,255,255,.72); --ink:#233336; --head:#0f2b30; --dim:#5f7378; --line:rgba(30,60,68,.10); --rule:rgba(30,60,68,.08); --rule2:rgba(30,60,68,.16); --hover:rgba(255,255,255,.45); /* accent = deep teal; --sea kept as an alias for existing selectors */ --accent:#3d7180; --accent-soft:#5a94a3; --sea:#3d7180; --coral:#c86e5d; --sand:#c19457; --good:#5d9683; --seaSoft:#dceff2; --sandSoft:#f0e3cf; --coralSoft:#eed6cf; --goodSoft:#dcece5; --coralInk:#8a3d2d; --sandInk:#75531f; --goodInk:#376c58; --font:"Avenir Next","Avenir",system-ui,-apple-system,sans-serif; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --mono:ui-monospace,"SF Mono",Menlo,monospace; --r:16px; --r-sm:9px; /* Glass tokens */ --glass-bg:rgba(255,255,255,.60); --glass-brd:rgba(255,255,255,.80); /* Soft-surface tokens. These used to be LITERAL light colours scattered through shared rules, which dark mode could never reach — ghost buttons were white-on-white, chips glowed, the toast was unreadable ("dark mode is very hard to see", 2026-08-05). A surface that exists in both themes gets a token, no exceptions. */ --card2:#f8f9f7; /* solid soft card (kanban, totals row) */ --chipbg:#e7ebe6; /* muted chip / pill / kbd */ --wash:rgba(255,255,255,.45); /* hover wash */ --washOn:rgba(255,255,255,.7); /* selected / raised wash */ --btng1:rgba(255,255,255,.9); /* ghost button gradient, top */ --btng2:rgba(255,255,255,.55); /* ghost button gradient, bottom */ --glass-shadow:0 20px 40px -22px rgba(20,50,60,.20),0 1px 0 rgba(255,255,255,.85) inset; } /* ---------------- Dark ---------------- Same Sea Mist family, not a colour inversion: inverting a palette gives grey mush and unreadable accents. These are chosen so the accent still carries and the glass still reads as glass on a dark ground. Every name here MUST match a token the light theme actually defines. The first version invented --bg, --glass and --mist, none of which exist, so dark mode changed the text colour and left the page white (2026-08-01). Driven by [data-theme] on , set by theme.js. */ :root[data-theme="dark"]{ --pap:#141b1e; --tint:#1a2427; --card:rgba(32,44,48,.72); --ink:#e4ecee; --head:#f2f7f8; --dim:#93a5aa; --line:rgba(255,255,255,.10); --rule:rgba(255,255,255,.07); --rule2:rgba(255,255,255,.14); --hover:rgba(255,255,255,.07); --accent:#6fa9ba; --accent-soft:#4d8494; --sea:#7db6c6; --coral:#e08874; --sand:#d0a469; --good:#7fb08a; --seaSoft:#1e3238; --sandSoft:#33291a; --coralSoft:#3a241f; --goodSoft:#1e3129; --coralInk:#ffd9d0; --sandInk:#ffe9c4; --goodInk:#d2f0de; --glass-bg:rgba(32,46,51,.58); --glass-brd:rgba(255,255,255,.08); --card2:#1e292c; --chipbg:#243034; --wash:rgba(255,255,255,.07); --washOn:rgba(255,255,255,.14); --btng1:rgba(255,255,255,.16); --btng2:rgba(255,255,255,.07); --glass-shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark; } /* The page background is painted with literal colours in `body`, not tokens, so dark needs its own — otherwise the app is dark on a white page. */ :root[data-theme="dark"] body{ background: radial-gradient(1200px 800px at -8% -10%, #1b2a2f 0%, transparent 55%), radial-gradient(1000px 800px at 108% 40%, #1a2723 0%, transparent 50%), radial-gradient(800px 600px at 50% 120%, #1e2622 0%, transparent 55%), linear-gradient(180deg, #121a1c 0%, #0f1618 100%); } /* Panels tinted with a white wash need the opposite treatment — white on a dark ground looks like fog, not glass. */ :root[data-theme="dark"] .g-head:hover, :root[data-theme="dark"] .g-body a:hover, :root[data-theme="dark"] .thread-pick:hover, :root[data-theme="dark"] .grant-row:hover, :root[data-theme="dark"] .omni-row.on{background:rgba(255,255,255,.07)} :root[data-theme="dark"] .thread-pick.on{background:rgba(255,255,255,.11)} :root[data-theme="dark"] .chat-msg.assistant .chat-body, :root[data-theme="dark"] .proposals{background:rgba(255,255,255,.05)} :root[data-theme="dark"] .cover.has .cover-tools .btn, :root[data-theme="dark"] .cover-repos span{background:rgba(20,27,30,.86)} :root[data-theme="dark"] .omni-back{background:rgba(0,0,0,.5)} :root[data-theme="dark"] .cover:not(.has) .cover-tools .btn:hover{ background:rgba(255,255,255,.08)} /* Panels that were tinted with white overlays need the opposite treatment — a white wash on a dark ground looks like fog, not glass. */ :root[data-theme="dark"] .g-head:hover, :root[data-theme="dark"] .g-body a:hover, :root[data-theme="dark"] .thread-pick:hover, :root[data-theme="dark"] .grant-row:hover, :root[data-theme="dark"] .omni-row.on{background:rgba(255,255,255,.07)} :root[data-theme="dark"] .thread-pick.on{background:rgba(255,255,255,.11)} :root[data-theme="dark"] .chat-msg.assistant .chat-body, :root[data-theme="dark"] .proposals{background:rgba(255,255,255,.05)} :root[data-theme="dark"] .cover.has .cover-tools .btn, :root[data-theme="dark"] .cover-repos span{background:rgba(20,27,30,.86)} :root[data-theme="dark"] .omni-back{background:rgba(0,0,0,.5)} :root[data-theme="dark"] .cover:not(.has) .cover-tools .btn:hover{ background:rgba(255,255,255,.08)} *{box-sizing:border-box} html,body{height:100%} body{margin:0;color:var(--ink);font:15px/1.6 var(--font); /* Sea Mist ambient — pale mist blue → sage → soft cream */ background: radial-gradient(1200px 800px at -8% -10%, #cee3e6 0%, transparent 55%), radial-gradient(1000px 800px at 108% 40%, #d9e7d8 0%, transparent 50%), radial-gradient(800px 600px at 50% 120%, #e7ecdc 0%, transparent 55%), linear-gradient(180deg, #f0f2ec 0%, #e1eaea 100%); background-attachment:fixed; } .mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums} a{color:var(--sea)} :focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---------------- shell: icon rail + topbar ---------------- Midnight Console structure (approved 2026-08-05), Sea Mist tokens. The rail is a fixed 54px; the old 252px sidebar's width went to the content, which is what makes dense tables readable. */ .app{display:grid;grid-template-columns:176px 1fr;min-height:100vh;position:relative; transition:grid-template-columns .2s} .app[data-side="off"]{grid-template-columns:1fr} .app[data-side="off"] .side{display:none} /* Collapsed, the fixed toggle sits at (14,14) — the topbar needs room for it. */ .app[data-side="off"] .topbar{padding-left:60px} .side-toggle{ position:fixed;top:14px;left:14px;z-index:40; background:var(--glass-bg);border:1px solid var(--glass-brd); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); box-shadow:var(--glass-shadow); border-radius:10px;width:36px;height:36px; font-size:15px;line-height:1;cursor:pointer;display:none;color:var(--ink); transition:background .15s,color .15s; } .side-toggle:hover{color:var(--accent);background:var(--washOn)} .app[data-side="off"] .side-toggle{display:block} .side{background:var(--tint);border-right:1px solid var(--line); display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 0 12px; position:relative;z-index:20} .railmark{display:flex;align-items:center;gap:9px;margin:0 6px 7px; padding:0 3px;height:38px;text-decoration:none;color:var(--head)} .railmark .rm-badge{width:30px;height:30px;flex:none;display:grid; place-items:center;border-radius:9px;background:var(--accent);color:#fff; font:600 15px/1 var(--serif)} .railmark .rlabel{font:600 15px/1 var(--serif);color:var(--head)} .railmark:hover .rm-badge{filter:brightness(1.08)} /* Labelled rail (v24.1): "I don't know what any of these mean" — the name sits beside the icon, always. Phones drop back to icons-only below. */ .railbtn{width:calc(100% - 12px);height:34px;display:flex;align-items:center; gap:9px;border-radius:9px;margin:0 6px;padding:0 9px; border:0;background:none;color:var(--dim);text-decoration:none;cursor:pointer; position:relative;text-align:left} .railbtn .ri{font-size:14px;line-height:1;width:18px;text-align:center;flex:none} .rlabel{font:500 13px/1 var(--font);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .railbtn:hover{color:var(--head);background:var(--hover)} .railbtn[aria-current="page"]{color:var(--accent);background:var(--card); box-shadow:inset 0 0 0 1px var(--line)} .rdot{position:absolute;top:5px;left:22px;width:5px;height:5px;border-radius:50%; background:var(--accent-soft)} .raildiv{width:22px;height:1px;background:var(--rule2);margin:7px 0} .railsp{flex:1} /* group flyout */ .railgrp{position:relative;width:100%} .railgrp.active>.railbtn{color:var(--accent)} .railgrp .flyout{display:none;position:absolute;left:calc(100% + 7px);top:-6px;z-index:30; min-width:184px;padding:6px;background:var(--card);border:1px solid var(--rule2); border-radius:12px;box-shadow:0 18px 40px -18px rgba(20,50,60,.42); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1)} .railgrp.open .flyout{display:block} /* A hover bridge: without it the 7px gap between button and flyout counts as "left the group" and the menu closes as she reaches for it. */ .railgrp .flyout::before{content:"";position:absolute;left:-9px;top:0;bottom:0;width:9px} .flyout .fh{font:600 9.5px/1 var(--font);letter-spacing:.18em;text-transform:uppercase; color:var(--dim);padding:7px 9px 6px} .flyout a{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink); font:14px/1 var(--font);padding:8px 9px;border-radius:8px} .flyout a:hover{background:var(--hover)} .flyout a[aria-current="page"]{background:var(--seaSoft);color:var(--accent);font-weight:600} .flyout a.soon{opacity:.4;pointer-events:none} .flyout .cnt{margin-left:auto;font:11.5px/1 var(--mono);color:var(--dim)} .flyout .cnt.hot{color:var(--coral);font-weight:700} /* topbar */ .topbar{display:flex;align-items:center;gap:12px;padding:10px 22px; border-bottom:1px solid var(--line);background:var(--pap); position:sticky;top:0;z-index:15} .topbar .crumb{min-width:0} .topbar .crumb b{display:block;font:400 20px/1.15 var(--serif);color:var(--head); font-weight:400;letter-spacing:-.01em} .topbar .crumb span{display:block;font:10.5px/1.4 var(--font);letter-spacing:.14em; text-transform:uppercase;color:var(--dim);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar .sw{margin-left:auto;position:relative} .topbar .sw>button{display:flex;align-items:center;gap:8px;background:var(--card); border:1px solid var(--line);border-radius:9px;padding:6px 10px;cursor:pointer; font:13.5px/1.2 var(--font);color:var(--ink);max-width:220px} .topbar .sw>button:hover{border-color:var(--rule2)} .topbar .sw .who{min-width:0} .topbar .sw .who b{display:block;font-weight:600;font-size:13px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .topbar .sw .car{color:var(--dim);font-size:11px} .topbar .sw menu{display:none;position:absolute;z-index:30;right:0;top:calc(100% + 6px); margin:0;padding:5px;list-style:none;min-width:236px; background:var(--card);border:1px solid var(--rule2);border-radius:11px; box-shadow:0 16px 34px -16px rgba(30,42,46,.44);max-height:62vh;overflow:auto; backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1)} .topbar .sw.open menu{display:block} .sq{width:20px;height:20px;border-radius:5px;flex:none;display:grid;place-items:center; color:#fff;font:700 10px/1 var(--font)} .sw menu button{width:100%;display:flex;align-items:center;gap:8px;background:none; border:0;padding:7px 8px;border-radius:7px;cursor:pointer;font:14px/1.2 var(--font); color:var(--ink);text-align:left} .sw menu button:hover{background:var(--hover)} .sw menu .gl{font:600 9.5px/1 var(--font);letter-spacing:.15em;text-transform:uppercase; color:var(--dim);padding:9px 8px 4px} .sw menu hr{border:0;border-top:1px solid var(--rule);margin:5px 0} .omnibtn{display:flex;align-items:center;gap:12px;background:var(--tint); border:1px solid var(--line);border-radius:9px;padding:6px 11px;cursor:pointer; color:var(--dim);font:12.5px/1.4 var(--font);min-width:190px; justify-content:space-between} .omnibtn:hover{border-color:var(--rule2);color:var(--ink)} .omnibtn kbd{font:11px/1 var(--mono);border:1px solid var(--line);border-radius:4px; padding:2px 5px;color:var(--dim)} .health{padding-top:14px;border-top:1px solid var(--line);font:11.5px/1.85 var(--font); color:var(--dim)} .health div{display:flex;align-items:center;gap:8px} .dot{width:7px;height:7px;border-radius:50%;background:#b9c2bb;flex:none} .dot.ok{background:var(--good)} .dot.bad{background:var(--coral)} .dot.wn{background:var(--sand)} .stamp{margin-top:7px;font:10.5px/1.5 var(--mono);opacity:.75} @media (max-width:720px){ .topbar{padding:9px 14px;gap:9px;flex-wrap:wrap} .topbar .omnibtn{min-width:0} .topbar .omnibtn span{display:none} .topbar .sw>button{max-width:150px} } /* ---------------- main ---------------- */ .main{padding:20px 22px 60px;min-width:0} .mhd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px} .main h2{font:500 30px/1.1 var(--serif);margin:0;letter-spacing:-.02em;text-wrap:balance; color:var(--head)} .sub{color:var(--dim);font-size:13.5px;margin:5px 0 0;max-width:64ch} .scope{display:inline-flex;align-items:center;gap:7px;font:11px/1 var(--font);letter-spacing:.1em; text-transform:uppercase;color:var(--dim);background:var(--chipbg);border-radius:20px;padding:6px 11px;margin-bottom:9px} .scope i{width:8px;height:8px;border-radius:3px;display:inline-block} .loading{padding:40px;color:var(--dim)} /* The strip: cells joined by hairlines rather than floating cards, with the figures in the SERIF — the one flourish this design spends. Table numbers stay monospace (below) so columns still align; serif digits are for the summary line only, where they read as a statement instead of a spreadsheet. */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); background:var(--pap);border:1px solid var(--line); border-radius:12px;overflow:hidden;margin-bottom:18px} .kpi{padding:13px 16px;border-right:1px solid var(--line)} .kpi:last-child{border-right:0} .kpi .k{font:600 9.5px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)} .kpi .v{font:400 27px/1.1 var(--serif);font-variant-numeric:tabular-nums; margin:9px 0 4px;color:var(--head);letter-spacing:-.01em} .kpi .v.muted{font:400 15px/1.3 var(--font);color:var(--dim)} .kpi .d{font-size:11.5px;color:var(--dim)} .up{color:var(--good)} .dn{color:var(--coral)} /* sheets — the ruled panels, now glass */ /* Sheets are flat panels with hairline edges, not glass. Blur reads as depth, and depth competes with data — at this density the edge should do the work. */ .sheet{ background:var(--pap);border:1px solid var(--line); border-radius:12px;overflow:hidden;margin-bottom:16px } .sheet>header{display:flex;align-items:center;gap:10px;padding:9px 16px; border-bottom:1px solid var(--line);background:var(--tint)} .sheet>header h3{margin:0;font:600 10px/1 var(--font);letter-spacing:.2em; text-transform:uppercase;color:var(--head)} .sheet>header .rt{margin-left:auto;display:flex;align-items:center;gap:8px} .foot{font:11px/1.5 var(--mono);color:var(--dim);padding:9px 16px;border-top:1px dashed var(--rule2)} .two{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start} table{width:100%;border-collapse:collapse;font-size:13.5px} thead th{font:600 9.5px/1 var(--font);letter-spacing:.16em;text-transform:uppercase; color:var(--dim);text-align:left;padding:8px 14px; border-bottom:1px solid var(--line);background:var(--tint);white-space:nowrap} thead th.r{text-align:right} tbody td{padding:8px 14px;border-bottom:1px solid var(--rule);vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr:hover td{background:var(--hover)} td.num,th.r{text-align:right;white-space:nowrap} td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px} .tot td{border-top:2px solid var(--ink);font-weight:600;background:var(--card2)} .tot.sub2 td{border-top:1px solid var(--rule2);font-weight:500;color:var(--dim);background:none} .t1{font-weight:600} .t2{font-size:12.5px;color:var(--dim);margin-top:1px} .rail{border-left:3px solid transparent;padding-left:11px;margin-left:-3px} .rail.crit{border-left-color:var(--coral)} .rail.warn{border-left-color:var(--sand)} .rail.info{border-left-color:var(--sea)} .rail.good{border-left-color:var(--good)} .when{font:12px/1 var(--mono);color:var(--dim);white-space:nowrap} .drag{cursor:grab;color:var(--rule2);user-select:none;padding-right:4px} tr.dragging{opacity:.4} tr.dropafter td{box-shadow:inset 0 -2px 0 var(--sea)} .chip{display:inline-block;font:600 10px/1 var(--font);letter-spacing:.08em;text-transform:uppercase; padding:5px 8px;border-radius:20px;background:var(--chipbg);color:var(--dim);white-space:nowrap} .chip.crit{background:var(--coralSoft);color:#a53a23} .chip.warn{background:var(--sandSoft);color:#8a6410} .chip.good{background:var(--goodSoft);color:#1f6044} .chip.sea{background:var(--seaSoft);color:var(--sea)} .chip.line{background:none;border:1px solid var(--rule2)} .ent{display:inline-flex;align-items:center;gap:6px;font:12px/1 var(--font);color:var(--dim);white-space:nowrap} .ent i{width:8px;height:8px;border-radius:3px;flex:none} .btn{font:600 13px/1 var(--font);color:#fff;border:0;border-radius:11px; padding:10px 14px;cursor:pointer; background:linear-gradient(180deg,var(--accent-soft),var(--accent)); box-shadow:0 8px 18px -10px rgba(20,55,68,.42),0 1px 0 rgba(255,255,255,.28) inset} .btn:hover{filter:brightness(1.05)} .btn.g{background:linear-gradient(180deg,var(--btng1),var(--btng2)); color:var(--ink); box-shadow:0 6px 14px -10px rgba(30,42,46,.25)} .btn.sm{font-size:12px;padding:7px 11px;border-radius:7px} .btn.danger{background:var(--coral)} .btn[disabled]{opacity:.5;cursor:default;filter:none} .lnk{color:var(--sea);text-decoration:none;border-bottom:1px solid rgba(44,95,107,.35);cursor:pointer} /* inline editing */ .cell{display:block;width:100%;border:1px solid transparent;background:none;border-radius:6px; padding:4px 6px;margin:-4px -6px;font:inherit;color:inherit;font-family:inherit;min-width:60px} .cell:hover{border-color:var(--rule)} .cell:focus{border-color:var(--sea);background:var(--card);outline:none} .cell.num{font-family:var(--mono);text-align:right} select.cell{cursor:pointer;-webkit-appearance:none;appearance:none} .saved{font:10.5px/1 var(--mono);color:var(--good);white-space:nowrap} .saveerr{font:10.5px/1 var(--mono);color:var(--coral)} .empty{padding:34px 20px;text-align:center;color:var(--dim);font-size:13.5px} .empty b{display:block;color:var(--ink);font:600 16px/1.4 var(--font);margin-bottom:4px} .empty .btn{margin-top:14px} .errbox{padding:18px;background:var(--coralSoft);color:#8d3220;font-size:13.5px;border-radius:var(--r-sm);margin:16px} .errbox b{display:block;margin-bottom:3px} /* toasts */ .toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:flex; flex-direction:column;gap:8px;align-items:center;pointer-events:none} .toast{background:var(--ink);color:var(--pap);border-radius:10px;padding:11px 14px;font-size:13.5px; display:flex;align-items:center;gap:14px;box-shadow:0 12px 28px -14px rgba(0,0,0,.6);pointer-events:auto; max-width:min(560px,92vw)} .toast.bad{background:#8d3220} .toast button{background:none;border:1px solid rgba(255,255,255,.45);color:inherit;border-radius:7px; padding:5px 10px;font:600 12px/1 var(--font);cursor:pointer;white-space:nowrap} .toast button:hover{background:rgba(255,255,255,.14)} /* modal */ .modal-root:empty{display:none} .modal-back{position:fixed;inset:0;background:rgba(30,42,46,.42);z-index:70;display:grid;place-items:center;padding:20px} .modal{background:var(--card);border-radius:14px;width:min(560px,100%);max-height:86vh;overflow:auto; box-shadow:0 30px 60px -24px rgba(0,0,0,.5)} .modal h3{margin:0;font:500 21px/1.25 var(--serif)} .modal .mb{padding:22px} .modal p{color:var(--dim);font-size:13.5px} .modal .row{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap} .modal label{display:block;font:600 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase; color:var(--dim);margin:14px 0 5px} .modal input,.modal select,.modal textarea{width:100%;font:15px/1.4 var(--font);color:var(--ink); background:var(--pap);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px} .modal input:focus,.modal select:focus,.modal textarea:focus{outline:none;border-color:var(--sea);background:var(--card)} .modal .hint{font-size:12px;color:var(--dim);margin-top:5px} .kinds{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:6px} .kinds button{background:var(--pap);border:1.5px solid var(--line);border-radius:10px;padding:12px 10px; cursor:pointer;font:14px/1.3 var(--font);color:var(--ink);text-align:left} .kinds button[aria-pressed="true"]{border-color:var(--sea);background:var(--seaSoft)} .kinds button span{display:block;font-size:11.5px;color:var(--dim);margin-top:3px} /* venture cards */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;padding:16px} .card{background:var(--card2);border:1px solid var(--line);border-radius:11px;overflow:hidden;cursor:pointer; text-align:left;padding:0;font:inherit;color:inherit;display:block;width:100%} .card:hover{border-color:var(--rule2)} .card .strip{height:4px} .card .cb{padding:14px 15px 13px} .card h4{margin:0 0 4px;font:600 15.5px/1.3 var(--font);display:flex;align-items:center;gap:8px} .card h4 i{width:9px;height:9px;border-radius:3px;flex:none} .card p{margin:0;font-size:12.5px;color:var(--dim)} .card dl{display:grid;grid-template-columns:auto auto;gap:4px 12px;margin:12px 0 0;font-size:12px} .card dt{color:var(--dim)} .card dd{margin:0;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} .card .meta{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap} /* first run */ .firstrun{max-width:760px;margin:6vh auto;text-align:center} .firstrun h1{font:400 40px/1.15 var(--serif);margin:0 0 10px;letter-spacing:-.02em} .firstrun p.lead{font-size:16px;color:var(--dim);margin:0 auto 26px;max-width:52ch} .firstrun .kinds{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));text-align:left;margin-bottom:22px} .firstrun .kinds button{padding:18px 16px} .firstrun .kinds b{font:600 16px/1.3 var(--font);display:block} .firstrun .skip{font-size:13px;color:var(--dim);margin-top:18px} /* ---------------- board (kanban) view ---------------- */ .board-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;margin-bottom:18px} .b-col{background:var(--card);border:1px solid var(--line);border-radius:10px; display:flex;flex-direction:column;min-height:200px} .b-col > header{display:flex;align-items:center;gap:8px;padding:10px 13px; border-bottom:1px solid var(--rule2);font:600 10px/1 var(--font); letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .b-col > header .cnt{margin-left:auto;color:var(--dim);font:11px/1 var(--mono)} .b-col .cards-col{padding:9px;display:flex;flex-direction:column;gap:7px;flex:1;overflow-y:auto} .b-card{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:9px 11px; cursor:grab;font-size:13.5px;line-height:1.35} .b-card:hover{border-color:var(--rule2);background:var(--card)} .b-card.dragging{opacity:.4} .b-card .t2{font-size:11.5px;margin-top:3px} .b-col.drop-target{background:var(--seaSoft);border-color:var(--sea)} /* view switcher chips */ .view-switch{display:inline-flex;background:var(--card);border:1px solid var(--line); border-radius:8px;overflow:hidden;font-size:12px} .view-switch button{background:none;border:0;border-right:1px solid var(--line); padding:6px 11px;cursor:pointer;color:var(--dim);white-space:nowrap} .view-switch button:last-child{border-right:0} .view-switch button:hover{color:var(--ink);background:var(--wash)} .view-switch button[aria-pressed="true"]{background:var(--sea);color:#fff} /* venture depth indenting on the overview and switcher */ .nest-1{padding-left:22px} /* In a GRID, margin/padding indents overflow the track — a nested venture card shoved 22px over its neighbour ("annoying overlap", 2026-08-06). Inside .cards the ↳ cue alone marks the child. */ .cards .card.nest-1{padding-left:0;margin-left:0} .nest-2{padding-left:44px} .nest-cue{color:var(--dim);font-size:11px;margin-right:6px} /* keyboard shortcuts help overlay */ .kbd-help{padding:0} .kbd-help table{width:100%;font-size:13.5px} .kbd-help td{padding:6px 12px;border:0} .kbd-help td:first-child{width:1%;white-space:nowrap;text-align:right;color:var(--dim); font:12px/1.4 var(--mono);font-variant-numeric:tabular-nums} .kbd-help kbd{display:inline-block;padding:2px 6px;border:1px solid var(--rule2); border-radius:4px;background:var(--chipbg);font:11px/1 var(--mono);color:var(--ink); margin:0 2px;box-shadow:0 1px 0 var(--rule2)} .kbd-help .grouphead{font:600 10px/1 var(--font);letter-spacing:.14em; text-transform:uppercase;color:var(--dim);padding-top:14px;text-align:left} /* ---------------- CRM cards (contacts, leads) ---------------- */ .crm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;padding:16px} .person{padding:16px;position:relative} .person.glass{ background:var(--glass-bg);border:1px solid var(--glass-brd); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); border-radius:16px;box-shadow:var(--glass-shadow); } .person .top{display:flex;gap:12px;align-items:center;margin-bottom:12px} .person .avatar{width:44px;height:44px;border-radius:50%; background:linear-gradient(135deg,#c4d9dc,#f4d1c0); display:grid;place-items:center;color:var(--sea);font:700 15px/1 var(--font); border:1px solid rgba(255,255,255,.7);flex:none} .person .who h4{margin:0;font:600 15px/1.2 var(--font)} .person .who span{font:12px/1.3 var(--font);color:var(--dim)} .person p{margin:8px 0;font-size:13px;color:var(--dim)} .person .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .person .aisug{margin-top:12px;padding:10px 12px;border-radius:12px; background:linear-gradient(180deg,rgba(94,166,180,.14),rgba(207,82,56,.10)); border:1px solid rgba(94,166,180,.25);font-size:12.5px} .person .aisug b{color:var(--sea);font:600 10px/1.2 var(--font);letter-spacing:.14em; text-transform:uppercase;display:block;margin-bottom:4px} .person.lead{border-left:3px solid rgba(207,82,56,.6)} .person.lead .avatar{background:linear-gradient(135deg,#f4d1c0,#e2b6ab);color:var(--coral)} /* ---------------- home widget board ---------------- */ .board{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-bottom:18px; /* Cards keep their OWN height — a grid row stretches every card to its tallest neighbour, which left Monthly Burn as a number floating in a void beside the Investments list ("widgets should adjust to the sizing", 2026-08-06). Row packing fills the gaps when she rearranges. */ align-items:start;grid-auto-flow:dense} .wg{grid-column:span 3; background:var(--glass-bg);border:1px solid var(--glass-brd); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); box-shadow:var(--glass-shadow); border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0} .wg.w4{grid-column:span 4} .wg.w6{grid-column:span 6} .wg.w8{grid-column:span 8} .wg.w12{grid-column:span 12} .wg>header{display:flex;align-items:center;gap:7px;padding:10px 13px; border-bottom:1px solid var(--rule);min-height:40px} .wg>header h3{margin:0;font:600 9.5px/1.3 var(--font);letter-spacing:.14em; text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .wg>header .oi{width:8px;height:8px;border-radius:3px;flex:none} .wg>header .rt{margin-left:auto;display:flex;align-items:center;gap:6px} .wg .wbody{padding:13px;flex:1;min-width:0} .wg .big{font:400 30px/1.05 var(--mono);font-variant-numeric:tabular-nums} .wg .big.sm{font-size:22px} .wg .cap2{font-size:11.5px;color:var(--dim);margin-top:5px} .wg .srow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px} .wg table{font-size:13px} .wg table td{padding:8px 13px} .wg table tr:first-child td{border-top:0} .wg .wfoot{font:10.5px/1.4 var(--mono);color:var(--dim);padding:8px 13px; border-top:1px dashed var(--rule2)} .board.editing .wg{outline:1px dashed var(--rule2);outline-offset:2px} .board.editing .wg>header{cursor:grab} .wg.dragging{opacity:.35} .wtools{display:flex;align-items:center;gap:3px} .wtools button{font:600 10px/1 var(--mono);background:var(--chipbg);border:1px solid var(--line); color:var(--dim);border-radius:5px;padding:4px 6px;cursor:pointer} .wtools button:hover{border-color:var(--rule2);color:var(--ink)} .wtools button.x:hover{background:var(--coralSoft);border-color:#e2b6ab;color:#a53a23} .wtools button[aria-pressed="true"]{background:var(--sea);border-color:var(--sea);color:#fff} .addw{grid-column:span 3;border:1.5px dashed var(--rule2);border-radius:var(--r); background:none;color:var(--dim);font:600 13px/1.4 var(--font);cursor:pointer; min-height:130px;display:grid;place-items:center;padding:16px} .addw:hover{border-color:var(--sea);color:var(--sea);background:var(--wash)} .editbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--chipbg); border:1px solid var(--rule2);border-radius:10px;padding:10px 14px;margin-bottom:14px; font-size:13px;color:var(--dim)} .editbar b{color:var(--ink)} .picker{background:var(--card);border:1px solid var(--rule2);border-radius:var(--r); margin-bottom:16px;overflow:hidden} .picker>header{padding:12px 16px;border-bottom:1px solid var(--rule);display:flex; align-items:center;gap:10px} .picker>header h3{margin:0;font:600 10px/1 var(--font);letter-spacing:.15em; text-transform:uppercase;color:var(--dim)} .plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;padding:16px} .pitem{display:flex;align-items:center;gap:9px;background:var(--card2);border:1px solid var(--line); border-radius:9px;padding:9px 11px;cursor:pointer;text-align:left; font:13.5px/1.3 var(--font);color:var(--ink);width:100%} .pitem:hover{border-color:var(--sea);background:var(--seaSoft)} .pitem[disabled]{opacity:.45;cursor:default} .pitem .pl{flex:1;min-width:0} .pitem .pl span{display:block;font-size:11px;color:var(--dim)} .pitem .pa{font:600 15px/1 var(--font);color:var(--sea)} .pitem[disabled] .pa{color:var(--dim)} /* ---------------- segmented tab bar (Money tabs, Calendar view, Goals domains) ---- */ .seg{ display:inline-flex;flex-wrap:wrap;gap:2px; background:var(--glass-bg);border:1px solid var(--glass-brd); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); box-shadow:var(--glass-shadow); border-radius:12px;padding:4px; margin-bottom:18px; } .seg button{ font:600 13px/1 var(--font);color:var(--dim); background:none;border:0;padding:9px 15px;cursor:pointer; border-radius:8px;white-space:nowrap; transition:background .15s,color .15s; } .seg button:hover{color:var(--ink);background:var(--wash)} .seg button[aria-pressed="true"]{ background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.6)); color:var(--head); box-shadow:0 6px 14px -10px rgba(20,55,68,.22),0 1px 0 rgba(255,255,255,.95) inset; } .seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* .view-switch — the smaller List/Board picker on Ideas/Projects — match the same look */ .view-switch{ display:inline-flex;gap:2px; background:var(--glass-bg);border:1px solid var(--glass-brd); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); border-radius:10px;padding:3px;font-size:12px; box-shadow:var(--glass-shadow); } .view-switch button{ background:none;border:0;padding:6px 12px;cursor:pointer; color:var(--dim);white-space:nowrap;border-radius:7px; font:600 12px/1 var(--font); transition:background .15s,color .15s; } .view-switch button:hover{color:var(--ink);background:var(--wash)} .view-switch button[aria-pressed="true"]{ background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.6)); color:var(--head); box-shadow:0 4px 10px -8px rgba(20,55,68,.22),0 1px 0 rgba(255,255,255,.95) inset; } /* ---------------- consolidated dropdown sidebar ---------------- 7 groups instead of 19 flat links. Group open/closed persists per group. */ .g-single{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink); font:600 13.5px/1 var(--font);padding:8px 11px;border-radius:9px; transition:background .15s} .g-single:hover{background:rgba(255,255,255,.45)} .g-single[aria-current="page"]{ background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5)); box-shadow:0 6px 14px -10px rgba(20,55,68,.22),0 1px 0 rgba(255,255,255,.9) inset; } .g-single .cnt{margin-left:auto;font:11px/1 var(--mono);color:var(--dim)} .g-single .cnt.hot{color:var(--coral);font-weight:700} .g-icon{width:22px;height:22px;border-radius:7px;display:grid;place-items:center; background:rgba(255,255,255,.6);color:var(--accent); font-size:11px;line-height:1;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.05)} .g-item{margin-top:1px} .g-head{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;cursor:pointer; font:600 13.5px/1 var(--font);color:var(--ink);border:0;background:none;width:100%; text-align:left;transition:background .15s} .g-head:hover{background:rgba(255,255,255,.45)} .g-head .g-caret{margin-left:auto;color:var(--dim);font-size:10px;transition:transform .15s; transform-origin:center} .g-item.open .g-caret{transform:rotate(90deg)} .g-head .g-cnt{font:11px/1 var(--mono);color:var(--dim);margin-right:6px} .g-head .g-cnt.hot{color:var(--coral);font-weight:700} .g-body{max-height:0;overflow:hidden;transition:max-height .22s ease-out;padding:0 6px} .g-item.open .g-body{max-height:520px;padding-bottom:4px} .g-body a{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink); font:13.5px/1 var(--font);padding:7px 10px 7px 34px;border-radius:8px;position:relative} .g-body a::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:1px; background:rgba(30,60,68,.10)} .g-body a:hover{background:rgba(255,255,255,.45)} .g-body a[aria-current="page"]{ background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5)); box-shadow:0 6px 14px -10px rgba(20,55,68,.22),0 1px 0 rgba(255,255,255,.9) inset; font-weight:600} .g-body a[aria-current="page"]::before{background:var(--accent);width:2px} .g-body a .cnt{margin-left:auto;font:11px/1 var(--mono);color:var(--dim)} .g-body a .cnt.hot{color:var(--coral);font-weight:700} /* Retire the old `.navgrp` label — the group heads carry it now */ .side .navgrp{display:none} @media (max-width:860px){ /* The rail stays a RAIL on a phone — icons only: 176px of labels on a 375px screen starves the content. Labels come back at desktop widths. */ .app{grid-template-columns:54px 1fr} .side{border-right:1px solid var(--line)} .rlabel{display:none} .railbtn{width:36px;margin:0 auto;padding:0;justify-content:center} .railmark{margin:0 auto 7px;padding:0} .railgrp .flyout{left:calc(100% + 5px);min-width:168px; max-width:calc(100vw - 72px)} .main{padding:20px 16px 60px} .two{grid-template-columns:1fr} .kpis{grid-template-columns:1fr 1fr} .kinds{grid-template-columns:1fr} table{font-size:13.5px} thead th,tbody td{padding:9px 11px} .sheet{overflow-x:auto} .board{grid-template-columns:1fr} .wg,.wg.w4,.wg.w6,.wg.w8,.wg.w12,.addw{grid-column:span 1} } /* ---------------- Assistant chat ---------------- */ .chat-wrap{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start} @media (max-width:900px){.chat-wrap{grid-template-columns:1fr}} .chat-threads{position:sticky;top:14px} .thread-pick{display:block;width:100%;text-align:left;background:transparent;border:0; padding:9px 10px;border-radius:9px;cursor:pointer;font:inherit;color:var(--ink)} .thread-pick:hover{background:rgba(255,255,255,.5)} .thread-pick.on{background:rgba(255,255,255,.75);box-shadow:inset 2px 0 0 var(--accent)} .chat-log{padding:14px 16px;max-height:56vh;overflow-y:auto;display:flex; flex-direction:column;gap:14px} .chat-msg{max-width:88%} .chat-msg.user{align-self:flex-end} .chat-msg.user .chat-body{background:var(--accent);color:#fff;border-radius:14px 14px 4px 14px} .chat-msg.assistant .chat-body{background:rgba(255,255,255,.72); border:1px solid var(--line);border-radius:14px 14px 14px 4px} .chat-body{padding:11px 14px;white-space:pre-wrap;line-height:1.55} .chat-cost{font:11px/1 var(--mono);color:var(--dim);margin-top:5px} .tool-strip{margin-top:8px;font-size:12px} .tool-strip summary{cursor:pointer;color:var(--dim)} .tool-strip>div{padding:3px 0 3px 14px;word-break:break-all} .proposals{margin-top:10px;padding:12px;border-radius:12px; border:1px solid var(--coral);background:rgba(255,255,255,.6)} .proposals.done{border-color:var(--good);opacity:.75} .proposal{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)} .proposal pre{margin:6px 0 0;font:12px/1.5 var(--mono);white-space:pre-wrap; color:var(--dim)} .chat-composer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)} .chat-input{flex:1;border:1px solid var(--line);border-radius:11px;padding:10px 12px; font:14px/1.5 var(--font);background:var(--card);resize:vertical} .caps{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:13px} @media (max-width:640px){.caps{grid-template-columns:1fr}} .caps ul{margin:6px 0 0;padding-left:18px;color:var(--dim)} .caps li{margin-bottom:4px} /* ---------------- Global search (⌘K) ---------------- */ .omni-back{position:fixed;inset:0;z-index:200;background:rgba(24,40,46,.28); backdrop-filter:blur(3px);display:flex;justify-content:center; align-items:flex-start;padding:12vh 16px 16px} .omni{width:min(680px,100%);border-radius:16px;overflow:hidden; border:1px solid var(--rule2);box-shadow:0 24px 60px rgba(24,40,46,.28); /* SOLID, not glass: over a photo cover the translucent panel made the search box unreadable ("can't see search", 2026-08-06) */ background:var(--pap)} .omni-input{width:100%;border:0;border-bottom:1px solid var(--line); padding:16px 18px;font:16px/1.4 var(--font);background:transparent; color:var(--ink);outline:none} .omni-list{max-height:52vh;overflow-y:auto} .omni-row{display:grid;grid-template-columns:118px 1fr;gap:10px;width:100%; text-align:left;border:0;background:transparent;padding:10px 18px; cursor:pointer;font:inherit;color:var(--ink);align-items:baseline} .omni-row.on{background:rgba(255,255,255,.62)} .omni-sec{font:11px/1.4 var(--mono);color:var(--dim);text-transform:uppercase; letter-spacing:.04em} .omni-title{font-weight:600} .omni-snip{grid-column:2;font-size:12px;color:var(--dim); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .omni-empty{padding:22px 18px;color:var(--dim);font-size:14px} .omni-hint{padding:9px 18px;border-top:1px solid var(--line); font:11px/1.4 var(--mono);color:var(--dim)} /* ---------------- Access & gate ---------------- */ .gate{display:grid;place-items:center;min-height:80vh;padding:20px} .gate label{display:block;margin:12px 0 5px;font-size:13px;color:var(--dim)} .gate input{width:100%;border:1px solid var(--line);border-radius:10px; padding:10px 12px;font:14px/1.4 var(--font);background:var(--card)} .grant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:6px;margin-top:12px;max-height:44vh;overflow-y:auto} .grant-row{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer; padding:5px 7px;border-radius:8px} .grant-row:hover{background:rgba(255,255,255,.5)} /* Delete on a Kanban card — hidden until hover so it never competes with the card's own content, but always reachable by keyboard. */ .b-card{position:relative} .b-del{position:absolute;top:5px;right:5px;width:21px;height:21px;line-height:1; border:1px solid transparent;border-radius:6px;background:transparent; color:var(--dim);font:16px/1 var(--font);cursor:pointer;padding:0; opacity:0;transition:opacity .12s;display:grid;place-items:center} .b-card:hover .b-del,.b-del:focus-visible{opacity:1} .b-del:hover{background:var(--coral);border-color:var(--coral);color:#fff} .b-del:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* Leave room so a long title never runs under the button. */ .b-card .t1{padding-right:22px} /* The same corner delete on card grids as on Kanban cards. */ .card{position:relative} .card:hover .b-del,.card .b-del:focus-visible{opacity:1} /* ---------------- Covers ---------------- */ .main-wrap{min-width:0;display:flex;flex-direction:column} /* Matches .main's horizontal padding so the cover lines up with the heading beneath it; top padding moves here when a cover is showing. */ #cover-host{padding:8px 22px 0} #cover-host:empty{display:none} #cover-host:has(.cover:not(.has)){padding-bottom:0} .main-wrap:has(#cover-host .cover.has) .main{padding-top:14px} .cover{position:relative;border-radius:14px;transition:height .18s ease-out} .cover.has{height:150px;border:1px solid var(--line);overflow:hidden; margin-bottom:14px} @media (max-width:640px){.cover.has{height:104px}} /* WITH a cover: the controls sit on the image and appear on hover, the way every app that has covers does it. */ .cover.has .cover-tools{position:absolute;right:10px;bottom:10px;display:flex; gap:6px;opacity:0;transition:opacity .14s} .cover.has:hover .cover-tools,.cover.has:focus-within .cover-tools{opacity:1} .cover.has .cover-tools .btn{background:rgba(255,255,255,.86)} /* WITHOUT a cover: the button must be VISIBLE. The first version made the empty strip height:0 with overflow:hidden and the button opacity:0 — so "Add cover" could be neither seen nor hovered, and the whole feature was unreachable (2026-08-01). A quiet always-visible button beats an elegant invisible one. */ .cover:not(.has){height:auto;overflow:visible;margin-bottom:2px} .cover:not(.has) .cover-tools{display:flex;justify-content:flex-end;opacity:1} .cover:not(.has) .cover-tools .btn{background:transparent;border-color:transparent; color:var(--dim);font-size:12px;padding:3px 8px} .cover:not(.has) .cover-tools .btn:hover{background:rgba(255,255,255,.6); border-color:var(--line);color:var(--ink)} .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px} .swatch{height:60px;border-radius:10px;border:1px solid var(--line);cursor:pointer} .swatch:hover{outline:2px solid var(--accent);outline-offset:2px} .cover-url{width:100%;border:1px solid var(--line);border-radius:10px; padding:10px 12px;font:14px/1.4 var(--font);background:var(--card);margin-top:8px} /* Repositioning a cover: grab cursor, a bar with Save/Cancel, and the image follows the drag live so what she sees is what gets stored. */ .cover.repositioning{cursor:grab;outline:2px solid var(--accent);outline-offset:2px} .cover.repositioning:active{cursor:grabbing} .cover-repos{position:absolute;left:10px;bottom:10px;right:10px;display:flex; gap:8px;align-items:center;justify-content:flex-end; font:12px/1 var(--font);color:var(--ink)} .cover-repos span{margin-right:auto;background:rgba(255,255,255,.86); padding:6px 10px;border-radius:8px} .cover.repositioning .cover-tools{display:none} /* Sortable column headings */ th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--ink)} th.sorted{color:var(--accent)} .sort-arrow{font-size:10px} /* Sharing dialog */ .share-row{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:4px 0;border-bottom:1px solid var(--rule)} .share-row:last-child{border-bottom:0} .share-row .grant-row{margin:0} /* A doc as a workspace, not a form */ .doc-work{width:min(860px,100%);padding:18px} .doc-work-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-bottom:6px} .doc-work-head h3{margin:0} .doc-body{width:100%;min-height:38vh;border:1px solid var(--line);border-radius:11px; padding:12px;font:14px/1.6 var(--font);background:var(--card);resize:vertical} .doc-body[readonly]{opacity:.85} .doc-comments{margin-top:16px;border-top:1px solid var(--line);padding-top:12px; max-height:26vh;overflow-y:auto} .doc-comment{margin-top:9px;padding:9px 11px;border-radius:10px; background:var(--hover);border:1px solid var(--line)} .doc-comment.done{opacity:.55} .doc-comment-in{width:100%;margin-top:10px;border:1px solid var(--line); border-radius:10px;padding:9px 11px;font:14px/1.4 var(--font); background:var(--card)} .conflict{color:var(--coral);font-weight:600} /* Ask Empire */ .ask-bar{display:flex;align-items:center;gap:10px;padding:12px 16px; border-radius:13px;border:1px solid var(--line);cursor:text;margin-bottom:16px} .ask-bar:hover{border-color:var(--accent)} .ask-spark{color:var(--accent);font-size:15px} .ask-kbd{margin-left:auto;font:11px/1 var(--mono);color:var(--dim); border:1px solid var(--line);border-radius:6px;padding:4px 6px} /* ============ Ask Empire — the conversation panel (v22) ============ One panel, three states. Docked: 432px on the right, the app clickable behind (no dim sheet). Deck: centered and wide, app dimmed. Recents: the history view inside either size. */ .ask-panel{position:fixed;top:0;right:0;bottom:0;width:min(432px,94vw); z-index:210;background:var(--pap);border-left:1px solid var(--rule2); display:flex;flex-direction:column; box-shadow:-28px 0 50px -30px rgba(20,50,60,.35)} .ask-panel.deck{top:26px;bottom:26px;left:50%;right:auto; transform:translateX(-50%);width:min(780px,94vw); border:1px solid var(--rule2);border-radius:15px;overflow:hidden; box-shadow:0 40px 80px -30px rgba(15,43,48,.5)} .ask-dim{position:fixed;inset:0;z-index:205;background:rgba(15,43,48,.30)} .ask-phead{padding:11px 14px;border-bottom:1px solid var(--line); background:var(--tint);display:flex;align-items:center;gap:8px;flex:none} .ask-phead b{font:600 16px var(--serif);color:var(--head)} .ask-sess{font:11.5px var(--mono);color:var(--dim)} .ask-hbtns{margin-left:auto;display:flex;gap:4px} .ask-hico{width:27px;height:27px;border-radius:8px;border:1px solid transparent; background:transparent;display:grid;place-items:center;color:var(--dim); font-size:14px;cursor:pointer;padding:0} .ask-hico:hover{background:var(--card);border-color:var(--rule2);color:var(--ink)} .ask-thread{flex:1;overflow-y:auto;padding:16px;display:flex; flex-direction:column;gap:13px;scroll-behavior:smooth} .ask-panel.deck .ask-thread{padding:20px 26px} .ask-tstamp{align-self:center;font:10.5px var(--mono);letter-spacing:.12em; color:var(--dim);text-transform:uppercase;padding-top:4px} .ask-msgu{align-self:flex-end;max-width:78%;background:var(--accent);color:#fff; padding:8px 13px;border-radius:14px 14px 4px 14px;font:14.5px/1.5 var(--font); white-space:pre-wrap;overflow-wrap:anywhere} .ask-msgu.flash{outline:2px solid var(--sand);outline-offset:2px} .ask-msge{align-self:flex-start;max-width:92%;display:flex; flex-direction:column;gap:7px} .ask-panel.deck .ask-msge{max-width:80%} .ask-esay{font:14.5px/1.5 var(--font);color:var(--ink)} .ask-emptythread{margin:auto;text-align:center;max-width:290px;display:flex; flex-direction:column;gap:8px;align-items:center;color:var(--ink)} .ask-emptythread .ask-spark.big{font-size:28px} /* the plan, as a card in the flow */ .ask-plancard{border:1px solid var(--rule2);border-radius:11px; background:var(--card);overflow:hidden} .ask-prow{display:flex;gap:10px;padding:9px 12px;align-items:flex-start; border-bottom:1px solid var(--rule)} .ask-prow:last-child{border-bottom:0} .ask-prow.bad{opacity:.62} .ask-pverb{flex:none;font:700 10.5px/1 var(--mono);letter-spacing:.1em; padding:5px 8px;border-radius:6px;text-transform:uppercase;margin-top:1px} .ask-pverb.good{background:var(--goodSoft);color:var(--goodInk)} .ask-pverb.sea{background:var(--seaSoft);color:var(--accent)} .ask-pverb.sand{background:var(--sandSoft);color:var(--sandInk)} .ask-pverb.coral{background:var(--coralSoft);color:var(--coralInk)} .ask-pbody{min-width:0} .ask-pbody b{font:600 14px var(--font);color:var(--head)} .ask-pmeta{font:12.5px/1.5 var(--mono);color:var(--dim);overflow-wrap:anywhere} .ask-pmeta.warn{color:var(--sandInk)} .ask-pfootrow{display:flex;gap:8px;align-items:center;padding:9px 12px; background:var(--tint);border-top:1px solid var(--line)} .ask-cost{margin-left:auto;font:11.5px var(--mono);color:var(--dim)} .ask-stepline{font:12.5px/1.6 var(--mono);color:var(--dim);display:flex; gap:7px;align-items:center;flex-wrap:wrap} .ask-stepline .okv{color:var(--goodInk)} .ask-stepline a{color:var(--accent)} /* the live working ticker */ .ask-work{border:1px solid var(--line);border-radius:11px;background:var(--tint); padding:11px 14px;align-self:flex-start} .ask-working{display:flex;align-items:center;gap:9px;color:var(--dim); font:13.5px var(--font)} .ask-elapsed{font:11.5px var(--mono)} .ask-dots i{display:inline-block;width:5px;height:5px;border-radius:50%; background:var(--accent);margin-right:3px;animation:askb 1.2s infinite} .ask-dots i:nth-child(2){animation-delay:.15s} .ask-dots i:nth-child(3){animation-delay:.3s} @keyframes askb{0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1}} @media (prefers-reduced-motion:reduce){.ask-dots i{animation:none}} /* the honest error card */ .ask-errcard{border:1px solid var(--coralSoft);background:var(--coralSoft); border-radius:11px;padding:10px 13px;font:13.5px/1.5 var(--font); color:var(--coralInk);display:flex;flex-direction:column;gap:6px} .ask-errcard b{font-weight:700} .ask-errcard .btn{align-self:flex-start} /* footer: chips + input */ .ask-pfoot{flex:none;padding:10px 12px 12px;border-top:1px solid var(--line); background:var(--tint)} .ask-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px; scrollbar-width:none} /* chips are one-line pills that scroll sideways — wrapped they turn into tall blobs that bury the input (seen live, 2026-08-05) */ .ask-chips .ask-chip{flex:none;white-space:nowrap} .ask-chips::-webkit-scrollbar{display:none} .ask-msge .ask-chips{padding-bottom:0;flex-wrap:wrap;overflow:visible} .ask-inputrow{display:flex;gap:8px;align-items:flex-end;background:var(--card); border:1.5px solid var(--accent);border-radius:12px;padding:8px 10px} .ask-input{flex:1;border:0;background:transparent;resize:none; font:14.5px/1.5 var(--font);color:var(--ink);max-height:120px;outline:none} .ask-send{width:30px;height:30px;flex:none;border:0;border-radius:9px; background:var(--accent);color:#fff;font-size:15px;cursor:pointer; display:grid;place-items:center} .ask-send:disabled{opacity:.5} /* recents view */ .ask-recents-view{flex:1;overflow-y:auto;display:flex;flex-direction:column} .ask-recsearch{margin:12px 14px 4px;border:1px solid var(--rule2); border-radius:10px;background:var(--card);padding:8px 12px; font:13.5px var(--font);color:var(--ink)} .ask-reclist{flex:1;padding:4px 8px 14px} .ask-recgrp{font:700 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--dim); text-transform:uppercase;padding:12px 10px 6px} .ask-recrow{display:flex;gap:9px;align-items:center;padding:8px 10px; border-radius:9px;cursor:pointer} .ask-recrow:hover,.ask-recrow:focus-visible{background:var(--card)} .ask-recst{flex:none;width:18px;text-align:center;font-size:12px} .ask-rectitle{font:13.5px var(--font);color:var(--ink);flex:1;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .ask-recout{flex:none;font:11px var(--mono);color:var(--dim);max-width:110px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ask-redo{flex:none;border:0;background:transparent;color:var(--accent); font-size:13px;cursor:pointer;opacity:0;padding:2px 4px} .ask-recrow:hover .ask-redo,.ask-redo:focus-visible{opacity:1} @media (max-width:640px){ .ask-panel{width:100vw;border-left:0} .ask-panel.deck{top:0;bottom:0;width:100vw;border-radius:0;border:0} } /* Ask Empire — starter chips and the always-there button */ .ask-chip{border:1px solid var(--line);background:var(--card);border-radius:999px; padding:6px 11px;font:12.5px/1.3 var(--font);color:var(--ink);cursor:pointer; text-align:left} .ask-chip:hover{border-color:var(--accent);background:var(--hover)} .ask-fab{position:fixed;right:22px;bottom:22px;z-index:120;display:flex; align-items:center;gap:7px;padding:11px 16px;border-radius:999px; border:1px solid var(--glass-brd);background:var(--accent);color:#fff; font:600 13.5px/1 var(--font);cursor:pointer;box-shadow:var(--glass-shadow)} .ask-fab:hover{filter:brightness(1.07)} body.ask-open .ask-fab{display:none!important} .ask-fab .ask-spark{color:#fff} @media (max-width:640px){.ask-fab{right:14px;bottom:14px;padding:10px 13px}} /* Record detail — the slide-over drawer and the full page. One field grid serves both; the drawer floats over whatever list opened it. */ #drawer-host .drawer-overlay{position:fixed;inset:0;z-index:200; background:rgba(15,43,48,.25);backdrop-filter:blur(2px)} #drawer-host .drawer{position:fixed;top:0;right:0;bottom:0;z-index:201; width:min(560px,94vw);overflow-y:auto;padding:24px 26px 28px; background:var(--glass-bg);border-left:1px solid var(--glass-brd); box-shadow:var(--glass-shadow); backdrop-filter:blur(20px) saturate(1.1); -webkit-backdrop-filter:blur(20px) saturate(1.1); animation:drawer-in .18s ease-out} @keyframes drawer-in{from{transform:translateX(24px);opacity:0} to{transform:translateX(0);opacity:1}} @media (prefers-reduced-motion: reduce){ #drawer-host .drawer{animation:none}} .dhead{display:flex;align-items:flex-start;justify-content:space-between; gap:12px;margin-bottom:18px} .dhead h3{margin:0;font:500 21px/1.25 var(--serif);color:var(--head); overflow-wrap:anywhere} .dsub{color:var(--dim);font-size:12.5px;margin-top:3px} .dhead-btns{display:flex;gap:6px;flex:none} .dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:13px 16px} .dfield label{display:block;font:600 10.5px/1 var(--font);letter-spacing:.06em; text-transform:uppercase;color:var(--dim);margin-bottom:5px} .dfield.wide{grid-column:1/-1} /* Fields must LOOK like fields — borderless inputs on a pale ground read as dead space, and an empty Owner box was invisible entirely ("UI of task is awful", 2026-08-06). */ .dfield .cell{width:100%;margin:0;background:var(--card2); border:1px solid var(--rule2);border-radius:8px;padding:8px 10px; min-height:36px;font-size:14px;color:var(--ink)} .dfield .cell:focus{border-color:var(--accent);outline:none} .dfield select.cell{appearance:auto} .dfield textarea.cell{resize:vertical;min-height:60px;font:inherit;font-size:14px} .dhint{color:var(--dim);font-size:11.5px;margin-top:4px} .dactions{display:flex;gap:8px;margin:22px 0 18px;padding-top:16px; border-top:1px solid var(--rule);flex-wrap:wrap} .dactions .dngr{color:var(--coralInk)} .dcrumb{margin-bottom:10px} .dcrumb a{color:var(--accent);text-decoration:none;font:600 13px var(--font)} .dcrumb a:hover{text-decoration:underline} .dpage{padding:22px 24px} .dpage .dgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} /* Activity — the spinner on a running job */ .spin{display:inline-block;animation:spin 1.6s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){.spin{animation:none;opacity:.7}} /* ---------------- console density (v21) ---------------- The page heading lives in the sticky topbar now. The screen's own

stays in the DOM for screen readers and for tests that read it, but is not painted twice — a duplicated title at the top of every screen was the first thing that read as clutter. Detail pages (a record, a project, a venture) keep theirs visible: those titles are the ROW's name, not the section's. */ .main .mhd h2{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .main .mhd h2.show{ position:static;width:auto;height:auto;margin:0;overflow:visible; clip:auto;clip-path:none;white-space:normal; } .mhd{align-items:flex-start;margin-bottom:14px} .mhd .sub{margin-top:0} /* Row actions: icons, revealed on hover or keyboard focus. Four text buttons per row were consuming the width the data needed. */ td.rowact{opacity:0;transition:opacity .12s} tr:hover td.rowact,tr:focus-within td.rowact{opacity:1} @media (hover:none){td.rowact{opacity:1}} /* touch has no hover to reveal it */ .ico{width:26px;height:26px;border-radius:7px;border:1px solid var(--line); background:var(--pap);color:var(--dim);cursor:pointer;font-size:12px;line-height:1; padding:0;margin-left:4px;vertical-align:middle} .ico:hover{color:var(--accent);border-color:var(--accent);background:var(--card)} .ico.dngr:hover{color:var(--coralInk);border-color:var(--coral)} .btn.xs{font-size:11px;padding:5px 9px;border-radius:8px} /* Severity stripe — the console's at-a-glance state, on any row that wants it */ td.stripe{width:3px;padding:0} td.stripe i{display:block;width:3px;min-height:28px;height:100%;border-radius:0 2px 2px 0} /* An carries an intrinsic width from its `size` attribute, so every inline-edit column claimed the same share and the NAME column — the one that actually needs room — truncated while empty columns sat wide. Zeroing the intrinsic width lets the table distribute by content again, and the first column is given the lion's share explicitly. */ .cell{min-width:0} th.primary,td.primary{width:26%} td.primary .cell{font-weight:600} /* On a narrow screen a PERCENTAGE of a narrow table is still nothing, so the name column gets a real minimum and the table scrolls sideways inside its own container instead (the page body never does). */ @media (max-width:900px){ th.primary,td.primary{width:auto;min-width:158px} } /* With the topbar carrying the title, the cover strip sits directly under it and must not leave a hole when there is no cover set. */ /* The empty-cover button used to sit above a big page heading; with the title now in the topbar it should tuck against the top-right of the content, not push everything down. Still visible, still real size, still clickable — the four things the v10.1 drill checks. */ /* The empty-cover strip keeps REAL height — a 0-height parent clips the button, which is exactly the v10.1 bug ("Add a cover" existed and could not be reached). It just sits tighter now that the title moved to the topbar. */ #cover-host .cover:not(.has){min-height:34px;margin:0 0 2px;overflow:visible; display:flex;justify-content:flex-end;align-items:flex-start} /* the version stamp lives in the topbar's second line */ .topbar .crumb .stamp{margin-top:3px;font:10.5px/1.4 var(--font);letter-spacing:.14em; text-transform:uppercase;color:var(--dim);opacity:1} .topbar .crumb .stamp em{font-style:normal;font-family:var(--mono); letter-spacing:0;color:var(--accent)} .side .collapse-btn{margin-top:2px} /* the quiet doorway from a fresh thread to everything before it */ .ask-olderlink{align-self:center;border:0;background:transparent;cursor:pointer; font:11.5px var(--mono);letter-spacing:.06em;color:var(--dim);padding:2px 8px; border-radius:7px} .ask-olderlink:hover{color:var(--accent);background:var(--card)} /* the topbar theme toggle */ .themebtn{width:32px;height:32px;flex:none;border:1px solid var(--rule2); border-radius:9px;background:var(--card);color:var(--dim);font-size:15px; cursor:pointer;display:grid;place-items:center;padding:0} .themebtn:hover{color:var(--accent);border-color:var(--accent)} /* the next-step strip — an offer, not furniture */ .nextsteps{display:flex;gap:7px;align-items:center;flex-wrap:wrap; border:1px solid var(--seaSoft);background:var(--seaSoft);border-radius:11px; padding:8px 12px;margin-bottom:12px;animation:nsin .22s ease-out} @keyframes nsin{from{opacity:0;transform:translateY(-4px)}to{opacity:1}} @media (prefers-reduced-motion:reduce){.nextsteps{animation:none}} .ns-lead{font:700 10.5px/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--accent)} .ns-chip{background:var(--card)} .ns-x{margin-left:auto;border:0;background:transparent;color:var(--dim); cursor:pointer;font-size:12px;padding:3px 6px;border-radius:6px} .ns-x:hover{background:var(--card);color:var(--ink)} .ask-scopechip{display:flex;align-items:center;gap:7px;font:12px var(--font); color:var(--dim);padding:0 2px 8px} .ask-scopechip .sq{width:10px;height:10px;border-radius:3px;flex:none} /* connections — green/red at a glance */ .connrow{display:flex;align-items:center;gap:11px;padding:9px 16px; border-bottom:1px solid var(--rule)} .connrow:last-child{border-bottom:0} .conndot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--coral)} .conndot.on{background:var(--good)} .connbody{flex:1;min-width:0} /* the behaviour statement that lives on the screen, permanently */ .contract{font:12.5px/1.5 var(--font);color:var(--dim);padding:8px 16px; border-bottom:1px solid var(--rule);background:var(--tint)} /* #3 sticky table headers — scroll 50 rows, keep the column names */ thead th{position:sticky;top:62px;z-index:4} @media (max-width:860px){thead th{top:0}} /* #2 row context menu */ .ctxmenu{position:fixed;z-index:400;min-width:170px;background:var(--pap); border:1px solid var(--rule2);border-radius:10px;padding:4px; box-shadow:0 18px 40px -18px rgba(15,43,48,.45)} .ctxmenu button{display:block;width:100%;text-align:left;border:0; background:none;padding:7px 11px;border-radius:7px;font:13.5px var(--font); color:var(--ink);cursor:pointer} .ctxmenu button:hover{background:var(--wash)} .ctxmenu button.dngr{color:var(--coralInk)} /* #13 link favicons */ .leadico{width:16px;height:16px;border-radius:4px;vertical-align:-3px; margin-right:2px;flex:none} /* the global ＋ New */ .newbtn{width:32px;height:32px;flex:none;border:0;border-radius:9px; background:var(--accent);color:#fff;font-size:17px;cursor:pointer; display:grid;place-items:center;padding:0} .newbtn:hover{filter:brightness(1.07)} /* #1 multi-select — the tick shares the drag cell so no column shifts; grip shows by default, swaps to the tick on hover or when selecting */ td.drag{white-space:nowrap} td.drag .rowsel{display:none;accent-color:var(--accent);cursor:pointer} td.drag .grip{color:var(--rule2)} tr:hover td.drag .grip, table.selecting td.drag .grip{display:none} tr:hover td.drag .rowsel, table.selecting td.drag .rowsel{display:inline-block} th .selall{accent-color:var(--accent);cursor:pointer} .bulkbar{display:flex;gap:8px;align-items:center;padding:8px 16px; background:var(--seaSoft);border-bottom:1px solid var(--line); font:13px var(--font);color:var(--ink)} .bulkbar .bulkmove{max-width:150px} /* drawer extras: attachments + history */ .dextras{padding:16px 18px 18px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:14px} .dblock h4{font:700 10.5px/1 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--dim);margin:0 0 8px} .attrow{display:flex;align-items:center;gap:8px;padding:5px 0; border-bottom:1px solid var(--rule)} .attrow a{color:var(--accent);overflow:hidden;text-overflow:ellipsis; white-space:nowrap;max-width:60%} .attrow .ico{margin-left:auto} .histrow{padding:3px 0;font-size:12.5px;overflow-wrap:anywhere} /* the one-click complete circle */ .donecircle{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--rule2); background:none;cursor:pointer;margin-right:7px;padding:0;font-size:11px; line-height:1;color:transparent;vertical-align:middle;flex:none} .donecircle:hover{border-color:var(--good);color:var(--good)} .donecircle.on{background:var(--good);border-color:var(--good);color:#fff} /* ============ the Living Board (v30) ============ */ .wb-bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap; padding:9px 0 11px} .wb-bar .tool{border:1px solid var(--rule2);background:var(--card); border-radius:8px;padding:6px 11px;font:600 12.5px var(--font); color:var(--ink);cursor:pointer} .wb-bar .tool.on{background:var(--accent);border-color:var(--accent);color:#fff} .wb-sp{flex:1} .wb-zoom{font:11.5px var(--mono);color:var(--dim);min-width:38px; text-align:center} .wb-swatches{display:flex;gap:5px;margin-left:8px} .wb-swatch{width:18px;height:18px;border-radius:6px; border:1px solid var(--rule2);cursor:pointer;padding:0} .wb-canvas{position:relative;height:calc(100vh - 210px);min-height:420px; border:1px solid var(--rule2);border-radius:13px;overflow:hidden; outline:none;cursor:grab; background:radial-gradient(circle, var(--rule2) 1px, transparent 1px) 0 0/26px 26px, var(--pap)} .wb-canvas.arrowing{cursor:crosshair} .wb-layer{position:absolute;inset:0;transform-origin:0 0} .wb-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible; transform-origin:0 0;pointer-events:none} .wb-wires .wb-edge{stroke:var(--dim);stroke-width:1.8;fill:none;opacity:.6; pointer-events:stroke;cursor:pointer} .wb-wires .wb-edge.sel{stroke:var(--accent);opacity:1;stroke-width:2.4} .wb-item{position:absolute;cursor:grab;user-select:none} .wb-item.sel{outline:2px solid var(--accent);outline-offset:3px; border-radius:10px} .wb-item .wb-x{position:absolute;top:-9px;right:-9px;width:20px;height:20px; border-radius:50%;border:1px solid var(--rule2);background:var(--pap); color:var(--dim);font-size:10px;cursor:pointer;opacity:0;padding:0} .wb-item:hover .wb-x{opacity:1} .wb-text{outline:none;min-height:1em;white-space:pre-wrap; overflow-wrap:anywhere;cursor:text} .wb-sticky{width:180px;min-height:92px;border-radius:10px;padding:12px 13px; font:13.5px/1.45 var(--font);color:#1f2f33; box-shadow:0 10px 22px -12px rgba(20,50,60,.4)} .wb-sticky .wb-promote{position:absolute;bottom:6px;right:8px;border:0; background:none;color:rgba(31,47,51,.5);font:600 10.5px var(--mono); cursor:pointer;opacity:0;padding:2px 4px} .wb-sticky:hover .wb-promote{opacity:1} .wb-sticky.c-sand{background:#f2e3c4}.wb-sticky.c-sea{background:#cfe6ea} .wb-sticky.c-coral{background:#f0d4ca}.wb-sticky.c-good{background:#d5e9dd} .wb-sticky.c-plain{background:#fbfbf8} .wb-swatch.c-sand{background:#f2e3c4}.wb-swatch.c-sea{background:#cfe6ea} .wb-swatch.c-coral{background:#f0d4ca}.wb-swatch.c-good{background:#d5e9dd} .wb-swatch.c-plain{background:#fbfbf8} .wb-text-item,.wb-item.wb-text{width:auto} .wb-item.wb-text .wb-text{font:600 16px/1.4 var(--serif);color:var(--head); min-width:80px} .wb-frame{border:1.5px dashed var(--rule2);border-radius:14px; min-width:160px;min-height:120px} .wb-frame .wb-framelabel{position:absolute;top:6px;left:12px; font:700 10.5px var(--mono);letter-spacing:.14em;color:var(--dim); text-transform:uppercase} .wb-frame .wb-resize{position:absolute;right:2px;bottom:2px;width:14px; height:14px;cursor:nwse-resize;border-right:2px solid var(--rule2); border-bottom:2px solid var(--rule2);border-radius:0 0 4px 0} .wb-card{background:var(--card2);border:1px solid var(--rule2); border-radius:10px;padding:10px 12px;width:200px; box-shadow:0 8px 18px -12px rgba(20,50,60,.35)} .wb-cardkind{font:700 9.5px/1 var(--mono);letter-spacing:.1em; color:var(--accent);text-transform:uppercase;margin-bottom:5px} .wb-cardtitle{display:block;font:600 13.5px/1.4 var(--font);color:var(--head); cursor:pointer;overflow-wrap:anywhere} .wb-cardtitle:hover{color:var(--accent)} .wb-cardstate{display:block;font:11px var(--mono);color:var(--dim); margin-top:4px} .wb-card .donecircle{position:absolute;top:9px;right:9px;margin:0} .wb-dead{font:12px var(--font);color:var(--coralInk)} .wb-empty{position:absolute;left:40px;top:32px;max-width:420px; font:13.5px/1.6 var(--font);color:var(--dim);pointer-events:none} :root[data-theme="dark"] .wb-sticky{color:#1f2f33}