/* PITB RAG observability dashboard — design system
   Palette + typography per ui-ux-pro-max recommendation:
     • Pattern: Real-Time / Operations
     • Style:   Data-Dense Dashboard
     • Type:    Fira Sans (UI) + Fira Code (numbers/code) + Noto Nastaliq Urdu
     • Mode:    full light + dark, semantic tokens
*/

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:           #f6f8fb;
  --bg-2:         #eef2f7;
  --fg:           #0f172a;
  --fg-2:         #334155;
  --muted:        #64748b;
  --border:       #e2e8f0;
  --border-2:     #cbd5e1;
  --card:         #ffffff;
  --code-bg:      #f1f5f9;

  /* Brand — PITB logo green (#0b8c48), darkened one step so text on white passes AA */
  --accent:       #0a7a3e;
  --accent-bg:    #e3f3ea;
  --accent-fg:    #ffffff;
  --accent-strong:#075c2e;
  --ring:         #0a7a3e66;
  --ccc-blue:     #1d5480;

  /* Glass shell over the Arfa Tower photo */
  --wash:         rgba(244, 248, 245, 0.78);
  --glass:        rgba(255, 255, 255, 0.88);
  --glass-strong: rgba(255, 255, 255, 0.95);

  /* Semantic */
  --ok:           #15803d;
  --ok-bg:        #dcfce7;
  --err:          #dc2626;
  --err-bg:       #fee2e2;
  --warn:         #b45309;
  --warn-bg:      #fef3c7;

  /* Elevation */
  --shadow-1:     0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2:     0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-3:     0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);

  /* Typography */
  --font-ui:      'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-nastaliq:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;

  /* Radii */
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  12px;
  --r-xl:  16px;

  /* Spacing — 4pt scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0b1220;
    --bg-2:         #0f172a;
    --fg:           #e6edf3;
    --fg-2:         #cbd5e1;
    --muted:        #94a3b8;
    --border:       #1e293b;
    --border-2:     #334155;
    --card:         #111a2c;
    --code-bg:      #0f1a2e;

    --accent:       #4cc585;
    --accent-bg:    #0f3322;
    --accent-fg:    #04200f;
    --accent-strong:#8fe0b3;
    --ring:         #4cc58599;
    --ccc-blue:     #7fb0dc;

    --wash:         rgba(8, 16, 12, 0.86);
    --glass:        rgba(17, 26, 30, 0.86);
    --glass-strong: rgba(17, 26, 30, 0.94);

    --ok:           #4ade80;
    --ok-bg:        #052e16;
    --err:          #f87171;
    --err-bg:       #3a1010;
    --warn:         #fbbf24;
    --warn-bg:      #3a2410;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.6);
    --shadow-3: 0 6px 16px rgba(0, 0, 0, 0.5);
  }
}

/* ── Reset & base ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: 'cv11', 'ss01';
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

h1, h2, h3, h4 { color: var(--fg); letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 600; margin: 0 0 var(--s-2); }
h3 { font-size: 15px; font-weight: 600; margin: var(--s-6) 0 var(--s-2); }
p  { margin: var(--s-2) 0; }

.muted   { color: var(--muted); }
.center  { text-align: center; }

/* ── App shell ─────────────────────────────────────────────────────────── */
/* Blurred Arfa Software Technology Park (PITB HQ) behind everything, with a
   wash on top so tables and text keep full contrast. */
body {
  background: var(--bg) url(brand/background_blur.jpg) center / cover fixed no-repeat;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--wash);
  z-index: -1;
}

header {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(13, 75, 37, 0.08);
  padding: 0 4%;
}
header .topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) 0;
}
header .brand {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--fg); text-decoration: none;
}
header .brand:hover { color: var(--fg); text-decoration: none; }
header .brand img { width: 58px; height: 58px; object-fit: contain; flex: none; }
header .brand strong {
  display: block;
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg);
}
header .brand .brand-sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }
header .brand .brand-sub b { color: var(--accent); font-weight: 600; }

header .badges { display: flex; align-items: center; gap: var(--s-3); }
header .badges img {
  height: 56px; width: auto;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  background: #fff;
}
header .badges img.ccc { padding: 5px 8px; }

header nav {
  display: flex; gap: 2px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding: 6px 0;
}
header nav a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--fg-2);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
header nav a:hover { color: var(--accent-strong); background: var(--accent-bg); text-decoration: none; }
header nav a.active,
header nav a.active:hover {
  color: var(--accent-fg);
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(10, 122, 62, 0.35);
}
header nav a svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
header nav .nav-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}

main { padding: var(--s-6); max-width: 1280px; margin: 0 auto; }
footer {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  flex-wrap: wrap;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--border);
  background: var(--glass);
  margin-top: var(--s-10);
}
footer img { height: 26px; width: auto; }
footer .sep { opacity: 0.5; }

@media (max-width: 760px) {
  header .brand img { width: 44px; height: 44px; }
  header .brand strong { font-size: 16px; }
  header .badges img { height: 42px; }
}

/* Audience hint: contributor pages get a wider breathing-room main */
body.contributor main { max-width: 1080px; padding: var(--s-8) var(--s-6); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
button, a.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background 150ms, border-color 150ms, transform 100ms;
}
button:hover, a.btn:hover {
  background: var(--bg-2);
  border-color: var(--muted);
  text-decoration: none;
  color: var(--fg);
}
button:active, a.btn:active { transform: translateY(1px); }
button:focus-visible, a.btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
button.primary, a.btn.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
button.primary:hover, a.btn.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-fg);
}
button.danger {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 40%, var(--border));
}
button.danger:hover {
  background: var(--err-bg);
  border-color: var(--err);
  color: var(--err);
}
button:disabled, a.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.link-btn {
  background: transparent;
  border: 1px dashed var(--border-2);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 150ms;
}
.link-btn:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  border-style: solid;
}
.link-btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, var(--border)); }
.link-btn.danger:hover { background: var(--err-bg); border-color: var(--err); }

