/* ============================================================
   Brand fonts — Ahmed Almousa Holding
   ============================================================ */
@font-face {
  font-family: 'Tabac Glam G4';
  src: url('/fonts/TabacGlamG4-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tabac Glam G4';
  src: url('/fonts/TabacGlamG4-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spica Arabic';
  src: url('/fonts/SpicaArabic-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spica Arabic';
  src: url('/fonts/SpicaArabic-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kanun AR';
  src: url('/fonts/KanunAR-LT-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kanun AR';
  src: url('/fonts/KanunAR-LT-Thin.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}

/* ============================================================
   FOUNDATION — design tokens, type scale, motion, icons
   ============================================================ */
:root {
  /* Typography */
  --font-display-ar: 'Spica Arabic', 'Tabac Glam G4', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-display-en: 'Tabac Glam G4', 'Spica Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-body: 'Kanun AR', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  /* Type scale — display fonts earn their license at hero sizes */
  --type-display: 48px;  /* hero greeting */
  --type-hero:    32px;  /* hero stat number */
  --type-h1:      24px;  /* page title */
  --type-h2:      18px;  /* section title */
  --type-h3:      15px;  /* card title */
  --type-body:    14px;  /* body */
  --type-caption: 12px;  /* caption / label */
  --type-micro:   11px;  /* meta */

  /* Spacing (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 22px; --r-pill: 999px;

  /* Motion */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
  --dur-slower:  480ms;
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --stagger: 45ms;
}

/* ===== DARK THEME (default) — deep luxury, warm-tinted blacks ===== */
:root, :root[data-theme="dark"] {
  /* Surface stack — wider hex gaps so layers separate without gradient crutch */
  --bg:             #0B0D11;
  --bg-2:           #14171D;
  --surface:        #1A1E25;
  --surface-2:      #232831;
  --surface-raised: #2D333E;

  /* Ink — warmer to harmonize with the beige brand */
  --ink:    #F0E7DA;
  --ink-2:  #BFB1A0;
  --muted:  #8A8275;

  /* Borders — subtle warm tint, hairline default */
  --border:        rgba(212,191,163,0.07);
  --border-strong: rgba(212,191,163,0.14);
  --hairline:      rgba(212,191,163,0.05);

  /* Brand */
  --primary:      #D4BFA3;
  --primary-hi:   #EFDCBC;
  --primary-soft: rgba(212,191,163,0.10);
  --primary-glow: rgba(212,191,163,0.30);
  --brand-dark:   #1A1E25;

  /* Roles */
  --role-u1: #B0A99B; --role-u1-soft: rgba(176,169,155,0.12);
  --role-u2: #98908A; --role-u2-soft: rgba(152,144,138,0.12);
  --role-u3: #7E8A8F; --role-u3-soft: rgba(126,138,143,0.12);
  --role-ai: #C3A0F5; --role-ai-soft: rgba(195,160,245,0.14);
  --role-sys:#9AA3B0; --role-sys-soft:rgba(154,163,176,0.12);

  /* Status */
  --st-success: #6BCF95; --st-success-soft: rgba(107,207,149,0.12);
  --st-danger:  #E68888; --st-danger-soft:  rgba(230,136,136,0.12);
  --st-warning: #E5B380; --st-warning-soft: rgba(229,179,128,0.13);
  --st-info:    #7AB5E6; --st-info-soft:    rgba(122,181,230,0.13);

  /* Elevation — soft, with a hint of light from above */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:   0 6px 18px rgba(0,0,0,0.42), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55), 0 10px 24px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 0 1px rgba(212,191,163,0.10), 0 12px 36px rgba(212,191,163,0.12);
  --inset-light: inset 0 1px 0 rgba(255,255,255,0.04);

  --focus-ring: 0 0 0 3px rgba(212,191,163,0.42);

  /* Flat page background — no gradient wash (avoids the "AI template" look) */
  --ambient: none;

  --rrp-overlay: rgba(255,255,255,0.30);
  --rrp-dot:     rgba(255,255,255,0.95);
  --rrp-pulse:   rgba(212,191,163,0.50);
}

/* ===== LIGHT THEME — warm cream, no harsh white ===== */
:root[data-theme="light"] {
  --bg:             #F5F1E8;
  --bg-2:           #EBE5D7;
  --surface:        #FBF8F2;
  --surface-2:      #F0EBE0;
  --surface-raised: #FFFFFF;

  --ink:    #1F2127;
  --ink-2:  #4A4639;
  --muted:  #7C7565;

  --border:        rgba(35,40,49,0.08);
  --border-strong: rgba(35,40,49,0.14);
  --hairline:      rgba(35,40,49,0.05);

  --primary:      #8B7355;
  --primary-hi:   #6F5C44;
  --primary-soft: rgba(139,115,85,0.08);
  --primary-glow: rgba(139,115,85,0.18);
  --brand-dark:   #FFFFFF;

  --role-u1: #6B7280; --role-u1-soft: rgba(107,114,128,0.08);
  --role-u2: #4B5563; --role-u2-soft: rgba(75,85,99,0.08);
  --role-u3: #374151; --role-u3-soft: rgba(55,65,81,0.08);
  --role-ai: #7C3AED; --role-ai-soft: rgba(124,58,237,0.08);
  --role-sys:#6B7280; --role-sys-soft:rgba(107,114,128,0.08);

  --st-success: #059669; --st-success-soft: rgba(5,150,105,0.08);
  --st-danger:  #DC2626; --st-danger-soft:  rgba(220,38,38,0.08);
  --st-warning: #D97706; --st-warning-soft: rgba(217,119,6,0.10);
  --st-info:    #2563EB; --st-info-soft:    rgba(37,99,235,0.08);

  --shadow-sm:   0 1px 2px rgba(35,40,49,0.06);
  --shadow-md:   0 6px 16px rgba(35,40,49,0.08), 0 2px 4px rgba(35,40,49,0.04);
  --shadow-lg:   0 24px 50px rgba(35,40,49,0.12), 0 10px 20px rgba(35,40,49,0.06);
  --shadow-glow: 0 0 0 1px rgba(139,115,85,0.12), 0 10px 30px rgba(139,115,85,0.10);
  --inset-light: inset 0 1px 0 rgba(255,255,255,0.50);

  --focus-ring: 0 0 0 3px rgba(139,115,85,0.32);

  --ambient: none;

  --rrp-overlay: rgba(0,0,0,0.18);
  --rrp-dot:     #FFFFFF;
  --rrp-pulse:   rgba(139,115,85,0.45);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  font-size:var(--type-body);
  font-weight:300;
  line-height:1.7;
  letter-spacing:0;
  color:var(--ink);
  background:var(--bg);
  background-image:var(--ambient);
  background-attachment:fixed;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}

/* Type scale — display fonts at proper hierarchy weights */
h1,h2,h3,h4,h5,h6,
.brand-display,.topbar-brand .name strong,.login-box h1,
.completion-hero h2,.section-title h2,.card h3,.stepper-wrap .head h3,
.table-wrap header h3,.empty-state h4,.trust-cert h4{
  font-family:var(--font-display-ar);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.18;
}
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] h4,
[dir="ltr"] h5,[dir="ltr"] h6,[dir="ltr"] .brand-display{font-family:var(--font-display-en)}

/* Display utilities for hero moments */
.type-display{font-family:var(--font-display-ar);font-weight:700;font-size:var(--type-display);line-height:1.05;letter-spacing:-0.025em}
[dir="ltr"] .type-display{font-family:var(--font-display-en)}
.type-hero{font-family:var(--font-display-ar);font-weight:700;font-size:var(--type-hero);line-height:1.1;letter-spacing:-0.02em}
[dir="ltr"] .type-hero{font-family:var(--font-display-en)}

/* Tabular numbers (for stats, financial data, IDs, timers) */
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

:focus{outline:none}
:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--r-sm);transition:box-shadow var(--dur-fast) var(--ease-out)}
a,button,input,select,textarea{font-family:inherit;color:inherit}

/* ============================================================
   ICON SYSTEM — Lucide SVGs via icon() helper in app.js
   ============================================================ */
.ic{
  display:inline-block;
  vertical-align:-0.15em;
  flex-shrink:0;
  width:18px;height:18px;
  stroke-width:1.75;
  transition:color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.ic-sm  {width:14px;height:14px}
.ic-md  {width:20px;height:20px}
.ic-lg  {width:24px;height:24px}
.ic-xl  {width:32px;height:32px}
.ic-2xl {width:48px;height:48px}
.ic-3xl {width:64px;height:64px}
/* When an icon precedes a label, give it a touch of breathing room */
.with-ic{display:inline-flex;align-items:center;gap:var(--sp-2)}
/* Direction-aware icons (arrows, chevrons) — flip visually in RTL so the
   semantic direction matches the reading direction. */
[dir="rtl"] .ic-rtl-flip{transform:scaleX(-1)}

/* ============================================================
   MOTION SYSTEM — entrance animations + stagger
   ============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
@keyframes scalePop{0%{opacity:0;transform:scale(0.92)}60%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes softGlow{0%,100%{box-shadow:0 0 0 0 var(--primary-glow)}50%{box-shadow:0 0 0 8px transparent}}

/* Stagger children — class on parent, JS optional */
.stagger-children > *{opacity:0;animation:fadeUp var(--dur-slow) var(--ease-out) forwards}
.stagger-children > *:nth-child(1){animation-delay:calc(var(--stagger) * 0)}
.stagger-children > *:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
.stagger-children > *:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
.stagger-children > *:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
.stagger-children > *:nth-child(5){animation-delay:calc(var(--stagger) * 4)}
.stagger-children > *:nth-child(6){animation-delay:calc(var(--stagger) * 5)}
.stagger-children > *:nth-child(7){animation-delay:calc(var(--stagger) * 6)}
.stagger-children > *:nth-child(8){animation-delay:calc(var(--stagger) * 7)}
.stagger-children > *:nth-child(n+9){animation-delay:calc(var(--stagger) * 8)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .stagger-children > *{opacity:1 !important}
}
/* App shell — fixed-viewport "dashboard" layout. The shell itself is locked
   at 100vh; main content scrolls INSIDE its grid cell, not the body. This
   keeps the footer permanently visible at the bottom and prevents the
   sidebar's old `height:100vh` from bleeding into the footer area and
   clipping its text. Tradeoff: URL-bar-hide on mobile no longer happens
   when scrolling — fine for an internal governance tool. */
.app-shell{display:grid;grid-template-columns:260px 1fr;grid-template-rows:64px 1fr auto;grid-template-areas:"sidebar topbar" "sidebar main" "footer footer";height:100vh;height:100dvh;overflow:hidden}
.topbar{grid-area:topbar;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-6);background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--inset-light);backdrop-filter:saturate(140%);z-index:50}
.topbar-brand{display:flex;align-items:center;gap:var(--sp-3)}
.topbar-brand img{height:42px;width:auto;object-fit:contain;max-width:160px;transition:transform var(--dur-base) var(--ease-spring)}
.topbar-brand img:hover{transform:scale(1.04)}
:root[data-theme="light"] .topbar-brand img,:root[data-theme="light"] .login-box img.logo{filter:brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(715%) hue-rotate(182deg) brightness(94%) contrast(89%)}
.topbar-brand .name strong{display:block;font-size:var(--type-body);color:var(--ink);line-height:1.2}
.topbar-brand .name span{display:block;font-size:var(--type-micro);color:var(--muted);letter-spacing:.02em;margin-top:2px}
.topbar-tools{display:flex;align-items:center;gap:10px}
.icon-btn{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--ink-2);
  padding:0;
  width:38px;height:38px;
  border-radius:var(--r-md);
  cursor:pointer;
  display:inline-grid;place-items:center;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring);
  position:relative;
  box-shadow:var(--shadow-sm), var(--inset-light);
}
.icon-btn:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--primary);transform:translateY(-1px)}
.icon-btn .dot{position:absolute;top:6px;inset-inline-end:6px;width:8px;height:8px;border-radius:50%;background:var(--st-danger);box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--st-danger) 35%,transparent);animation:softGlow 2s var(--ease-in-out) infinite}
/* Notification unread-count pill (adapted from .filter-badge). Ref: dribbble.com/shots/4898292 — shot media saved at design-references/notif-count-badge-N1.2-shot4898292.gif; rationale in design-references/notif-count-badge-N1.2.md. JS sets .textContent to the count and toggles [hidden]. */
.icon-btn .notif-badge{position:absolute;top:2px;inset-inline-end:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:var(--st-danger);color:var(--brand-dark);font-size:10px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--surface)}
.icon-btn .notif-badge[hidden]{display:none}
.lang-toggle,.theme-toggle{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--ink-2);
  padding:0;
  min-width:38px;height:38px;
  border-radius:var(--r-md);
  cursor:pointer;
  display:inline-grid;place-items:center;
  font-size:var(--type-caption);font-weight:600;letter-spacing:.04em;
  line-height:1;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring);
  box-shadow:var(--shadow-sm), var(--inset-light);
}
/* The lang toggle shows a single glyph ('EN' or 'ع'). letter-spacing adds a
   trailing gap that throws a single char off-center, and the Arabic 'ع' centers
   better with no tracking — so zero it out here. line-height:1 (above) fixes the
   vertical baseline offset that made 'ع' sit low. */
.lang-toggle{padding:0 var(--sp-3);letter-spacing:0;text-align:center}
.lang-toggle:hover,.theme-toggle:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--primary);transform:translateY(-1px)}
.theme-toggle .ic{transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-base) var(--ease-out)}
.theme-toggle:hover .ic{transform:rotate(15deg) scale(1.08)}
.theme-toggle:active .ic{animation:themeSpin var(--dur-slow) var(--ease-spring)}
@keyframes themeSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(0.8)}100%{transform:rotate(360deg) scale(1)}}

/* Lang toggle: 3D flip on click, hint of perspective on the parent */
.topbar-tools,.login-tools{perspective:600px}
.lang-toggle{transform-style:preserve-3d;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-spring)}
.lang-toggle:active{transform:rotateY(180deg)}
.user-chip{
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--surface);
  padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm), var(--inset-light);
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring);
}
[dir="rtl"] .user-chip{padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4)}
.user-chip:hover{background:var(--surface-2);border-color:var(--border-strong);transform:translateY(-1px)}
.user-chip .avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--primary);
  display:grid;place-items:center;
  color:var(--brand-dark);font-weight:700;font-size:var(--type-caption);
  box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 30%,transparent);
}
:root[data-theme="light"] .user-chip .avatar{color:#FFFFFF}
.user-chip .meta strong{display:block;font-size:var(--type-caption);color:var(--ink)}
.user-chip .meta span{display:block;font-size:var(--type-micro);color:var(--muted)}
.sidebar{grid-area:sidebar;background:var(--surface);border-inline-end:1px solid var(--border);padding:var(--sp-5) var(--sp-3);overflow-y:auto;min-height:0;z-index:40}
.sidebar h4{font-size:var(--type-micro);color:var(--muted);letter-spacing:.08em;padding:var(--sp-3) var(--sp-3) var(--sp-2);text-transform:uppercase;font-weight:700}
.nav-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3);
  border-radius:var(--r-md);
  color:var(--ink-2);
  cursor:pointer;
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring);
  font-size:var(--type-body);
  margin-bottom:2px;
  width:100%;
  background:transparent;
  text-align:start;
  position:relative;
}
.nav-item .ic{width:18px;height:18px;color:var(--muted);transition:color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring)}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item:hover .ic{color:var(--ink-2);transform:scale(1.08)}
.nav-item.active{background:var(--primary-soft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 30%,transparent);font-weight:600}
.nav-item.active .ic{color:var(--primary)}
.nav-item.active::before{
  content:"";position:absolute;
  inset-block:6px;
  inset-inline-start:0;
  width:3px;border-radius:0 3px 3px 0;
  background:var(--primary);
}
[dir="rtl"] .nav-item.active::before{border-radius:3px 0 0 3px}
.nav-item.hidden-by-role{display:none}
.dev-flag{margin-top:16px;padding:10px;background:var(--bg-2);border:1px dashed var(--st-warning);border-radius:10px;color:var(--st-warning)}
.dev-flag label{display:block;font-size:10.5px;margin-bottom:6px;letter-spacing:.4px}
.dev-flag select{width:100%;padding:7px 8px;border-radius:8px;background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);font-family:inherit;font-size:12.5px}
.dev-flag .label-tag{font-size:9px;background:var(--st-warning);color:#FFF;padding:1px 5px;border-radius:4px;font-weight:700;margin-inline-start:4px}
.real-role-switcher{margin-top:16px;padding:10px;background:var(--bg-2);border:1px solid var(--border-strong);border-radius:10px}
.real-role-switcher label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:6px}
.real-role-switcher select{width:100%;padding:7px 8px;border-radius:8px;background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);font-size:12.5px}
.dev-scenario{margin-top:10px;padding:10px;background:var(--bg-2);border:1px dashed var(--st-info);border-radius:10px;color:var(--st-info)}
.dev-scenario label{display:block;font-size:10.5px;margin-bottom:6px}
.dev-scenario select{width:100%;padding:6px;border-radius:6px;background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);font-size:12px}
.main{grid-area:main;padding:24px 28px 32px;overflow-x:hidden;overflow-y:auto;min-height:0}
.footer{
  grid-area:footer;
  padding:10px 24px;
  border-top:1px solid var(--border-strong);
  background:var(--surface);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  font-size:12px;
  min-height:42px;
  z-index:30;
}
.footer{box-shadow:0 -1px 0 var(--hairline)}
.footer .copy{color:var(--ink-2);font-weight:400;letter-spacing:.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footer a.trust-link{color:var(--primary);text-decoration:none;font-weight:600;padding:5px 12px;border:1px solid var(--primary);border-radius:7px;transition:background .15s,color .15s;white-space:nowrap}
.footer a.trust-link:hover{background:var(--primary);color:var(--brand-dark)}
:root[data-theme="light"] .footer a.trust-link:hover{color:#FFFFFF}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm), var(--inset-light);
  padding:var(--sp-5);
  transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
  position:relative;
}
.card:hover{box-shadow:var(--shadow-md), var(--inset-light);border-color:var(--border-strong)}
.card[data-role="u1"]{border-inline-start:4px solid var(--role-u1)}
.card[data-role="u2"]{border-inline-start:4px solid var(--role-u2)}
.card[data-role="u3"]{border-inline-start:4px solid var(--role-u3)}
.card[data-role="ai"]{border-inline-start:4px solid var(--role-ai)}
.card[data-role="sys"]{border-inline-start:4px solid var(--role-sys)}
.card h3{font-size:var(--type-h2);margin-bottom:var(--sp-2);color:var(--ink);line-height:1.3}
.card p{font-size:var(--type-body);color:var(--ink-2);line-height:1.7}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;margin:var(--sp-2) 0 var(--sp-5);flex-wrap:wrap;gap:var(--sp-3)}
.section-title h2{font-size:var(--type-h1);font-weight:700;color:var(--ink);line-height:1.15;letter-spacing:-0.015em}
.section-title .sub{color:var(--muted);font-size:var(--type-caption);line-height:1.6;margin-top:var(--sp-1)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-bottom:var(--sp-6)}
/* Metric tile — tone-colored SVG icon chip + stacked value/label.
   The colored icon makes each card read as a distinct tile (not a uniform
   row of identical number cards) and carries no gradient. */
