@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap');

/* === Block from template line 353 === */

:root {
  --bg:           oklch(0.155 0.005 255);
  --bg-deep:      oklch(0.13  0.005 255);
  --surface-0:    oklch(0.18  0.005 255);
  --surface-1:    oklch(0.21  0.006 255);
  --surface-2:    oklch(0.245 0.007 255);
  --surface-3:    oklch(0.28  0.008 255);

  --border:        oklch(0.27 0.008 255);
  --border-soft:   oklch(0.23 0.007 255);
  --border-strong: oklch(0.36 0.009 255);

  --text:        oklch(0.965 0 0);
  --text-mute:   oklch(0.7   0.005 255);
  --text-dim:    oklch(0.52  0.005 255);
  --text-faint:  oklch(0.4   0.005 255);

  --accent:      oklch(0.75 0.12 175);  /* primary teal */
  --accent-dim:  oklch(0.45 0.09 175);
  --accent-soft: oklch(0.30 0.06 175);

  --approve:     oklch(0.74 0.13 165);
  --reject:      oklch(0.62 0.01 255);
  --block:       oklch(0.7  0.18 25);

  --risk-low:    oklch(0.65 0.05 230);
  --risk-medium: oklch(0.78 0.14 80);
  --risk-high:   oklch(0.7  0.17 35);
  --risk-crit:   oklch(0.65 0.22 25);

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  font-feature-settings: "ss01", "cv01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

::selection { background: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--text); }

/* ───────── App shell ───────── */

.app {
  display: grid;
  grid-template-rows: 48px 1fr;
  grid-template-columns: 320px 1fr;
  grid-template-areas: "head head" "side main";
  height: 100vh;
  width: 100vw;
}
.app[data-layout="bar"] {
  grid-template-columns: 1fr;
  grid-template-areas: "head" "main";
}
.app[data-layout="bar"] .side { display: none; }
.app[data-density="comfortable"] { font-size: 14px; }
.app[data-density="compact"]     { font-size: 12.5px; }

/* ── Top filter bar (layout=bar) ── */
.filterbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.filterbar::-webkit-scrollbar { height: 4px; }
.filterbar::-webkit-scrollbar-thumb { background: var(--surface-2); }
.filterbar .fb-search {
  flex-shrink: 0;
  position: relative;
  width: 220px;
}
.filterbar .fb-search input {
  width: 100%;
  height: 28px;
  padding: 0 10px 0 28px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: 12px;
  outline: none;
}
.filterbar .fb-search input:focus { border-color: var(--accent); }
.filterbar .fb-search .search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
.filterbar .fb-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-right: 6px;
  border-right: 1px solid var(--border);
  margin-right: 0;
}
.filterbar .fb-group:last-of-type { border-right: 0; }
.filterbar .fb-group .fb-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-family: var(--mono);
  padding-right: 4px;
}
.filterbar .fb-spacer { flex: 1; }
.filterbar .fb-rules-btn {
  position: relative;
  flex-shrink: 0;
}
.filterbar .fb-rules-btn .badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-deep);
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

.head { grid-area: head; }
.side { grid-area: side; }
.main { grid-area: main; min-height: 0; overflow: hidden; }

/* ───────── Header ───────── */

.head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.brand .logo {
  width: 18px; height: 18px;
  border-radius: 4px;
  background:
    linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  position: relative;
}
.brand .logo::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  background: var(--bg-deep);
}
.brand .name { color: var(--text); font-weight: 600; }
.brand .sep  { color: var(--text-faint); }
.brand .ctx  { color: var(--text-mute); }

.head-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
}
.head-stats b {
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.head-stats .stat { display: flex; gap: 6px; align-items: baseline; }
.head-stats .stat .lbl { color: var(--text-faint); text-transform: lowercase; letter-spacing: 0.02em; }

.head-spacer { flex: 1; }

.head-actions { display: flex; align-items: center; gap: 6px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--surface-0);
  color: var(--text);
  border-radius: var(--r-2);
  font-size: 12px;
  transition: background 80ms, border-color 80ms;
}
.btn:hover { background: var(--surface-1); border-color: var(--border-strong); }
.btn:active { background: var(--surface-2); }
.btn[data-variant="primary"] {
  background: color-mix(in oklab, var(--accent) 22%, var(--surface-0));
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  color: var(--text);
}
.btn[data-variant="primary"]:hover { background: color-mix(in oklab, var(--accent) 32%, var(--surface-0)); }
.btn[data-variant="ghost"] { background: transparent; border-color: transparent; color: var(--text-mute); }
.btn[data-variant="ghost"]:hover { background: var(--surface-0); color: var(--text); }
.btn[data-variant="danger"]:hover { background: color-mix(in oklab, var(--block) 20%, var(--surface-0)); border-color: color-mix(in oklab, var(--block) 50%, var(--border)); }
.btn .kbd { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); padding-left: 4px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1;
}

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--accent);
}

/* ───────── Sidebar ───────── */

.side {
  background: var(--bg-deep);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.side-top {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-section {
  border-bottom: 1px solid var(--border);
  padding: 12px 14px 14px;
}
.side-section:last-child { border-bottom: 0; }
.side-section.scroll { overflow-y: auto; min-height: 0; flex: 1; }

.side-section h3 {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.side-section h3 .count { font-family: var(--mono); color: var(--text-dim); font-weight: 500; }

.search {
  position: relative;
}
.search input {
  width: 100%;
  height: 30px;
  padding: 0 10px 0 28px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: 12.5px;
  outline: none;
  transition: border-color 80ms, background 80ms;
}
.search input::placeholder { color: var(--text-faint); }
.search input:focus { border-color: var(--accent); background: var(--surface-1); }
.search-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; color: var(--text-faint);
}
.search .clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 4px;
  color: var(--text-faint); display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.search .clear:hover { background: var(--surface-2); color: var(--text); }

/* ── Filter chip clusters ── */
.fchip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px;
  padding: 0 8px 0 7px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-mute);
  cursor: pointer;
  user-select: none;
  transition: background 80ms, border-color 80ms, color 80ms;
  white-space: nowrap;
  min-width: 0;
}
.fchip:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-0); }
.fchip .sw {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--c, var(--text-faint));
  flex-shrink: 0;
}
.fchip .lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fchip .ct {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.fchip[data-on="1"] {
  background: color-mix(in oklab, var(--c, var(--accent)) 14%, var(--surface-1));
  border-color: color-mix(in oklab, var(--c, var(--accent)) 50%, var(--border));
  color: var(--text);
}
.fchip[data-on="1"] .ct { color: var(--text-mute); }
.fchip[data-dim="1"] { opacity: 0.42; }
.fchip[data-dim="1"]:hover { opacity: 1; }

/* Risk chip variant — segmented row */
.risk-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.risk-row .fchip { justify-content: space-between; padding: 0 8px; }
.risk-row .fchip .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em; }

/* Toggle switch (used in batch panel) */
.tgl-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px 2px;
}
.tgl-row .tgl-meta { flex: 1; }
.tgl-row .tgl-meta b { display: block; font-weight: 500; font-size: 12.5px; color: var(--text); }
.tgl-row .tgl-meta span { display: block; font-size: 11px; color: var(--text-mute); margin-top: 1px; }
.tgl {
  position: relative;
  width: 30px; height: 18px;
  border-radius: 999px;
  background: var(--surface-3);
  transition: background 120ms;
  flex-shrink: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.tgl::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--text);
  transition: transform 140ms cubic-bezier(0.4, 0.7, 0.3, 1);
}
.tgl[data-on="1"] { background: var(--accent); }
.tgl[data-on="1"]::after { transform: translateX(12px); background: var(--bg-deep); }

.side-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  display: flex; justify-content: space-between; align-items: center;
}

/* ───────── Main panel ───────── */

.main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.main .scroll-area { flex: 1; }

.subbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-mute);
  font-size: 12px;
}
.subbar .chip-summary { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.subbar .active-filter {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  background: var(--surface-0);
  color: var(--text);
}
.subbar .active-filter b { color: var(--text-mute); font-weight: 500; font-size: 10.5px; margin-right: 2px; }
.subbar .active-filter button { padding: 0 4px; color: var(--text-faint); border-radius: 999px; }
.subbar .active-filter button:hover { color: var(--text); background: var(--surface-2); }
.subbar .spacer { flex: 1; }
.subbar .sort {
  display: flex; gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 2px;
  background: var(--surface-0);
}
.subbar .sort button {
  height: 22px; padding: 0 10px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-mute);
}
.subbar .sort button[data-on="1"] { background: var(--surface-2); color: var(--text); }
.subbar .sort button:hover:not([data-on="1"]) { color: var(--text); }

.scroll-area {
  overflow-y: auto;
  min-height: 0;
  padding: 14px 18px 80px;
}
.scroll-area::-webkit-scrollbar { width: 10px; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 4px; border: 2px solid var(--bg); background-clip: content-box; }
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--surface-3); background-clip: content-box; border: 2px solid var(--bg); }

/* ───────── Group ───────── */

.group {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface-0);
  overflow: hidden;
}

.group-head {
  display: flex; align-items: stretch;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.group-head .bar {
  width: 3px;
  flex-shrink: 0;
  background: var(--type-color, var(--text-dim));
}
.group-head .meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  min-width: 0;
}
.group-head .title {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.group-head h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  font-family: var(--mono);
}
.group-head .ct {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 7px;
  height: 18px;
  display: inline-flex; align-items: center;
  font-variant-numeric: tabular-nums;
}

.dist {
  display: flex; gap: 12px;
  align-items: center;
  color: var(--text-dim);
  font-size: 11.5px;
  min-width: 0;
}
.dist .group-name { display: flex; gap: 6px; align-items: center; }
.dist .group-name .pp { font-family: var(--mono); color: var(--text-mute); }
.dist .group-name .pp b { color: var(--text); font-weight: 500; }
.dist-bar {
  display: flex; height: 4px; width: 140px; min-width: 90px;
  border-radius: 999px; overflow: hidden;
  background: var(--surface-2);
}
.dist-bar span { display: block; }
.dist-bar .seg-low    { background: color-mix(in oklab, var(--risk-low) 80%, transparent); }
.dist-bar .seg-medium { background: color-mix(in oklab, var(--risk-medium) 85%, transparent); }
.dist-bar .seg-high   { background: color-mix(in oklab, var(--risk-high) 90%, transparent); }
.dist-bar .seg-critical { background: var(--risk-crit); }

.dist .projects {
  display: flex; gap: 4px;
  font-family: var(--mono); font-size: 10.5px;
  flex-wrap: wrap;
}
.dist .projects span {
  padding: 0 5px; height: 16px;
  display: inline-flex; align-items: center;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-mute);
}
.dist .projects span b { color: var(--text); font-weight: 500; margin-right: 4px; }

.batch-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-top: 1px dashed var(--border);
  background: color-mix(in oklab, var(--type-color, var(--text-dim)) 7%, var(--surface-0));
}
.batch-bar .lbl {
  font-size: 11px;
  color: var(--text-mute);
  margin-right: 6px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.batch-bar .lbl b { color: var(--text); font-weight: 500; }
.batch-bar .spacer { flex: 1; }
.batch-bar .rule-indicator {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10.5px;
  padding: 2px 7px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 14%, var(--surface-2));
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  color: var(--text);
}
.batch-bar .rule-indicator .dot { background: var(--accent); width: 5px; height: 5px; }

.batch-btn {
  height: 26px; padding: 0 10px;
  border-radius: var(--r-2);
  font-size: 11.5px;
  border: 1px solid var(--border);
  background: var(--surface-0);
  color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
.batch-btn:hover { background: var(--surface-1); }
.batch-btn.approve { color: color-mix(in oklab, var(--approve) 90%, var(--text)); border-color: color-mix(in oklab, var(--approve) 30%, var(--border)); }
.batch-btn.approve:hover { background: color-mix(in oklab, var(--approve) 18%, var(--surface-0)); }
.batch-btn.reject  { color: var(--text-mute); }
.batch-btn.block   { color: color-mix(in oklab, var(--block) 90%, var(--text)); border-color: color-mix(in oklab, var(--block) 30%, var(--border)); }
.batch-btn.block:hover { background: color-mix(in oklab, var(--block) 18%, var(--surface-0)); }

/* ───────── Card list ───────── */

.cards { display: flex; flex-direction: column; }

.card {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  align-items: stretch;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-0);
  cursor: pointer;
  transition: background 80ms;
  outline: none;
}
.card:first-child { border-top: 0; }
.card:hover { background: var(--surface-1); }
.card[data-selected="1"] {
  background: color-mix(in oklab, var(--accent) 9%, var(--surface-1));
  box-shadow: inset 2px 0 0 var(--accent);
}
.card[data-routed="1"] {
  /* subtle hatch when a routing rule will apply */
}

.card .edge {
  background: color-mix(in oklab, var(--type-color, var(--text-dim)) 65%, transparent);
}

.card-body {
  display: grid;
  grid-template-columns: 84px 88px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  min-width: 0;
}

.card[data-density="compact"] .card-body { padding: 6px 12px; }

.card .id {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
  letter-spacing: 0.02em;
}
.card .project {
  font-size: 12px; color: var(--text); font-weight: 500;
  letter-spacing: -0.005em;
}
.card .project .pdot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  margin-right: 6px;
  background: var(--text-faint);
  vertical-align: 1px;
}

.card .summary { min-width: 0; display: flex; align-items: center; gap: 10px; }
.card .desc {
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.card .file {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 280px;
}
.card .file::before { content: "·"; padding: 0 6px; color: var(--text-faint); }

.card .meta-r {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  color: var(--text-mute);
}
.card .age { font-family: var(--mono); color: var(--text-faint); width: 36px; text-align: right; }

.card .actions { display: flex; gap: 2px; }
.card .actions button {
  width: 26px; height: 26px;
  border-radius: var(--r-2);
  color: var(--text-mute);
  display: inline-flex; align-items: center; justify-content: center;
}
.card .actions .action-text { display: none; }
.card .actions button:hover { background: var(--surface-2); color: var(--text); }
.card .actions button.approve:hover { color: var(--approve); }
.card .actions button.reject:hover  { color: var(--text); }
.card .actions button.block:hover   { color: var(--block); }

/* Disclosure chevron next to Approve — opens the inline note row. */
.card .actions button.approve-chev {
  width: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-left: -4px;        /* hug the approve button */
  padding: 0;
}
.card .actions button.approve-chev:hover { color: var(--approve); background: transparent; }
.card[data-note-open="1"] .actions button.approve-chev { color: var(--approve); }

/* The inline "approve with note" row that drops below card-body when open. */
.card-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 10px 26px;     /* match card-body padding + edge bar width */
  background: color-mix(in oklab, var(--approve) 6%, var(--surface-1));
  border-top: 1px solid color-mix(in oklab, var(--approve) 25%, var(--border-soft));
}
.card-note-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--surface-0);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.card-note-input:focus { border-color: var(--accent); }
.card-note-go {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-2);
  border: 1px solid color-mix(in oklab, var(--approve) 35%, var(--border));
  background: color-mix(in oklab, var(--approve) 18%, transparent);
  color: color-mix(in oklab, var(--approve) 90%, var(--text));
  font-size: 12px;
  font-weight: 500;
  cursor: default;
}
.card-note-go:hover { background: color-mix(in oklab, var(--approve) 28%, transparent); }
.card-note-x {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-2);
  color: var(--text-faint);
}
.card-note-x:hover { color: var(--text); background: var(--surface-2); }

/* ───────── Risk badge ───────── */

