/* ==========================================================================
   Prabha Studio — design tokens + component primitives
   ==========================================================================

   THIS IS THE SINGLE SOURCE OF TRUTH FOR THE EDITOR CONSOLE'S LOOK.

   How to retheme:
     1. Color: edit the :root variables under "BRAND" / "SEMANTIC" /
        "INK" / "SURFACE".  Every component reads them via var(--name).
     2. Type: edit the --font-* variables under "TYPE".  Add the
        matching Google Fonts <link> in base.html if you switch to a
        new family.
     3. Spacing / radius / motion: tweak the scale variables under
        "LAYOUT" / "MOTION".
     4. Components below (.btn, .card, .field, etc.) only reference
        variables — they should rarely need direct edits.

   How to switch the entire accent in one second (example):
     --accent:       #1D67B1;     ← change this
     --accent-hover: #155086;     ← darker variant
     --accent-soft:  rgba(29, 103, 177, 0.08);
   ...and everything brand-colored updates: brand-mark, primary
   buttons, focus rings, active nav, etc.  SEMANTIC colors (danger /
   success / warning) stay independent so "rejected" doesn't follow
   brand changes.

   ==========================================================================
*/

:root {
  /* ----- SURFACE ------------------------------------------------- */
  --bg:             #FBFBFC;   /* page background — cool near-white (Linear) */
  --bg-elev:        #FFFFFF;   /* cards, popovers */
  --bg-muted:       #F4F5F7;   /* subtle secondary surface (cool gray) */
  --bg-hover:       #EFF0F3;   /* row / button hover */
  /* Aliases — some page-level styles reference these names; map them to
     the canonical tokens so every surface stays on-palette. */
  --surface:        var(--bg-elev);
  --surface-2:      var(--bg-muted);

  /* ----- ELEVATION (premium depth) ------------------------------- */
  --shadow-sm:      0 1px 3px rgba(17, 24, 39, 0.04),
                    0 6px 16px -8px rgba(17, 24, 39, 0.06);
  --shadow-md:      0 2px 8px rgba(17, 24, 39, 0.05),
                    0 16px 36px -12px rgba(17, 24, 39, 0.12);

  /* ----- INK ----------------------------------------------------- */
  --fg:             #0A0A0A;   /* primary text */
  --fg-secondary:   #4A4A47;   /* body secondary */
  --fg-tertiary:    #8A8A85;   /* meta / labels */
  --fg-quaternary:  #B5B5B0;   /* placeholders / faintest */

  /* ----- LINES (hairlines) -------------------------------------- */
  --line:           rgba(17, 24, 39, 0.09);
  --line-strong:    rgba(17, 24, 39, 0.15);
  --line-faint:     rgba(17, 24, 39, 0.05);

  /* ----- BRAND (accent) ----------------------------------------- *
   * Change these 3 values to retheme the entire console.          */
  --accent:         #1D67B1;   /* Andhra Prabha brand blue (do not change) */
  --accent-hover:   #155086;
  --accent-soft:    rgba(29, 103, 177, 0.08);

  /* ----- SEMANTIC (decoupled from brand) ------------------------ *
   * These stay constant when the brand accent changes — semantic   *
   * meanings should be stable: red = danger always.                */
  --danger:         #9B2226;
  --danger-hover:   #7E1A1D;
  --danger-soft:    rgba(155, 34, 38, 0.08);

  --success:        #5C8A3D;
  --success-soft:   rgba(92, 138, 61, 0.08);

  --warning:        #C49A23;
  --warning-soft:   rgba(196, 154, 35, 0.10);

  --info:           var(--accent);     /* re-use brand for info */
  --info-soft:      var(--accent-soft);

  /* ----- STATUS DOTS (resolve from semantic) -------------------- */
  --dot-pending:    var(--warning);
  --dot-approved:   var(--success);
  --dot-rejected:   var(--danger);
  --dot-ready:      var(--fg);

  /* ----- TYPE --------------------------------------------------- */
  --font-sans:      'Geist', -apple-system, system-ui, sans-serif;
  --font-serif:     'Instrument Serif', 'Times New Roman', serif;
  --font-mono:      'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --font-te:        'Anek Telugu', 'Noto Sans Telugu', 'Geist', system-ui, sans-serif;

  --text-base:      14.5px;    /* body font size */
  --leading-base:   1.5;       /* body line height */
  --tracking-base:  -0.005em;  /* body letter spacing */

  /* ----- LAYOUT ------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --sidebar-w:      236px;
  --max-content:    1080px;
  --radius:         12px;
  --radius-sm:      9px;

  /* ----- MOTION ------------------------------------------------- */
  --ease:           cubic-bezier(0.2, 0, 0, 1);
  --dur:            180ms;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(90% 55% at 78% -5%, rgba(86,197,232,0.07), transparent 60%),
    radial-gradient(70% 45% at 12% 0%, rgba(29,103,177,0.06), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-sans);
  font-feature-settings: "cv01", "cv02", "cv03", "ss01", "ss02";
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
body { display: flex; flex-direction: column; }

/* Telugu type — slightly larger so the script reads on par. */
.te, [lang="te"] { font-family: var(--font-te); letter-spacing: 0; font-size: 1.04em; }

/* Selection */
::selection { background: var(--accent); color: white; }

/* Focus ring (subtle, premium) */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus, input:focus, select:focus, textarea:focus, a:focus { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Scrollbar — slim, ghost */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 99px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-tertiary); }

/* ==========================================================================
   APP SHELL: sidebar (desktop) + bottom tab bar (mobile)
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; padding-bottom: 64px; }
}

.sidebar {
  /* Light, airy rail (Sarvam-style). White surface, dark ink. */
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
  color: var(--fg-secondary);
  padding: var(--space-5) 12px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  transition: width var(--dur) var(--ease);
}
.sidebar::-webkit-scrollbar { width: 0; }
@media (max-width: 768px) { .sidebar { display: none; } }

.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 8px;
  margin-bottom: var(--space-5);
  text-decoration: none; color: inherit;
  position: relative;
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: var(--ai-grad);
  color: white;
  font-family: var(--font-te);
  font-weight: 700; font-size: 19px; line-height: 1;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: var(--glow-soft);
}
.brand-name {
  font-family: var(--font-serif); font-style: normal;
  font-weight: 600; font-size: 20px; letter-spacing: 0.01em;
  color: var(--fg);
}
.brand-logo {
  /* Andhra Prabha Telugu wordmark (transparent PNG, blue ink on the
     light rail). Shown alone in the expanded sidebar; collapses out and
     the అ mark takes over when the rail is minimized. */
  display: block;
  height: 38px; width: auto; max-width: 196px;
  object-fit: contain;
}
/* Expanded sidebar: wordmark only — hide the అ square. */
.sidebar .brand-mark { display: none; }
/* Collapsed rail: bring the అ square back as the compact icon. */
.nav-collapsed .sidebar .brand-mark { display: grid; }
.brand-tag {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--fg-tertiary); margin-top: 3px;
}

/* Collapse toggle — a normal top item (not absolute, so it never clips
   or floats). Right-aligned when open; centered when collapsed. */
.nav-collapse-btn {
  align-self: flex-end;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-muted);
  border: 1px solid var(--line);
  color: var(--fg-tertiary); cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
  margin-bottom: 6px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-collapse-btn:hover { background: var(--bg-hover); color: var(--fg); }
.nav-collapsed .nav-collapse-btn { align-self: center; }
/* In collapsed mode the chevron flips to point right (expand). */
.nav-collapsed .nav-collapse-btn svg { transform: scaleX(-1); }

.nav-section-title {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-quaternary);
  padding: 18px 12px 6px;
  font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--fg-secondary);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.nav-item:hover { background: var(--bg-muted); color: var(--fg); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.nav-item .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--fg-tertiary); }
.nav-item.active .icon { color: var(--accent); }
.nav-item .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-quaternary);
  padding: 1px 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 8px 0;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 9px;
}
.sidebar-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ai-grad);
  color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.sidebar-email {
  font-size: 12px; color: var(--fg-tertiary);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-signout {
  background: none; border: 0;
  color: var(--fg-tertiary); cursor: pointer;
  padding: 5px; border-radius: 7px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sidebar-signout:hover { color: var(--fg); background: var(--bg-muted); }

/* ----- Collapsed rail (icon-only) ----- */
.nav-collapsed .app { grid-template-columns: 68px 1fr; }
.nav-collapsed .sidebar { padding-left: 10px; padding-right: 10px; }
.nav-collapsed .sidebar .brand-name,
.nav-collapsed .sidebar .brand-logo,
.nav-collapsed .sidebar .brand-tag,
.nav-collapsed .nav-item span,
.nav-collapsed .nav-item .kbd,
.nav-collapsed .nav-section-title,
.nav-collapsed .sidebar-email,
.nav-collapsed .sidebar-signout { display: none; }
.nav-collapsed .nav-item { justify-content: center; padding: 9px 0; }
.nav-collapsed .brand { justify-content: center; }
.nav-collapsed .sidebar-footer { justify-content: center; }

.main { min-width: 0; padding: 22px 40px 64px; }
@media (max-width: 768px) { .main { padding: 16px 16px 32px; } }
.content { max-width: var(--max-content); margin: 0 auto; }

.mobile-bar {
  display: none;
  position: sticky; top: 0; z-index: 30;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  align-items: center; gap: 12px;
}
@media (max-width: 768px) { .mobile-bar { display: flex; } }
/* The brand styles above are tuned for the dark sidebar; restore dark-on-
   light for the mobile top bar so the mark + name stay visible. */
.mobile-bar .brand-mark {
  background: var(--accent); border: none; backdrop-filter: none;
  width: 26px; height: 26px; font-size: 16px;
}
.mobile-bar .brand-name { color: var(--fg); font-family: var(--font-sans); font-size: 15px; }

.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) { .tabbar { display: grid; } }
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px;
  color: var(--fg-tertiary);
  text-decoration: none;
  font-size: 10px; letter-spacing: 0.02em; font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease);
}
.tab.active { color: var(--accent); }
.tab:hover { color: var(--fg); }
.tab .icon { width: 20px; height: 20px; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.h-page {
  font-family: var(--font-sans);
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.2;
  color: var(--fg);
}
.h-section {
  font-family: var(--font-sans);
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.h-card {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 500;
  letter-spacing: -0.018em; line-height: 1.35;
  color: var(--fg);
}
.h-card.te {
  font-family: var(--font-te);
  font-size: 17px; font-weight: 500; line-height: 1.45;
}
.h-display {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  letter-spacing: -0.01em;
}
.micro {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 500;
}
.meta {
  font-size: 12.5px; color: var(--fg-tertiary);
  font-weight: 400;
}
.data {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fg-secondary);
}

/* ==========================================================================
   STATUS DOTS
   ========================================================================== */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
.dot-pending    { background: var(--dot-pending); }
.dot-approved   { background: var(--dot-approved); }
.dot-rejected   { background: var(--dot-rejected); }
.dot-ready      { background: var(--dot-ready); }
.dot-processing {
  background: var(--fg-tertiary);
  animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.status-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--fg-secondary);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform 80ms var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn:hover { background: var(--bg-muted); border-color: var(--fg-tertiary); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--fg); border-color: var(--fg); color: var(--bg);
}
.btn-primary:hover { background: #1c1c1c; border-color: #1c1c1c; color: var(--bg); }

.btn-accent {
  background: var(--accent); border-color: var(--accent); color: white;
}
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: white; }

.btn-ghost {
  background: transparent; border-color: transparent;
  color: var(--fg-secondary);
}
.btn-ghost:hover { background: var(--bg-muted); color: var(--fg); border-color: transparent; }

.btn-danger-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--danger);
}
.btn-danger-ghost:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-sm { padding: 5px 10px; font-size: 12px; gap: 4px; }
.btn-lg { padding: 11px 20px; font-size: 14px; }