.stat-card{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm), var(--inset-light);
  cursor:pointer;
  transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
  text-align:start;font-family:inherit;color:var(--ink);width:100%;
}
.stat-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md), var(--inset-light)}
.stat-card .stat-ic{
  width:46px;height:46px;border-radius:var(--r-md);
  display:grid;place-items:center;flex:none;
  background:var(--primary-soft);color:var(--primary);
}
.stat-card .stat-ic .ic{width:22px;height:22px}
.stat-card .stat-body{display:flex;flex-direction:column;min-width:0}
.stat-card .label{font-size:var(--type-caption);color:var(--muted);letter-spacing:.02em;font-weight:500;margin-top:5px;overflow:hidden;text-overflow:ellipsis}
.stat-card .value{font-family:var(--font-display-ar);font-size:var(--type-hero);font-weight:700;color:var(--ink);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
[dir="ltr"] .stat-card .value{font-family:var(--font-display-en)}
.stat-card .delta{font-size:var(--type-micro);color:var(--muted);margin-top:4px}
.stat-card[data-tone="info"]    .stat-ic{background:var(--st-info-soft);color:var(--st-info)}
.stat-card[data-tone="success"] .stat-ic{background:var(--st-success-soft);color:var(--st-success)}
.stat-card[data-tone="danger"]  .stat-ic{background:var(--st-danger-soft);color:var(--st-danger)}
.stat-card[data-tone="warning"] .stat-ic{background:var(--st-warning-soft);color:var(--st-warning)}
.stepper-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm), var(--inset-light);padding:var(--sp-6);margin-bottom:var(--sp-6)}
.stepper-wrap .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:8px}
.stepper-wrap .head h3{font-size:15px}
.stepper-wrap .head .sub{font-size:12px;color:var(--muted)}
.stepper{display:grid;grid-template-columns:repeat(6,1fr);gap:0;align-items:start;position:relative}
.stepper.mini{margin:8px 0}
.stepper.mini .stp .circle{width:30px;height:30px;font-size:12px}
.stepper.mini .stp:not(:last-child)::after{top:15px}
.stepper.mini .stp .name{font-size:10.5px}
.stepper .stp{position:relative;text-align:center;padding:0 8px;cursor:pointer;background:transparent;border:none;color:var(--ink);font-family:inherit;font-size:12.5px}
.stepper .stp .circle{width:42px;height:42px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border-strong);color:var(--muted);display:grid;place-items:center;font-weight:700;font-size:15px;margin:0 auto 8px;transition:.2s;font-family:inherit}
.stepper .stp .name{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.4}
.stepper .stp .when{font-size:10.5px;color:var(--muted);opacity:.7;margin-top:3px}
.stepper .stp.done .circle{
  background:var(--st-success);border-color:var(--st-success);color:#fff;
  font-size:0; /* hide step-number text once done */
  position:relative;
  animation:stepDone var(--dur-slower) var(--ease-spring);
}
.stepper .stp.done .circle::after{
  content:"";position:absolute;inset:0;
  background:no-repeat center/55% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12' stroke-dasharray='22' stroke-dashoffset='22'><animate attributeName='stroke-dashoffset' from='22' to='0' dur='0.45s' fill='freeze' begin='0.05s'/></polyline></svg>");
}
@keyframes stepDone{
  0%   {transform:scale(0.9)}
  60%  {transform:scale(1.12)}
  100% {transform:scale(1)}
}
.stepper .stp.done .name{color:var(--ink)}
.stepper .stp.current .circle{background:var(--primary);border-color:var(--primary);color:#FFF;box-shadow:0 0 0 4px var(--primary-soft)}
:root[data-theme="dark"] .stepper .stp.current .circle{color:var(--brand-dark)}
.stepper .stp.current .name{color:var(--primary);font-weight:700}
.stepper .stp.locked .circle{opacity:.4}
/* Connector line lives "in the gap BEFORE this step" — so the first step
   never has one (the previous fix drew it on every step except the last,
   which caused the first step's line to bleed off the left edge of the
   card). The done state of the *previous* step controls the line color. */
/* Connector line — lives in the gap BEFORE step N (which is step N-1 in DOM
   order). Uses `inset-inline-start` so it auto-flips in RTL: in LTR it
   anchors on step N's left (toward step N-1 on the left); in RTL it anchors
   on step N's right (toward step N-1 on the right, because the RTL grid
   reverses visual order). NO separate RTL override needed — the previous
   override placed it on step N's LEFT in RTL, which is the gap toward step
   N+1, shifting every connector one slot the wrong way and dropping the
   first-to-second connector entirely. */
.stepper .stp:not(:first-child)::after{content:"";position:absolute;top:21px;inset-inline-start:calc(-50% + 21px);width:calc(100% - 42px);height:2px;background:var(--border-strong);z-index:0}
.stepper .stp.done::after,.stepper .stp.current::after{background:var(--st-success)}
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm), var(--inset-light);overflow:hidden;margin-bottom:var(--sp-6)}
.table-wrap header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.table-wrap header h3{font-size:15px}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:12px 18px;text-align:start;font-size:12.5px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table th{color:var(--muted);font-weight:500;background:var(--bg-2)}
.data-table tr.clickable{cursor:pointer}
.data-table tr.clickable:hover td{background:var(--primary-soft)}
.req-id{font-family:"Courier New",monospace;color:var(--primary);font-weight:600}
.progress{position:relative;height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden;min-width:90px}
.progress>i{position:absolute;top:0;bottom:0;inset-inline-start:0;background:var(--primary);border-radius:999px}
.sla-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600}
.sla-pill.ok{background:var(--st-success-soft);color:var(--st-success)}
.sla-pill.warn{background:var(--st-warning-soft);color:var(--st-warning)}
.sla-pill.over{background:var(--st-danger-soft);color:var(--st-danger)}
.status-pill{display:inline-flex;align-items:center;gap:var(--sp-1);padding:3px var(--sp-3);border-radius:var(--r-pill);font-size:var(--type-micro);font-weight:600;border:1px solid;letter-spacing:.01em;transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast) var(--ease-out)}
.status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.status-pill.info   {color:var(--st-info);   border-color:color-mix(in srgb,var(--st-info)    40%,transparent);background:var(--st-info-soft)}
.status-pill.success{color:var(--st-success);border-color:color-mix(in srgb,var(--st-success) 40%,transparent);background:var(--st-success-soft)}
.status-pill.danger {color:var(--st-danger); border-color:color-mix(in srgb,var(--st-danger)  40%,transparent);background:var(--st-danger-soft)}
.status-pill.warning{color:var(--st-warning);border-color:color-mix(in srgb,var(--st-warning) 40%,transparent);background:var(--st-warning-soft)}
.status-pill.neutral{color:var(--ink-2);border-color:var(--border-strong);background:var(--bg-2)}
.status-pill.neutral::before{background:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-md);
  font-size:var(--type-body);
  font-weight:600;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
  box-shadow:var(--shadow-sm), var(--inset-light);
  transition:transform var(--dur-fast) var(--ease-spring),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
  position:relative;
  white-space:nowrap;
}
.btn:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-md), var(--inset-light)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none !important;box-shadow:var(--shadow-sm) !important}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{background:var(--surface);border-color:var(--border-strong);color:var(--ink)}
.btn.primary{
  background:var(--primary);
  color:var(--brand-dark);
  border-color:var(--primary);
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 35%,transparent), var(--inset-light);
}
:root[data-theme="light"] .btn.primary{color:#FFFFFF}
.btn.primary:hover{
  background:var(--primary-hi);
  border-color:var(--primary-hi);
  color:var(--brand-dark);
  box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 45%,transparent), var(--inset-light);
}
:root[data-theme="light"] .btn.primary:hover{color:#FFFFFF}
.btn .ic{width:16px;height:16px}
.btn.success{background:var(--st-success-soft);color:var(--st-success);border-color:rgba(93,191,133,0.4)}
.btn.danger{background:var(--st-danger-soft);color:var(--st-danger);border-color:rgba(224,122,122,0.4)}
.btn.warning{background:var(--st-warning-soft);color:var(--st-warning);border-color:rgba(229,179,128,0.4)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--border-strong)}
.btn.sm{padding:6px 12px;font-size:12px}
.form-grid{display:grid;gap:16px}
.form-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.form-field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:500}
.form-field label .req{color:var(--st-danger)}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:11px 14px;border-radius:10px;background:var(--bg-2);color:var(--ink);border:1px solid var(--border-strong);font-size:13px;transition:.15s}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:var(--focus-ring)}
.form-field textarea{min-height:110px;resize:vertical;line-height:1.6}
.form-field .hint{font-size:11px;color:var(--muted);margin-top:5px}
.form-field .err{font-size:11.5px;color:var(--st-danger);margin-top:5px;display:none}
.form-field[data-invalid="true"] input,.form-field[data-invalid="true"] textarea,.form-field[data-invalid="true"] select{border-color:var(--st-danger)}
.form-field[data-invalid="true"] .err{display:block}
.session-info-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:var(--primary-soft);border:1px solid rgba(202,184,165,0.3);color:var(--ink);font-size:12.5px;margin-bottom:14px}
.session-info-pill .lbl{color:var(--muted);font-size:11.5px}
.session-info-pill strong{color:var(--primary)}
.checkbox-row{display:flex;align-items:flex-start;gap:8px;padding:8px 0}
.checkbox-row input{width:18px;height:18px;margin-top:2px;accent-color:var(--primary)}
.checkbox-row label{font-size:13px;color:var(--ink);line-height:1.5}
.radio-group{display:grid;gap:8px}
.radio-group[aria-disabled="true"]{opacity:.7;pointer-events:none}
.radio-row{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--bg-2);cursor:pointer;transition:.15s}
.radio-row:hover{border-color:var(--primary);background:var(--surface)}
.radio-row input{width:18px;height:18px;margin-top:2px;accent-color:var(--primary)}
.radio-row label{font-size:13px;color:var(--ink);line-height:1.5;cursor:pointer;flex:1}
.radio-row.selected{border-color:var(--primary);background:var(--primary-soft)}
.locked-banner{margin-top:10px;padding:8px 12px;background:var(--st-danger-soft);border:1px solid rgba(224,122,122,0.4);color:var(--st-danger);font-size:11.5px;border-radius:8px;display:none}
.radio-group[aria-disabled="true"] + .locked-banner{display:block}
/* Locked disclosure — collapse to just the recorded choice as a static chip:
   hide the unchosen option (and any unselected conflict-type rows). */
#hasConflictGroup[aria-disabled="true"] .radio-row{cursor:default}
#hasConflictGroup[aria-disabled="true"] .radio-row:not(.selected){display:none}
#hasConflictGroup[aria-disabled="true"] .radio-row.selected{border-color:var(--primary);background:var(--primary-soft)}
#conflictTypes[aria-disabled="true"] .radio-row{cursor:default}
#conflictTypes[aria-disabled="true"] .radio-row:not(.selected){display:none}
#conflictTypes[aria-disabled="true"] .radio-row.selected{border-color:var(--st-warning);background:var(--st-warning-soft,rgba(220,170,90,.12))}

/* Disclosure pre-submission row: appears under the Yes/No radios while the
   user's pick is still tentative. Lets them flip the answer freely or
   confirm-lock it via "Submit disclosure". */
.disclose-submit-row{margin-top:12px;padding:10px 12px;background:var(--primary-soft);border:1px dashed var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.disclose-submit-row .dsr-hint{font-size:11.5px;color:var(--ink-2);line-height:1.5}
.disclose-submit-row .dsr-actions{display:flex;gap:8px;align-items:center}
.disclose-submit-row .btn{padding:6px 12px !important;font-size:12px !important}
.autosave-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--st-success);padding:4px 10px;border-radius:999px;background:var(--st-success-soft);border:1px solid rgba(93,191,133,0.3)}
.autosave-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--st-success);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.screen{display:none}
.screen.active{display:block;animation:fadeUp var(--dur-slow) var(--ease-out)}
/* Direction-aware page transitions — forward = enter from the inline-end
   side (which auto-flips for RTL via the keyframes), back = from inline-start.
   `data-nav-dir="forward|back"` is applied to .main by navigate() before
   class-swapping the active screen. */
.main[data-nav-dir="forward"] .screen.active{animation:pageInForward var(--dur-slow) var(--ease-out-quart)}
.main[data-nav-dir="back"]    .screen.active{animation:pageInBack    var(--dur-slow) var(--ease-out-quart)}
@keyframes pageInForward{from{opacity:0;transform:translate3d(20px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes pageInBack   {from{opacity:0;transform:translate3d(-20px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
[dir="rtl"] .main[data-nav-dir="forward"] .screen.active{animation-name:pageInForwardRtl}
[dir="rtl"] .main[data-nav-dir="back"]    .screen.active{animation-name:pageInBackRtl}
@keyframes pageInForwardRtl{from{opacity:0;transform:translate3d(-20px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes pageInBackRtl   {from{opacity:0;transform:translate3d(20px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.login-screen{
  min-height:100vh;
  min-height:100dvh;
  display:none;place-items:center;
  background:var(--bg);
  padding:var(--sp-6);
  position:relative;
  overflow:hidden;
}
.login-screen.active{display:grid}
.login-box{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-lg), var(--inset-light);padding:var(--sp-10) var(--sp-8);text-align:center;animation:scaleIn var(--dur-slow) var(--ease-spring)}
.login-box img.logo{height:96px;width:auto;object-fit:contain;max-width:260px;margin-bottom:var(--sp-5);animation:fadeUp var(--dur-slower) var(--ease-out)}
.login-box h1{font-size:var(--type-h1);margin-bottom:var(--sp-2);animation:fadeUp var(--dur-slower) var(--ease-out) 60ms backwards}
.login-box p.sub{color:var(--muted);font-size:var(--type-caption);margin-bottom:var(--sp-8);letter-spacing:.01em;animation:fadeUp var(--dur-slower) var(--ease-out) 120ms backwards}
.login-box form{animation:fadeUp var(--dur-slower) var(--ease-out) 180ms backwards}
.login-box .form-field{text-align:start}
.login-box .form-field+.form-field{margin-top:14px}
.login-actions{margin-top:18px}
.otp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp-grid input{text-align:center;font-size:18px;font-weight:700;padding:12px 6px;font-family:"Courier New",monospace;caret-color:var(--primary);transition:border-color .15s,box-shadow .15s,background-color .15s}
.otp-grid input:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:var(--focus-ring)}
.login-box .help{font-size:11px;color:var(--muted);margin-top:18px;line-height:1.6}
.login-box .help a{color:var(--ink-2);text-decoration:underline}
.preview-grid{display:grid;gap:16px;grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.preview-col h4{font-size:13px;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.preview-col h4 .pill{font-size:10.5px;padding:2px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--border-strong);color:var(--ink-2)}
.field-row{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border);margin-bottom:8px}
.field-row.needs-review{border-color:var(--st-warning);background:var(--st-warning-soft)}
.field-row .body{flex:1}
.field-row .lbl{font-size:11px;color:var(--muted);margin-bottom:3px}
.field-row .val{font-size:13px;color:var(--ink);line-height:1.55}
.field-row .actions{display:flex;gap:4px}
.field-row .conf{display:inline-block;font-size:10px;padding:2px 7px;border-radius:6px;font-weight:600}
.conf.high{background:var(--st-success-soft);color:var(--st-success)}
.conf.medium{background:var(--st-warning-soft);color:var(--st-warning)}
.conf.low{background:var(--st-danger-soft);color:var(--st-danger)}
.citation{font-size:11px;color:var(--role-ai);background:var(--role-ai-soft);padding:2px 7px;border-radius:6px;border:1px solid rgba(195,160,245,0.3)}
.confirmed-toggle{margin-top:6px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:10px;background:var(--bg-2);border:1px dashed var(--border-strong);cursor:pointer;font-size:12px;color:var(--ink-2);width:100%}
.confirmed-toggle .count{font-size:11px;color:var(--muted)}
.alert-banner{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-md);
  margin-bottom:var(--sp-4);
  border:1px solid;
  animation:slideDown var(--dur-base) var(--ease-out);
}
.alert-banner.warning{background:var(--st-warning-soft);border-color:color-mix(in srgb,var(--st-warning) 35%,transparent)}
.alert-banner.info   {background:var(--st-info-soft);   border-color:color-mix(in srgb,var(--st-info)    35%,transparent)}
.alert-banner.success{background:var(--st-success-soft);border-color:color-mix(in srgb,var(--st-success) 35%,transparent)}
.alert-banner.danger {background:var(--st-danger-soft); border-color:color-mix(in srgb,var(--st-danger)  35%,transparent)}
.alert-banner .ico{
  width:32px;height:32px;
  flex-shrink:0;
  border-radius:var(--r-md);
  display:grid;place-items:center;
  font-size:0; /* tame stray text glyphs */
}
.alert-banner .ico .ic{width:18px;height:18px;stroke-width:1.75}
.alert-banner.warning .ico{background:color-mix(in srgb,var(--st-warning) 22%,transparent);color:var(--st-warning)}
.alert-banner.info    .ico{background:color-mix(in srgb,var(--st-info)    22%,transparent);color:var(--st-info)}
.alert-banner.success .ico{background:color-mix(in srgb,var(--st-success) 22%,transparent);color:var(--st-success)}
.alert-banner.danger  .ico{background:color-mix(in srgb,var(--st-danger)  22%,transparent);color:var(--st-danger)}
.alert-banner h4{font-size:var(--type-h3);margin-bottom:var(--sp-1)}
.alert-banner.warning h4{color:var(--st-warning)}
.alert-banner.info    h4{color:var(--st-info)}
.alert-banner.success h4{color:var(--st-success)}
.alert-banner.danger  h4{color:var(--st-danger)}
.alert-banner p{font-size:var(--type-caption);color:var(--ink-2);line-height:1.7}
.alert-banner .alert-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap}
.vote-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.vote-grid.four{grid-template-columns:repeat(4,1fr)}
.vote-grid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:780px){ .vote-grid.four{grid-template-columns:repeat(2,1fr)} .vote-grid.two{grid-template-columns:1fr} }
.vote-btn{
  padding:var(--sp-6) var(--sp-4);
  border-radius:var(--r-lg);
  cursor:pointer;
  border:1.5px solid var(--border-strong);
  background:var(--surface);
  text-align:center;
  transition:transform var(--dur-fast) var(--ease-spring),
             border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
  color:var(--ink);
  font-family:inherit;
  width:100%;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm), var(--inset-light);
}
.vote-btn .ico{
  display:inline-grid;place-items:center;
  width:48px;height:48px;
  margin:0 auto var(--sp-2);
  border-radius:50%;
  background:var(--bg-2);
  color:var(--muted);
  font-size:0;
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring);
}
.vote-btn .ico .ic{width:24px;height:24px;stroke-width:1.75}
.vote-btn .lbl{font-weight:600;font-size:var(--type-body);display:block}
.vote-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md), var(--inset-light)}
.vote-btn:hover .ico{transform:scale(1.08)}
.vote-btn:active{transform:translateY(-1px)}
.vote-btn[data-vote="yes"]:hover,.vote-btn[data-vote="yes"].selected{border-color:var(--st-success);color:var(--st-success);background:var(--st-success-soft)}
.vote-btn[data-vote="no"]:hover,.vote-btn[data-vote="no"].selected{border-color:var(--st-danger);color:var(--st-danger);background:var(--st-danger-soft)}
.vote-btn[data-vote="modify"]:hover,.vote-btn[data-vote="modify"].selected{border-color:var(--role-ai);color:var(--role-ai);background:var(--role-ai-soft)}
.vote-btn[data-vote="abstain"]:hover,.vote-btn[data-vote="abstain"].selected{border-color:var(--st-warning);color:var(--st-warning);background:var(--st-warning-soft)}
.vote-btn.selected{border-width:2.5px;animation:voteLock var(--dur-slower) var(--ease-spring)}
.vote-btn.selected .ico{transform:scale(1.15)}
.vote-btn .ico::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:currentColor;opacity:0;
  transform:scale(0.4);
  transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-base) var(--ease-out);
  pointer-events:none;
}
.vote-btn.selected .ico::after{animation:votePulse 700ms var(--ease-out) 1}
@keyframes voteLock{
  0%   {transform:translateY(0) scale(1)}
  35%  {transform:translateY(-6px) scale(1.02)}
  100% {transform:translateY(-3px) scale(1)}
}
@keyframes votePulse{
  0%   {transform:scale(0.4);opacity:0.5}
  100% {transform:scale(2);opacity:0}
}
/* ===== C10 — committee verdict buttons: neutral until explicitly chosen =====
   Previously these used .btn success/danger/warning so "Approve" looked
   pre-selected (green) by default. They are now neutral (ghost) and only take
   their semantic colour on hover or when the member explicitly selects them. */
.cmte-actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
/* The verdict controls are gated behind the "reviewed full form" + COI=no flow
   via the [hidden] attribute. The .cmte-actions-grid{display:grid} rule would
   otherwise override [hidden]'s display:none — so restore it explicitly. */
.cmte-actions-grid[hidden]{display:none}
@media (max-width:780px){ .cmte-actions-grid{grid-template-columns:1fr} }
.cmte-action-btn{border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink);transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.cmte-action-btn.cmte-approve:hover,.cmte-action-btn.cmte-approve.is-selected{border-color:var(--st-success);color:var(--st-success);background:var(--st-success-soft)}
.cmte-action-btn.cmte-reject:hover,.cmte-action-btn.cmte-reject.is-selected{border-color:var(--st-danger);color:var(--st-danger);background:var(--st-danger-soft)}
.cmte-action-btn.cmte-changes:hover,.cmte-action-btn.cmte-changes.is-selected{border-color:var(--st-warning);color:var(--st-warning);background:var(--st-warning-soft)}
.cmte-action-btn.is-selected{border-width:2.5px}
/* C6 — committee "card reviewed" gate */
.cmte-review-gate{margin:10px 0 14px;display:flex;justify-content:flex-start}
.cmte-review-gate .crg-done{color:var(--st-success);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px}
/* C4 — concerned-companies chips + C1 category dropdown */
.oi-chips{display:flex;flex-wrap:wrap;gap:6px}
.concerned-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ms-chip{border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:all var(--dur-fast) var(--ease-out)}
.ms-chip:hover{border-color:var(--primary);color:var(--ink)}
.ms-chip.is-selected{border-color:var(--primary);background:var(--primary-soft,rgba(54,57,64,.08));color:var(--primary);font-weight:600}
select.dec-cat-edit{font:inherit;border:1.5px solid var(--border-strong);border-radius:var(--r-md,8px);padding:4px 10px;background:var(--surface);color:var(--ink);max-width:100%}
.dec-empty-inline{color:var(--muted);font-size:12.5px}
.sup-window-field .sup-window-row{display:flex;align-items:center;gap:8px}
.sup-window-field input[type="number"]{width:110px;text-align:center}
.sup-window-unit{color:var(--ink);font-size:13px;font-family:inherit;padding:8px 10px;border-radius:8px;background:var(--bg-2);border:1px solid var(--border-strong);cursor:pointer;min-height:38px}
.sup-window-unit:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
.sup-window-unit:disabled{opacity:.5;cursor:not-allowed}
.sup-window-field input[data-invalid="true"]{border-color:var(--st-danger)}

/* ===== C5 — detailed live status (committee + board breakdown) ===== */
.detail-block-title{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;color:var(--ink);margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--border)}
.detail-block-title:first-child{border-top:none;padding-top:0;margin-top:4px}
.detail-note{font-size:12.5px;color:var(--ink-2);margin:6px 0;line-height:1.7;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.detail-note.muted{color:var(--muted)}
.detail-vcard{border:1px solid var(--border);border-radius:var(--r-md,8px);padding:10px 12px;margin:8px 0;background:var(--bg-2)}
.detail-vcard .dvc-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.detail-vcard .dvc-meta{font-size:11.5px;color:var(--ink-2);margin-top:4px}
.detail-vcard .dvc-note{font-size:12.5px;color:var(--ink);margin-top:8px;white-space:pre-wrap;line-height:1.6}
.detail-vcard .dvc-signed{font-size:11.5px;color:var(--ink-2);margin-top:8px}
.detail-vcard .dvc-coi{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--st-danger);margin-top:6px}
.detail-bmembers{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.detail-bmember{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md,8px);background:var(--surface)}
.detail-bmember .dbm-name{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.detail-bmember .dbm-chair{font-size:10px;font-weight:700;color:var(--primary);border:1px solid var(--primary);border-radius:4px;padding:1px 5px}
.detail-bmember .dbm-right{text-align:end}
.detail-bmember .dbm-status{font-size:12px;display:inline-flex;align-items:center;gap:5px}
.detail-bmember .dbm-status.cast{color:var(--st-success)}
.detail-bmember .dbm-status.pending{color:var(--muted)}
.detail-bmember .dbm-status.excluded{color:var(--st-danger)}
.detail-bmember .dbm-note{font-size:11.5px;color:var(--ink-2);margin-top:4px;white-space:pre-wrap;line-height:1.6;max-width:240px}
.detail-outstanding{margin-top:16px;padding:10px 12px;border-radius:var(--r-md,8px);background:var(--st-warning-soft);color:var(--ink);font-size:12.5px;display:flex;align-items:center;gap:7px}

/* Ripple-style click feedback for any clickable surface that opts in */
.has-ripple{position:relative;overflow:hidden;isolation:isolate}
.has-ripple::after{
  content:"";position:absolute;
  inset-block-start:var(--ripple-y,50%);
  inset-inline-start:var(--ripple-x,50%);
  width:0;height:0;
  border-radius:50%;
  background:currentColor;
  opacity:0;
  transform:translate(-50%,-50%);
  pointer-events:none;
  transition:width var(--dur-slow) var(--ease-out),height var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out);
}
.has-ripple.is-rippling::after{width:220%;height:220%;opacity:0.15;transition:width var(--dur-slower) var(--ease-out),height var(--dur-slower) var(--ease-out),opacity var(--dur-slower) var(--ease-out)}

/* ==========================================================
   Decision form (three-template renderer)
   ========================================================== */
.dec-form{display:flex;flex-direction:column;gap:14px}
.dec-header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.dec-cat{font-size:12px;color:var(--muted);padding:4px 10px;border-radius:999px;background:var(--bg-2);border:1px solid var(--border)}
.dec-rec-pill{font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px}
.dec-rec-pill.rec-approve{background:var(--st-success-soft);color:var(--st-success);border:1px solid rgba(var(--st-success-rgb,128,176,138),0.4)}
.dec-rec-pill.rec-reject{background:var(--st-danger-soft);color:var(--st-danger)}
.dec-rec-pill.rec-modify{background:var(--role-ai-soft);color:var(--role-ai)}

