/* Nirna operator UI — editorial-calm design system.
 *
 * Layered on top of what was already right (information architecture,
 * copy tone). The goal isn't a design portfolio; it's a document a VP
 * of Engineering reads at 2am and trusts. Considered, not decorative.
 */

/* ---------- design tokens ----------------------------------------- */

:root {
  /* Type — system serif for headlines, system sans for body.
     Charter and Iowan Old Style are on Apple platforms; Georgia on
     Windows; Times as final fallback. All beautiful for prose. */
  --font-serif: "Charter", "Iowan Old Style", "Sitka Text", Georgia,
                "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace,
               "Cascadia Code", Menlo, monospace;

  /* Color — warm neutrals, slate-blue accent. Verdict colors are muted
     tints, not primary reds/greens; they carry meaning without shouting. */
  --paper:            #fafaf7;
  --card:             #ffffff;
  --card-tint:        #f7f6f2;
  --ink:              #1c1917;
  --body:             #44403c;
  --muted:            #78716c;
  --border:           #e7e5e4;
  --border-strong:    #d6d3d1;

  --accent:           #3f4c5a;
  --accent-strong:    #2c3742;
  --accent-tint:      #eef2f5;

  --verdict-new-bg:   #fef4e6;
  --verdict-new-fg:   #9a4a12;
  --verdict-iso-bg:   #eef2f5;
  --verdict-iso-fg:   #334155;
  --verdict-needs-bg: #f5f5f4;
  --verdict-needs-fg: #57534e;

  /* Blast radius >1. Deliberately its own hue: grey read as "no
     signal", and the emerging-pattern orange sits right beside it on
     the same row. */
  --blast-bg:         #fdecec;
  --blast-fg:         #9b1c1c;

  --conf-high-bg:     #ecfdf5;
  --conf-high-fg:     #166534;
  --conf-med-bg:      #fef4e6;
  --conf-med-fg:      #9a4a12;
  --conf-low-bg:      #fef2f2;
  --conf-low-fg:      #991b1b;

  /* Spacing scale — 4px base, generous by default. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-10: 4rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(28 25 23 / 0.04);
  --shadow-md: 0 6px 20px rgb(28 25 23 / 0.06);

  --measure-prose: 68ch;  /* comfortable reading measure */
  --measure-wide: 78ch;
}

/* ---------- reset + base ------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
strong, b { color: var(--ink); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-7) 0; }
pre, code { font-family: var(--font-mono); }
button {
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.55rem 1.1rem;
  background: var(--accent);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.005em;
}
button:hover { background: var(--accent-strong); }

/* ---------- layout: topbar + main --------------------------------- */

.topbar {
  display: flex;
  align-items: baseline;
  gap: var(--s-6);
  padding: var(--s-4) var(--s-6);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.topbar nav { display: flex; gap: var(--s-5); }
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
}
.topbar nav a:hover,
.topbar nav a.active { color: var(--ink); }

.content {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5) var(--s-10);
}

/* ---------- typography scale -------------------------------------- */

.display {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0;
}
h1.brief-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: var(--s-3) 0 var(--s-5);
  max-width: var(--measure-prose);
}
.deck {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--body);
  max-width: var(--measure-prose);
}
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
section h2.section-title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

/* ---------- pills ------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  background: var(--verdict-iso-bg);
  color: var(--verdict-iso-fg);
}
.pill-new_pattern    { background: var(--verdict-new-bg);   color: var(--verdict-new-fg); }
.pill-isolated_issue { background: var(--verdict-iso-bg);   color: var(--verdict-iso-fg); }
.pill-needs_info     { background: var(--verdict-needs-bg); color: var(--verdict-needs-fg); }
.pill-conf-high      { background: var(--conf-high-bg);     color: var(--conf-high-fg); }
.pill-conf-medium    { background: var(--conf-med-bg);      color: var(--conf-med-fg); }
.pill-conf-low       { background: var(--conf-low-bg);      color: var(--conf-low-fg); }
.pill-fix {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
/* Fix shape on a list row: who handles this, ops or engineering.
   Distinct hues so the routing call is readable at a glance without
   reading the label. */