.risk {
  display: inline-flex; align-items: center; gap: 6px;
  height: 19px;
  padding: 0 7px 0 6px;
  font-size: 10.5px;
  font-family: var(--mono);
  letter-spacing: 0.03em;
  text-transform: lowercase;
  border-radius: 3px;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.risk::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: currentColor;
}
.risk[data-risk="low"]      { color: var(--risk-low);    border-color: color-mix(in oklab, var(--risk-low) 30%, var(--border)); background: color-mix(in oklab, var(--risk-low) 8%, transparent); }
.risk[data-risk="medium"]   { color: var(--risk-medium); border-color: color-mix(in oklab, var(--risk-medium) 30%, var(--border)); background: color-mix(in oklab, var(--risk-medium) 8%, transparent); }
.risk[data-risk="high"]     { color: var(--risk-high);   border-color: color-mix(in oklab, var(--risk-high) 35%, var(--border));   background: color-mix(in oklab, var(--risk-high) 10%, transparent); }
.risk[data-risk="critical"] { color: var(--risk-crit);   border-color: color-mix(in oklab, var(--risk-crit) 50%, var(--border));   background: color-mix(in oklab, var(--risk-crit) 14%, transparent); }

/* ───────── Type badge (chip variant — used in subbar & detail) ───────── */
.tbadge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 20px; padding: 0 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  background: color-mix(in oklab, var(--type-color, var(--text-dim)) 15%, var(--surface-0));
  border: 1px solid color-mix(in oklab, var(--type-color, var(--text-dim)) 40%, var(--border));
}
.tbadge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--type-color, var(--text-dim));
}

/* ───────── Detail drawer ───────── */

.drawer-veil {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(2px);
  z-index: 50;
  opacity: 0;
  animation: fadeIn 120ms forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(720px, 60vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 51;
  display: flex; flex-direction: column;
  box-shadow: -24px 0 80px rgba(0,0,0,0.4);
  animation: slideIn 160ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-head .id { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.drawer-head .spacer { flex: 1; }
.drawer-head .nav {
  display: flex; gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.drawer-head .nav button {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mute);
}
.drawer-head .nav button:hover { background: var(--surface-1); color: var(--text); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 80px;
}

.detail-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 8px 0 4px;
  color: var(--text);
  line-height: 1.3;
}
.detail-sub {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.detail-sub .filepath {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-mute);
  background: var(--surface-1); padding: 2px 7px; border-radius: 3px;
  border: 1px solid var(--border);
}

.markdown { color: var(--text); line-height: 1.6; font-size: 13.5px; }
.markdown h2 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin: 22px 0 6px;
  font-family: var(--mono);
  display: flex; align-items: center; gap: 8px;
}
.markdown h2::after {
  content: ""; flex: 1; height: 1px; background: var(--border-soft);
}
.markdown h2:first-child { margin-top: 0; }
.markdown p { margin: 0 0 10px; color: var(--text); }
.markdown code, .markdown .inline-code {
  font-family: var(--mono); font-size: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text);
}
.markdown blockquote {
  margin: 8px 0;
  padding: 6px 12px;
  border-left: 2px solid var(--accent);
  background: var(--surface-0);
  color: var(--text-mute);
  font-size: 12.5px;
}

.drawer-actions {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
}
.drawer-actions .spacer { flex: 1; }

/* Feedback panel — sits inside the drawer body, above the actions row.
   Lets the user write a note that's either Save'd alone (no status change)
   or attached when they click "approve with note". */
.drawer-feedback {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: var(--r-3);
  border: 1px solid var(--border-soft);
  background: var(--surface-1);
}
.drawer-feedback-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-mute);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.drawer-feedback-label .dim {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  text-transform: none;
  line-height: 1.45;
}
.drawer-feedback-input {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--surface-0);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}
.drawer-feedback-input:focus { border-color: var(--accent); }
.drawer-feedback-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.drawer-feedback-row .spacer { flex: 1; }
.drawer-feedback-err {
  font-size: 11.5px;
  color: var(--block);
}

@media (max-width: 768px) {
  .drawer-feedback { padding: 12px; margin-top: 16px; }
  .drawer-feedback-input { font-size: 14px; min-height: 80px; }
  .drawer-feedback-row .btn { min-height: 40px; }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/*  Brand nav (triage / activity tabs in the header)                          */
/* ─────────────────────────────────────────────────────────────────────────── */

.brand .ctx-link {
  color: var(--text-mute);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 80ms, background 80ms;
}
.brand .ctx-link:hover { color: var(--text); background: var(--surface-1); }
.brand .ctx-link.active {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/*  Activity view                                                             */
/* ─────────────────────────────────────────────────────────────────────────── */

.activity {
  padding: 0 0 60px 0;
}
.activity-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.activity-head h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.activity-head .spacer { flex: 1; }

.activity-section {
  margin: 22px 22px 0;
}
.activity-section-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0 10px;
}
.activity-section-head h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  text-transform: capitalize;
}
.activity-section-head .ct {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  background: var(--surface-1);
  padding: 1px 7px;
  border-radius: 9px;
}
.activity-section-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-faint);
}
.activity-section[data-status="running"] .activity-section-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); animation: pulse-dot 1.6s ease-in-out infinite; }
.activity-section[data-status="ready"]    .activity-section-dot { background: var(--risk-medium); }
.activity-section[data-status="done"]     .activity-section-dot { background: var(--approve); }
.activity-section[data-status="blocked"]  .activity-section-dot { background: var(--block); }
.activity-section[data-status="archived"] .activity-section-dot { background: var(--text-faint); }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 6%,  transparent); }
}

.activity-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-soft);
  border-radius: var(--r-3);
  overflow: hidden;
}

.activity-row {
  display: grid;
  grid-template-columns: 3px 1fr;
  background: var(--surface-0);
  cursor: pointer;
  transition: background 80ms;
  outline: none;
}
.activity-row:hover  { background: var(--surface-1); }
.activity-row:focus  { background: color-mix(in oklab, var(--accent) 8%, var(--surface-1)); }
.activity-row[data-status="done"]     { opacity: 0.95; }
.activity-row[data-status="archived"] { opacity: 0.6; }

.activity-edge {
  background: color-mix(in oklab, var(--type-color, var(--text-dim)) 65%, transparent);
}
.activity-row-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.activity-row-line1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-mute);
}
.activity-row-line1 .id { font-size: 10.5px; color: var(--text-faint); }
.activity-row-line1 .spacer { flex: 1; }
.activity-row-line1 .age { font-size: 11px; color: var(--text-faint); }

.activity-project {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
.activity-project .pdot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  margin-right: 5px;
  background: var(--text-faint);
  vertical-align: 1px;
}

.activity-row-line2 {
  min-width: 0;
}
.activity-desc {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.activity-row-result {
  margin-top: 6px;
  padding: 8px 10px;
  border-left: 2px solid color-mix(in oklab, var(--approve) 40%, var(--border));
  background: color-mix(in oklab, var(--approve) 5%, transparent);
  font-size: 11.5px;
  color: var(--text-mute);
  line-height: 1.5;
  font-family: var(--mono);
  border-radius: 0 4px 4px 0;
}
.activity-row[data-status="blocked"] .activity-row-result {
  border-left-color: color-mix(in oklab, var(--block) 40%, var(--border));
  background: color-mix(in oklab, var(--block) 5%, transparent);
}
.activity-result-icon {
  color: var(--text-faint);
  margin-right: 6px;
}

.activity-row-decision {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--mono);
}
.activity-decision-reason {
  color: var(--text-mute);
}

@media (max-width: 768px) {
  .activity-head { padding: 14px 14px 10px; }
  .activity-section { margin: 16px 12px 0; }
  .activity-row-body { padding: 12px; }
  .activity-row-line1 { gap: 6px; font-size: 11.5px; }
  .activity-desc { white-space: normal; line-height: 1.35; }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/*  Drawer extensions: runs + comments                                        */
/* ─────────────────────────────────────────────────────────────────────────── */

.drawer-section-label {
  margin-top: 22px;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--text-mute);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.drawer-runs { margin-top: 18px; }
.drawer-run {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
  background: var(--surface-0);
}
.drawer-run[data-state="running"] { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); }
.drawer-run[data-state="done"]    { border-color: color-mix(in oklab, var(--approve) 25%, var(--border)); }
.drawer-run[data-state="failed"]  { border-color: color-mix(in oklab, var(--block) 35%, var(--border)); }