/* Request particulars — user-entered wizard facts, read-only on review surfaces */
.req-particulars{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-2);padding:14px 16px}
.req-particulars .rp-title{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-transform:none;margin-bottom:12px}
.req-particulars .rp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.req-particulars .rp-item{min-width:0}
.req-particulars .rp-lbl{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.req-particulars .rp-lbl .ic-sm{width:14px;height:14px;flex:none;opacity:.8}
.req-particulars .rp-val{font-size:13.5px;color:var(--ink);line-height:1.55;word-break:break-word}
.req-particulars .rp-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.req-particulars .num-latn{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
@media (max-width:640px){.req-particulars .rp-grid{grid-template-columns:1fr}}

.dec-rec-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.dec-rec-toggle .opt{padding:16px 12px;border-radius:14px;border:2px solid var(--border-strong);background:var(--surface);cursor:pointer;text-align:center;color:var(--ink);font-family:inherit;transition:.15s}
.dec-rec-toggle .opt:hover{transform:translateY(-1px)}
.dec-rec-toggle .opt .ico{font-size:22px;display:block;margin-bottom:4px}
.dec-rec-toggle .opt .lbl{font-weight:600;font-size:13.5px}
.dec-rec-toggle .opt[aria-pressed="true"]{border-width:3px}
.dec-rec-toggle .opt-approve[aria-pressed="true"]{border-color:var(--st-success);background:var(--st-success-soft);color:var(--st-success)}
.dec-rec-toggle .opt-reject[aria-pressed="true"]{border-color:var(--st-danger);background:var(--st-danger-soft);color:var(--st-danger)}
.dec-rec-toggle .opt-modify[aria-pressed="true"]{border-color:var(--role-ai);background:var(--role-ai-soft);color:var(--role-ai)}

.dec-section{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-2)}
.dec-section h3{font-size:14px;color:var(--ink-2);margin-bottom:10px;font-weight:600}
/* Collapsible (accordion) sections of the read-only decision form — press the
   header to slide a section open/closed; matches the Master-Data panel model. */
.dec-acc{border:1px solid var(--border);border-radius:12px;background:var(--bg-2);overflow:hidden}
.dec-acc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer;user-select:none}
.dec-acc-head:hover .dec-acc-title{color:var(--primary)}
.dec-acc-title{font-size:14px;color:var(--ink-2);font-weight:600;margin:0}
.dec-acc-chev{display:inline-grid;place-items:center;color:var(--muted);flex:none;transition:transform var(--dur-base,.25s) var(--ease-out,ease)}
.dec-acc:not(.is-collapsed) .dec-acc-chev{transform:rotate(-90deg)}
.dec-acc-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-base,.28s) var(--ease-out,ease)}
.dec-acc.is-collapsed .dec-acc-wrap{grid-template-rows:0fr}
.dec-acc-body{overflow:hidden;min-height:0}
.dec-acc-body>*{margin:0 14px 14px}
.dec-acc-body>.dec-row{margin:0 14px 14px}
/* The particulars block carries its own card chrome; flatten it inside a panel. */
.dec-acc-body .req-particulars{border:none;background:none;padding:0}
.dec-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:880px){ .dec-row{grid-template-columns:1fr} }
.dec-field{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);min-height:64px}
.dec-field h4{color:var(--muted);font-size:11.5px;font-weight:500;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.dec-val{display:block;font-size:13.5px;line-height:1.7;color:var(--ink);word-break:break-word}
.dec-edit{display:block;font-size:13.5px;line-height:1.7;color:var(--ink);padding:8px 10px;border-radius:8px;background:var(--bg-2);border:1px dashed var(--border-strong);min-height:34px;outline:none;cursor:text;word-break:break-word}
.dec-edit:hover{border-style:solid}
.dec-edit:focus{border-style:solid;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft);background:var(--surface)}
select.dec-edit{cursor:pointer;font-family:inherit}

/* Decision tables can be wide (risks = 5 cols, alternatives = 9). Wrap in a
   horizontal-scroll container with a content-driven min-width so columns never
   crush and Arabic stops breaking mid-word; on wide screens the table fills. */
.dec-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px;border:1px solid var(--border);border-radius:10px}
.dec-table-wrap::-webkit-scrollbar{height:8px}
.dec-table-wrap::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
.dec-table{width:100%;min-width:max-content;border-collapse:collapse;margin-top:0;font-size:12.5px}
.dec-table th,.dec-table td{padding:9px 12px;text-align:start;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.65;max-width:300px;overflow-wrap:break-word;word-break:normal}
.dec-table thead th{color:var(--muted);font-weight:500;background:var(--surface);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.dec-table tbody tr:hover{background:var(--primary-soft)}
.dec-table .lvl{display:inline-block;padding:2px 10px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap}
.dec-table .lvl.high{background:var(--st-danger-soft);color:var(--st-danger)}
.dec-table .lvl.medium{background:var(--st-warning-soft);color:var(--st-warning)}
.dec-table .lvl.low{background:var(--st-info-soft);color:var(--st-info)}
.dec-table .dec-edit{min-height:28px;padding:5px 8px;font-size:12.5px}

.dec-cmp{width:100%;border-collapse:collapse;font-size:12.5px}
.dec-cmp th,.dec-cmp td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:start;vertical-align:middle}
.dec-cmp thead th{color:var(--muted);font-weight:500;background:var(--surface);text-transform:uppercase;font-size:11.5px;letter-spacing:.04em}
.dec-cmp tbody th{color:var(--ink-2);font-weight:600;background:var(--bg-2);width:160px}
.dec-cmp .approve-col{background:rgba(120,170,135,0.08)}
.dec-cmp .reject-col{background:rgba(224,122,122,0.08)}
.dec-cmp .dec-edit{min-height:28px;padding:5px 8px;font-size:12.5px}

.dec-bullets{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.dec-bullets li{position:relative;padding-inline-start:18px;font-size:13px;line-height:1.7;color:var(--ink)}
.dec-bullets li::before{content:"•";position:absolute;inset-inline-start:0;top:0;color:var(--primary);font-weight:700}

/* Grounding-rule annotations: each cell that's expected to be sourced or
   manually filled shows a small pill BELOW the value. Citation = green
   ("extracted from user text"); needsfill = amber ("initiator must fill"). */
.dec-cell-with-src{display:flex;flex-direction:column;gap:4px}
.dec-citation{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--st-success);background:var(--st-success-soft);border:1px solid rgba(120,170,135,0.4);padding:2px 8px;border-radius:999px;align-self:flex-start;cursor:help;font-weight:500}
.dec-citation.is-estimate{color:var(--st-info);background:var(--st-info-soft,rgba(120,160,210,.13));border-color:color-mix(in srgb,var(--st-info) 45%,transparent)}
.dec-needsfill{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--st-warning);background:var(--st-warning-soft);border:1px dashed var(--st-warning);padding:2px 8px;border-radius:999px;align-self:flex-start;font-weight:500}
.dec-needsfill::before{content:"✎ "}

/* ==========================================================
   Pre-flight bilingual rejection banner + mirror panels + suggestion modal
   ========================================================== */
.bilingual-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
@media (max-width:720px){ .bilingual-grid{grid-template-columns:1fr} }
.bilingual-grid .bg-col{padding:12px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px}
.bilingual-grid .bg-lang{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.bilingual-grid p{font-size:12.5px;line-height:1.75;color:var(--ink);margin:0}

.mirror-panel{margin-top:10px;background:var(--bg-2);border:1px dashed var(--border);border-radius:10px;padding:0}
.mirror-panel summary{cursor:pointer;padding:8px 12px;font-size:11.5px;color:var(--muted);font-weight:500;list-style:none;user-select:none}
.mirror-panel summary::-webkit-details-marker{display:none}
.mirror-panel summary::before{content:"▸ ";color:var(--primary);transition:.15s}
.mirror-panel[open] summary::before{content:"▾ "}
.mirror-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-top:1px solid var(--border)}
@media (max-width:720px){ .mirror-grid{grid-template-columns:1fr} }
.mirror-grid .mirror-cell{padding:10px 12px;background:var(--bg-2)}
.mirror-grid .mirror-lbl{font-size:9.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.mirror-grid p{font-size:12px;line-height:1.7;color:var(--ink-2);margin:0;white-space:pre-wrap;word-break:break-word}

/* .modal.suggestion-modal — higher specificity than the base .modal (480px)
   which is defined later in the file, so the wide multi-card width wins. */
.modal.suggestion-modal{max-width:1240px;width:94vw}
.suggestion-modal .suggestion-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;align-items:stretch}
@media (max-width:880px){ .suggestion-modal .suggestion-cards-grid{grid-template-columns:1fr} }
/* One tappable card per option — scannable, single CTA (ui-ux-pro-max:
   progressive-disclosure + primary-action). Whole card is a <button>. */
.sg-card{
  position:relative;text-align:start;font-family:inherit;cursor:pointer;width:100%;
  padding:16px 16px 14px;border:1.5px solid var(--border-strong);border-radius:14px;
  background:var(--surface);color:var(--ink);
  display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow-sm), var(--inset-light);
  transition:transform var(--dur-base) var(--ease-spring),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.sg-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:var(--shadow-md), var(--inset-light)}
.sg-card:active{transform:translateY(-1px) scale(.99)}
.sg-card:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
.sg-card.is-rec{border-color:var(--primary)}
.sg-ribbon{position:absolute;top:0;inset-inline-end:14px;transform:translateY(-50%);font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:var(--r-pill);background:var(--primary);color:var(--brand-dark)}
:root[data-theme="light"] .sg-ribbon{color:#fff}
.sg-head{display:flex;align-items:center;gap:10px}
.sg-num{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.sg-headtext{display:flex;flex-direction:column;min-width:0;flex:1}
.sg-level{font-size:15px;font-weight:700;color:var(--ink);line-height:1.2}
.sg-sublevel{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:1px}
.sg-dots{display:flex;gap:4px;align-items:center;flex-shrink:0}
.sg-dot{width:6px;height:6px;border-radius:50%;background:var(--border-strong)}
.sg-dot.on{background:var(--primary)}
.sg-block{display:flex;flex-direction:column;gap:4px}
.sg-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;display:flex;align-items:center;gap:6px}
.sg-count{font-size:9.5px;padding:1px 7px;border-radius:var(--r-pill);background:var(--bg-2);color:var(--ink-2);border:1px solid var(--border);letter-spacing:0;text-transform:none;font-weight:600}
.sg-desc{font-size:13.5px;line-height:1.7;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sg-just-wrap{flex:1}
.sg-just{font-size:12px;line-height:1.65;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sg-choose{margin-top:6px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:9px 12px;border-radius:var(--r-md);background:var(--primary-soft);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);font-size:12.5px;font-weight:700;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.sg-card:hover .sg-choose,.sg-card:focus-visible .sg-choose{background:var(--primary);color:var(--brand-dark)}
:root[data-theme="light"] .sg-card:hover .sg-choose,:root[data-theme="light"] .sg-card:focus-visible .sg-choose{color:#fff}
.suggestion-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap}
/* Mobile: cards stack full-width (grid → 1fr at 880px), text scales up for
   readability, the per-card CTA + footer buttons get thumb-friendly heights.
   On phones we lift the line-clamp a bit since there's vertical room. */
@media (max-width:560px){
  .modal-overlay{padding:8px}
  .modal.suggestion-modal{width:100%;max-width:100%;border-radius:14px}
  .suggestion-modal .modal-head{padding:14px 14px 10px}
  .suggestion-modal .modal-head h3{font-size:15px}
  .suggestion-modal .modal-body{padding:12px 14px 16px}
  .suggestion-modal .suggestion-cards-grid{gap:12px;margin-bottom:14px}
  .sg-card{padding:14px}
  .sg-level{font-size:16px}
  .sg-desc{font-size:15px;line-height:1.65;-webkit-line-clamp:4}
  .sg-just{font-size:13px;-webkit-line-clamp:3}
  .sg-choose{min-height:46px;font-size:14px}
  .suggestion-footer{padding-top:10px;gap:8px}
  .suggestion-footer .btn{flex:1 1 100%;min-height:46px;font-size:14px}
}
/* Rejection-banner rewrite button sizing — make the primary CTA prominent on
   mobile without breaking the row layout next to the "تجاهل" ghost button. */
@media (max-width:560px){
  #qualityAlert .alert-actions{display:flex;gap:8px;flex-wrap:wrap}
  #qualityAlert .alert-actions .btn{flex:1 1 auto;min-height:40px;font-size:12.5px}
  #qualityAlert .alert-actions [data-role="pick-rewrite"]{flex:1 1 100%;order:-1}
}

/* ==========================================================
   Market research context — read-only sources on the decision card
   ========================================================== */
.dec-research{margin-top:18px;padding:16px 18px;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--role-ai-soft)}
.dec-research-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:13px;font-weight:700;color:var(--role-ai)}
.dec-research-head .ic{color:var(--role-ai)}
.rsrc-flag{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:var(--r-pill);background:var(--st-warning-soft);color:var(--st-warning);border:1px solid var(--st-warning)}
.rsrc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rsrc-item{padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.rsrc-top{display:flex;align-items:flex-start;gap:8px}
.rsrc-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.5}
.rsrc-meta{font-size:11px;color:var(--muted);margin-top:3px}
.rsrc-snip{font-size:12px;color:var(--ink-2);line-height:1.7;margin:6px 0 0}

/* ==========================================================
   Acceptable options — 3 selectable cards
   ========================================================== */
.dec-options-section{border:1px solid var(--primary);background:var(--primary-soft)}
.dec-options-section h3{color:var(--ink);margin-bottom:6px}
.dec-options-section .ao-hint{font-size:12px;color:var(--ink-2);margin-bottom:14px;line-height:1.7}
.ao-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ao-card{padding:14px 16px;border:1.5px solid var(--border-strong);border-radius:12px;background:var(--surface);transition:.18s;display:flex;flex-direction:column;gap:10px;position:relative}
.ao-card.is-selectable{cursor:pointer;user-select:none}
.ao-card.is-selectable:hover{transform:translateY(-2px);border-color:var(--primary)}
.ao-card.is-selectable:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ao-card.is-selected{border-color:var(--primary);background:var(--primary-soft);border-width:2.5px;padding:12.5px 14.5px}
.ao-card.is-selected::after{content:"";position:absolute;inset-block-start:-1px;inset-inline-end:14px;width:34px;height:6px;background:var(--primary);border-radius:0 0 4px 4px}
.ao-card-head{display:flex;align-items:flex-start;gap:10px}
.ao-card-head .ao-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);font-size:12px;color:var(--muted);flex-shrink:0;line-height:1;margin-top:2px}
.ao-card.is-selected .ao-card-head .ao-mark{background:var(--primary);border-color:var(--primary);color:#fff}
.ao-card-title{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.ao-card-title h5{font-size:14px;font-weight:700;color:var(--ink);margin:0;line-height:1.4}
.ao-ai-badge{align-self:flex-start;font-size:10px;padding:2px 8px;border-radius:999px;background:var(--role-ai-soft);color:var(--role-ai);border:1px solid var(--role-ai);font-weight:700;letter-spacing:.03em;white-space:nowrap}
.ao-desc{font-size:12.5px;color:var(--ink-2);line-height:1.7;margin:0}
.ao-signals{display:flex;gap:8px;flex-wrap:wrap}
.ao-sig{font-size:10.5px;padding:3px 10px;border-radius:999px;background:var(--bg-2);color:var(--muted);border:1px solid var(--border);display:inline-flex;align-items:center;gap:5px}
.ao-sig-cost.ao-sig-lower,.ao-sig-speed.ao-sig-faster{background:var(--st-success-soft);color:var(--st-success);border-color:var(--st-success-soft)}
.ao-sig-cost.ao-sig-higher,.ao-sig-speed.ao-sig-slower{background:var(--st-warning-soft);color:var(--st-warning);border-color:var(--st-warning-soft)}
.ao-list{display:flex;flex-direction:column;gap:4px}
.ao-list-head{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.ao-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}
.ao-list li{font-size:12px;line-height:1.6;color:var(--ink);padding-inline-start:14px;position:relative}
.ao-list li::before{content:"+";position:absolute;inset-inline-start:0;color:var(--st-success);font-weight:700}
.ao-list.cons li::before{content:"−";color:var(--st-warning)}

/* ==========================================================
   New-request form polish — templates + quality checklist
   ========================================================== */
.template-row{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:14px;background:var(--bg-2);border:1px dashed var(--border-strong);border-radius:12px;flex-wrap:wrap}
.template-row-label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);font-weight:500}
.template-row-label .ico{font-size:16px}
.template-row-actions{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.template-row-actions .btn{font-size:12px;padding:6px 12px}

.quality-checklist{padding:12px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;margin-top:-4px}
.quality-checklist .qc-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:500;gap:8px;flex-wrap:wrap}
.quality-checklist .qc-count{font-family:"Courier New",monospace;color:var(--primary);flex-shrink:0}
.quality-checklist ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.quality-checklist li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);transition:.18s}
.quality-checklist li .qc-mark{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-strong);font-size:11px;color:var(--muted);flex-shrink:0;line-height:1}
.quality-checklist li .qc-mark::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--border-strong)}
.quality-checklist li[data-state="ok"]{color:var(--ink)}
.quality-checklist li[data-state="ok"] .qc-mark{background:var(--st-success);border-color:var(--st-success);color:#fff}
.quality-checklist li[data-state="ok"] .qc-mark::before{content:"✓";width:auto;height:auto;background:transparent;font-size:11px;font-weight:700;color:#fff}

/* ==========================================================
   FIX 2: AI job chip — non-blocking, corner-pinned, replaces the
   focus-trapping modal so analysis can run while the user navigates.
   ========================================================== */
.ai-job-chip{
  position:fixed;
  bottom:20px;
  inset-inline-end:20px;
  z-index:350;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  min-width:280px;max-width:380px;
  background:var(--surface-raised);
  border:1.5px solid var(--role-ai);
  border-radius:14px;
  box-shadow:var(--shadow-lg), 0 0 24px color-mix(in srgb, var(--role-ai) 25%, transparent);
  animation:chipIn .25s var(--ease-spring);
}
.ai-job-chip[hidden]{display:none}
.ai-job-chip.is-done{border-color:var(--st-success);box-shadow:var(--shadow-lg), 0 0 24px color-mix(in srgb, var(--st-success) 25%, transparent)}
.ai-job-chip.is-error{border-color:var(--st-danger)}
.ai-job-chip-spinner{
  position:relative;width:28px;height:28px;flex-shrink:0;
  display:inline-grid;place-items:center;
}
.ai-job-chip-spinner .dot{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--role-ai);
  animation:aiOrbit 2s linear infinite;
}
.ai-job-chip-spinner .dot:nth-child(2){animation-delay:-0.66s}
.ai-job-chip-spinner .dot:nth-child(3){animation-delay:-1.33s}
.ai-job-chip.is-done .ai-job-chip-spinner::before{
  content:"✓";display:inline-grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--st-success);color:#fff;font-weight:700;font-size:16px;
}
.ai-job-chip.is-done .ai-job-chip-spinner .dot{display:none}
.ai-job-chip-text{flex:1;min-width:0}
.ai-job-chip-title{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.ai-job-chip-phase{font-size:11.5px;color:var(--ink-2);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-job-chip-meta{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted);margin-top:3px;font-family:"Courier New",monospace}
.ai-job-chip-meta .dot-sep{opacity:.5}
.ai-job-chip-meta strong{color:var(--ink)}
.ai-job-chip-cancel{
  background:transparent;border:none;color:var(--muted);
  font-size:18px;width:24px;height:24px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;flex-shrink:0;
}
.ai-job-chip-cancel:hover{background:var(--bg-2);color:var(--ink)}
@keyframes chipIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:560px){
  .ai-job-chip{bottom:12px;inset-inline-end:12px;inset-inline-start:12px;max-width:none;min-width:0}
}
@media (prefers-reduced-motion: reduce){
  .ai-job-chip{animation:none}
  .ai-job-chip-spinner .dot{animation:none}
}

/* ==========================================================
   Branded confirm/alert modal (replaces native window.confirm).
   Driven by uiConfirm() in app.js. Tone classes (warning / danger /
   info / success) recolor the icon + primary button.
   ========================================================== */
/* Compound selector so this width beats the base .modal{max-width:480px}
   defined later in the file (equal single-class specificity → later wins). */