.btn .kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
  margin-left: 2px;
}
.btn-ghost .kbd,
.btn:not(.btn-primary):not(.btn-accent) .kbd {
  background: var(--bg-muted); color: var(--fg-tertiary);
}

/* ==========================================================================
   FORM FIELDS
   ========================================================================== */
.field {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 9px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.field:hover { border-color: var(--fg-tertiary); }
.field:focus {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 3px var(--bg-muted);
}
.field::placeholder { color: var(--fg-quaternary); }
.field-te { font-family: var(--font-te); font-size: 15px; line-height: 1.7; }
.field-sm { padding: 6px 9px; font-size: 12.5px; }

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236B6B6B' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 4.5 L6 7.5 L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
  padding-right: 28px;
}

.label {
  display: block;
  font-size: 12px; font-weight: 500;
  color: var(--fg-secondary);
  margin-bottom: 5px;
}

/* ==========================================================================
   CARDS / SURFACES
   ========================================================================== */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ==========================================================================
   PREMIUM PRIMITIVES (web revamp) — eyebrow labels, stat icon-chips,
   pill quick-filters. Learned-from-reference, on Prabha's own palette.
   ========================================================================== */

/* Eyebrow — a small uppercase section label led by a colored dot. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; color: var(--fg-tertiary);
  margin-bottom: 10px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.eyebrow.is-success::before { background: var(--success); }
.eyebrow.is-warning::before { background: var(--warning); }
.eyebrow.is-danger::before  { background: var(--danger); }

/* Icon chip — tinted rounded square that fronts a stat / label. */
.icon-chip {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
}
.icon-chip svg { width: 18px; height: 18px; }
.icon-chip.is-success { background: var(--success-soft); color: var(--success); }
.icon-chip.is-warning { background: var(--warning-soft); color: var(--warning); }
.icon-chip.is-danger  { background: var(--danger-soft);  color: var(--danger); }
.icon-chip.is-muted   { background: var(--bg-muted);     color: var(--fg-tertiary); }

/* Pill quick-filters — rounded chips; active one fills with accent. */
.pill-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.pill-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--fg-secondary);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.pill-filter:hover { background: var(--bg-muted); border-color: var(--fg-tertiary); }
.pill-filter.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.pill-filter .count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-tertiary);
}
.pill-filter.active .count { color: rgba(255,255,255,0.8); }
.pill-filter .dot { width: 7px; height: 7px; border-radius: 50%; }

/* QC composite — ring gauge + plain-language verdict + sub-score bars. */
.qc-card {
  width: 230px; padding: 14px 16px; border-radius: 14px;
  background: var(--bg-elev); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); text-align: left;
}
.qc-card-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-tertiary);
}
.qc-ring-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.qc-ring { width: 52px; height: 52px; transform: rotate(-90deg); flex-shrink: 0; }
.qc-ring-bg { fill: none; stroke: var(--bg-muted); stroke-width: 4; }
.qc-ring-fg {
  fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  transition: stroke-dasharray 600ms var(--ease);
}
.qc-card[data-band="high"] .qc-ring-fg { stroke: var(--success); }
.qc-card[data-band="low"]  .qc-ring-fg { stroke: var(--warning); }
.qc-score {
  font-size: 34px; font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--fg);
}
.qc-score .qc-out { font-size: 15px; font-weight: 500; color: var(--fg-tertiary); margin-left: 2px; }
.qc-verdict {
  display: inline-block; margin-top: 6px;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-muted); color: var(--fg-secondary);
}
.qc-card[data-band="high"] .qc-verdict { background: var(--success-soft); color: var(--success); }
.qc-card[data-band="low"]  .qc-verdict { background: var(--warning-soft); color: var(--warning); }
.qc-subs {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.qc-sub-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; color: var(--fg-secondary); margin-bottom: 5px;
}
.qc-sub-top b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.qc-bar-track { height: 5px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.qc-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.qc-card[data-band="high"] .qc-bar-fill { background: var(--success); }
.qc-card[data-band="low"]  .qc-bar-fill { background: var(--warning); }

/* ==========================================================================
   LIST ROW (queue, articles)
   ========================================================================== */
.list { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  text-decoration: none; color: inherit;
  transition: background var(--dur) var(--ease);
  position: relative;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--bg-hover); }
.row .indicator {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.row:hover .indicator { transform: scaleY(0.6); }

.row-title {
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.row-title.te {
  font-family: var(--font-te);
  font-size: 15.5px; line-height: 1.5;
}
.row-meta {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 12px; color: var(--fg-tertiary);
}
.row-meta .meta-sep { color: var(--fg-quaternary); }

.qc {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--fg-secondary);
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 56px;
}
.qc-num { font-weight: 500; color: var(--fg); }
.qc-num.high { color: var(--success); }
.qc-num.low  { color: var(--danger); }
.qc-label {
  display: block;
  font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--fg-quaternary);
  margin-top: 1px;
  text-transform: uppercase;
}

/* ==========================================================================
   EMPTY STATE / SKELETONS
   ========================================================================== */
.empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--fg-tertiary);
}
.empty-mark {
  font-family: var(--font-serif);
  font-style: italic; font-size: 28px;
  color: var(--fg-quaternary);
  margin-bottom: 8px;
}
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-muted) 0%, var(--bg-hover) 50%, var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sk-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

/* ==========================================================================
   TOAST (top-right error / info)
   ========================================================================== */
.toast {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  max-width: 22rem;
  display: flex; align-items: center; gap: 8px;
  animation: toast-in 220ms var(--ease);
}
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PAGE-LOAD STAGGER
   ========================================================================== */
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 360ms var(--ease) backwards; }
.rise-1 { animation-delay: 0ms; }
.rise-2 { animation-delay: 60ms; }
.rise-3 { animation-delay: 120ms; }
.rise-4 { animation-delay: 180ms; }

/* ==========================================================================
   MISC UTILITIES
   ========================================================================== */
.kbd-inline {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1.5px 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-elev);
  color: var(--fg-secondary);
  line-height: 1;
  vertical-align: middle;
}
.hairline { border-top: 1px solid var(--line); }
.accent { color: var(--accent); }
.danger { color: var(--danger); }
.muted { color: var(--fg-tertiary); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------------------------------------------- *
 * F-140 — User management styles
 * ----------------------------------------------------------------- */

/* --- Role pills --- */
.role-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--bg-hover, #f3f4f6);
  color: var(--fg-secondary);
  border: 1px solid var(--line);
}
.role-admin    { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.role-editor   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.role-reporter { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.status-active   { background: #dcfce7; color: #166534; }
.status-disabled { background: #fee2e2; color: #991b1b; }

/* --- User table (desktop) --- */
.user-table { display: flex; flex-direction: column; }
.user-table-head,
.user-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.6fr)
    minmax(200px, 1.8fr)
    100px
    minmax(120px, 1fr)
    90px
    100px
    32px;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.user-table-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-tertiary);
  background: var(--bg-subtle, #fafafa);
}
.user-row {
  text-decoration: none;
  color: inherit;
  transition: background var(--dur, 0.12s) var(--ease, ease);
}
.user-row:hover { background: var(--bg-hover, #f9fafb); }
.user-row-disabled { opacity: 0.55; }

.user-cell {
  font-size: 13.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-cell-name { display: flex; flex-direction: column; gap: 2px; }
.user-name { font-weight: 500; color: var(--fg); }
.user-sub-email { font-size: 11.5px; color: var(--fg-tertiary); display: none; }
.user-cell-action { color: var(--fg-tertiary); text-align: right; font-size: 18px; }

@media (max-width: 640px) {
  .user-table-head { display: none; }
  .user-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "name   chev"
      "meta   meta"
      "tags   status";
    gap: 6px 12px;
    padding: 14px 14px;
    min-height: 60px;
  }
  .user-cell-name { grid-area: name; }
  .user-sub-email { display: inline; }
  .user-cell-email { display: none; }
  .user-cell:nth-child(3) { grid-area: tags; }
  .user-cell:nth-child(4) { display: none; }
  .user-cell:nth-child(5) { display: none; }
  .user-cell:nth-child(6) { grid-area: status; text-align: right; }
  .user-cell-action       { grid-area: chev; }
}

/* --- Forms --- */
.user-form { font-size: 14px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.form-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-secondary);
}
.form-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; min-height: 44px; }
}

/* --- User detail page (two-column → stacked) --- */
.user-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .user-detail-grid { grid-template-columns: 1fr; }
}

/* --- Credential card (generated/reset password display) --- */
.credential-card { background: var(--surface, #fff); }
.credential-box {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #1f2937;
  color: #f3f4f6;
}
.credential-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin-bottom: 8px;
}
.credential-row { display: flex; align-items: center; gap: 12px; }
.credential-value {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  flex: 1;
  color: #fafafa;
  background: transparent;
  padding: 4px 0;
  word-break: break-all;
}
.credential-box .btn {
  background: #374151;
  color: #fff;
  border-color: #4b5563;
  min-height: 32px;
}
.credential-box .btn:hover { background: #4b5563; }

/* --- Button loading state (htmx adds .htmx-request during in-flight) --- */
.btn.htmx-request {
  pointer-events: none;
  opacity: 0.75;
}
.btn.htmx-request::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: prabha-spin 0.7s linear infinite;
}
@keyframes prabha-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   DETAIL / EDIT SCREEN — Linear pass (P-UI)
   A focused redesign of the article review+edit surface: clean top bar,
   confident title block, a horizontal QC strip, clearly differentiated
   source vs editable-output panes, and a calm sticky action bar.
   ========================================================================== */

/* --- top bar: breadcrumb + status + quiet actions --- */
.detail-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.detail-top-right { display: flex; align-items: center; gap: 10px; }
.crumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--fg-tertiary);
  text-decoration: none; padding: 5px 10px 5px 7px;
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.crumb:hover { background: var(--bg-muted); color: var(--fg); }

.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-elev);
  color: var(--fg-secondary); text-transform: capitalize;
}
.status-pill .dot { width: 6px; height: 6px; flex-shrink: 0; }

/* --- title block --- */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.chip {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
  padding: 3px 10px; border-radius: 6px;
  background: var(--bg-muted); color: var(--fg-secondary);
  text-transform: capitalize;
}
.chip-loc { background: transparent; color: var(--fg-tertiary); padding-left: 2px; }

.detail-title {
  font-size: clamp(23px, 2.6vw, 31px); font-weight: 600;
  line-height: 1.22; letter-spacing: -0.02em; color: var(--fg);
}
.detail-subtitle { margin-top: 6px; font-size: 12.5px; color: var(--fg-tertiary); }
.detail-subtitle b { font-weight: 500; color: var(--fg-secondary); }

/* --- horizontal QC strip (replaces the boxy top-right card) --- */
.qc-strip {
  display: flex; align-items: stretch; gap: 22px; flex-wrap: wrap;
  margin: 18px 0 24px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elev); box-shadow: var(--shadow-sm);
}
.qc-strip-main {
  display: flex; align-items: center; gap: 14px;
  padding-right: 22px; border-right: 1px solid var(--line);
}
.qc-strip-subs {
  display: flex; align-items: center; gap: 26px; flex: 1; flex-wrap: wrap;
}
.qc-metric { min-width: 104px; }
.qc-metric.is-headline .qc-sub-top span { color: var(--accent); }
.qc-strip .qc-ring { width: 56px; height: 56px; }
.qc-strip .qc-score { font-size: 22px; }