.drawer-run-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px;
}
.drawer-run-head > span:first-child { color: var(--text); font-weight: 500; }
.drawer-run-result {
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.45;
  font-family: var(--mono);
}
.drawer-run-workspace {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-faint);
  word-break: break-all;
}

.drawer-comments { margin-top: 18px; }
.drawer-comment {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-2);
  background: var(--surface-1);
}
.drawer-comment-head {
  display: flex; gap: 6px; align-items: baseline;
  margin-bottom: 4px;
  color: var(--text-mute);
  font-size: 11.5px;
}
.drawer-comment-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ───────── Batch action panel ───────── */

.modal-veil {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  animation: fadeIn 120ms forwards;
}
.modal {
  width: min(620px, 92vw);
  max-height: 86vh;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  animation: slideUp 180ms cubic-bezier(0.2,0.7,0.3,1) both;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 16px 18px; overflow-y: auto; min-height: 0; flex: 1; }
.modal-foot {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
}
.modal-foot .spacer { flex: 1; }

.fieldset {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.fieldset .field-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-family: var(--mono);
}

.chip-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  border: 1px solid var(--border);
  background: var(--surface-0);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-mute);
  cursor: pointer;
  user-select: none;
  font-family: var(--mono);
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip[data-on="1"] {
  background: color-mix(in oklab, var(--accent) 16%, var(--surface-0));
  color: var(--text);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
}
.chip .swatch { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }

.action-row { display: flex; gap: 6px; }
.action-row .opt {
  flex: 1;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface-0);
  border-radius: var(--r-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  color: var(--text-mute);
  font-size: 12px;
}
.action-row .opt:hover { color: var(--text); border-color: var(--border-strong); }
.action-row .opt[data-on="1"] {
  color: var(--text);
  background: color-mix(in oklab, var(--bg) 35%, var(--surface-1));
  border-color: var(--border-strong);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent);
}
.action-row .opt[data-act="approve"][data-on="1"]  { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--approve) 60%, transparent); color: color-mix(in oklab, var(--approve) 90%, var(--text)); }
.action-row .opt[data-act="block"][data-on="1"]    { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--block) 60%, transparent);   color: color-mix(in oklab, var(--block) 90%, var(--text)); }
.action-row .opt[data-act="reject"][data-on="1"]   { box-shadow: inset 0 0 0 1px var(--border-strong); }
.action-row .opt[data-act="review"][data-on="1"]   { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent); }

