/* ============================================================
   opgate design system — COMPONENTS
   ------------------------------------------------------------
   Every component in the locked voice. Requires tokens.css first.
   Works in light and dark with no per-component changes (all values
   are tokens). Structures + interactions mapped from tailor & fray;
   playful flourishes deliberately omitted for opgate's register.
   ============================================================ */

/* ---------- shared icon ---------- */
.ic{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;width:17px;height:17px}

/* =================== BUTTONS =================== */
.btn{font-family:var(--body);font-size:13px;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:9px 14px;border-radius:var(--r-2);border:1px solid transparent;
  background:var(--accent);color:var(--on-accent);
  transition:filter var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 34%,transparent)}
.btn.sm{padding:6px 10px;font-size:12px}
.btn.lg{padding:11px 18px;font-size:14px}
.btn.soft{background:var(--accent-soft);color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.btn.soft:hover{filter:none;background:color-mix(in srgb,var(--accent) 16%,var(--panel))}
.btn.ghost{background:transparent;color:var(--t2);border-color:var(--border)}
.btn.ghost:hover{filter:none;background:color-mix(in srgb,var(--t2) 7%,transparent);color:var(--t1)}
.btn.quiet{background:transparent;color:var(--t2);border-color:transparent;padding:7px 8px}
.btn.quiet:hover{filter:none;color:var(--accent);background:var(--accent-soft)}
.btn.danger{background:var(--deny);color:#fff}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn .ic{width:15px;height:15px}
.btn-icon{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-2);
  border:1px solid transparent;background:transparent;color:var(--t3);cursor:pointer;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out)}
.btn-icon:hover{background:var(--accent-soft);color:var(--accent)}
.btn.loading{position:relative;color:transparent;pointer-events:none}
.btn.loading::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;
  border-radius:50%;border:2px solid color-mix(in srgb,var(--on-accent) 40%,transparent);
  border-top-color:var(--on-accent);animation:spin .7s linear infinite}

/* =================== INPUTS / FORMS =================== */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:12px;font-weight:600;color:var(--t2)}
.input,.textarea,.select{font-family:var(--body);font-size:13.5px;color:var(--t1);
  background:var(--field);border:1px solid var(--border);border-radius:var(--r-2);
  padding:9px 11px;width:100%;outline:none;
  transition:border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out)}
.input::placeholder,.textarea::placeholder{color:var(--t-dis)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.input.invalid{border-color:var(--deny);box-shadow:0 0 0 3px var(--deny-bg)}
.textarea{min-height:74px;resize:vertical}
.select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}

/* search with focus-expand */
.search{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--t3);
  background:var(--field);border:1px solid var(--border);border-radius:var(--r-2);
  padding:8px 12px;width:240px;box-shadow:var(--shadow-1);
  transition:width var(--dur-3) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out)}
.search:focus-within{width:320px;color:var(--t2);border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.search input{border:0;background:transparent;outline:none;font:inherit;color:var(--t1);flex:1;min-width:0}
.search .kbd{font-family:var(--mono);font-size:11px;color:var(--t3);opacity:.7}

/* checkbox / radio */
.check,.radio{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--t1);cursor:pointer}
.check input,.radio input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:17px;height:17px;border-radius:var(--r-1);border:1.5px solid var(--border-strong);
  display:grid;place-items:center;transition:all var(--dur-1) var(--ease-out)}
.radio .box{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--border-strong);
  display:grid;place-items:center;transition:all var(--dur-1) var(--ease-out)}
.check input:checked + .box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .box::after{content:"";width:9px;height:5px;border:2px solid #fff;
  border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.radio input:checked + .box{border-color:var(--accent)}
.radio input:checked + .box::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.check input:focus-visible + .box,.radio input:focus-visible + .box{box-shadow:0 0 0 3px var(--accent-soft)}

/* toggle switch */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;color:var(--t1)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:38px;height:22px;border-radius:var(--r-pill);background:var(--fill-track);
  position:relative;transition:background var(--dur-2) var(--ease-out)}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-1);transition:transform var(--dur-2) var(--ease-spring)}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::after{transform:translateX(16px)}

/* =================== SEGMENTED / TABS =================== */
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--panel-inset);
  border:1px solid var(--hairline);border-radius:var(--r-pill)}
.seg button{font:inherit;font-size:12.5px;font-weight:600;color:var(--t3);border:0;cursor:pointer;
  background:transparent;padding:6px 13px;border-radius:var(--r-pill);
  transition:color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
.seg button.on{background:var(--panel);color:var(--accent);box-shadow:var(--shadow-1)}

.tabs{display:inline-flex;gap:2px;border-bottom:1px solid var(--hairline)}
.tab{position:relative;font-size:13.5px;font-weight:500;color:var(--t2);padding:9px 13px;cursor:pointer}
.tab.on{color:var(--t1);font-weight:600}
.tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;
  background:var(--accent);border-radius:1px}

/* =================== BADGES / PILLS / CHIPS =================== */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:var(--r-pill);line-height:1.4}
.badge .gl{font-size:10px;line-height:1}
/* .allow/.prompt/.deny (and .arc-*) are aliases of the .verdict-* names because opgate/web still uses them. */
.badge.verdict-allow,.badge.allow{color:var(--verdict-allow);background:var(--verdict-allow-bg)}
.badge.verdict-prompt,.badge.prompt{color:color-mix(in srgb,var(--verdict-prompt) 72%,var(--ink));background:var(--verdict-prompt-bg)}
.badge.verdict-deny,.badge.deny{color:var(--verdict-deny);background:var(--verdict-deny-bg)}
.badge.neutral{color:var(--t2);background:color-mix(in srgb,var(--t3) 14%,transparent)}
.badge.brand{color:var(--accent);background:var(--accent-soft)}

/* severity — distinct hue + glyph + label (never a single ramp) */
.sev{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600}
.sev .gl{font-size:11px}
.sev.crit,.sev.crit .gl{color:var(--sev-crit)}
.sev.high,.sev.high .gl{color:var(--sev-high)}
.sev.med,.sev.med .gl{color:var(--sev-med)}
.sev.low,.sev.low .gl{color:var(--sev-low)}

/* mono token / mention pill */
.pill{font-family:var(--mono);font-size:11.5px;padding:3px 8px;border-radius:var(--r-3);
  background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--hairline);color:var(--t2)}
[data-theme="dark"] .pill{background:color-mix(in srgb,#fff 5%,transparent)}
.pill.sens{color:var(--sens-fg);border-color:var(--sens-border);background:var(--sens-bg)}
.pill.mention{font-family:var(--body);font-weight:600;color:var(--accent);background:var(--accent-soft);border-color:transparent}

/* filter chip */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--t2);
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-3);padding:4px 10px;cursor:pointer;
  transition:all var(--dur-1) var(--ease-out)}
.chip:hover{border-color:var(--border-strong)}
.chip.on{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.chip .x{opacity:.6;cursor:pointer}.chip .x:hover{opacity:1}
.count-chip{font-family:var(--mono);font-size:11px;font-weight:600;padding:1px 7px;border-radius:var(--r-3);
  background:var(--accent-soft);color:var(--accent)}

/* =================== GATE MARKS (shape language) =================== */
.gate{width:18px;height:20px;flex:none}
.gate-row{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2)}

/* =================== CARDS / WELLS / GHOST =================== */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-3);
  box-shadow:var(--shadow-1);padding:16px 18px;animation:view-in var(--dur-3) var(--ease-out)}
.well{background:var(--panel-inset);border-radius:var(--r-3);padding:13px 15px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.well-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--t2);margin-bottom:8px}
.ghost-card{display:flex;align-items:center;justify-content:center;gap:7px;
  border:1.5px dashed var(--border);border-radius:var(--r-3);padding:18px;color:var(--t3);font-size:13px;cursor:pointer;
  transition:all var(--dur-1) var(--ease-out)}