/* --- source / output panes --- */
.pane-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--fg-tertiary);
}
.pane-source {
  background: var(--bg-muted); border: 1px solid transparent;
  border-radius: var(--radius); padding: 18px 20px;
}
.pane-output {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-elev); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pane-output .field, .pane-output .field-te { border: 0; border-radius: 0; box-shadow: none; }
.pane-output .field:focus { box-shadow: none; }
.pane-output-title { padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.pane-output-body { padding: 4px 4px 0; }
.pane-output-body .field-te { min-height: 24rem; padding: 14px 18px; line-height: 1.75; }

/* --- parsed judge note (was raw JSON) --- */
.note-callout {
  display: flex; gap: 10px; margin-top: 14px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.note-callout svg { flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.note-callout .note-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 2px;
}
.note-callout .note-body { font-size: 12.5px; line-height: 1.55; color: var(--fg-secondary); }

/* --- sticky action bar --- */
.actionbar-wrap {
  position: sticky; bottom: 0; margin-top: 24px;
  padding: 14px 0 10px;
  background: linear-gradient(to bottom, transparent, var(--bg) 38%);
}
.actionbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-elev);
  box-shadow: var(--shadow-md);
}

/* QC strip band colors (mirror .qc-card[data-band]) */
.qc-strip[data-band="high"] .qc-ring-fg { stroke: var(--success); }
.qc-strip[data-band="low"]  .qc-ring-fg { stroke: var(--warning); }
.qc-strip[data-band="high"] .qc-verdict { background: var(--success-soft); color: var(--success); }
.qc-strip[data-band="low"]  .qc-verdict { background: var(--warning-soft); color: var(--warning); }
.qc-strip[data-band="high"] .qc-bar-fill { background: var(--success); }
.qc-strip[data-band="low"]  .qc-bar-fill { background: var(--warning); }
.qc-strip .qc-metric.is-headline .qc-bar-fill { background: var(--accent); }

/* ==========================================================================
   REVIEW WORKSPACE (P-UI v2 — ground-up redesign of the detail screen)
   A two-zone layout: a unified source↔output comparison panel (inline,
   document-like editing) + a right rail for verdict / classification /
   AI note / decision. Replaces the stacked-form layout.
   ========================================================================== */
.rev-layout { display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: 30px; align-items: start; }
@media (max-width: 1200px) { .rev-layout { grid-template-columns: 1fr; gap: 22px; } }
.rev-main { min-width: 0; }

.rev-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.rev-title { font-size: clamp(24px, 2.5vw, 33px); font-weight: 600; line-height: 1.2; letter-spacing: -0.022em; color: var(--fg); }
.rev-srchead { margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--fg-tertiary); }
.rev-srchead b { font-weight: 500; color: var(--fg-secondary); }
.rev-metarow { margin-top: 16px; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }

/* unified compare panel */
.compare { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-elev); box-shadow: var(--shadow-sm); }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }
.compare-col { min-width: 0; display: flex; flex-direction: column; }
.compare-col.is-output { border-left: 1px solid var(--line); }
@media (max-width: 860px) { .compare-col.is-output { border-left: 0; border-top: 1px solid var(--line); } }
.compare-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); min-height: 45px; }
.compare-col.is-source .compare-head { background: var(--bg-muted); }
.compare-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-tertiary); }
.compare-lbl.accent { color: var(--accent); }
.compare-flag { font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-quaternary); }
.compare-body { padding: 20px; font-size: 14.5px; line-height: 1.78; color: var(--fg-secondary); white-space: pre-wrap; word-break: break-word; max-height: 64vh; overflow-y: auto; }
.compare-col.is-source { background: var(--bg-muted); }
.compare-col.is-source .compare-body { flex: 1; }

/* inline-editable output — borderless, reads like a document not a form */
.edit-headline { display: block; width: 100%; border: 0; background: transparent; padding: 16px 20px 6px; font-family: var(--font-te); font-size: 19px; font-weight: 600; line-height: 1.42; letter-spacing: -0.01em; color: var(--fg); }
.edit-headline::placeholder { color: var(--fg-quaternary); font-weight: 500; }
.edit-headline:focus { outline: none; background: var(--accent-soft); }
.edit-body { display: block; width: 100%; border: 0; background: transparent; padding: 6px 20px 20px; font-family: var(--font-te); font-size: 15px; line-height: 1.8; color: var(--fg); resize: vertical; min-height: 22rem; }
.edit-body:focus { outline: none; }
.edit-divider { height: 1px; background: var(--line); margin: 0 20px; }
.edit-footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* right rail */
.rev-rail { min-width: 0; }
.rail-sticky { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1201px) { .rail-sticky { position: sticky; top: 16px; } }
.rev-rail .qc-card { width: 100%; box-sizing: border-box; }
.rail-block { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--bg-elev); box-shadow: var(--shadow-sm); }
.rail-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: 11px; }
.rail-tags { display: flex; flex-direction: column; gap: 8px; }
.rail-note-body { font-size: 12.5px; line-height: 1.58; color: var(--fg-secondary); }
.rail-decision { display: flex; flex-direction: column; gap: 9px; }
.rail-decision .btn { width: 100%; justify-content: center; }
.rail-reason { margin-top: 1px; }
.rail-rerun { display: flex; justify-content: center; margin-top: 3px; }
.rail-status { display: flex; align-items: flex-start; gap: 9px; }
.rail-status-title { font-size: 13.5px; font-weight: 600; }

/* ==========================================================================
   PREMIUM AI REVIEW SURFACE (P-UI v3) — rich, graphical, AI-driven.
   Showpiece quality gauge, gradient cards, iconography, depth. Keeps a
   generous full-width side-by-side editing area.
   ========================================================================== */
:root {
  --ai-grad:      linear-gradient(135deg, #1D67B1 0%, #3FA0E6 55%, #56C5E8 100%);
  --ai-grad-soft: linear-gradient(135deg, rgba(29,103,177,0.10), rgba(86,197,232,0.07));
  --glow-blue:    0 10px 34px -8px rgba(29,103,177,0.34);
  --glow-soft:    0 6px 22px -10px rgba(29,103,177,0.22);
}

.review-head { margin-bottom: 18px; }
.review-title { font-size: clamp(24px, 2.5vw, 34px); font-weight: 650; line-height: 1.18; letter-spacing: -0.022em; color: var(--fg); }
.review-srchead { margin-top: 9px; font-size: 13px; color: var(--fg-tertiary); }
.review-srchead b { font-weight: 500; color: var(--fg-secondary); }
.review-metarow { margin-top: 15px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* eyebrow with gradient sparkle */
.ai-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ai-eyebrow .spark { width: 15px; height: 15px; color: var(--accent); }
.ai-eyebrow span { background: var(--ai-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- AI QUALITY hero band ---- */
.ai-quality {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  margin: 18px 0 22px; padding: 22px 26px;
  border: 1px solid rgba(29,103,177,0.16); border-radius: 18px;
  background:
    radial-gradient(130% 130% at 100% 0%, rgba(86,197,232,0.10), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F7FAFD 100%);
  box-shadow: var(--glow-soft);
  position: relative; overflow: hidden;
}
.ai-quality::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 0% 100%, rgba(29,103,177,0.06), transparent 60%);
}
.ai-quality-left { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1; }

/* conic-gradient gauge with glow */
.ai-gauge {
  --pct: 0%;
  width: 108px; height: 108px; border-radius: 50%;
  background: conic-gradient(from -90deg, #1D67B1 0%, #56C5E8 var(--pct), rgba(29,103,177,0.10) var(--pct));
  display: grid; place-items: center; position: relative; flex-shrink: 0;
  filter: drop-shadow(0 6px 16px rgba(29,103,177,0.30));
}
.ai-gauge[data-band="high"] { background: conic-gradient(from -90deg, #4F9E2E 0%, #8FD05A var(--pct), rgba(92,138,61,0.12) var(--pct)); filter: drop-shadow(0 6px 16px rgba(92,138,61,0.30)); }
.ai-gauge[data-band="low"]  { background: conic-gradient(from -90deg, #C49A23 0%, #E6C24B var(--pct), rgba(196,154,35,0.14) var(--pct)); filter: drop-shadow(0 6px 16px rgba(196,154,35,0.28)); }
.ai-gauge::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 1px 3px rgba(10,10,10,0.05); }
.ai-gauge-inner { position: relative; z-index: 1; text-align: center; }
.ai-gauge-score { font-size: 30px; font-weight: 750; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg); }
.ai-gauge-out { font-size: 13px; font-weight: 600; color: var(--fg-tertiary); }
.ai-verdict { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 11.5px; font-weight: 650; padding: 4px 11px; border-radius: 999px; }
.ai-verdict.high { background: var(--success-soft); color: var(--success); }
.ai-verdict.mid  { background: var(--accent-soft); color: var(--accent); }
.ai-verdict.low  { background: var(--warning-soft); color: var(--warning); }

/* sub-score stat tiles */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; z-index: 1; }
@media (max-width: 1100px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.stat-tile { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.7); border: 1px solid var(--line); backdrop-filter: blur(4px); }
.stat-tile-top { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.stat-tile-top svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.stat-tile-label { font-size: 11px; font-weight: 600; color: var(--fg-secondary); }
.stat-tile-val { margin-left: auto; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); }
.stat-bar { height: 6px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.stat-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ai-grad); }
.stat-tile.is-headline .stat-bar > i { background: linear-gradient(135deg, #7A3FB1, #B06AE0); }
.stat-tile.is-headline .stat-tile-top svg { color: #8B47C0; }

/* ---- document panes: generous side-by-side ---- */
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 980px) { .doc-grid { grid-template-columns: 1fr; } }
.doc-pane { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elev); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.doc-pane.is-ai { border-color: rgba(29,103,177,0.22); box-shadow: var(--glow-soft); }
.doc-pane.is-ai::before { content: ''; display: block; height: 3px; background: var(--ai-grad); }
.doc-pane-head { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--line); min-height: 48px; box-sizing: border-box; }
.doc-pane.is-source .doc-pane-head { background: var(--bg-muted); }
.doc-pane-head .ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--fg-tertiary); }
.doc-pane.is-ai .doc-pane-head .ico { color: var(--accent); }
.doc-pane-name { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-secondary); }
.doc-pane.is-ai .doc-pane-name { color: var(--accent); }
.doc-pane-flag { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-quaternary); }
/* live char count of the AP output, right-aligned in the Andhra Prabha head */
.ap-charcount { margin-left: auto; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--fg-quaternary); }
/* AP edit form sits flush under the head so its title aligns with the source headline */
.doc-pane.is-ai #edit-form { margin: 0; }
.ai-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: #fff; background: var(--ai-grad); box-shadow: var(--glow-soft); }
.ai-pill svg { width: 11px; height: 11px; }
.doc-body { padding: 18px 22px; font-size: 14.5px; line-height: 1.8; color: var(--fg-secondary); white-space: pre-wrap; word-break: break-word; overflow-y: auto; min-height: 16rem; max-height: 46vh; }
.doc-pane.is-source .doc-body { background: var(--bg-muted); flex: 1; }

/* AI tools row — lives at the bottom of the Andhra Prabha card; acts on the
   AP output above. Sits below the edit form (its own <form>s are siblings,
   not nested, so they stay valid HTML). */
.ai-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--bg-muted); }
.ai-tools .wr-actions { display: inline-flex; align-items: center; }
.ai-tools .field-sm { height: 30px; }

/* inline-editable AP output */
.edit-headline2 { display: block; width: 100%; border: 0; background: transparent; padding: 18px 22px 8px; font-family: var(--font-te); font-size: 20px; font-weight: 650; line-height: 1.4; letter-spacing: -0.01em; color: var(--fg); }
.edit-headline2::placeholder { color: var(--fg-quaternary); }
.edit-headline2:focus { outline: none; background: var(--accent-soft); }
.edit-body2 { display: block; width: 100%; border: 0; background: transparent; padding: 8px 22px 20px; font-family: var(--font-te); font-size: 15.5px; line-height: 1.85; color: var(--fg); resize: vertical; min-height: 15rem; }
.edit-body2:focus { outline: none; }
.edit-div2 { height: 1px; background: var(--line); margin: 0 22px; }
/* read-only source headline — mirrors .edit-headline2 so the Source card and
   the Andhra Prabha card both lead with their own headline above the body. */