.pill-fix-internal_operational { background: var(--accent-tint);      color: var(--accent-strong); }
.pill-fix-code_change          { background: var(--verdict-new-bg);   color: var(--verdict-new-fg); }
.pill-fix-customer_action      { background: var(--verdict-needs-bg); color: var(--verdict-needs-fg); }
.pill-note { color: var(--muted); font-size: 0.8125rem; margin-left: 0.25rem; }
/* Blast radius appears only when it exceeds one account, so it can
   afford to be loud — it marks the rows worth interrupting for. */
.pill-blast {
  background: var(--blast-bg);
  color: var(--blast-fg);
  font-weight: 600;
}

/* ---------- brief detail: hero + sections ------------------------- */

.back-link {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: var(--s-5);
}
.back-link:hover { color: var(--ink); }

.brief-hero { margin-bottom: var(--s-7); }
.brief-hero .pills-row {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.brief-hero .brief-meta {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0 0 var(--s-3);
}
.brief-hero .brief-meta strong { color: var(--body); font-weight: 600; }
.brief-hero .brief-meta .sep { margin: 0 0.5rem; opacity: 0.5; }

.brief-section {
  margin: var(--s-7) 0;
}
.brief-section > .section-body {
  max-width: var(--measure-prose);
}

.fact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: fact;
}
.fact-list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
}
.fact-list li:last-child { border-bottom: 0; }
.fact-list li::before {
  counter-increment: fact;
  content: counter(fact, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 2rem;
  padding-top: 0.15rem;
}
.fact-list .fact-body {
  flex: 1;
  line-height: 1.55;
}
.fact-list .cite {
  display: inline-block;
  margin-left: var(--s-2);
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--muted);
  padding-bottom: 1px;
}
.fact-list .cite:hover { color: var(--accent); border-color: var(--accent); }

.take {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin: 0;
  max-width: var(--measure-prose);
  font-weight: 400;
}

.stat-row {
  display: flex;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.stat .stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat .stat-value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 500;
}
.stat .stat-value.small { font-size: 1.125rem; }
.stat .stat-detail {
  font-size: 0.875rem;
  color: var(--body);
}

.fix-block {
  background: var(--card-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  margin-top: var(--s-3);
  max-width: var(--measure-prose);
}
.fix-block .fix-content {
  white-space: pre-wrap;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: var(--s-3) 0 0;
  color: var(--body);
}
.fix-block .fix-citations {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.fix-block .fix-citations li {
  padding: 0.15rem 0;
  font-family: var(--font-mono);
}

.draft {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--s-3);
  overflow: hidden;
  background: var(--card);
}
.draft > summary {
  padding: var(--s-3) var(--s-4);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-tint);
}
.draft > summary::-webkit-details-marker { display: none; }
.draft > summary::after {
  content: "＋";
  color: var(--muted);
  font-size: 1rem;
  transition: transform 0.15s ease;
}
.draft[open] > summary { border-bottom: 1px solid var(--border); background: var(--card); }
.draft[open] > summary::after { content: "－"; }
.draft-body {
  padding: var(--s-4);
  white-space: pre-wrap;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
  background: var(--card);
}

/* Progressive disclosure — reasoning details are a click away. */
details.reasoning {
  margin-top: var(--s-5);
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
}
details.reasoning > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8125rem;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
details.reasoning > summary::-webkit-details-marker { display: none; }
details.reasoning > summary::before {
  content: "▸";
  font-size: 0.7rem;
  transition: transform 0.15s ease;
  display: inline-block;
}
details.reasoning[open] > summary::before { transform: rotate(90deg); }
details.reasoning > summary:hover { color: var(--ink); }
details.reasoning .reasoning-body {
  margin-top: var(--s-4);
  font-size: 0.875rem;
  color: var(--body);
  max-width: var(--measure-prose);
}
details.reasoning .reasoning-body p { margin: 0 0 var(--s-2); }
details.reasoning table.score-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 30rem;
  margin-top: var(--s-3);
  font-size: 0.8125rem;
}
details.reasoning table.score-table th,
details.reasoning table.score-table td {
  padding: 0.35rem 0.75rem 0.35rem 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
details.reasoning table.score-table th {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.75rem;
  text-transform: uppercase;
}
details.reasoning table.score-table td.score-value {
  font-family: var(--font-mono);
  color: var(--ink);
  text-align: right;
  width: 4rem;
}

/* ---------- brief list -------------------------------------------- */

.page-header { margin-bottom: var(--s-6); }
.page-header h1 { margin: 0 0 var(--s-2); }
.page-header p { margin: 0; max-width: var(--measure-prose); }

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-5);
}