.modal.ui-confirm-modal{max-width:460px;width:92vw}
.ui-confirm-modal .modal-head h3{font-size:16px;display:flex;align-items:center;gap:10px}
.ui-confirm-ico{
  display:inline-grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary);
  flex-shrink:0;font-size:18px;font-weight:700;
}
.ui-confirm-modal.tone-warning .ui-confirm-ico{background:var(--st-warning-soft);color:var(--st-warning)}
.ui-confirm-modal.tone-danger  .ui-confirm-ico{background:var(--st-danger-soft); color:var(--st-danger)}
.ui-confirm-modal.tone-info    .ui-confirm-ico{background:var(--st-info-soft);   color:var(--st-info)}
.ui-confirm-modal.tone-success .ui-confirm-ico{background:color-mix(in srgb,var(--st-success) 18%,transparent);color:var(--st-success)}
.ui-confirm-modal.tone-warning #uiConfirmOkBtn{background:var(--st-warning);border-color:var(--st-warning);color:#1c1500}
.ui-confirm-modal.tone-danger  #uiConfirmOkBtn{background:var(--st-danger);border-color:var(--st-danger);color:#fff}
.ui-confirm-modal.tone-success #uiConfirmOkBtn{background:var(--st-success);border-color:var(--st-success);color:#fff}
.ui-confirm-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ui-confirm-actions .btn{min-width:108px;min-height:40px}
@media (max-width:480px){
  .ui-confirm-actions{flex-direction:column-reverse}
  .ui-confirm-actions .btn{width:100%;min-width:0}
}
@keyframes aiOrbit{
  0%   {transform:rotate(0deg)   translateX(34px) rotate(0deg)   scale(0.7)}
  50%  {transform:rotate(180deg) translateX(34px) rotate(-180deg) scale(1.0)}
  100% {transform:rotate(360deg) translateX(34px) rotate(-360deg) scale(0.7)}
}
.legal-note{margin-top:10px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--st-danger-soft);border:1px solid color-mix(in srgb,var(--st-danger) 35%,transparent);font-size:var(--type-caption);color:var(--st-danger);line-height:1.7;display:flex;align-items:flex-start;gap:var(--sp-3)}
.quorum-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--st-info-soft);border:1px solid rgba(122,181,230,0.4);color:var(--st-info);font-size:12px;font-weight:600;font-family:"Courier New",monospace}
.tz-note{font-size:10.5px;color:var(--muted);margin-inline-start:6px}
.commitment-strip{margin-top:12px;padding:10px 14px;background:var(--role-ai-soft);border:1px solid rgba(195,160,245,0.3);border-radius:10px;font-size:11.5px;color:var(--role-ai);line-height:1.6;font-family:"Courier New",monospace;word-break:break-all}
.commitment-strip strong{color:var(--ink-2);font-family:inherit}
.timeline{padding:8px 0}
.tl-item{position:relative;padding:14px 18px 14px 56px;margin-bottom:4px}
.tl-item::before{content:"";position:absolute;inset-inline-start:22px;top:30px;bottom:-10px;width:2px;background:var(--border-strong)}
.tl-item:last-child::before{display:none}
.tl-item .tl-dot{position:absolute;inset-inline-start:14px;top:14px;width:18px;height:18px;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong)}
.tl-item.done .tl-dot{background:var(--st-success);border-color:var(--st-success)}
.tl-item.current .tl-dot{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.tl-item .tl-content{background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:12px 14px}
.tl-item .tl-content h5{font-size:13px;margin-bottom:4px}
.tl-item .tl-content .meta{font-size:11px;color:var(--muted)}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.diff-col h5{font-size:12px;color:var(--muted);margin-bottom:8px;text-align:start}
.diff-line{padding:10px 12px;border-radius:8px;background:var(--bg-2);border:1px solid var(--border);margin-bottom:6px;font-size:12.5px;line-height:1.6}
.diff-line .lbl{font-size:10.5px;color:var(--muted);margin-bottom:3px}
.diff-add{background:var(--st-success-soft);border-color:rgba(93,191,133,0.3)}
.diff-del{background:var(--st-danger-soft);border-color:rgba(224,122,122,0.3);text-decoration:line-through;opacity:.85}
.diff-mod{background:var(--st-warning-soft);border-color:rgba(229,179,128,0.3)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.trust-cert{
  padding:var(--sp-5);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm), var(--inset-light);
  transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.trust-cert:hover{transform:translateY(-3px);box-shadow:var(--shadow-md), var(--inset-light);border-color:var(--border-strong)}
.trust-cert h4{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--type-h3);margin-bottom:var(--sp-2)}
.trust-cert h4 .ic{color:var(--primary)}
.trust-cert h4{font-size:14px;margin-bottom:6px}
.trust-cert p{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.trust-cert .meta{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-2);padding-top:10px;border-top:1px dashed var(--border)}
.response-result{padding:18px 20px;border-radius:12px;margin-bottom:16px;border:1px solid;display:flex;align-items:center;gap:14px}
.response-result.success{background:var(--st-success-soft);border-color:rgba(93,191,133,0.4);color:var(--st-success)}
.response-result.danger{background:var(--st-danger-soft);border-color:rgba(224,122,122,0.4);color:var(--st-danger)}
.response-result.warning{background:var(--st-warning-soft);border-color:rgba(229,179,128,0.4);color:var(--st-warning)}
.response-result .ico{font-size:30px}
.response-result h3{margin:0;font-size:16px;color:inherit}
.response-result p{font-size:12px;color:var(--ink-2);margin:2px 0 0}
.fingerprint-block{padding:14px;background:var(--bg-2);border:1px dashed var(--border-strong);border-radius:10px;font-family:"Courier New",monospace;font-size:11.5px;line-height:1.7;color:var(--ink-2);word-break:break-all;margin-top:10px}
.fingerprint-block .label{display:block;font-family:inherit;color:var(--muted);font-size:10.5px;margin-bottom:4px}
.completion-hero{
  padding:var(--sp-12) var(--sp-8);
  text-align:center;
  border-radius:var(--r-2xl);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md), var(--inset-light);
  margin-bottom:var(--sp-5);
  animation:scaleIn var(--dur-slow) var(--ease-spring);
}
.completion-hero .big-ico{
  width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;
  margin:0 auto var(--sp-5);
  position:relative;
  animation:bigIcoPop var(--dur-slower) var(--ease-spring);
  font-size:0;
}
.completion-hero .big-ico .ic{width:48px;height:48px;stroke-width:2.5}
.completion-hero.approved .big-ico{background:var(--st-success-soft);color:var(--st-success);border:3px solid var(--st-success);box-shadow:0 0 0 8px color-mix(in srgb,var(--st-success) 12%,transparent),0 16px 40px color-mix(in srgb,var(--st-success) 25%,transparent)}
.completion-hero.rejected .big-ico{background:var(--st-danger-soft);color:var(--st-danger);border:3px solid var(--st-danger)}
.completion-hero.modify   .big-ico{background:var(--st-warning-soft);color:var(--st-warning);border:3px solid var(--st-warning)}
@keyframes bigIcoPop{
  0%   {transform:scale(0.6);opacity:0}
  60%  {transform:scale(1.12);opacity:1}
  100% {transform:scale(1);opacity:1}
}
/* Sparks on approved completion — three radiating dots */
.completion-hero.approved .big-ico::before,
.completion-hero.approved .big-ico::after{
  content:"";position:absolute;
  width:8px;height:8px;border-radius:50%;
  background:var(--st-success);
  pointer-events:none;opacity:0;
  animation:sparkRadiate 1400ms var(--ease-out) 400ms 1 forwards;
}
.completion-hero.approved .big-ico::before{--spark-x:-70px;--spark-y:-50px;animation-delay:380ms}
.completion-hero.approved .big-ico::after {--spark-x:65px;--spark-y:-58px;animation-delay:520ms}
@keyframes sparkRadiate{
  0%   {transform:translate(0,0) scale(0.4);opacity:0}
  30%  {opacity:1}
  100% {transform:translate(var(--spark-x),var(--spark-y)) scale(0.2);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .completion-hero .big-ico{animation:none}
  .completion-hero.approved .big-ico::before,
  .completion-hero.approved .big-ico::after{animation:none;display:none}
}
.completion-hero h2{font-size:22px;margin-bottom:6px}
.completion-hero .decision-id{font-family:"Courier New",monospace;font-size:18px;color:var(--primary);font-weight:700;margin:8px 0}
.completion-hero p{color:var(--muted);font-size:13px;line-height:1.7}
.completion-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:18px}
.completion-summary .item{padding:12px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;text-align:start}
.completion-summary .item .lbl{font-size:11px;color:var(--muted);margin-bottom:4px}
.completion-summary .item .val{font-size:14px;font-weight:600;color:var(--ink)}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.preview-grid,.diff-grid{grid-template-columns:1fr}}
@media(max-width:1024px){
  /* minmax(0,1fr) (not 1fr) so a wide child — e.g. the crowded topbar — can't
     stretch the grid track past the viewport and shift/clip the whole layout. */
  .app-shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"topbar" "main" "footer"}
  .topbar,.main,.footer{min-width:0}
  .sidebar{
    display:block;
    position:fixed;top:64px;bottom:0;
    inset-inline-start:0;width:280px;z-index:100;height:calc(100vh - 64px);height:calc(100dvh - 64px);
    transform:translateX(-110%);visibility:hidden;
    transition:transform var(--dur-slow) var(--ease-out-quart),visibility 0s linear var(--dur-slow);
  }
  [dir="rtl"] .sidebar{transform:translateX(110%)}
  .sidebar.open{transform:translateX(0);visibility:visible;box-shadow:var(--shadow-lg), var(--inset-light);transition:transform var(--dur-slow) var(--ease-out-quart),visibility 0s}
  [dir="rtl"] .sidebar.open{transform:translateX(0)}
}
@media(max-width:768px){.main{padding:16px}.stats-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card .value{font-size:22px}.form-grid.cols-2{grid-template-columns:1fr}.vote-grid{grid-template-columns:1fr}.topbar{padding:0 12px}.topbar-brand .name{display:none}.user-chip .meta{display:none}.data-table th:nth-child(2),.data-table td:nth-child(2),.data-table th:nth-child(5),.data-table td:nth-child(5){display:none}.stepper{grid-template-columns:repeat(5,1fr);gap:0}.stepper .stp .name{font-size:10.5px}.stepper .stp .when{display:none}.lang-toggle,.theme-toggle{padding:6px 10px;font-size:11px}.icon-btn,.lang-toggle,.theme-toggle{min-width:44px;min-height:44px}.topbar-tools{gap:6px}.topbar-tools .btn.with-ic span[data-i18n="common.logout"]{display:none}.topbar-tools .btn.with-ic{min-width:44px;min-height:44px;padding:0;justify-content:center}}
/* Mobile/tablet menu button: prominent + primary-colored so it can't be missed.
   Hidden on desktop (≥1024px) where the sidebar sits fixed on the side. */
.menu-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:42px;height:42px;
  background:var(--primary);color:var(--brand-dark);
  border:none;border-radius:var(--r-md);
  cursor:pointer;font-family:inherit;
  flex-shrink:0;
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 35%,transparent);
  transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast) var(--ease-out);
}
.menu-toggle:hover{transform:translateY(-2px);box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 45%,transparent)}
.menu-toggle:active{transform:translateY(0)}
.menu-toggle .ic{width:22px;height:22px;stroke-width:2}
@media (max-width:1024px){ .menu-toggle{display:inline-flex} }

/* Sidebar backdrop on mobile — dims the page behind the open drawer + catches
   taps outside to close. Inert when sidebar is closed. */
.sidebar-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.5);
  z-index:99;
  backdrop-filter:blur(2px);
  display:block;
}
.sidebar-backdrop[hidden]{display:none}
@media (min-width:1025px){ .sidebar-backdrop{display:none !important} }
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--primary-soft);border-color:var(--surface)}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);display:none;z-index:200;backdrop-filter:blur(3px)}
.drawer-overlay.open{display:block}
.drawer{
  position:fixed;top:0;bottom:0;
  inset-inline-end:-460px;
  width:460px;max-width:92vw;
  background:var(--surface);
  border-inline-start:1px solid var(--border-strong);
  z-index:201;
  transition:inset-inline-end var(--dur-slow) var(--ease-out-quart);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg), var(--inset-light);
}
.drawer.open{inset-inline-end:0}
.drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.drawer-head h3{font-size:16px}
.drawer-body{padding:18px 22px;overflow-y:auto;flex:1}
.notif-item{padding:12px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:.15s}
.notif-item:hover{border-color:var(--primary)}
.notif-item .h{font-size:13px;font-weight:600;margin-bottom:3px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.notif-item .h .when{font-size:10.5px;color:var(--muted);font-weight:400}
.notif-item .body{font-size:12px;color:var(--muted);line-height:1.5}
.notif-item.unread{border-inline-start:3px solid var(--primary)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:none;z-index:300;backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
/* ⚠ Base modal width = 480px. This rule lives LATER in the file than the
   per-modal width overrides (.suggestion-modal, .ai-loading-modal, etc.), so at
   equal (single-class) specificity it WINS and silently caps them at 480px.
   Any modal that needs a different width MUST use a compound selector
   `.modal.<name>-modal{max-width:…}` so it outranks this rule. */
.modal{
  background:var(--surface-raised);
  border:1px solid var(--border-strong);
  border-radius:var(--r-xl);
  width:100%;max-width:480px;
  box-shadow:var(--shadow-lg), var(--inset-light);
  max-height:90vh;overflow-y:auto;
  animation:modalIn var(--dur-base) var(--ease-spring);
}
@keyframes modalIn{from{opacity:0;transform:scale(0.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-head{padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.modal-head h3{font-size:var(--type-h2);display:flex;align-items:center;gap:var(--sp-3)}
.modal-head h3 .ic{color:var(--primary)}
.modal-body{padding:var(--sp-5) var(--sp-6)}
.modal-overlay{animation:fadeIn var(--dur-base) var(--ease-out)}
.toast-stack{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:400;max-width:min(440px,calc(100vw - 28px));pointer-events:none}
/* Toast — brand-led, NOT the generic "tinted icon badge in a box" look.
   Flat inline glyph (no chip), brand-beige accent for neutral/info (no stock
   info-blue), a single accent rail on the leading edge + a draining underline.
   Single-line messages stay vertically centred; multi-line wrap cleanly. */
.toast{
  --toast-accent:var(--primary);
  position:relative;overflow:hidden;
  min-width:min(300px,calc(100vw - 28px));
  padding:14px 16px;
  border-radius:12px;
  background:var(--surface-raised);
  border:1px solid var(--border-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.2), 0 18px 40px -16px rgba(0,0,0,.6);
  font-size:var(--type-caption);line-height:1.5;
  animation:toastSlide var(--dur-slow) var(--ease-spring);
  display:flex;align-items:center;gap:11px;
  pointer-events:auto;
}
/* hairline accent rail on the leading edge — the only color flourish */
.toast::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:var(--toast-accent);
}
/* Neutral/info uses the BRAND beige, not stock info-blue — kills the "AI" tell. */
.toast.info   {--toast-accent:var(--primary)}
.toast.success{--toast-accent:var(--st-success)}
.toast.danger {--toast-accent:var(--st-danger)}
.toast.warning{--toast-accent:var(--st-warning)}
/* flat glyph, no background box / no ring — just the bare colored icon */
.toast .toast-ico{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;background:none;box-shadow:none;
  color:var(--toast-accent);
}
.toast .toast-ico .ic{width:18px;height:18px;stroke-width:2}
.toast .toast-msg{flex:1;min-width:0;color:var(--ink);font-weight:500;letter-spacing:-0.005em}
.toast .toast-close{
  align-self:center;
  background:transparent;border:none;color:var(--muted);
  cursor:pointer;
  width:24px;height:24px;
  border-radius:7px;flex-shrink:0;
  display:inline-grid;place-items:center;opacity:.6;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.toast .toast-close:hover{color:var(--ink);opacity:1}
.toast .toast-close:active{transform:scale(.9)}
.toast .toast-close:focus-visible{outline:none;box-shadow:var(--focus-ring);opacity:1}
.toast .toast-close .ic{width:14px;height:14px}
/* auto-dismiss underline — drains over the toast's lifetime, pauses on hover */
.toast .toast-prog{
  position:absolute;inset-inline:0;bottom:0;height:2px;
  transform-origin:left center;
  background:color-mix(in srgb,var(--toast-accent) 60%,transparent);
  animation:toastDrain 5s linear forwards;
}
[dir="rtl"] .toast .toast-prog{transform-origin:right center}
.toast:hover .toast-prog{animation-play-state:paused}
.toast.is-paused .toast-prog{animation-play-state:paused}
@keyframes toastDrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes toastSlide{from{transform:translateY(18px) scale(0.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.toast.is-leaving{animation:toastOut var(--dur-base) var(--ease-in) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(0.94)}}
@media (prefers-reduced-motion:reduce){
  .toast{animation:none}
  .toast .toast-prog{display:none}
  .toast.is-leaving{animation:none;opacity:0}
}
.countdown{display:inline-flex;gap:6px;align-items:center;padding:5px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border-strong);font-family:"Courier New",monospace;font-size:12px;color:var(--ink-2)}
.countdown b{color:var(--ink);font-weight:700}
.countdown.warn{border-color:rgba(229,179,128,0.4);color:var(--st-warning)}
.countdown.warn b{color:var(--st-warning)}
.empty-state{
  padding:var(--sp-12) var(--sp-6);
  text-align:center;
  background:var(--surface);
  border:1px dashed var(--border-strong);
  border-radius:var(--r-lg);
  animation:fadeUp var(--dur-slow) var(--ease-out);
}
.empty-state .ico{
  display:inline-grid;place-items:center;
  width:72px;height:72px;
  margin:0 auto var(--sp-4);
  border-radius:50%;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:0; /* tame any stray emoji */
}
.empty-state .ico .ic{width:34px;height:34px;stroke-width:1.5}
.empty-state h4{font-size:var(--type-h2);color:var(--ink);margin-bottom:var(--sp-2)}
.empty-state p{font-size:var(--type-caption);color:var(--muted);max-width:420px;margin:0 auto var(--sp-4);line-height:1.7}
.audit-row{padding:10px 14px;border-radius:8px;background:var(--bg-2);border:1px solid var(--border);margin-bottom:6px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:12px}
.audit-row .when{font-family:"Courier New",monospace;font-size:11px;color:var(--muted);min-width:140px}
.audit-row .what strong{color:var(--ink);font-weight:600}
.audit-row .what .who{color:var(--ink-2);font-size:11px}
.audit-row .hash{font-family:"Courier New",monospace;font-size:10px;color:var(--role-ai);background:var(--role-ai-soft);padding:2px 7px;border-radius:5px;border:1px solid rgba(195,160,245,0.3);white-space:nowrap}
/* Mobile: the 3-column grid squeezes the message into a sliver that wraps
   word-by-word. Restack: timestamp + hash on a top row, the message + actor
   full-width below. */
@media (max-width:640px){
  .audit-row{grid-template-columns:1fr auto;gap:6px 10px;align-items:start}
  .audit-row .when{grid-row:1;grid-column:1;min-width:0;align-self:center}
  .audit-row .hash{grid-row:1;grid-column:2;justify-self:end;align-self:center}
  .audit-row .what{grid-row:2;grid-column:1 / -1}
}

/* ============================================================
   My Requests — filter bar, bulk actions, row layout, kebab menu
   ============================================================ */
.list-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:12px}
.list-toolbar select,.list-toolbar input[type="search"],.list-toolbar input[type="date"]{background:var(--bg-2);border:1px solid var(--border-strong);color:var(--ink);padding:8px 10px;border-radius:8px;font-family:inherit;font-size:13px;min-height:36px}
.list-toolbar select:focus,.list-toolbar input:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--primary)}
.lt-search{position:relative;flex:1 1 260px;min-width:200px}
.lt-search-ico{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted);pointer-events:none}
.lt-search input[type="search"]{width:100%;padding-inline-start:32px}
.lt-date{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.lt-date input{font-size:12px;padding:6px 8px;min-height:32px}
.lt-count{font-size:12px;color:var(--muted);margin-inline-start:auto;white-space:nowrap}

.bulk-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 14px;background:var(--primary-soft);border:1px solid var(--primary);border-radius:12px;margin-bottom:12px;position:sticky;top:8px;z-index:5;backdrop-filter:blur(4px)}
.bulk-toolbar .bulk-count{font-weight:600;color:var(--ink);font-size:13px}

.req-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;margin-bottom:8px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;font-size:12.5px}
.select-all-wrap{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--ink-2)}
.select-all-wrap input[type="checkbox"]{width:17px;height:17px;accent-color:var(--primary);cursor:pointer}
.select-all-wrap:hover{color:var(--ink)}
.req-list{display:flex;flex-direction:column;gap:10px}
.req-row{padding:14px 16px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;cursor:default;position:relative}
.req-row:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-md), var(--inset-light)}
.req-row.is-selected{border-color:var(--primary);background:var(--primary-soft)}
.req-row.is-selected::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--primary);border-radius:14px 0 0 14px}
[dir="rtl"] .req-row.is-selected::before{border-radius:0 14px 14px 0}

.req-row-head{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:flex-start}
.req-row-body{cursor:pointer;min-width:0;border-radius:8px;padding:2px;outline:none}
.req-row-body:focus-visible{box-shadow:var(--focus-ring)}

.req-row-title{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.req-row-title h3{font-size:15.5px;font-weight:700;color:var(--ink);margin:0;line-height:1.4;flex:1;min-width:0;overflow-wrap:anywhere;font-family:var(--font-display-ar)}
[dir="ltr"] .req-row-title h3{font-family:var(--font-display-en)}

.req-row-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);align-items:center;margin-bottom:10px}
.req-row-meta .meta-item{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)}
.req-row-meta .meta-ico{font-size:12px;opacity:.85}
.req-row-meta .d-greg{color:var(--ink);font-weight:600;letter-spacing:.01em}
.req-row-meta .d-hij{color:var(--muted);font-size:11px;font-weight:400}
.req-row-meta .updated{color:var(--muted)}
.req-row-meta .ver{font-family:"Courier New",monospace;font-size:11px;color:var(--primary);background:var(--primary-soft);padding:2px 7px;border-radius:4px;border:1px solid rgba(202,184,165,.25)}
.cat-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--bg-2);border:1px solid var(--border-strong);color:var(--ink-2);font-size:11.5px;font-weight:500;line-height:1.4}

/* Compact progress meter — replaces the 6-step grid in list rows */
.req-row-progress{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:4px}
.rrp-bar{height:11px;background:var(--bg-2);border:1px solid var(--border);border-radius:999px;overflow:hidden;position:relative}
.rrp-fill{height:100%;border-radius:999px;transition:width .35s ease;position:relative;overflow:hidden}
.rrp-fill.tone-primary{background:var(--primary)}
.rrp-fill.tone-success{background:var(--st-success)}
.rrp-fill.tone-warning{background:var(--st-warning)}
.rrp-fill.tone-danger {background:var(--st-danger)}
/* Pulsing dot at the leading edge of in-progress meters — extra liveness */
.rrp-fill.tone-primary::before,
.rrp-fill.tone-warning::before{
  content:"";position:absolute;top:50%;inset-inline-end:0;
  width:13px;height:13px;border-radius:50%;
  background:var(--rrp-dot);
  transform:translate(50%,-50%);
  box-shadow:0 0 0 0 var(--rrp-pulse);
  animation:rrpDotPulse 2.8s ease-out infinite;
  pointer-events:none;
}
@keyframes rrpDotPulse{
  0%   {box-shadow:0 0 0 0    var(--rrp-pulse);transform:translate(50%,-50%) scale(1)}
  70%  {box-shadow:0 0 0 12px rgba(0,0,0,0);   transform:translate(50%,-50%) scale(1.18)}
  100% {box-shadow:0 0 0 0    rgba(0,0,0,0);   transform:translate(50%,-50%) scale(1)}
}
.rrp-label{font-size:11.5px;color:var(--muted);white-space:nowrap}
.rrp-label strong{color:var(--ink);font-weight:700}

/* Pulse glow on the *current* step of the full stepper (dashboard + detail).
   Uses the theme-aware --rrp-pulse token so the halo stays visible in both
   light and dark themes. */
.stepper .stp.current .circle{animation:stepperPulse 3.4s ease-out infinite}
@keyframes stepperPulse{
  0%   {box-shadow:0 0 0 0   var(--rrp-pulse), 0 0 0 4px var(--primary-soft)}
  70%  {box-shadow:0 0 0 10px rgba(0,0,0,0),   0 0 0 4px var(--primary-soft)}
  100% {box-shadow:0 0 0 0   rgba(0,0,0,0),    0 0 0 4px var(--primary-soft)}
}
/* Connector line into the current step */
.stepper .stp.current::after{background:var(--primary)}
@media(prefers-reduced-motion: reduce){
  .rrp-fill::before,.rrp-fill::after,.stepper .stp.current .circle,.stepper .stp.current::after{animation:none !important}
}

.req-row-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.row-open-btn{padding:6px 12px !important;font-size:12px !important}
.req-row:hover .row-open-btn{background:var(--primary-soft);color:var(--ink);border-color:var(--primary)}

.row-check-wrap{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;cursor:pointer;margin-top:2px;transition:background .15s}
.row-check-wrap:hover{background:var(--bg-2)}
.row-check{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}

.kebab-wrap{position:relative}
.kebab-btn{padding:4px 12px !important;font-size:18px !important;line-height:1;letter-spacing:1px;background:var(--bg-2) !important;border-color:var(--border-strong) !important}
.kebab-btn:hover{background:var(--surface-2) !important;color:var(--primary) !important;border-color:var(--primary) !important}
.row-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow-lg);min-width:220px;padding:6px;z-index:50;display:flex;flex-direction:column;gap:2px;animation:menuPop .12s ease-out}
.row-menu[hidden]{display:none !important}
.row-menu-item{background:transparent;border:none;color:var(--ink);padding:10px 12px;border-radius:7px;cursor:pointer;font-family:inherit;font-size:13px;text-align:start;display:flex;align-items:center;gap:10px;width:100%;transition:background .1s}
.row-menu-item:hover{background:var(--bg-2)}
.row-menu-item.danger{color:var(--st-danger)}
.row-menu-item.danger:hover{background:var(--st-danger-soft)}
@keyframes menuPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Caret triangle next to the title that rotates when the row is expanded */
.row-caret{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--muted);font-size:11px;transition:transform .2s ease,color .2s ease;flex-shrink:0}
.row-caret.is-open{transform:rotate(90deg);color:var(--primary)}
[dir="rtl"] .row-caret{transform:rotate(180deg)}
[dir="rtl"] .row-caret.is-open{transform:rotate(90deg)}