.doc-headline { display: block; padding: 18px 22px 8px; font-family: var(--font-te); font-size: 20px; font-weight: 650; line-height: 1.4; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* classification chips row + AI note inline card */
.aux-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 18px; }
@media (max-width: 980px) { .aux-row { grid-template-columns: 1fr; } }
.aux-card { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); box-shadow: var(--shadow-sm); padding: 15px 17px; }
.aux-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: 12px; }
.aux-label svg { width: 14px; height: 14px; color: var(--accent); }
.ai-note-body { font-size: 13px; line-height: 1.6; color: var(--fg-secondary); font-style: italic; }

/* ---- decision bar (rich) ---- */
.decision-wrap { margin-top: 22px; }
.decision-bar { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 13px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elev); box-shadow: var(--shadow-md); }
.btn-approve { background: var(--ai-grad); border: 0; color: #fff; font-weight: 600; box-shadow: var(--glow-soft); padding: 10px 18px; }
.btn-approve:hover { filter: brightness(1.05); box-shadow: var(--glow-blue); }
.btn-approve svg, .btn-icon svg { width: 15px; height: 15px; }
.decision-status { display: flex; align-items: center; gap: 9px; }
.decision-status-title { font-size: 14px; font-weight: 650; }

/* ==========================================================================
   COLORFUL ICON CHIPS (Sarvam-style) + softer detail tweaks (P-UI v4)
   ========================================================================== */
.icon-chip { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 3px 8px -2px rgba(17,24,39,0.18); }
.icon-chip svg { width: 16px; height: 16px; color: #fff; }
.ic-blue   { background: linear-gradient(135deg, #1D67B1, #56C5E8); }
.ic-violet { background: linear-gradient(135deg, #6D4AE0, #A78BFA); }
.ic-teal   { background: linear-gradient(135deg, #0E9F8E, #5AD1B8); }
.ic-amber  { background: linear-gradient(135deg, #E08A1E, #F5C24B); }
.ic-rose   { background: linear-gradient(135deg, #D6336C, #F06595); }
.ic-green  { background: linear-gradient(135deg, #4F9E2E, #8FD05A); }

/* rounder, airier cards */
.ai-quality { border-radius: 22px; padding: 24px 28px; }
.doc-pane { border-radius: 20px; }
.aux-card { border-radius: 18px; padding: 17px 19px; }
.stat-tile { border-radius: 15px; padding: 13px 15px; }
.decision-bar { border-radius: 20px; padding: 14px 18px; }
.qc-card { border-radius: 18px; }

/* restyle stat tiles around the colorful chip */
.stat-tile-top { gap: 9px; margin-bottom: 11px; }
.stat-tile-top .stat-tile-label { font-size: 11.5px; }
.stat-tile-top .stat-tile-val { font-size: 16px; }
.stat-bar { height: 7px; }

/* rounder buttons + pill primary actions */
.btn { border-radius: 10px; }
.btn-approve { border-radius: 11px; }
.btn-sm { border-radius: 9px; }

/* ==========================================================================
   P-UI v5 — Sarvam-exact sidebar (bigger text, neutral active pill,
   workspace switcher) + Akiflow gradient-border "fade & shine" cards.
   ========================================================================== */

/* --- sidebar: bigger text, neutral gray active --- */
.brand-name { font-size: 21px; }
.nav-item { font-size: 15px; padding: 10px 12px; gap: 12px; border-radius: 11px; }
.nav-item .icon { width: 19px; height: 19px; }
.nav-item.active { background: var(--bg-muted); color: var(--fg); font-weight: 600; }
.nav-item.active .icon { color: var(--fg); }
.nav-section-title { font-size: 11px; color: var(--fg-tertiary); letter-spacing: 0.08em; padding: 20px 12px 7px; }

/* workspace switcher pill (Sarvam "Studio ▾") */
.ws-switcher {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-elev); box-shadow: var(--shadow-sm);
  font-size: 14.5px; font-weight: 600; color: var(--fg); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.ws-switcher:hover { background: var(--bg-muted); }
.ws-switcher .ws-spark { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.ws-switcher .ws-chev { margin-left: auto; width: 15px; height: 15px; color: var(--fg-tertiary); flex-shrink: 0; }
.nav-collapsed .ws-switcher span, .nav-collapsed .ws-switcher .ws-chev { display: none; }
.nav-collapsed .ws-switcher { justify-content: center; }

/* --- gradient-border + glow cards (the "fade & shine") --- */
.doc-pane, .aux-card, .decision-bar, .qc-card {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    linear-gradient(140deg,
      rgba(255,255,255,0.95) 0%,
      rgba(29,103,177,0.30) 26%,
      rgba(86,197,232,0.14) 52%,
      rgba(17,24,39,0.06) 100%) border-box;
  box-shadow: 0 12px 32px -16px rgba(29,103,177,0.24), 0 2px 8px rgba(17,24,39,0.04);
}
.doc-pane.is-ai { border-color: transparent; box-shadow: 0 16px 40px -16px rgba(29,103,177,0.34), 0 2px 8px rgba(17,24,39,0.04); }

/* AI quality hero: brighter masked gradient border + bigger glow */
.ai-quality {
  border: 1px solid transparent;
  box-shadow: 0 22px 60px -22px rgba(29,103,177,0.40), 0 3px 12px rgba(17,24,39,0.05);
}
.ai-quality::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(135deg,
    rgba(255,255,255,1) 0%,
    rgba(86,197,232,0.65) 20%,
    rgba(29,103,177,0.50) 44%,
    rgba(255,255,255,0.10) 72%,
    rgba(17,24,39,0.05) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 2;
}

/* ==========================================================================
   P-UI v6 — Queue list as premium cards (gradient-border glow + mini gauge)
   ========================================================================== */
#queue-list.list { display: flex; flex-direction: column; gap: 11px; padding: 2px 2px 6px; background: transparent; }
#queue-list .row {
  display: flex; align-items: center; gap: 18px; padding: 16px 20px;
  border-radius: 16px; text-decoration: none; color: inherit; position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    linear-gradient(140deg, rgba(255,255,255,0.95), rgba(29,103,177,0.20) 32%, rgba(86,197,232,0.10) 58%, rgba(17,24,39,0.05)) border-box;
  box-shadow: 0 8px 22px -16px rgba(29,103,177,0.18), 0 1px 4px rgba(17,24,39,0.03);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#queue-list .row:hover { transform: translateY(-1px); box-shadow: 0 16px 38px -16px rgba(29,103,177,0.30); }
#queue-list .row .indicator { display: none; }
#queue-list .row-title { font-size: 16px; font-weight: 600; line-height: 1.36; }
#queue-list .row-meta { margin-top: 8px; }

/* queue mini gauge */
.q-gauge { --pct: 0%; width: 50px; height: 50px; border-radius: 50%;
  background: conic-gradient(from -90deg, #1D67B1 0%, #56C5E8 var(--pct), rgba(29,103,177,0.10) var(--pct));
  display: grid; place-items: center; position: relative; flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(29,103,177,0.22)); }
.q-gauge[data-band="high"] { background: conic-gradient(from -90deg, #4F9E2E 0%, #8FD05A var(--pct), rgba(92,138,61,0.12) var(--pct)); filter: drop-shadow(0 4px 10px rgba(92,138,61,0.22)); }
.q-gauge[data-band="low"]  { background: conic-gradient(from -90deg, #C49A23 0%, #E6C24B var(--pct), rgba(196,154,35,0.14) var(--pct)); filter: drop-shadow(0 4px 10px rgba(196,154,35,0.20)); }
.q-gauge::before { content: ''; position: absolute; inset: 4.5px; border-radius: 50%; background: #fff; }
.q-gauge-n { position: relative; z-index: 1; font-size: 13.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.q-await { width: 50px; text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-quaternary); flex-shrink: 0; }

/* ==========================================================================
   P-UI v7 — Akiflow-style premium: ONE app-window with light/dark contrast
   + soft COLORED ambient glow (peach + blue + lavender).
   ========================================================================== */

/* the source↔output compare becomes a single big window */
.doc-grid {
  gap: 0; border-radius: 24px; overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    linear-gradient(140deg, rgba(255,255,255,0.95), rgba(29,103,177,0.28) 30%, rgba(86,197,232,0.12) 56%, rgba(17,24,39,0.06)) border-box;
  box-shadow:
    0 34px 80px -34px rgba(29,103,177,0.32),
    -46px 36px 96px -54px rgba(245,168,90,0.30),
    44px -18px 96px -54px rgba(124,92,224,0.22),
    0 2px 10px rgba(17,24,39,0.05);
}
/* panes inside the window: no individual chrome */
.doc-grid .doc-pane { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.doc-grid .doc-pane.is-ai::before { display: none; }
.doc-grid .doc-pane.is-ai { border-left: 1px solid var(--line); }
@media (max-width: 860px) { .doc-grid .doc-pane.is-ai { border-left: 0; border-top: 1px solid var(--line); } }

/* DARK source panel (the contrast element) */
.doc-grid .doc-pane.is-source { background: #14203A; }
.doc-grid .doc-pane.is-source .doc-pane-head { background: rgba(255,255,255,0.04); border-bottom-color: rgba(255,255,255,0.10); }
.doc-grid .doc-pane.is-source .doc-pane-name { color: rgba(255,255,255,0.92); }
.doc-grid .doc-pane.is-source .doc-pane-flag { color: rgba(255,255,255,0.42); }
.doc-grid .doc-pane.is-source .ico { color: rgba(255,255,255,0.6); }
.doc-grid .doc-pane.is-source .doc-body { color: rgba(255,255,255,0.80); background: transparent; }

/* colored ambient glow on the AI quality hero too */
.ai-quality {
  box-shadow:
    0 26px 64px -26px rgba(29,103,177,0.34),
    -34px 26px 70px -46px rgba(245,168,90,0.22),
    32px -14px 70px -46px rgba(124,92,224,0.18),
    0 3px 12px rgba(17,24,39,0.05);
}

/* ==========================================================================
   P-UI v8 — RESTRAINT pass (Akiflow real tokens). Soft big-blur low-opacity
   shadows + a single subtle blue-tinted glow; one accent (no rainbow);
   light source panel (dark reverted). Clean > gaudy.
   ========================================================================== */

/* revert the dark source panel → clean light */
.doc-grid .doc-pane.is-source { background: var(--bg-muted); }
.doc-grid .doc-pane.is-source .doc-pane-head { background: transparent; border-bottom-color: var(--line); }
.doc-grid .doc-pane.is-source .doc-pane-name { color: var(--fg-secondary); }
.doc-grid .doc-pane.is-source .doc-pane-flag { color: var(--fg-quaternary); }
.doc-grid .doc-pane.is-source .ico { color: var(--fg-tertiary); }
.doc-grid .doc-pane.is-source .doc-body { color: var(--fg-secondary); background: transparent; }

/* ONE accent: every icon chip is restrained brand blue (kills the rainbow) */
.ic-blue, .ic-violet, .ic-teal, .ic-amber, .ic-rose, .ic-green {
  background: linear-gradient(140deg, #2E86D0, #1D67B1);
}
.icon-chip { box-shadow: 0 3px 10px -3px rgba(29,103,177,0.35); }
.stat-tile.is-headline .stat-bar > i { background: linear-gradient(140deg, #2E86D0, #56C5E8); }
.stat-tile.is-headline .stat-tile-top svg { color: #fff; }

/* soft, subtle, single blue-tint glows (Akiflow: huge blur, ~0.08-0.12, no offset) */
.ai-quality { box-shadow: 0 2px 48px rgba(29,103,177,0.13), 0 1px 4px rgba(17,24,39,0.04); }
.doc-grid   { box-shadow: 0 2px 48px rgba(29,103,177,0.13), 0 1px 4px rgba(17,24,39,0.04); }
.doc-pane, .aux-card, .decision-bar, .qc-card { box-shadow: 0 1px 28px rgba(17,24,39,0.06); }
#queue-list .row { box-shadow: 0 1px 22px rgba(17,24,39,0.05); }
#queue-list .row:hover { box-shadow: 0 2px 40px rgba(29,103,177,0.14); transform: translateY(-1px); }

/* primary CTA glow halo (Akiflow's button shine) */
.btn-approve { box-shadow: 0 5px 26px -4px rgba(29,103,177,0.48); }
.btn-approve:hover { box-shadow: 0 7px 34px -4px rgba(29,103,177,0.58); filter: none; }

/* slightly tighter card radius to match Akiflow's 16px */
.ai-quality { border-radius: 18px; }
.doc-grid { border-radius: 20px; }

/* ==========================================================================
   P-UI v9 — sleek Telugu typography (Anek Telugu). Lighter weights + tighter
   tracking read far cleaner than heavy Noto Sans Telugu.
   ========================================================================== */
.te, [lang="te"] { font-size: 1.0em; letter-spacing: 0; }
.review-title.te { font-weight: 600; letter-spacing: -0.005em; line-height: 1.28; }
.review-title { font-weight: 600; }
.edit-headline2 { font-weight: 600; }
#queue-list .row-title { font-weight: 600; }
#queue-list .row-title.te { font-weight: 600; }
.doc-body, .edit-body2, .compare-body { font-weight: 400; }
.brand-name { font-weight: 600; }

/* ==========================================================================
   P-UI v10 — clean header: pill chips + icon meta-pills (Akiflow meta row)
   ========================================================================== */
.chip { padding: 5px 12px; border-radius: 999px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.chip svg { width: 13px; height: 13px; }
.chip-accent { background: var(--accent-soft); color: var(--accent); }
.chip-accent svg { color: var(--accent); }
.chip-loc { background: transparent; color: var(--fg-tertiary); }
.chip-row { gap: 8px; margin-bottom: 16px; }
.review-srchead { font-size: 12.5px; }

.meta-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.meta-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-elev);
  box-shadow: 0 1px 14px rgba(17,24,39,0.04);
  font-size: 12.5px; font-weight: 500; color: var(--fg-secondary);
  text-decoration: none; text-transform: capitalize;
  transition: background var(--dur) var(--ease);
}
.meta-pill svg { width: 14px; height: 14px; color: var(--fg-tertiary); }
.meta-pill .dot { width: 7px; height: 7px; flex-shrink: 0; }
.meta-pill-link { color: var(--accent); }
.meta-pill-link svg { color: var(--accent); }
.meta-pill-link:hover { background: var(--accent-soft); }

/* ==========================================================================
   P-UI v11 — shared reusable premium primitives for the full-site rollout.
   .glass-card  = the standard gradient-border + soft-glow white card
   .list-card   = a clickable row-card (queue/suggestions list items)
   ========================================================================== */
.glass-card {
  border: 1px solid transparent; border-radius: 18px;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    linear-gradient(140deg, rgba(255,255,255,0.95), rgba(29,103,177,0.26) 28%, rgba(86,197,232,0.12) 54%, rgba(17,24,39,0.06)) border-box;
  box-shadow: 0 1px 28px rgba(17,24,39,0.06);
}
.list-card {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  border-radius: 16px; text-decoration: none; color: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    linear-gradient(140deg, rgba(255,255,255,0.95), rgba(29,103,177,0.20) 32%, rgba(86,197,232,0.10) 58%, rgba(17,24,39,0.05)) border-box;
  box-shadow: 0 1px 22px rgba(17,24,39,0.05);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.list-card:hover { transform: translateY(-1px); box-shadow: 0 2px 40px rgba(29,103,177,0.14); }
.card-list { display: flex; flex-direction: column; gap: 11px; }
/* stat card (Overview metrics) */
.stat-card { padding: 18px 20px; }
.stat-card .stat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.stat-card .stat-num { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--fg); }
.stat-card .stat-cap { font-size: 12px; color: var(--fg-tertiary); margin-top: 6px; }
.stat-card .stat-name { font-size: 12.5px; font-weight: 600; color: var(--fg-secondary); }

/* ==========================================================================
   P-UI v12 — RESTRAINT + DOWNSIZE. Founder: too big, green ring gaudy, whole
   thing a bit gaudy; likes the clean Suggestion-feed pills. So: subtle
   hairline borders + soft shadow (drop heavy gradient-border/glow), smaller
   sizes, and a clean score PILL instead of the green ring.
   ========================================================================== */

/* de-gaudy: clean hairline + soft Akiflow shadow on ALL cards (overrides the
   heavy gradient-border + colored glow) */
.glass-card, .list-card, .doc-pane, .aux-card, .decision-bar, .qc-card,
.ai-quality, .doc-grid, #queue-list .row {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(17,24,39,0.03), 0 10px 26px -18px rgba(17,24,39,0.12);
}
.ai-quality::before { display: none; }
.doc-grid .doc-pane.is-ai { border-left: 1px solid var(--line); }
#queue-list .row:hover {
  transform: translateY(-1px);
  border-color: rgba(29,103,177,0.22);
  box-shadow: 0 2px 4px rgba(17,24,39,0.04), 0 14px 30px -18px rgba(29,103,177,0.16);
}

/* downsize (too big before) */
.review-title { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.26; }
.review-head { margin-bottom: 14px; }
.ai-quality { padding: 18px 22px; border-radius: 18px; margin: 14px 0 18px; gap: 22px; }
.doc-grid { border-radius: 18px; }
.doc-body, .compare-body { font-size: 14px; }
.edit-headline2 { font-size: 17px; padding: 15px 20px 6px; }
.edit-body2 { font-size: 14.5px; }
#queue-list .row { padding: 14px 18px; gap: 14px; border-radius: 14px; }
#queue-list .row-title { font-size: 15px; }
#queue-list.list { gap: 10px; }
.stat-card .stat-num { font-size: 26px; }
.icon-chip { width: 28px; height: 28px; border-radius: 9px; }
.icon-chip svg { width: 15px; height: 15px; }

/* clean score PILL (queue) — replaces the gaudy green ring */
.score-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-muted);
  font-size: 13px; font-weight: 700; color: var(--fg);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.score-pill .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.score-pill[data-band="high"] .sdot { background: var(--success); }
.score-pill[data-band="low"]  .sdot { background: var(--warning); }
.score-pill .slabel { font-size: 10px; font-weight: 600; color: var(--fg-tertiary); letter-spacing: 0.05em; }
.q-await { color: var(--fg-quaternary); font-size: 11px; }

/* AI quality hero: clean number + thin bar (replaces the green conic ring) */
.qscore { display: flex; flex-direction: column; gap: 9px; min-width: 132px; }
.qscore-big { font-size: 36px; font-weight: 750; letter-spacing: -0.03em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.qscore-big small { font-size: 15px; font-weight: 600; color: var(--fg-tertiary); }
.qscore-bar { height: 7px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.qscore-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ai-grad); }
.qscore.high .qscore-bar > i { background: linear-gradient(90deg, #4F9E2E, #8FD05A); }
.qscore.low .qscore-bar > i  { background: linear-gradient(90deg, #C49A23, #E6C24B); }

/* ==========================================================================
   P-UI v13 — sleeker compact sidebar + clean premium filter panel
   ========================================================================== */

/* sidebar: smaller, sleeker, more refined */
.sidebar { padding: 20px 11px; }
.brand-name { font-size: 17px; }
.brand-tag { font-size: 9px; letter-spacing: 0.1em; }
.brand-mark { width: 30px; height: 30px; border-radius: 10px; font-size: 17px; }
.ws-switcher { font-size: 13px; padding: 9px 11px; border-radius: 11px; margin-bottom: 12px; }
.ws-switcher .ws-spark { width: 16px; height: 16px; }
.nav-item { font-size: 13.5px; padding: 8px 11px; gap: 11px; border-radius: 9px; }
.nav-item .icon { width: 17px; height: 17px; }
.nav-section-title { font-size: 10px; letter-spacing: 0.09em; padding: 16px 11px 6px; }
.sidebar-avatar { width: 28px; height: 28px; }
.sidebar-email { font-size: 11.5px; }

/* clean premium "More filters" panel */
.filter-summary {
  padding: 14px 18px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600; color: var(--fg-secondary);
  display: flex; align-items: center; gap: 9px;
}
.filter-summary::-webkit-details-marker { display: none; }
.filter-summary svg { color: var(--fg-tertiary); }
.filter-form { padding: 2px 18px 18px; }
.filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .filter-grid { grid-template-columns: 1fr 1fr; } }
.ff { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ff label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-tertiary); display: inline-flex; align-items: center; gap: 5px; }
.ff .field { width: 100%; }
.filter-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ==========================================================================
   P-UI v14 — sleek/minimal AI-quality metrics. Drop the tacky gradient
   icon-chips + gradient bars → clean label + number + thin subtle bar.
   ========================================================================== */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1100px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); gap: 16px 22px; } }
.qmetric {}
.qmetric-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.qmetric-top span { font-size: 12.5px; font-weight: 500; color: var(--fg-secondary); }
.qmetric-top b { font-size: 15px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.qmetric-bar { height: 5px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.qmetric-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.qmetric.dim .qmetric-top span, .qmetric.dim .qmetric-top b { color: var(--fg-quaternary); }

/* eyebrow: clean muted label, subtle accent sparkle (no loud gradient text) */
.ai-eyebrow span { background: none; -webkit-text-fill-color: var(--fg-tertiary); color: var(--fg-tertiary); font-weight: 600; }
.ai-eyebrow .spark { color: var(--accent); }
.ai-quality { gap: 26px; padding: 20px 24px; }

/* ==========================================================================
   P-UI v15 — subtle GLASSY GLOW + soft tinted background (Akiflow/StackAI).
   Glass sheen (inset top highlight) + soft glow emanating from edges +
   corner light. Tasteful, low-opacity — premium, not gaudy.
   ========================================================================== */

/* soft tinted background wash (lavender + blue, gentle) */
html, body {
  background:
    radial-gradient(72% 48% at 84% -2%, rgba(118,108,228,0.08), transparent 60%),
    radial-gradient(60% 42% at 6% 4%, rgba(29,103,177,0.07), transparent 55%),
    linear-gradient(180deg, #F6F7FC 0%, #FBFBFD 42%);
  background-attachment: fixed;
}

/* glassy-glow cards: hairline + glass sheen + soft ambient glow + corner light */
.glass-card, .doc-pane, .aux-card, .decision-bar, .qc-card,
.ai-quality, .doc-grid, .list-card, #queue-list .row {
  border: 1px solid rgba(17,24,39,0.07);
  background:
    radial-gradient(135% 120% at 0% 0%, rgba(255,255,255,0.92), rgba(255,255,255,0) 46%),
    var(--bg-elev);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 2px rgba(17,24,39,0.04),
    0 18px 42px -24px rgba(29,103,177,0.18);
}
#queue-list .row:hover {
  transform: translateY(-1px);
  border-color: rgba(29,103,177,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 4px rgba(17,24,39,0.05),
    0 24px 50px -24px rgba(29,103,177,0.26);
}
/* keep the source pane flat-muted inside the window (no double sheen) */
.doc-grid .doc-pane.is-source { background: var(--bg-muted); box-shadow: none; border: 0; }
.doc-grid .doc-pane.is-ai { background: var(--bg-elev); box-shadow: none; border: 0; border-left: 1px solid var(--line); }

/* P-UI v16 — queue row: leading source chip + trailing chevron for balance */
#queue-list .row { gap: 15px; }
.row-lead { align-self: flex-start; margin-top: 1px; }
.row-chev { width: 18px; height: 18px; color: var(--fg-quaternary); flex-shrink: 0; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
#queue-list .row:hover .row-chev { color: var(--accent); transform: translateX(2px); }

/* ==========================================================================
   P-UI v17 — full-bleed sidebar + floating content card (Sarvam layout).
   The sidebar drops its white surface + border and sits flush on the page
   wash (full page height). All the right-side content lives on ONE elevated
   rounded card that floats in a gutter, with a soft Akiflow-style colored
   glow radiating from its edges (blue + lavender halo + glass sheen).
   ========================================================================== */

/* Sidebar — transparent rail, no card, no divider. Flush on the page bg. */
.sidebar {
  background: transparent;
  border-right: 0;
}

/* The main column becomes the gutter; the content is the card. The wider
   gutter gives the glow room to bloom (it was getting clipped before). */
.main { padding: 26px 30px 30px 18px; overflow: visible; }
@media (max-width: 768px) { .main { padding: 14px 14px 28px; } }

/* Floating content card — SOLID white surface so the glow can only escape
   around the edges (never tint the card interior). */
.content {
  max-width: none;
  margin: 0;
  /* position:relative (NOT z-index) so the ::before glow is positioned to
     this box but does NOT become a stacking-context child — otherwise a
     z-index:-1 ::before paints OVER the card's own background. */
  position: relative;
  background-color: var(--bg-elev);
  border: 1px solid rgba(17,24,39,0.06);
  border-radius: 22px;
  padding: 30px 38px 44px;
  min-height: calc(100vh - 56px);
  box-shadow:
    /* glass sheen along the top edge */
    inset 0 1px 0 rgba(255,255,255,0.9),
    /* tight contact shadow */
    0 1px 3px rgba(17,24,39,0.05);
}
/* Soft colored illumination radiating OUTSIDE the card (the Akiflow halo).
   Sits behind the opaque card; only the ring beyond the card edge shows. */
.content::before {
  content: '';
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: 32px;
  background: linear-gradient(135deg,
    rgba(29,103,177,0.30) 0%,
    rgba(86,197,232,0.18) 40%,
    rgba(118,108,228,0.24) 74%,
    rgba(29,103,177,0.16) 100%);
  filter: blur(30px);
  opacity: 0.7;
  pointer-events: none;
}
@media (max-width: 768px) {
  .content {
    border-radius: 18px;
    padding: 20px 18px 32px;
    min-height: 0;
  }
  .content::before { inset: -10px; filter: blur(20px); opacity: 0.5; }
}

/* ==========================================================================
   P-UI v18 — editor edit diff (P-004 moat made visible). Subtle GitHub-style
   word diff: red strikethrough = removed, soft green = added.
   ========================================================================== */
.edit-diff-card {
  margin-top: 18px;
  border: 1px solid rgba(17,24,39,0.07);
  border-radius: 16px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.9), rgba(255,255,255,0) 46%),
    var(--bg-elev);
  padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(17,24,39,0.04);
}
.edit-diff-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--fg);
}
.edit-diff-head svg { width: 16px; height: 16px; color: var(--accent); }
.edit-diff-tag {
  margin-left: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  color: var(--accent); background: var(--accent-soft);
}
.edit-diff-sub { margin: 6px 0 12px; font-size: 12px; color: var(--fg-tertiary); }
.diff-del-legend { color: #9B2226; font-weight: 600; }
.diff-ins-legend { color: #2F7A33; font-weight: 600; }
.edit-diff-body {
  font-size: 15px; line-height: 1.85; color: var(--fg);
  white-space: pre-wrap; word-break: break-word;
}
.edit-diff-body .diff-del {
  color: #9B2226; background: rgba(155,34,38,0.08);
  text-decoration: line-through; text-decoration-thickness: 1px;
  border-radius: 3px; padding: 0 2px;
}
.edit-diff-body .diff-ins {
  color: #2F7A33; background: rgba(47,122,51,0.12);
  text-decoration: none; border-radius: 3px; padding: 0 2px;
}

/* ==========================================================================
   P-UI v19 — propagate the loved AI-feature card look (gradient eyebrow +
   soft blue/cyan tint) from the overview AI-agreement card to the other
   AI/feature cards (article-detail AI Quality band, AI reviewer note).
   ========================================================================== */
.ai-quality {
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(86,197,232,0.10), transparent 52%),
    radial-gradient(120% 100% at 0% 0%, rgba(29,103,177,0.06), transparent 46%),
    var(--bg-elev);
}
/* gradient eyebrow on the AI-feature cards (overrides the muted v15 label
   ONLY for these prominent AI cards — regular labels stay calm). */
.ai-quality .ai-eyebrow span,
.aux-card .ai-eyebrow span {
  background: var(--ai-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 700;
}
.ai-quality .ai-eyebrow .spark,
.aux-card .ai-eyebrow .spark { color: var(--accent); }
/* the AI reviewer note card gets the same soft tint */
.aux-card.ai-note-card {
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(86,197,232,0.09), transparent 52%),
    var(--bg-elev);
}

/* ============================================================= */
/* Watchroom — shared components (used by the list + detail page) */
/* ============================================================= */
.wr-select {
  font-size: 12.5px; padding: 6px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  max-width: 220px;
}
/* Twitter quick filter pill — off = subtle, on = black "X" brand. */
.wr-tw-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--fg-secondary);
  padding: 6px 12px 6px 7px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  user-select: none; white-space: nowrap;
}
.wr-tw-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.wr-tw-toggle .wr-tw-x {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #000; color: #fff; font-weight: 800; font-size: 12px;
}
.wr-tw-toggle:hover { border-color: var(--fg-tertiary); }
.wr-tw-toggle.is-on { background: #000; color: #fff; border-color: #000; }
.wr-tw-toggle.is-on .wr-tw-x { background: #fff; color: #000; }

.wr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer; white-space: nowrap;
}
.wr-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.wr-btn:hover { filter: brightness(1.05); }
/* loading state while an htmx action (push / compose / unassign) is in flight */
.wr-btn.htmx-request { opacity: 0.6; cursor: progress; pointer-events: none; }
.wr-btn-ghost { background: transparent; color: var(--fg-secondary); border-color: var(--border); }
.wr-btn-ghost:hover { color: var(--accent); border-color: var(--accent); filter: none; }

.wr-search {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  border: 1px solid var(--border); background: var(--bg); border-radius: 10px; padding: 0 10px;
}
.wr-search svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--fg-tertiary); }
.wr-search-input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 13px; color: var(--fg); padding: 8px 0;
}

.wr-seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 2px; }
.wr-seg-opt {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--fg-secondary);
  padding: 5px 12px; border-radius: 8px; user-select: none;
}
.wr-seg-opt.is-on { background: var(--accent-soft); color: var(--accent); }
.wr-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.wr-seg-opt .dot { width: 7px; height: 7px; border-radius: 999px; }

.chip-primary { background: var(--accent); color: #fff; }
.lock-claimed { background: #fef3c7; color: #92400e; }
.lock-unclaimed { background: var(--accent-soft); color: var(--accent); }

.wr-tag { display: inline-flex; align-items: center; gap: 4px; }
.wr-tag-x {
  border: none; background: transparent; cursor: pointer; padding: 0 0 0 2px;
  font-size: 14px; line-height: 1; color: inherit; opacity: 0.65;
}
.wr-tag-x:hover { opacity: 1; }

/* Watchroom region tags by kind: constituency (precise/assigned) vs district (broad). */
.chip-cons { background: var(--accent); color: #fff; }
.chip-cons svg { color: #fff; }
.chip-dist {
  background: #fff7ed; color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.28);
}
.chip-dist svg { color: #b45309; }

/* ===== Queue detail (_article_card) — tightened, modern review layout ===== */
/* Panes size to their content instead of leaving a huge void on short stories. */
#article-card .doc-body  { min-height: 8.5rem; max-height: 44vh; }
#article-card .edit-body2 { min-height: 8.5rem; max-height: 44vh; }

/* Decision bar sits directly below the two document panes AND sticks to the
   viewport bottom, so Approve/Reject is always one click away — the editor
   never scrolls to act. Extra page padding lets the last content clear it. */
#article-card { padding-bottom: 84px; }
#article-card .decision-sticky {
  position: sticky; bottom: 14px; z-index: 9; margin: 18px 0;
}
#article-card .decision-sticky .decision-bar {
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 36px -10px rgba(17, 24, 39, 0.30),
              0 2px 8px rgba(17, 24, 39, 0.10);
}

/* Even rhythm between the major review sections. */
#article-card .aux-row,
#article-card .edit-diff-card { margin-top: 16px; }

/* ===== Queue detail — AI editing toolbar (top of the Andhra Prabha pane) ===== */
#article-card .ap-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg-muted);
}
#article-card .ap-tool {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-secondary);
  padding: 6px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg-elev); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
#article-card .ap-tool:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
#article-card .ap-tool svg { width: 14px; height: 14px; }
#article-card .ap-tool-resize {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12.5px; color: var(--fg-tertiary);
  padding: 3px 5px 3px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg-elev);
}
#article-card .ap-tool-resize input {
  width: 56px; text-align: center; font-size: 12.5px; font-weight: 600;
  padding: 5px 4px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg);
}
#article-card .ap-tool-resize .ap-resize-unit {
  font-size: 12.5px; color: var(--fg-tertiary); margin-right: 2px;
}
#article-card .ap-tool-resize .ap-tool { padding: 5px 10px; }

/* ============================================================================
   LUXE MINIMAL — design system overhaul (2026-06-23)
   ----------------------------------------------------------------------------
   Direction (approved): gallery-grade restraint. Warm paper canvas, near-
   monochrome ink, ONE quiet accent reserved for the primary action + focus.
   Type does the work (Instrument Serif mastheads). Hairlines instead of
   shadows. Density made elegant — air + hairline structure, never cramped.

   This layer is LAST in the cascade, so it wins by source order. It redefines
   the tokens (every component reads them) and overrides the handful of
   components that hardcode colour/shadow/structure. Fully reversible: delete
   this block to restore the previous look.
   ============================================================================ */
:root {
  /* ----- SURFACE — warm paper, barely-there elevation ----- */
  --bg:             #F7F6F1;   /* warm paper canvas */
  --bg-elev:        #FEFEFC;   /* lifted surface — a whisper above paper */
  --bg-muted:       #EFEDE6;   /* warm muted fill */
  --bg-hover:       #F1EFE9;   /* subtle hover */
  --surface:        var(--bg-elev);
  --surface-2:      var(--bg-muted);
  /* Legacy token aliases — older templates reference these names directly;
     map them onto the Luxe palette so nothing falls back to a heavy default. */
  --border:         rgba(27, 26, 22, 0.10);
  --bg-elevated:    #FEFEFC;

  /* ----- INK — warm near-black, no pure black ----- */
  --fg:             #1B1A16;
  --fg-secondary:   #56534B;
  --fg-tertiary:    #8E8A7F;
  --fg-quaternary:  #B7B2A6;

  /* ----- HAIRLINES (carry the structure now) ----- */
  --line:           rgba(27, 26, 22, 0.10);
  --line-strong:    rgba(27, 26, 22, 0.16);
  --line-faint:     rgba(27, 26, 22, 0.055);

  /* ----- ACCENT — one quiet deep ink-blue, used sparingly ----- */
  --accent:         #2E4F73;
  --accent-hover:   #213B57;
  --accent-soft:    rgba(46, 79, 115, 0.08);
  --info:           var(--accent);
  --info-soft:      var(--accent-soft);

  /* ----- Semantics dialled down (still legible, never loud) ----- */
  --success:        #5A7A4E;
  --success-soft:   rgba(90, 122, 78, 0.10);
  --warning:        #9C7A2E;
  --warning-soft:   rgba(156, 122, 46, 0.10);
  --danger:         #8A3A35;
  --danger-soft:    rgba(138, 58, 53, 0.09);

  /* ----- Elevation → near-nothing. Hairlines do the lifting. ----- */
  --shadow-sm:      0 1px 1px rgba(27,26,22,0.03);
  --shadow-md:      0 1px 2px rgba(27,26,22,0.04), 0 18px 40px -28px rgba(27,26,22,0.18);
  --glow-soft:      0 1px 2px rgba(27,26,22,0.05);
  --glow-blue:      0 2px 4px rgba(27,26,22,0.07);

  /* ----- Brand "gradient" collapses to solid ink (no neon, no blue). ----- */
  --ai-grad:        #1B1A16;
  --ai-grad-soft:   var(--bg-muted);

  /* ----- Geometry — tighter radii, a touch more rail air ----- */
  --radius:         10px;
  --radius-sm:      7px;
  --sidebar-w:      248px;
  --max-content:    1040px;
  --leading-base:   1.55;
}

/* Flat paper — kill the radial colour mesh on the canvas. */
html, body { background: var(--bg); background-attachment: initial; }
::selection { background: var(--fg); color: var(--bg); }

/* ----- MASTHEAD TYPE — the page title becomes an editorial display serif. - */
.h-page {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 42px;
  letter-spacing: -0.005em;
  line-height: 1.04;
  color: var(--fg);
}
.h-section { font-size: 19px; letter-spacing: -0.018em; }

/* ============================================================================
   SIGNATURE SIDEBAR — bold deep-Andhra-Prabha-blue rail (client brief 06-23).
   A full-height brand panel: wordmark + tagline, refined nav with a translucent
   active pill, polished profile footer. The single biggest "premium product"
   lever — replaces the earlier quiet paper rail.
   ============================================================================ */
:root {
  --brand:           #173656;   /* deep Andhra Prabha blue */
  --brand-deep:      #0C1E32;
  --brand-grad:      linear-gradient(176deg, #18395C 0%, #112B47 52%, #0B1D31 100%);
  --on-brand:        #F4EFE5;                    /* cream text on the rail */
  --on-brand-dim:    rgba(244,239,229,0.66);
  --on-brand-faint:  rgba(244,239,229,0.40);
  /* Tie the content accent (eyebrows, focus, primary action) to the signature. */
  --accent:          #173656;
  --accent-hover:    #0C1E32;
  --accent-soft:     rgba(23,54,86,0.08);
}

.sidebar {
  background: var(--brand-grad);
  border-right: 0;
  color: var(--on-brand-dim);
  padding: 24px 16px 18px;
  gap: 3px;
}
.nav-collapse-btn { color: var(--on-brand-faint); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
.nav-collapse-btn:hover { color: var(--on-brand); background: rgba(255,255,255,0.12); }

/* Brand wordmark + tagline */
.brand { margin-bottom: 24px; padding: 6px 10px; gap: 12px; align-items: flex-start; }
.brand-word-te { font-family: var(--font-te); color: #fff; font-size: 23px; font-weight: 600; line-height: 1; }
.brand-word-sub { font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-brand-faint); margin-top: 7px; }
.sidebar .brand-mark { display: none; }
.sidebar .brand-word { display: block; }
/* Sidebar/collapsed-rail mark = translucent on the blue rail; the standalone
   mark (login, mobile bar) = solid brand fill on paper. */
.brand-mark { background: var(--brand); color: #fff; box-shadow: none; }
.sidebar .brand-mark, .nav-collapsed .sidebar .brand-mark { background: rgba(255,255,255,0.13); color: #fff; }

/* Section labels */
.nav-section-title { color: var(--on-brand-faint); font-size: 9px; letter-spacing: 0.18em; padding: 20px 12px 8px; font-weight: 600; }

/* Nav items — translucent fill on hover, brighter pill when active */
.nav-item { color: var(--on-brand-dim); border-radius: 9px; font-weight: 450; padding: 9px 12px; }
.nav-item .icon { color: var(--on-brand-faint); }
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.nav-item:hover .icon { color: var(--on-brand); }
.nav-item.active { background: rgba(255,255,255,0.13); color: #fff; font-weight: 600; }
.nav-item.active::before { display: none; }
.nav-item.active .icon { color: #fff; }
.nav-item .kbd { color: var(--on-brand-faint); border-color: rgba(255,255,255,0.16); }

/* Profile footer */
.sidebar-footer { border-top: 1px solid rgba(244,239,229,0.14); padding: 14px 8px 4px; gap: 11px; }
.sidebar-avatar { background: rgba(255,255,255,0.16); color: #fff; box-shadow: none; }
.sidebar-id { flex: 1; min-width: 0; }
.sidebar-email { color: var(--on-brand); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-role { color: var(--on-brand-faint); font-size: 10.5px; letter-spacing: 0.02em; margin-top: 1px; }
.sidebar-signout { color: var(--on-brand-faint); }
.sidebar-signout:hover { color: #fff; background: rgba(255,255,255,0.10); }

/* Collapsed rail — show the అ mark, hide the wordmark */
.nav-collapsed .sidebar .brand-mark { display: grid; }
.nav-collapsed .sidebar .brand-word { display: none; }

/* ----- CONTENT EYEBROW — small-caps label led by a brand dot (ref style) -- */
.eyebrow { color: var(--brand); font-weight: 600; letter-spacing: 0.16em; }
.eyebrow::before { background: var(--brand); }

/* ----- CARDS — borderless calm: hairline + flat, no shadow stacks ----- */
.card { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius); }
.glass-card, .list-card, .doc-pane, .aux-card, .decision-bar, .qc-card,
.ai-quality, .doc-grid {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.list-card:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }

/* ----- QUEUE LIST — flat hairline-divided rows on paper (not stacked cards). */
#queue-list .row, .list .row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-faint);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 10px;
  gap: 26px;
}
#queue-list .row:last-child, .list .row:last-child { border-bottom: 0; }
#queue-list .row:hover, .list .row:hover { background: var(--bg-elev); }
.row .indicator { background: var(--accent); }
.row-title { font-size: 16px; line-height: 1.4; font-weight: 500; }
.row-title.te { font-size: 16.5px; line-height: 1.55; }
.row-meta { font-size: 12px; gap: 9px; }

/* ----- CHIPS — quiet uppercase micro-labels, monochrome hairline ----- */
.chip {
  text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 5px;
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--fg-tertiary);
}
.chip-accent { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.chip-accent svg { color: var(--fg); }
.chip-loc {
  border-color: transparent; background: transparent; color: var(--fg-tertiary);
  text-transform: none; letter-spacing: 0; font-weight: 500; padding-left: 0; gap: 3px;
}
.chip-loc .pin { width: 11px; height: 11px; color: var(--fg-quaternary); flex-shrink: 0; }

/* ----- SOURCE ICON (row lead) — monochrome, no blue tint ----- */
.icon-chip { background: var(--bg-muted); color: var(--fg-secondary); border-radius: 9px; }
.icon-chip.ic-blue { background: var(--bg-muted); color: var(--fg-secondary); }

/* ----- QC SCORE — monochrome data pill, whisper-faint semantic dot ----- */
.score-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 500; color: var(--fg);
}
.score-pill .sdot { width: 5px; height: 5px; }
.score-pill[data-band="high"] .sdot { background: var(--success); }
.score-pill[data-band="mid"]  .sdot { background: var(--fg-tertiary); }
.score-pill[data-band="low"]  .sdot { background: var(--warning); }
.score-pill .slabel { font-size: 9px; letter-spacing: 0.08em; color: var(--fg-quaternary); }

/* ----- PILL FILTERS — ghost hairline; active fills with INK, not colour ---- */
.pill-filter {
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--fg-secondary); font-weight: 500;
}
.pill-filter:hover { background: var(--bg-muted); border-color: var(--fg-tertiary); }
.pill-filter.active { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pill-filter.active .count { color: rgba(255,255,255,0.7); }

/* ----- DISCLOSURE / FILTER CARD — hairline, flat ----- */
.filter-summary { font-weight: 500; }

/* ----- BUTTONS — primary action carries the signature blue ----- */
.btn-approve { background: var(--brand); border: 0; color: #fff; box-shadow: none; }
.btn-approve:hover { background: var(--brand-deep); box-shadow: none !important; filter: none; }
.btn-accent { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-accent:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

/* ----- FOCUS — crisp hairline ring in the single accent ----- */
.field:focus, .field:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
*:focus-visible { outline-color: var(--accent); }

/* ----- CANVAS — content sits ON the paper. No floating white card, no neon
   halo (that "Akiflow glow" was the single most SaaS-tacky element). The page
   is a calm sheet of paper with a centred measure; air does the framing. ---- */
.main { padding: 44px 52px 88px; overflow: visible; }
.content {
  max-width: var(--max-content);
  margin: 0 auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  box-shadow: none;
}
.content::before { display: none; }
@media (max-width: 768px) {
  .main { padding: 18px 18px 44px; }
  .content { padding: 0; }
}

/* ============================================================================
   DETAIL PAGE — the editor's core workspace, redesigned (client priority).
   A confident review surface: clean AI-quality strip, a designed Source→Output
   contrast (deep-ink raw source vs light-paper Andhra Prabha), generous editing
   room, and a refined floating decision bar. Not a form — a product.
   ============================================================================ */

/* ----- Header ----- */
.review-title { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.005em; line-height: 1.08; font-size: clamp(28px, 3vw, 40px); }
.review-title.te { font-family: var(--font-te); font-weight: 600; line-height: 1.28; font-size: clamp(24px, 2.6vw, 33px); }
.meta-pill { border: 1px solid var(--line); background: var(--bg-elev); }

/* ----- AI quality — calm, confident strip (no coloured mesh) ----- */
.ai-quality { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: 20px 24px; gap: 28px; align-items: center; }
.ai-quality::before, .ai-quality::after { display: none !important; }
.ai-eyebrow .spark { color: var(--brand); }
.ai-eyebrow span { background: none; -webkit-text-fill-color: var(--brand); color: var(--brand); letter-spacing: 0.14em; }
.qscore-big { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--fg); }
.qscore-bar > i, .qmetric-bar > i { background: var(--brand); }
.qmetric-top b { color: var(--fg); font-family: var(--font-mono); }
.qmetric-top span { color: var(--fg-tertiary); }

/* ----- Compare card: one framed card, two contrasting panes ----- */
.doc-grid { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: var(--bg-elev); }
.doc-grid .doc-pane.is-ai { border-left: 1px solid var(--line); }

/* Source = deep-ink raw input */
.doc-grid .doc-pane.is-source { background: var(--brand-deep); }
.doc-grid .doc-pane.is-source .doc-pane-head { background: rgba(255,255,255,0.05); border-bottom-color: rgba(255,255,255,0.10); }
.doc-grid .doc-pane.is-source .doc-pane-name { color: rgba(255,255,255,0.90); }
.doc-grid .doc-pane.is-source .doc-pane-flag { color: rgba(255,255,255,0.45); }
.doc-grid .doc-pane.is-source .ico { color: rgba(255,255,255,0.62); }
.doc-grid .doc-pane.is-source .doc-headline { color: rgba(255,255,255,0.92); }
.doc-grid .doc-pane.is-source .doc-body { color: rgba(255,255,255,0.78); background: transparent; }

/* Andhra Prabha = light-paper polished output */
.doc-pane.is-ai .doc-pane-name { color: var(--brand); }
.doc-pane.is-ai .doc-pane-head .ico { color: var(--brand); }
.doc-pane-name { letter-spacing: 0.08em; }
.ap-charcount { color: var(--fg-quaternary); }

/* Generous editing room — this is the editor's main task */
.doc-body { min-height: 22rem; max-height: 62vh; }
.edit-body2 { min-height: 22rem; }
.edit-headline2:focus { background: var(--accent-soft); border-radius: var(--radius-sm); }

/* AP toolbar — quiet hairline tools */
.ap-tool { border: 1px solid var(--line-strong); background: transparent; color: var(--fg-secondary); border-radius: 8px; }
.ap-tool:hover { background: var(--bg-muted); color: var(--fg); }

/* ----- Decision bar — inline, directly under the panes (predictable
   placement). The old sticky-bottom behaviour detached and crossed the aux
   cards on short articles; the panes scroll internally so sticky isn't
   needed. ----- */
.decision-wrap.decision-sticky { position: static; bottom: auto; }
.decision-wrap { margin-top: 18px; }
.decision-bar { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); box-shadow: 0 10px 34px -20px rgba(27,26,22,0.28); padding: 13px 15px; }
.btn-danger-ghost { border: 1px solid var(--line-strong); }

/* ----- Aux cards + constituency chips ----- */
.aux-card { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius); }
.aux-label { color: var(--fg-tertiary); letter-spacing: 0.08em; }
.aux-label svg { color: var(--brand); }
.region-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; color: var(--fg-secondary); background: transparent; }

/* ----- Edit-diff (the moat, made beautiful) ----- */
.edit-diff-card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; background: var(--bg-elev); }

/* ============================================================================
   EDITING DESK — rebuilt detail screen (2026-06-23). Document-centric layout:
   sticky top action bar + editing canvas (segmented Output/Source/Changes) +
   inspector rail. Replaces the old stacked-card form entirely.
   ============================================================================ */
.detail2 { display: block; }

/* ---- Sticky top action bar ---- */
.desk-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 2px; margin-bottom: 22px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.desk-bar-l { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.desk-bar-r { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.desk-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--fg-secondary); text-decoration: none; }
.desk-back:hover { color: var(--fg); }
.desk-bar-div { width: 1px; height: 18px; background: var(--line-strong); }
.status-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--fg-secondary); padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; }
.desk-reason { width: 180px; }
.desk-final { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.desk-final.ok { color: var(--success); }
.desk-final.no { color: var(--danger); }

/* ---- Title block ---- */
.desk-head { margin: 4px 0 24px; }
.desk-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.desk-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.desk-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.01em; color: var(--fg); }
.desk-title.te { font-family: var(--font-te); font-weight: 600; line-height: 1.24; font-size: clamp(25px, 2.8vw, 37px); }
.desk-prov { margin-top: 12px; font-size: 13px; color: var(--fg-tertiary); }
.desk-prov a { color: var(--brand); text-decoration: none; }
.desk-prov a:hover { text-decoration: underline; }

/* ---- Two-column workspace ---- */
.desk-body { display: grid; grid-template-columns: minmax(0,1fr) 336px; gap: 26px; align-items: start; }
@media (max-width: 980px) { .desk-body { grid-template-columns: 1fr; gap: 22px; } }
.desk-main { min-width: 0; }

/* ---- Save cluster + dirty cue (live in the top action zone) ---- */
.dirty-cue { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--warning); }
.dirty-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.save-cluster { display: inline-flex; align-items: center; gap: 9px; }
.save-note { width: 150px; }

/* ---- Segmented toggle — an obvious pill switch + a plain-language hint ---- */
.seg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.seg-tabs { display: inline-flex; gap: 3px; background: var(--bg-muted); padding: 4px; border-radius: 11px; }
.seg-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-tertiary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg-tabs button svg { width: 14px; height: 14px; }
.seg-tabs button:hover { color: var(--fg); }
.seg-tabs button.active { background: var(--bg-elev); color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(27,26,22,0.09); }
.seg-tabs button.active svg { color: var(--brand); }
.seg-flag { font-size: 9px; letter-spacing: 0.04em; color: var(--fg-quaternary); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 4px; }
.seg-hint { font-size: 12px; color: var(--fg-tertiary); }

/* ---- Bounded editor SHEET — the document has a clear boundary; the body
   auto-grows (JS), so the whole article is visible and the PAGE scrolls. ---- */
.sheet { margin-top: 14px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sheet.is-src { background: var(--bg-muted); }
.sheet-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sheet-words { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-quaternary); }
.sheet-ribbon { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-tertiary); }
.sheet-ribbon svg { width: 14px; height: 14px; color: var(--fg-tertiary); }
.sheet-doc { padding: 26px 30px 30px; }
.sheet-title { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--line-faint); background: transparent; padding: 0 0 16px; margin-bottom: 18px; font-family: var(--font-te); font-size: 25px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); }
.sheet-title::placeholder { color: var(--fg-quaternary); }
.sheet-title:focus { outline: none; }
.sheet-title.is-ro { white-space: normal; }
.sheet-body { display: block; width: 100%; border: 0; background: transparent; padding: 0; font-family: var(--font-te); font-size: 16.5px; line-height: 1.95; color: var(--fg); resize: none; overflow: hidden; min-height: 7rem; }
.sheet-body:focus { outline: none; }
.sheet-body.is-ro { white-space: pre-wrap; word-break: break-word; color: var(--fg-secondary); }
.diff-legend { font-size: 12px; color: var(--fg-tertiary); margin-bottom: 14px; }

/* ---- Inspector rail ---- */
.desk-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 78px; align-self: start; }
@media (max-width: 980px) { .desk-rail { position: static; } }
.rail-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); padding: 16px 17px; }
.rail-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: 14px; }
.rail-head svg { width: 14px; height: 14px; color: var(--brand); }
/* AI quality in the rail */
.qrail { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.qrail-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--fg); }
.qrail-num small { font-size: 14px; color: var(--fg-tertiary); font-weight: 500; }
.qrail-num.high { color: var(--success); }
.qrail-num.low { color: var(--warning); }
.qrail-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--bg-muted); overflow: hidden; }
.qrail-bar > i { display: block; height: 100%; background: var(--brand); }
.qrows { display: flex; flex-direction: column; gap: 10px; }
.qrow { display: grid; grid-template-columns: 76px 1fr 28px; align-items: center; gap: 10px; }
.qrow-l { font-size: 12px; color: var(--fg-secondary); }
.qrow-bar { height: 4px; border-radius: 99px; background: var(--bg-muted); overflow: hidden; }
.qrow-bar > i { display: block; height: 100%; background: var(--brand); }
.qrow-v { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--fg); }
/* rail forms */
.rail-form { display: flex; flex-direction: column; gap: 9px; }
.rail-form .field { width: 100%; }
.rail-hint { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--fg-tertiary); }
.rail-auto { color: var(--fg-quaternary); }
.rail-photos { display: flex; flex-wrap: wrap; gap: 6px; }
.rail-photos img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--radius-sm); display: block; border: 1px solid var(--line); }
.rail-interm { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--fg-secondary); white-space: pre-wrap; max-height: 40vh; overflow-y: auto; }