/* ── Cards & generic blocks ───────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-5);
  margin: var(--s-4) 0;
  box-shadow: var(--shadow-2);
}
.card.ok  { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.card.err { border-color: color-mix(in srgb, var(--err) 40%, var(--border)); }
.card.big { display: inline-block; min-width: 140px; margin-right: var(--s-3); text-align: center; padding: var(--s-4); }
.card.big .big-num { font-size: 22px; font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.card.big .big-lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.card.big.err .big-num { color: var(--err); }

.metric-cards { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }

/* ── /metrics page extras ──────────────────────────────────────────────── */
.metrics-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.metrics-header h2 { margin: 0; }
.hours-selector {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--muted);
}
.hours-selector select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
}
.slowest-pill {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(229, 119, 0, 0.12);
  color: #c75800;
  border-radius: var(--r-pill, 999px);
  vertical-align: middle;
}
tr.row-slowest td {
  background: rgba(229, 119, 0, 0.08);
  font-weight: 600;
}
tr.row-slowest td:first-child {
  border-left: 3px solid #e57700;
}
tr.row-empty td { color: var(--muted); }

/* ── Tables ────────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: var(--s-2) 0;
  box-shadow: var(--shadow-1);
}
th, td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  background: var(--bg-2);
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-2); }
tr.err { background: color-mix(in srgb, var(--err) 4%, transparent); }
tr.err:hover td { background: color-mix(in srgb, var(--err) 8%, transparent); }

table.kv th { width: 180px; }
table.hits { font-size: 12px; }
table.hits td.snippet { max-width: 320px; }
/* ── Reranker kept/dropped badges + chunk_id mono cell ──
   Added in PR #65 to make it visually obvious which retrieved chunks
   survived the reranker. .rerank-kept uses --ok (the same green other
   "pass" states use); .rerank-dropped uses --warn so it's distinctly
   muted, not error-red — a dropped chunk isn't a failure, just info. */