/* Expanded inline brief — appears when the user clicks the row body */
.req-row.is-expanded{border-color:var(--primary);box-shadow:var(--shadow-md)}
.req-row-brief{
  margin-top:14px;padding:16px;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:12px;
  animation:briefSlide .22s ease-out;
}
@keyframes briefSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.brief-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.brief-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.brief-stat{padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:9px}
.brief-stat .lbl{font-size:10.5px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.brief-stat .val{font-size:13px;color:var(--ink);font-weight:600;line-height:1.45}
.brief-stat .val .hij{font-size:11px;color:var(--muted);font-weight:400}
.brief-block{margin-top:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:9px}
.brief-block-lbl{font-size:10.5px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.brief-block-val{font-size:13px;color:var(--ink-2);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.brief-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}

/* Pager footer (prev / "Page X of Y" / next) */
.list-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.list-pager .pager-state{font-size:12.5px;color:var(--ink-2);min-width:120px;text-align:center}
.list-pager .btn[disabled]{opacity:.4;cursor:not-allowed}

/* Per-page select in the toolbar */
.lt-page{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.lt-page select{font-size:12px;padding:6px 8px;min-height:32px}

@media(max-width:768px){
  .list-toolbar{padding:10px}
  .lt-search{flex:1 1 100%}
  .lt-date,.lt-page{font-size:11px}
  .lt-count{flex:1 1 100%;text-align:start;margin-inline-start:0}
  .req-row-head{grid-template-columns:auto 1fr;gap:8px}
  .req-row-actions{grid-column:1 / -1;justify-content:flex-end;margin-top:8px}
  .row-open-btn{display:none}
  .req-row-meta{font-size:11px;gap:4px 10px}
  .req-row-meta .d-hij{display:none}
  .brief-stats{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Idle-timeout warning modal (re-uses .modal-overlay scaffolding)
   ============================================================ */
.idle-warn{text-align:center;padding:8px 0}
.idle-warn .countdown-big{font-size:42px;font-weight:700;color:var(--st-warning);font-family:"Courier New",monospace;margin:14px 0;letter-spacing:2px}
.idle-warn p{font-size:13px;color:var(--ink-2);line-height:1.6;margin-bottom:6px}
.idle-warn .idle-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}

/* ============================================================
   Demo-accounts panel on the login screen (collapsed by default)
   ============================================================ */
.demo-accounts{margin-top:18px;border:1px dashed var(--border-strong);border-radius:10px;background:var(--bg-2);text-align:start}
.demo-accounts summary{padding:10px 14px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;list-style:none}
.demo-accounts summary::-webkit-details-marker{display:none}
.demo-accounts summary::before{content:"▸";display:inline-block;margin-inline-end:6px;transition:transform .2s;color:var(--primary)}
.demo-accounts[open] summary::before{transform:rotate(90deg)}
[dir="rtl"] .demo-accounts summary::before{transform:rotate(180deg)}
[dir="rtl"] .demo-accounts[open] summary::before{transform:rotate(90deg)}
.demo-accounts-body{padding:6px 8px 10px;display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.demo-account-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-family:inherit;color:var(--ink);text-align:start;transition:.15s}
.demo-account-row:hover{border-color:var(--primary);background:var(--primary-soft)}
.demo-account-row .dac-name{font-size:13px;font-weight:600}
.demo-account-row .dac-sub{font-size:11px;color:var(--muted);font-weight:400}
.demo-account-row .dac-role{font-size:11px;color:var(--muted);padding:2px 8px;background:var(--bg-2);border-radius:999px;border:1px solid var(--border)}
.demo-account-row .dac-phone{font-family:"Courier New",monospace;font-size:11.5px;color:var(--ink-2)}
.demo-accounts-hint{font-size:11px;color:var(--muted);line-height:1.5;padding:4px 8px 6px;margin-bottom:4px;border-bottom:1px dashed var(--border)}
.dac-group{display:flex;flex-direction:column;gap:5px;padding:4px 0}
.dac-group-head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);padding:6px 6px 4px}
.demo-account-row{grid-template-columns:1fr auto !important}

/* ============================================================
   Users screen — Add User toolbar + form + row actions
   ============================================================ */
.users-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px}
.user-form{background:var(--surface);border:1px solid var(--primary);border-radius:12px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow-md)}
.user-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.user-form .ff{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.user-form .ff span{font-weight:600;color:var(--ink-2)}
.user-form input,.user-form select{background:var(--bg-2);border:1px solid var(--border-strong);color:var(--ink);padding:8px 10px;border-radius:8px;font-family:inherit;font-size:13px;min-height:36px}
.user-form input:focus,.user-form select:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--primary)}
.user-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.user-form-hint{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.6}

.row-actions-inline{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.row-actions-inline .btn{padding:5px 10px !important;font-size:11.5px !important}
.row-actions-inline .danger-text{color:var(--st-danger) !important;border-color:var(--st-danger) !important}
.row-actions-inline .danger-text:hover{background:var(--st-danger-soft) !important}
.row-actions-inline .btn[disabled]{opacity:.4;cursor:not-allowed}

/* Impersonation banner inside the DEV simulator. Visible only when admin
   is viewing the app as a non-admin role. Theme-aware via tokens. */
.impersonate-banner{
  margin-top:10px;padding:10px 12px;
  background:var(--st-warning-soft);
  border:1px dashed var(--st-warning);
  border-radius:9px;
  display:flex;flex-direction:column;gap:8px;align-items:stretch;
  font-size:11.5px;
}
.impersonate-banner[hidden]{display:none !important}
.impersonate-banner .ib-text{color:var(--st-warning);font-weight:600;line-height:1.5}
.impersonate-banner .btn{font-size:11px !important;padding:6px 10px !important}

/* ============================================================
   Avatars (user list + topbar) + Chairman pill + role colors
   ============================================================ */
.user-avatar-img{width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-inline-end:8px;border:1px solid var(--border-strong)}
.user-avatar-text{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:700;color:var(--brand-dark);background:var(--primary);margin-inline-end:8px;vertical-align:middle}
:root[data-theme="light"] .user-avatar-text{color:#FFFFFF}

.role-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:var(--bg-2);border:1px solid var(--border-strong);font-size:11.5px;color:var(--ink-2);font-weight:500;line-height:1.4;margin:1px 2px;white-space:nowrap;max-width:100%}
/* When a pill's label is long enough to wrap (e.g. "Committee member · Audit
   Committee" in the detail hero), keep it a rounded rectangle — never let the
   999px radius round a multi-line box into a circle. */
.ud-roles .role-pill{white-space:normal;border-radius:10px;text-align:start}
.role-pill.role-u1{background:var(--role-u1-soft);border-color:var(--role-u1);color:var(--role-u1)}
.role-pill.role-u2{background:var(--role-u2-soft);border-color:var(--role-u2);color:var(--role-u2)}
.role-pill.role-u3{background:var(--role-u3-soft);border-color:var(--role-u3);color:var(--role-u3)}
.role-pill.role-u4{background:var(--st-info-soft); border-color:var(--st-info); color:var(--st-info)}
.role-pill.role-admin{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:700}
.role-pill.chairman-pill{background:var(--primary);border-color:var(--primary);color:var(--brand-dark);font-weight:700}
:root[data-theme="light"] .role-pill.chairman-pill{color:#FFFFFF}
/* Roles cell: wrap chips (incl. one per committee) so a multi-committee member
   never stretches the row and hides the Actions column. */
.roles-cell{display:flex;flex-wrap:wrap;gap:4px;align-items:center;max-width:420px}
.role-pill.committee-pill{background:var(--bg-2);border-color:var(--border);color:var(--muted);font-weight:500;font-size:10.5px;padding:2px 8px}
/* Users table: if columns still overflow on a narrow screen, SCROLL instead of
   clipping (the wrapper is overflow:hidden by default) so Edit stays reachable. */
section[data-screen="users"] .table-wrap{overflow-x:auto}

/* Chairman checkbox row inside the user form */
.ff-checkbox{margin-top:12px;padding:10px 12px;background:var(--bg-2);border:1px dashed var(--border-strong);border-radius:8px}
.chk-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--ink)}
.chk-row input[type="checkbox"]{width:17px;height:17px;accent-color:var(--primary);cursor:pointer}
.chk-row input[type="checkbox"]:disabled{cursor:not-allowed}
.chk-hint{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.5;padding-inline-start:27px}
.chk-hint.warn{color:var(--st-warning)}
.user-form-title{font-size:13px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}

/* ============================================================
   My Profile screen
   ============================================================ */
.profile-card{background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;padding:24px;box-shadow:var(--shadow-md);max-width:780px}
.profile-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:20px}
.profile-avatar-lg{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--primary);box-shadow:var(--shadow-sm)}
.profile-avatar-lg.placeholder{display:grid;place-items:center;font-size:32px;font-weight:700;color:var(--brand-dark);background:var(--primary)}
:root[data-theme="light"] .profile-avatar-lg.placeholder{color:#FFFFFF}
.profile-id h3{font-size:20px;color:var(--ink);margin:0 0 4px;line-height:1.3;font-family:var(--font-display-ar)}
[dir="ltr"] .profile-id h3{font-family:var(--font-display-en)}
.profile-role{font-size:12px;color:var(--primary);font-weight:600;margin-bottom:4px}
.profile-phone{font-family:"Courier New",monospace;font-size:12px;color:var(--muted)}
.profile-photo-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.profile-photo-actions .btn{padding:7px 12px !important;font-size:11.5px !important}
.profile-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.profile-form-grid .ff{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.profile-form-grid .ff span{font-weight:600;color:var(--ink-2)}
.profile-form-grid input,.profile-form-grid select{background:var(--bg-2);border:1px solid var(--border-strong);color:var(--ink);padding:9px 12px;border-radius:8px;font-family:inherit;font-size:13px;min-height:38px}
.profile-form-grid input:focus,.profile-form-grid select:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--primary)}
.profile-actions{display:flex;justify-content:flex-end;gap:8px}
.profile-hint{font-size:11.5px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--border);line-height:1.6}

/* ============================================================
   Supervisor / Committee review (multi-committee workflow)
   ============================================================ */
.sup-section-title{font-size:13px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.06em;margin:8px 0 6px}
.sup-hint{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.sup-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.sup-actions .btn[disabled]{opacity:.5;cursor:not-allowed}

/* Multi-select committee chips */
.committee-chip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin:6px 0 14px}
.committee-chip{display:flex;flex-direction:column;gap:4px;padding:14px 16px 30px;border:1.5px solid var(--border-strong);border-radius:11px;background:var(--bg-2);cursor:pointer;transition:.15s;position:relative;user-select:none}
.committee-chip:hover{border-color:var(--primary);background:var(--surface);transform:translateY(-1px)}
.committee-chip.is-selected{border-color:var(--primary);background:var(--primary-soft);border-width:2px;padding:13.5px 15.5px 29.5px}
.committee-chip.is-selected::before{content:"✓";position:absolute;top:10px;inset-inline-start:12px;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.committee-chip.is-ai-suggested{border-color:var(--role-ai);background:var(--role-ai-soft)}
.committee-chip.is-ai-suggested.is-selected{background:var(--primary-soft)}
.committee-chip input{position:absolute;opacity:0;pointer-events:none}
.committee-chip .cc-name{font-size:14px;font-weight:700;color:var(--ink);padding-inline-start:28px}
.committee-chip .cc-meta{font-size:11.5px;color:var(--muted);line-height:1.6;padding-inline-start:28px}
.committee-chip .cc-tag{position:absolute;bottom:8px;inset-inline-end:10px;font-size:10px;padding:2px 8px;border-radius:999px;background:var(--role-ai-soft);color:var(--role-ai);font-weight:700;letter-spacing:.04em;border:1px solid var(--role-ai)}

.ai-suggestion-banner.pending{animation:aiBannerPulse 1.6s ease-in-out infinite}
@keyframes aiBannerPulse{0%,100%{opacity:.7}50%{opacity:1}}


/* ==========================================================
   Active-request widget — shared across u1/u2/u3/u4 dashboards
   ========================================================== */
.active-request{padding:0;overflow:hidden}
.active-request .active-request-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px;padding:20px 24px;border-bottom:1px solid var(--border);background:var(--primary-soft)}
@media (max-width:780px){ .active-request .active-request-top{grid-template-columns:1fr;gap:14px} }
.active-request .active-request-title-block{display:flex;flex-direction:column;gap:6px;min-width:0}
.active-request .ar-eyebrow{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.active-request .ar-id{font-size:17px;color:var(--ink);margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.active-request .ar-id .req-id{font-family:"Courier New",monospace;color:var(--primary);background:var(--bg-2);padding:2px 10px;border-radius:6px;font-size:14px;font-weight:600;letter-spacing:0}
.active-request .ar-title{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0;font-weight:500;overflow-wrap:anywhere}
.active-request .ar-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.active-request .ar-meta-pill{font-size:11px;padding:2px 10px;border-radius:999px;background:var(--bg-2);color:var(--muted);border:1px solid var(--border)}
.active-request .ar-meta-time{font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.active-request .active-request-cta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;justify-self:end}
@media (max-width:780px){ .active-request .active-request-cta{align-items:stretch;justify-self:stretch} }
.active-request .active-request-cta .btn.primary{padding:11px 22px;font-size:13px;white-space:nowrap}
.active-request .stepper{padding:22px 24px 24px}

.sup-waiting-list{margin-inline-start:18px;font-size:13px;color:var(--ink-2);line-height:1.8}

/* Committee 3-action grid */
.cmte-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:14px 0}
.cmte-action-btn{padding:14px 16px !important;font-size:13.5px !important;font-weight:700}

.cmte-verdict-form{margin-top:14px;padding:16px;border:1px solid var(--border-strong);border-radius:12px;background:var(--bg-2);animation:briefSlide .2s ease-out}
.cmte-verdict-form.tone-approved          {border-color:var(--st-success)}
.cmte-verdict-form.tone-rejected          {border-color:var(--st-danger)}
.cmte-verdict-form.tone-changes_requested {border-color:var(--st-warning)}
.cvf-title{font-size:13px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.cmte-verdict-form textarea{width:100%;background:var(--surface);border:1px solid var(--border-strong);color:var(--ink);padding:10px 12px;border-radius:8px;font-family:inherit;font-size:13px;resize:vertical;min-height:90px}

.cmte-already-voted{padding:16px;border:1px dashed var(--border-strong);border-radius:11px;background:var(--bg-2)}
.cv-head{font-size:13px;color:var(--primary);margin-bottom:6px}
.cv-body{font-size:12.5px;color:var(--ink-2);line-height:1.7;margin-bottom:8px}
.cv-block{margin-top:8px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.cv-block .lbl{font-size:10.5px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.cv-block .val{font-size:13px;color:var(--ink-2);line-height:1.6;white-space:pre-wrap}

/* Counter-explanation banner shown to committee on reconsideration */
.counter-banner{margin:10px 0 14px;padding:12px 14px;border:1px solid var(--st-warning);border-radius:10px;background:var(--st-warning-soft)}
.cb-title{font-size:12px;font-weight:700;color:var(--st-warning);margin-bottom:6px}
.cb-body{font-size:13px;color:var(--ink);line-height:1.7;white-space:pre-wrap}
.cb-meta{font-size:11px;color:var(--muted);margin-top:6px}

/* Post-committee supervisor — verdict cards grid */
.verdict-grid{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px}
.verdict-card{padding:14px 16px;border:1px solid var(--border-strong);border-radius:11px;background:var(--bg-2)}
.verdict-card.tone-success{border-color:var(--st-success)}
.verdict-card.tone-danger {border-color:var(--st-danger)}
.verdict-card.tone-warning{border-color:var(--st-warning)}
.vc-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.vc-cmte{font-size:13.5px;color:var(--ink)}
.vc-cmte strong{color:var(--primary)}
.vc-block{margin-top:8px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.vc-block .lbl{font-size:10.5px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.vc-block .val{font-size:13px;color:var(--ink-2);line-height:1.6;white-space:pre-wrap}
.vc-meta{font-size:11px;color:var(--muted);margin-top:8px}
/* COI disclosures on a committee card — who disclosed + the stated conflict. */
.vc-coi{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--st-warning) 40%,transparent);border-radius:8px;background:var(--st-warning-soft,rgba(220,170,90,.10))}
.vc-coi .ic{color:var(--st-warning);flex:none;margin-top:1px}
.vc-coi-head{font-size:11.5px;font-weight:700;color:var(--st-warning);margin-bottom:3px}
.vc-coi-row{font-size:12px;color:var(--ink-2);line-height:1.6}
.vc-coi-name{font-weight:600;color:var(--ink)}
.vc-coi-detail{color:var(--ink-2)}
.vc-actions{margin-top:10px;display:flex;gap:8px;justify-content:flex-end}

.postcmte-action-form{margin-top:14px;padding:16px;border:1px solid var(--st-warning);border-radius:12px;background:var(--bg-2);animation:briefSlide .2s ease-out}
.postcmte-action-form textarea{width:100%;background:var(--surface);border:1px solid var(--border-strong);color:var(--ink);padding:10px 12px;border-radius:8px;font-family:inherit;font-size:13px;resize:vertical;min-height:90px}
@media(max-width:768px){
  .profile-head{grid-template-columns:auto 1fr;gap:14px}
  .profile-photo-actions{grid-column:1 / -1;flex-direction:row}
}

/* ============================================================
   HERO UTILITIES — page-level hero blocks (dashboard greetings,
   role hero stats). Used by the dashboard renderers in app.js.
   ============================================================ */
.page-hero{
  margin:0 0 var(--sp-6);
  padding:var(--sp-2) 0 var(--sp-5);
  animation:fadeUp var(--dur-slow) var(--ease-out);
}
.page-hero .greet-eyebrow{
  font-size:var(--type-caption);
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:var(--sp-2);
}
.page-hero .greet-title{
  font-family:var(--font-display-ar);
  font-weight:700;
  font-size:clamp(28px, 5vw, var(--type-display));
  line-height:1.05;
  letter-spacing:-0.025em;
  color:var(--ink);
  margin-bottom:var(--sp-2);
}
[dir="ltr"] .page-hero .greet-title{font-family:var(--font-display-en)}
.page-hero .greet-title em{font-style:normal;color:var(--primary);position:relative;display:inline-block}
.page-hero .greet-sub{
  font-size:var(--type-h3);
  color:var(--ink-2);
  font-weight:400;
  line-height:1.5;
  max-width:60ch;
}

/* Hero row — pairs the hero stat with primary CTAs */
.page-hero-row{
  display:flex;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;
  margin-top:var(--sp-5);
}
.page-hero-actions{display:inline-flex;gap:var(--sp-2);flex-wrap:wrap;margin-inline-start:auto}

/* Hero stat — large number for the role's primary metric */
.hero-stat{
  /* Boardless: no pill background/border. Content sits at the inline-start
     (right in RTL), aligned with the greeting text above it. */
  display:flex;align-items:baseline;justify-content:flex-start;gap:var(--sp-3);
  padding:0;
  background:none;
  border:0;
  animation:scalePop var(--dur-slower) var(--ease-spring) 200ms backwards;
}
.hero-stat .hs-num{
  font-family:var(--font-display-ar);
  font-weight:700;
  font-size:var(--type-hero);
  color:var(--primary);
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
  min-width:1.2ch;display:inline-block;text-align:center;
}
[dir="ltr"] .hero-stat .hs-num{font-family:var(--font-display-en)}
.hero-stat .hs-lbl{font-size:var(--type-body);color:var(--ink-2);font-weight:500}

/* Refined autosave tag — keep the meaning, drop the cute pulse dot */
.autosave-tag{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--type-micro);
  color:var(--st-success);
  padding:3px var(--sp-3);
  border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--st-success) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--st-success) 28%,transparent);
  font-weight:500;
}
.autosave-tag[hidden]{display:none}
.autosave-tag::before{content:"\2713";font-weight:700;font-size:11px;line-height:1;opacity:.85}
.autosave-tag.is-pulse{animation:savePulse .5s var(--ease-spring)}
@keyframes savePulse{0%{transform:scale(.92);opacity:.4}55%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}

/* Refined session-info pill — quieter */
.session-info-pill{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-md);
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--ink);
  font-size:var(--type-caption);
  margin-bottom:var(--sp-4);
}
.session-info-pill .lbl{color:var(--muted);font-size:var(--type-micro)}
.session-info-pill strong{color:var(--primary);font-weight:600}


/* Suggestion modal — give it the new feel */
.sg-card{box-shadow:var(--shadow-sm), var(--inset-light);transition:transform var(--dur-base) var(--ease-spring),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.sg-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md), var(--inset-light)}

/* Trust grid — let it stagger */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4)}
.trust-grid > *{animation:fadeUp var(--dur-slow) var(--ease-out) backwards}
.trust-grid > *:nth-child(1){animation-delay:0ms}
.trust-grid > *:nth-child(2){animation-delay:50ms}
.trust-grid > *:nth-child(3){animation-delay:100ms}
.trust-grid > *:nth-child(4){animation-delay:150ms}
.trust-grid > *:nth-child(5){animation-delay:200ms}
.trust-grid > *:nth-child(6){animation-delay:250ms}
.trust-grid > *:nth-child(7){animation-delay:300ms}
.trust-grid > *:nth-child(8){animation-delay:350ms}
.trust-grid > *:nth-child(n+9){animation-delay:400ms}

/* Stat cards — stagger entrance to match trust grid */
.stats-grid > *{animation:fadeUp var(--dur-slow) var(--ease-out) backwards}
.stats-grid > *:nth-child(1){animation-delay:0ms}
.stats-grid > *:nth-child(2){animation-delay:60ms}
.stats-grid > *:nth-child(3){animation-delay:120ms}
.stats-grid > *:nth-child(4){animation-delay:180ms}
.stats-grid > *:nth-child(n+5){animation-delay:240ms}

/* Req-list rows — stagger entrance */
.req-list > *{animation:fadeUp var(--dur-base) var(--ease-out) backwards}
.req-list > *:nth-child(1){animation-delay:0ms}
.req-list > *:nth-child(2){animation-delay:40ms}
.req-list > *:nth-child(3){animation-delay:80ms}
.req-list > *:nth-child(4){animation-delay:120ms}
.req-list > *:nth-child(5){animation-delay:160ms}
.req-list > *:nth-child(6){animation-delay:200ms}
.req-list > *:nth-child(7){animation-delay:240ms}
.req-list > *:nth-child(n+8){animation-delay:280ms}

/* Form fields — bring forward the focus glow */
.form-field{position:relative}
.form-field input,.form-field textarea,.form-field select{
  background:var(--bg-2);
  border:1px solid var(--border);
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out);
}
.form-field input:hover:not(:focus),.form-field textarea:hover:not(:focus),.form-field select:hover:not(:focus){
  border-color:var(--border-strong);
  background:var(--surface);
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  background:var(--surface);
  border-color:var(--primary);
  box-shadow:var(--focus-ring),0 0 0 1px var(--primary);
}
/* Animated underline that grows from center on focus — premium feel */
.form-field input,.form-field textarea,.form-field select{position:relative}
.form-field::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-1px;
  height:2px;background:var(--primary);
  border-radius:var(--r-pill);
  opacity:0;
  transition:left var(--dur-base) var(--ease-out),right var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
  pointer-events:none;
}
.form-field:focus-within::after{left:14px;right:14px;opacity:0.6}
.form-field[data-invalid="true"]::after{background:var(--st-danger);left:14px;right:14px;opacity:0.6}

/* Login OTP cells — premium look */
.otp-grid input{
  background:var(--bg-2);
  border:1.5px solid var(--border-strong);
  color:var(--ink);
  border-radius:var(--r-md);
}
.otp-grid input:focus{
  background:var(--surface);
  border-color:var(--primary);
  box-shadow:var(--focus-ring),0 0 0 1px var(--primary);
  transform:scale(1.05);
}

/* Drawer + modal overlay — richer blur */
.drawer-overlay{background:rgba(0,0,0,0.55);backdrop-filter:blur(8px) saturate(140%)}
.modal-overlay{background:rgba(0,0,0,0.55);backdrop-filter:blur(8px) saturate(140%)}
:root[data-theme="light"] .drawer-overlay{background:rgba(35,40,49,0.35)}
:root[data-theme="light"] .modal-overlay{background:rgba(35,40,49,0.35)}

/* Notification dot animation pause when no unread */
.icon-btn .dot[hidden]{display:none}

/* Preview screen — AI-generated field rows stagger in to feel "generated" */
.preview-grid .field-row{animation:fadeUp var(--dur-slow) var(--ease-out) backwards}
.preview-grid .field-row:nth-child(1){animation-delay:0ms}
.preview-grid .field-row:nth-child(2){animation-delay:60ms}
.preview-grid .field-row:nth-child(3){animation-delay:120ms}
.preview-grid .field-row:nth-child(4){animation-delay:180ms}
.preview-grid .field-row:nth-child(5){animation-delay:240ms}
.preview-grid .field-row:nth-child(n+6){animation-delay:300ms}
.dec-form .dec-section,.dec-form .dec-acc{animation:fadeUp var(--dur-slow) var(--ease-out) backwards}
.dec-form .dec-acc:nth-child(1){animation-delay:50ms}
.dec-form .dec-acc:nth-child(2){animation-delay:120ms}
.dec-form .dec-acc:nth-child(3){animation-delay:190ms}
.dec-form .dec-acc:nth-child(4){animation-delay:260ms}
.dec-form .dec-acc:nth-child(n+5){animation-delay:330ms}

/* Role-tagged cards — refined 3px accent stripe via pseudo-element so it
   sits crisp inside the rounded corner instead of a chunky 4px border. */