/* ============================================================================
   SHARED PAGE MASTHEAD — every screen opens the same way (eyebrow + serif
   title + subtitle), echoing the client's reference. Used via the
   page_header() macro. Also normalises the legacy .page-header/.page-title
   inline styles some shells still carry.
   ============================================================================ */
.page-head { margin-bottom: 22px; }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin-bottom: 13px; }
.page-eyebrow .pe-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.page-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 31px); line-height: 1.05; letter-spacing: -0.01em; color: var(--fg); margin: 0; }
.page-title.te { font-family: var(--font-te); font-weight: 600; line-height: 1.2; }
.page-sub { margin-top: 11px; font-size: 13.5px; color: var(--fg-tertiary); max-width: 60ch; }

/* ============================================================================
   WATCHROOM — filter controls + region/lock chips, brought onto the Luxe
   palette (they shipped with solid-fill accents/ambers).
   ============================================================================ */
.wr-seg { display: inline-flex; gap: 3px; background: var(--bg-muted); padding: 3px; border-radius: 999px; }
.wr-seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--fg-secondary); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.wr-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.wr-seg-opt .dot { width: 7px; height: 7px; border-radius: 50%; }
.wr-seg-opt:hover { color: var(--fg); }
.wr-seg-opt.is-on { background: var(--bg-elev); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(27,26,22,0.06); }
.wr-select { height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-elev); color: var(--fg-secondary); font-size: 12.5px; }
.wr-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-elev); }
.wr-search svg { width: 15px; height: 15px; color: var(--fg-tertiary); flex-shrink: 0; }
.wr-search-input { flex: 1; border: 0; background: transparent; font-size: 13px; color: var(--fg); }
.wr-search-input:focus { outline: none; }
.wr-btn { height: 34px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--fg-secondary); }
.wr-btn:hover { background: var(--bg-muted); color: var(--fg); }