/* Search + Apply on one line. ``flex-end`` rather than ``center``:
   the label stacks its caption above the input, so centring aligned
   the button against the whole two-line block and left it sitting
   below the field it acts on. */
.filter-primary {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.filter-bar input[type=text] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9375rem;
  min-width: 18rem;
  background: var(--card);
}
.filter-bar input[type=text]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.filter-bar .chips { display: flex; flex-direction: column; gap: 0.4rem; }
.filter-bar .chip-group-label {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.filter-bar .chip-row { display: flex; gap: 0.4rem; }
.filter-bar .chip {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--body);
  text-decoration: none;
  font-size: 0.8125rem;
}
.filter-bar .chip:hover { border-color: var(--border-strong); color: var(--ink); }
.filter-bar .chip-active {
  background: var(--ink);
  color: var(--card);
  border-color: var(--ink);
}
.filter-bar .chip-active:hover { color: var(--card); border-color: var(--ink); }
.filter-bar a.reset {
  color: var(--muted);
  font-size: 0.8125rem;
  text-decoration: none;
  align-self: end;
  padding-bottom: 0.5rem;
}
.filter-bar a.reset:hover { color: var(--ink); }

/* Escalations table */
.briefs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.briefs thead th {
  text-align: left;
  padding: 0 var(--s-3) var(--s-2);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.briefs tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s ease;
}
.briefs tbody tr:hover { background: var(--card-tint); }
.briefs tbody td {
  padding: var(--s-4) var(--s-3);
  color: var(--body);
  vertical-align: middle;
}
.briefs tbody td:first-child { padding-left: 0; }
.briefs a.row-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
.briefs a.row-link:hover .ticket-id { color: var(--accent); }
.ticket-id { color: var(--ink); font-weight: 500; }

/* ---------- escalation row: conclusion first ---------------------- */

/* The escalation cell carries the ticket, Nirna's one-line verdict and
   the routing tags. It's the only cell an operator needs to read, so
   it gets the width and everything else stays supporting detail. */
/* The conclusion needs room to read as prose; the metric columns
   don't. Auto layout divides width by content, which leaves the
   summary wrapping to seven lines while "AI cost" sits in whitespace —
   so the split is declared explicitly instead. */
.briefs { table-layout: fixed; }
.briefs col.col-escalation { width: 60%; }
.briefs col.col-account    { width: 14%; }
.briefs col.col-created    { width: 14%; }
.briefs col.col-feedback   { width: 12%; }