.ghost-card:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:var(--accent-soft)}

/* =================== BANNER / CALLOUT =================== */
.banner{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:var(--r-3);
  font-size:13px;border:1px solid transparent}
.banner .ic{margin-top:1px}
.banner.info{background:var(--accent-soft);color:var(--t1);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.banner.info .ic{color:var(--accent)}
.banner.warn{background:var(--prompt-bg);color:var(--t1);border-color:color-mix(in srgb,var(--prompt) 36%,transparent)}
.banner.warn .ic{color:var(--prompt)}
.banner.error{background:var(--deny-bg);color:var(--t1);border-color:color-mix(in srgb,var(--deny) 34%,transparent)}
.banner.error .ic{color:var(--deny)}

/* =================== POPOVER / DROPDOWN / TOOLTIP =================== */
.popover{min-width:200px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-3);
  box-shadow:var(--shadow-pop);padding:6px;animation:pop-in var(--dur-2) var(--ease-out)}
.pop-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:var(--r-2);
  font-size:13px;color:var(--t1);cursor:pointer;transition:background var(--dur-1) var(--ease-out)}
.pop-item:hover,.pop-item.kfocus{background:var(--accent-soft)}
.pop-item .ic{width:15px;height:15px;color:var(--t3)}
.pop-sep{height:1px;background:var(--hairline);margin:5px 4px}
.tooltip{display:inline-block;font-size:12px;color:var(--on-accent);background:var(--ink);
  padding:5px 9px;border-radius:var(--r-2);box-shadow:var(--shadow-2);animation:pop-in var(--dur-1) var(--ease-out)}
[data-theme="dark"] .tooltip{background:#2a2d38;color:var(--t1)}

/* =================== COMMAND MENU (⌘K) =================== */
.cmdk{width:440px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-3);
  box-shadow:var(--shadow-pop);overflow:hidden;animation:pop-in var(--dur-2) var(--ease-out)}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--hairline)}
.cmdk-input input{border:0;background:transparent;outline:none;font:inherit;font-size:14px;color:var(--t1);flex:1}
.cmdk-input .ic{color:var(--t3)}
.cmdk-list{padding:6px;max-height:280px;overflow:auto}
.cmdk-group{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);padding:8px 10px 4px}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-2);font-size:13px;cursor:pointer}
.cmdk-item.sel{background:var(--accent-soft)}
.cmdk-item .ic{width:15px;height:15px;color:var(--t3)}
.cmdk-item .meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--t3)}

/* =================== AVATARS / PRESENCE =================== */
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:600;color:#fff;flex:none}
.avatar.lg{width:44px;height:44px;font-size:15px}
.avatar.sm{width:24px;height:24px;font-size:10px}
.avatar.brand{background:var(--accent-soft);color:var(--accent)}
.ava-stack{display:inline-flex}
.ava-stack .avatar{margin-left:-7px;box-shadow:0 0 0 2px var(--panel)}
.ava-stack .avatar:first-child{margin-left:0}
.presence{position:relative}
.presence::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
  background:var(--allow);box-shadow:0 0 0 2px var(--panel)}
.presence.away::after{background:var(--prompt)}
.presence.off::after{background:var(--t-dis)}

/* =================== TABLE (verdict log) =================== */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table thead th{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t3);text-align:left;font-weight:500;padding:8px 12px;border-bottom:1px solid var(--hairline)}
.table tbody td{padding:11px 12px;border-bottom:1px solid var(--hairline);color:var(--t2)}
.table tbody tr{transition:background var(--dur-1) var(--ease-out)}
.table tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.table .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--t2)}
.table .t1{color:var(--t1);font-weight:500}

/* =================== TOAST =================== */
.toast{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:var(--r-3);
  background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-pop);font-size:13px;color:var(--t1);
  animation:toast-in var(--dur-2) var(--ease-out)}
.toast .ic{width:16px;height:16px}
.toast.ok .ic{color:var(--allow)} .toast.warn .ic{color:var(--prompt)} .toast.error .ic{color:var(--deny)}

/* =================== EMPTY / LOADING =================== */
.skeleton{background:linear-gradient(100deg,var(--panel-inset) 30%,
  color-mix(in srgb,var(--t3) 12%,var(--panel-inset)) 50%,var(--panel-inset) 70%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-2)}
.spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--fill-track);
  border-top-color:var(--accent);animation:spin .7s linear infinite}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px;color:var(--t3);
  text-align:center;font-size:13px}
.empty .ic{width:24px;height:24px;color:var(--t-dis)}

/* =================== MODAL / SHEET =================== */
.modal{width:440px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-3);
  box-shadow:var(--shadow-pop);overflow:hidden;animation:pop-in var(--dur-3) var(--ease-out)}
.modal-head{padding:16px 18px;border-bottom:1px solid var(--hairline);font-family:var(--display);
  font-weight:700;font-size:16px}
.modal-body{padding:18px}
.modal-foot{padding:14px 18px;border-top:1px solid var(--hairline);display:flex;justify-content:flex-end;gap:10px}
.scrim{position:absolute;inset:0;background:rgba(20,24,40,.32);border-radius:inherit}
[data-theme="dark"] .scrim{background:rgba(0,0,0,.5)}

/* =================== DOMAIN VIZ =================== */
/* throughput sparkline drawn on view (stroke-in) */
.spark path.line{stroke-dasharray:640;stroke-dashoffset:640;animation:stroke-in 1s var(--ease-out) forwards}
/* tool-usage stacked bar */
.tbar{display:flex;align-items:center;gap:12px;padding:5px 0}
.tbar .tn{font-family:var(--mono);font-size:12px;color:var(--t2);width:92px;flex:none}
.tbar .track{flex:1;height:7px;border-radius:var(--r-pill);background:var(--fill-track);overflow:hidden;display:flex}
.tbar .track i{height:100%;transition:width var(--dur-3) var(--ease-out)}
.tbar .track i.verdict-allow,.tbar .track i.allow{background:var(--verdict-allow)} .tbar .track i.verdict-prompt,.tbar .track i.prompt{background:var(--verdict-prompt)} .tbar .track i.verdict-deny,.tbar .track i.deny{background:var(--verdict-deny)}
.tbar .tc{font-family:var(--mono);font-size:12px;color:var(--t3);width:34px;text-align:right;flex:none}
.legend{display:inline-flex;gap:14px}
.legend .lg{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--t3)}
.legend .sw{width:9px;height:9px;border-radius:2px}
.legend .sw.verdict-allow,.legend .sw.allow{background:var(--verdict-allow)}.legend .sw.verdict-prompt,.legend .sw.prompt{background:var(--verdict-prompt)}.legend .sw.verdict-deny,.legend .sw.deny{background:var(--verdict-deny)}
/* friction meter */
.fr{display:inline-flex;align-items:center;gap:9px;font-size:11px;color:var(--t3)}
.fr .bars{display:inline-flex;gap:2px}
.fr .bars i{width:3px;height:13px;border-radius:1px;background:var(--fill-track)}
.fr[data-lvl="1"] .bars i:nth-child(-n+1),.fr[data-lvl="2"] .bars i:nth-child(-n+2),
.fr[data-lvl="3"] .bars i:nth-child(-n+3),.fr[data-lvl="4"] .bars i:nth-child(-n+4),
.fr[data-lvl="5"] .bars i:nth-child(-n+5){background:var(--fill)}
/* proof / confidence dots */
.dots{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-3);cursor:pointer}
.dots:hover{background:var(--accent-soft)}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--t3);opacity:.32;transition:all var(--dur-1) var(--ease-out)}
.dots i.on{background:var(--accent);opacity:1}
.dots.pulsing i.on{animation:pulse var(--dur-2) var(--ease-out)}
/* thin progress bar */
.bar{height:5px;border-radius:var(--r-pill);background:var(--fill-track);overflow:hidden}
.bar i{display:block;height:100%;background:var(--allow);transition:width var(--dur-3) var(--ease-out)}
/* flow chips (tool combination) */
.flow{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.flow .arrow{color:var(--t3)}
/* mlld code block */
.code{font-family:var(--mono);font-size:12.5px;line-height:1.6;background:var(--syn-bg);
  border:1px solid var(--hairline);border-radius:var(--r-3);padding:13px 15px;color:var(--syn-fg);overflow:auto}
.code .kw{color:var(--syn-kw)} .code .str{color:var(--syn-str)} .code .var{color:var(--syn-var)}
.code .fn{color:var(--syn-builtin)} .code .cm{color:var(--syn-comment)} .code .num{color:var(--syn-num)}

/* live status dot (pulse on its halo, not the dot) */
.live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--allow);display:inline-block}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--allow);
  animation:pulse 2.4s var(--ease-in-out) infinite}