/* Region tags by kind: constituency = brand pin, district = muted */
.chip-cons { background: transparent; color: var(--brand); border: 1px solid var(--line-strong); text-transform: none; letter-spacing: 0; font-weight: 500; }
.chip-cons svg { color: var(--brand); }
.chip-dist { background: transparent; color: var(--fg-tertiary); border: 1px solid var(--line-strong); text-transform: none; letter-spacing: 0; font-weight: 500; }
.chip-dist svg { color: var(--fg-tertiary); }
.lock-claimed { background: var(--warning-soft); color: var(--warning); border-color: transparent; text-transform: none; letter-spacing: 0; font-weight: 600; }
.lock-claimed svg { color: var(--warning); }
.lock-unclaimed { background: transparent; color: var(--fg-tertiary); border: 1px solid var(--line-strong); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ==========================================================================
   Queue cards — livelier, status-accented rows (P-065)
   The rows read flat/lifeless at rest; this adds a left status accent bar, a
   vivid leading avatar, a stronger topic chip, and a clearer rest state.
   ========================================================================== */
#queue-list .row { padding-left: 22px; overflow: hidden; }
/* Left accent bar — instant status scannability (pending=amber, approved=green,
   rejected=red). Full-height via absolute positioning; clipped to the radius. */
#queue-list .row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--dot-pending);
}
#queue-list .row[data-status="approved"]::before,
#queue-list .row[data-status="published"]::before { background: var(--dot-approved); }
#queue-list .row[data-status="rejected"]::before { background: var(--dot-rejected); }