.row-summary {
  margin: 0.35rem 0 0.5rem;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.row-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* ---------- inline rating ----------------------------------------- */

.cell-feedback { white-space: nowrap; }
.inline-feedback { display: inline; }

.thumb {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.thumb + .thumb { margin-left: 0.25rem; }
.thumb-up:hover    { border-color: var(--conf-high-fg); color: var(--conf-high-fg); }
.thumb-down:hover  { border-color: var(--verdict-needs-fg); color: var(--verdict-needs-fg); }
.feedback-state { color: var(--muted); font-size: 0.8125rem; }
.window-summary {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---------- pagination -------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.page-controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.page-link {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: none;
}
.page-link:hover { border-color: var(--accent); color: var(--accent); }

/* Kept in the flow rather than hidden at the ends of the range, so
   the controls don't shift position between the first page and the
   middle ones. */
.page-link-disabled {
  color: var(--border-strong);
  border-color: var(--border);
  cursor: default;
}
.page-link-disabled:hover { border-color: var(--border); color: var(--border-strong); }

.page-position { font-size: 0.8125rem; color: var(--muted); }

.kpi-roi { margin-top: 0.4rem; color: var(--ink); }

/* ---------- audit payload disclosure ------------------------------ */

.audit-payload { display: inline; }
.audit-payload summary { cursor: pointer; }
.audit-payload pre {
  margin: 0.5rem 0 0;
  padding: 0.5rem;
  background: var(--card-tint);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.75rem;
  overflow-x: auto;
}

/* ---------- callout ----------------------------------------------- */

/* Says once, prominently, that a measure can't be reported — rather
   than letting each affected card invent its own placeholder. */
.callout {
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  margin-bottom: var(--s-5);
}
.callout p { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }
.callout-action { border-left: 3px solid var(--accent); }
.callout a { color: var(--accent); }

/* Empty state */
.empty-state {
  padding: var(--s-8) var(--s-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--card);
  text-align: center;
  max-width: var(--measure-prose);
  margin: 0 auto;
}
.empty-state h2 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 var(--s-2);
}
.empty-state p { color: var(--muted); margin: 0 0 var(--s-3); }
.empty-state p:last-child { margin-bottom: 0; }

/* ---------- feedback block ---------------------------------------- */

.feedback {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  max-width: var(--measure-prose);
}
.feedback h2 {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.feedback .feedback-note { color: var(--muted); font-size: 0.875rem; margin: 0 0 var(--s-4); }
.feedback form { display: flex; flex-direction: column; gap: var(--s-4); }
.feedback .rating-row { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.feedback .rating-row label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  cursor: pointer;
}
.feedback label.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.feedback textarea, .feedback input[type=text], .feedback select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9375rem;
  background: var(--card);
}
.feedback textarea { min-height: 5rem; resize: vertical; }
.feedback details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4);
  background: var(--card);
}
.feedback details summary {
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--body);
}
.feedback details[open] summary { margin-bottom: var(--s-3); }
.feedback details .field-inline { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.feedback details .field-inline label { text-transform: none; letter-spacing: 0; font-size: 0.875rem; color: var(--body); flex-direction: row; align-items: center; gap: var(--s-2); }
.feedback details .field-inline input { flex: 1; }

/* ---------- metrics + audit --------------------------------------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s-4);
}
.kpi {
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.kpi .kpi-label {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}
.kpi .kpi-value {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 var(--s-1);
}
.kpi .kpi-detail { font-size: 0.875rem; color: var(--muted); margin: 0; }

.audit-log { list-style: none; padding: 0; margin: 0; }
.audit-log li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--s-4);
  align-items: baseline;
  font-size: 0.9375rem;
}
.audit-log li time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 10.5rem;
  flex-shrink: 0;
}
.audit-log li .action { color: var(--ink); font-weight: 500; }
.audit-log li .detail { color: var(--muted); font-size: 0.875rem; }
/* The scannable summary of what was read or sent. Its own line so a
   reader can skim the column without expanding every payload. */
.audit-log li .audit-detail-line {
  display: block;
  color: var(--ink);
  margin: 0.15rem 0 0.1rem;
}

/* ---------- flash messages ---------------------------------------- */

.flash {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--s-5);
  background: var(--accent-tint);
  border: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--body);
}
.flash-success { background: var(--conf-high-bg); border-color: #a7f3d0; color: var(--conf-high-fg); }
.flash-error { background: var(--conf-low-bg); border-color: #fca5a5; color: var(--conf-low-fg); }

/* ---------- responsive -------------------------------------------- */

@media (max-width: 720px) {
  .content { padding: var(--s-5) var(--s-4) var(--s-8); }
  .display, h1.brief-title { font-size: 1.75rem; }
  .filter-bar { align-items: flex-start; }
  .filter-bar input[type=text] { min-width: 0; width: 100%; }
  .briefs thead { display: none; }
  .briefs tbody tr { display: block; padding: var(--s-4) 0; }
  .briefs tbody td { display: block; padding: 0.15rem 0; }
  .briefs tbody td::before {
    content: attr(data-label) ": ";
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-right: 0.35rem;
  }
  .briefs tbody td.no-label::before { content: ""; margin: 0; }
  .audit-log li { flex-direction: column; gap: 0.25rem; }
  .audit-log li time { min-width: 0; }
}

/* ---------------------------------------------------------------- */
/* Setup                                                             */
/* ---------------------------------------------------------------- */

.unlock-form {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  max-width: 26rem;
}
.unlock-form .field { display: block; flex: 1; margin: 0; }
.unlock-form .field input { width: 100%; }

.setup-cards {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  margin-top: var(--s-5, 1.5rem);
}

.setup-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--card);
}
.setup-card-error { border-color: var(--conf-low-fg); }