/* typing indicator */
.typing{display:inline-flex;gap:4px;align-items:center;padding:6px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:ty 1s var(--ease-in-out) infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}

/* hover-reveal row (list with actions) */
.lrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-2);
  transition:background var(--dur-1) var(--ease-out);position:relative}
.lrow:hover{background:var(--accent-soft)}
.lrow .actions{margin-left:auto;display:inline-flex;gap:4px;opacity:0;transition:opacity var(--dur-1) var(--ease-out)}
.lrow:hover .actions{opacity:1}

/* ============================================================
   COLLABORATION / REALTIME (mapped from fray) + extras
   Functional components only — opgate's register omits the
   playful flourishes (rocket, confetti) by design.
   ============================================================ */

/* message bubbles — user raised, agent recessed with an accent left-edge */
.bubble{max-width:520px;padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;color:var(--t1)}
.bubble.user{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  border-radius:12px 12px 4px 12px;align-self:flex-end}
.bubble.agent{border:1px solid var(--hairline);border-radius:12px 12px 12px 4px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 10%, transparent) 0%, transparent 20px), var(--panel-inset);
  box-shadow:inset 0 1px 1px color-mix(in srgb,var(--ink) 4%, transparent)}
.bubble .who{font-size:11px;font-weight:600;color:var(--t3);margin-bottom:3px}

/* reactions */
.reactions{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.reaction{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--t2);
  background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid transparent;
  border-radius:var(--r-pill);padding:2px 8px;cursor:pointer;transition:all var(--dur-1) var(--ease-out)}
.reaction:hover{color:var(--t1)}
.reaction.mine{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.reaction .n{font-variant-numeric:tabular-nums;color:var(--t3)}

/* inline reference token */
.ref{color:var(--accent);font-weight:500;cursor:pointer;background:var(--accent-soft);
  border-radius:4px;padding:0 4px}
.ref:hover{text-decoration:underline}

/* reply context + new-messages pill */
.reply-ctx{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--t3);cursor:pointer;
  max-width:360px;transition:color var(--dur-1) var(--ease-out)}
.reply-ctx:hover{color:var(--t2)}.reply-ctx .ic{width:13px;height:13px;color:var(--accent)}
.reply-ctx .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.newmsgs{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 13px;
  box-shadow:var(--shadow-1);cursor:pointer;transition:all var(--dur-1) var(--ease-out)}
.newmsgs:hover{background:var(--accent-soft);color:var(--accent);border-color:transparent}

/* composer (chat input) with mention highlight */
.composer{display:flex;align-items:flex-end;gap:9px;padding:10px 12px;background:var(--field);
  border:1px solid var(--border);border-radius:var(--r-3);box-shadow:var(--shadow-1)}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.composer .ce{flex:1;min-width:0;font-size:13.5px;line-height:1.5;color:var(--t1);outline:none}
.composer .ce .m{color:var(--accent);font-weight:600}

/* ---------- RAIL (sub-interface icon nav) ---------- */
.rail{display:inline-flex;flex-direction:column;align-items:center;gap:11px;
  width:64px;padding:12px 0;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-3);box-shadow:var(--shadow-1)}
.rail-ic{position:relative;width:42px;height:42px;display:grid;place-items:center;cursor:pointer}
.rail-glyph{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:700;
  background:var(--panel-inset);color:var(--t2);box-shadow:inset 0 0 0 1px var(--hairline);
  transition:border-radius var(--dur-3) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out)}
.rail-ic:hover .rail-glyph{border-radius:32%}
.rail-ic.on .rail-glyph{border-radius:32%;color:var(--accent);
  background:var(--accent-soft);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.rail-pill{position:absolute;left:-12px;top:50%;width:4px;height:30px;border-radius:0 4px 4px 0;
  background:var(--accent);transform:translateY(-50%) scaleY(0);transform-origin:center;
  transition:transform var(--dur-2) var(--ease-out)}
.rail-ic.on .rail-pill{transform:translateY(-50%) scaleY(1)}
.rail-ic.unread .rail-pill{background:var(--t2);transform:translateY(-50%) scaleY(.34)}

/* ---------- SIDEBAR (sub-interface section nav) ---------- */
.snav{width:212px;border:1px solid var(--border);border-radius:var(--r-3);background:var(--panel);
  box-shadow:var(--shadow-1);padding:8px;display:flex;flex-direction:column;gap:2px}
.snav-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-2);
  font-size:13px;color:var(--t2);cursor:pointer;transition:all var(--dur-1) var(--ease-out)}