.preview {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r-2);
  background: var(--surface-0);
  font-size: 11.5px;
  color: var(--text-mute);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
}
.preview b { color: var(--text); font-weight: 500; }
.preview .pill {
  display: inline-flex; height: 18px; padding: 0 7px;
  align-items: center; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

textarea.reason {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  padding: 8px 10px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  outline: none;
}
textarea.reason:focus { border-color: var(--accent); }

/* ───────── Rules list ───────── */

.rule-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-2);
  font-size: 11.5px;
  color: var(--text-mute);
}
.rule-item:hover { background: var(--surface-0); }
.rule-item .verb {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text);
}
.rule-item .verb[data-a="complete"] { background: color-mix(in oklab, var(--approve) 22%, transparent); }
.rule-item .verb[data-a="archive"]  { background: color-mix(in oklab, var(--text-dim) 15%, transparent); }
.rule-item .verb[data-a="block"]    { background: color-mix(in oklab, var(--block) 24%, transparent); }
.rule-item .verb[data-a="review"]   { background: color-mix(in oklab, var(--accent) 20%, transparent); }
.rule-item .desc { color: var(--text); font-family: var(--mono); font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-item .scope { color: var(--text-faint); font-family: var(--mono); }
.rule-item button.del { color: var(--text-faint); padding: 2px 4px; border-radius: 3px; font-size: 11px; }
.rule-item button.del:hover { color: var(--block); background: var(--surface-2); }
.rule-item.empty { color: var(--text-faint); text-align: center; display: block; padding: 14px 4px; font-style: italic; }

/* ───────── Empty / loading states ───────── */

.placeholder {
  margin: 60px auto;
  max-width: 380px;
  text-align: center;
  color: var(--text-mute);
}
.placeholder .glyph {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.placeholder h2 { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.placeholder p { font-size: 12.5px; line-height: 1.55; margin: 0 0 12px; }
.placeholder .meta { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 18px; }

/* ───────── Cheatsheet popover ───────── */

.cheat-veil {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 70;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 120ms forwards;
}
.cheat {
  width: min(540px, 92vw);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: 18px 22px 20px;
  font-size: 12.5px;
  animation: slideUp 160ms cubic-bezier(0.2,0.7,0.3,1) both;
}
.cheat h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cheat .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.cheat dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; }
.cheat dt { color: var(--text-mute); font-size: 12px; }
.cheat dd { margin: 0; display: flex; gap: 4px; justify-content: end; }

/* ───────── Toast ───────── */

.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 80;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  font-size: 12px;
  color: var(--text);
  animation: toastIn 160ms cubic-bezier(0.2,0.7,0.3,1) both;
  min-width: 240px;
  max-width: 360px;
}
.toast .icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.toast .icon[data-k="approve"] { background: color-mix(in oklab, var(--approve) 24%, transparent); color: var(--approve); }
.toast .icon[data-k="reject"]  { background: var(--surface-2); color: var(--text-mute); }
.toast .icon[data-k="block"]   { background: color-mix(in oklab, var(--block) 22%, transparent); color: var(--block); }
.toast .icon[data-k="rule"]    { background: color-mix(in oklab, var(--accent) 24%, transparent); color: var(--accent); }
.toast .body { flex: 1; min-width: 0; }
.toast .body b { font-weight: 500; }
.toast .body .sub { color: var(--text-mute); font-size: 11px; font-family: var(--mono); }
.toast button.undo { font-size: 11.5px; color: var(--text-mute); padding: 4px 6px; border-radius: 4px; }
.toast button.undo:hover { background: var(--surface-2); color: var(--text); }
@keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ───────── Misc ───────── */

.icon-btn {
  width: 28px; height: 28px;
  border-radius: var(--r-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mute);
  border: 1px solid transparent;
}
.icon-btn:hover { background: var(--surface-1); color: var(--text); border-color: var(--border); }

.divider { height: 1px; background: var(--border); margin: 10px 0; }

.tabular { font-variant-numeric: tabular-nums; }

.muted { color: var(--text-mute); }
.dim   { color: var(--text-faint); }
.mono  { font-family: var(--mono); }

/* Print: hide chrome (keeps the dashboard usable for screenshots) */
@media print {
  .side, .head, .subbar, .drawer, .modal-veil, .cheat-veil, .toast-stack, .twk-panel { display: none !important; }
  .app { display: block; height: auto; }
  body { overflow: visible; }
}
/* Hermes themes — each [data-theme] reassigns the root tokens.
/* === Block from template line 1487 === */
   Components read --bg, --surface-*, --text*, --border*, --accent, --risk-*
   from these. Risk and type-badge accents stay readable in every theme. */

/* ───────── midnight (default, cool dark teal) ───────── */
[data-theme="midnight"] {
  --bg:           oklch(0.155 0.005 255);
  --bg-deep:      oklch(0.13  0.005 255);
  --surface-0:    oklch(0.18  0.005 255);
  --surface-1:    oklch(0.21  0.006 255);
  --surface-2:    oklch(0.245 0.007 255);
  --surface-3:    oklch(0.28  0.008 255);
  --border:        oklch(0.27 0.008 255);
  --border-soft:   oklch(0.23 0.007 255);
  --border-strong: oklch(0.36 0.009 255);
  --text:        oklch(0.965 0 0);
  --text-mute:   oklch(0.7   0.005 255);
  --text-dim:    oklch(0.52  0.005 255);
  --text-faint:  oklch(0.4   0.005 255);
  --risk-low:    oklch(0.65 0.05 230);
  --risk-medium: oklch(0.78 0.14 80);
  --risk-high:   oklch(0.7  0.17 35);
  --risk-crit:   oklch(0.65 0.22 25);
  --approve:     oklch(0.74 0.13 165);
  --reject:      oklch(0.62 0.01 255);
  --block:       oklch(0.7  0.18 25);
}

/* ───────── ember (warm dark, sepia leaning) ───────── */
[data-theme="ember"] {
  --bg:           oklch(0.16  0.014 50);
  --bg-deep:      oklch(0.135 0.014 45);
  --surface-0:    oklch(0.185 0.016 50);
  --surface-1:    oklch(0.215 0.018 50);
  --surface-2:    oklch(0.25  0.020 50);
  --surface-3:    oklch(0.29  0.022 50);
  --border:        oklch(0.28 0.022 50);
  --border-soft:   oklch(0.24 0.018 50);
  --border-strong: oklch(0.37 0.025 50);
  --text:        oklch(0.965 0.012 60);
  --text-mute:   oklch(0.72  0.016 55);
  --text-dim:    oklch(0.54  0.018 50);
  --text-faint:  oklch(0.42  0.020 50);
  --risk-low:    oklch(0.7  0.07 200);
  --risk-medium: oklch(0.8  0.14 80);
  --risk-high:   oklch(0.72 0.17 35);
  --risk-crit:   oklch(0.65 0.22 25);
  --approve:     oklch(0.78 0.14 145);
  --reject:      oklch(0.62 0.02 55);
  --block:       oklch(0.7  0.18 25);
}

/* ───────── graphite (cool mono dark — for serious mornings) ───────── */
[data-theme="graphite"] {
  --bg:           oklch(0.16 0 0);
  --bg-deep:      oklch(0.13 0 0);
  --surface-0:    oklch(0.19 0 0);
  --surface-1:    oklch(0.22 0 0);
  --surface-2:    oklch(0.26 0 0);
  --surface-3:    oklch(0.30 0 0);
  --border:        oklch(0.28 0 0);
  --border-soft:   oklch(0.23 0 0);
  --border-strong: oklch(0.38 0 0);
  --text:        oklch(0.97 0 0);
  --text-mute:   oklch(0.7  0 0);
  --text-dim:    oklch(0.52 0 0);
  --text-faint:  oklch(0.4  0 0);
  --risk-low:    oklch(0.65 0.05 230);
  --risk-medium: oklch(0.78 0.14 80);
  --risk-high:   oklch(0.7  0.17 35);
  --risk-crit:   oklch(0.65 0.22 25);
  --approve:     oklch(0.74 0.13 165);
  --reject:      oklch(0.62 0 0);
  --block:       oklch(0.7  0.18 25);
}

/* ───────── terminal (phosphor green, high-contrast, mono-first) ───────── */
[data-theme="terminal"] {
  --bg:           oklch(0.13 0.012 155);
  --bg-deep:      oklch(0.10 0.012 155);
  --surface-0:    oklch(0.16 0.014 155);
  --surface-1:    oklch(0.19 0.016 155);
  --surface-2:    oklch(0.23 0.018 155);
  --surface-3:    oklch(0.27 0.020 155);
  --border:        oklch(0.30 0.028 155);
  --border-soft:   oklch(0.25 0.022 155);
  --border-strong: oklch(0.45 0.040 155);
  --text:        oklch(0.92 0.08 155);
  --text-mute:   oklch(0.72 0.07 155);
  --text-dim:    oklch(0.55 0.06 155);
  --text-faint:  oklch(0.40 0.05 155);
  --risk-low:    oklch(0.7  0.08 200);
  --risk-medium: oklch(0.82 0.16 90);
  --risk-high:   oklch(0.74 0.18 50);
  --risk-crit:   oklch(0.68 0.22 25);
  --approve:     oklch(0.82 0.18 145);
  --reject:      oklch(0.62 0.04 155);
  --block:       oklch(0.7  0.18 25);
}
[data-theme="terminal"] body,
[data-theme="terminal"] .app {
  font-family: var(--mono);
  letter-spacing: 0.005em;
}
[data-theme="terminal"] .brand .name,
[data-theme="terminal"] .group-head h2,
[data-theme="terminal"] .detail-title { font-family: var(--mono); }

/* ───────── paper (light minimal) ───────── */
[data-theme="paper"] {
  --bg:           oklch(0.985 0.003 250);
  --bg-deep:      oklch(0.965 0.004 250);
  --surface-0:    oklch(0.992 0.003 250);
  --surface-1:    oklch(0.965 0.004 250);
  --surface-2:    oklch(0.93  0.005 250);
  --surface-3:    oklch(0.88  0.006 250);
  --border:        oklch(0.86 0.007 250);
  --border-soft:   oklch(0.92 0.005 250);
  --border-strong: oklch(0.72 0.008 250);
  --text:        oklch(0.18 0.005 250);
  --text-mute:   oklch(0.40 0.005 250);
  --text-dim:    oklch(0.55 0.005 250);
  --text-faint:  oklch(0.68 0.005 250);
  --risk-low:    oklch(0.55 0.10 230);
  --risk-medium: oklch(0.62 0.16 65);
  --risk-high:   oklch(0.55 0.18 35);
  --risk-crit:   oklch(0.48 0.22 25);
  --approve:     oklch(0.50 0.14 165);
  --reject:      oklch(0.5  0.01 255);
  --block:       oklch(0.52 0.20 25);
}
[data-theme="paper"] ::selection { background: color-mix(in oklab, var(--accent) 25%, transparent); }
[data-theme="paper"] .kbd { background: var(--bg-deep); }
/* Hermes Agent — chat panel, briefing modal, markdown, agent action UI. */
/* === Block from template line 1621 === */

/* ───────── Markdown (used in chat + detail drawer) ───────── */

.md, .markdown { color: var(--text); line-height: 1.55; font-size: 13px; }
.md p, .markdown p { margin: 0 0 8px; }
.md p:last-child { margin-bottom: 0; }
.md .md-h, .markdown h2, .markdown h3 {
  margin: 12px 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--text);
}
.md .md-h1 { font-size: 14px; }
.md .md-h2 { font-size: 13.5px; }
.md .md-h3 { font-size: 12.5px; color: var(--text-mute); }
.md .md-h:first-child { margin-top: 0; }

.md code, .markdown .inline-code, .markdown code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 3px;
  color: var(--text);
}
.md .md-pre, .markdown pre {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  overflow-x: auto;
  margin: 8px 0;
  color: var(--text);
}
.md .md-pre code { background: transparent; border: 0; padding: 0; font-size: inherit; }
.md .md-ul, .md .md-ol { margin: 4px 0 8px; padding-left: 18px; }
.md .md-ul li, .md .md-ol li { margin: 2px 0; line-height: 1.5; }
.md .md-ul { list-style: none; padding-left: 0; }
.md .md-ul li { padding-left: 14px; position: relative; }
.md .md-ul li::before {
  content: "";
  position: absolute; left: 4px; top: 0.55em;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 999px;
}
.md .md-q, .markdown blockquote {
  margin: 8px 0;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--accent);
  color: var(--text-mute);
  font-size: 12px;
}
.md .md-hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.md a, .markdown a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.md a:hover, .markdown a:hover { border-bottom-color: var(--accent); }
.md strong { font-weight: 600; color: var(--text); }
.md em { font-style: italic; color: var(--text-mute); }

/* ───────── Chat dock (embedded in sidebar bottom half) ───────── */