table.hits .rerank-kept,
table.hits .rerank-dropped,
table.hits .rerank-unknown {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
table.hits .rerank-kept {
  color: var(--ok, #2e7d32);
  background: color-mix(in srgb, var(--ok, #2e7d32) 12%, transparent);
}
table.hits .rerank-dropped {
  color: var(--warn, #b26500);
  background: color-mix(in srgb, var(--warn, #b26500) 10%, transparent);
}
table.hits .rerank-unknown { color: var(--muted, #888); }
table.hits code.chunk-id {
  font-size: 11px; padding: 1px 4px;
  background: color-mix(in srgb, var(--fg, #000) 6%, transparent);
  border-radius: 3px;
}
table.dept-hist td:nth-child(2) { width: 60px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.dept-hist td:nth-child(3) { width: 240px; }
.bar { height: 8px; background: var(--accent); border-radius: 999px; }

/* ── Code & pre ───────────────────────────────────────────────────────── */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 12px;
}
code {
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
pre {
  background: var(--code-bg);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: auto;
  max-height: 360px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}
pre.err { color: var(--err); background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 30%, var(--border)); }

/* ── RTL / Urdu ───────────────────────────────────────────────────────── */
.rtl, .urdu {
  direction: rtl;
  text-align: right;
  font-family: var(--font-nastaliq);
  font-size: 16px;
  line-height: 2;          /* Nastaliq needs MUCH more vertical room */
}
pre.rtl, pre.urdu {
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-wrap;
}

/* ── Status pills ─────────────────────────────────────────────────────── */
.status {
  display: inline-flex; align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.status.ok  { background: var(--ok-bg);  color: var(--ok); }
.status.err { background: var(--err-bg); color: var(--err); }

/* table cells often use just .err / .ok as classes */
td.err, .err { color: var(--err); }
td.ok        { color: var(--ok); }

/* ── Live traces / span tree ──────────────────────────────────────────── */
.tree, .tree ul { list-style: none; padding-left: 18px; margin: 0; }
.tree > li { margin: 4px 0; }
.tree summary {
  cursor: pointer;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; gap: var(--s-3); align-items: center;
  transition: border-color 150ms;
}
.tree summary:hover { border-color: var(--border-2); }
.tree summary::-webkit-details-marker { display: none; }
.span-name { font-weight: 600; min-width: 80px; }
.tree .dur { color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.span-body { padding: var(--s-3) var(--s-4); }
.kv-block { margin: var(--s-3) 0; }
.kv-block b { display: inline-block; min-width: 80px; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Forms & filters (Corpus tab) ─────────────────────────────────────── */
form.filters { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin: var(--s-3) 0; }
form.filters input, form.filters select {
  padding: 7px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 150ms, box-shadow 150ms;
}
form.filters input:focus, form.filters select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
form.filters input { min-width: 240px; }

.pager { color: var(--muted); }
.pager a { color: var(--accent); text-decoration: none; margin: 0 var(--s-2); }

/* ── Vector preview (chunk detail) ────────────────────────────────────── */
.vector-preview { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.vector-preview .v {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: var(--r-sm);
  color: #000;
  font-family: var(--font-mono);
}

/* ── Chunk preview cards ──────────────────────────────────────────────── */
.chunk-preview {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-2) 0;
  background: var(--bg-2);
}
.chunk-head { display: flex; gap: var(--s-3); align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
.chunk-head .badge {
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.chunk-preview pre { margin-top: 6px; max-height: 220px; }

/* tabular numbers in trace tables */
td.dur, td.usr, td.agt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
td.usr, td.agt { font-family: var(--font-ui); max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
td.ts { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
td.status .ok, td.status .err { font-weight: 600; }

a.back { color: var(--muted); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
a.back:hover { color: var(--accent); }

/* ── Submission flow (contributor) ────────────────────────────────────── */

/* Page intro card on /submit */
.intro-card {
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--card) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-6);
  display: flex; gap: var(--s-5); align-items: flex-start;
}
.intro-card .intro-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  box-shadow: var(--shadow-1);
}
.intro-card .intro-icon svg { width: 22px; height: 22px; }
.intro-card h2 { margin: 0 0 4px; font-size: 18px; }
.intro-card p  { margin: 0; color: var(--fg-2); font-size: 13px; }

/* The form */
.submit-form {
  display: flex; flex-direction: column; gap: var(--s-5);
  max-width: 1040px;
}
.submit-form fieldset {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  padding: var(--s-5) var(--s-6);
  margin: 0;
  box-shadow: var(--shadow-1);
  position: relative;
}
.submit-form fieldset legend {
  padding: 4px var(--s-3);
  font-weight: 600;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 999px;
  margin-left: -4px;
}
.submit-form fieldset legend .muted {
  color: var(--muted);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

.submit-form .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-3);
}
@media (max-width: 760px) { .submit-form .grid-2 { grid-template-columns: 1fr; } }
.submit-form .row.stack { display: flex; flex-direction: column; gap: 4px; }
.submit-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  letter-spacing: 0.1px;
  display: inline-flex; align-items: center; gap: 4px;
}
.submit-form label.muted { color: var(--muted); font-weight: 500; }
.submit-form label .req {
  display: inline-block;
  background: var(--err-bg);
  color: var(--err);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-left: 2px;
}

.submit-form input, .submit-form textarea, .submit-form select {
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 9px 12px;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  width: 100%;
  transition: border-color 150ms, box-shadow 150ms;
}
.submit-form input:focus, .submit-form textarea:focus, .submit-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.submit-form textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.55;
}
.submit-form input.urdu, .submit-form textarea.urdu {
  direction: rtl;
  text-align: right;
  font-family: var(--font-nastaliq);
  font-size: 16px;
  line-height: 2.1;
  padding-top: 8px;
  padding-bottom: 8px;
}
.submit-form textarea.urdu { min-height: 120px; }
.submit-form input::placeholder, .submit-form textarea::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); }

/* FAQ rows — visually distinct cards */
#faq-list { display: flex; flex-direction: column; gap: var(--s-3); }
.faq-row {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-4);
  background: var(--bg);
  position: relative;
  transition: border-color 150ms, box-shadow 150ms;
}
.faq-row:hover { border-color: var(--border-2); box-shadow: var(--shadow-1); }
.faq-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.faq-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-3);
}
.faq-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.faq-label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 999px;
}
.faq-num {
  color: var(--accent);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.faq-remove {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 150ms;
}
.faq-remove:hover {
  color: var(--err);
  background: var(--err-bg);
  border-color: color-mix(in srgb, var(--err) 30%, transparent);
}

#add-faq {
  align-self: flex-start;
  margin-top: var(--s-2);
  display: inline-flex; align-items: center; gap: 6px;
}
#add-faq svg { width: 14px; height: 14px; }

/* Sticky action bar at the bottom of long forms */
.actions {
  display: flex; gap: var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  position: sticky;
  bottom: var(--s-4);
  z-index: 10;
  backdrop-filter: blur(8px);
}
.actions.inline { display: inline-flex; padding: 0; background: transparent; border: none; box-shadow: none; position: static; margin-right: var(--s-2); }
.actions-row { display: flex; gap: var(--s-3); margin: var(--s-3) 0; flex-wrap: wrap; }
.actions .spacer { flex: 1; }
.actions .hint   { font-size: 12px; color: var(--muted); }

/* ── Verdict (submit_result) ──────────────────────────────────────────── */
.verdict {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-xl);
  margin: var(--s-2) 0 var(--s-5);
  border: 1px solid;
  position: relative;
  overflow: hidden;
}
.verdict::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.verdict.ok  { background: color-mix(in srgb, var(--ok) 6%, var(--card));  border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.verdict.err { background: color-mix(in srgb, var(--err) 6%, var(--card)); border-color: color-mix(in srgb, var(--err) 40%, var(--border)); }
.verdict.ok::before  { background: var(--ok); }
.verdict.err::before { background: var(--err); }
.verdict h2 { margin: 0; font-size: 18px; }
.verdict-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--card);
  box-shadow: var(--shadow-2);
}
.verdict-icon svg { width: 22px; height: 22px; }
.verdict.ok  .verdict-icon { color: var(--ok); }
.verdict.err .verdict-icon { color: var(--err); }

/* Issue lists (errors / warnings / info) */
ul.issues { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
ul.issues li.issue {
  padding: 10px 14px 10px 16px;
  border-left: 3px solid var(--border);
  background: var(--bg-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  display: flex; flex-direction: column; gap: 2px;
}
ul.issues li.issue.err  { border-left-color: var(--err);  background: color-mix(in srgb, var(--err) 5%, var(--card)); }
ul.issues li.issue.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--card)); }
ul.issues li.issue.info { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
ul.issues .loc {
  display: inline-block;
  background: var(--card);
  padding: 1px 7px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  align-self: flex-start;
  margin-bottom: 2px;
}

/* ── SOP help card ────────────────────────────────────────────────────── */
details.card.sop-help {
  background: var(--bg-2);
  box-shadow: none;
}
.sop-help summary { cursor: pointer; color: var(--fg-2); font-weight: 500; }
.sop-help ul { margin: var(--s-3) 0 0 var(--s-5); padding: 0; color: var(--fg-2); }
.sop-help li { margin: 4px 0; }

details.card.form-card[open] > summary { margin-bottom: var(--s-4); }

/* ── Service cards (the form's outer fieldset for each service) ──────── */
.service-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  padding: var(--s-5) var(--s-6);
  margin: 0 0 var(--s-4);
  box-shadow: var(--shadow-1);
  position: relative;
}
.service-card > legend {
  padding: 4px var(--s-3);
  font-weight: 600;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 999px;
  margin-left: -4px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.service-card > legend .svc-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.service-card > legend .svc-remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--err);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: var(--s-2);
}
.service-card > legend .svc-remove:hover {
  background: var(--err-bg);
  border-color: color-mix(in srgb, var(--err) 30%, transparent);
}
.service-card .faq-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.service-card .add-faq { margin-top: var(--s-2); align-self: flex-start; }

/* ── Collapsible "advanced retrieval" blocks within service / FAQ rows ── */
.advanced-block {
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent-bg) 30%, transparent);
}
.advanced-block[open] {
  background: var(--bg-2);
  border-style: solid;
}
.advanced-block > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: 2px 0;
}
.advanced-block > summary::-webkit-details-marker { display: none; }
.advanced-block > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--accent);
  font-size: 11px;
  width: 12px;
  transition: transform 120ms ease;
}
.advanced-block[open] > summary::before { transform: rotate(90deg); }
.advanced-block .adv-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.advanced-block .adv-hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.advanced-block .grid-2,
.advanced-block .row.stack {
  margin-top: var(--s-3);
}
.advanced-block .subsec-title {
  margin: var(--s-4) 0 var(--s-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-2);
  font-weight: 600;
}
.advanced-block .subsec-title:first-of-type { margin-top: var(--s-3); }
.faq-row .advanced-block { margin-top: var(--s-2); }

