:root { --bg:#f5f3ee; --panel:#fff; --ink:#222; --muted:#777; --line:#ddd8cc; --accent:#2b6cb0; --ok:#2f855a; --bad:#c53030; }
@media (prefers-color-scheme: dark) { :root { --bg:#1b1d21; --panel:#25282e; --ink:#e8e6e1; --muted:#9a9a9a; --line:#3a3e46; --accent:#63a4ff; --ok:#6cc070; --bad:#ff7b7b; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.4 system-ui, sans-serif; }
h1, h2, h3 { margin:0; }
h2 { font-size:15px; } h3 { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:8px 16px; border-bottom:1px solid var(--line); background:var(--panel); }
.bar-left, .bar-right { display:flex; align-items:center; gap:10px; min-width:0; } .bar-right { justify-content:flex-end; }
.bar-project { display:flex; align-items:center; gap:8px; justify-content:center; font-size:16px; min-width:0; } .bar-link { color:var(--ink); text-decoration:none; display:inline-flex; }
.bar-project strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar h1 { font-size:18px; } .grow { flex:1; }
.dot { width:10px; height:10px; border-radius:50%; background:#c9a227; } .dot.on { background:var(--ok); }
.icon-btn { border:0; background:transparent; color:inherit; width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; cursor:pointer; }
.icon-btn:hover { background:rgba(128,128,128,.2); } .icon-btn.ok { color:var(--ok); } .icon-btn.bad { color:var(--bad); }
input, select { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:inherit; }
button.primary { font:inherit; padding:8px 16px; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; }
button.danger { font:inherit; padding:8px 16px; border:1px solid currentColor; border-radius:8px; background:transparent; color:#c0392b; cursor:pointer; }
.scrim.confirm { z-index:2000; }
.sign-in { max-width:320px; margin:20vh auto; display:flex; flex-direction:column; gap:12px; padding:0 16px; }
.meeting { display:grid; grid-template-columns: minmax(0,4fr) minmax(260px,1fr); gap:16px; padding:16px; }
@media (max-width: 800px) { .meeting { grid-template-columns: 1fr; } }
/* The team: three across and two down, each tile with a robot two and a half times the size it was (REQ-144). Sizes follow the width of the grid (cqw), so the six always fit. */
.tiles { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; align-content:start; container-type:inline-size; }
.tile { position:relative; background:var(--panel); border:2px solid var(--line); border-radius:16px; padding:12px; text-align:center; }
.tile.hand-up { border-color:#e8a33d; }
.tile-act { position:absolute; right:6px; bottom:6px; }
.tile-log { position:absolute; right:6px; top:6px; opacity:.6; } .tile:hover .tile-log, .tile-log:focus-visible { opacity:1; }
/* The member's live branch, with its address: plain to see, not only on hover. */
.tile-preview { position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:center; gap:4px; padding:3px 10px 3px 7px; border:1px solid var(--accent); border-radius:999px; background:var(--panel); color:var(--accent); font-family:inherit; font-weight:600; font-size:13px; line-height:1.2; cursor:pointer; }
.tile-preview svg { width:15px; height:15px; } .tile-preview:hover { background:var(--accent); color:#fff; }
.agent-log .console-body { display:flex; gap:12px; margin-top:8px; min-height:0; }
.agent-log .console-body .log-lines { flex:1; margin-top:0; }
.console-side { width:30%; min-width:180px; max-height:68vh; overflow:auto; font-size:13px; border-left:1px solid var(--line); padding-left:10px; }
.console-side h3 { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:4px 0; }
.console-plan { margin:0 0 10px; padding-left:18px; } .console-plan li { margin:2px 0; }
.console-plan .plan-completed { color:var(--muted); text-decoration:line-through; } .console-plan .plan-in_progress { font-weight:600; }
.decision-card { border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:6px; padding:4px 8px; margin-bottom:6px; }
.decision-card p { margin:2px 0 0; }
.console-input { margin-top:8px; gap:6px; align-items:flex-end; } .console-input textarea { flex:1; resize:vertical; font:inherit; }
.log-told_live .log-text, .log-told_ticket .log-text { font-weight:600; } .log-told_live, .log-told_ticket { background:rgba(80,140,220,.10); }
.log-heard .log-text { color:var(--muted); font-style:italic; } .log-interrupted .log-text { color:var(--bad); }
@media (max-width:700px) { .agent-log .console-body { flex-direction:column; } .console-side { width:auto; border-left:none; padding-left:0; } }
.agent-log .log-lines { max-height:68vh; overflow:auto; display:flex; flex-direction:column; gap:3px; font-size:13px; margin-top:8px; }
.log-line { display:flex; gap:8px; align-items:baseline; padding:2px 4px; border-radius:4px; }
.log-time { color:var(--muted); font-variant-numeric:tabular-nums; flex:none; font-size:11px; }
.log-who { flex:none; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.log-text { white-space:pre-wrap; word-break:break-word; min-width:0; }
.log-said .log-text { font-size:14px; } .log-thought .log-text { font-style:italic; color:var(--muted); }
.log-tool .log-text { font-family:ui-monospace, Consolas, monospace; font-size:12px; color:var(--accent); }
.log-result .log-text { font-family:ui-monospace, Consolas, monospace; font-size:11px; color:var(--muted); max-height:5.5em; overflow:hidden; }
.log-failed .log-text { color:var(--bad); }
.log-task .log-text { font-size:12px; max-height:8em; overflow:auto; border-left:3px solid var(--line); padding-left:8px; }
.log-started, .log-session_started, .log-session_ended, .log-pushed, .log-push_failed { background:rgba(120,120,120,.12); }
.robot-wrap { position:relative; width:min(300px, 88%); margin:0 auto; }
.robot { width:100%; height:auto; aspect-ratio:1; display:block; }
.hand { position:absolute; right:-13%; top:26%; width:35%; cursor:pointer; color:#e8a33d; animation: wave 0.8s ease-in-out infinite; transform-origin: 50% 90%; }
.hand svg { width:100%; height:auto; }
.gripper .finger { transform-box:fill-box; transform-origin:50% 100%; }
.gripper .f1 { animation: pinch-l 0.8s ease-in-out infinite; }
.gripper .f2 { animation: pinch-r 0.8s ease-in-out infinite; }
@keyframes pinch-l { 0%,100% { transform:rotate(-14deg); } 50% { transform:rotate(2deg); } }
@keyframes pinch-r { 0%,100% { transform:rotate(14deg); } 50% { transform:rotate(-2deg); } }
.who { display:flex; justify-content:center; gap:8px; align-items:baseline; margin-top:4px; font-size:clamp(14px, 2.1cqw, 24px); } .role { color:var(--muted); font-size:.7em; }
.state { font-size:clamp(12px, 1.5cqw, 17px); color:var(--muted); } .state.errored, .state.blocked { color:var(--bad); } .state.working, .state.thinking { color:var(--ok); }
.chip { margin-top:6px; font-size:clamp(12px, 1.5cqw, 17px); background:var(--bg); border-radius:10px; padding:3px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side { display:flex; flex-direction:column; gap:12px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.panel > header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.empty { color:var(--muted); margin:6px 0; }
.columns { display:flex; flex-direction:column; gap:8px; }
.card { display:flex; align-items:center; gap:4px; padding:4px 8px; border-left:3px solid var(--line); background:var(--bg); border-radius:6px; margin-bottom:4px; font-size:13px; }
.card.high, .card.urgent { border-left-color:var(--bad); }
.label { font-weight:600; }
.mr { padding:6px 0; border-top:1px solid var(--line); } .mr .meta { font-size:12px; color:var(--muted); } .mr.failed strong { color:var(--bad); }
.acts { display:flex; gap:4px; }
.feed { list-style:none; margin:0; padding:0; font-size:12px; } .feed time { color:var(--muted); }
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.4); display:grid; place-items:center; z-index:5; }
.dialog { background:var(--panel); border-radius:12px; padding:12px 16px; width:min(380px, 90vw); display:flex; flex-direction:column; gap:10px; }
.dialog > header { display:flex; justify-content:space-between; align-items:center; }
.toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:8px 14px; border-radius:8px; z-index:9; } .toast.error { background:var(--bad); }

/* The robots' faces (spec 13.2). Each variant of eyes and mouth is in the SVG; the state picks which shows. */
.robot * { transform-box:fill-box; transform-origin:center; }
.robot .e-wide, .robot .e-happy, .robot .e-low, .robot .e-red, .robot .e-x, .robot .e-shut, .robot .m, .robot .x { display:none; }
.robot .m-smile { display:inline; }
.robot .pupil-look { animation: glance var(--glance-every, 8s) var(--glance-delay, 0s) infinite; }

/* Working: eyes scan, antenna pulses, dots type. */
.robot.s-working .m-smile, .robot.s-thinking .m-smile { display:none; }
.robot.s-working .m-flat { display:inline; }
.robot.s-working .antenna, .robot.s-thinking .antenna { animation: pulse .8s infinite; }
.robot.s-working .pupil-look { animation: scan .7s ease-in-out infinite; }
.robot.s-working .dots { display:inline; }
.robot .dot { animation: type 1s infinite; } .robot .d1 { animation-delay:.2s; } .robot .d2 { animation-delay:.4s; }
/* Thinking: looks up and aside, mouth wobbles, a thought bubble. */
.robot.s-thinking .m-wave { display:inline; animation: wobble .9s ease-in-out infinite; }
.robot.s-thinking .pupil-look { animation:none; transform:translate(3.4px,-3px); }
.robot.s-thinking .bubble { display:inline; }
/* Blocked: red eyes, angry brows, frown, a slow shake. */
.robot.s-blocked .e-open, .robot.s-errored .e-open, .robot.s-stopped .e-open, .robot.s-waiting_for_human .e-open { display:none; }
.robot.s-blocked .e-red { display:inline; }
.robot.s-blocked .m-smile { display:none; } .robot.s-blocked .m-wave { display:inline; animation: wobble .9s ease-in-out infinite; }
.robot.s-blocked .head { animation: shake 2.4s ease-in-out infinite; } .robot.s-blocked .pupil-look { animation:none; }
/* Waiting for the manager: wide eyes, open mouth, bobbing. */
.robot.s-waiting_for_human .e-wide, .robot.s-waiting_for_human .m-open { display:inline; }
.robot.s-waiting_for_human .m-smile { display:none; } .robot.s-waiting_for_human .pupil-look { animation:none; }
/* In a meeting or a 1:1: attentive, and the mouth moves while speaking. */
.robot.s-in_meeting .m-smile, .robot.s-in_1to1 .m-smile { display:none; }
/* The speaking mouth is a flat line that opens with the real sound level (--mouth, set every frame from the audio): no animation of its own. */
.robot.s-in_meeting .m-talk, .robot.s-in_1to1 .m-talk { display:inline; transform: scaleY(calc(0.12 + var(--mouth, 0) * 2.3)); }
.robot.s-in_meeting .pupil-look, .robot.s-in_1to1 .pupil-look { animation:none; }
/* Errored: crossed eyes, a wavy mouth, a sweat drop. */
.robot.s-errored .e-x, .robot.s-errored .sweat { display:inline; }
.robot.s-errored .m-smile { display:none; } .robot.s-errored .m-wave { display:inline; }
.robot.s-errored .sweat { animation: drip 1.6s infinite; } .robot.s-errored .pupil-look { animation:none; }
/* Stopped: eyes shut, grey, asleep. */
.robot.s-stopped { filter:grayscale(1) opacity(.6); }
.robot.s-stopped .e-shut, .robot.s-stopped .zzz { display:inline; }
.robot.s-stopped .m-smile { display:none; } .robot.s-stopped .m-flat { display:inline; }
.robot.s-stopped .head, .robot.s-stopped .pupil-look { animation:none; } .robot.s-stopped .zzz { animation: float 3s infinite; }
/* A merge request ready is good news; a failed one is not. */
.robot.m-ready:not(.s-blocked):not(.s-errored):not(.s-stopped):not(.s-waiting_for_human) .e-open { display:none; }
.robot.m-ready:not(.s-blocked):not(.s-errored):not(.s-stopped):not(.s-waiting_for_human) .e-wide { display:inline; }
.robot.m-down:not(.s-blocked):not(.s-errored):not(.s-stopped) .m-smile { display:none; }
.robot.m-down:not(.s-blocked):not(.s-errored):not(.s-stopped) .m-frown { display:inline; }
.robot.m-down:not(.s-blocked):not(.s-errored):not(.s-stopped) .head { animation: dip 3s ease-in-out infinite; }
/* Pupils and lids (REQ-127). The pupils look about; the eyes do not. The lids turn with --lid (degrees, positive angry, negative sad). */
.robot .pupil-look { transform: translate(calc((var(--px, 0) + var(--micro-px, 0) + var(--gaze-x, 0)) * 1px), calc((var(--py, 0) + var(--micro-py, 0) + var(--gaze-y, 0)) * 1px)); }
.robot .lid { transition: transform var(--ease, .17s) ease-out; }
.robot .pupil-look { transition: transform var(--ease, .1s) ease-out; }
.robot .lid-l { transform: rotate(calc((var(--lid, 0) + var(--micro-lid, 0)) * 1deg)); }
.robot .lid-r { transform: rotate(calc((var(--lid, 0) + var(--micro-lid, 0)) * -1deg)); }
.robot.s-errored .pupils, .robot.s-errored .lids, .robot.s-stopped .pupils, .robot.s-stopped .lids { display:none; }
.robot.s-blocked { --lid: 30; }
.robot.m-down:not(.s-blocked):not(.s-errored):not(.s-stopped) { --lid: -30; }
/* The test robot of the Animation settings: nothing moves unless the settings move it. */
.robot.x-express .pupil-look, .robot.x-look .pupil-look { animation:none; }
.robot.s-test .m-smile { display:none; }
.robot.s-test .m-talk { display:inline; transform: scaleY(calc(0.12 + var(--mouth, 0) * 2.3)); }
.robot.s-test .pupil-look, .robot.s-test .head { animation:none; }

@keyframes glance { 0%,70%,100% { transform:translateX(0); } 73%,86% { transform:translateX(4px); } 89% { transform:translateX(0); } }
@keyframes pulse { 50% { opacity:.3; } }
@keyframes scan { 0%,100% { transform:translateX(-4px); } 50% { transform:translateX(4px); } }
@keyframes type { 50% { transform:translateY(-4px); opacity:.4; } }
@keyframes wobble { 50% { transform:scaleY(-1); } }
@keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-2px) rotate(-1deg); } 40% { transform:translateX(2px) rotate(1deg); } }
@keyframes talk { 50% { transform:scaleY(2.4); } }
@keyframes drip { 0% { transform:translateY(-4px); opacity:0; } 40% { opacity:1; } 100% { transform:translateY(10px); opacity:0; } }
@keyframes float { 0% { transform:translate(0,4px); opacity:0; } 50% { opacity:1; } 100% { transform:translate(4px,-8px); opacity:0; } }
@keyframes dip { 50% { transform:translateY(3px) rotate(-1.5deg); } }
@keyframes wave { 50% { transform:rotate(18deg); } }
/* Reduced motion keeps every shape and drops the movement. */
@media (prefers-reduced-motion: reduce) { .robot, .robot *, .hand { animation:none !important; } }

.icon-btn.mic.listening { background:var(--ok); color:#fff; } .icon-btn.mic.speaking { background:var(--accent); color:#fff; animation: pulse 1s infinite; } .icon-btn.mic.connecting { opacity:.5; }
.caption { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); max-width:min(640px, 92vw); background:rgba(0,0,0,.75); color:#fff; padding:8px 14px; border-radius:12px; z-index:4; }
.panel.attention { border-color:#e8a33d; }
.tile { cursor:pointer; }
.secret-name { min-width:140px; } .meta.ok { color:var(--ok); }
.tile-link { position:absolute; left:6px; bottom:6px; color:var(--accent); text-decoration:none; }
.card-title { font:inherit; border:0; background:transparent; color:inherit; padding:0; cursor:pointer; text-align:left; text-decoration:underline dotted; }
.row.ability { cursor:pointer; } .row.ability input { flex:none; min-width:0; width:18px; height:18px; accent-color: var(--accent); }
.ticket-title { font-weight:600; } .note { border-top:1px solid var(--line); padding:6px 0; } .note-text { white-space:pre-wrap; font-size:13px; }
.chip.st-in_progress { background:var(--accent); color:#fff; } .chip.st-awaiting_approval { background:#e8a33d; color:#222; } .chip.st-done { background:var(--ok); color:#fff; }

/* the specification viewer */
.dialog.xl { width:min(1180px, 96vw); height:min(820px, 92vh); max-height:92vh; }
.dialog.xl > header { gap:12px; } .dialog.xl .spec-search { flex:1; max-width:420px; margin-left:auto; }
.spec-body { display:grid; grid-template-columns: 260px minmax(0,1fr); gap:16px; min-height:0; flex:1; }
@media (max-width: 800px) { .spec-body { grid-template-columns: 1fr; grid-template-rows: 160px minmax(0,1fr); } }
.spec-tree { overflow:auto; border-right:1px solid var(--line); padding-right:8px; display:flex; flex-direction:column; gap:2px; }
.spec-tree h3 { margin:10px 0 2px; }
.spec-tree button { font:inherit; text-align:left; border:0; background:transparent; color:inherit; padding:4px 8px; border-radius:6px; cursor:pointer; }
.spec-tree button:hover { background:rgba(128,128,128,.15); } .spec-tree .leaf.on { background:var(--accent); color:#fff; }
.spec-tree .hit { display:flex; flex-direction:column; gap:1px; border-bottom:1px solid var(--line); border-radius:0; } .spec-tree .snip { font-size:12px; color:var(--muted); }
.spec-page { overflow:auto; padding:0 8px 24px; line-height:1.55; }
.spec-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .spec-head h1 { font-size:22px; }
.spec-page h1, .spec-page h2, .spec-page h3 { margin:18px 0 6px; } .spec-page h2 { font-size:18px; } .spec-page h3 { font-size:15px; color:inherit; text-transform:none; letter-spacing:0; }
.spec-page table { border-collapse:collapse; margin:10px 0; font-size:13px; display:block; overflow-x:auto; } .spec-page th, .spec-page td { border:1px solid var(--line); padding:4px 8px; text-align:left; vertical-align:top; }
.spec-page code { background:rgba(128,128,128,.15); padding:1px 5px; border-radius:4px; font-size:.9em; } .spec-page pre { background:rgba(128,128,128,.12); padding:10px; border-radius:8px; overflow:auto; } .spec-page pre code { background:none; padding:0; }
.spec-page a { color:var(--accent); } .spec-page blockquote { margin:8px 0; padding:2px 12px; border-left:3px solid var(--line); color:var(--muted); }
.spec-page .mermaid { margin:12px 0; text-align:center; overflow:auto; } .spec-page .mermaid.failed { white-space:pre; text-align:left; font:12px monospace; }
.spec-tree .sub { font-size:12px; color:var(--muted); padding:2px 8px 2px 28px; } .spec-tree .sub.l3 { padding-left:44px; }
.spec-tree h3 { text-transform:none; letter-spacing:0; font-size:13px; color:inherit; font-weight:700; margin:14px 0 2px; border-top:1px solid var(--line); padding-top:8px; }
mark.hl { background:#f5d96b; color:#222; border-radius:2px; padding:0 1px; } mark.hl.on { background:#ff9f3a; outline:2px solid #ff9f3a; }
.match-nav { display:inline-flex; align-items:center; gap:2px; margin-left:auto; } .match-nav .icon-btn { width:28px; height:28px; } .match-nav .icon-btn svg { width:16px; height:16px; }
.icon-btn.mic.dormant { box-shadow: 0 0 0 2px var(--ok) inset; animation: pulse 2.4s infinite; }
.icon-btn.update { background:var(--accent); color:#fff; animation: pulse 1.6s infinite; }
/* the ring round the mic: full when the conversation is lively, empty as the quiet limit nears */
.mic-ring { position:relative; display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; --p:0; }
.mic-ring.on::before { content:''; position:absolute; inset:0; border-radius:50%; background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--line) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
.mic-ring.on.soon::before { background: conic-gradient(#e8a33d calc(var(--p) * 1%), var(--line) 0); }
.mic-ring.on.low::before { background: conic-gradient(var(--bad) calc(var(--p) * 1%), var(--line) 0); }
.mic-time { font:12px/1 ui-monospace, monospace; color:var(--muted); min-width:34px; text-align:right; }
.icon-btn.mic { color:var(--muted); } .icon-btn.mic.listening, .icon-btn.mic.speaking { color:#fff; }
/* a team member's panel: a passport photo, their details, and two full-width descriptions */
.tabs.members { margin-bottom:8px; }
.member { display:flex; flex-direction:column; gap:12px; }
.member-head { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.member-fields { flex:1; min-width:220px; display:flex; flex-direction:column; gap:8px; }
.member-fields label, .member-block { display:flex; flex-direction:column; gap:3px; }
.member-fields .row select { flex:1; min-width:0; }
.member-block { width:100%; } textarea.member-text { width:100%; box-sizing:border-box; font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:inherit; resize:vertical; line-height:1.4; }
.passport { margin:0; width:132px; border:3px double var(--ink); border-radius:6px; background:var(--panel); padding:6px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.passport-photo { border:1px solid var(--line); border-radius:3px; padding:6px 0; background-color:#f4f1e8; }
@media (prefers-color-scheme: dark) { .passport-photo { background-color:#2c3038; } }
.passport-photo .robot-wrap { width:96px; }
.passport-photo .robot { width:96px; height:100px; }
.passport figcaption { display:flex; flex-direction:column; margin-top:6px; line-height:1.2; }
.passport-name { font:700 12px/1 ui-monospace, monospace; letter-spacing:.12em; } .passport-role { font-size:11px; color:var(--muted); margin-top:3px; }

/* settings window styles, restored: a rewrite of this file once dropped them */
.dialog.wide { width:min(760px, 94vw); max-height:90vh; overflow:auto; }
.tabs { display:flex; gap:4px; flex-wrap:wrap; }
.tab { font:inherit; border:0; background:transparent; color:var(--muted); padding:6px 12px; border-radius:16px; cursor:pointer; }
.tab.on { background:var(--accent); color:#fff; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:4px 0; } .row input { flex:1; min-width:110px; }
textarea.guide { width:100%; font:13px/1.45 ui-monospace, monospace; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:inherit; resize:vertical; }
.link { font:inherit; border:0; background:transparent; color:var(--accent); cursor:pointer; padding:2px 0; }
/* the ring must not catch clicks meant for the mic button under it */
.mic-ring::before { pointer-events:none; }
/* who has the voice conversation: lit, and said plainly */
.tile.talking { border-color:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 35%, transparent); }
.tile.conductor { border-style:dashed; }
.tile.conductor.talking { border-style:solid; }
.talking-to { font-size:13px; font-weight:600; color:var(--ok); white-space:nowrap; }
/* the hidden attribute must win over any display rule (an icon button's, the mic clock's, ...) */
[hidden] { display:none !important; }

/* the speaker: lit brighter than the one who is only in the conversation */
.tile.speaking { border-color:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 55%, transparent), 0 0 18px color-mix(in srgb, var(--ok) 50%, transparent); }

.keycap { position:absolute; top:10px; left:12px; min-width:22px; padding:0 6px; font:600 clamp(11px, 1.3cqw, 16px)/1.6 ui-monospace,monospace; color:var(--muted,#667); border:1px solid var(--line); border-radius:5px; background:var(--bg,transparent); }

.brief { max-height:70vh; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.brief-part { border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.brief-part summary { cursor:pointer; }
.brief-text { white-space:pre-wrap; word-break:break-word; margin:8px 0 0; font:13px/1.45 ui-monospace,monospace; max-height:40vh; overflow:auto; }

.vad-graph { width:100%; max-width:640px; height:140px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.vad-now { font-weight:600; color:var(--muted,#667); }
.vad-now.on { color:#2e7d32; }

.anim-top { display:flex; flex-wrap:wrap; gap:20px; }
.anim-curve { flex:1 1 300px; max-width:340px; }
.anim-test { flex:1 1 260px; }
.curve-editor { width:100%; aspect-ratio:1; background:var(--panel); border:1px solid var(--line); border-radius:10px; touch-action:none; outline:none; }
.curve-editor:focus-visible { border-color:var(--accent); }
.curve-editor .grid { stroke:var(--line); stroke-width:1; }
.curve-editor .frame { stroke:var(--muted,#889); stroke-width:1; }
.curve-editor .axis { font:11px sans-serif; fill:var(--muted,#667); }
.curve-editor .curve { stroke:var(--accent); stroke-width:2.5; }
.curve-editor .handle-line { stroke:var(--muted,#889); stroke-width:1; }
.curve-editor .handle { fill:var(--panel); stroke:var(--accent); stroke-width:1.5; cursor:grab; }
.curve-editor .anchor { fill:var(--accent); stroke:#fff; stroke-width:2; cursor:grab; }
.curve-editor .anchor.on { fill:#fff; stroke:var(--accent); stroke-width:3; }
.curve-live line { stroke:#2e7d32; stroke-width:1; stroke-dasharray:4 3; }
.curve-live circle { fill:#2e7d32; pointer-events:none; }
.anim-robot { display:flex; justify-content:center; padding:6px 0; }
.anim-robot .robot-wrap { width:140px; }
.anim-robot .robot { width:140px; height:140px; }
.anim-slider input { flex:1; min-width:80px; }
.anim-slider strong { min-width:96px; font-weight:600; }
.icon-btn.on { background:var(--accent); color:#fff; }

/* The resting mouth says how much there is to do (REQ-129): sad with nothing to do, tongue out with too much. Speaking and the states that already
   have a mouth of their own (blocked, errored, stopped) keep theirs. */
.robot.l-empty.s-idle .m-smile { display:none; }
.robot.l-empty.s-idle .m-frown { display:inline; }
.robot.l-swamped:not(.s-stopped):not(.s-errored):not(.s-blocked):not(.s-in_meeting):not(.s-in_1to1):not(.s-test) .m { display:none; }
.robot.l-swamped:not(.s-stopped):not(.s-errored):not(.s-blocked):not(.s-in_meeting):not(.s-in_1to1):not(.s-test) .m-tongue { display:inline; }
/* Bored (nothing to do): the pupils look down, and stay there, unless a feeling or having just been spoken to says otherwise. */
.robot.l-empty.s-idle:not(.x-look):not(.x-express) { --py: 2.8; }
.robot.l-empty.s-idle:not(.x-look):not(.x-express) .pupil-look { animation:none; }

/* Exhausted: sad lids (-25) as well as the mouth. */
.robot.l-swamped:not(.s-stopped):not(.s-errored):not(.s-blocked):not(.s-in_meeting):not(.s-in_1to1):not(.s-test) { --lid: -25; }



/* Expressions (REQ-134): while one is shown the parametric mouth is the only mouth, and the eyes take its height. */
.robot .m-expr { display:none; }
.robot.x-face .m { display:none !important; }
.robot.x-face .m-expr { display:inline !important; }
.robot .look { transform: scaleY(calc(var(--eye, 1) * var(--micro-eye, 1))); }
.robot .clip-eye { transform: scaleY(calc(var(--eye, 1) * var(--micro-eye, 1))); }
.robot .pupil { transform: scale(var(--micro-pupil, 1)); }

.anim-expressions { margin-top:18px; border-top:1px solid var(--line); padding-top:6px; }
.expr-top { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.expr-edit { flex:1 1 300px; display:flex; flex-direction:column; gap:6px; }
.expr-edit .row input[type=text] { flex:1; min-width:100px; }
.expr-slider strong { min-width:96px; }
.anim-rules { margin-top:12px; align-items:center; }


/* Idle behaviour (REQ-146): looking about suppresses the usual glance; dozing shows a z; a sleeping (stopped) robot opens its eyes for the jolt of a voice. */
.robot.x-gaze .pupil-look { animation:none; }
.robot.x-doze .zzz { display:inline; animation: float 3s infinite; }
.robot { transition: filter .5s ease-out; }
.robot.s-stopped.x-wake { filter:none; }
.robot.s-stopped.x-wake .e-shut, .robot.s-stopped.x-wake .zzz { display:none; }
.robot.s-stopped.x-wake .e-open { display:inline; }
.robot.s-stopped.x-wake .pupils, .robot.s-stopped.x-wake .lids { display:inline; }

.kanban { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; align-items:start; }
@media (max-width: 1000px) { .kanban { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .kanban { grid-template-columns: 1fr; } }
.kcol header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.kcol .kbody { display:flex; flex-direction:column; gap:6px; min-height:60px; }
.kcol.over { outline:2px dashed var(--accent); outline-offset:-4px; }
.kcol-backlog { border-top:3px solid var(--muted); }
.kcol-progress { border-top:3px solid var(--accent); }
.kcol-done { border-top:3px solid var(--ok); }
.kcol-accepted { border-top:3px solid #2e7d32; background: color-mix(in srgb, var(--ok) 8%, var(--panel)); }
/* Cards half as large again as the rest of the screen's cards, to be read at a glance across the room. */
.kcard { display:flex; flex-direction:column; align-items:stretch; gap:5px; margin:0; padding:9px 12px; cursor:grab; font-size:19.5px; }
.kcard .card-title { line-height:1.3; }
.kcard.dragging { opacity:.45; }
.kcard-top, .kcard-foot { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kcard-top .chip, .kcard-foot .chip { margin-top:0; font-size:16.5px; padding:2px 10px; }
.kcard .owner { font-size:18px; font-weight:600; }
.kcard .icon-btn svg { width:24px; height:24px; }
.chip.st-cancelled { background:var(--muted); color:#fff; }
.ticket-close select, .ticket-close input { width:auto; }
.chip.st-accepted { background:#2e7d32; color:#fff; }
.chip.st-ready { background:var(--accent); color:#fff; }
.chip.st-blocked, .chip.st-rejected { background:var(--bad); color:#fff; }
.chip.ty-bug { background:var(--bad); color:#fff; }
.tile.drop { outline:3px dashed var(--accent); outline-offset:2px; }

/* The menu down the left side (REQ-178), after Project Hub's module bar: away, the drawings alone, or the drawings with their names.
   It hangs under the title bar, pushes the pages across on a wide screen and lies over them on a narrow one. */
:root { --bar-h: 56px; --nav-w: 184px; --nav-rail: 56px; }
.bar { position:sticky; top:0; z-index:30; min-height:var(--bar-h); box-sizing:border-box; }
.nav { position:fixed; top:var(--bar-h); left:0; bottom:0; z-index:25; width:var(--nav-w); box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between;
  padding:8px 6px; background:var(--panel); border-right:1px solid var(--line); overflow-y:auto; transform:translateX(-100%); transition:transform .2s ease, width .2s ease; }
.nav.out { transform:none; }
.nav.rail { width:var(--nav-rail); }
.nav.rail .nav-name { display:none; }
.nav-main, .nav-foot { display:flex; flex-direction:column; gap:2px; }
.nav-item { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--muted); font:inherit; font-size:15px; font-weight:500; text-align:left; cursor:pointer; }
.nav.rail .nav-item { justify-content:center; padding:8px; }
.nav-item:hover { background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink); }
.nav-item.active { color:var(--accent); }
.nav-item.active::after { content:''; position:absolute; left:-6px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:currentColor; }
.nav-art { display:grid; place-items:center; width:26px; height:26px; flex:none; } .nav-art svg { width:24px; height:24px; }
.nav-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-handle { position:fixed; left:0; top:calc(50% + var(--bar-h) / 2); transform:translateY(-50%); z-index:24; width:15px; height:76px; padding:0; display:grid; place-items:center;
  border:1px solid var(--line); border-left:0; border-radius:0 12px 12px 0; background:var(--panel); color:var(--muted); cursor:pointer; transition:left .2s ease; }
.nav-handle svg { width:14px; height:14px; }
body.nav-out .nav-handle { left:var(--nav-w); } body.nav-out.nav-rail .nav-handle { left:var(--nav-rail); }
@media (pointer: coarse) { .nav-handle { display:none; } }
.pages { transition:padding-left .2s ease; }
body.nav-out .pages { padding-left:var(--nav-w); } body.nav-out.nav-rail .pages { padding-left:var(--nav-rail); }
@media (max-width: 900px) {
  body.nav-out:not(.nav-rail) .pages { padding-left:0; }
  .nav:not(.rail) { box-shadow:0 8px 24px rgb(0 0 0 / .28); }
}
@media (max-width: 560px) { body.nav-out.nav-rail .pages { padding-left:var(--nav-rail); } }
.pages > [hidden] { display:none !important; }

/* A page's own heading row: its name, then its filters at the right. */
.page-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.page-head h2 { margin:0; font-size:20px; }
.page-head select { width:auto; }

/* The Kanban page: the whole width for the board, the team along the top to drop cards on. */
.page-kanban { padding:16px; }
.page-kanban .kanban { grid-template-columns: repeat(4, minmax(0,1fr)) minmax(0,.85fr); }
@media (max-width: 1300px) { .page-kanban .kanban { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 800px) { .page-kanban .kanban { grid-template-columns: 1fr; } }
.kcol-closed { border-top:3px solid var(--muted); opacity:.9; }
.kcol-closed .kcard { opacity:.85; }
.drop-strip { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.drop-member { display:flex; flex-direction:column; padding:6px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); min-width:96px; }
.drop-member.drop { outline:3px dashed var(--accent); outline-offset:2px; }
.drop-member.s-working strong::after { content:' ●'; color:var(--ok); }

/* The Specification page: the viewer fills what is under the title bar. */
.page-spec { padding:16px; display:flex; flex-direction:column; height:calc(100vh - var(--bar-h)); box-sizing:border-box; }
.page-spec .spec-search { flex:1; max-width:420px; }
.page-spec .spec-body { flex:1; min-height:0; }

/* The History page: the key decisions, newest first. */
.page-history-wrap { padding:16px; max-width:980px; }
.history-list { display:flex; flex-direction:column; gap:10px; }
.history-item { padding:10px 14px; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; background:var(--panel); }
.history-item.hk-answer { border-left-color:var(--ok); } .history-item.hk-triage { border-left-color:#8e6cc0; } .history-item.hk-closed { border-left-color:var(--muted); }
.history-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.history-head .chip { margin-top:0; } .history-head time { color:var(--muted); font-size:13px; }
.history-text { margin:6px 0 0; white-space:pre-wrap; } .history-why { margin:4px 0 0; color:var(--muted); white-space:pre-wrap; }
button.link { border:0; background:none; padding:0; color:var(--accent); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; }

/* A member's console as a page (REQ-200), after the Claude desktop app's session pane: one reading column, prose for what it says,
   a quiet line per tool call that opens to show the answer, the manager's words in a bubble, and a rounded box docked at the bottom. */
/* One scrollbar (the console's own): while a console is open the page is exactly the window, and the console takes what the bar leaves. */
body.cx-open { height:100dvh; overflow:hidden; }
body.cx-open #app { height:100%; display:flex; flex-direction:column; }
body.cx-open .pages { flex:1; min-height:0; }
.page-console-wrap { height:100%; }
.page-console { display:flex; flex-direction:column; height:100%; }
.cx-head { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel); }
.cx-title { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.cx-title h2 { font-size:17px; }
.cx-state { margin:0; }
.cx-branch { position:static; }
/* The console and the member's live branch side by side (REQ-202): the conversation a readable column, the branch the rest. */
.cx-body { flex:1; min-height:0; display:grid; grid-template-columns:minmax(360px, 40%) minmax(0,1fr); }
.cx-body.no-preview { grid-template-columns:minmax(0,1fr); }
@media (max-width: 1000px) { .cx-body { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr); } }
.cx-planbox { max-width:780px; width:100%; margin:8px auto 0; padding:6px 16px; box-sizing:border-box; font-size:13.5px; }
.cx-planbox summary { cursor:pointer; display:flex; gap:6px; }
.cx-planbox .cx-plan { margin-top:6px; }
.cx-preview { display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--line); background:var(--panel); }
.cx-bar { display:flex; align-items:center; gap:4px; padding:6px 8px; border-bottom:1px solid var(--line); }
.cx-path { flex:1; min-width:0; font:13px ui-monospace, Menlo, Consolas, monospace; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); }
.cx-stage { flex:1; min-height:0; display:flex; justify-content:center; background:var(--bg); }
.cx-frame { width:100%; height:100%; border:0; background:#fff; }
.cx-stage.phone { padding:12px 0; }
.cx-stage.phone .cx-frame { width:390px; max-width:100%; border-radius:18px; box-shadow:0 0 0 1px var(--line), 0 6px 24px rgb(0 0 0 / .12); }
.cx-main { position:relative; display:flex; flex-direction:column; min-height:0; }
.cx-scroll { flex:1; overflow-y:auto; padding:20px 16px 8px; }
.cx-stream { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:10px; font-size:15px; line-height:1.6; }
.cx-prose > :first-child { margin-top:0; } .cx-prose > :last-child { margin-bottom:0; }
.cx-prose p { margin:.4em 0; } .cx-prose pre { background:color-mix(in srgb, var(--ink) 6%, transparent); padding:10px 12px; border-radius:8px; overflow-x:auto; font-size:13px; }
.cx-prose code { font:13px ui-monospace, Menlo, Consolas, monospace; background:color-mix(in srgb, var(--ink) 7%, transparent); padding:1px 5px; border-radius:4px; }
.cx-prose pre code { background:none; padding:0; }
.cx-muted { color:var(--muted); }
.cx-fold > summary, .cx-call > summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:8px; min-width:0; }
.cx-fold > summary::-webkit-details-marker, .cx-call > summary::-webkit-details-marker { display:none; }
.cx-fold > summary::before, .cx-call > summary::before { content:'›'; color:var(--muted); width:10px; flex:none; transition:transform .15s; }
.cx-fold[open] > summary::before, .cx-call[open] > summary::before { transform:rotate(90deg); }
.cx-thought { margin:6px 0 0 18px; padding-left:10px; border-left:2px solid var(--line); color:var(--muted); font-style:italic; white-space:pre-wrap; }
.cx-task { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.cx-task .cx-prose { margin-top:8px; font-size:14px; }
.cx-call { font-size:13px; color:var(--muted); }
.cx-call summary { padding:2px 0; }
.cx-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; align-self:center; opacity:.6; }
.cx-dot.ok { background:var(--ok); opacity:1; } .cx-dot.bad { background:var(--bad); opacity:1; }
.cx-tool { font-weight:600; color:var(--ink); flex:none; }
.cx-arg { font:12.5px ui-monospace, Menlo, Consolas, monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.cx-out { margin:6px 0 4px 18px; padding:8px 10px; max-height:280px; overflow:auto; border-radius:8px; background:color-mix(in srgb, var(--ink) 5%, transparent); font:12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space:pre-wrap; word-break:break-word; color:var(--ink); }
.cx-you { display:flex; flex-direction:column; align-items:flex-end; gap:2px; margin:6px 0; }
.cx-bubble { max-width:80%; padding:9px 14px; border-radius:16px 16px 4px 16px; background:color-mix(in srgb, var(--accent) 12%, var(--panel)); white-space:pre-wrap; }
.cx-when { font-size:11.5px; color:var(--muted); } .cx-when.cx-left { color:var(--warn, #9a5b12); }
.cx-decision { padding:10px 12px; border-left:3px solid var(--accent); border-radius:6px; background:color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.cx-decision strong { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); }
.cx-decision p { margin:4px 0 0; }
.cx-system { display:flex; justify-content:center; gap:8px; font-size:12.5px; color:var(--muted); text-align:center; padding:4px 0; }
.cx-system.k-session_started, .cx-system.k-session_ended { border-top:1px solid var(--line); padding-top:10px; margin-top:6px; }
.cx-system.bad { color:var(--bad); }
.cx-latest { position:absolute; left:50%; bottom:96px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); box-shadow:0 2px 8px rgb(0 0 0 / .12); cursor:pointer; font:inherit; font-size:13px; }
.cx-latest svg { width:14px; height:14px; }
.cx-dock { padding:8px 16px 16px; }
.cx-composer { max-width:780px; margin:0 auto; display:flex; align-items:flex-end; gap:8px; padding:10px 10px 10px 14px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 2px 12px rgb(0 0 0 / .06); }
.cx-composer:focus-within { border-color:var(--accent); }
.cx-input { flex:1; border:0; outline:0; resize:none; background:transparent; color:var(--ink); font-family:inherit; font-size:15px; line-height:1.5; min-height:24px; max-height:220px; padding:4px 0; }
.cx-actions { display:flex; gap:6px; }
.cx-send, .cx-stop { width:34px; height:34px; border-radius:50%; }
.cx-send { background:var(--accent); color:#fff; border-color:var(--accent); }
.cx-side { border-left:1px solid var(--line); padding:16px; overflow-y:auto; background:var(--panel); }
.cx-plan { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13.5px; }
.cx-plan .plan-completed { color:var(--muted); text-decoration:line-through; }
.cx-plan .plan-in_progress { font-weight:600; }