.chat-dock {
  flex: 1 1 0;
  min-height: 280px;
  max-height: 60%;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  overflow: hidden;
  position: relative;
}
.chat-dock::before {
  /* drag-affordance / subtle visual separator */
  content: "";
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 40%, transparent) 50%,
    transparent 100%);
  pointer-events: none;
}
.chat-dock-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 8px 14px;
  flex-shrink: 0;
}
.chat-dock-head .chat-avatar { width: 22px; height: 22px; border-radius: 6px; }
.chat-dock-head .chat-avatar svg { width: 10px; height: 10px; }
.chat-dock-head .chat-title b { font-size: 12px; }
.chat-dock-head .chat-title span { font-size: 10px; }
.chat-dock-head .icon-btn { width: 22px; height: 22px; }
.chat-dock-head .icon-btn svg { width: 11px; height: 11px; }

.chat-dock .chat-scroll {
  padding: 4px 12px 8px;
  gap: 10px;
}
.chat-dock .msg-user .msg-bubble,
.chat-dock .msg-agent .msg-bubble {
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 12px 12px 4px 12px;
}
.chat-dock .msg-agent .msg-bubble { border-radius: 12px 12px 12px 4px; }
.chat-dock .quick-prompts { gap: 4px; padding-left: 2px; }
.chat-dock .quick-prompt { font-size: 11px; padding: 3px 8px; }

.chat-dock .chat-form {
  padding: 8px 10px 10px;
  gap: 5px;
}
.chat-dock .chat-form textarea {
  font-size: 12.5px;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 8px;
}
.chat-dock .chat-send { width: 32px; height: 32px; }
.chat-dock .chat-send svg { width: 13px; height: 13px; }

/* Agent-action rows shrink in the narrow dock */
.chat-dock .agent-action {
  grid-template-columns: 3px 1fr;
  grid-template-rows: auto auto;
}
.chat-dock .agent-action-bar { grid-row: 1 / span 2; }
.chat-dock .agent-action-body { grid-column: 2; }
.chat-dock .agent-action-accept,
.chat-dock .agent-action-done {
  grid-column: 2;
  align-self: stretch;
  border-left: 0;
  border-top: 1px solid var(--border);
  padding: 6px 10px;
  justify-content: center;
}
.chat-dock .agent-action-line { flex-wrap: wrap; font-size: 11px; }
.chat-dock .agent-action-scope { margin-left: 0; font-size: 10.5px; }
.chat-dock .agent-action-reason { font-size: 11px; }

.chat-fab {
  position: fixed;
  left: 16px; bottom: 16px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35),
              0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 90;
  cursor: pointer;
  transition: transform 120ms, box-shadow 200ms;
}
.chat-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4),
              0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}
.chat-fab .chat-fab-glyph {
  color: var(--accent);
  display: inline-flex;
}
.chat-fab .chat-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
  animation: chatPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes chatPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ───────── Chat panel ───────── */

.chat-panel {
  position: fixed;
  left: 16px; bottom: 16px;
  width: 380px;
  height: min(620px, calc(100vh - 32px));
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  z-index: 90;
  overflow: hidden;
  animation: chatIn 200ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes chatIn {
  from { transform: translateY(16px) scale(0.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
}
.chat-avatar {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(140deg, color-mix(in oklab, var(--accent) 70%, transparent), color-mix(in oklab, var(--accent) 35%, var(--surface-2)));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bg-deep);
  flex-shrink: 0;
}
.chat-title { flex: 1; min-width: 0; line-height: 1.15; }
.chat-title b { display: block; font-size: 12.5px; font-weight: 600; }
.chat-title span { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); margin-top: 1px; letter-spacing: 0.01em; }

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 8px;
  display: flex; flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.chat-scroll::-webkit-scrollbar { width: 6px; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 4px; }

/* ───────── Chat messages ───────── */

.msg { display: flex; }
.msg-user { justify-content: flex-end; }
.msg-user .msg-bubble {
  background: color-mix(in oklab, var(--accent) 22%, var(--surface-1));
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
  border-radius: 14px 14px 4px 14px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
  max-width: 80%;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg-agent { flex-direction: column; align-items: flex-start; max-width: 100%; }
.msg-agent .msg-bubble {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 12px;
  font-size: 12.5px;
  max-width: 100%;
}
.msg-agent.is-error .msg-bubble {
  background: color-mix(in oklab, var(--block) 12%, var(--surface-0));
  border-color: color-mix(in oklab, var(--block) 40%, var(--border));
}

.msg-bubble.typing {
  display: inline-flex; gap: 4px;
  padding: 12px 14px;
}
.msg-bubble.typing span {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--text-mute);
  animation: typing 1.2s infinite ease-in-out;
}
.msg-bubble.typing span:nth-child(2) { animation-delay: 0.18s; }
.msg-bubble.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* ───────── Quick prompts ───────── */

.quick-prompts {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0 0 4px;
}
.quick-prompt {
  font-size: 11.5px;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 80ms, border-color 80ms;
  text-align: left;
}
.quick-prompt:hover {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface-1));
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}

/* ───────── Inline agent actions ───────── */

.agent-actions {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
  width: 100%;
}
.agent-action {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  align-items: stretch;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 200ms;
}
.agent-action[data-done="1"] { opacity: 0.55; }
.agent-action-bar { width: 3px; }
.agent-action-body { padding: 8px 10px; min-width: 0; }
.agent-action-line {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  font-family: var(--mono);
}
.agent-action-type { font-weight: 500; }
.agent-action-arrow { color: var(--text-faint); }
.agent-action-verb { font-weight: 600; text-transform: lowercase; }
.agent-action-scope { color: var(--text-mute); font-size: 11px; margin-left: auto; }
.agent-action-reason {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 3px;
  line-height: 1.4;
}
.agent-action-accept {
  align-self: stretch;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  background: color-mix(in oklab, var(--accent) 25%, var(--surface-2));
  border-left: 1px solid var(--border);
  cursor: pointer;
  transition: background 100ms;
}
.agent-action-accept:hover { background: color-mix(in oklab, var(--accent) 40%, var(--surface-2)); }
.agent-action-done {
  align-self: stretch;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 14px;
  font-size: 11.5px;
  color: var(--approve);
  background: var(--bg-deep);
  border-left: 1px solid var(--border);
}

/* ───────── Chat input form ───────── */

.chat-form {
  display: flex; gap: 6px; align-items: flex-end;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
}
.chat-form textarea {
  flex: 1;
  resize: none;
  min-height: 34px;
  max-height: 140px;
  padding: 8px 12px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
  line-height: 1.4;
  font-family: var(--sans);
}
.chat-form textarea:focus {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  background: var(--surface-1);
}
.chat-form textarea::placeholder { color: var(--text-faint); }

.chat-send {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-deep);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 100ms, transform 80ms;
}
.chat-send:hover:not([disabled]) {
  background: color-mix(in oklab, var(--accent) 90%, white);
}
.chat-send:active:not([disabled]) { transform: scale(0.96); }
.chat-send:disabled { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; }

/* ───────── Briefing / plan modal ───────── */

.brief-load {
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 0;
}
.brief-shimmer {
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(90deg,
    var(--surface-0) 0%,
    color-mix(in oklab, var(--accent) 8%, var(--surface-1)) 50%,
    var(--surface-0) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.plan-list {
  display: flex; flex-direction: column; gap: 8px;
}
.plan-item {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  align-items: stretch;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: background 120ms, opacity 200ms;
}
.plan-item[data-state="done"] { opacity: 0.55; background: color-mix(in oklab, var(--approve) 6%, var(--surface-0)); }
.plan-item[data-state="skipped"] { opacity: 0.4; }
.plan-bar { background: var(--accent); }
.plan-body { padding: 10px 12px; min-width: 0; }
.plan-line {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  font-family: var(--mono);
  flex-wrap: wrap;
}
.plan-type { font-weight: 500; font-size: 13px; }
.plan-arrow { color: var(--text-faint); }
.plan-verb  { font-weight: 600; }
.plan-scope { color: var(--text-mute); font-size: 11.5px; }
.plan-spacer { flex: 1; }
.plan-match {
  font-family: var(--mono); font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--text);
}
.plan-conf {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--text-faint);
}
.plan-reason {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.45;
}
.plan-cta {
  align-self: center;
  display: flex; gap: 4px;
  padding: 0 10px;
}
.plan-stamp {
  align-self: stretch;
  display: inline-flex; align-items: center;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  border-left: 1px solid var(--border);
  background: var(--bg-deep);
}
.plan-stamp[data-k="accepted"] { color: var(--approve); }
.plan-stamp[data-k="skipped"]  { color: var(--text-faint); }