.snav-row .ic{width:15px;height:15px;color:var(--t3)}
.snav-row:hover{background:var(--accent-soft);color:var(--t1)}
.snav-row.on{background:var(--accent-soft);color:var(--t1);font-weight:600}
.snav-row.on .ic{color:var(--accent)}
.snav-row .badge-n{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;
  min-width:17px;height:17px;display:grid;place-items:center;padding:0 5px;border-radius:var(--r-pill);
  background:var(--accent);color:#fff}

/* ---------- TICKETS LIST ---------- */
.tk-row{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-bottom:1px solid var(--hairline);
  cursor:pointer;transition:background var(--dur-1) var(--ease-out)}
.tk-row:hover{background:var(--accent-soft)}
.tk-main{display:flex;align-items:center;gap:9px}
.tk-status{width:8px;height:8px;border-radius:50%;flex:none;background:var(--t3)}
.tk-status.open{background:var(--accent)}.tk-status.prog{background:var(--prompt)}.tk-status.closed{background:var(--t-dis)}
.tk-title{font-size:13.5px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-sub{display:flex;gap:6px;flex-wrap:wrap;padding-left:17px}
.tk-tag{font-size:10px;font-weight:600;padding:1px 7px;border-radius:var(--r-pill);white-space:nowrap}
.tk-tag.area{color:#2563c9;background:rgba(37,99,201,.14)}
.tk-tag.need{color:#1f9d6b;background:rgba(31,157,107,.15)}
.tk-tag.type{color:#8a5cf6;background:rgba(138,92,246,.15)}
.tk-prio{font-size:10px;font-weight:700;letter-spacing:.02em;padding:1px 7px;border-radius:var(--r-pill)}
.tk-prio.p0{color:#fff;background:var(--deny)} .tk-prio.p1{color:var(--deny);background:var(--deny-bg)}
.tk-prio.p2{color:#b45309;background:var(--prompt-bg)}

/* ---------- KANBAN ---------- */
.kanban{display:flex;gap:14px}
.kb-col{width:220px;display:flex;flex-direction:column;gap:8px}
.kb-head{display:flex;align-items:center;gap:6px;padding:0 4px 2px;font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--t2)}
.kb-card{display:flex;flex-direction:column;gap:6px;padding:11px;border:1px solid var(--border);
  border-radius:var(--r-3);background:var(--panel);box-shadow:var(--shadow-1);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease-out)}
.kb-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.kb-card-top{display:flex;align-items:flex-start;gap:6px}
.kb-card-title{flex:1;font-size:13.5px;font-weight:500;line-height:1.3}
.kb-age{font-family:var(--mono);font-size:11px;color:var(--t3)}

/* ---------- ROSTER PRESENCE (status carried by shape + colour) ---------- */
.status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t2)}
.status .m{width:9px;height:9px;flex:none}
.status.active .m{border-radius:50%;background:var(--allow)}
.status.busy   .m{border-radius:50%;background:var(--accent)}
.status.idle   .m{border-radius:50%;background:var(--t3);opacity:.6}
.status.error  .m{background:var(--deny);clip-path:polygon(50% 0,100% 100%,0 100%)} /* triangle */
.status.off    .m{border-radius:50%;border:1.5px solid var(--t-dis);background:transparent}

/* ---------- USAGE DONUT (verdict mix) ---------- */
.donut .track{stroke:var(--fill-track)}
.donut .verdict-allow,.donut .arc-allow{stroke:var(--verdict-allow)} .donut .verdict-prompt,.donut .arc-prompt{stroke:var(--verdict-prompt)} .donut .verdict-deny,.donut .arc-deny{stroke:var(--verdict-deny)}
.donut .arc{fill:none;stroke-linecap:butt;transition:stroke-dasharray var(--dur-3) var(--ease-out)}
.donut-center{font-family:var(--display);font-weight:700;font-size:8px;fill:var(--t1);
  dominant-baseline:central;text-anchor:middle}

/* ---------- segmented control with sliding thumb ---------- */
.segx{position:relative;display:inline-flex;padding:3px;background:var(--panel-inset);
  border:1px solid var(--hairline);border-radius:var(--r-pill)}
.segx button{position:relative;z-index:1;font:inherit;font-size:12.5px;font-weight:600;color:var(--t3);
  border:0;background:transparent;padding:6px 15px;border-radius:var(--r-pill);cursor:pointer;
  transition:color var(--dur-1) var(--ease-out)}
.segx button.on{color:var(--accent)}
.segx .thumb{position:absolute;top:3px;bottom:3px;border-radius:var(--r-pill);background:var(--panel);
  box-shadow:var(--shadow-1);transition:left var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out)}

/* ---------- shadow/enforce state (per-bundle) ---------- */
.statepill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--border);color:var(--t2);background:var(--panel)}
.statepill .dot{width:7px;height:7px;border-radius:50%;background:var(--t3)}
.statepill.shadow .dot{background:var(--watch)}
.statepill.enforce{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,transparent);background:var(--accent-soft)}
.statepill.enforce .dot{background:var(--accent)}

/* ============================================================
   DECISIONS — the decision-review screens
   ------------------------------------------------------------
   Every class here is prefixed .dc- because several names
   (.well, .chip, .seg, .composer, .empty) already mean something
   else in the console vocabulary above. Rules, view recipes and
   the colour rationing are in README → Decisions.
   Size classes (.dc-20/24/28/32) set --sz on a mark or a stack so
   every overlap and font size scales from one number.
   ============================================================ */

.dc-20{--sz:20px;--fs:7px;--rad:5px}
.dc-24{--sz:24px;--fs:9px;--rad:6px}
.dc-28{--sz:28px;--fs:10px;--rad:7px}
.dc-32{--sz:32px;--fs:11px;--rad:8px}

/* ---------- identity: person circle, agent square, steering person ---------- */
.dc-av{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--sz,24px);height:var(--sz,24px);border-radius:50%;
  background:var(--person,var(--person-1));color:var(--on-person);
  font-family:var(--body);font-size:var(--fs,9px);font-weight:600;line-height:1}
/* Session id characters are an identifier, so they take the mono face. */
.dc-ag{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--sz,24px);height:var(--sz,24px);border-radius:var(--rad,6px);
  background:var(--agent,var(--agent-1));color:var(--on-agent);
  font-family:var(--mono);font-size:var(--fs,9px);font-weight:700;line-height:1}
/* The steering person sits behind the square, two thirds showing, so "whose agent" reads before the name does. */
.dc-steer{position:relative;display:inline-block;flex:none;
  width:calc(var(--sz,24px) * 5 / 3);height:var(--sz,24px)}
/* The ring is drawn inside each mark in the surface colour, so the cut between the two never makes them look bigger. */
.dc-steer > *{border:2px solid var(--dc-ring,var(--panel))}
.dc-steer > .dc-av{position:absolute;left:0;top:0}
.dc-steer > .dc-ag{position:absolute;top:0;left:calc(var(--sz,24px) * 2 / 3)}
.dc-actor{display:inline-flex;align-items:center;gap:8px}
.dc-actor .nm{font-size:15px;line-height:18px;font-weight:600;color:var(--t1)}
.dc-actor.minimal{gap:6px}
.dc-actor.minimal .nm{font-size:14px;font-weight:500;color:var(--t2)}
/* Sidebar lists (Sessions) name each actor at reading weight, since the list itself is the content. */
.dc-actor.list{gap:8px}
.dc-actor.list .nm{font-size:14px;line-height:18px;font-weight:400;color:var(--t1)}
.dc-sid{font-family:var(--mono);font-size:12px;line-height:16px;color:var(--t3);margin-left:8px}

/* ---------- stacks: preferences and assignees ---------- */
/* The ring is the surface colour, drawn inside the mark, so overlapping marks cut a clean gap on any panel without growing. */
.dc-stack{display:inline-flex;align-items:center}
.dc-stack > *{border:2px solid var(--dc-ring,var(--panel))}
.dc-stack > * + *{margin-left:calc(var(--sz,20px) * -.3)}
.dc-stack.agents > * + *{margin-left:calc(var(--sz,20px) * -.375)}
/* Agents and people prefer in separate stacks; mixing them would hide who is a person. */
.dc-prefs{position:relative;display:inline-flex;align-items:center;gap:10px;outline:none}
.dc-hovercard{display:none;position:absolute;z-index:20;top:calc(100% + 8px);right:0;width:270px;
  flex-direction:column;gap:8px;padding:12px 14px;background:var(--panel-2);--dc-ring:var(--panel-2);
  border:1px solid var(--border-strong);border-radius:var(--r-3);box-shadow:var(--shadow-2)}
/* focus-within keeps the card open while focus moves into it, so a keyboard user can read what a pointer user hovers. */
.dc-prefs:hover .dc-hovercard,.dc-prefs:focus .dc-hovercard,.dc-prefs:focus-within .dc-hovercard,.dc-hovercard.show{display:flex}
.dc-hovercard.show{position:static}
.dc-hc-title{font-size:13px;line-height:16px;font-weight:600;color:var(--t1)}
.dc-hc-row{display:flex;align-items:center;gap:6px;font-size:13px;line-height:16px;font-weight:500;color:var(--t2)}
.dc-add{display:inline-grid;place-items:center;flex:none;width:var(--sz,20px);height:var(--sz,20px);
  border:0;border-radius:50%;padding:0;cursor:pointer;color:var(--t2);
  background:color-mix(in srgb,var(--t3) 18%,var(--panel))}
.dc-add:hover{color:var(--t1)}
/* In dark the + sits one surface up from whatever it is on; light needs a tint because its surfaces are all near white. */
[data-theme="dark"] .dc-add{background:var(--panel-2)}
[data-theme="dark"] .dc-row:hover .dc-add,[data-theme="dark"] .dc-row.hover .dc-add,[data-theme="dark"] .dc-row:focus-within .dc-add{background:var(--panel)}
.dc-add svg{width:calc(var(--sz,20px) * .45);height:calc(var(--sz,20px) * .45)}

