/* Agent Console: persistent dark surfaces with shared semantic tokens. */
:root {
  color-scheme: dark;
  --page: #101112;
  --surface-1: #191a1c;
  --surface: var(--surface-1);
  --surface-2: #222426;
  --text-primary: #f1f2f3;
  --text-secondary: #b6b9bf;
  --muted: #969ba4;
  --grid: #2b2d31;
  --baseline: #3d4148;
  --border: #2d3035;
  --series-1: #79a0ef;
  --series-2: #ee9b74;
  --series-3: #68c5a2;
  --status-good: #68c5a2;
  --status-warning: #e8bc68;
  --status-serious: #ee9b74;
  --status-critical: #f08787;
  --success-text: #68c5a2;
  --accent: #79a0ef;
  --warn-bg: #3c3220;
  --warn-fg: #e8bc68;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--text-primary); font: 14px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 3px; }
::selection { background: #35496f; color: #fff; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 50; padding: 10px 16px; background: var(--surface-2); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.sidebar { width: 232px; position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; padding: 28px 16px 20px; background: #151618; border-right: 1px solid var(--border); overflow-y: auto; }
.brand { display: flex; gap: 12px; align-items: center; color: var(--text-primary); text-decoration: none; padding: 0 8px; margin-bottom: 36px; }
.brand-mark { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #40516c; background: #263248; color: #a9c3f7; border-radius: 10px; display: grid; place-items: center; }
.brand-mark svg { width: 24px; height: 24px; }
.brand-name { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.025em; }
.brand-sub { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.nav-label { display: block; padding: 0 12px; margin-bottom: 10px; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.tabs { display: flex; flex-direction: column; gap: 5px; }
.tabs .nav-label { margin-top: 27px; }
.tabs a { display: flex; gap: 12px; align-items: center; color: var(--text-secondary); text-decoration: none; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 500; transition: background 150ms, color 150ms; }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
.tabs a:hover { background: var(--surface-2); color: var(--text-primary); }
.tabs a.active { background: #253047; border-color: #35435e; color: #b9cff9; }
.pill { display: inline-block; border-radius: 6px; font-size: 11px; padding: 2px 7px; background: var(--surface-2); color: var(--text-secondary); font-weight: 550; }
#pending-pill { margin-left: auto; background: #453723; color: var(--status-warning); }
.sidebar-footer { margin-top: auto; padding: 40px 12px 0; font-size: 11px; }
.sidebar-footer .nav-label { padding: 0; }
.connection-summary { display: block; color: var(--text-secondary); line-height: 1.8; overflow-wrap: anywhere; }
.sidebar-footer a { display: inline-block; margin-top: 12px; text-decoration: none; color: var(--muted); }
.workspace { margin-left: 232px; min-width: 0; }
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 36px; border-bottom: 1px solid var(--border); }
.breadcrumb { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 12px; }
#page-location { color: var(--text-secondary); }
.mode-label { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; }
.access-summary { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:20px; }
.access-summary .badge { flex-shrink:0; white-space:nowrap; }
.access-summary .sub { margin:8px 0 0; max-width:800px; }
.access-active { color:var(--status-good); border-color:var(--status-good); }
.authorized-layout { align-items:start; }
.authorized-list { flex:2 1 500px; }
.authorized-form { flex:1 1 300px; }
.authorized-form .conn-form { display:grid; gap:14px; margin-top:20px; }
.authorized-form .conn-form label { font-size:12px; }
.person-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.role-permissions { margin-top:20px; }
.role-permissions > summary, #ppl-pending > summary { cursor:pointer; color:var(--text-secondary); font-weight:550; }
.role-permissions[open] > summary { margin-bottom:16px; }
#ppl-pending { margin-top:16px; border-top:1px solid var(--border); padding-top:16px; }
.authorized-list .section-heading { flex-wrap:wrap; }
.topbar { position: sticky; top: 0; z-index: 12; background: var(--page); }
.installation-control { display: flex; align-items: center; gap: 10px; min-width: 0; }
.installation-control label { color: var(--muted); font-size: 11px; }
.installation-control select { min-width: 180px; font-weight: 600; background: var(--surface-1); }
.installation-badge { padding: 3px 9px; border-radius: 5px; color: #b9cff9; background: #253047; font-size: 11px; font-weight: 650; }
body[data-environment="live"] .installation-badge { color: #f0cc87; background: #3c3220; }
body[data-environment="live"] .installation-control select { border-color: #806536; }
.installation-context { padding: 8px 36px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--muted); background: #151618; }
@media (max-width: 760px) {
  .topbar:has(.installation-control:not([hidden])) { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: 10px; gap: 8px; }
  .installation-control { flex: 1 1 100%; }
  .installation-control select { flex: 1; min-width: 0; }
  .installation-context { padding: 8px 20px; }
}
.view { max-width: 1600px; margin: 0 auto; padding: 32px 36px 48px; }
.page-header { margin-bottom: 28px; }
.eyebrow { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.035em; line-height: 1.3; }
.page-header p { margin: 8px 0 0; font-size: 13px; color: var(--muted); max-width: 720px; }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 22px; min-width: 0; }
.card h2 { margin: 0 0 6px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.sub, .meta { color: var(--muted); font-size: 12px; }
.card .sub { color: var(--muted); font-size: 12px; margin: 0 0 18px; line-height: 1.65; }
.row { display: flex; gap: 20px; flex-wrap: wrap; }
.grow { flex: 1 1 340px; min-width: 0; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
select, input[type="text"], input[type="password"], input[type="number"], input[type="search"], textarea { background: var(--page); color: var(--text-primary); border: 1px solid var(--baseline); border-radius: 7px; padding: 9px 11px; font: inherit; font-size: 12px; max-width: 100%; min-width: 0; transition: border-color 150ms; }
select { cursor: pointer; text-overflow: ellipsis; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: #636873; }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
textarea { line-height: 1.65; }
button { background: var(--accent); color: #111a2a; border: 1px solid transparent; border-radius: 7px; padding: 9px 14px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 150ms, border-color 150ms; }
button:hover { background: #9ab8f3; }
button.ghost { background: var(--surface-2); color: var(--text-secondary); border-color: var(--baseline); }
button.ghost:hover { color: var(--text-primary); background: #2e3136; border-color: #636873; }
button.danger { background: #552d32; color: #ffb4b4; }
button:disabled { opacity: .5; cursor: default; }
.empty { color: var(--muted); padding: 52px 20px; text-align: center; font-size: 13px; line-height: 1.7; }
.error-note { color: var(--status-critical); font-size: 13px; overflow-wrap: anywhere; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; }
.feed-count { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.activity-filters { padding: 16px; background: var(--page); border: 1px solid var(--border); border-radius: 9px; }
.filter-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 115px; min-width: 0; color: var(--muted); font-size: 11px; }
.filter-search { flex: 2 1 200px; }
.activity-filters button { align-self: flex-end; }
.feed-heading { display: grid; grid-template-columns: 124px 12px 1fr auto; gap: 12px; padding: 0 12px 12px; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
/* ---- feed ---- */
.feed { display: flex; flex-direction: column; }
.feed-item {
  display: grid;
  grid-template-columns: 124px 12px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 18px 12px;
  border-top: 1px solid var(--grid);
  align-items: baseline;
}
.feed-item:first-child { border-top: 0; }
.feed-ts { color: var(--muted); font-size: 12px; white-space: nowrap; }
.kind-dot { width: 9px; height: 9px; border-radius: 50%; align-self: start; margin-top: 6px; }
.kind-action .kind-dot { background: var(--series-1); }
.kind-conversation .kind-dot { background: var(--series-2); }
.kind-escalation .kind-dot { background: var(--series-3); }
.kind-error .kind-dot { background: var(--status-critical); }
.feed-summary { min-width: 0; }
.feed-person { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; color: var(--text-primary); }
.feed-person-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); font-size: 10px; font-weight: 600; }
.feed-person-label { color: var(--muted); font-size: 11px; font-weight: 400; }
.feed-person-unknown { color: var(--muted); }
.feed-summary .meta { color: var(--muted); font-size: 12px; }
.feed-meta-right { color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
.badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 7px; border: 1px solid var(--baseline);
  color: var(--text-secondary);
}
.badge.err { border-color: var(--status-critical); color: var(--status-critical); }
details.detail summary { cursor: pointer; color: var(--muted); font-size: 12px; }
details.detail pre {
  margin: 6px 0 0; padding: 8px; background: var(--page);
  border-radius: 8px; overflow: auto; max-height: 240px; font-size: 12px;
}

/* ---- approvals ---- */
.approval {
  border-top: 1px solid var(--grid);
  padding: 12px 4px;
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
}
.approval:first-child { border-top: 0; }
.approval .body { flex: 1 1 380px; min-width: 0; }
.approval .actions { display: flex; gap: 8px; }
.approval .args { margin-top: 4px; }
.status-tag { font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 7px; }
.status-pending  { background: color-mix(in oklab, var(--status-warning) 22%, transparent); }
.status-executed { background: color-mix(in oklab, var(--status-good) 20%, transparent); }
.status-rejected { background: color-mix(in oklab, var(--muted) 22%, transparent); }
.status-failed   { background: color-mix(in oklab, var(--status-critical) 22%, transparent); }

/* ---- policies ---- */
.rule-row { display: grid; grid-template-columns: 220px 1fr 34px; gap: 8px; margin-bottom: 8px; }
.rule-row textarea { resize: vertical; min-height: 38px; grid-column: 1 / -1; }
.version-item { border-top: 1px solid var(--grid); padding: 8px 4px; font-size: 13px; }
.version-item:first-child { border-top: 0; }
.save-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

/* ---- metrics ---- */
.metrics-tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.metrics-tabs a { padding:10px 20px; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; font-weight:600; }
.metrics-tabs a:hover { color:var(--text-primary); }
.metrics-tabs a[aria-current="page"] { color:var(--accent); border-bottom-color:var(--accent); }
.metrics-coverage { margin-bottom:20px; }
.metrics-charts { margin-bottom:20px; }
.metrics-table { min-width:620px; }
.metrics-row-link { padding:0; border:0; background:transparent; color:var(--accent); text-align:left; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.metrics-row-link:hover { background:transparent; text-decoration:underline; }
.metrics-sheet { position:fixed; inset:0 0 0 auto; height:100dvh; max-height:100dvh; width:min(640px, 100vw); max-width:100vw; margin:0; border:0; border-left:1px solid var(--border); padding:24px; background:var(--surface-1); color:var(--text-primary); overflow-y:auto; }
.metrics-sheet::backdrop { background:rgb(0 0 0 / .6); }
.metrics-sheet-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.metrics-sheet-header h2 { font-size:20px; overflow-wrap:anywhere; }
.metrics-sheet h3 { font-size:14px; margin-top:24px; }
.request-history article { border-top:1px solid var(--border); padding:16px 0; }
.request-history-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--muted); }
.request-summary { white-space:pre-wrap; overflow-wrap:anywhere; }
.metrics-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.tile .label { color: var(--muted); font-size: 12px; }
.tile .value { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; }
.tile .hint { color: var(--text-secondary); font-size: 12px; }
.chart-wrap { margin-top: 8px; }
.chart-svg { display: block; width: 100%; height: auto; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.tooltip {
  position: fixed; z-index: 20; pointer-events: none;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  padding: 7px 10px; font-size: 12.5px; max-width: 280px;
}
.tooltip .t-title { font-weight: 650; margin-bottom: 2px; }
.tooltip .t-row { display: flex; justify-content: space-between; gap: 14px; color: var(--text-secondary); }
.tooltip .t-row b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

table.plain { width: 100%; border-collapse: collapse; font-size: 13px; }
table.plain th { text-align: left; color: var(--muted); font-weight: 550; padding: 4px 8px; border-bottom: 1px solid var(--baseline); }
table.plain td { padding: 4px 8px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }

/* The decision selector sits between the rule id and its text: a rule that is
   not bound to a decision the agent can actually make is refused on save, so
   the field is deliberately as prominent as the rule text itself. */
.rule-row select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
}
.rule-row select:invalid,
.rule-row select[value=""] {
  color: var(--text-secondary);
}

/* Behaviour surface: the tool inventory reads as a list of capabilities, so
   writes are visually separated from reads — "what can it change" is the
   question, and it must be answerable at a glance rather than by counting. */
.tool-list { display: flex; flex-direction: column; gap: 6px; }
.tool-row summary { display: flex; align-items: center; gap: 8px; }
.tool-row pre { white-space: pre-wrap; margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
.pill-write { background: var(--warn-bg, #fde68a); color: var(--warn-fg, #78350f); }

/* ---------- references tab ---------- */
.pb-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr 0.8fr 34px; gap: 8px; margin-bottom: 8px; }
.pb-row input { min-width: 0; }
.pb-row textarea { resize: vertical; min-height: 54px; grid-column: 1 / -1; }
.pb-preview { background: var(--grid, #f1f5f9); border-radius: 8px; padding: 10px 12px; margin: 4px 0 10px; font-size: 13px; white-space: pre-wrap; grid-column: 1 / -1; }
.pb-preview .unfilled { color: var(--status-critical); font-weight: 600; }
.coverage-bar { height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; margin: 6px 0; }
.coverage-bar > div { height: 100%; background: var(--series-3); }
table.plain td, table.plain th { padding: 3px 10px 3px 0; text-align: left; font-size: 13px; }

/* ---------- conversation Q/A + tool traces ---------- */
.qa { font-size: 13px; display: grid; gap: 6px; padding: 8px 0; }
.qa-q, .qa-a { white-space: pre-wrap; }
.qa-q b, .qa-a b { display: inline-block; width: 18px; color: var(--muted); }
.trace-body { padding: 4px 0 4px 10px; border-left: 2px solid var(--grid); }
.trace-call summary { font-size: 12.5px; }
.trace-call pre { max-height: 260px; overflow: auto; }

/* settings */
.conn-form { display: flex; flex-direction: column; gap: 8px; }
.conn-form input, .conn-form select { width: 100%; box-sizing: border-box; }
.conn-row .actions { margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.picker-hint { margin-left: 8px; }

/* people */
.matrix { border-collapse: collapse; width: 100%; font-size: 13px; }
.matrix th, .matrix td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border, #e5e7eb); vertical-align: top; }
.matrix th:not(:first-child), .matrix td:not(:first-child) { text-align: center; width: 120px; }
.ppl-row .actions { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.picker-note { display: block; margin-top: 4px; }

.e-requires-wrap { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-secondary); display: flex; gap: 8px; align-items: center; }
.e-requires-wrap select { font-size: 12.5px; }
.e-autosend-wrap { margin-left: 14px; display: inline-flex; gap: 6px; align-items: center; }

.e-recipients { grid-column: 3 / 5; display: flex; flex-direction: column; gap: 4px; }
.rcp-row { display: grid; grid-template-columns: 84px 1fr 0.8fr auto 28px; gap: 6px; align-items: center; }
.rcp-am { font-size: 12px; color: var(--text-secondary); white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.rcp-row input { min-width: 0; }
.rcp-add { align-self: flex-start; font-size: 12px; padding: 2px 8px; }
table.vars td:first-child { white-space: nowrap; }
table.vars { margin-top: 4px; }

/* ---------- playbook scope: inherited defaults ---------- */
.inherited { border: 1px solid var(--grid); border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; }
.inh-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 0; }
.inh-off { font-size: 12px; padding: 1px 8px; }
.pb-row-disabled { grid-template-columns: 180px 1fr 34px; opacity: 0.75; }

/* ---------- recipient row: person / channel ---------- */
.rcp-row { align-items: center; }
.rcp-person { display: contents; }
.rcp-person[hidden] { display: none; }
.rcp-channel { grid-column: 2 / 5; }
.rcp-mode, .rcp-channel { font-size: 12.5px; }

/* Consistent detail surfaces and responsive editors. */
.feed-item:hover { background: #1e2023; }
.feed-summary { overflow-wrap: anywhere; }
.feed-summary > div:first-child { font-size: 13px; line-height: 1.65; }
.feed-summary .meta { margin-top: 5px; font-size: 11px; }
.feed-meta-right { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 165px; white-space: normal; }
.badge { background: var(--surface-2); border-color: var(--border); font-weight: 500; overflow-wrap: anywhere; }
details.detail { margin-top: 8px; }
details.detail summary:hover { color: var(--text-primary); }
details.detail pre { padding: 14px; border: 1px solid var(--border); }
.qa { gap: 10px; }
.qa-q, .qa-a { background: var(--page); padding: 12px; border-radius: 8px; }
.qa-a { border-left: 2px solid var(--accent); }
.version-item, .approval { padding: 18px 0; }
.version-item .meta { margin-top: 6px; overflow-wrap: anywhere; }
.tiles { gap: 16px; margin-bottom: 20px; }
.tile { padding: 20px; }
.tile .value { font-size: 27px; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.tile .label { font-weight: 500; }
.tile .hint { color: var(--muted); }
#conn-fields { display: grid; gap: 10px; }
.conn-form { gap: 12px; }
.conn-form label { display: grid; gap: 6px; color: var(--text-secondary); font-size: 11px; }
.conn-row .actions, .ppl-row .actions { flex-wrap: wrap; margin-top: 12px; }
.rule-row, .pb-row { border: 1px solid var(--border); background: var(--page); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.rule-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
.pb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr) 36px; }
.pb-row > *, .rcp-row > * { min-width: 0; }
.e-requires-wrap { flex-wrap: wrap; }
.table-scroll, #ppl-matrix { overflow-x: auto; }
table.plain th, table.plain td, .matrix th, .matrix td { padding: 12px 10px; }
table.plain th, .matrix th { background: var(--page); font-size: 11px; }
.matrix { min-width: 620px; }
table.plain tbody tr:hover, .matrix tbody tr:hover { background: var(--surface-2); }
@media (min-width: 1600px) { .view { padding-top: 40px; } }
@media (max-width: 1100px) {
  .sidebar { width: 200px; padding-inline: 12px; }
  .workspace { margin-left: 200px; }
  .view { padding: 28px 24px; }
  .topbar { padding-inline: 24px; }
  .feed-item, .feed-heading { grid-template-columns: 108px 10px minmax(0, 1fr); }
  .feed-meta-right { grid-column: 3; justify-content: flex-start; max-width: none; }
  .feed-heading > :last-child { display: none; }
  .pb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .e-recipients { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  .sidebar { position: relative; width: auto; padding: 16px; border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .brand { margin-bottom: 18px; padding: 0; }
  .sidebar > .nav-label, .tabs .nav-label, .sidebar-footer { display: none; }
  .tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; gap: 4px; }
  .tabs a { flex-shrink: 0; padding: 9px 11px; gap: 7px; }
  .nav-icon { width: 16px; height: 16px; }
  .workspace { margin-left: 0; }
  .topbar { height: 48px; padding-inline: 20px; }
  .view { padding: 24px 16px 40px; }
  h1 { font-size: 25px; }
  .page-header { margin-bottom: 22px; }
  .card { padding: 18px; }
  .grow { flex-basis: 100%; }
  .filter-field, .filter-search { flex-basis: calc(50% - 10px); }
  .filter-search { flex-basis: 100%; }
  .feed-heading { display: none; }
  .feed-item { grid-template-columns: 10px minmax(0, 1fr); gap: 8px; padding: 18px 0; }
  .feed-ts { grid-column: 2; grid-row: 1; }
  .kind-dot { grid-column: 1; grid-row: 1; }
  .feed-summary, .feed-meta-right { grid-column: 2; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 16px; }
  .tile .value { font-size: 23px; overflow-wrap: anywhere; }
  .rule-row { grid-template-columns: minmax(0, 1fr) 36px; }
  .rule-row select { grid-column: 1; grid-row: 2; }
  .rule-row button { grid-column: 2; grid-row: 1; }
  .rcp-row { grid-template-columns: 70px minmax(0, 1fr) minmax(0, .8fr) auto 28px; gap: 4px; }
  .e-autosend-wrap { margin-left: 0; }
  .picker-hint { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

.reference-guide summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.reference-guide summary span { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 10px; }
.reference-guide[open] summary { margin-bottom: 16px; }
.reference-guide .vars { min-width: 600px; }
#p-editor, #ref-body { color: var(--text-primary); }
@media (max-width: 760px) {
  .reference-guide summary span { display: block; margin: 6px 0 0; }
  .pb-row { grid-template-columns: minmax(0, 1fr) 36px; }
  .pb-row > .e-id { grid-column: 1; grid-row: 1; }
  .pb-row > .e-label { grid-column: 1 / -1; grid-row: 2; }
  .pb-row > .e-del { grid-column: 2; grid-row: 1; padding: 8px; }
  .pb-row .e-recipients { grid-column: 1 / -1; grid-row: 3; }
  .rcp-row { grid-template-columns: 72px minmax(0, 1fr) 28px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
  .rcp-person input { grid-column: 1 / 3; }
  .rcp-am { grid-column: 1 / 3; }
  .rcp-row > button { grid-column: 3; grid-row: 1; padding: 4px; }
  .rcp-channel { grid-column: 1 / 3; }
}

/* Compact playbook workspace: keep routing, message, and save controls together. */
.playbook-layout { display: grid; gap: 12px; margin-top: 12px; }
.playbook-card { padding: 12px; }
.playbook-card h2 { font-size: 16px; }
.playbook-card > .sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.playbook-card .pb-row { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 8px 20px; padding: 12px; margin-bottom: 8px; }
.playbook-card button { font-size: 12px; min-height: 34px; }
.playbook-card .e-del, .playbook-card .rcp-del { background: transparent; border-color: transparent; color: var(--muted); }
.playbook-card .e-del:hover, .playbook-card .rcp-del:hover { color: var(--status-critical); background: #302326; }
.pb-identity { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; grid-column: 1 / -1; }
.pb-field { display: flex; flex-wrap: wrap; gap: 5px; align-content: start; align-items: baseline; min-width: 0; color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.playbook-card .pb-field > input, .playbook-card .pb-field > select, .playbook-card .pb-field > textarea { display: block; flex: 0 0 100%; width: 100%; min-width: 0; min-height: 36px; padding: 7px 10px; font-size: 13px; color: var(--text-primary); background: var(--surface-1); border-color: #484c54; }
.playbook-card .pb-field > .e-template { min-height: 280px; resize: vertical; }
.pb-optional { color: var(--muted); font-size: 11px; font-weight: 400; }
.playbook-card .pb-help { margin: 0; font-size: 12px; line-height: 1.5; font-weight: 400; color: #acb2bc; }
.pb-section { min-width: 0; }
.pb-routing { grid-column: 1 / -1; border-block: 1px solid var(--border); padding-block: 6px; }
.playbook-card .e-recipients { display: flex; flex-direction: column; gap: 6px; }
.playbook-card .rcp-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 0; border: 0; background: transparent; }
.playbook-card .rcp-person { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.playbook-card .rcp-person input { grid-column: auto; }
.playbook-card .rcp-del { grid-column: auto; grid-row: auto; align-self: end; padding: 7px; }
.playbook-card .rcp-channel { grid-column: auto; }
.playbook-card .rcp-am-note { align-self: center; padding-top: 20px; }
.playbook-card .rcp-add { align-self: flex-start; padding: 2px 0; min-height: 24px; border: 0; background: transparent; color: var(--accent); }
.playbook-card .e-template { height: 70px; min-height: 70px; resize: vertical; font-family: inherit; line-height: 1.6; }
.pb-message > .pb-help { margin-top: 5px; }
.pb-preview-wrap { margin-top: 6px; }
.pb-message-tools { display: flex; flex-wrap: wrap; column-gap: 16px; }
.pb-message-tools > details[open] { flex-basis: 100%; min-width: 0; }
.pb-preview-wrap summary, .playbook-history summary { cursor: pointer; color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.playbook-card .pb-preview { margin: 8px 0 0; padding: 12px; background: var(--surface-1); border: 1px solid var(--border); line-height: 1.6; overflow-wrap: anywhere; }
.pb-delivery { display: grid; align-content: start; gap: 12px; }
.pb-autosend { display: flex; align-items: center; gap: 8px; flex-basis: 100%; min-height: 26px; color: var(--text-primary); font-size: 13px; font-weight: 400; }
.playbook-card .e-autosend { width: 16px; height: 16px; margin: 0; }
.playbook-save { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 16px; align-items: end; }
.playbook-save #pb-save { min-height: 36px; padding-inline: 18px; font-size: 13px; }
.playbook-save #pb-msg { grid-column: 1 / -1; font-size: 13px; }
.playbook-save #pb-msg:empty { display: none; }
.playbook-history { padding: 12px 16px; }
.playbook-history summary { font-size: 13px; }
.playbook-history summary span { margin-left: 10px; color: var(--muted); font-size: 12px; font-weight: 400; }
.playbook-history[open] summary { margin-bottom: 12px; }
.playbook-card .pb-row-disabled { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
@media (max-width: 1100px) {
  .playbook-card .rcp-row { grid-template-columns: 145px minmax(0, 1fr) auto; gap: 10px; }
  .playbook-card .rcp-person { gap: 10px; }
  .playbook-save { grid-template-columns: 1fr 1fr; }
  .playbook-save #pb-save { grid-row: 2; grid-column: 2; justify-self: end; }
}
@media (max-width: 760px) {
  .playbook-card .pb-row { display: block; padding: 12px; }
  .pb-identity { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pb-identity .e-del { justify-self: end; padding: 0; min-height: 24px; }
  .pb-routing { margin-top: 10px; }
  .pb-message, .pb-delivery { margin-top: 12px; }
  .playbook-card .rcp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .playbook-card .rcp-person, .playbook-card .rcp-channel-wrap, .playbook-card .rcp-am-note { grid-column: 1 / -1; grid-row: 2; }
  .playbook-card .rcp-person { grid-template-columns: minmax(0, 1fr); }
  .playbook-card .rcp-am-note { padding-top: 0; }
  .playbook-card .rcp-del { grid-column: 2; grid-row: 1; }
  .playbook-card .pb-field > input, .playbook-card .pb-field > select, .playbook-card .pb-field > textarea { font-size: 16px; }
  .playbook-save { gap: 12px; }
  .playbook-history summary span { display: block; margin: 4px 0 0; }
}

/* References keeps the default playbook and save action in the laptop viewport. */
@media (min-width: 761px) {
  body[data-page="references"] .view { padding: 16px 24px; }
  body[data-page="references"] .page-header { margin-bottom: 16px; }
  body[data-page="references"] .page-header > div { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  body[data-page="references"] .eyebrow { display: none; }
  body[data-page="references"] .page-header p { margin: 0; }
  body[data-page="references"] #view > .filters { margin-bottom: 12px; }
  .reference-guide-card { padding: 8px 12px; }
  .reference-guide-card:has(.reference-guide[open]) { padding: 16px; }
}

.reference-tools { align-items: start; gap: 12px; }
.reference-tools .playbook-history { padding: 8px 12px; }
.reference-tools .playbook-history[open] { flex: 1 1 100%; padding: 16px; }
@media (max-width: 760px) {
  .reference-tools .playbook-history { width: 100%; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .playbook-card .rcp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .playbook-card .rcp-type { max-width: 220px; }
  .playbook-card .rcp-person, .playbook-card .rcp-channel-wrap, .playbook-card .rcp-am-note { grid-column: 1 / -1; grid-row: 2; }
  .playbook-card .rcp-del { grid-column: 2; grid-row: 1; }
  .playbook-card .rcp-am-note { padding-top: 0; }
}

/* Select one request while keeping the other drafts in place. */
.pb-workspace { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; margin-bottom: 10px; }
.pb-sidebar { min-width: 0; padding: 8px 12px 8px 0; border-right: 1px solid var(--border); }
.pb-sidebar-heading { display: flex; justify-content: space-between; align-items: center; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
#pb-count { color: var(--muted); font-size: 11px; }
.pb-sidebar-version { margin: 3px 0 12px; color: var(--muted); font-size: 11px; }
#pb-nav { display: flex; flex-direction: column; gap: 6px; }
.playbook-card .pb-nav-item { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; text-align: left; background: transparent; border: 1px solid transparent; color: var(--text-secondary); }
.playbook-card .pb-nav-item:hover { background: var(--surface-2); }
.playbook-card .pb-nav-item[aria-pressed="true"] { background: #253047; border-color: #405473; color: #c3d6fa; }
.pb-nav-name { font-size: 13px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.pb-nav-status { font-size: 11px; font-weight: 400; color: var(--muted); }
.is-dirty .pb-nav-status { color: var(--status-warning); }
.pb-sidebar #pb-add { width: 100%; margin-top: 12px; padding-inline: 8px; background: transparent; }
#pb-entries { min-width: 0; }
#pb-entries:empty::after { content: "Add a request type to start a template."; display: block; padding: 40px 12px; color: var(--muted); text-align: center; }
.pb-workspace .pb-row { margin-bottom: 0; gap: 8px 14px; }
.pb-workspace .pb-identity { gap: 10px; }
.pb-workspace .rcp-row { grid-template-columns: 135px minmax(0, 1fr) auto; gap: 10px; }
.pb-workspace .rcp-person { gap: 10px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .pb-workspace { grid-template-columns: 180px minmax(0, 1fr); gap: 12px; }
  .pb-workspace .rcp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pb-workspace .rcp-person, .pb-workspace .rcp-channel-wrap, .pb-workspace .rcp-am-note { grid-column: 1 / -1; grid-row: 2; }
  .pb-workspace .rcp-del { grid-column: 2; grid-row: 1; }
  .pb-workspace .rcp-am-note { padding-top: 0; }
}
@media (max-width: 1000px) {
  .pb-workspace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pb-sidebar { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 12px; }
  #pb-nav { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .playbook-card .pb-nav-item { flex: 0 0 170px; }
  .pb-sidebar #pb-add { width: auto; margin-top: 8px; }
  .pb-workspace .rcp-row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Brand identity stays separate from the WMS client it currently uses. */
.routing-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:16px; align-items:start; }
.routing-brands { padding:16px; max-height:calc(100dvh - 230px); overflow:auto; }
.routing-editor { padding:20px; }
.routing-editor label { display:grid; gap:6px; margin:14px 0; font-size:13px; }
.routing-editor input,.routing-editor select { width:100%; min-width:0; }
.routing-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.routing-save { display:flex; align-items:center; gap:14px; margin-top:20px; }
.routing-mapped { border-top:1px solid var(--border); padding-top:12px; max-height:120px; overflow:auto; }
.routing-chip { display:inline-block; padding:6px 10px; margin:0 6px 6px 0; border:1px solid var(--border); border-radius:6px; font-size:12px; }
@media(max-width:850px) { .routing-layout {grid-template-columns:1fr;} .routing-brands {max-height:180px;} .routing-fields {grid-template-columns:1fr;gap:0;} }
body[data-page="routing"] .page-header { margin-bottom:20px; }
body[data-page="routing"] .toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.routing-brands .card-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.routing-brands .card-header h2 { margin:0; }
.routing-brands #routing-new { padding:5px 10px; min-height:30px; background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.routing-brands .pb-nav-item { display:flex; flex-direction:column; gap:5px; width:100%; padding:10px 12px; text-align:left; background:transparent; border:1px solid transparent; color:var(--text-secondary); }
.routing-brands .pb-nav-item.active { background:#253047; border-color:#405473; color:#c3d6fa; }
.routing-brands .pb-nav-status { font-size:12px; color:var(--muted); }
.routing-editor label { display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:10px 0; }
.routing-editor input { padding:8px 10px; min-height:36px; color:var(--text-primary); background:var(--surface-1); border:1px solid var(--border); border-radius:6px; font:inherit; }
.routing-fields { align-items:start; }
.routing-client-filters { grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); }
.routing-client-picker { position:relative; min-width:0; }
.routing-client-picker > label { margin-bottom:6px; }
.routing-client-dropdown { position:absolute; top:100%; left:0; right:0; z-index:20; margin-top:4px; padding:6px; background:var(--surface-1); border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 28px #0006; }
.routing-client-dropdown[hidden] { display:none; }
#routing-client-options { max-height:260px; overflow:auto; }
#routing-client-options button { display:block; width:100%; padding:9px 10px; text-align:left; white-space:normal; overflow-wrap:anywhere; color:var(--text-primary); background:transparent; border:1px solid transparent; border-radius:5px; font:inherit; font-size:13px; }
#routing-client-options button:hover,#routing-client-options button.active { background:#253047; border-color:#405473; }
#routing-client-options button[aria-selected="true"] { color:#c3d6fa; }
.routing-client-dropdown #routing-client-count { padding:6px 10px 0; margin:0; font-size:12px; }
@media(max-width:850px) { .routing-client-filters { grid-template-columns:1fr; } }
.routing-editor .sub { margin:4px 0 10px; }
.routing-save { margin-top:14px; }
.routing-mapped h3 { margin:8px 0 10px; }
.routing-editor #routing-result:empty { display:none; }
@media(min-width:1000px) {
 body[data-page="routing"] .view { padding:20px 28px; }
 body[data-page="routing"] .page-header { padding-bottom:0; }
}

@media(min-width:1000px) and (max-height:850px) {
 body[data-page="routing"] .view {padding:14px 28px;}
 body[data-page="routing"] .page-header {margin-bottom:14px;}
 .routing-editor {padding:16px;}
 .routing-editor label {margin:6px 0;}
 .routing-editor .sub {font-size:12px; margin:2px 0 6px;}
 .routing-save {margin-top:10px;}
 .routing-mapped {padding-top:6px;}
}

/* Requests: one working queue, with details kept beside the list. */
.request-tabs{display:flex;gap:5px;border-bottom:1px solid var(--border);margin-bottom:24px;overflow-x:auto}
.request-tabs button{background:none;border:0;border-radius:0;color:var(--muted);padding:13px 18px 16px;white-space:nowrap;border-bottom:2px solid transparent;display:flex;align-items:center;gap:10px}
.request-tabs button[aria-selected=true]{color:var(--text-primary);border-bottom-color:#6ca7ee}
.request-tabs button span{font-size:11px;padding:2px 7px;background:var(--surface);border:1px solid var(--border);border-radius:5px}
.request-tabs button[aria-selected=true] span{color:#9bc2f4;background:#1b2a3e;border-color:#294462}
.request-toolbar{display:flex;justify-content:space-between;gap:16px;margin-bottom:22px;align-items:end;flex-wrap:wrap}
.request-selects,.request-search{display:flex;gap:12px;align-items:end}.request-selects label{display:grid;gap:7px;color:var(--muted);font-size:12px}.request-selects select{min-width:180px}.request-search input{width:235px}
.request-list{padding:0;overflow:hidden}.request-list-heading{padding:20px 24px;display:flex;align-items:center;justify-content:space-between}.request-list-heading h2{margin:0;font-size:15px}
.request-table{width:100%;min-width:1050px;table-layout:fixed}.request-table th:first-child{width:29%}.request-table th:nth-child(2){width:19%}.request-table th:nth-child(3){width:26%}.request-table th:nth-child(4){width:16%}.request-table th:nth-child(5){width:10%}
.request-channel{font-size:13px;color:var(--text-secondary);overflow-wrap:anywhere}
.request-table th,.request-table td{padding:18px 24px!important;vertical-align:top}.request-table th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:500}.request-table tbody tr:hover{background:rgba(255,255,255,.025)}
.request-brand{font-size:11px;color:var(--muted);display:block;margin-bottom:7px}.request-row-link{display:block;text-align:left;background:none;border:0;padding:0;color:var(--text-primary);font-size:14px;line-height:1.55;font-weight:500;white-space:normal}.request-row-link:hover{text-decoration:underline;background:none}
.request-next-text{font-size:13px;line-height:1.65;color:var(--text-secondary);display:block}.request-tag{display:inline-block;font-size:10px;padding:3px 7px;border:1px solid #50402e;background:#2d251c;color:#ddb786;border-radius:4px;margin-top:9px}.request-age{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.request-list .metrics-pagination:not(:empty){padding:14px 24px;border-top:1px solid var(--border)}.request-footnote{margin-top:17px;font-size:12px}.request-empty{padding:65px 24px 75px;text-align:center}.request-empty-icon{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:50%;color:#8bbda3}.request-empty h3{margin:18px 0 8px;font-size:15px;font-weight:500}
.request-sheet{width:560px;max-width:100vw}.request-detail-brand{display:flex;align-items:center;justify-content:space-between;margin:20px 0;color:var(--muted);font-size:13px}.request-status{padding:5px 9px;border-radius:5px;font-size:11px;background:#1c2d42;color:#9bc2f4}.status-needs_am{background:#33291e;color:#e3ba88}.status-completed{background:#1c3028;color:#97c7ae}
.request-sheet h2{font-size:23px;line-height:1.4;margin:12px 0 23px}.request-facts{display:flex;gap:56px;padding-bottom:24px;border-bottom:1px solid var(--border)}.request-facts div{display:grid;gap:7px}.request-facts span{color:var(--muted);font-size:12px}.request-facts strong{font-size:13px;font-weight:500}
.request-next{margin:24px 0;padding:18px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:8px}.request-next p{line-height:1.65;font-size:14px;margin:10px 0 0;white-space:pre-wrap}.request-next .sub{display:block;margin-top:12px;line-height:1.6}
.request-conversations{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}.request-thread{color:var(--text-secondary);font-size:12px;text-decoration:none;padding:9px 12px;border:1px solid var(--border);border-radius:6px}.request-thread span{margin-left:15px}
#queue-guidance{display:grid;gap:10px;margin:24px 0}#queue-guidance label{font-size:13px}#queue-guidance textarea{resize:vertical;min-height:96px}#queue-guidance button{justify-self:start}.request-actions{display:flex;gap:10px;margin:23px 0}.request-history-title{font-size:13px;margin-top:32px}
.request-timeline{list-style:none;padding:0}.request-timeline li{padding:16px 0;border-bottom:1px solid var(--border)}.request-timeline li div{display:flex;justify-content:space-between;gap:10px}.request-timeline strong{font-size:12px;font-weight:500}.request-timeline time{font-size:11px;color:var(--muted)}.request-timeline p{font-size:13px;line-height:1.65;color:var(--text-secondary);white-space:pre-wrap;margin:9px 0 0}
@media(max-width:800px){.request-selects{flex-wrap:wrap}.request-search{width:100%}.request-search input{flex:1;width:100px}.request-table{min-width:1050px}.request-tabs button{padding-left:12px;padding-right:12px}.request-sheet{padding:20px}}

.brand-contacts{margin-bottom:16px}.brand-contacts .save-row{align-items:end}.brand-contacts .save-row label{min-width:240px}.brand-contacts #ct-msg{align-self:center}
.request-manage-am,.request-slack-link{font-size:12px;color:var(--accent)}.request-slack-link{display:block;margin-top:12px;white-space:nowrap}.request-thread-primary{background:var(--accent);border-color:var(--accent);color:#111a2a;font-weight:600}
@media(max-width:600px){.brand-contacts .save-row{flex-wrap:wrap}.brand-contacts .save-row label{min-width:0;width:100%}}