/* ───────── Agent-suggestion strip above group (inline) ───────── */

.agent-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--accent) 6%, var(--surface-0));
  font-size: 11.5px;
}
.agent-strip .agent-strip-spark {
  width: 16px; height: 16px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 30%, transparent);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.agent-strip .agent-strip-text {
  flex: 1; min-width: 0;
  color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-strip .agent-strip-text b { color: var(--text); font-weight: 500; }
.agent-strip button {
  font-size: 11px;
  color: var(--text-mute);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.agent-strip button:hover { color: var(--text); background: var(--surface-1); border-color: var(--border); }
.agent-strip button.accept { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────── */
/*  Mobile overrides (≤ 768px) — phone-grade triage via Tailscale.            */
/*                                                                            */
/*  The desktop layout has a 320px filter rail and a row of small icon-only   */
/*  action buttons that reveal on hover. Neither survives a touch device, so  */
/*  on mobile we force the single-column bar layout, stack cards vertically,  */
/*  and make actions a 44px-min touch target row that's always visible.       */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Layout: single column. JSX swaps to 'bar' at this breakpoint, so the
     rail Sidebar isn't even rendered — but we still need to collapse the
     grid so the header + main stack cleanly. */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "head" "main";
    height: 100dvh;          /* dvh respects iOS bottom safe area */
    width: 100vw;
  }
  .side { display: none !important; }

  /* Header: shrink, wrap, drop the noisy stats row. Keep only what's
     actionable on a phone — brand, refresh, briefing. */
  .head {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
    min-height: 52px;
  }
  .head-stats { display: none; }
  .head-spacer { display: none; }
  .head-actions { gap: 4px; margin-left: auto; }
  .head-actions .btn { height: 36px; min-width: 36px; padding: 0 10px; font-size: 13px; }
  .head-actions .btn .kbd,
  .head-actions .btn .mono { display: none; }
  /* Audit link, cheatsheet, and import are nice-to-have on phone — hide to
     keep the action row a single line. Plan-my-morning + refresh stay. */
  .head-actions > a[href="audit.html"],
  .head-actions > button[title^="Keyboard"],
  .head-actions > button[title*="hermes kanban list json"] { display: none; }
  .brand .ctx:nth-of-type(2),
  .brand .sep:nth-of-type(2) { display: none; }  /* drop the /emile suffix */

  /* Top filter bar: scroll horizontally with bigger tap targets. */
  .filterbar {
    padding: 8px 10px;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .filterbar .fb-search { width: 160px; }
  .filterbar .fb-search input { height: 36px; font-size: 14px; }
  .filterbar .fb-group { gap: 4px; padding-right: 4px; }
  .filterbar .fb-group .fb-lbl { display: none; }  /* save horizontal space */
  .filterbar .fchip,
  .filterbar [class*="fchip"] { min-height: 32px; }

  /* Subbar: simpler, no horizontal overflow worries. */
  .subbar {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px;
  }
  .subbar .sort { margin-left: auto; }
  .subbar .sort button { min-height: 30px; padding: 4px 10px; }

  /* Group header — keep the type label and count, drop the project pills */
  .group-head { padding: 10px 12px; }
  .group-head h2 { font-size: 14px; }
  .group-head .projects { display: none; }
  .group-head .dist-bar { max-width: 100%; }

  /* Batch bar: wrap, scroll horizontally if it overflows. */
  .batch-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 12px;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .batch-bar .lbl { white-space: nowrap; flex-shrink: 0; }
  .batch-btn { min-height: 36px; padding: 6px 12px; font-size: 12px; flex-shrink: 0; }
  .batch-bar .rule-indicator { flex-shrink: 0; }

  /* Cards: stack the per-row data into two lines, keep actions always
     visible as a 4-button row with 40px touch targets. */
  .card-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "summary"
      "metar";
    gap: 6px;
    padding: 12px 12px 10px 12px;
  }
  .card .id      { grid-area: top; display: inline-block; }
  .card .project { grid-area: top; display: inline-block; margin-left: 12px; }
  .card .summary { grid-area: summary; flex-direction: column; align-items: flex-start; gap: 4px; }
  .card .desc    { white-space: normal; font-size: 14px; line-height: 1.35; }
  .card .file    { max-width: 100%; font-size: 11.5px; }
  .card .file::before { display: none; }
  .card .meta-r  { grid-area: metar; justify-content: space-between; gap: 8px; }
  .card .age     { width: auto; }
  .card .actions { gap: 6px; }
  .card .actions button {
    width: 40px; height: 40px; border-radius: 8px;
    background: var(--surface-1);
    color: var(--text-mute);
  }
  .card .actions button.reject,
  .card .actions button.block {
    width: auto;
    min-width: 40px;
    padding: 0 10px;
    gap: 6px;
  }
  .card .actions .action-text {
    display: inline;
    font-size: 11px;
    font-family: var(--mono);
  }
  .card .actions button.approve { color: var(--approve); }
  .card .actions button.block   { color: var(--block); }
  .card .actions button:active  { transform: scale(0.96); background: var(--surface-2); }
  /* Chevron stays compact even on mobile so the row doesn't get crowded. */
  .card .actions button.approve-chev { width: 28px; height: 40px; font-size: 14px; }

  /* Inline note row goes full-width with bigger touch targets. */
  .card-note { padding: 10px 12px 12px 16px; gap: 8px; }
  .card-note-input { height: 40px; font-size: 14px; }
  .card-note-go    { height: 40px; padding: 0 14px; font-size: 13px; }
  .card-note-x     { width: 40px; height: 40px; }

  /* Detail drawer: full-screen on mobile so the body markdown is readable. */
  .drawer-veil { padding: 0; }
  .drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    border-radius: 0;
  }
  .drawer-head { padding: 12px; }
  .drawer-head .nav button { width: 40px; height: 40px; }

  /* Modals: full-screen sheets. */
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    display: flex; flex-direction: column;
  }
  .modal-body { flex: 1; overflow-y: auto; }
  .modal-foot { padding: 12px; gap: 8px; }
  .modal-foot .btn { min-height: 40px; padding: 0 14px; }

  /* Toasts: bottom of viewport, full-width strip. iOS safe-area aware. */
  .toast-stack {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
  }
  .toast { width: 100%; }

  /* Tweaks panel: hide on mobile — it's an authoring/preference tool that
     the user adjusts on desktop. */
  .twk-panel { display: none !important; }

  /* Bigger placeholder buttons. */
  .placeholder .btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
}

/* Small phones: tighten further. */
@media (max-width: 380px) {
  .head { padding: 6px 10px; }
  .brand .name { font-size: 14px; }
  .head-actions .btn { padding: 0 8px; font-size: 12px; }
  .card-body { padding: 10px; }
  .filterbar .fb-search { width: 130px; }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/*  Fix plan: radio cards in the detail drawer + row badge                    */
/* ─────────────────────────────────────────────────────────────────────────── */

.drawer-fixplan {
  margin-top: 18px;
}

.fixplan-source-note {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border-soft));
  border-radius: var(--r-2);
  background: color-mix(in oklab, var(--accent) 5%, var(--surface-1));
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1.45;
}

.fixplan-options {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
}