.setup-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.setup-card-head h2 { font-size: 1.0625rem; margin: 0; }

.pill-connected { background: var(--conf-high-bg); color: var(--conf-high-fg); }
/* Required-but-missing is a warning, not an error: nothing is broken
   yet, it just cannot start. Same orange as an emerging pattern. */
.pill-required  { background: var(--verdict-new-bg); color: var(--verdict-new-fg); }
.pill-optional  { background: var(--verdict-needs-bg); color: var(--verdict-needs-fg); }

.setup-gives { color: var(--body); margin: 0 0 var(--s-2); font-size: 0.9375rem; }
/* The honest half of "optional" — what skipping it costs. */
.setup-without { color: var(--muted); margin: 0 0 var(--s-3); font-size: 0.875rem; }

.setup-error {
  color: var(--conf-low-fg);
  font-size: 0.875rem;
  margin: 0 0 var(--s-3);
}
.setup-probe {
  font-size: 0.875rem;
  margin: 0 0 var(--s-3);
  padding: var(--s-2) 0.65rem;
  border-radius: 6px;
  border-left: 3px solid currentColor;
}
.probe-ok   { background: var(--conf-high-bg); color: var(--conf-high-fg); }
.probe-warn { background: var(--verdict-new-bg); color: var(--verdict-new-fg); }
.probe-bad  { background: var(--conf-low-bg); color: var(--conf-low-fg); }

.setup-form .field { display: block; margin-bottom: var(--s-3); }
/* Not checkboxes — a 100%-wide checkbox pushes its own label off the
   end of the row. */
.setup-form input:not([type="checkbox"]),
.setup-form select { width: 100%; }
.setup-form input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.setup-form .field-narrow input { width: auto; max-width: 12rem; }
.field-help {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: var(--s-1);
  font-weight: 400;
}

.setup-actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.setup-actions button { flex: 0 0 auto; }
button.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
}

button.linklike {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
}
.setup-disconnect { margin-top: var(--s-3); }
.setup-lock { margin-top: var(--s-6, 2rem); }

.key-recipe {
  background: var(--card-tint);
  padding: 0.6rem var(--s-3);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  overflow-x: auto;
  margin: var(--s-2) 0 0;
}

.callout-ok  { border-left-color: var(--conf-high-fg); }
.callout-bad { border-left-color: var(--conf-low-fg); }

@media (max-width: 700px) {
  .setup-cards { grid-template-columns: 1fr; }
}

/* Accounts card: full width, because the sample-ticket box needs prose
   room the connection cards don't. */
.setup-card-wide { grid-column: 1 / -1; margin-top: var(--s-4); }

.setup-sample {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--s-3);
  margin: var(--s-3) 0 0;
}
.setup-sample legend {
  font-size: 0.8125rem;
  color: var(--muted);
  padding: 0 var(--s-2);
}
.setup-sample textarea { width: 100%; font-family: inherit; }

.setup-inferred { margin-top: var(--s-4); }
.setup-inferred summary { cursor: pointer; color: var(--muted); font-size: 0.875rem; }
.setup-inferred dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-1) var(--s-4);
  margin: var(--s-3) 0 0;
  font-size: 0.875rem;
}
.setup-inferred dt { color: var(--muted); }
.setup-inferred dd { margin: 0; color: var(--body); }

/* Permissions */
.perm-heading {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: var(--s-4) 0 var(--s-2);
}
.perm-queries { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.perm-queries > li {
  border-top: 1px solid var(--border);
  padding: var(--s-3) 0;
}
.perm-query {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-weight: 500;
  cursor: pointer;
}
.perm-query-name { font-family: var(--font-mono); font-size: 0.875rem; }
.perm-query-desc { color: var(--muted); font-size: 0.875rem; margin: var(--s-1) 0 0 1.5rem; }
.perm-sql {
  background: var(--card-tint);
  border-radius: 6px;
  padding: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 0 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  overflow-x: auto;
  color: var(--body);
}
.perm-masks { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.perm-masks > li {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-1) 0;
  font-size: 0.875rem;
}