.card[data-role]{border-inline-start:1px solid var(--border)}
.card[data-role]::before{
  content:"";position:absolute;
  inset-inline-start:0;
  inset-block:var(--sp-3);
  width:3px;
  border-radius:var(--r-pill);
  transition:inset-block var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
  opacity:.9;
}
.card[data-role="u1"]::before{background:var(--role-u1)}
.card[data-role="u2"]::before{background:var(--role-u2)}
.card[data-role="u3"]::before{background:var(--role-u3)}
.card[data-role="ai"]::before{background:var(--role-ai)}
.card[data-role="sys"]::before{background:var(--role-sys)}
.card[data-role]:hover::before{inset-block:var(--sp-2)}

/* ===========================================================
   New-request WIZARD — multi-step form (initiator only)
   =========================================================== */
.req-wizard{padding:0;overflow:hidden}
/* step indicator */
.wiz-steps{display:flex;list-style:none;margin:0;padding:18px 20px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.wiz-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;color:var(--muted);font-size:11.5px;text-align:center}
.wiz-step .wiz-dot{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--border-strong);color:var(--muted);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.wiz-step .wiz-label{position:relative;z-index:1;line-height:1.3;max-width:96px}
/* connector behind the dots (logical, RTL-safe) */
.wiz-step::before{content:"";position:absolute;top:14px;inset-inline-start:-50%;width:100%;height:2px;background:var(--border-strong);z-index:0}
.wiz-step:first-child::before{display:none}
.wiz-step.is-active{color:var(--ink)}
.wiz-step.is-active .wiz-dot{background:var(--primary);border-color:var(--primary);color:var(--brand-dark);box-shadow:0 0 0 4px var(--primary-soft)}
.wiz-step.is-done{color:var(--ink-2)}
.wiz-step.is-done .wiz-dot{background:var(--st-success);border-color:var(--st-success);color:#fff}
.wiz-step.is-done::before{background:var(--st-success)}
.wiz-step.is-clickable{cursor:pointer}
.wiz-step.is-clickable:hover .wiz-dot{border-color:var(--primary)}
/* panels */
.wiz-body{padding:22px}
.wiz-panel{display:none}
.wiz-panel.is-active{display:block;animation:wizPanelIn var(--dur-base) var(--ease-out)}
@keyframes wizPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* nav footer */
.wiz-nav{display:flex;align-items:center;gap:10px;padding:16px 20px;border-top:1px solid var(--border);background:var(--bg-2);flex-wrap:wrap}
.wiz-nav-spacer{flex:1}
.wiz-nav .btn{min-height:44px}
/* date interval — real-calendar pickers + dual Hijri/Gregorian echo */
.date-interval{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.di-cell{display:flex;flex-direction:column;gap:6px;min-width:170px;flex:1}
.di-lbl{font-size:12px;color:var(--muted)}
.di-cell input[type=date]{min-height:44px;font-variant-numeric:tabular-nums}
.di-arrow{font-size:20px;color:var(--muted);padding-bottom:10px}
.di-dual{font-size:11.5px;color:var(--ink-2);min-height:1.2em;font-variant-numeric:tabular-nums}
.di-duration{margin-top:10px;font-size:12.5px;color:var(--st-info);font-variant-numeric:tabular-nums}
/* force Latin (Western) digits on numeric fields per brand rule */
.num-latn{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
input#reqFinReturn{min-height:44px}
/* AI-checklist progressive disclosure on the review step */
.ai-checklist-toggle{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px}
.quality-checklist[hidden]{display:none}
/* review recap */
.wiz-recap{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.wiz-recap .rc-item{padding:10px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md)}
.wiz-recap .rc-lbl{font-size:11px;color:var(--muted);letter-spacing:.04em;margin-bottom:3px}
.wiz-recap .rc-val{font-size:13.5px;color:var(--ink);line-height:1.7;white-space:pre-wrap}
@media (prefers-reduced-motion: reduce){ .wiz-panel.is-active{animation:none} }
@media (max-width:768px){
  .wiz-steps{padding:14px 8px}
  .wiz-step{font-size:10px}
  .wiz-step .wiz-label{max-width:58px}
  .wiz-body{padding:16px}
  .wiz-nav{padding:14px 14px}
  .date-interval{flex-direction:column;align-items:stretch}
  .di-arrow{display:none}
}

/* ===== Admin Master-Data (companies + committees) — Stripe-settings style ===== */
.md-panel{margin-bottom:16px}
.md-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--border)}
.md-head-title{display:flex;align-items:center;gap:12px;min-width:0}
.md-head-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border);color:var(--primary);flex:none}
.md-head-ic .ic-sm{width:18px;height:18px}
.md-head-text{min-width:0}
.md-head-text h3{font-size:15px;margin:0;color:var(--ink);font-weight:700}
.md-head-text p{font-size:11.5px;color:var(--muted);margin:2px 0 0;line-height:1.5}
.md-head-tools{display:flex;align-items:center;gap:10px;flex:none}
.md-count{min-width:26px;height:24px;padding:0 8px;display:inline-grid;place-items:center;border-radius:999px;background:var(--bg-2);border:1px solid var(--border);color:var(--ink-2);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.md-list{display:flex;flex-direction:column;gap:6px;margin-top:0;padding-top:14px;overflow:hidden;min-height:0}
/* Collapsible panels — press the header to slide the list open/closed. */
.md-head{cursor:pointer;user-select:none}
.md-head:hover .md-head-text h3{color:var(--primary)}
.md-head-chev{display:inline-grid;place-items:center;color:var(--muted);transition:transform var(--dur-base,.25s) var(--ease-out,ease)}
.md-panel:not(.is-collapsed) .md-head-chev{transform:rotate(-90deg)}
.md-list-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-base,.28s) var(--ease-out,ease)}
.md-panel.is-collapsed .md-list-wrap{grid-template-rows:0fr}
.md-panel.is-collapsed .md-head{padding-bottom:0;border-bottom:none}
.md-row{display:flex;align-items:center;gap:12px;padding:11px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);transition:border-color .15s,background .15s}
.md-row:hover{border-color:var(--border-strong);background:var(--surface)}
.md-row-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--muted);flex:none}
.md-row-ic .ic-sm{width:15px;height:15px}
.md-row-main{flex:1;min-width:0}
.md-row-name{font-size:13.5px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-row-sub{font-size:11.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.md-row-del{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;opacity:.55;transition:.15s}
.md-row:hover .md-row-del{opacity:1}
.md-row-del:hover{color:var(--st-danger);background:var(--st-danger-soft);border-color:var(--st-danger)}
.md-row-del:focus-visible{outline:none;box-shadow:var(--focus-ring);opacity:1}
.md-row-del .ic-sm{width:16px;height:16px}
.md-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px;color:var(--muted);font-size:13px;text-align:center;border:1px dashed var(--border-strong);border-radius:var(--r-md);margin-top:14px}
.md-empty svg{width:24px;height:24px;opacity:.6}
.md-form{margin-top:14px;margin-bottom:0}
.md-form .num-latn{font-variant-numeric:tabular-nums;direction:ltr}
.ff-err{color:var(--st-danger);font-size:11.5px;font-weight:600;margin-top:3px}
@media(max-width:560px){ .md-head-tools{margin-inline-start:auto} .md-row-del{opacity:1} }
/* clickable committee rows → open the dedicated editor */
.md-row.is-clickable{cursor:pointer}
.md-row.is-clickable:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--primary)}
.md-row-chev{flex:none;display:grid;place-items:center;color:var(--muted);opacity:.5;transition:.15s}
.md-row.is-clickable:hover .md-row-chev{opacity:1;color:var(--primary)}
.md-row-chev .ic-sm{width:16px;height:16px}

/* ===== Committee editor (dedicated page) ===== */
.editor-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.editor-title{font-size:19px;font-weight:700;color:var(--ink);margin:0}
.editor-card{margin-bottom:16px}
/* User editor (Add/Edit user) field layout. The .user-form rules don't reach
   this markup (it uses .editor-card/.user-form-grid with no .user-form
   ancestor), so style fields explicitly: label ABOVE a full-width control, so
   every field — names, phone, email, language, note — aligns identically. */
.editor-card .ff{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.editor-card .ff>span{font-weight:600;color:var(--ink-2)}
.editor-card .ff input,
.editor-card .ff select,
.editor-card .ff textarea{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--border-strong);color:var(--ink);padding:9px 12px;border-radius:8px;font-family:inherit;font-size:13px;min-height:38px}
.editor-card .ff textarea{min-height:48px;line-height:1.6;resize:vertical}
.editor-card .ff input:focus,
.editor-card .ff select:focus,
.editor-card .ff textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
.cmt-add-member{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.cmt-add-member select{flex:1;min-width:200px;min-height:40px;background:var(--bg-2);border:1px solid var(--border-strong);color:var(--ink);padding:8px 12px;border-radius:8px;font-family:inherit;font-size:13px}
.cmt-add-member select:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--primary)}
.cmt-add-member select:disabled{opacity:.5;cursor:not-allowed}
.cmt-add-member .btn{flex:none;min-height:40px}
.editor-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
/* centered, readable form column (forms shouldn't be full-bleed) */
.editor-wrap{max-width:820px;margin-inline:auto}
.editor-wrap.narrow{max-width:560px}
.editor-hero{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.editor-hero-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--bg-2);border:1px solid var(--border);color:var(--primary);flex:none}
.editor-hero-ic .ic-sm{width:19px;height:19px}
.user-form-title.plain{margin:0;padding:0;border:0;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink)}
.field-hint{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin:12px 0 0;line-height:1.5}
.field-hint.plain{margin:4px 0 0}

/* Company-type editor — self-contained field layout + bilingual grid. Styled
   explicitly (not via .ff/.user-form) so labels reliably stack above controls. */
.te-section{padding:16px 18px;margin-bottom:14px}
.te-sec-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.te-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.te-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.te-field:last-child{margin-bottom:0}
.te-lbl{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.te-field input,.te-field select,.te-bi-cell textarea{width:100%;padding:10px 13px;border-radius:10px;background:var(--bg-2);color:var(--ink);border:1px solid var(--border-strong);font-size:13px;font-family:inherit;transition:.15s}
.te-field input:focus,.te-field select:focus,.te-bi-cell textarea:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:var(--focus-ring)}
.te-bi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){ .te-bi-grid{grid-template-columns:1fr} }
.te-bi-cell{display:flex;flex-direction:column;gap:5px}
.te-sub{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.te-bi-cell textarea{resize:vertical;min-height:46px;line-height:1.65}
.field-hint .ic-sm{width:13px;height:13px;flex:none;opacity:.8}
/* member rows */
.member-row{gap:11px}
.mem-av{margin:0 !important;flex:none}
.member-row.is-chair{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--bg-2))}
.role-chip{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--ink-2);font-size:10.5px;font-weight:600}
.chair-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;margin-inline-start:6px;border-radius:999px;background:var(--primary);color:var(--brand-dark);font-size:10.5px;font-weight:700;vertical-align:middle}
.chair-badge svg{width:12px;height:12px}
:root[data-theme="light"] .chair-badge{color:#fff}
.row-act{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;opacity:.6;transition:.15s}
.row-act:hover{opacity:1;color:var(--primary);background:var(--bg-2)}
.row-act.is-on{opacity:1;color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent)}
.row-act:focus-visible{outline:none;box-shadow:var(--focus-ring);opacity:1}
.row-act svg{width:16px;height:16px}
.chair-note{display:flex;align-items:center;gap:7px;margin-top:12px;padding:8px 11px;border-radius:8px;background:var(--bg-2);border:1px dashed var(--border-strong);color:var(--ink-2);font-size:12px}
.chair-note .ic-sm{width:14px;height:14px;color:var(--primary);flex:none}
/* quorum stepper */
.quorum-control{display:inline-flex;align-items:center;gap:0;margin-top:6px;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;background:var(--bg-2)}
.step-btn{display:grid;place-items:center;width:42px;height:42px;border:0;background:transparent;color:var(--ink);cursor:pointer;transition:.15s}
.step-btn:hover{background:var(--surface);color:var(--primary)}
.step-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.quorum-input{width:64px;height:42px;text-align:center;border:0;border-inline:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.quorum-input:focus{outline:none}
.quorum-input::-webkit-outer-spin-button,.quorum-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quorum-hint{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.quorum-hint.is-err{color:var(--st-danger);font-weight:600}
/* category routing chips */
.cat-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cat-toggle{padding:6px 13px;border-radius:999px;border:1px solid var(--border-strong);background:var(--bg-2);color:var(--ink-2);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:.15s}
.cat-toggle:hover{border-color:var(--primary);color:var(--ink)}
.cat-toggle[aria-pressed="true"]{background:color-mix(in srgb,var(--primary) 16%,transparent);border-color:var(--primary);color:var(--ink);font-weight:600}
.cat-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* live preview card */
.preview-card{margin-bottom:16px;background:var(--bg-2);border-style:dashed}
.preview-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cc-preview{display:flex;align-items:center;gap:12px}
.cc-preview-text{min-width:0}
.cc-name{font-size:14.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.cc-meta{font-size:12px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
@media(max-width:560px){ .cmt-add-member{flex-direction:column;align-items:stretch} .cmt-add-member select,.cmt-add-member .btn{width:100%} .editor-actions{flex-direction:column-reverse} .editor-actions .btn{width:100%} }

/* ============================================================================
   Company-positions (appointments) editor — Step 2 of the user editor.
   CONSISTENCY pass (NO new tokens/colors): mirrors the existing in-app system —
   row = .md-row (styles.css:2168) + .md-row-name/.md-row-sub (2173/2174);
   primary badge = .chair-badge (2247) incl. its light override (2249);
   neutral badge = .role-chip (2246); the add/edit fields reuse .editor-card .ff
   (2201) + .user-form-grid (1683) already (this card IS .editor-card). Logical
   properties → RTL+LTR safe; every color via theme token → dark+light safe.
   ============================================================================ */
.appt-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.appt-row{display:flex;align-items:center;gap:var(--sp-3);padding:11px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out)}
.appt-row:hover{border-color:var(--border-strong);background:var(--surface)}
.appt-row-main{flex:1;min-width:0}
.appt-company{font-size:13.5px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.appt-title{font-size:12px;color:var(--muted);margin-top:2px}
.appt-row-actions{flex:none;display:flex;align-items:center;gap:var(--sp-2)}
.appt-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;margin-inline-start:6px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700;vertical-align:middle}
.appt-badge.primary{background:var(--primary);color:var(--brand-dark)}
.appt-badge.primary svg{width:11px;height:11px}
:root[data-theme="light"] .appt-badge.primary{color:#fff}
.appt-badge.inactive{background:var(--surface);border:1px solid var(--border);color:var(--muted);font-weight:600}
.appt-confirm{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;flex:none}
.appt-confirm-q{font-size:12px;color:var(--ink-2);font-weight:600}
.appt-actions{margin-top:var(--sp-3)}
/* edit-in-place expands the row into a stacked panel — overrides the flex row above */
.appt-row.editing{display:block}
.appt-row.editing .appt-company{margin-bottom:var(--sp-3)}
/* add-position form — nested panel; its .user-form-grid + .ff fields inherit the editor look */
.appt-form{margin-top:var(--sp-3);padding:var(--sp-4);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md)}
.appt-form-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-3)}

/* ============================================================================
   New-request Typeform-style intake + initiator decision card.
   Reuses existing design tokens (--primary, --surface, --ink, --r-*, --st-*,
   --dur-*, --ease-*). RTL-safe via logical properties. Honors reduced-motion.
   ============================================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Full-screen focused overlay — covers the app chrome (topbar 50 / sidebar 40),
   sits below the modal layer (300) so gating modals stack on top. */
.tf-flow{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.tf-topbar{display:flex;align-items:center;gap:14px;padding:14px var(--sp-6);border-bottom:1px solid var(--border);background:var(--surface)}
.tf-exit{flex-shrink:0}
.tf-progress{flex:1;height:6px;border-radius:var(--r-pill);background:var(--bg-2);overflow:hidden;min-width:80px}
.tf-progress-fill{height:100%;inline-size:0%;background:var(--primary);border-radius:var(--r-pill);transition:inline-size var(--dur-base) var(--ease-out)}
.tf-progress-meta{flex-shrink:0;font-size:13px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tf-progress-meta .tf-of{margin:0 3px;color:var(--muted)}
.tf-stepnav{display:flex;gap:6px;flex-shrink:0}
.tf-navbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--border-strong);color:var(--ink-2);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.tf-navbtn:hover:not(:disabled){border-color:var(--primary);color:var(--ink)}
.tf-navbtn:disabled{opacity:.4;cursor:not-allowed}
.tf-saveline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px var(--sp-6);border-bottom:1px solid var(--border);background:var(--bg-2)}
.tf-saveline .session-info-pill{margin:0}
.tf-vis{font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.tf-saveline .autosave-tag{margin-inline-start:auto}
/* Capacity picker (Step 4) — the >1-hat <select> injected into #sessionRoleText
   inside .session-info-pill (index.html:210-213 / styles.css:1952). Compact inline
   control tuned to sit in the pill; invalid state mirrors
   .form-field[data-invalid="true"] select (styles.css:597) + the focus-ring pattern
   of .form-field input:focus (2018). Tokens only → dark+light; no physical L/R → RTL+LTR. */
.capacity-select{
  font-family:inherit;
  font-size:var(--type-caption);
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  padding:4px 10px;
  min-height:30px;
  max-width:100%;
  cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.capacity-select:hover:not(:focus){border-color:var(--primary)}
.capacity-select:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
.capacity-select.is-invalid{border-color:var(--st-danger);box-shadow:0 0 0 1px var(--st-danger)}
.capacity-select.is-invalid:focus{box-shadow:var(--focus-ring),0 0 0 1px var(--st-danger)}

/* Capacity entry gate (Capacity-gate B) — blocking first step before the wizard
   body (index.html:222-233). The panel reuses .card (styles.css:421) for its
   surface; these hooks only add wizard-consistent LAYOUT. Centered + max-width
   mirrors the wizard track (.tf-track styles.css:2363, margin:0 auto); the column
   rhythm mirrors .tf-step-inner (styles.css:2367, gap). Tokens only → dark+light;
   logical props + flex/gap → RTL+LTR (no physical left/right). */
.capacity-gate{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  inline-size:100%;
  max-width:560px;
  margin-block:var(--sp-10) var(--sp-6);
  margin-inline:auto;
}
/* Prompt — matches the wizard question heading type scale (.tf-qtitle 2370);
   the <h2> inherits the brand display font + weight 700 like .tf-qtitle does. */
.capacity-gate-title{
  font-size:clamp(20px,3.2vw,28px);
  line-height:1.25;
  margin:0;
  color:var(--ink);
}
.capacity-gate-control{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
/* Confirm / Back row — flex + gap, logical alignment (start) for RTL+LTR;
   button look comes from .btn primary / .btn ghost (no overrides here). */
.capacity-gate-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  margin-block-start:var(--sp-2);
}
/* While the gate is open (_showCapacityGate sets aria-hidden="false"), the wizard
   step-dots in the topbar are not relevant yet — hide them. Pure-CSS, keyed off
   the gate's own aria state; no JS change. */
#tfFlow:has(#capacityGate[aria-hidden="false"]) #tfStepDots{display:none}

.tf-viewport{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;min-height:0}
.tf-track{flex:1;display:grid;align-content:start;max-width:760px;width:100%;margin:0 auto;padding:clamp(20px,6vh,72px) var(--sp-6)}
.tf-step{grid-area:1/1;display:none}
.tf-step.is-active{display:block;animation:tfStepIn var(--dur-slow) var(--ease-out-quart)}
@keyframes tfStepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.tf-step-inner{display:flex;flex-direction:column;gap:18px}
.tf-q{display:flex;gap:14px;align-items:flex-start}
.tf-qnum{flex-shrink:0;width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:15px;border:1px solid var(--primary)}
.tf-qtitle{font-size:clamp(20px,3.2vw,28px);line-height:1.25;margin:0;color:var(--ink)}
.tf-qhint{font-size:13.5px;line-height:1.7;color:var(--muted);margin:6px 0 0}
.tf-input{font-size:16px !important;line-height:1.7;min-height:120px}
textarea.tf-input{min-height:140px}

.tf-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px var(--sp-6);border-top:1px solid var(--border);background:var(--surface)}
.tf-footer-spacer{flex:1}
.tf-enter-hint{font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.tf-enter-hint kbd{font-family:inherit;font-size:11px;background:var(--bg-2);border:1px solid var(--border-strong);border-radius:5px;padding:1px 6px;color:var(--ink-2)}
.tf-footer .btn{min-height:44px}

/* Step 4 — multi-select chip pickers */
.tf-pickgroup{margin-bottom:16px}
.tf-pickgroup-head{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:9px}
.ms-chips{display:flex;flex-wrap:wrap;gap:8px}
.ms-empty{font-size:12px;color:var(--muted)}
.ms-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;min-height:40px;border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--border-strong);color:var(--ink-2);font-size:13px;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ms-chip:hover{border-color:var(--primary)}
.ms-chip .ms-chip-mark{display:inline-grid;place-items:center;width:16px;height:16px;font-weight:700;color:var(--muted)}
.ms-chip.is-on{background:var(--primary-soft);border-color:var(--primary);color:var(--ink)}
.ms-chip.is-on .ms-chip-mark{color:var(--primary)}

/* Step 6 — conflict-of-interest declaration */
.coi-box{padding:16px;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg-2)}
.coi-legal{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.7;color:var(--ink-2);padding:10px 12px;background:var(--st-warning-soft);border-inline-start:3px solid var(--st-warning);border-radius:var(--r-md);margin-bottom:14px;cursor:default}
/* Make the audit warning read clearly as a NOTICE, not a selectable option:
   warning-coloured icon, and it never shows the radio-row hover/pointer cues. */
.coi-legal .ic{color:var(--st-warning);flex:0 0 auto}
.coi-legal:hover{background:var(--st-warning-soft)}
#reqConflictGroup .radio-row.is-selected{border-color:var(--primary);background:var(--primary-soft)}

@media (max-width:560px){
  .tf-topbar{padding:10px 12px;gap:8px}
  .tf-navbtn{width:38px;height:38px}
  .tf-track{padding:20px 14px}
  .tf-footer{padding:12px 14px}
  .tf-enter-hint{display:none}
}
@media (prefers-reduced-motion: reduce){
  .tf-step.is-active{animation:none}
  .tf-progress-fill{transition:none}
}

/* ---- Initiator decision card (preview screen) ---- */
.initiator-card{display:flex;flex-direction:column;gap:18px}
.card-sec{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:opacity var(--dur-base) var(--ease-out)}
.card-sec.is-refining{opacity:.55;pointer-events:none}
.card-sec-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.card-sec-num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--brand-dark,#1f2127);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.card-sec-head h3{margin:0;font-size:15px;color:var(--ink)}
.card-sec-body{padding:16px}
.dec-empty-row{text-align:center;color:var(--muted);font-size:12.5px;padding:14px 0}
.card-add-row{margin-top:10px}
.row-del-cell{width:38px;text-align:center}
.ic-del{width:30px;height:30px;display:inline-grid;place-items:center;border-radius:var(--r-sm);background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ic-del:hover{background:var(--st-danger-soft,rgba(220,80,80,.12));color:var(--st-danger);border-color:var(--st-danger)}
.lvl-select{min-width:84px}
.lvl-select.lvl-high{color:var(--st-danger)}
.lvl-select.lvl-medium{color:var(--st-warning)}
.lvl-select.lvl-low{color:var(--st-success)}
.card-interval .date-interval{margin-top:4px}

/* Per-section "Notes to AI" */
.card-note{padding:13px 16px;border-top:1px dashed var(--border-strong);background:var(--bg-2)}
.card-note-lbl{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--primary);margin-bottom:7px}
.card-note-input{width:100%;padding:10px 12px;border-radius:var(--r-md);background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);font-size:13px;line-height:1.6;resize:vertical}
.card-note-input:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
.card-note-actions{display:flex;justify-content:flex-end;margin-top:8px}
.card-note-gate{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--st-warning);background:var(--st-warning-soft);border:1px solid var(--st-warning);border-radius:var(--r-md);padding:9px 12px;margin-bottom:10px}