/* ---------- leading marks ---------- */
.dc-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%}
.dc-mark.blocking{width:8px;height:8px;background:var(--blocking)}
.dc-mark.settled,.dc-mark.yours{width:14px;height:14px;background:var(--accent)}
.dc-mark.yours{background:var(--yours)}
.dc-mark.settled::after,.dc-mark.yours::after{content:"";width:6px;height:3px;
  border:1.6px solid var(--on-mark);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.dc-mark.open{width:10px;height:10px;border:1.5px solid var(--t2)}
.dc-mark.unread{width:7px;height:7px;background:var(--accent)}
.dc-cb{display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;
  width:16px;height:16px;border-radius:var(--r-2);border:1.5px solid var(--border-strong);background:transparent}
.dc-cb.faint{border-color:var(--border)}
.dc-cb.on,.dc-cb.mixed{background:var(--accent);border-color:var(--accent)}
.dc-cb.on::after{content:"";width:7px;height:4px;border:1.8px solid var(--on-mark);
  border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.dc-cb.mixed::after{content:"";width:7px;height:1.8px;border-radius:1px;background:var(--on-mark)}

/* ---------- set reference: PR address or plan title ---------- */
.dc-ref{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:16px;color:var(--t3);text-decoration:none}
/* Blocking colours the thing being blocked, not just the dot, so the PR you can't merge is the yellow word. */
.dc-ref.blocking{color:var(--blocking-fg);font-weight:500}
a.dc-ref:hover span{text-decoration:underline}
.dc-pr{width:14px;height:14px;flex:none;fill:currentColor}
.dc-pr.open{color:var(--gh-open)} .dc-pr.draft{color:var(--gh-draft)}
.dc-pr.merged{color:var(--gh-merged)} .dc-pr.closed{color:var(--gh-closed)}
.dc-ref.blocking .dc-pr{color:var(--blocking-fg)}

/* ---------- tags: GitHub-label style ---------- */
/* Each tag sets --tag; ink, fill and outline derive from it so one hex themes for both grounds. */
.dc-tag{display:inline-block;white-space:nowrap;border:1px solid;border-radius:var(--r-pill);
  padding:2px 9px;font-size:12px;line-height:16px;font-weight:500;
  color:color-mix(in srgb,var(--tag,var(--tag-8)) var(--tag-ink-mix),var(--t1));
  background:color-mix(in srgb,var(--tag,var(--tag-8)) var(--tag-fill-mix),transparent);
  border-color:color-mix(in srgb,var(--tag,var(--tag-8)) var(--tag-line-mix),transparent)}
.dc-tag.sm{padding:1px 7px;font-size:11px;line-height:14px}

/* ---------- comment count ---------- */
.dc-cc{display:inline-flex;align-items:center;gap:4px;height:16px;font-size:13px;line-height:16px;color:var(--t2)}
.dc-cc svg{width:13px;height:13px;fill:var(--t3)}
.dc-cc.quiet{color:var(--t3)}
/* On an option, zero is the outline bubble alone so the way into comments stays visible; list rows leave the slot blank instead. */
.dc-cc.zero svg{fill:none;stroke:var(--t3);stroke-width:1.8;stroke-linejoin:round}

/* ---------- the well and its rows (house style for every list) ---------- */
.dc-well{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-3)}
.dc-row{position:relative;display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-bottom:1px solid var(--hairline);cursor:pointer;
  transition:background var(--dur-1) var(--ease-out)}
.dc-row:last-child{border-bottom:0}
.dc-row:first-child{border-top-left-radius:var(--r-3);border-top-right-radius:var(--r-3)}
.dc-row:last-child{border-bottom-left-radius:var(--r-3);border-bottom-right-radius:var(--r-3)}
.dc-row:hover{background:var(--panel-2)}
.dc-row.selected{background:color-mix(in srgb,var(--accent) 8%,var(--panel));--dc-ring:var(--panel-2)}
/* Fixed-width slots keep marks, stacks and times in vertical lanes across rows with different content. */
.dc-r-cb{display:flex;flex:none}
.dc-r-unread{display:flex;justify-content:center;flex:none;width:8px}
.dc-r-lead{display:flex;justify-content:center;align-items:center;flex:none;width:14px}
.dc-r-main{display:flex;flex-direction:column;gap:4px;flex:1 1 0;min-width:0}
.dc-r-title{font-size:15px;line-height:21px;font-weight:600;color:var(--t1)}
/* Updates sit a step quieter than what needs you; weight still follows read/unread. */
.dc-row.quiet .dc-r-title{color:var(--t2)}
/* In lists a settled row has nothing new to say, so it drops weight with its colour. */
.dc-row.quiet:not(.inbox) .dc-r-title{font-weight:500}
/* Unread is carried by weight as well as the dot, so read rows settle down at a glance. */
.dc-row.read .dc-r-title{font-weight:500}
.dc-r-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;line-height:16px;color:var(--t3)}
.dc-sep{color:var(--t3);margin:0 -2px}
.dc-r-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;width:64px}
.dc-r-as{display:flex;align-items:center;height:20px}
.dc-r-cc{display:flex;align-items:center;height:16px}
.dc-r-time{position:relative;display:flex;justify-content:flex-end;align-items:center;flex:none;width:64px;
  font-size:13px;line-height:16px;color:var(--t3);text-align:right;white-space:nowrap}
.dc-row.inbox .dc-r-time{width:56px}
.dc-done{display:none;align-items:center;justify-content:center;width:28px;height:28px;padding:0;
  background:transparent;color:var(--t1);border:1px solid var(--border-strong);border-radius:var(--r-2);cursor:pointer}
.dc-done svg{width:14px;height:14px}
.dc-done:hover{background:var(--panel)}
/* Hover swaps the time for Done, so clearing a row never needs a menu.
   Focus inside the row does the same, because a hidden button can't take focus: the row (or something in it)
   must be focusable for Done to be reachable from the keyboard. */
.dc-row:hover .dc-r-time.has-done .tm,.dc-row.hover .dc-r-time.has-done .tm,
.dc-row:focus-within .dc-r-time.has-done .tm{display:none}
.dc-row:hover .dc-r-time.has-done .dc-done,.dc-row.hover .dc-r-time.has-done .dc-done,
.dc-row:focus-within .dc-r-time.has-done .dc-done{display:inline-flex}
.dc-row.hover{background:var(--panel-2)}

.dc-bulk{display:flex;align-items:center;gap:14px;padding:8px 12px;
  background:var(--panel-2);border-radius:var(--r-2)}
.dc-bulk .n{font-size:13px;line-height:16px;font-weight:600;color:var(--t1)}
.dc-bulk .sp{flex:1}

.dc-caps{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}