/* "Add another service" — visually heavier than add-faq because it spans
   the form, not a single sub-card */
.add-service-btn {
  align-self: flex-start;
  margin: var(--s-3) 0;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  padding: 8px 14px;
}
.add-service-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Department detail page: nested service + FAQ display ────────────── */
.service-block { padding: var(--s-5) var(--s-6); }
.service-block .service-faqs {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
}
.service-block .service-faqs h4 {
  margin: 0 0 var(--s-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--muted);
}
.faq-card-inner {
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--s-2) 0;
}

/* ── Pipeline progress (vertical timeline) ───────────────────────────── */
.pipeline {
  list-style: none;
  margin: var(--s-4) 0;
  padding: 0;
  position: relative;
  max-width: 720px;
}
.pipeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--border);
}
.pipeline li.step {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) 0;
  position: relative;
}
.step-marker {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--card);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  color: var(--muted);
  flex-shrink: 0;
}
.step-marker svg { width: 16px; height: 16px; display: none; }
.step.pending  .step-marker .ic-pending { display: block; }
.step.pending  .step-marker { color: var(--muted); }
.step.running  .step-marker .ic-running { display: block; animation: spin 1.2s linear infinite; }
.step.running  .step-marker { color: var(--accent); border-color: var(--accent); }
.step.ok       .step-marker .ic-ok { display: block; }
.step.ok       .step-marker { color: var(--card); border-color: var(--ok); background: var(--ok); }
.step.ok       .step-marker .ic-ok { color: white; }
.step.error    .step-marker .ic-err { display: block; }
.step.error    .step-marker { color: var(--card); border-color: var(--err); background: var(--err); }
.step.error    .step-marker .ic-err { color: white; }
.step.skipped  .step-marker .ic-pending { display: block; opacity: 0.4; }

.step-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
}
.step.pending .step-name { color: var(--muted); }
.step.running .step-name { color: var(--accent); }
.step-msg {
  font-size: 12px;
  font-family: var(--font-mono);
  margin-top: 2px;
  word-break: break-word;
}
.step.error .step-msg { color: var(--err); white-space: pre-wrap; }

.step-dur {
  font-size: 11px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Pulsing dot on the currently running step */
.step.running .step-marker::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  opacity: 0.5;
  animation: pulse 1.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);    opacity: 0.5; }
  100% { transform: scale(1.6);  opacity: 0; }
}
@keyframes spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}

