/* Soft Structuralism: silver ground, white cores floating on diffused ambient shadow, one bold grotesk. Seat colours and the urgent red are the only saturated hues - they carry meaning. */ :root{--fg:17,17,16;--sh:17,17,16;--hlk:1;--topbg:rgba(255,255,255,.86); --lt-rgb:11,79,216;--ok:#1d6e52;--ok-rgb:29,110,82;--new:#1f5fd6;--newhover:#1a4fb8;--onink:#fff; --ink2:#3d3d38;--ink3:#55554f;--closed:#a3a39c;--dot:#c9c9c3;--well:#fbfbfa;--old-bg:#f3e4da;--inkhover:#000; --bg:#f3f3f1;--shell:rgba(var(--fg),.035);--ring:rgba(var(--fg),.06);--core:#fff; --ink:#111110;--mute:#6e6e68;--soft:#8a8a84;--line:rgba(var(--fg),.07); --lt:#0b4fd8; /* Seat tones: HSL triplets; an element carrying --tone renders in that seat's colour. The first four are cool, so a project of four never puts a seat colour near the warm urgency signals (--urg, --warn); orange arrives only at a fifth seat. Slots 0 and 1 stay blue and pink because those are the two seats everyone has been reading since the Drive page (LT and BF). The first five are hue-distinct and were checked rather than chosen: every pair clears the colour-blind separation floor and the normal-vision floor, and all five clear 3:1 against the page. Green is deliberately absent (Lorenzo, 2026-09-15), which is also what caps the set at five - with the green band out, the warm end only supports one hue before orange and ochre collapse into each other under deuteranopia. Slots 5 to 7 are for a sixth, seventh or eighth seat on one project, which no project has: they are lightness variants of blue, purple and orange and lean on darkness rather than hue. Seat names are always written out beside the colour, so colour is never the only thing carrying identity. */ --tone-0:222 85% 45%;--tone-1:330 85% 45%;--tone-2:190 95% 35%;--tone-3:280 50% 42%; --tone-4:25 85% 45%;--tone-5:222 45% 52%;--tone-6:280 40% 32%;--tone-7:20 50% 34%; --urg-bg:#fee4e2;--urg:#b42318;--warn:#8a4b2a; --r:1.75rem;--pad:.375rem;--ri:calc(var(--r) - var(--pad)); --ease:cubic-bezier(.32,.72,0,1); --amb:0 24px 60px -32px rgba(var(--sh),.22),0 2px 6px -2px rgba(var(--sh),.06)} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* Web Interface Guidelines pass, 2026-09-15: one keyboard focus ring for everything interactive (only keyboard focus, never a ring on click), no double-tap delay on touch, no grey tap flash. */ html{scroll-padding-top:120px} :focus-visible{outline:2px solid var(--lt);outline-offset:2px;border-radius:6px} .chip,.band .count,.rail-h .count,.tile .n,.top .new{white-space:nowrap} .thead:focus-visible{outline-offset:-2px} .error:focus,[role=alert]:focus{outline:none} a,button,[role=button],[tabindex]{touch-action:manipulation;-webkit-tap-highlight-color:transparent} h1,h2,h3,.ttitle{text-wrap:balance} .skip{position:absolute;left:16px;top:-48px;z-index:20;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--onink);font-weight:600;text-decoration:none} .skip:focus-visible{top:12px;outline-offset:3px} body{margin:0;background:var(--bg);color:var(--ink); font:15px/1.6 "Plus Jakarta Sans","Segoe UI Variable Text",system-ui,sans-serif; font-feature-settings:"ss01","cv11"} code,.mono{font-family:"JetBrains Mono","Cascadia Code",ui-monospace,monospace;font-size:.92em} a{color:inherit;text-decoration:none} /* Floating island header - detached, centred, never glued to the top edge. */ .island{margin:28px auto 0;width:max-content;max-width:calc(100% - 32px);display:flex; align-items:center;gap:14px;padding:10px 12px 10px 20px;border-radius:999px;background:var(--core); box-shadow:var(--amb),inset 0 1px 0 rgba(255,255,255,calc(.8 * var(--hlk)));border:1px solid var(--ring)} .island h1{margin:0;font-size:15px;font-weight:700;letter-spacing:-.015em;white-space:nowrap} .island h1 span{color:var(--soft);font-weight:500} .island .age{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px; background:var(--shell);font-size:12.5px;color:var(--mute);white-space:nowrap; font-variant-numeric:tabular-nums} .island .age b{color:var(--ink);font-weight:600} /* Two columns: the ledger and the activity rail. The rail is sticky on wide screens and drops below the ledger on narrow ones - it is a companion, never the thing being read. */ .wrap{max-width:1360px;margin:0 auto;padding:48px 24px 120px;display:grid; grid-template-columns:minmax(0,1fr) 312px;gap:36px;align-items:start} main{min-width:0} /* Ribbon: the three counts in one line, then the view switch. A count links to its band. */ .ribbon{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid var(--line)} .ribbon .rb{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:var(--core);box-shadow:0 0 0 1px var(--ring);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-decoration:none} .ribbon .rb .bi{width:20px;height:20px;margin:-3px 2px -3px -3px}.ribbon .rb .bi svg{width:13px;height:13px} .ribbon .rb b{font-size:15px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:2px} .ribbon .rb.urgent{color:var(--urg);background:var(--urg-bg);box-shadow:none}.ribbon .rb.urgent b{color:var(--urg)} .ribbon .rb.urgent.zero{color:var(--soft);background:var(--core);box-shadow:0 0 0 1px var(--ring)}.ribbon .rb.urgent.zero b{color:var(--soft)} .ribbon .rb.zero b{color:var(--soft)} .ribbon a.rb:hover{box-shadow:0 0 0 1px rgba(var(--fg),.2);color:var(--ink)} .ribbon .viewbar{margin:0 0 0 auto} .ribbon + .band,.say.inmain + .band,.notice + .band{margin-top:6px} /* Bento summary (admin page). */ /* Sticky: the counts stay in view however far down the ledger the reader is. The strip paints the page ground behind itself so cards sliding underneath do not show through the gaps. */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin:0 0 40px} .tile{grid-column:span 3;display:block;border-radius:1.25rem;padding:var(--pad); background:var(--shell);box-shadow:0 0 0 1px var(--ring); transition:transform .7s var(--ease),box-shadow .7s var(--ease)} .tile.urgent{grid-column:span 4} .tile{grid-column:span 4} .tile:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--ring),var(--amb)} .tile>div{border-radius:calc(1.25rem - var(--pad));background:var(--core);padding:12px 18px; height:100%;box-shadow:inset 0 1px 1px rgba(255,255,255,calc(.9 * var(--hlk))),0 1px 2px -1px rgba(var(--sh),.06); display:flex;flex-direction:row;align-items:center;gap:16px;min-height:64px} .tile .n{margin-left:auto} .tile .hint{display:none} .tile.urgent .hint{display:block;margin-left:4px} .eyebrow{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:5px 11px; border-radius:999px;background:var(--shell);font-size:10px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--mute)} .eyebrow.urgent{background:var(--urg-bg);color:var(--urg)} /* Band marks: a white mark on a filled disc, so it reads at a glance instead of vanishing into the pill. Red for urgent, ink for open, the mute grey for closed. */ .bi{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;flex:none;margin:-2px 0 -2px -4px} .bi svg{width:12px;height:12px} .bi.urgent{background:var(--urg)}.bi.open{background:var(--ink)}.bi.closed{background:var(--mute)} .bi.go{background:var(--lt)} /* an action, not a state: the link blue, never a band colour */ .eyebrow.closed .bi.closed{background:var(--closed)} .tile .n{font-size:30px;line-height:1;font-weight:700;letter-spacing:-.04em; font-variant-numeric:tabular-nums;white-space:nowrap} .tile.urgent .n{font-size:36px} .tile .n small{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--soft);margin-left:7px} .tile .hint{font-size:12.5px;color:var(--mute);margin:0;max-width:34ch;line-height:1.35} /* Bands. The eyebrow IS the heading, so it reads as one: ink on the shell, the count in ink beside it, a hairline under the row. The hint stays quiet but legible (mute, not soft: soft on the page ground fell under the 4.5:1 floor at this size - "unreadable", 2026-09-15). */ .band{display:flex;align-items:center;gap:14px;margin:64px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line)} .band:first-of-type{margin-top:0} .band .eyebrow{font-size:11px;color:var(--ink);background:rgba(var(--fg),.06)} .band.closed .eyebrow{color:var(--mute)} .band .count{font-size:14px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .band .count a{color:var(--ink);text-decoration:none;font-weight:500} .band .count.ttl{white-space:normal;min-width:0;font-weight:500;color:var(--mute);overflow-wrap:anywhere} .band .count a:hover{text-decoration:underline} .band .hint{font-size:13px;color:var(--mute);margin-left:auto;text-align:right;max-width:52ch} .band .btn.small{padding:4px 11px 4px 12px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--core); box-shadow:0 0 0 1px var(--ring),0 1px 2px rgba(var(--sh),.06);gap:5px} .band .btn.small:hover{background:var(--core);box-shadow:0 0 0 1px rgba(var(--fg),.18),0 1px 2px rgba(var(--sh),.06)} .band .btn.small svg{transition:transform .2s ease} .band .btn.small.open svg{transform:rotate(180deg)} .none{color:var(--mute);font-size:13.5px;padding:4px 0 0 2px} /* Double bezel: a shell tray with a hairline ring, and a white core with a concentric radius and its own inner highlight. Cards never sit flat on the ground. */ .thread{border-radius:var(--r);padding:var(--pad);background:var(--shell); box-shadow:0 0 0 1px var(--ring);margin:0 0 20px; transition:transform .8s var(--ease),box-shadow .8s var(--ease),opacity .9s var(--ease)} .thread:hover{box-shadow:0 0 0 1px var(--ring),var(--amb)} .core{border-radius:var(--ri);background:var(--core); box-shadow:inset 0 1px 1px rgba(255,255,255,calc(.9 * var(--hlk))),0 1px 2px -1px rgba(var(--sh),.06);overflow:hidden} .thead{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;padding:24px 26px 22px;border-radius:inherit; cursor:pointer} /* Text in the header stays selectable (the whole card used to be user-select:none, which made copying a thread name impossible - 2026-09-11). Only the disclosure island is unselectable. */ .disc{user-select:none} .ttitle{font-weight:700;font-size:17px;letter-spacing:-.02em;margin:0 0 10px;line-height:1.3; user-select:text;cursor:text;overflow-wrap:anywhere} /* The slug chip copies the thread's registry key - what `agent_comms.py --thread` takes - on click, and says so for a moment. Clicking it never toggles the card. */ .slug{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px; background:var(--shell);font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink2);cursor:copy;user-select:text;transition:background .5s var(--ease),transform .5s var(--ease)} .slug:hover{background:rgba(var(--fg),.09)} .slug:active{transform:scale(.97)} .slug.copied{background:rgba(var(--ok-rgb),.16);color:var(--ok)} .slug .ico{opacity:.55;font-size:11px} .slug.reply{font-family:inherit;font-weight:600} /* Entry permalink: the "Entry N" label is the copy target; the icon only shows on hover. */ .elink{cursor:copy;border-radius:6px;padding:1px 4px;margin-left:-4px} .elink:hover{background:rgba(var(--fg),.07)} .elink.copied{background:rgba(var(--ok-rgb),.16);color:var(--ok)} .entry:target{box-shadow:inset 3px 0 0 var(--accent,var(--ok));padding-left:12px;margin-left:-12px} /* Unread: set by the reader's own clicks (localStorage), never by the page loading. A thread with entries newer than the reader last opened it carries a NEW chip and a blue left edge; the island in the header carries the total. Loud on purpose - "make it obvious". */ .chip.new{background:var(--new);color:var(--onink);font-weight:700;letter-spacing:.02em} .thread.unread>.core{box-shadow:inset 4px 0 0 var(--new),inset 0 1px 1px rgba(255,255,255,calc(.9 * var(--hlk))), 0 1px 2px -1px rgba(var(--sh),.06)} .island .new{display:none;align-items:center;gap:6px;padding:6px 12px;border-radius:999px; background:var(--new);color:var(--onink);font-weight:700;font-size:13px;margin-left:8px} .island .new.show{display:inline-flex} /* The `?seat=` view: threads awaiting that seat are lifted into their own band at the top. */ .band.mine .eyebrow{background:var(--new);color:var(--onink)} .seatbar{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--mute);margin:0 0 18px} .seatbar a{color:inherit} .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--mute)} .chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px; background:var(--shell);font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums; transition:transform .5s var(--ease)} .chip.baton{font-weight:600} .chip.seat{background:hsl(var(--tone) / .14);color:hsl(var(--tone));font-weight:700} .chip.stale{outline:2px solid var(--warn);outline-offset:1px} .chip.time svg{flex:none;opacity:.7} .chip.time.stale{color:var(--warn);font-weight:600} .chip.old{background:var(--old-bg);color:var(--warn);font-weight:600} .chip.closed{color:var(--soft)} .chip.idle{color:var(--soft);font-style:italic} .chip.kind{color:var(--ink);background:rgba(var(--fg),.08);font-weight:600} .chip.prio.urgent{background:var(--urg-bg);color:var(--urg);font-weight:700} .status{margin:12px 0 0;font-size:13.5px;color:var(--ink2);max-width:78ch} /* The ask is the one line on the card that demands an action, so it gets its own block, filled in the colour of the seat it is waiting on - the same blue or pink as the baton pill, so "whose move" and "what is asked" read as one thing. Grey when nobody holds it. */ .ask{margin:14px 0 0;padding:11px 14px 12px;border-radius:14px;background:rgba(var(--fg),.055); font-size:13.5px;color:var(--ink);max-width:78ch; display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:baseline} .ask .lbl{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--mute);padding-top:1px} .ask.seat{background:hsl(var(--tone) / .14)}.ask.seat .lbl{color:hsl(var(--tone))} .thread.is-closed .ask{background:var(--shell);color:var(--mute)} .thread.is-closed .ask .lbl{color:var(--soft)} /* Island chevron - the disclosure control lives in its own circle, flush with the header's right padding, and reads as pressable. */ .disc{width:36px;height:36px;border-radius:999px;background:var(--shell);display:flex; align-items:center;justify-content:center;flex:none;margin-top:2px; transition:transform .7s var(--ease),background .5s var(--ease)} .disc svg{transition:transform .7s var(--ease)} .thead:hover .disc{background:rgba(var(--fg),.07);transform:translate(1px,-1px) scale(1.06)} .thead:active .disc{transform:scale(.96)} .thread.open .disc svg{transform:rotate(180deg)} .entries{display:none;padding:6px 26px 22px;border-top:1px solid var(--line);background:var(--well)} .thread.open .entries{display:block} .entry{padding:18px 0;border-bottom:1px solid var(--line); opacity:0;transform:translateY(10px);animation:rise .8s var(--ease) forwards} .entry:nth-child(2){animation-delay:.06s}.entry:nth-child(3){animation-delay:.12s} .entry:nth-child(4){animation-delay:.18s}.entry:nth-child(n+5){animation-delay:.24s} .entry:last-child{border-bottom:0} /* who wrote it, in their seat colour: a dot and the seat name, so a long thread reads as an alternation between two people rather than one wall. The entry already carries --tone. */ .entry .eby{display:inline-flex;align-items:center;gap:5px;color:hsl(var(--tone));font-weight:700} .entry .edot{width:6px;height:6px;border-radius:50%;background:hsl(var(--tone));flex:none} .eh{font-size:12px;color:var(--soft);margin:0 0 6px;letter-spacing:.02em; font-variant-numeric:tabular-nums} .es{font-weight:600;margin:0 0 8px;letter-spacing:-.01em} .eb{font-size:13.5px;color:var(--ink2);line-height:1.6;max-width:78ch} .eb p{margin:0 0 10px}.eb p:last-child{margin-bottom:0} .eb h4,.eb h5,.eb h6{margin:16px 0 6px;font-size:14px;letter-spacing:-.01em} .eb h4{font-size:15px} .eb ul,.eb ol{margin:0 0 10px;padding-left:22px}.eb li{margin:2px 0} .eb code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:rgba(var(--fg),.06);padding:1px 5px;border-radius:5px} .eb pre{background:rgba(var(--fg),.05);padding:10px 12px;border-radius:10px;overflow-x:auto;margin:0 0 10px} .eb pre code{background:none;padding:0} .eb blockquote{margin:0 0 10px;padding:6px 12px;border-left:3px solid var(--line);color:var(--ink3)} .eb .tbl{overflow-x:auto;margin:0 0 12px} .eb table{border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;min-width:50%} .eb th,.eb td{padding:5px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .eb th{font-weight:600;color:var(--ink3);font-size:12px;letter-spacing:.02em} .eb a{color:var(--new)} /* Anchored scrolls land below the sticky summary row, not under it. */ .thread,.entry{scroll-margin-top:120px} .thread.is-closed{opacity:.72}.thread.is-closed:hover{opacity:1} .empty{color:var(--soft);padding:40px 0;text-align:center} footer{max-width:1360px;margin:0 auto;padding:0 24px 80px;color:var(--soft);font-size:12.5px} /* Back to top. Fixed in the gutter to the LEFT of the canvas on wide screens, tucked to the edge on narrow ones; hidden until the reader has actually scrolled. Same island as the disclosure chevron, pointing up. */ .totop{position:fixed;bottom:32px;left:max(16px,calc((100vw - 1360px) / 2 - 64px)); width:44px;height:44px;border-radius:999px;border:1px solid var(--ring);background:var(--core); box-shadow:var(--amb),inset 0 1px 0 rgba(255,255,255,calc(.8 * var(--hlk)));display:flex;align-items:center; justify-content:center;cursor:pointer;padding:0;color:var(--ink);z-index:6; opacity:0;transform:translateY(12px) scale(.94);pointer-events:none; transition:opacity .6s var(--ease),transform .6s var(--ease),background .4s var(--ease)} .totop.show{opacity:1;transform:none;pointer-events:auto} .totop svg{transform:rotate(180deg);transition:transform .5s var(--ease)} .totop:hover{background:var(--well)} .totop:hover svg{transform:rotate(180deg) translateY(2px)} .totop:active{transform:scale(.96)} .totop:focus-visible{outline:2px solid var(--lt);outline-offset:3px} /* Activity rail. Same bezel as a card; sticky so the feed stays beside whatever is being read. The list is a timeline: a hairline down the left, a dot per event in the person's seat colour, newest at the top. */ .rail{position:sticky;top:78px;max-height:calc(100vh - 98px);display:flex;flex-direction:column; border-radius:var(--r);padding:var(--pad);background:var(--shell);box-shadow:0 0 0 1px var(--ring)} .rail-h{display:flex;align-items:center;gap:10px;padding:18px 20px 12px} .rail-h .count{font-size:12.5px;color:var(--soft);font-variant-numeric:tabular-nums} .feed{list-style:none;margin:0;padding:6px 14px 16px 20px;overflow:auto;position:relative; border-radius:0 0 var(--ri) var(--ri);background:var(--core); box-shadow:inset 0 1px 1px rgba(255,255,255,calc(.9 * var(--hlk)));scrollbar-width:thin} .rail-h{border-radius:var(--ri) var(--ri) 0 0;background:var(--core)} .feed::before{content:"";position:absolute;left:29px;top:14px;bottom:14px;width:1px; background:var(--line)} .feed .day{position:relative;z-index:1;font-size:10px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--soft);padding:12px 0 8px 22px;background:var(--core)} .feed .day:first-child{padding-top:4px} .ev{position:relative;display:grid;grid-template-columns:18px 1fr;gap:6px;align-items:start; padding:7px 6px 7px 0;border-radius:12px;cursor:pointer; transition:background .5s var(--ease),transform .5s var(--ease)} .ev:hover{background:var(--shell);transform:translateX(2px)} .ev .dot{width:9px;height:9px;border-radius:999px;margin:6px 0 0 5px;background:var(--dot); box-shadow:0 0 0 3px var(--core)} .ev.toned .dot{background:hsl(var(--tone))} .ev .et{margin:0;font-size:13px;line-height:1.4;color:var(--ink)} .ev .et b{font-weight:700} .ev .on{display:block;font-size:12px;color:var(--mute);font-family:"JetBrains Mono","Cascadia Code", ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px} .ev .ew{margin:4px 0 0;font-size:11.5px;color:var(--soft);display:flex;align-items:center;gap:4px} .ev .ew .chip{padding:2px 8px;font-size:11px} .ev .also{margin:3px 0 0;font-size:11.5px;color:var(--soft);font-style:italic} /* No scroll-reveal on cards. Every thread is visible the moment the page opens, whatever the viewport - a card hidden for style is a card a reader can miss. The only entry motion left is the stagger inside a thread when it is expanded, which the reader has just asked for. */ @keyframes rise{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms!important;animation-duration:.01ms!important} .entry{opacity:1;transform:none}} @media (max-width:1099px){ .wrap{grid-template-columns:1fr} .rail{position:static;max-height:none} .feed{max-height:520px}} @media (max-width:767px){ .wrap{padding:28px 16px 80px;gap:28px} .island{margin-top:16px;padding:8px 10px 8px 16px;gap:10px} .island h1 span{display:none} .bento{grid-template-columns:1fr;gap:10px;margin-bottom:40px} .tile,.tile.urgent{grid-column:span 1} .tile.urgent .hint{display:none} .band{margin-top:44px;flex-wrap:wrap} .band .hint{margin-left:0;text-align:left;width:100%} .thead{padding:20px 18px 18px;gap:12px} .entries{padding:6px 18px 18px}} .eh .at{color:var(--mute);font-weight:600} /* ══ Additions for the hosted bridge (everything above is the Drive page's own stylesheet) ══ */ .island .live{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--shell);font-size:12.5px;color:var(--soft)} .island .live::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--dot)} .island .live.on{color:var(--ok)}.island .live.on::before{background:var(--ok)} .island .who{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);font-family:"JetBrains Mono","Cascadia Code",ui-monospace,monospace} .island .who a,.island .who button{font:inherit;color:var(--mute);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .island .who a:hover,.island .who button:hover{color:var(--ink)} .island h1 a{color:inherit;text-decoration:none} /* the thead's "open on its own page" link, intentional, beside the chevron */ .goto{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:var(--shell);color:var(--mute);text-decoration:none;margin-right:8px} .goto:hover{background:rgba(var(--fg),.07);color:var(--ink)} .thead .right{display:flex;align-items:center} /* copy chips: whole sentences for the person's Claude (the .slug style, sentence-length) */ .say{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0} .say .lbl{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-right:2px} .say .slug{font-family:inherit;font-weight:500;max-width:100%} .say .slug .txt{white-space:normal} /* entries inside an open card: markdown bodies */ .eb table{border-collapse:collapse;margin:8px 0;font-size:13px}.eb th,.eb td{border:1px solid var(--line);padding:4px 8px;text-align:left} .eb pre{background:var(--shell);padding:10px 12px;border-radius:10px;overflow-x:auto;font-size:12.5px} .eb code{font-family:"JetBrains Mono","Cascadia Code",ui-monospace,monospace;font-size:12.5px} .eb blockquote{margin:8px 0;padding-left:12px;border-left:3px solid var(--line);color:var(--mute)} .eb ul,.eb ol{padding-left:22px}.eb li.done{color:var(--soft)} .eb .cb{margin-right:4px} .entry .eneed{margin:10px 0 0;font-size:13px;color:var(--mute)} .entry .eneed b{color:var(--ink);font-weight:600} /* follow-ups and seats on a thread's own page */ .side{display:grid;gap:14px} .panel{border-radius:var(--r);padding:var(--pad);background:var(--shell)} .panel>div{border-radius:var(--ri);background:var(--core);padding:18px 22px} .panel h3{margin:0 0 10px;font-size:13px;letter-spacing:-.01em} .panel h3 .count{color:var(--soft);font-weight:500;margin-left:6px} .fu{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px} .fu li{display:flex;gap:8px;align-items:baseline}.fu li.done{color:var(--soft);text-decoration:line-through} .enotes{margin:6px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--mute)}.enotes li{padding:1px 0} .fu.asks li{flex-wrap:wrap;row-gap:2px}.fu.asks li.done{text-decoration:none} .fu.asks .sub{flex-basis:100%;font-size:12px;color:var(--mute)}.fu.asks .sub b{color:var(--ink);font-weight:600} .fu.asks li.open>span:not(.chip):not(.sub){font-weight:600}.fu.asks .reo{color:var(--urg)} .fu .cb{width:15px;height:15px;accent-color:var(--new);flex:none;transform:translateY(2px);cursor:pointer} /* Tickable follow-ups on the Tracker, and the add-an-item row under the project checklist. */ .fucheck{display:flex;gap:10px;align-items:baseline;cursor:pointer} .fucheck input{width:16px;height:16px;accent-color:var(--new);flex:none;transform:translateY(2px)} .additem{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0} .additem select,.additem input{height:34px;border-radius:10px;border:0;box-shadow:0 0 0 1px var(--ring);background:var(--core);font:inherit;font-size:13.5px;padding:0 10px} .additem input{flex:1 1 260px;min-width:0} .members{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:13.5px} .members li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center} .members .email{font-family:"JetBrains Mono","Cascadia Code",ui-monospace,monospace;font-size:12px;color:var(--soft);grid-column:1 / -1} .members .role{color:var(--mute);font-size:12px} .swatches{display:inline-flex;gap:4px;grid-column:1 / -1} .swatches .sw{width:14px;height:14px;border-radius:50%;border:2px solid transparent;background:hsl(var(--tone));cursor:pointer;padding:0;opacity:.55} .swatches .sw:hover{opacity:1}.swatches .sw.on{opacity:1;border-color:var(--ink)} /* forms (owner actions, sign-in, connect) */ form.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end} .field{display:grid;gap:5px;font-size:12.5px;color:var(--mute)} .field .hint{color:var(--soft);font-size:11.5px} .field input{font:inherit;font-size:14px;padding:9px 12px;border-radius:12px;border:1px solid rgba(var(--fg),.14);background:var(--core);color:var(--ink)} .field input:focus{outline:2px solid var(--lt);outline-offset:1px;border-color:transparent} .field select{font:inherit;font-size:14px;padding:9px 12px;border-radius:12px;border:1px solid rgba(var(--fg),.14);background:var(--core);color:var(--ink)} .field select:focus{outline:2px solid var(--lt);outline-offset:1px;border-color:transparent} /* Slack nudge settings in the seats sheet: a checkbox row, a select, one explanatory line. */ .nudges{display:grid;gap:12px;max-width:60ch} .nudges .check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;cursor:pointer} .nudges .check input{margin:3px 0 0;accent-color:var(--lt)} .nudges .hint{margin:0;font-size:12.5px;color:var(--soft)} .ic.slack{width:14px;height:14px;flex:none;vertical-align:-2px;margin-right:6px} .ic.clawd{width:15px;height:15px;flex:none;vertical-align:-3px;margin-right:7px} .prail .hl .ic.clawd,.say .lbl .ic.clawd{vertical-align:-4px} .btn .ic.slack{margin-right:0} .panel h3 .ic.slack,.eyebrow .ic.slack{width:13px;height:13px} /* The nudge toggle sits on a grey panel, where the default grey button fill vanishes: an outlined white pill when off, ink when on, so both states read as a button. */ .btn.nudge{background:var(--core);box-shadow:0 0 0 1px rgba(var(--fg),.22);color:var(--ink);text-align:left;line-height:1.3} .btn.nudge:hover{box-shadow:0 0 0 1px var(--ink)} .btn.nudge.on{background:var(--ink);color:var(--onink);box-shadow:none} .btn.nudge.on:hover{background:var(--inkhover)} .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;background:var(--shell);color:var(--ink);text-decoration:none} .btn:hover{background:rgba(var(--fg),.09)} .btn.primary{background:var(--ink);color:var(--onink)}.btn.primary:hover{background:var(--inkhover)} .btn.small{padding:6px 12px;font-size:12.5px} .btn.quiet{background:transparent;color:var(--mute);font-weight:500}.btn.quiet:hover{background:var(--shell)} .actions{display:flex;gap:10px;align-items:center} .error{margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--urg-bg);color:var(--urg);font-size:13.5px} .narrow{max-width:640px;margin:56px auto 0;padding:0 24px} .hidden{display:none !important} /* projects home: the your-move strip */ .moves{list-style:none;margin:0;padding:0;display:grid;gap:10px} .mv>a{display:grid;gap:8px;border-radius:1.25rem;padding:14px 18px;background:var(--core);box-shadow:0 0 0 1px var(--ring);color:inherit;transition:box-shadow .5s var(--ease),transform .5s var(--ease)} .mv>a:hover{box-shadow:0 0 0 1px var(--ring),var(--amb);transform:translateY(-1px)} .mv .mvh{display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* The chips (whose move, urgent, age, entry count) always sit on their own row under the title, so the turn badge is in the same place on every card instead of trailing a short title. */ .mv .mvc{flex-basis:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .mv .mvt{font-weight:700;letter-spacing:-.01em;font-size:15px;overflow-wrap:anywhere} .mv .chip.proj{background:hsl(var(--tone) / .14);color:hsl(var(--tone));font-weight:600} .mv .mvn{margin:0;font-size:13.5px;color:var(--ink2);display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:baseline;max-width:90ch} .mv .mvn .lbl{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding-top:1px;white-space:nowrap} .mv.parked .mvn .lbl{color:hsl(var(--tone))} /* the inbox view on home */ .inbox{display:grid;gap:14px} .inbox .band{margin:36px 0 4px} .inbox .band:first-child{margin-top:0} .inbox .band.mine .eyebrow{background:var(--urg-bg);color:var(--urg)} .inbox .band.waiting .eyebrow{background:rgba(var(--fg),.06);color:var(--ink)} .inbox .band.idle .eyebrow,.inbox .band.closed .eyebrow{color:var(--mute)} .inbox .moves.idle .mv>a{padding:12px 18px} .inbox .mv .say{margin:8px 0 0 18px} .inbox .mv .say .cc{font-size:12.5px} .moves[hidden]{display:none} @media (min-width:1200px){.wrap.home.has-prail{grid-template-columns:200px minmax(0,1fr) 312px}} @media (min-width:1100px) and (max-width:1199px){.wrap.home.inbox-wrap{grid-template-columns:minmax(0,1fr) 312px}} .prail button.pp{font:inherit;border:0;background:none;cursor:pointer;text-align:left;width:100%} .prail .pp .n{margin-left:auto;font-size:11.5px;color:var(--soft);font-variant-numeric:tabular-nums} .prail .pp .nn{margin-left:auto;font-size:10.5px;font-weight:700;line-height:1;padding:3px 6px;border-radius:999px;background:var(--new);color:var(--onink);font-variant-numeric:tabular-nums} .prail .pp .nn+.n{margin-left:0} .ev .et .onp{display:block;font-size:11.5px;color:var(--soft);margin-top:1px} .inbox .mv .chip.proj{background:var(--shell);color:var(--mute);font-weight:500} /* projects home: toolbar, cards, pin */ .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px} .toolbar[hidden]{display:none} #psearch,#dsearch{flex:1;min-width:220px;font:inherit;font-size:14px;padding:9px 16px;border-radius:999px;border:1px solid rgba(var(--fg),.14);background:var(--core);color:var(--ink)} #psearch:focus,#dsearch:focus{outline:2px solid var(--lt);outline-offset:1px;border-color:transparent} .toolbar .chips{display:flex;gap:6px;flex-wrap:wrap} .fchip{font:inherit;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;border:0;background:var(--shell);color:var(--mute);cursor:pointer} .fchip:hover{background:rgba(var(--fg),.09);color:var(--ink)} .fchip.on{background:var(--ink);color:var(--onink)} .fchip small{font-weight:500;opacity:.8;margin-left:3px} .pcard .ptop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .pcard .ptop .ttitle{min-width:0;overflow-wrap:anywhere} .pin{border:0;background:none;cursor:pointer;font-size:17px;line-height:1;color:rgba(var(--fg),.22);padding:2px 6px;border-radius:8px;flex:none} .pin:hover{color:var(--mute);background:var(--shell)} .pin.on{color:var(--ink)} .pcard.archived>div{opacity:.62}.pcard.archived:hover>div{opacity:1} .digest{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px;color:var(--mute);margin-top:2px} .digest .evi b{color:var(--ink);font-weight:600} .digest .mono{font-family:"JetBrains Mono","Cascadia Code",ui-monospace,monospace;font-size:12px} .digest .mini{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:auto} .digest .mini .chip{padding:2px 8px;font-size:11px} @media (max-width:767px){.digest .mini{margin-left:0}} /* owner tools on the Seats card, the Settings card, the archived notice */ .members .acts{grid-column:1 / -1;display:flex;gap:6px;flex-wrap:wrap;margin-top:2px} .btn.danger{color:var(--urg)}.btn.danger:hover{background:var(--urg-bg)} /* Thread tools (download, delete) in the foot row: outlined pills so they read as buttons on the card. */ .btn.tool{background:var(--core);box-shadow:0 0 0 1px rgba(var(--fg),.18);color:var(--mute);font-weight:500;gap:6px} .btn.tool:hover{color:var(--ink);box-shadow:0 0 0 1px var(--ink)} .btn.tool .ic{width:13px;height:13px;flex:none} .btn.tool.danger{color:var(--urg);box-shadow:0 0 0 1px rgba(200,40,40,.3)} .btn.tool.danger:hover{background:var(--urg-bg);box-shadow:0 0 0 1px var(--urg);color:var(--urg)} /* The bold verb that leads a command chip. */ .cc .verb{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--ink);margin-right:8px;white-space:nowrap} .cc.copied .verb{display:none} .notice{display:flex;gap:14px;align-items:center;padding:12px 16px;border-radius:14px;background:var(--core);box-shadow:0 0 0 1px var(--ring);margin:-20px 0 28px;font-size:13.5px;color:var(--mute)} .notice.archived .eyebrow{background:var(--shell);color:var(--ink)} .wrap.is-archived .thread:not(#settings):not(#seats){opacity:.72} /* The project rail: one small pill per project down the left of a project or thread page, so switching projects is one click. It takes a narrow first column only where there is room; below that width the page is the two columns it always was and the rail is not rendered. */ @media (min-width:1200px){ .wrap.has-prail{grid-template-columns:200px minmax(0,1fr) 312px;gap:28px} .wrap.has-prail .say.inmain{display:none} .prail{position:sticky;top:78px;display:flex;flex-direction:column;gap:4px;padding-top:4px} } @media (max-width:1199px){.prail{display:none}} .prail .hl{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);padding:0 10px 8px} .prail .pp{display:flex;align-items:center;gap:7px;min-width:0;padding:6px 10px;border-radius:999px;font-size:12.5px;color:var(--mute);text-decoration:none;transition:background .15s ease,color .15s ease} .prail .pp .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prail .pp:hover{background:var(--shell);color:var(--ink)} .prail .pp.on{background:var(--core);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--ring),inset 0 1px 0 rgba(255,255,255,calc(.9 * var(--hlk)))} .prail .pp .dot{width:6px;height:6px;border-radius:50%;background:var(--urg);flex:none} .prail .pp.all{margin-top:6px;color:var(--soft);font-size:12px} /* the roster in the rail: the seat name is the thing you copy, the person's name is the caption */ .prail .hl small{font-weight:600;letter-spacing:0;color:var(--soft)} .prail .rseats{list-style:none;margin:0;padding:0 2px;display:grid;gap:10px} .prail .rseats li{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;min-width:0} .prail .rseats li>div{display:grid;gap:2px;min-width:0} /* People's pictures: a picture when the bridge has one, initials otherwise. avs is the small in-line size beside a seat or an entry author. */ .avs{width:20px;height:20px;border-radius:50%;background:hsl(var(--tone) / .18);color:hsl(var(--tone));font-size:8.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:middle;letter-spacing:.02em} img.pic{object-fit:cover;background:var(--shell)} .entry .eby .avs{margin-right:1px} .members .role .avs{margin-right:6px} .prail .rseats .slug.rs{justify-self:start;max-width:100%;padding:3px 8px;font-size:11.5px; background:hsl(var(--tone) / .12);color:hsl(var(--tone));font-weight:700; font-family:"JetBrains Mono","Cascadia Code",ui-monospace,monospace} .prail .rseats .slug.rs:hover{background:hsl(var(--tone) / .2)} .prail .rseats .slug.rs .txt{overflow-wrap:anywhere} .prail .rseats .who{font-size:11.5px;color:var(--soft);padding-left:9px} /* The rail's actions. Flat grey text disappeared into a grey column, so these carry the bands' filled disc in the link blue and an ink label, separated from the list they act on by a rule. */ .prail .act{display:flex;align-items:center;gap:9px;width:100%;margin-top:14px;padding:9px 10px 0; border:0;border-top:1px solid var(--line);background:none;cursor:pointer;text-align:left; font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35; transition:color .15s ease} .prail .act .bi.go{margin:0;transition:transform .15s var(--ease)} .prail .act:hover{color:var(--lt)} .prail .act:hover .bi.go{transform:scale(1.08)} /* the ribbon keeps its own copies for the widths where the sidebar is not drawn */ @media (min-width:1200px){.ribbon .btn.norail{display:none}} .ribbon .btn .bi.go{margin:0 6px 0 -2px} .ribbon .btn b{margin-left:5px;font-variant-numeric:tabular-nums} /* a thread's Jira tickets: not ledger entries, so they sit beside the brief rather than in it */ .tickets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;font-size:13px} .tickets .lbl{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)} .chip.jira{background:rgba(var(--lt-rgb),.1);color:var(--lt);font-weight:700;text-decoration:none; font-family:"JetBrains Mono","Cascadia Code",ui-monospace,monospace;font-size:12px} .chip.jira:hover{background:rgba(var(--lt-rgb),.18)} .tickets .saidso{color:var(--mute);font-size:12.5px} .tickets.justnow .chip.jira{box-shadow:0 0 0 2px rgba(var(--lt-rgb),.3)} /* the Jira row inside a thread card: only while the card is open, since it is an action on what you are reading, not a property of the card in a list */ .thread:not(.open) .tacts{display:none} .tacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:0 26px 20px;font-size:13px} .tacts .sp{flex:1} .tacts .lbl,.tickets .lbl{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)} .tacts .saidso{color:var(--mute);font-size:12.5px;width:100%} .tacts.justnow .chip.jira{box-shadow:0 0 0 2px rgba(var(--lt-rgb),.3)} .chip.proposed{background:rgba(var(--lt-rgb),.1);color:var(--lt);font-weight:600} /* an agent'+chr(39)+'s escalation proposal, waiting for a person to release it */ .tacts.propose{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;padding:16px 18px;margin:0 26px 20px; border-radius:18px;background:var(--core);box-shadow:0 0 0 1px rgba(var(--lt-rgb),.22),0 0 0 4px rgba(var(--lt-rgb),.06)} .propose .pmark .bi.go{margin:2px 0 0} .propose .pbody{flex:1;min-width:220px;display:grid;gap:4px} .propose .ptitle{margin:0;font-size:14px;color:var(--ink)} .propose .pwhy{margin:0;font-size:13.5px;color:var(--mute)} .propose .meta{margin:2px 0 0;font-size:12px;color:var(--soft)} .propose .pnote{margin:4px 0 0;font-size:12.5px;color:var(--lt);font-weight:600} .propose .pacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap} @media (max-width:640px){.propose .pacts{width:100%}.propose .pacts .btn{flex:1}} /* the priority choice in the escalate dialog */ #escform{align-items:start} #escform .field:has(.picks),#escform .meta,#escform .actions{grid-column:1 / -1} .picks{display:grid;gap:8px;margin-top:6px} .pick{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px; background:var(--core);box-shadow:0 0 0 1px var(--ring);cursor:pointer} .pick:hover{box-shadow:0 0 0 1px rgba(var(--fg),.14)} .pick input{margin:2px 0 0;accent-color:var(--lt);flex:none} .pick span{display:grid;gap:1px;font-size:13px} .pick small{color:var(--soft);font-size:11.5px} .pick:has(input:checked){box-shadow:0 0 0 1px var(--lt),0 0 0 4px rgba(var(--lt-rgb),.1)} .sheet-b .notice{margin:0 0 18px} .sheet-b .meta code{font-size:11.5px;background:var(--shell);padding:1px 5px;border-radius:5px} /* admin dialog: everything that changes the project rather than reading it */ .sheet{border:0;padding:0;background:var(--core);color:var(--ink);border-radius:calc(var(--r) - .25rem); box-shadow:var(--amb);width:min(640px,calc(100vw - 32px));max-height:min(86vh,900px);overflow:auto} .sheet::backdrop{background:rgba(var(--sh),.34)} .sheet-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:20px 24px 14px;background:var(--core);border-bottom:1px solid var(--line)} .sheet-h h2{margin:0;font-size:17px;letter-spacing:-.01em} .sheet-h .btn{margin-left:auto} .sheet-b{padding:22px 24px 26px} /* the seat pill sizes to the name here, rather than stretching the row as it did full-width */ .sheet-b .members li{grid-template-columns:auto 1fr;gap:6px 12px} .sheet-b .members .role{justify-self:end;text-align:right} .sheet-s{display:flex;align-items:baseline;gap:10px;margin:30px 0 14px; padding-top:20px;border-top:1px solid var(--line)} .sheet-s .count{font-size:12px;color:var(--soft)} @media (max-width:640px){ .sheet{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0} .sheet-b{padding:18px 16px 28px} /* the explainer chip drops so the title and Close stay on one row */ .sheet-h{padding:16px 16px 12px;flex-wrap:nowrap} .sheet-h .chip{display:none} } .prail .cc.short{width:100%;justify-content:flex-start;margin:0 0 6px;padding:8px 12px;font-size:12.5px} .prail .cc.short .txt{white-space:normal} .chip.tag{color:var(--mute);font-weight:500} /* nav links in the top bar, the directory and the admin page */ .top .links{display:flex;gap:4px;margin-right:4px} .top .links a{font-size:13px;color:var(--mute);padding:5px 10px;border-radius:999px} .top .links a:hover{color:var(--ink);background:var(--shell)} .pcard.dir .ttitle a{color:inherit} .admin .bento.stats{position:static;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:none;padding:0;margin:0 0 20px} .admin .bento.stats::after{display:none} .admin .tile{grid-column:auto} .admin .tile>div{flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:14px 16px} .admin .tile .n{margin-left:0;font-size:26px} .admin .tile .n small{display:block;margin:4px 0 0;font-size:11.5px} .charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} @media (max-width:900px){.charts{grid-template-columns:1fr}} .chart{margin-top:10px} .bars{display:flex;align-items:flex-end;gap:2px;height:110px;padding:0 2px;border-bottom:1px solid var(--line)} .bar{flex:1;min-width:0;background:var(--lt);border-radius:4px 4px 0 0;opacity:.85;transition:opacity .2s} .bar:hover{opacity:1} .axis{display:flex;justify-content:space-between;font-size:11px;color:var(--soft);margin-top:6px;font-variant-numeric:tabular-nums} .axis .peak{color:var(--mute)} .tblwrap{overflow-x:auto;border-radius:var(--r);padding:var(--pad);background:var(--shell);box-shadow:0 0 0 1px var(--ring)} .tbl{border-collapse:collapse;font-size:13px;width:100%;background:var(--core);border-radius:var(--ri)} .tbl th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line)} .tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top} .tbl tr:last-child td{border-bottom:0} .tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .tbl tr.archived td{opacity:.6} .tbl td.acts{white-space:normal;min-width:190px} .tbl td.acts .btn{margin:0 4px 4px 0} .tbl td.acts .btn{margin-right:4px} .tbl .mono,.kv .mono{font-family:"JetBrains Mono","Cascadia Code",ui-monospace,monospace;font-size:12px} .tbl .chip small{opacity:.7;font-weight:400;margin-left:4px} .kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:13.5px} .kv span{color:var(--mute)} .admin .rail .ev{cursor:default} .admin .rail .ev:hover{transform:none;background:none} .admin .ev .chip.proj{background:var(--shell);color:var(--mute);font-weight:500;font-size:11px;padding:2px 8px;margin-left:4px} /* board view: columns by urgency, cards stacked like solitaire */ .viewbar{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--shell);margin:16px 0 0} .viewbar button{font:inherit;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;border:0;background:transparent;color:var(--mute);cursor:pointer} .viewbar button.on{background:var(--core);color:var(--ink);box-shadow:0 1px 2px rgba(var(--sh),.08)} .band .viewbar{margin:0} .board{display:flex;gap:14px;overflow-x:auto;align-items:flex-start;padding:16px 4px 28px;scroll-snap-type:x proximity;scrollbar-width:thin} .board .col{flex:0 0 330px;scroll-snap-align:start;border-radius:var(--r);padding:var(--pad);background:var(--shell);box-shadow:0 0 0 1px var(--ring)} .board .col.urgent{box-shadow:0 0 0 1px var(--ring),inset 3px 0 0 var(--urg)} .board .col.is-closed{opacity:.7} .board .col.folded-closed{flex-basis:240px;opacity:.85} .closedlist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px} .closedlist a{display:block;padding:8px 10px;border-radius:10px;background:var(--core);box-shadow:0 0 0 1px var(--ring);color:var(--mute);font-size:12.5px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .closedlist a:hover{color:var(--ink)} .board .colh{background:var(--core);border-radius:var(--ri) var(--ri) 0 0;padding:14px 16px 12px} .board .colh .ttitle{font-size:15px;margin:0 0 8px} .board .colh .ttitle a{color:inherit} .board .colh .status{font-size:12.5px;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .board .stack{display:flex;flex-direction:column;padding:10px 8px 10px;background:rgba(var(--fg),.02);border-radius:0 0 var(--ri) var(--ri)} .board .card{background:var(--core);border-radius:14px;box-shadow:0 0 0 1px var(--ring),0 2px 6px -3px rgba(var(--sh),.18);padding:12px 14px;position:relative} .board .card.folded{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:7px 12px;margin-bottom:-8px;cursor:pointer;background:var(--well);font-size:12px;color:var(--soft);box-shadow:inset 3px 0 0 hsl(var(--tone)),0 0 0 1px var(--ring);transition:transform .35s var(--ease),background .3s} .board .card.folded .who b{color:hsl(var(--tone));font-weight:700} .board .card.folded .what{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute)} .board .card.folded:hover{background:var(--core);transform:translateY(-3px);z-index:2} .board .card.folded.fanned{grid-template-columns:auto 1fr auto;padding:10px 12px;margin-bottom:4px;background:var(--core);transform:none} .board .card.folded.fanned .what{white-space:normal;color:var(--ink)} .board .card.open{margin-top:8px;z-index:1;box-shadow:inset 3px 0 0 hsl(var(--tone)),0 0 0 1px var(--ring),0 6px 16px -10px rgba(var(--sh),.3)} .board .card .ct{margin:0 0 6px;font-weight:700;font-size:14px;letter-spacing:-.01em} .board .card .ct a{color:inherit} .board .card .eh{font-size:11.5px;color:var(--soft);margin:0 0 6px} .board .card .eh b{color:hsl(var(--tone))} .board .card .es{font-weight:600;font-size:13.5px;margin:0 0 6px;letter-spacing:-.01em} .board .card .eb{font-size:12.5px;color:var(--ink3)} .board .card .eb.clamp{max-height:9.5em;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)} .board .card .ask{margin-top:10px;padding:8px 10px;font-size:12.5px} .board .card .cl{margin:10px 0 0;font-size:12px} .board .card .cl a{color:var(--lt)} .board .card.more.load{border:1px dashed rgba(var(--fg),.28);background:var(--core);color:var(--mute);font:inherit;font-size:12.5px;cursor:pointer;text-align:center;margin:0} .board .meta .chip{font-size:11px;padding:3px 9px} @media (max-width:767px){.board .col{flex-basis:86vw}} /* board cards are narrow: the ask label sits above its text; a fanned strip stacks who / what / when */ .board .card .ask{grid-template-columns:1fr;gap:4px 0} .board .card .ask .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .board .card.folded .who{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .board .card.folded.fanned{grid-template-columns:1fr;gap:4px} .board .card.folded.fanned .who{max-width:none} .board .card .eh{overflow-wrap:anywhere} /* the right cluster of the bar sheds its email line and sign-out label until the screen is wide, so the centred crumbs never run into it */ @media (min-width:900px) and (max-width:1499px){.top .pn small{display:none}.top .signout .lbl{display:none}.top .person{padding-right:10px}} /* project tiles on the projects page */ .plist{display:grid;gap:14px} .wrap.home{grid-template-columns:1fr} @media (min-width:900px){.plist{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}} @media (min-width:1500px){.plist{grid-template-columns:repeat(3,minmax(0,1fr))}} .pcard{display:block;border-radius:var(--r);padding:var(--pad);background:var(--shell);text-decoration:none;color:inherit;transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .pcard:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ring),var(--amb)} .pcard>div{border-radius:var(--ri);background:var(--core);padding:20px 24px;display:grid;gap:10px} .pcard .ttitle{margin:0} .pcard .meta{gap:8px} .pcard .pstat .chip.baton{font-size:13.5px;padding:6px 13px} .pcard .pstat .chip.idle{font-size:13px;padding:6px 12px} .pfoot{display:grid;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)} .pfoot .digest{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0} .pfoot .digest .evi{display:inline} .pseats{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between} .pseats .mini{display:inline-flex;gap:6px;flex-wrap:wrap;margin:0} .pseats .pid{display:inline-flex;gap:8px;align-items:center;font-size:11.5px;color:var(--soft)} .pseats .pid .slug{font-size:10.5px;padding:2px 7px} .pseats .tag{color:var(--soft)} .ribbon .rb.mine{color:var(--urg);background:var(--urg-bg);box-shadow:none}.ribbon .rb.mine b{color:var(--urg)} .ribbon .rb.zero .bi{background:var(--soft)} .ribbon .btn.small{margin-left:6px} .eb h1,.eb h2,.eb h3,.eb h4{font-size:14px;margin:14px 0 6px;letter-spacing:-.01em} .eb p{margin:8px 0} /* copy chips for whole sentences: the dashed pill from the first version */ .say{margin:22px 0 0} .tbrief{padding:0 26px 18px;border-top:1px solid var(--line)} .tbrief .say.page{margin:16px 0 0} .tbrief .status{margin-top:14px} .tbrief .meta{margin:10px 0 0} /* Goal and units are the agents' bookkeeping (declared at open, coverage reported back to agents on every write). A person reads the status and the NEED above; this stays readable but recedes: small, grey, one line per row, no card. */ .agentmeta{margin:14px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:12px;color:var(--mute);line-height:1.45} .agentmeta p{margin:0 0 4px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;max-width:90ch} .agentmeta .lbl{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);min-width:38px} .agentmeta .unit{display:inline;padding:0;color:var(--mute)} .agentmeta .unit::after{content:" ·";color:var(--soft);display:inline-block;padding-left:2px} /* inline-block: a built unit's strike must not run through the dot */ .agentmeta .unit:last-child::after{content:""} .agentmeta .unit.built{text-decoration:line-through;color:var(--soft)} .agentmeta .unit.planned{color:var(--ink2)} .cc{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;cursor:pointer;text-align:left;max-width:100%; border:1px dashed rgba(var(--fg),.28);background:var(--core);color:var(--ink2);font:inherit;font-size:13px;line-height:1.35; transition:border-color .15s ease,background .15s ease,color .15s ease} .cc:hover{border-color:var(--lt);color:var(--ink)} .cc.copied{border-style:solid;border-color:var(--ok);background:rgba(var(--ok-rgb),.12);color:var(--ok)} .cc .ic{flex:none;width:14px;height:14px;opacity:.7} .cc .txt{white-space:normal} /* The "open a new thread" chip on a 3+ seat project carries its seat picker inside the label: "Open a new thread to [Tim v]". The