/* ---------- feed: one card per event ---------- */
.dc-event{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-3);box-shadow:var(--shadow-1)}
.dc-ev-top{display:flex;gap:14px;padding:16px 18px}
.dc-ev-body{display:flex;flex-direction:column;gap:8px;flex:1 1 0;min-width:0}
.dc-ev-head{display:flex;align-items:center;gap:6px;min-height:20px}
.dc-ev-who{font-size:15px;line-height:18px;font-weight:600;color:var(--t1)}
.dc-ev-verb{flex:1 1 0;font-size:15px;line-height:18px;color:var(--t2)}
.dc-ev-time{font-size:13px;line-height:16px;color:var(--t3)}
.dc-ev-text{font-size:15px;line-height:24px;color:var(--t1);white-space:pre-wrap}
.dc-ev-text.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.dc-ev-more{align-self:flex-start;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13px;line-height:16px;font-weight:500;color:var(--accent)}
.dc-ev-q{font-size:16px;line-height:22px;font-weight:600;color:var(--t1);text-decoration:none}
.dc-ev-opts,.dc-ev-sub{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:18px;color:var(--t2)}
/* The strip under each card names the decision the event touched, so a card never floats free of its question. */
.dc-strip{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--hairline)}
.dc-strip-q{font-size:14px;line-height:18px;font-weight:600;color:var(--t1);text-decoration:none}
.dc-strip-q:hover,a.dc-ev-q:hover{text-decoration:underline}
.dc-strip-set{flex:1 1 0;display:inline-flex;align-items:center;min-width:0}
.dc-strip-note{font-size:13px;line-height:16px;color:var(--t3)}
/* By project groups events under their set, so a set's activity reads as one story. */
.dc-setcard-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--hairline)}
.dc-setcard-title{font-size:16px;line-height:20px;font-weight:600;color:var(--t1)}
.dc-ev-row{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--hairline)}
.dc-ev-row:last-child{border-bottom:0}
.dc-ev-row .dc-ev-head{min-height:24px}
.dc-ev-row .dc-ev-who,.dc-ev-row .dc-ev-verb{font-size:14px}
.dc-ev-row .dc-ev-body{gap:4px;justify-content:center}
.dc-ev-row .dc-ev-text{font-size:14px;line-height:21px;color:var(--t2)}
.dc-ev-row .dc-btn{padding:3px 9px}
.dc-setcard-head .dc-ref{flex:1 1 0}
/* The open ring reads at 2px in the feed, where it sits beside 14-16px type rather than in a dense list. */
.dc-strip .dc-mark.open,.dc-setcard-head .dc-mark.open{border-width:2px}
/* Day and project headings: "Today" carries no date because the feed only ever starts from now. */
.dc-day{margin:0;font-family:var(--display);font-size:22px;line-height:28px;font-weight:700;color:var(--t1)}
.dc-project{margin:0;font-family:var(--display);font-size:20px;line-height:24px;font-weight:700;color:var(--t1)}
/* Inbox summary: counts first, so the person knows the size of the job before the list. */
.dc-summary{display:flex;align-items:center;gap:12px;min-height:34px}
.dc-summary .s{flex:1 1 0;font-size:14px;line-height:18px;color:var(--t3)}

/* ---------- controls ---------- */
/* Rectangular segmented control: the filter-bar look. The pill .seg above stays for console toggles. */
.dc-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-2);overflow:hidden;background:transparent}
.dc-seg button{font:inherit;font-size:13px;line-height:16px;color:var(--t2);background:transparent;border:0;
  padding:5px 12px;cursor:pointer}
.dc-seg button.on{background:var(--panel-2);color:var(--t1);font-weight:600}
.dc-seg button:not(.on):hover{color:var(--t1)}
.dc-seg.sm button{font-size:12px;padding:4px 10px}
.dc-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;white-space:nowrap;cursor:pointer;
  font:inherit;font-size:13px;line-height:16px;color:var(--t2);background:transparent;
  border:1px solid var(--border);border-radius:var(--r-pill)}
.dc-chip:hover{border-color:var(--border-strong);color:var(--t1)}
.dc-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--t1);font-weight:600}
.dc-filterbar{display:flex;flex-direction:column;gap:12px}
.dc-filterbar .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dc-filterbar .row.chips{gap:8px}
.dc-filterbar .sp{flex:1}
.dc-scope{font:inherit;font-size:13px;line-height:16px;color:var(--t2);background:transparent;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-2);padding:5px 10px}
.dc-scope:hover{border-color:var(--border-strong);color:var(--t1)}
.dc-search{font:inherit;font-size:13px;line-height:16px;color:var(--t1);background:transparent;outline:none;
  border:1px solid var(--border);border-radius:var(--r-2);padding:5px 10px;width:200px}
.dc-search::placeholder{color:var(--t3)}
.dc-search:focus{border-color:var(--accent)}
.dc-link{font:inherit;font-size:13px;line-height:16px;font-weight:500;color:var(--accent);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.dc-link:hover{text-decoration:underline}
/* Decision buttons use 13px type so they sit level with the 13px meta lines around them.
   Choose, Comment and Reopen are what a reviewer is here to do, so the outlined button keeps full-strength text. */
.dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;cursor:pointer;
  padding:5px 12px;font:inherit;font-size:13px;line-height:16px;font-weight:600;color:var(--t1);
  background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-2);
  transition:background var(--dur-1) var(--ease-out)}
.dc-btn:hover{background:var(--panel-2)}
.dc-btn.q{padding:4px 10px;font-weight:500}
.dc-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.dc-btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--t1))}
.dc-btn.plain{border-color:transparent;color:var(--t2);font-weight:500}
.dc-btn.plain:hover{background:transparent;color:var(--t1)}
/* Fields take the strong border because the faint one disappears against a dark panel.
   Inside a card the field sits on the page colour; on the page itself (.page) it takes the panel colour. */
.dc-input{display:block;width:100%;padding:10px 12px;font:inherit;font-size:14px;line-height:20px;color:var(--t1);
  background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--r-2);outline:none;resize:vertical}
.dc-input::placeholder{color:var(--t3)}
.dc-input:focus{border-color:var(--accent)}
.dc-input.page{background:var(--panel)}
.dc-input.sm{padding:8px 10px;line-height:18px}
/* Compact switch for dense settings rows; .switch above is the form-sized one. */
.dc-toggle{display:inline-flex;align-items:center;width:30px;height:18px;padding:2px;cursor:pointer;
  border-radius:var(--r-pill);background:var(--panel-2);border:1px solid var(--border-strong);
  transition:background var(--dur-2) var(--ease-out)}
.dc-toggle span{width:12px;height:12px;border-radius:50%;background:var(--t3);
  transition:transform var(--dur-2) var(--ease-spring)}
/* On drops the outline and grows the knob, so on and off differ in shape as well as colour. */
.dc-toggle.on{background:var(--accent);border:0}
.dc-toggle.on span{width:14px;height:14px;background:var(--on-accent);transform:translateX(12px)}

/* ---------- top nav: the inbox dot ---------- */
.dc-nav{display:flex;align-items:center;gap:24px}
.dc-nav a{display:inline-flex;align-items:center;gap:5px;font-size:14px;line-height:18px;color:var(--t2);text-decoration:none}
.dc-nav a:hover,.dc-nav a.on{color:var(--t1)}
.dc-nav a.on{font-weight:600}
/* Unread turns the tab bold with one dot; a running count grows without saying what to do. */
.dc-nav a.unread{color:var(--t1);font-weight:600}
.dc-nav-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dc-nav-n{font-size:13px}

/* ---------- decision page: head ---------- */
.dc-crumb{display:flex;align-items:center;gap:8px;font-size:13px;line-height:16px;color:var(--t3)}
.dc-crumb .dc-ref:not(.blocking){color:var(--t2);font-weight:500}
.dc-q{margin:0;font-family:var(--display);font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.01em;color:var(--t1)}
.dc-q.set{letter-spacing:-.02em}
.dc-set-meta{display:flex;align-items:center;gap:16px;font-size:14px;line-height:18px;color:var(--t2)}
.dc-status{display:flex;align-items:center;gap:8px;min-height:16px;font-size:13px;line-height:16px;color:var(--t3)}
.dc-status .w{color:var(--t1);font-weight:500}
.dc-status .sp{flex:1}
.dc-bg{font-size:15px;line-height:23px;color:var(--t2)}