/* Vivid leading avatar (was a pale gray icon) */
#queue-list .row .row-lead {
  width: 38px; height: 38px; border-radius: 11px; align-self: center;
  background: linear-gradient(135deg, #1D67B1, #56C5E8);
  box-shadow: 0 5px 14px -4px rgba(29,103,177,0.5);
}
#queue-list .row .row-lead svg { width: 19px; height: 19px; color: #fff; }

/* Topic chip with presence; format/other chips quieter + uppercase */
#queue-list .row .chip-accent {
  background: var(--accent); color: #fff;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; box-shadow: 0 2px 6px -2px rgba(29,103,177,0.5);
}
#queue-list .row .chip {
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; font-weight: 600;
}
#queue-list .row .chip-loc { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Clearer rest state so cards don't look empty; lift a bit more on hover */
#queue-list .row {
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    linear-gradient(140deg, rgba(29,103,177,0.28), rgba(86,197,232,0.14) 55%, rgba(17,24,39,0.08)) border-box;
  box-shadow: 0 6px 18px -14px rgba(29,103,177,0.30), 0 1px 3px rgba(17,24,39,0.05);
}
#queue-list .row:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -18px rgba(29,103,177,0.38); }
#queue-list .row-title { font-size: 16.5px; }
#queue-list .row-meta .status-row { font-weight: 600; }