.fixplan-option {
  display: flex; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
  background: var(--surface-0);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.fixplan-option:hover { border-color: var(--border); background: var(--surface-1); }
.fixplan-option[data-on="1"] {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  background: color-mix(in oklab, var(--accent) 6%, var(--surface-1));
}
.fixplan-option.fixplan-suggestion {
  cursor: default;
  background: color-mix(in oklab, var(--surface-1) 62%, var(--surface-0));
}
.fixplan-option.fixplan-suggestion:hover {
  border-color: var(--border-soft);
  background: color-mix(in oklab, var(--surface-1) 62%, var(--surface-0));
}

.fixplan-option input[type="radio"] {
  margin: 3px 0 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.fixplan-meta { flex: 1; min-width: 0; }

.fixplan-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.fixplan-id {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 18%, var(--surface-2));
  color: color-mix(in oklab, var(--accent) 85%, var(--text));
  font-size: 11px; font-weight: 600;
  text-transform: lowercase;
}

.fixplan-label {
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.fixplan-summary {
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
}

.fixplan-tradeoff {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.45;
}

.drawer-fixplan[data-readonly="1"] .fixplan-chosen {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, var(--approve) 22%, var(--border-soft));
  border-radius: var(--r-2);
  background: color-mix(in oklab, var(--approve) 5%, var(--surface-1));
}

/* Card row badge: tells the user this card has fix options without
   forcing them to open the drawer. Click jumps straight in. */
.fixplan-badge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 8%, var(--surface-1));
  color: color-mix(in oklab, var(--accent) 80%, var(--text));
  font-size: 11px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.fixplan-badge:hover {
  background: color-mix(in oklab, var(--accent) 14%, var(--surface-1));
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
}

.fixplan-badge[data-on="1"] {
  background: color-mix(in oklab, var(--accent) 22%, var(--surface-1));
  border-color: color-mix(in oklab, var(--accent) 65%, var(--border));
}

/* Inline fix strip below a card — the primary mobile approve flow.
   Each option is a full-width tap target; picking one approves immediately. */
.card[data-has-fixes="1"][data-fix-open="1"] {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}

.card-fixes {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in oklab, var(--accent) 4%, var(--surface-0));
}
.card-fixes-hint {
  padding: 8px 14px 4px;
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}
.card-fix-note {
  height: 34px;
  margin: 6px 14px 8px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-1) 92%, var(--accent));
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}
.card-fix-note:focus {
  border-color: color-mix(in oklab, var(--accent) 70%, var(--border));
}

.card-fix-option {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-soft);
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition: background 100ms;
  min-height: 56px;
}
.card-fix-option:first-of-type { border-top: none; }
.card-fix-option:hover {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.card-fix-option:active {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
}

.card-fix-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.card-fix-label {
  font-weight: 500;
  line-height: 1.3;
}
.card-fix-summary {
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.45;
}
.card-fix-tradeoff {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.4;
}
.card-fix-go {
  color: color-mix(in oklab, var(--accent) 70%, var(--text-mute));
  font-size: 18px;
  align-self: center;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/*  Outcome chips: PR + CodeRabbit verdict + branch                           */
/* ─────────────────────────────────────────────────────────────────────────── */

.drawer-outcome { margin-top: 18px; }

.outcome-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}

.outcome-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  font-size: 11.5px;
  text-decoration: none;
  white-space: nowrap;
}
.outcome-chip:hover { background: var(--surface-2); }

a.outcome-chip.outcome-pr {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, var(--surface-1));
  color: color-mix(in oklab, var(--accent) 80%, var(--text));
}
a.outcome-chip.outcome-pr:hover {
  background: color-mix(in oklab, var(--accent) 16%, var(--surface-1));
}

.outcome-chip.outcome-cr[data-state="APPROVED"] {
  border-color: color-mix(in oklab, var(--approve) 50%, var(--border));
  background: color-mix(in oklab, var(--approve) 10%, var(--surface-1));
  color: color-mix(in oklab, var(--approve) 80%, var(--text));
}
.outcome-chip.outcome-cr[data-state="CHANGES_REQUESTED"] {
  border-color: color-mix(in oklab, var(--block) 50%, var(--border));
  background: color-mix(in oklab, var(--block) 10%, var(--surface-1));
  color: color-mix(in oklab, var(--block) 80%, var(--text));
}
.outcome-chip.outcome-cr[data-state="COMMENTED"] {
  border-color: color-mix(in oklab, var(--risk-medium) 40%, var(--border));
  background: color-mix(in oklab, var(--risk-medium) 8%, var(--surface-1));
  color: color-mix(in oklab, var(--risk-medium) 80%, var(--text));
}

/* CR loop states surfaced as chips: merged/exhausted/merge-failed sit
   alongside the PR chip on activity rows + drawer. */
.outcome-chip.outcome-merged {
  border-color: color-mix(in oklab, var(--approve) 55%, var(--border));
  background: color-mix(in oklab, var(--approve) 16%, var(--surface-1));
  color: color-mix(in oklab, var(--approve) 85%, var(--text));
  font-weight: 500;
}
.outcome-chip.outcome-cr-exhausted {
  border-color: color-mix(in oklab, var(--block) 65%, var(--border));
  background: color-mix(in oklab, var(--block) 20%, var(--surface-1));
  color: color-mix(in oklab, var(--block) 90%, var(--text));
  font-weight: 500;
  /* Animate gently so the row reads as "needs you" in a queue scan. */
  animation: pulse-need-you 2s ease-in-out infinite;
}
@keyframes pulse-need-you {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.outcome-chip.outcome-merge-failed {
  border-color: color-mix(in oklab, var(--block) 60%, var(--border));
  background: color-mix(in oklab, var(--block) 14%, var(--surface-1));
  color: color-mix(in oklab, var(--block) 85%, var(--text));
}

.outcome-status {
  margin-left: 8px;
  font-weight: 400;
  font-size: 11px;
  text-transform: lowercase;
}
.outcome-status.outcome-merged { color: color-mix(in oklab, var(--approve) 85%, var(--text)); }
.outcome-status.outcome-cr-exhausted { color: color-mix(in oklab, var(--block) 90%, var(--text)); }
.outcome-status.outcome-merge-failed { color: color-mix(in oklab, var(--block) 85%, var(--text)); }

.outcome-cr-body-head {
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.outcome-cr-body-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-mute);
  white-space: pre-wrap;
}

.outcome-cr-body.outcome-exhausted-body {
  border-color: color-mix(in oklab, var(--block) 35%, var(--border-soft));
  background: color-mix(in oklab, var(--block) 6%, var(--surface-0));
}
.outcome-cr-body.outcome-mergefail-body {
  border-color: color-mix(in oklab, var(--block) 30%, var(--border-soft));
  background: color-mix(in oklab, var(--block) 5%, var(--surface-0));
}
.outcome-chip.outcome-branch {
  font-size: 11px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outcome-cr-body {
  margin-top: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text-mute);
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
  line-height: 1.45;
}

.outcome-files { margin-top: 8px; }
.outcome-files summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-mute);
}
.outcome-files ul {
  margin-top: 6px; padding-left: 20px;
}
.outcome-files li {
  font-size: 11.5px;
  color: var(--text-mute);
}

@media (max-width: 768px) {
  .outcome-chip { height: 28px; font-size: 12px; padding: 0 12px; }
  .outcome-branch { max-width: 150px; }
}

/* Pretty markdown for the drawer — bold, bullets, fenced code. */
.markdown strong { color: var(--text); font-weight: 600; }
.markdown ul { margin: 8px 0; padding-left: 20px; }
.markdown ul li { margin: 4px 0; line-height: 1.45; }
.markdown pre.md-code {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}
.markdown pre.md-code code { background: none; padding: 0; }
.markdown p code, .markdown li code {
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 90%;
}

@media (max-width: 768px) {
  .fixplan-option { padding: 13px 12px; }
  .fixplan-summary { font-size: 13px; }
  /* On phones, the fix badge is the primary affordance — make it tappable. */
  .fixplan-badge { height: 28px; padding: 0 12px; font-size: 12.5px; }
  /* Bigger touch targets for the inline fix strip on phones. */
  .card-fix-option { padding: 14px 14px; min-height: 64px; }
  .card-fix-summary { font-size: 13px; }
}