/* ---------- option cards ---------- */
.dc-opts{display:flex;flex-direction:column;gap:10px}
.dc-opt{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-3)}
[data-theme="dark"] .dc-opt{border-color:transparent}
.dc-opt-row{display:flex;align-items:flex-start;gap:14px}
.dc-opt-letter{width:18px;flex:none;font-family:var(--display);font-size:16px;line-height:20px;font-weight:700;color:var(--t2)}
.dc-opt-main{display:flex;flex-direction:column;gap:8px;flex:1 1 0;min-width:0}
.dc-opt-head{font-size:15px;line-height:20px;font-weight:600;color:var(--t1)}
.dc-opt-desc{font-size:14px;line-height:20px;color:var(--t2)}
.dc-opt-right{display:flex;align-items:center;gap:12px;flex:none;min-height:28px;margin-top:-4px;--dc-ring:var(--panel)}
.dc-opt-right .dc-cc{font-weight:500}
.dc-opt-right .dc-cc svg{width:14px;height:14px}
/* Upside and downside: one labelled line each, wrapped text aligned to the text column. */
.dc-uds{display:flex;flex-direction:column;gap:4px;margin-top:2px;padding-top:8px;border-top:1px solid var(--hairline)}
.dc-ud{display:flex;gap:8px;font-size:13px;line-height:18px}
.dc-ud-l{width:70px;flex:none;font-weight:600;color:var(--t3)}
.dc-ud-t{flex:1 1 0;color:var(--t2)}
.dc-opt.quick{padding:10px 16px}
.dc-opt.quick .dc-opt-row{align-items:center}
.dc-opt.quick .dc-opt-right{margin-top:0}
/* Brief: an open option shown as its headline only, beside a choice already made. */
.dc-opt.brief{padding:12px 16px}
.dc-opt.brief .dc-opt-row{align-items:center}
.dc-opt.brief .dc-opt-head{line-height:18px}
.dc-opt.brief .dc-opt-right{margin-top:0;min-height:0}
/* Choosing: the reason field opens inside the option; submitting empty is allowed. */
.dc-opt.choosing{padding:14px 16px;border-color:var(--accent)}
.dc-opt.choosing .dc-opt-letter{color:var(--accent)}
.dc-opt-field{display:flex;flex-direction:column;gap:10px;padding-left:32px}
.dc-opt-field .actions{display:flex;justify-content:flex-end;gap:8px}
/* Chosen (settled) is accent; your choice on a still-open decision is the same shape in green. */
.dc-opt.chosen{flex-direction:row;align-items:flex-start;gap:14px;padding:14px 16px;
  background:var(--accent-soft);border-color:var(--accent);--dc-ring:var(--accent-soft)}
.dc-opt.chosen.yours{background:var(--yours-bg);border-color:var(--yours)}
.dc-opt.chosen .dc-opt-main{gap:4px}
.dc-opt.chosen .dc-opt-right{--dc-ring:var(--panel)}
.dc-opt-check{width:18px;height:18px;margin-top:1px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--accent)}
.dc-opt-check::after{content:"";width:7px;height:3.5px;border:2px solid var(--on-mark);border-top:0;border-right:0;
  transform:translateY(-1px) rotate(-45deg)}
.dc-opt.yours .dc-opt-check{background:var(--yours)}
.dc-opt-by{display:flex;align-items:center;gap:8px;padding-top:6px;font-size:13px;line-height:16px;color:var(--t3)}
.dc-opt-by .w{color:var(--t1);font-weight:500}
.dc-opt-reason{font-size:14px;line-height:20px;color:var(--t2)}
/* Not chosen on a settled decision: headline only, outlined and quiet, still one click from "Prefer this". */
.dc-opt.collapsed{background:transparent;border-color:var(--hairline);padding:12px 16px}
.dc-opt.collapsed .dc-opt-row{align-items:center}
.dc-opt.collapsed .dc-opt-right{margin-top:0;min-height:0}
.dc-opt.collapsed .dc-opt-letter,.dc-opt.collapsed .dc-opt-head{color:var(--t3)}
.dc-opt.collapsed .dc-opt-head{font-weight:500}
/* In discussion: someone prefers this one after it was settled; their stack is what makes it worth a look. */
.dc-opt.collapsed.discussion .dc-opt-head{color:var(--t2)}
.dc-opt-dim{display:inline-flex;opacity:.6}
.dc-opt-mine{font-size:13px;line-height:16px;font-weight:500;color:var(--t1)}
.dc-suggest{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;cursor:pointer;text-align:left;
  font:inherit;font-size:14px;line-height:18px;color:var(--t3);background:transparent;
  border:1px dashed var(--border);border-radius:var(--r-3)}
.dc-suggest:hover{border-color:var(--border-strong);color:var(--t2)}

/* ---------- discussion: GitHub-style grid ---------- */
/* Names, text and the composer share one left edge; the 32px gutter only says who. */
.dc-thread{display:flex;flex-direction:column;gap:20px}
.dc-cmt{display:flex;gap:12px}
/* Marks align right in the gutter, so a steered agent (wider than 32px) hangs left and its square still meets the content edge. */
.dc-gut{display:flex;justify-content:flex-end;flex:none;width:32px}
.dc-cmt.reply .dc-gut{width:20px}
.dc-c-body{display:flex;flex-direction:column;gap:4px;flex:1 1 0;min-width:0}
.dc-c-body.sub{gap:14px}
.dc-c-head{display:flex;align-items:center;gap:6px;min-height:18px}
.dc-c-name{font-size:13px;line-height:16px;font-weight:600;color:var(--t1)}
.dc-c-time{font-size:13px;line-height:16px;color:var(--t3)}
.dc-c-text{font-size:14px;line-height:20px;color:var(--t2);white-space:pre-wrap}
/* An option subthread puts its letter in the gutter so it reads as a branch, not a comment. */
.dc-letter{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:1px solid var(--border-strong);border-radius:var(--r-2);
  font-family:var(--display);font-size:14px;line-height:18px;font-weight:700;color:var(--t2)}
.dc-composer{display:flex;gap:12px}
.dc-composer .box{display:flex;flex-direction:column;gap:8px;flex:1 1 0;min-width:0}
.dc-composer .actions{display:flex;justify-content:flex-end;gap:8px}
.dc-composer .dc-input{min-height:64px}
/* Overlays sit one surface up from the page so they read as lifted without a heavier shadow. */
.dc-popout{width:380px;display:flex;flex-direction:column;background:var(--panel-2);--dc-ring:var(--panel-2);
  border:1px solid var(--border-strong);border-radius:var(--r-3);box-shadow:var(--shadow-2)}
.dc-po-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;
  border-bottom:1px solid var(--hairline);font-size:13px;line-height:16px;font-weight:600;color:var(--t1)}
.dc-po-list{display:flex;flex-direction:column;gap:14px;padding:14px}
.dc-po-c{display:flex;gap:10px}
.dc-po-c .dc-c-body{gap:3px}
.dc-po-empty{padding:14px;font-size:13px;line-height:16px;color:var(--t3)}
.dc-po-foot{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-top:1px solid var(--hairline)}
.dc-po-foot .dc-input{min-height:56px}
.dc-po-foot .actions{display:flex;justify-content:flex-end}