/* ── Print: keep dashboard readable on paper ──────────────────────────── */
@media print {
  body { background: #fff; }
  header nav, .actions, footer { display: none; }
  .card, table { box-shadow: none; break-inside: avoid; }
}

/* ── Two-role review workflow: status badges, role badge, action buttons ── */
.status {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
  vertical-align: middle;
  font-family: var(--font-sans);
}
.status-pending_review { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.status-approved       { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.status-published      { background: #dcfce7; color: #166534; border-color: #86efac; }
.status-rejected       { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.status-superseded     { background: var(--bg-2); color: var(--muted); border-color: var(--border); }
.status-invalid        { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* keep old "ok" / "err" classes working — used by traces, runs, etc. */
.status.ok  { background: #dcfce7; color: #166534; border-color: #86efac; }
.status.err { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* /eval grade pills — reuse the .status pill base, three states only. */
.status-eval-pass    { background: #dcfce7; color: #166534; border-color: #86efac; }
.status-eval-partial { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.status-eval-fail    { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* Nav badges — small numeric pill next to a nav tab to show pending work. */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.nav-badge-attention { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.nav-badge-warn      { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Sign-out button in the header. Stays visually subdued — destructive
   action shouldn't compete with primary nav links. */
.signout-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-sm);
  color: var(--muted);
  border: 1px solid transparent;
  background: transparent;
}
.signout-btn:hover {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 30%, transparent);
  background: var(--err-bg);
}
.signout-btn svg { width: 13px; height: 13px; }

/* Role badge in the header (admin / officer pill next to nav). */
.role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-left: 6px;
}
.role-badge svg { width: 11px; height: 11px; }
.role-badge.role-admin {
  background: #dbeafe; color: #1e40af;
  border: 1px solid #93c5fd;
}
.role-badge.role-officer {
  background: #ede9fe; color: #5b21b6;
  border: 1px solid #c4b5fd;
}
.role-badge.role-super-admin {
  background: #fef3c7; color: #92400e;
  border: 1px solid #fcd34d;
}
.role-badge.role-viewer {
  background: #f1f5f9; color: #475569;
  border: 1px solid #cbd5e1;
}
/* Custom roles created from /roles get no dedicated color — same
   neutral treatment as Viewer so a brand-new role doesn't look broken
   before anyone picks it a color. */
.role-badge:not(.role-admin):not(.role-officer):not(.role-super-admin):not(.role-viewer) {
  background: #f1f5f9; color: #475569;
  border: 1px solid #cbd5e1;
}

/* Permission editor on /roles/<id>/edit — one card per resource
   (Submissions, Users, ...), each with a compact row of view/manage
   checkboxes. Deliberately plain <div>s, not <label>s, for the group
   and option wrappers: this form has the .submit-form class, and
   `.submit-form label { display: inline-flex; ... }` (further up this
   file) used to hijack a differently-named .perm-row <label> wrapper
   via specificity, producing a broken staircase layout. Only the tiny
   per-checkbox <label for=...> here is an actual <label>, and that's
   exactly the kind of label .submit-form's rule is meant to style. */
.perm-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}
.perm-group {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  background: var(--card);
}
.perm-group h4 {
  margin: 0 0 var(--s-2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.perm-group-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.perm-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.perm-option input[type="checkbox"] {
  width: 15px; height: 15px;
  margin: 0;
  flex: none;
}
.perm-option label {
  font-size: 13px;
  font-weight: 500;
  cursor: help;
  border-bottom: 1px dotted var(--muted);
}

/* Approve / Reject buttons — bigger, more committal than .btn */
.btn.btn-approve {
  background: #16a34a; color: #fff;
  border-color: #16a34a;
  font-weight: 600;
}
.btn.btn-approve:hover { background: #15803d; border-color: #15803d; }
.btn.btn-reject {
  background: var(--bg); color: #b91c1c;
  border-color: #fca5a5;
}
.btn.btn-reject:hover { background: #fee2e2; border-color: #b91c1c; }

/* Reject form: hidden by default, slides in when admin clicks Reject. */
.reject-form {
  display: none;
  margin-top: var(--s-4);
  border-left: 4px solid #b91c1c;
}
.reject-form.open { display: block; }
.reject-form textarea {
  width: 100%;
  padding: 8px var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: 14px;
  resize: vertical;
}
.reject-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Small helper for muted small text in tables */
.muted.small, td.small { font-size: 12px; color: var(--muted); }

/* ── Danger button + flash banners (delete-submission, dupe warnings) ── */
.btn.btn-danger {
  border-color: color-mix(in srgb, var(--err) 50%, var(--border));
  color: var(--err);
  background: var(--bg);
}
.btn.btn-danger:hover {
  background: var(--err-bg);
  border-color: var(--err);
}
.card.flash {
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  border-left: 4px solid var(--accent);
}
.card.flash.flash-ok   { border-left-color: #16a34a; background: #f0fdf4; color: #14532d; }
.card.flash.flash-warn { border-left-color: #eab308; background: #fefce8; color: #713f12; }
.card.flash ul { margin: 6px 0 0 var(--s-5); padding: 0; }
.card.flash li { margin: 2px 0; }
.inline-code {
  display: inline-block;
  margin: 4px 0;
  padding: 2px 6px;
  background: rgba(0,0,0,0.05);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre;
}

/* ── Pretty-printed markdown view on submission detail ─────────────── */
.markdown-render {
  margin-top: var(--s-3);
  padding: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  max-height: 600px;
  overflow-y: auto;
}
.markdown-render .md-line {
  padding: 1px 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.markdown-render .md-line.md-ur.urdu {
  font-family: var(--font-urdu, 'Noto Nastaliq Urdu'), serif;
  font-size: 16px;
  line-height: 1.9;
  text-align: right;
}
.markdown-render .md-line.md-en {
  font-family: var(--font-mono);
}
.markdown-render .md-line.md-heading {
  font-weight: 600;
  color: var(--accent);
  margin-top: 6px;
}
.markdown-render .md-line.md-comment {
  color: var(--muted);
  font-style: italic;
  font-size: 11px;
}

/* ── Bilingual form fields panel + chunks table (submission detail) ──── */

.bilingual-meta { margin-bottom: var(--s-3); }
.bilingual-service {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-top: var(--s-4);
  background: var(--bg-2);
}
.bilingual-service h4 {
  margin: 0 0 var(--s-3);
  color: var(--accent);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.bilingual-service h5 {
  margin: var(--s-3) 0 var(--s-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-2);
}
.bilingual-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
@media (max-width: 760px) {
  .bilingual-row { grid-template-columns: 1fr; }
}
.lang-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.lang-cell p, .lang-cell pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.lang-cell pre.bilingual-block {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
}
.lang-cell pre.bilingual-block.urdu {
  font-family: var(--font-urdu, 'Noto Nastaliq Urdu'), var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  text-align: right; direction: rtl;
}
.lang-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.bilingual-aux {
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.bilingual-aux .aux-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bilingual-aux b {
  color: var(--fg-2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.bilingual-aux code { font-size: 12px; }

/* Aliases — render each comma-separated value as its own chip with
   per-chip bidi isolation so Latin and Arabic don't fight each other
   over reading direction. */
.alias-chips, .numeric-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.alias-chip, .numeric-chips code {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-family: var(--font-mono);
  unicode-bidi: isolate;
  white-space: nowrap;
}
.alias-chip.urdu, .numeric-chips code.urdu {
  font-family: var(--font-urdu, 'Noto Nastaliq Urdu'), var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  padding: 2px 12px;
  background: color-mix(in srgb, var(--accent-bg) 50%, transparent);
}

/* Acronyms — proper 3-column table so EN expansion and UR don't bleed
   into each other. Each row is one acronym definition. */
.acronym-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
  font-size: 12px;
}
.acronym-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.acronym-table td {
  padding: 6px 8px;
  border-bottom: 1px dashed var(--border);
  vertical-align: top;
}
.acronym-table tr:last-child td { border-bottom: none; }
.acronym-table .acronym-tok {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.acronym-table .acronym-en {
  unicode-bidi: isolate;
}
.acronym-table .acronym-ur {
  font-family: var(--font-urdu, 'Noto Nastaliq Urdu'), var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  text-align: right;
  unicode-bidi: isolate;
}

/* Paraphrases — bullet list, per-item bidi-isolated so Urdu and Roman
   don't confuse the renderer. */
.paraphrase-list {
  margin: 0;
  padding-left: var(--s-4);
  list-style: disc outside;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.paraphrase-list li {
  font-size: 12px;
  unicode-bidi: isolate;
}
.paraphrase-list li.urdu {
  font-family: var(--font-urdu, 'Noto Nastaliq Urdu'), var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  direction: rtl;
}

.bilingual-faqs {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
}
.bilingual-faq {
  border-left: 3px solid var(--accent);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  background: var(--bg);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.faq-num-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  margin-bottom: var(--s-2);
}

/* Chunks table on the submission detail page (when published) */
.chunks-table { width: 100%; margin-top: var(--s-3); }
.chunks-table th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); font-weight: 600;
}
.chunks-table tr.chunk-lang-ur { background: color-mix(in srgb, var(--accent-bg) 30%, transparent); }
.chunks-table tr.chunk-lang-en { background: var(--bg); }

.lang-tag-ur, .lang-tag-en {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.lang-tag-ur { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); border: 1px solid var(--accent); }
.lang-tag-en { background: #e0e7ff; color: #3730a3; border: 1px solid #a5b4fc; }
.lang-tag-mixed { background: var(--bg-2); color: var(--muted); border: 1px solid var(--border); }

.status-faq      { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.status-section  { background: #f0fdf4; color: #166534; border-color: #86efac; }
.status-overview { background: #fef9c3; color: #854d0e; border-color: #fde047; }

/* ── Test-retrieval gate (submission detail page) ─────────────────────── */
.test-gate { padding: var(--s-5) var(--s-6); }
.test-gate-head h3 {
  margin: 0 0 var(--s-2);
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 16px; color: var(--accent);
}
.test-gate-head p { margin: 0 0 var(--s-4); }
.test-gate-head .hint-inline { color: var(--accent); font-weight: 500; }

.test-gate-form { display: flex; flex-direction: column; gap: var(--s-3); }
.test-gate-rows { display: flex; flex-direction: column; gap: var(--s-2); }
.test-row {
  display: flex; align-items: center; gap: var(--s-3);
}
.test-row input.test-q {
  flex: 1; min-width: 0;
  padding: 8px var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
}
.test-row input.test-q:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}
.test-row input.test-q.urdu {
  font-family: var(--font-urdu, 'Noto Nastaliq Urdu'), var(--font-sans);
  text-align: right; direction: rtl;
  font-size: 17px; line-height: 1.9;
}

.test-indicator {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  font-weight: 700; font-size: 16px;
  font-family: var(--font-mono);
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--muted);
  transition: background 120ms ease, color 120ms ease;
}
.test-indicator[data-state="loading"] { color: var(--accent); animation: blink 1s infinite; }
.test-indicator[data-state="green"]   { background: #dcfce7; color: #166534; border-color: #86efac; }
.test-indicator[data-state="yellow"]  { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.test-indicator[data-state="red"]     { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.test-indicator[data-state="error"]   { background: var(--err-bg); color: var(--err); border-color: var(--err); }
@keyframes blink { 50% { opacity: 0.4; } }

.test-gate-actions {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.test-gate-actions .spacer { flex: 1; }
.scope-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 12px; color: var(--muted);
}
.scope-select {
  padding: 4px 8px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg);
  font-size: 12px;
}
.test-status { min-height: 18px; font-size: 13px; }
.test-status b { color: var(--fg); font-weight: 600; }

.test-results {
  display: flex; flex-direction: column; gap: var(--s-3);
  margin-top: var(--s-3);
}
.test-result-block {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border-left-width: 4px;
}
.test-result-block.test-green  { border-left-color: #16a34a; }
.test-result-block.test-yellow { border-left-color: #eab308; }
.test-result-block.test-red    { border-left-color: #dc2626; }

.test-result-head {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.test-result-head .dot {
  width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0;
}
.dot-green  { background: #16a34a; }
.dot-yellow { background: #eab308; }
.dot-red    { background: #dc2626; }
.test-result-head .q {
  font-weight: 600; color: var(--fg); flex: 1; min-width: 0;
  word-break: break-word;
}
.test-result-head .q.urdu {
  font-family: var(--font-urdu, 'Noto Nastaliq Urdu'), var(--font-sans);
  font-size: 17px; line-height: 1.9;
}
.test-result-head .meta {
  font-size: 11px; color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.4px;
}

.test-hits {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.test-hit {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}
.test-hit.own {
  background: color-mix(in srgb, var(--accent-bg) 70%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.hit-head {
  display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
  margin-bottom: 4px;
}
.hit-score {
  font-family: var(--font-mono);
  font-weight: 600; color: var(--accent);
}
.hit-dept {
  font-weight: 600; color: var(--fg-2);
}
.hit-sec {
  font-style: italic;
}
.hit-type {
  text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.own-badge {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
  padding: 2px 6px;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 999px;
}
.hit-text {
  font-size: 13px; line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.hit-text.urdu {
  font-family: var(--font-urdu, 'Noto Nastaliq Urdu'), var(--font-sans);
  font-size: 16px; line-height: 1.9;
  text-align: right; direction: rtl;
}
.test-error, .test-empty {
  font-size: 13px; color: var(--muted); font-style: italic;
}
.test-error { color: var(--err); }

/* PR #77: ASR provider badge in the live-traces table.
   Different colors per provider so operators can spot the swap
   at-a-glance without reading the label every time. */
td.asr-badge { white-space: nowrap; }
.asr-badge .badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: inline-block;
}
.asr-badge .badge.asr-whisper {
  background: #ecfdf5;   /* soft green */
  color:      #065f46;
  border: 1px solid #6ee7b7;
}
.asr-badge .badge.asr-elevenlabs {
  background: #eef2ff;   /* soft indigo */
  color:      #3730a3;
  border: 1px solid #a5b4fc;
}
.asr-badge .badge.asr-xtts {
  /* legacy alias — same green family as whisper */
  background: #ecfdf5;
  color:      #065f46;
  border: 1px solid #6ee7b7;
}
.asr-badge .muted { font-size: 12px; }

/* PR #78: Sessions table — quality / department badges.
   Same visual shape as the ASR badge so the row is scannable. */
.quality .badge,
.depts .badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: inline-block;
  white-space: nowrap;
}
.quality .badge.q-green  { background:#ecfdf5; color:#065f46; border:1px solid #6ee7b7; }
.quality .badge.q-yellow { background:#fef9c3; color:#854d0e; border:1px solid #fde047; }
.quality .badge.q-red    { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
/* PR #81: LIVE badge — pulses to draw attention to in-progress
   calls on the dashboard. Goes on sessions where status='active'. */
.quality .badge.q-live   {
  background:#fef3c7; color:#92400e; border:1px solid #f59e0b;
  animation: pulse-live 1.4s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}
/* The row itself gets a faint highlight so live calls stand out
   even before you read the badge. */
#session-table tr.row-active {
  background: #fffbeb;       /* very soft amber */
  border-left: 3px solid #f59e0b;
}
#session-table tr.row-active td { font-weight: 500; }

.depts .badge.dept-badge {
  background:#f1f5f9; color:#334155; border:1px solid #cbd5e1;
  margin-right: 3px;
}
.depts .muted { font-size: 11px; }

/* Compact the new session table — more columns than the turns table */
#session-table td { font-size: 13px; padding: 6px 8px; }
#session-table .turn-count { text-align: center; font-variant-numeric: tabular-nums; }
#session-table .dur        { font-variant-numeric: tabular-nums; }
#session-table .usr        { max-width: 360px; overflow: hidden;
                              text-overflow: ellipsis; white-space: nowrap;
                              direction: rtl; }

/* ── PR #79: Session detail page ─────────────────────────────────── */

.session-detail-header {
  margin-bottom: 18px;
}
.session-detail-header .back-link {
  font-size: 13px; color: var(--accent);
  text-decoration: none; display: inline-block; margin-bottom: 8px;
}
.session-detail-header .back-link:hover { text-decoration: underline; }
.session-detail-header .session-title {
  margin: 0 0 4px 0;
  font-size: 20px;
}
.session-detail-header .session-id {
  font-size: 12px; color: var(--muted);
  background: var(--bg-2); padding: 2px 8px; border-radius: var(--r-sm);
  display: inline-block; margin-bottom: 4px;
}
.session-detail-header .session-time {
  font-size: 13px;
}

/* KPI strip — horizontal scroll on narrow screens */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin: 14px 0 24px 0;
}
.kpi-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  min-width: 0;
}
.kpi-card.hero { background: var(--accent-bg); border-color: var(--accent); }
.kpi-card .kpi-value {
  font-size: 20px; font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}
.kpi-card.hero .kpi-value { color: var(--accent); }
.kpi-card .kpi-value.kpi-good { color: #047857; }
.kpi-card .kpi-value.kpi-warn { color: #92400e; }
.kpi-card .kpi-value.kpi-bad  { color: #991b1b; }
.kpi-card .kpi-value .badge {
  font-size: 11px; padding: 2px 7px;
}
.kpi-card .kpi-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-top: 4px;
}

/* Transcript */
.transcript-heading {
  margin: 8px 0 10px 0;
  font-size: 14px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted);
}
.transcript { display: flex; flex-direction: column; gap: 6px; }
.turn { display: flex; }

/* User bubbles: right side. Urdu reads RTL so user-right + RTL text
   = correct conversational flow for an Urdu helpline transcript. */
.turn:has(.bubble-user) { justify-content: flex-end; }

.bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.bubble-user {
  background: var(--accent-bg);
  border-color: var(--accent);
  border-bottom-right-radius: 4px;
}
.bubble-agent {
  background: var(--bg);
  border-bottom-left-radius: 4px;
}
.bubble-error {
  background: #fef2f2;
  border-color: #fca5a5;
}
.bubble-text {
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.bubble-text.rtl {
  direction: rtl; text-align: right;
  font-family: "Noto Nastaliq Urdu", "Fira Sans", system-ui, sans-serif;
}
.bubble-meta {
  margin-top: 6px;
  font-size: 11px;
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center;
}
.bubble-meta .tag {
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-sm);
  background: var(--bg-2); color: var(--muted);
  border: 1px solid var(--border);
}
.bubble-meta .tag.tag-dept { color: #1e40af; border-color: #93c5fd; background:#eff6ff; }
.bubble-meta .tag.tag-warn { color: #92400e; border-color: #fde047; background:#fef9c3; }
.bubble-meta .tag.tag-bad  { color: #991b1b; border-color: #fca5a5; background:#fee2e2; }
.bubble-meta .link {
  color: var(--accent); text-decoration: none;
}
.bubble-meta .link:hover { text-decoration: underline; }

/* Per-turn caller audio. Sits between the transcript and the meta row so a
   reviewer can hear what was actually said next to what the ASR heard. */
.turn-audio {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 32px;
  margin-top: 8px;
}

/* ── ASR labelling: correcting a turn, and the call's standing ────────── */
.icon-btn {
  background: none; border: none; padding: 0 2px; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.icon-btn:hover { color: var(--fg); }
.asr-was {
  font-size: 12px; color: var(--muted); margin-top: 4px;
  font-family: "Noto Nastaliq Urdu", "Fira Sans", system-ui, sans-serif;
}
.label-row { margin-top: 8px; }
.label-input {
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-1); color: var(--fg); font: inherit; font-size: 13px;
  font-family: "Noto Nastaliq Urdu", "Fira Sans", system-ui, sans-serif;
  direction: rtl; text-align: right; resize: vertical;
}
.label-actions { display: flex; gap: 6px; margin-top: 6px; }
.btn-mini {
  font-size: 11px; padding: 3px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg-2);
  color: var(--fg); cursor: pointer;
}
.btn-mini:hover { background: var(--bg-1); }
.btn-mini.btn-save { background:#1e40af; border-color:#1e40af; color:#fff; }
.btn-mini.btn-save:hover { background:#1d4ed8; }
.btn-mini[disabled] { opacity: .6; cursor: default; }
.bubble-meta .tag.tag-ok     { color:#065f46; border-color:#6ee7b7; background:#d1fae5; }
.bubble-meta .tag.tag-fixed  { color:#5b21b6; border-color:#c4b5fd; background:#ede9fe; }
/* Training set: the verdict on each row, and its clip played from the row */
.training-set .tag, table .tag.tag-fixed, table .tag.tag-unclear, table .tag.tag-reject { white-space: nowrap; }
td .tag.tag-ok      { color:#065f46; border:1px solid #6ee7b7; background:#d1fae5; }
td .tag.tag-fixed   { color:#5b21b6; border:1px solid #c4b5fd; background:#ede9fe; }
td .tag.tag-unclear { color:#92400e; border:1px solid #fcd34d; background:#fef3c7; }
td .tag.tag-reject  { color:#991b1b; border:1px solid #fca5a5; background:#fee2e2; }
tr.row-set-aside td { opacity: 0.72; }
.play-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 6px; padding: 0;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--card); color: var(--accent);
  font-size: 10px; line-height: 1; cursor: pointer; vertical-align: middle;
}
.play-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
.kpi-of { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; }

.bubble-meta .tag.tag-unclear{ color:#92400e; border-color:#fcd34d; background:#fef3c7; }
.bubble-meta .tag.tag-reject { color:#991b1b; border-color:#fca5a5; background:#fee2e2; }
.label-hint { font-size: 11.5px; margin-bottom: 4px; }
.review-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; font-size: 13px;
  border: 1px solid var(--border); border-left: 3px solid #1e40af;
  border-radius: var(--r-sm); background: var(--bg-2);
}
.review-bar.review-done { border-left-color: #065f46; }
.review-bar .review-state { flex: 1; }


/* ── /config (Super Admin) ───────────────────────────────────────────── */
.cfg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.cfg-env { font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px;
  vertical-align: middle; margin-left: 8px; border: 1px solid var(--border); color: var(--muted, #666); }
.cfg-env-prod { background: var(--err-bg); color: var(--err); border-color: var(--err); }
.cfg-env-dev  { background: var(--ok-bg);  color: var(--ok);  border-color: var(--ok); }
.cfg-procs { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-4) 0; }
.cfg-proc { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin: 0; }
.cfg-warnbox { background: var(--warn-bg); color: var(--warn); justify-content: center; }
.cfg-filter { width: 100%; max-width: 420px; margin: var(--s-2) 0 var(--s-4); padding: 8px 10px; }
.cfg-group h3 { margin: var(--s-6) 0 var(--s-2); }
.cfg-table td { vertical-align: top; }
.cfg-table td:first-child { width: 50%; }
.cfg-val { word-break: break-all; }
.cfg-kind { font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); margin-left: 4px; }
.cfg-kind-tunable  { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.cfg-kind-secret   { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--border)); }
.cfg-switch { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cfg-switch > div { flex-basis: 100%; }
.cfg-switch .js-sw-reason { min-width: 10em; flex: 1; }
.cfg-risk { font-size: 11px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.cfg-risk-high   { background: var(--err-bg); color: var(--err); }
.cfg-risk-medium { background: var(--warn-bg); color: var(--warn); }
.cfg-note { color: var(--warn); margin-top: 2px; }
.cfg-revealed { background: var(--warn-bg); padding: 0 4px; border-radius: 3px; user-select: all; }
.cfg-dialog { border: 1px solid var(--border); border-radius: 8px; padding: var(--s-5, 20px); max-width: 360px; width: 90vw; }
.cfg-dialog input { width: 100%; padding: 8px 10px; margin: var(--s-2) 0; box-sizing: border-box; }
.cfg-dialog-err { color: var(--err); }
.cfg-dialog-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3); }

/* ── /config/lines ───────────────────────────────────────────────────── */
.ln-card { margin: 0 0 var(--s-3); padding: 12px 16px; }
.ln-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ln-text { font-size: 18px; line-height: 1.9; margin: 6px 0; font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif; }
.ln-default { margin: 4px 0; }
.ln-default .rtl { color: var(--muted, #666); line-height: 1.9; }
.ln-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.ln-actions audio { height: 32px; }
.ln-editor textarea { width: 100%; font-size: 18px; line-height: 1.9; box-sizing: border-box; padding: 8px; }
.ln-editor input { width: 100%; box-sizing: border-box; padding: 8px; margin-top: 6px; }

/* ── /config/prompts ─────────────────────────────────────────────────── */
.pr-rules { margin: var(--s-3) 0; padding: 10px 14px; line-height: 1.7; }
.pr-editor textarea { width: 100%; min-height: 60vh; box-sizing: border-box; padding: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; line-height: 1.55; }
.pr-editor input { width: 100%; box-sizing: border-box; padding: 8px; margin-top: 8px; }
.pr-diff { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; max-height: 50vh; overflow: auto; }
.pr-diff div { padding: 0 10px; white-space: pre-wrap; word-break: break-word; }
.pr-diff .d-add { background: var(--ok-bg); color: var(--ok); }
.pr-diff .d-del { background: var(--err-bg); color: var(--err); text-decoration: line-through; }
.pr-diff .d-hunk { color: var(--muted, #888); margin-top: 6px; }
.pr-pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 50vh; overflow: auto; }


/* ── answer scores & call report card ───────────────────────────────── */
.call-card { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: var(--s-3) 0; font-size: 14px; }
.call-card .cc-good { color: var(--ok); font-weight: 600; }
.call-card .cc-bad { color: var(--err); font-weight: 600; }
.ans-score { font-size: 12px; margin: 4px 0; padding: 2px 8px; border-radius: 6px; display: inline-block; max-width: 100%; }
.ans-ok { background: var(--ok-bg); color: var(--ok); }
.ans-warn { background: var(--warn-bg); color: var(--warn); }
.ans-bad { background: var(--err-bg); color: var(--err); }
.ans-none { background: var(--surface-2, #f3f4f6); color: var(--muted, #666); }

.call-card-top { display: flex; gap: 10px; align-items: center; margin: var(--s-3) 0; font-size: 14px; }
.call-report { margin-top: var(--s-6); }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.cr-n { font-size: 22px; font-weight: 700; }
.cr-l { font-size: 12px; color: var(--muted, #666); }
.cc-warn { color: var(--warn); }
.cr-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Sign-in page: glass card over the Arfa Tower photo ─────────────────── */
body.login-page {
  display: grid; place-items: center;
  padding: var(--s-6) var(--s-4);
}
body.login-page::before { background: rgba(244, 248, 245, 0.55); }
@media (prefers-color-scheme: dark) {
  body.login-page::before { background: rgba(8, 16, 12, 0.7); }
}
.login-card {
  width: min(400px, 100%);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(13, 75, 37, 0.18);
  padding: 22px 26px 24px;
}
.login-card .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.login-card .top img { height: 54px; width: auto; border-radius: 9px; box-shadow: 0 1px 4px rgba(0,0,0,0.14); background: #fff; }
.login-card .top img.ccc { padding: 6px 9px; }
.login-card .logo { display: block; width: 116px; height: 116px; object-fit: contain; margin: 2px auto 8px; }
.login-card h1 { font-size: 21px; text-align: center; margin: 0 0 2px; }
.login-card .sub { text-align: center; color: var(--muted); margin: 0 0 18px; font-size: 13px; }
.login-card .sub b { color: var(--accent); }
.login-card .submit-form input { padding: 11px 12px; border-radius: 9px; }
.login-card button.primary { width: 100%; justify-content: center; padding: 12px; border-radius: 9px; font-size: 14px; font-weight: 600; margin-top: var(--s-2); }
.login-card .alert { background: var(--err-bg); color: var(--err); border-radius: 9px; padding: 9px 12px; font-size: 13px; margin-bottom: var(--s-4); text-align: center; }

/* Footer sits at the bottom of the window on short pages */
body:not(.login-page) { display: flex; flex-direction: column; }
body:not(.login-page) > main { flex: 1 0 auto; width: 100%; }