/* ---- Phase 2: master-data type badges + compliance review ---- */
.md-type-badge{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--border-strong);color:var(--ink-2)}
.md-type-jsc_listed,.md-applies-jsc_listed,.md-tier-heavy{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.md-tier-medium{background:var(--st-warning-soft,rgba(220,170,90,.13));border-color:var(--st-warning);color:var(--st-warning)}
.md-tier-light{background:var(--bg-2);border-color:var(--border-strong);color:var(--ink-2)}
.md-applies-all{background:var(--st-info-soft,rgba(120,160,210,.13));border-color:var(--st-info);color:var(--st-info)}
.cmpl-sec .card-sec-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primary-soft);color:var(--primary)}
.cmpl-empty{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cmpl-empty p{font-size:12.5px;color:var(--ink-2);line-height:1.7;margin:0}
.cmpl-none{font-size:11.5px;color:var(--muted)}
.cmpl-loading{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px}
.cmpl-summary{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:10px 12px;border-radius:var(--r-md);margin-bottom:12px}
.cmpl-summary.ok{background:var(--st-success-soft,rgba(80,180,120,.12));color:var(--st-success)}
.cmpl-summary.has-flags{background:var(--st-warning-soft);color:var(--st-warning)}
.cmpl-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.cmpl-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-2)}
.cmpl-badge{flex-shrink:0;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.cmpl-compliant .cmpl-badge{background:var(--st-success-soft,rgba(80,180,120,.12));color:var(--st-success)}
.cmpl-attention .cmpl-badge{background:var(--st-warning-soft);color:var(--st-warning)}
.cmpl-not_applicable .cmpl-badge{background:var(--bg);color:var(--muted);border:1px solid var(--border-strong)}
.cmpl-attention{border-color:var(--st-warning)}
.cmpl-policy{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}
.cmpl-note{font-size:12px;color:var(--ink-2);line-height:1.6}

/* ---- Phase 2: cross-cutting COI + committee breakdown ---- */
.coi-inline{margin:14px 0;padding:14px;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg-2);transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.coi-inline.coi-needed{border-color:var(--st-danger);box-shadow:0 0 0 3px var(--st-danger-soft,rgba(220,80,80,.18))}
.coi-inline-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.coi-inline-legal{font-size:12px;line-height:1.7;color:var(--ink-2);margin-bottom:10px}
.coi-inline .radio-row.is-selected{border-color:var(--primary);background:var(--primary-soft)}
/* "State the conflict" field — required when "I have a conflict" is chosen. */
.coi-detail-field{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.coi-detail-field[hidden]{display:none}
.coi-detail-field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.coi-detail-field label .req{color:var(--st-danger)}
.coi-detail-field textarea{width:100%;padding:10px 12px;border-radius:10px;background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);font-size:13px;font-family:inherit;line-height:1.6;resize:vertical;min-height:48px}
.coi-detail-field textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
.coi-excluded{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;border:1px solid var(--st-danger);border-radius:var(--r-lg);background:var(--st-danger-soft,rgba(220,80,80,.10));color:var(--ink)}
/* Model B: committee decision is the chair's. Non-chairs get an info banner;
   the chair gets a small confirming hint above the verdict controls. */
.cmte-chair-only{display:flex;gap:12px;align-items:flex-start;margin:14px 0;padding:14px 16px;border:1px solid color-mix(in srgb,var(--st-info) 40%,transparent);border-radius:var(--r-lg);background:var(--st-info-soft,rgba(120,160,210,.12));color:var(--ink)}
.cmte-chair-only .ic{color:var(--st-info);flex:none;margin-top:2px}
.cmte-chair-only strong{display:block;font-size:13.5px;color:var(--ink)}
.cmte-chair-only p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.cmte-chair-note{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:var(--st-success);background:color-mix(in srgb,var(--st-success) 12%,transparent);border:1px solid color-mix(in srgb,var(--st-success) 30%,transparent);padding:6px 10px;border-radius:8px}
.cmte-chair-note .ic{width:14px;height:14px;flex:none}
.coi-excluded strong{color:var(--st-danger);display:block;margin-bottom:3px;font-size:13px}
.coi-excluded p{font-size:12.5px;line-height:1.7;color:var(--ink-2);margin:0}
.cmte-breakdown{margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.cbd-head{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:10px}
.cbd-list{display:flex;flex-direction:column;gap:8px}
.cbd-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-2)}
.cbd-name{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink)}
.cbd-note{font-size:12px;color:var(--ink-2);line-height:1.6;margin-top:4px}
.cbd-who{font-size:11.5px;color:var(--muted);margin-top:3px}
.cbd-lbl{font-weight:700;color:var(--ink-2)}
/* Supervisor override notice when forwarding to the board despite objections. */
.cmte-override-note{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;padding:14px 16px;border:1px solid color-mix(in srgb,var(--st-warning) 45%,transparent);border-radius:var(--r-lg);background:var(--st-warning-soft,rgba(220,170,90,.12));color:var(--ink)}
.cmte-override-note .ic{color:var(--st-warning);flex:none;margin-top:2px}
.cmte-override-note strong{display:block;font-size:13.5px;color:var(--ink)}
.cmte-override-note p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.cbd-coi{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--st-danger);margin-top:5px}
.cbd-verdict{flex-shrink:0;white-space:nowrap}

/* ---- Typeform: clickable step nav + in-flow language toggle ---- */
.tf-stepdots{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tf-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);border:1.5px solid var(--border-strong);color:var(--muted);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.tf-dot:hover{border-color:var(--primary);color:var(--ink)}
.tf-dot.is-done{background:var(--st-success-soft,rgba(80,180,120,.14));border-color:var(--st-success);color:var(--st-success)}
.tf-dot.is-current{background:var(--primary);border-color:var(--primary);color:var(--brand-dark,#1f2127);box-shadow:0 0 0 4px var(--primary-soft)}
.tf-langbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;padding:7px 12px;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--border-strong);color:var(--ink-2);font-size:12.5px;font-weight:600;line-height:1;text-align:center;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
/* The 'globe' icon is undefined, so its <span class="ico"> hydrates empty and,
   with gap:6px, shoved the 'EN'/'ع' label off-center. Drop empty icon spans so
   the label is truly centered. (This is the wizard lang button — the topbar one
   is .lang-toggle.) */
.tf-langbtn .ico:empty{display:none}
/* Profile "Roles & positions" as a wrapped chip list (was a cramped input). */
.profile-roles-field{align-items:flex-start}
.profile-role-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.role-chip{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-2);color:var(--ink-2);font-size:12px;line-height:1.4;white-space:nowrap}
.tf-langbtn:hover{border-color:var(--primary);color:var(--ink)}
.tf-themebtn{padding:7px;min-width:40px;justify-content:center}
.tf-themebtn .ic{width:16px;height:16px}
@media (max-width:760px){ .tf-stepdots{display:none} }

/* ---- AI card: sequential-reveal advance bar ---- */
.card-reveal-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px;border:1px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--bg-2)}
.card-reveal-progress{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.card-reveal-progress .crp-of{color:var(--muted)}
.card-reveal-dots{display:inline-flex;gap:5px;margin-inline-start:6px}
.crd-dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong);transition:background var(--dur-base) var(--ease-out)}
.crd-dot.on{background:var(--primary)}
.card-reveal-next{min-height:44px}

/* ---- Native control theming: makes <input type=date> + pickers match the
   theme instead of rendering a stark white box on the dark card. ---- */
:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="light"]{ color-scheme: light; }

/* Card date inputs are NOT inside .form-field, so style them explicitly so they
   inherit the surface look (was the white-box bug). */
.di-cell input[type=date],
.ci-date{
  width:100%;background:var(--bg-2);color:var(--ink);border:1px solid var(--border-strong);
  border-radius:var(--r-md);padding:11px 14px;font-size:14px;font-family:inherit;
  font-variant-numeric:tabular-nums;min-height:44px;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.di-cell input[type=date]:focus,
.ci-date:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:var(--focus-ring)}
.ci-date::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer;filter:var(--cal-filter,none)}
:root[data-theme="dark"] .ci-date::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.7)}

/* ---- AI card: refined time-interval ---- */
.card-interval{display:flex;flex-direction:column;gap:12px;margin-top:6px;padding:14px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-2)}
.ci-row{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ci-cell{display:flex;flex-direction:column;gap:6px;flex:1;min-width:180px}
.ci-lbl{font-size:12px;font-weight:600;color:var(--ink-2)}
.ci-dual{font-size:11.5px;color:var(--muted);min-height:1.1em;line-height:1.5}
.ci-arrow{align-self:center;margin-top:22px;font-size:20px;color:var(--primary)}
.ci-duration{display:flex}
.ci-duration-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary);font-size:12.5px;font-weight:600}
@media (max-width:560px){ .ci-row{flex-direction:column} .ci-arrow{display:none} }

/* ---- Preview: original-input chips + sub-line ---- */
.oi-chip{display:inline-block;font-size:12px;padding:3px 10px;margin:0 0 4px;border-radius:var(--r-pill);background:var(--primary-soft);border:1px solid var(--primary);color:var(--primary)}
[dir="rtl"] .oi-chip{margin-inline-start:4px}
[dir="ltr"] .oi-chip{margin-inline-end:4px}
.oi-sub{font-size:11.5px;color:var(--muted);margin-top:3px}

/* ---- Decision form: explicit empty state for risks / alternatives ---- */
.dec-empty-section{display:flex;align-items:center;gap:8px;padding:14px 16px;border:1px dashed var(--border-strong);border-radius:var(--r-md);background:var(--bg-2);color:var(--muted);font-size:12.5px}

/* ---- AI card: paged view + blocking loading overlay ---- */
#generatedFields{position:relative}
.card-loading-overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--surface) 72%, transparent);backdrop-filter:blur(3px);border-radius:var(--r-lg)}
.card-loading-overlay .cl-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 28px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-lg,0 10px 40px rgba(0,0,0,.35))}
.card-loading-overlay .cl-spinner{display:inline-grid;place-items:center;color:var(--primary)}
.card-loading-overlay .cl-spinner svg{width:30px;height:30px;animation:ccSpin 0.9s linear infinite}
.card-loading-overlay .cl-text{font-size:13.5px;font-weight:600;color:var(--ink)}
@keyframes ccSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .card-loading-overlay .cl-spinner svg{animation:none} }

/* paged nav: Back button + generated-dot marker + review tag */
.card-reveal-bar .card-reveal-back{min-height:44px}
.card-reveal-bar.review{justify-content:space-between}
.crd-dot.gen{box-shadow:0 0 0 2px var(--primary-soft)}
.card-review-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--st-success);background:var(--st-success-soft,rgba(80,180,120,.12));padding:6px 12px;border-radius:var(--r-pill)}

/* ============================================================================
   PRINT-TO-PDF — the decision record (#printRoot) is the only thing that prints.
   Hidden on screen; @media print swaps the app out for it and forces an ink
   palette so the dark theme doesn't print black-on-black. ===================== */