/* ---------- sidebar: stakes and confidence ---------- */
.dc-side{display:flex;flex-direction:column;gap:20px;width:260px}
.dc-side-sec{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--hairline)}
.dc-side-sec:first-child{padding-top:0;border-top:0}
.dc-side-sec:has(> .dc-stakes),.dc-side-sec:has(> .dc-conf){gap:10px}
.dc-stakes{display:flex;flex-direction:column;gap:10px}
.dc-sk-row{display:flex;align-items:center;gap:10px}
.dc-sk-row svg{width:16px;height:16px;flex:none;color:var(--t1)}
.dc-sk-row svg.weight{color:var(--t2)}
.dc-sk-label{flex:1 1 0;font-size:14px;line-height:18px;color:var(--t1)}
/* The word leads and the number trails dimmed: people read "Wide", the score is there for whoever asks. */
.dc-sk-word{font-size:14px;line-height:18px;font-weight:600;color:var(--t1)}
.dc-sk-n{width:28px;flex:none;text-align:right;font-size:13px;line-height:16px;color:var(--t3);font-variant-numeric:tabular-nums}
.dc-conf{display:flex;align-items:center;gap:10px}
/* Circle size is confidence; how far it fills from the bottom is research depth; the disc behind is full scale. */
.dc-conf-circle{width:24px;height:24px;flex:none;color:var(--t1)}
.dc-conf-circle .disc{fill:color-mix(in srgb,var(--t3) 18%,transparent)}
/* Dark has a surface solid enough to be the disc; light surfaces are too close to white, so light keeps a tint. */
[data-theme="dark"] .dc-conf-circle .disc{fill:var(--panel-2)}
.dc-conf-words{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:18px;color:var(--t1)}
.dc-conf-words .sub{font-size:13px;line-height:16px;color:var(--t3)}
.dc-conf-n{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:1 1 0;font-size:13px;line-height:18px;color:var(--t3);font-variant-numeric:tabular-nums}
/* Set page "Before it can merge": done items dim, never turn green. */
.dc-mi{display:flex;align-items:center;gap:10px}
.dc-mi .l{flex:1 1 0;font-size:14px;line-height:18px;color:var(--t1)}
.dc-mi .v{font-size:13px;line-height:16px;color:var(--t3)}
.dc-mi.done .l{color:var(--t2)}
/* Done is a quiet ring: the accent check is kept for "settled" and green for "your choice". */
.dc-mi.done .dc-mark{width:8px;height:8px;background:none;border:1.5px solid var(--t3)}

/* ---------- triage step-through ---------- */
.dc-tr-bar{display:flex;align-items:center;gap:12px}
.dc-tr-title{font-size:14px;line-height:18px;font-weight:600;color:var(--t1)}
.dc-tr-pos{font-size:14px;line-height:18px;color:var(--t2)}
.dc-tr-track{flex:1 1 0;display:flex;height:4px;border-radius:2px;background:var(--fill-track)}
[data-theme="dark"] .dc-tr-track{background:var(--panel-2)}
.dc-tr-fill{height:4px;border-radius:2px;background:var(--accent)}
.dc-triage{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-3)}
/* Dark separates the card by surface alone; light keeps the outline because white on near-white needs an edge. */
[data-theme="dark"] .dc-triage{border-color:transparent}
.dc-tr-q{font-family:var(--display);font-size:20px;line-height:24px;font-weight:700;color:var(--t1)}
.dc-tr-opts{display:flex;flex-direction:column;gap:8px}
.dc-tr-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel-2);
  border:1px solid transparent;border-radius:var(--r-2);font-size:14px;line-height:18px;font-weight:600;color:var(--t1)}
.dc-tr-opt .dc-opt-letter{font-size:14px;line-height:18px;width:auto}
.dc-tr-opt.chosen{background:var(--accent-soft);border-color:var(--accent)}
.dc-tr-actions{display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid var(--hairline)}
.dc-tr-actions .dc-btn{padding:6px 12px;font-weight:500}
.dc-tr-actions .sp{flex:1}

/* ---------- settings: notification rows ---------- */
.dc-ns-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--hairline)}
.dc-ns-row:last-child{border-bottom:0}
.dc-ns-row.head{padding-top:10px;padding-bottom:10px}
.dc-ns-main{display:flex;flex-direction:column;gap:3px;flex:1 1 0;min-width:0}
.dc-ns-title{font-size:15px;line-height:18px;font-weight:600;color:var(--t1)}
.dc-ns-sub{font-size:13px;line-height:16px;color:var(--t3)}
.dc-ns-col{display:flex;justify-content:center;flex:none;width:72px;text-align:center}
/* Reasons that wait on you can't leave the inbox, so the switch is replaced by a word rather than disabled. */
.dc-ns-always{font-size:13px;line-height:16px;color:var(--t3)}

/* ---------- filter builder ---------- */
.dc-fb{width:640px;max-width:100%;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--border-strong);border-radius:var(--r-3);box-shadow:var(--shadow-2)}
.dc-fb-sec{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-bottom:1px solid var(--hairline)}
.dc-fb-label{font-size:13px;line-height:16px;font-weight:500;color:var(--t2)}
.dc-fb-cond{display:flex;align-items:center;gap:8px}
.dc-fb-cond .select{width:auto;padding-top:6px;padding-bottom:6px}
.dc-fb-cond .f{width:120px;flex:none} .dc-fb-cond .o{width:70px;flex:none} .dc-fb-cond .v{flex:1 1 0;min-width:0}
.dc-fb-x{padding:0 4px;font:inherit;font-size:14px;color:var(--t3);background:none;border:0;cursor:pointer}
.dc-fb-x:hover{color:var(--t1)}
.dc-fb-check{display:flex;align-items:center;gap:10px;font-size:14px;line-height:18px;color:var(--t1);cursor:pointer}
.dc-fb-fields{font-size:13px;line-height:16px;color:var(--t3)}
.dc-fb-foot{display:flex;align-items:center;gap:10px;padding:14px 18px}
.dc-fb-count{flex:1 1 0;font-size:13px;line-height:16px;color:var(--t3)}

/* ---------- empty state ---------- */
/* One element sitting where the list would be: a plain statement, one fact, at most one action. */
.dc-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 18px;text-align:center;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-3)}
.dc-empty svg{width:28px;height:28px;margin-bottom:6px;color:var(--t2)}
.dc-empty .t{font-size:16px;line-height:20px;font-weight:600;color:var(--t1)}
.dc-empty .f{font-size:14px;line-height:18px;color:var(--t3)}
.dc-empty .dc-btn,.dc-empty .dc-link{margin-top:10px}
.dc-empty .dc-btn{font-weight:500}

/* ---------- assign picker ---------- */
.dc-picker{width:300px;display:flex;flex-direction:column;background:var(--panel-2);--dc-ring:var(--panel-2);
  border:1px solid var(--border-strong);border-radius:var(--r-3);box-shadow:var(--shadow-2)}
.dc-pk-search{padding:10px 12px;border-bottom:1px solid var(--hairline);font-size:14px;line-height:18px;color:var(--t3)}
.dc-pk-list{display:flex;flex-direction:column;padding:6px 0}
.dc-pk-item{display:flex;align-items:center;gap:10px;padding:6px 12px;font-size:14px;line-height:18px;color:var(--t1);cursor:pointer}
.dc-pk-item:hover,.dc-pk-item.on{background:var(--panel)}
.dc-pk-item .nm{flex:1 1 0}
.dc-pk-item svg{width:14px;height:14px;color:var(--accent)}

/* ---------- keyboard focus ---------- */
/* The same ring as .btn:focus-visible, so a keyboard user sees one focus style across the console and decision views.
   Rows, segmented buttons and picker items sit flush inside a container (the segmented control clips its children),
   so their ring is drawn inside the edge rather than outside it. */
.dc-chip:focus-visible,.dc-btn:focus-visible,.dc-done:focus-visible,.dc-cb:focus-visible,.dc-add:focus-visible,
.dc-scope:focus-visible,.dc-link:focus-visible,.dc-suggest:focus-visible,.dc-ev-more:focus-visible,.dc-toggle:focus-visible,
.dc-fb-x:focus-visible,.dc-opt:focus-visible,.dc-tr-opt:focus-visible,.dc-prefs:focus-visible,
a.dc-ref:focus-visible,.dc-strip-q:focus-visible,a.dc-ev-q:focus-visible,.dc-nav a:focus-visible{
  outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 34%,transparent)}
.dc-row:focus-visible,.dc-seg button:focus-visible,.dc-pk-item:focus-visible{
  outline:none;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--accent) 34%,transparent)}