#printRoot{display:none}
.pdf-doc{max-width:820px;margin:0 auto;padding:24px 28px;color:#15171c;font-size:13px;line-height:1.6}
.pdf-head{display:flex;align-items:center;gap:16px;border-bottom:2px solid #15171c;padding-bottom:14px;margin-bottom:18px}
.pdf-logo{width:96px;height:auto;flex:none}
.pdf-org-ar{font-size:18px;font-weight:700;color:#15171c}
.pdf-org-en{font-size:12px;color:#5a5f6a;letter-spacing:.04em}
.pdf-title{font-size:20px;font-weight:700;margin:6px 0 14px;color:#15171c}
.pdf-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;margin-bottom:18px}
.pdf-meta>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #e2e4e8;padding-bottom:6px}
.pdf-meta span{color:#5a5f6a}.pdf-meta b{color:#15171c}
.pdf-h2{font-size:15px;font-weight:700;margin:18px 0 8px;color:#15171c}
.pdf-vote{width:100%;border-collapse:collapse;margin-bottom:14px}
.pdf-vote td{border:1px solid #d4d7dd;padding:7px 10px}
.pdf-vk{color:#5a5f6a;width:25%}.pdf-vv{font-weight:700;width:25%}
.pdf-fp{margin-top:14px;padding:10px 12px;border:1px dashed #b9bdc6;border-radius:8px;font-size:11px}
.pdf-fp span{display:block;color:#5a5f6a;margin-bottom:4px}
.pdf-fp code{word-break:break-all;color:#15171c}
.pdf-foot{margin-top:20px;padding-top:10px;border-top:1px solid #e2e4e8;font-size:11px;color:#5a5f6a;text-align:center}
@media print{
  @page{margin:14mm}
  html,body{background:#fff !important}
  body.printing>*:not(#printRoot){display:none !important}
  body.printing #printRoot{display:block !important}
  /* Force a readable ink palette regardless of the active theme. */
  #printRoot,#printRoot *{color:#15171c !important;background:#fff !important;box-shadow:none !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* The decision form's entry animation (fadeUp, fill-mode backwards) holds
     elements at opacity:0 at print time — neutralise all motion so content
     actually paints. */
  #printRoot *,#printRoot *::before,#printRoot *::after{
    animation:none !important;transition:none !important;opacity:1 !important;transform:none !important}
  #printRoot .pdf-logo{filter:none !important}
  #printRoot *{border-color:#d4d7dd !important}
  /* Expand every accordion + drop its toggle chrome so all sections print.
     The screen uses a grid-rows 0fr↔1fr trick to animate; in Chromium's paged
     print engine an `fr` row grabs the whole page height, so flatten the wrap
     to plain block flow and let the content size itself. */
  #printRoot .dec-acc{overflow:visible !important}
  #printRoot .dec-acc-wrap{display:block !important;grid-template-rows:none !important}
  #printRoot .dec-acc-body{overflow:visible !important;min-height:0 !important}
  #printRoot .dec-acc-chev{display:none !important}
  #printRoot .dec-acc,#printRoot .dec-field,#printRoot .req-particulars,#printRoot .pdf-vote tr{break-inside:avoid}
  #printRoot .dec-acc-head{cursor:default}
}

/* Detail-screen artifacts — issued decision PDF + supporting documents. */
.detail-artifacts{display:flex;flex-direction:column;gap:14px}
.artifacts-actions{display:flex;gap:10px;flex-wrap:wrap}
.req-docs-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:10px}
.req-docs-reanalyze{margin-inline-start:auto;flex:none}
.req-docs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.req-doc{display:flex;align-items:center;gap:10px;text-align:start;width:100%;padding:10px 12px;background:var(--bg-2);
  border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:border-color .15s,background .15s,transform .08s}
.req-doc:hover{border-color:var(--primary);background:var(--surface)}
.req-doc:active{transform:translateY(1px)}
.req-doc-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--surface);
  border:1px solid var(--border);color:var(--primary);flex:none}
.req-doc-name{flex:1;min-width:0;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.req-doc-meta{font-size:11px;color:var(--muted);flex:none}
.req-doc-dl{color:var(--muted);flex:none}
.req-doc:hover .req-doc-dl{color:var(--primary)}
.req-doc.is-missing{cursor:not-allowed;opacity:.7}
.req-doc.is-missing:hover{border-color:var(--st-warning);background:var(--bg-2)}

/* Collapsible detail-timeline blocks (.tl-acc reuses the .dec-acc accordion).
   The block titles carry an icon + label, so the header is inline-flex. The
   body must stay padding-free so the grid-rows 0fr collapse hides it fully
   (padding on the collapsing item leaks a visible sliver) — spacing comes from
   the children's margins, exactly like the decision-form accordion. */
.tl-acc{margin-bottom:10px}
.tl-acc-title{display:inline-flex;align-items:center;gap:8px}
.tl-acc-title svg{flex:none;width:15px;height:15px}
.tl-acc .dec-acc-body{padding:0}
.tl-acc .dec-acc-body>*{margin:0 14px 12px}
.tl-acc .cmte-breakdown,.tl-acc .detail-bmembers{margin-top:0}

/* ---- Committee per-member votes + Conflict-of-Interest ------------------- */
.cmte-member-votes{margin-top:12px;border:1px solid var(--border,#2a2e36);border-radius:10px;padding:10px 12px;background:var(--surface-2,rgba(255,255,255,.02))}
.cmv-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;margin-bottom:8px}
.cmv-head .cmv-tally{margin-inline-start:auto;font-weight:400;font-size:12px;color:var(--muted,#9aa0ab)}
.cmv-list{display:flex;flex-direction:column;gap:6px}
.cmv-row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.cmv-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmv-badges{display:flex;align-items:center;gap:6px;flex:none}
.cmv-vote{flex:none}
.cv-myvote{margin-inline-start:8px}
/* Non-voting attendees (supervisor on every committee + secretary) */
.cmv-attendees{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border)}
.cmv-sub{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:6px}
.cmv-row.cmv-nonvoting .cmv-name{color:var(--muted)}
.cmv-row.cmv-nonvoting .cmv-vote{opacity:.85}
/* The member's own reason / recommendation text (so the secretary can discuss) */
.cmv-reasons{margin:4px 0 10px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--border);font-size:12px;line-height:1.5;color:var(--ink-2,#9aa0ab)}
.cmv-reasons-lbl{font-weight:600;color:var(--ink)}
.cmv-reasons-txt{white-space:pre-wrap;word-break:break-word}
/* Secretary↔member discussion + reopen (migration 035) */
.cmv-reopened{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;line-height:1;padding:3px 7px;border-radius:999px;color:var(--st-warning,#b88200);background:color-mix(in srgb,var(--st-warning,#b88200) 16%,transparent);border:1px solid color-mix(in srgb,var(--st-warning,#b88200) 35%,transparent)}
.cmv-effective,.cmv-effective-line{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);font-size:12px;color:var(--ink-2,#9aa0ab)}
.cmv-effective strong{color:var(--ink)}
.cmte-thread{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.cmt-msg{border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--surface-2,rgba(255,255,255,.02))}
.cmt-msg-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:3px}
.cmt-msg-head .cmt-msg-when{margin-inline-start:auto;font-weight:400}
.cmt-msg-body{font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.cmt-msg.from-u2,.cmt-msg.from-admin{border-inline-start:3px solid var(--primary)}
.cmt-msg.from-u4{border-inline-start:3px solid var(--st-info,#3b82f6)}
.cmte-discuss{margin-top:10px;padding:10px 12px;border:1px dashed var(--border-strong,var(--border));border-radius:10px;background:var(--surface-2,rgba(255,255,255,.02))}
.cmte-discuss-input{width:100%;box-sizing:border-box;min-height:60px;resize:vertical;font:inherit;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--ink)}
.cmte-discuss-note{font-size:11px;color:var(--muted);margin-top:6px}
.cmte-discuss-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.cmte-reopened{margin-top:10px;padding:10px 12px;border:1px solid var(--st-warning,#b88200);border-radius:10px;background:var(--st-warning-soft,color-mix(in srgb,var(--st-warning,#b88200) 12%,transparent))}
.cmte-reopened-note{font-size:12.5px;color:var(--ink);margin-bottom:8px}
/* Secretary close / re-open controls (committee auto-close; migration 036) */
.cmte-sec-controls{margin-top:10px;padding:10px 12px;border:1px dashed var(--border-strong,var(--border));border-radius:10px;background:var(--surface-2,rgba(255,255,255,.02))}
.cmte-sec-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.cmte-sec-time{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink-2,#9aa0ab)}
.cmte-sec-time .ic{width:14px;height:14px;flex:none}
.cmte-sec-time.expired{color:var(--st-warning,#b88200)}
.cmte-sec-reopen{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.cmte-sec-reopen-lbl{font-size:12px;color:var(--muted)}
.cmte-reopen-hours{width:84px;box-sizing:border-box;font:inherit;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--ink);text-align:center}
/* Board close-log notes (close reason / skipped / tie-break) */
.cbd-closelog{display:flex;align-items:flex-start;gap:6px;margin-top:5px}
.cbd-closelog .cbd-lbl{font-weight:600;color:var(--ink-2,#9aa0ab)}
.cbd-tie{color:var(--st-warning,#b88200)}
.cbd-tie .ic{width:14px;height:14px;flex:none;margin-top:2px}
/* Required-field asterisk inside the user editor (.ff labels) */
.ff .req,.ff label .req{color:var(--st-danger,#e5484d);font-style:normal}
/* COI badge + recommendation chip */
.coi-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;line-height:1;padding:3px 7px;border-radius:999px;color:var(--st-warning,#b88200);background:color-mix(in srgb,var(--st-warning,#b88200) 16%,transparent);border:1px solid color-mix(in srgb,var(--st-warning,#b88200) 35%,transparent)}
.coi-badge svg{width:12px;height:12px}
.coi-reco-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:3px 7px;border-radius:999px;color:var(--text,#e6e8ec);background:var(--surface-3,rgba(255,255,255,.05));border:1px solid var(--border,#2a2e36)}
.coi-reco-field{margin-top:4px;padding:10px;border-radius:8px;border:1px dashed color-mix(in srgb,var(--st-warning,#b88200) 45%,transparent);background:color-mix(in srgb,var(--st-warning,#b88200) 7%,transparent)}

/* ---- New-request mode chooser (manual vs AI helper) --------------------- */
.mode-chooser{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:760px;margin:8px auto 0}
.mode-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:start;padding:22px 20px;border:1px solid var(--border,#2a2e36);border-radius:14px;background:var(--surface,#1c1f26);cursor:pointer;transition:border-color .15s ease,transform .12s ease,box-shadow .15s ease}
.mode-card:hover{border-color:var(--primary,#c9a86a);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.mode-card:focus-visible{outline:2px solid var(--primary,#c9a86a);outline-offset:2px}
.mode-card.is-reco{border-color:color-mix(in srgb,var(--primary,#c9a86a) 55%,transparent);background:color-mix(in srgb,var(--primary,#c9a86a) 7%,transparent)}
.mode-card .mode-ic{color:var(--primary,#c9a86a)}
.mode-card .mode-name{font-weight:700;font-size:15px}
.mode-card .mode-desc{font-size:12.5px;line-height:1.7;color:var(--muted,#9aa0ab)}
.mode-card .mode-badge{position:absolute;inset-inline-end:14px;inset-block-start:14px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;color:var(--primary-contrast,#1c1f26);background:var(--primary,#c9a86a)}

/* ===================================================================
   Access administration — Roles/Positions + permission matrix
   (user-management upgrade). RTL-first; theme tokens reused.
   =================================================================== */
.users-filters{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:var(--sp-3);align-items:end;
  padding:var(--sp-4);margin-bottom:var(--sp-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md,12px)}
.users-filters .ff{display:flex;flex-direction:column;gap:4px;margin:0}
.users-filters .ff>span{font-size:var(--type-caption);color:var(--text-2)}
.users-filters .ff input,.users-filters .ff select{padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--text-1);font:inherit}
.users-filters-actions{display:flex;gap:var(--sp-2)}
@media (max-width:900px){.users-filters{grid-template-columns:1fr 1fr}.users-filters-actions{grid-column:1/-1}}

.email-cell{font-family:monospace;font-size:var(--type-caption);color:var(--text-2)}
.flag-pill{display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2)}
.flag-pill.on{background:var(--st-success-soft);color:var(--st-success);border-color:color-mix(in srgb,var(--st-success) 35%,transparent)}
.flag-pill.off{background:var(--surface-2);color:var(--text-2)}
.flag-pill.clickable{cursor:pointer}
.flag-pill.clickable:hover{border-color:var(--border-strong)}
.empty-row{text-align:center;color:var(--text-2);padding:var(--sp-6)!important}

/* Roles list */
.role-name-cell{display:flex;flex-direction:column;gap:3px}
.role-name-cell .status-pill{align-self:flex-start}
.role-code-sub{font-family:monospace;font-size:11px;color:var(--text-3,var(--text-2));opacity:.8}

/* Matrix */
.matrix-meta{margin:var(--sp-3) 0}
.matrix-meta .req{color:var(--st-danger);font-style:normal}
.matrix-note{display:flex;align-items:center;gap:8px;padding:10px 14px;margin:var(--sp-3) 0;border-radius:10px;
  background:var(--primary-soft);border:1px solid var(--border);color:var(--text-1);font-size:var(--type-caption)}
.matrix-note svg{color:var(--primary);flex:0 0 auto}
.matrix-tools{display:flex;justify-content:flex-end;margin-bottom:var(--sp-3)}
.matrix-search{display:flex;flex-direction:column;gap:4px;min-width:260px}
.matrix-search>span{font-size:var(--type-caption);color:var(--text-2)}
.matrix-search input{padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--text-1);font:inherit}
.matrix-wrap{overflow-x:auto}
.matrix-table{width:100%;min-width:640px}
.matrix-table th.matrix-col{text-align:center;white-space:nowrap}
.matrix-table th.matrix-mod-h{text-align:start}
.matrix-mod{font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}
.matrix-cell{text-align:center;width:90px}
.matrix-cell.na{background:repeating-linear-gradient(135deg,transparent,transparent 6px,var(--border) 6px,var(--border) 7px);opacity:.5}
.matrix-cell .cell-dash{color:var(--text-2);opacity:.5}
.cell-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px}
.cell-mark.on{background:var(--st-success-soft);color:var(--st-success)}
.cell-mark.off{color:var(--text-2);opacity:.35}
.cell-chk input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
.matrix-group-row td{background:var(--surface-2);font-weight:700;font-size:var(--type-caption);
  color:var(--primary);letter-spacing:.02em;padding:8px 14px!important;text-transform:none}
.btn.xs{padding:2px 6px;font-size:11px;line-height:1;min-height:0}

/* Mobile: a wide modules×permissions grid is unreadable (column headers scroll
   out of view, so a bare checkbox means nothing). Restack as per-module cards
   where EVERY checkbox is labelled with its permission name (View/Create/…). */
@media (max-width:920px){
  .matrix-wrap{overflow-x:visible}
  .matrix-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .matrix-table,.matrix-table tbody.matrix-group,.matrix-table tr,.matrix-table td{display:block;width:auto}
  .matrix-table tbody.matrix-group{margin-bottom:14px}
  .matrix-group-row{margin:0 0 8px}
  .matrix-group-row td{border-radius:8px}
  .matrix-table tr:not(.matrix-group-row){
    background:var(--surface);border:1px solid var(--border);border-radius:10px;
    margin-bottom:8px;padding:10px 12px}
  .matrix-table td.matrix-mod{
    font-weight:700;font-size:13.5px;justify-content:flex-start;gap:10px;
    margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid var(--border)}
  .matrix-table td.matrix-cell{
    width:auto;display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:8px 2px;min-height:40px;text-align:start}
  .matrix-table td.matrix-cell::before{
    content:attr(data-perm);font-size:12.5px;color:var(--ink-2);font-weight:500}
  .matrix-table td.matrix-cell.na{opacity:.45;background:none}
  .matrix-table td.matrix-cell.na::before{color:var(--muted)}
  .cell-chk input{width:20px;height:20px}
}

/* Supporting-documents section — rows (form staging + detail view) */
.req-docs-section{margin-top:12px}
.req-doc-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;background:var(--bg-2);
  border:1px solid var(--border);border-radius:10px;margin-bottom:8px}
.req-doc-row:last-child{margin-bottom:0}
.req-doc-row.is-missing{opacity:.7}
/* Name + meta stacked in a flexible info column; the actions get pushed to the end. */
.req-doc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.req-doc-row .req-doc-name{min-width:0;font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.req-doc-row .req-doc-meta{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Push the action buttons to the row's end (right in LTR, left in RTL). */
.req-doc-actions{display:flex;align-items:center;gap:6px;flex:none;margin-inline-start:auto}
.req-doc-actions button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;
  border:1px solid var(--border);background:var(--bg-1);cursor:pointer;font:inherit;
  transition:background var(--dur-fast,.12s) ease,border-color var(--dur-fast,.12s) ease,color var(--dur-fast,.12s) ease,transform var(--dur-fast,.12s) ease}
.req-doc-actions button:active{transform:translateY(1px)}
.req-doc-actions button svg,.req-doc-actions button .ic{width:16px;height:16px;display:block}
/* Download = always-visible accent icon button (icon forced visible so it can't render transparent). */
.req-doc-actions .req-doc-dl{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 42%,var(--border));
  background:color-mix(in srgb,var(--primary) 10%,var(--bg-1))}
.req-doc-actions .req-doc-dl svg{stroke:currentColor;fill:none}
.req-doc-actions .req-doc-dl:hover{background:color-mix(in srgb,var(--primary) 20%,transparent);border-color:var(--primary)}
/* Delete = neutral icon button, red on hover. */
.req-doc-actions .req-doc-del{color:var(--muted)}
.req-doc-actions .req-doc-del:hover{color:var(--st-danger);border-color:color-mix(in srgb,var(--st-danger) 40%,transparent);background:color-mix(in srgb,var(--st-danger) 8%,transparent)}
.req-docs-empty{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:10px 2px}
.req-docs-view .req-docs-head{margin-top:2px}

/* Committee picker popup (multi-committee voter chooses which committee) */
.cmte-picker-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);opacity:0;transition:opacity var(--dur-base,.2s) ease;padding:var(--sp-4)}
.cmte-picker-overlay.open{opacity:1}
.cmte-picker{width:min(440px,92vw);background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);padding:var(--sp-5);transform:translateY(8px);transition:transform var(--dur-base,.2s) ease}
.cmte-picker-overlay.open .cmte-picker{transform:translateY(0)}
.cmte-picker-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--type-h2,16px);color:var(--ink);margin-bottom:var(--sp-4)}
.cmte-picker-head svg{color:var(--primary)}
.cmte-picker-list{display:flex;flex-direction:column;gap:8px}
.cmte-picker-row{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:12px 14px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:10px;cursor:pointer;color:var(--ink);
  transition:all var(--dur-fast,.12s) ease}
.cmte-picker-row:hover{border-color:var(--primary);background:var(--surface)}
.cmte-picker-row:active{transform:translateY(1px)}
.cmte-picker-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--surface);color:var(--primary);flex:none}
.cmte-picker-name{flex:1;min-width:0;font-weight:600;font-size:14px}
.cmte-picker-meta{font-size:11.5px;color:var(--muted);flex:none}
.cmte-picker-actions{display:flex;justify-content:flex-end;margin-top:var(--sp-4)}

/* ===================================================================
   Users admin — collapsible filter panel, mobile card table, responsive form
   =================================================================== */
.users-toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-3)}
.filter-badge{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;margin-inline-start:6px;
  border-radius:999px;background:var(--primary);color:var(--brand-dark);font-size:10px;font-weight:700;line-height:1}
.btn.is-active{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}

/* Filters live in a panel that slides open from the search toggle. */
.users-filters-panel{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .32s cubic-bezier(.4,0,.2,1),opacity .24s ease,margin .24s ease;margin-bottom:0}
.users-filters-panel.open{max-height:560px;opacity:1;margin-bottom:var(--sp-4)}
.users-filters-panel .users-filters{margin-bottom:0}

/* Mobile: turn the wide users table into readable stacked cards. */
@media (max-width:760px){
  .hide-sm{display:none}
  .users-filters{grid-template-columns:1fr !important}
  .users-filters-actions{grid-column:1/-1;display:flex;gap:var(--sp-2)}
  .users-filters-actions .btn{flex:1}

  section[data-screen="users"] .table-wrap > header h3{font-size:14px}
  section[data-screen="users"] .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  section[data-screen="users"] .data-table,
  section[data-screen="users"] .data-table tbody,
  section[data-screen="users"] .data-table tr,
  section[data-screen="users"] .data-table td{display:block;width:auto}

  /* Compact list: each user collapses to ONE tappable flex row —
     [avatar] Name ········· [status badge] ›
     Every detailed field (email, phone, roles, app user, last login, 2FA,
     actions) lives on the user's own page. Tap anywhere to open it. */
  section[data-screen="users"] .data-table tr.user-row{
    display:flex;align-items:center;gap:10px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    margin-bottom:10px;padding:12px 14px;min-height:60px;cursor:pointer;
    transition:border-color .15s ease, background .15s ease}
  section[data-screen="users"] .data-table tr.user-row:hover,
  section[data-screen="users"] .data-table tr.user-row:focus-visible{
    border-color:var(--border-strong);background:var(--surface-raised);outline:none}
  /* Hide everything except the name cell (1) and the status cell (9). */
  section[data-screen="users"] .data-table td:nth-child(2),  /* family */
  section[data-screen="users"] .data-table td:nth-child(3),  /* email */
  section[data-screen="users"] .data-table td:nth-child(4),  /* phone */
  section[data-screen="users"] .data-table td:nth-child(5),  /* roles */
  section[data-screen="users"] .data-table td:nth-child(6),  /* app user */
  section[data-screen="users"] .data-table td:nth-child(7),  /* last login */
  section[data-screen="users"] .data-table td:nth-child(8),  /* 2fa */
  section[data-screen="users"] .data-table td.actions-cell   /* actions */
    {display:none}
  section[data-screen="users"] .data-table tr.user-row td{
    padding:0;border:0;min-height:0}
  section[data-screen="users"] .data-table td.user-name-cell{
    display:flex;align-items:center;gap:10px;flex:1;min-width:0}
  section[data-screen="users"] .data-table td.user-name-cell::before{content:''}
  section[data-screen="users"] .data-table td.user-name-cell .user-name-link{
    flex:0 1 auto;font-size:16px;font-weight:700;text-align:start;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* status cell = just the badge, pushed to the trailing edge */
  section[data-screen="users"] .data-table td:nth-child(9){
    display:flex;flex:none;align-items:center}
  section[data-screen="users"] .data-table td:nth-child(9)::before{content:''}
  /* chevron affordance at the very end of the row */
  section[data-screen="users"] .data-table tr.user-row::after{
    content:"\203A";flex:none;color:var(--muted);font-size:20px;line-height:1;
    font-weight:700;margin-inline-start:2px}
  [dir="rtl"] section[data-screen="users"] .data-table tr.user-row::after{content:"\2039"}

  /* Roles/positions table → stacked cards on mobile (same treatment as the
     users list). Without this the 3 columns (name / count / actions) squash
     into cramped table cells with the action icons stranded on one side. */
  section[data-screen="roles"] .table-wrap > header h3{font-size:14px}
  section[data-screen="roles"] .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  section[data-screen="roles"] .data-table,
  section[data-screen="roles"] .data-table tbody,
  section[data-screen="roles"] .data-table tr,
  section[data-screen="roles"] .data-table td{display:block;width:auto}
  section[data-screen="roles"] .data-table tr{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    margin-bottom:10px;padding:14px}
  section[data-screen="roles"] .data-table td{padding:0;border:0}
  section[data-screen="roles"] .data-table td.role-name-td{flex:1 1 100%}
  section[data-screen="roles"] .data-table td.tnum{
    flex:0 0 auto;color:var(--muted);font-size:12.5px;text-align:start}
  section[data-screen="roles"] .data-table td.tnum::before{
    content:attr(data-label) ": ";color:var(--muted);font-weight:600}
  section[data-screen="roles"] .data-table td.role-actions-td{
    flex:1 1 auto;display:flex;justify-content:flex-end}
  section[data-screen="roles"] .data-table .row-actions-inline{gap:6px}
  section[data-screen="roles"] .data-table .row-actions-inline .btn{min-width:40px;min-height:40px}
}

/* Responsive editor / add-user form. */
@media (max-width:760px){
  .user-form-grid{grid-template-columns:1fr !important}
  .editor-wrap,.editor-wrap.narrow{max-width:100%;padding-inline:12px}
  .editor-actions{flex-direction:column-reverse;gap:8px}
  .editor-actions .btn{width:100%}
  .editor-head{flex-wrap:wrap}
}

/* ---- Multi-role / multi-committee assignment control (add-user form) ---- */
.scope-block{margin-top:var(--sp-3)}
.scope-label{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:8px;display:block}
.chip-set{display:flex;flex-wrap:wrap;gap:8px}
.chip-toggle{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-2);color:var(--ink);cursor:pointer;font:inherit;font-size:13px;
  transition:all var(--dur-fast,.12s) ease;min-height:40px}
.chip-toggle:hover{border-color:var(--border-strong)}
.chip-toggle .chip-check{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--border-strong);
  display:grid;place-items:center;flex:none;color:transparent;transition:all .12s ease}
.chip-toggle.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.chip-toggle.on .chip-check{background:var(--primary);border-color:var(--primary);color:var(--brand-dark)}
.chip-toggle.on .chip-check svg{width:11px;height:11px}
/* F3: per-committee chairman toggles (under the committee chips). */
.chair-rows{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.chair-row{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;
  background:var(--bg-2);border:1px solid var(--border);font-size:12.5px;color:var(--ink-2);cursor:pointer}
.chair-row input{width:17px;height:17px;flex:none;cursor:pointer}
.chair-row .chair-row-label{display:inline-flex;align-items:center;gap:6px}
.chair-row .ic-sm{width:14px;height:14px;color:var(--primary);flex:none}
.chair-row.is-chair{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.chair-row.is-disabled{opacity:.6;cursor:not-allowed}
.chair-row.is-disabled input{cursor:not-allowed}
.chair-row .chair-row-note{font-size:11.5px;color:var(--muted);margin-inline-start:auto;text-align:end}
/* Trust Center — clickable cards (now buttons) + detail/editor */
.trust-cert.is-clickable{cursor:pointer;text-align:start;font:inherit;width:100%;display:block}
.trust-cert.is-clickable:hover{border-color:var(--border-strong)}
.trust-detail-title{display:flex;align-items:center;gap:10px;font-size:20px;margin:0 0 6px}
.trust-detail-meta{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.trust-detail-desc{font-size:14px;line-height:1.7;color:var(--ink);margin:0 0 14px}
.trust-detail-docs{display:flex;align-items:center;gap:7px;font-size:12.5px;padding-top:12px;border-top:1px solid var(--border)}
.trust-ic-grid{display:flex;flex-wrap:wrap;gap:8px}
.trust-ic-opt{width:40px;height:40px;border-radius:9px;border:1px solid var(--border);background:var(--bg-2);
  cursor:pointer;display:grid;place-items:center;color:var(--ink-2);transition:all .12s ease}
.trust-ic-opt:hover{border-color:var(--border-strong)}
.trust-ic-opt.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
/* Trust Center document/resource lists (editor + detail) */
.trust-doc-block{margin-top:12px}
.trust-doc-head{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.trust-doc-head .btn{margin-inline-start:auto}
.trust-doc-list{display:flex;flex-direction:column;gap:6px}
.trust-doc-row{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;background:var(--bg-2);
  border:1px solid var(--border);font-size:12.5px;color:var(--ink);text-decoration:none}
.trust-doc-row:hover{border-color:var(--border-strong)}
.trust-doc-ic{color:var(--primary);flex:none;display:inline-flex}
.trust-doc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trust-doc-dl{color:var(--primary);flex:none;display:inline-flex}
.trust-doc-empty{font-size:12px;color:var(--muted);padding:4px 2px}
.chip-toggle.chair{border-style:dashed}
.scope-committees{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}

/* ---- Mobile spacing pass: dashboard hero + stat rhythm on small screens.
   Tightens the over-tall vertical gaps the hero/grid show on phones. ---- */
@media (max-width:640px){
  .main{padding:14px 14px 24px}
  .page-hero{margin:0 0 var(--sp-4);padding:0 0 var(--sp-3)}
  .page-hero .greet-eyebrow{font-size:11px;margin-bottom:6px}
  .page-hero .greet-sub{font-size:var(--type-body);max-width:100%}
  .page-hero-row{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .page-hero-actions{margin-inline-start:0;width:100%}
  .page-hero-actions .btn{flex:1 1 auto;justify-content:center}
  .stats-grid{gap:10px;margin-bottom:var(--sp-4)}
  .stat-card{padding:14px}
  .section-head,.sec-head{margin-bottom:var(--sp-3)}
}
@media (max-width:380px){
  .stats-grid{grid-template-columns:1fr}
}

/* ============================================================
   USER MANAGEMENT — restyled after Saleh's reference theme
   (dark, rounded cards, a clean accented list, ONE bold gradient
   CTA), rendered in the Almousa beige/gold brand + brand fonts
   instead of the reference's pink. 2026-06-17.
   ============================================================ */

/* Clickable user name in the list */
/* Desktop: keep this a normal table cell (NOT display:flex) so it aligns with
   the sibling cells via vertical-align:middle — a flex <td> drops out of the
   row's cell box and floats its content to the top (the misalignment). The
   avatar (inline-grid) + name already carry vertical-align:middle + margin.
   The mobile users block re-flexes this cell for the card layout. */
.user-name-cell{white-space:nowrap}
.user-name-link{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--ink);font-weight:600;vertical-align:middle;
  border-bottom:1px solid transparent;transition:color .15s var(--ease-out),border-color .15s var(--ease-out);
}
.user-name-link:hover{color:var(--primary);border-bottom-color:color-mix(in srgb,var(--primary) 45%,transparent)}
.user-name-link:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}

/* Whole row opens the user's page (desktop affordance; mobile handled in the
   max-width:760px block). Action buttons/links stopPropagation via the inline
   handler's closest('button,a') guard, so they still work independently. */
.data-table tr.user-row{cursor:pointer;transition:background .15s var(--ease-out)}
.data-table tr.user-row:hover{background:var(--surface-raised)}
.data-table tr.user-row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--primary) 55%,transparent)}

/* The one prominent gold-gradient CTA (the reference's bold accent button) */
.btn.grad{
  background:linear-gradient(135deg,var(--primary-hi),var(--primary));
  color:var(--brand-dark);border:0;font-weight:700;
  box-shadow:0 8px 20px -8px var(--primary-glow), var(--inset-light);
}
.btn.grad:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 10px 26px -8px var(--primary-glow)}
.btn.grad:active{transform:translateY(0)}
.btn.grad .ic{color:var(--brand-dark)}

/* ---- User detail page (#userDetailBody) ---- */
.ud-hero{display:flex;align-items:center;gap:16px;position:relative;overflow:hidden}
.ud-hero::before{ /* soft gold wash across the header, echoing the ref's accent band */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,transparent),transparent 62%);
}
.ud-avatar{flex:none;position:relative;z-index:1}
.ud-avatar-img,.ud-avatar-text{
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;object-fit:cover;
  font-family:var(--font-display-ar);font-weight:700;font-size:27px;
  background:var(--primary-soft);color:var(--primary);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 42%,transparent),
             0 0 0 7px color-mix(in srgb,var(--primary) 9%,transparent);
}
[dir="ltr"] .ud-avatar-text{font-family:var(--font-display-en)}
.ud-id{flex:1;min-width:0;z-index:1}
.ud-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:5px}
.ud-name{font-family:var(--font-display-ar);font-size:23px;font-weight:700;color:var(--ink);margin:0 0 9px;line-height:1.1;letter-spacing:-0.01em}
[dir="ltr"] .ud-name{font-family:var(--font-display-en)}
.ud-roles{display:flex;flex-wrap:wrap;gap:6px}
.ud-status{flex:none;align-self:flex-start;z-index:1}

.ud-fields{display:flex;flex-direction:column;padding:2px 2px}
.ud-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 4px;border-bottom:1px solid var(--border)}
.ud-row:last-child{border-bottom:0}
.ud-label{font-size:12.5px;color:var(--muted);font-weight:500;flex:none}
.ud-val{font-size:13.5px;color:var(--ink);font-weight:600;text-align:end;min-width:0;overflow-wrap:anywhere}

.ud-actions{display:flex;gap:10px;flex-wrap:wrap}
.ud-actions .btn{flex:1 1 auto;justify-content:center;min-height:46px}
@media (max-width:640px){
  /* Stack the hero: avatar on top, full-width identity column below so the role
     pills get the whole card width instead of being squeezed beside the avatar
     (which made long pills wrap into circles). Status sits top-trailing. */
  .ud-hero{flex-direction:column;align-items:flex-start;gap:14px}
  .ud-id{width:100%}
  .ud-roles{width:100%}
  .ud-status{position:absolute;top:14px;inset-inline-end:14px;align-self:auto}
  .ud-actions{flex-direction:column}
  .ud-actions .btn{width:100%}
}

/* ============================================================
   ADMIN 2FA (TOTP) — enrollment + step-up modal. Built by
   openTwofaModal(); self-contained overlay. Uses brand tokens;
   the QR keeps a light plate in every theme so it always scans.
   ============================================================ */
.twofa-overlay{
  position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;
  background:color-mix(in srgb,var(--brand-dark,#1a1c22) 72%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:twofaFade .16s var(--ease-out,ease)}
@keyframes twofaFade{from{opacity:0}to{opacity:1}}
.twofa-card{
  position:relative;width:100%;max-width:440px;max-height:92vh;overflow:auto;
  background:var(--surface-raised,var(--surface));border:1px solid var(--border-strong,var(--border));
  border-radius:18px;padding:22px 22px 18px;box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:twofaPop .18s var(--ease-out,ease)}
@keyframes twofaPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.twofa-x{position:absolute;inset-inline-end:12px;inset-block-start:12px;width:34px;height:34px;
  border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.twofa-x:hover{background:var(--surface);color:var(--ink)}
.twofa-head{text-align:center;margin-bottom:14px}
.twofa-badge{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:var(--primary-soft);color:var(--primary);margin-bottom:8px}
.twofa-head h3{margin:0 0 4px;font-size:18px}
.twofa-sub,.twofa-step{color:var(--muted);font-size:13px;line-height:1.6;margin:0}
.twofa-body{display:flex;flex-direction:column;gap:12px}
.twofa-step{margin:2px 0}
.twofa-loading{text-align:center;color:var(--muted);padding:24px 0;font-size:13px}
.twofa-qr{align-self:center;background:#fff;padding:12px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.twofa-qr img{display:block;width:180px;height:180px}
.twofa-secret{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.twofa-secret-label{flex:1 1 100%;font-size:11.5px;color:var(--muted)}
.twofa-secret code{font-family:monospace;font-size:13px;letter-spacing:.5px;color:var(--ink);word-break:break-all;flex:1}
.twofa-codes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.twofa-codes li{font-family:monospace;font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:5px 8px;text-align:center}
.twofa-code-field{display:flex;flex-direction:column;gap:6px}
.twofa-code-field span{font-size:12.5px;color:var(--muted)}
.twofa-code-field input{font-family:monospace;font-size:24px;letter-spacing:10px;text-align:center;
  padding:12px;min-height:52px;font-variant-numeric:tabular-nums}
.twofa-err{min-height:18px;color:var(--st-danger,#e5484d);font-size:12.5px;text-align:center}
.twofa-switch{align-self:center;background:none;border:0;color:var(--primary);font:inherit;font-size:12.5px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:2px}
.twofa-switch:disabled{opacity:.5;cursor:default}
.twofa-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.twofa-actions .btn{min-height:44px}
@media (max-width:520px){
  .twofa-card{padding:18px 16px 16px;border-radius:16px}
  .twofa-actions{flex-direction:column-reverse}
  .twofa-actions .btn{width:100%}
  .twofa-codes{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .twofa-overlay,.twofa-card{animation:none}
}

/* Profile 2FA card (optional for all users, mandatory for admin) */
.profile-2fa-card{margin-top:14px}
.profile-2fa-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.profile-2fa-head>h3,.profile-2fa-head h3{margin:0;font-size:15px;color:var(--ink)}
.profile-2fa-head .ic-sm{color:var(--primary);flex:none;margin-top:2px;width:20px;height:20px}