/* assets/css/tweaks.css
   Holds: form-control style system, button classes, sidebar + chip + topbar styles,
   print stylesheet for the report screens, and minor typography adjustments. */

/* ─── Form-control style system ─────────────────────────────────────── */
/* NOTE on specificity: Tailwind CDN injects its preflight `<style>` tag at
   runtime, which ends up after this stylesheet in the DOM. Tailwind's
   preflight resets `textarea, input, select` padding/margin/font/color/
   line-height to 0/inherit. To win the cascade tiebreaker, all base form
   rules below are scoped under `body` (specificity 0,0,2 vs Tailwind's
   0,0,1). */

body input[type="text"],
body input[type="number"],
body input[type="email"],
body input[type="search"],
body input[type="url"],
body input[type="tel"],
body textarea,
body select {
  width: 100%;
  border: 1.5px solid #e2e8f0;        /* slate-200 */
  border-radius: 10px;
  background: #fafbfc;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #0f172a;                     /* slate-900 */
  font-family: inherit;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  font-feature-settings: 'cv02','cv03';
}
body select { padding: 9px 12px; cursor: pointer; }
body input[type="number"] { padding: 9px 12px; font-variant-numeric: tabular-nums; }
body textarea {
  padding: 16px 18px;
  line-height: 1.6;
  resize: vertical;
  min-height: 56px;
}

body input:focus, body textarea:focus, body select:focus {
  outline: none;
  border-color: #2563eb;              /* brand-600 */
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}

body input:disabled, body textarea:disabled, body select:disabled {
  background: #f1f5f9;                /* slate-100 */
  color: #64748b;
  cursor: not-allowed;
  border-color: #e2e8f0;
}

body input:invalid:not(:focus):not(:placeholder-shown),
body textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: #dc2626;              /* rose-600 */
}

body input[type="checkbox"], body input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: #2563eb;
  cursor: pointer;
}

/* ─── .field utility (label + input grouping) ────────────────────────── */

.field { display: block; }
.field > label { display: block; font-size: 12px; font-weight: 600; color: #0f172a; margin-bottom: 6px; }
.field > .helper { font-size: 11px; color: #64748b; margin-top: 4px; }
.field > .req { color: #dc2626; margin-left: 2px; }
.field > .err { font-size: 12px; color: #dc2626; margin-top: 4px; }

/* ─── Button classes ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px; font-weight: 600;
  line-height: 1.2;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary   { background: #1d4ed8; color: white; }
.btn-primary:hover:not(:disabled)   { background: #1e40af; }
.btn-secondary { background: white;  color: #334155; border-color: #cbd5e1; }
.btn-secondary:hover:not(:disabled) { background: #f8fafc; }
.btn-ghost     { background: transparent; color: #1d4ed8; }
.btn-ghost:hover:not(:disabled)     { background: #eff6ff; }
.btn-danger    { background: #dc2626; color: white; }
.btn-danger:hover:not(:disabled)    { background: #b91c1c; }
.btn-sm        { padding: 6px 10px; font-size: 12px; border-radius: 8px; }

/* ─── Shell layout ───────────────────────────────────────────────────── */

.shell-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 175px); /* topbar (~58px) + roadmap strip (~117px) */
}
@media (max-width: 1023px) {
  .shell-grid { grid-template-columns: 1fr; }
  .shell-sidebar { border-right: none !important; border-bottom: 1px solid #e2e8f0; }
}
.shell-sidebar  { position: sticky; top: 98px; height: calc(100vh - 98px); align-self: start; transition: top 0.25s ease, height 0.25s ease; }
/* Expose padding as CSS variables so descendants (e.g. the assessor sticky
   Provisional Score bar) can bleed past the padding via negative margins
   without hard-coding the numbers. See SubmissionsPage.vue `.sticky-score`. */
.shell-main     { --shell-main-px: 28px; --shell-main-py: 24px;
                  padding: var(--shell-main-py) var(--shell-main-px); min-width: 0; }
.shell-topbar   { position: sticky; top: 0;   z-index: 30; }
/* Phone: 28px of padding each side costs 56px of a 360px screen — a sixth of it,
   spent on whitespace. Keep in sync with useBreakpoints (md - 0.02 = 767.98). */
@media (max-width: 767.98px) {
  .shell-main { --shell-main-px: 12px; --shell-main-py: 14px; }
}
.shell-progress { position: sticky; top: 58px; z-index: 20; background: #fff; transition: transform 0.25s ease; will-change: transform; }
.shell-progress--hidden { transform: translateY(-100%); }

/* ─── Sidebar collapse-to-rail (assessor + entity workspaces) ────────
   Hoisted from SubmissionsPage.vue's scoped style so the entity
   workspace inherits the same behavior without duplicating markup. */
.shell-grid { transition: grid-template-columns 0.25s ease; }
@media (min-width: 1024px) {
  .shell-grid.sidebar-collapsed { grid-template-columns: 48px 1fr; }
}
.shell-sidebar { overflow: hidden; }
.shell-sidebar > nav { position: relative; height: 100%; display: flex; flex-direction: column; }
.sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.sidebar-toggle {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: none; background: transparent;
  color: #64748b; cursor: pointer; flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.sidebar-toggle:hover { background: #f1f5f9; color: #1d4ed8; }
.sidebar-toggle--floating {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  background: #fff; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  z-index: 2;
}
.sidebar-collapsed .sidebar-toggle--floating { right: 50%; transform: translate(50%, -50%); }

/* ─── V4 shell colorization (brand-blue topbar + soft-blue sidebar) ────
   Selected from tasks/task-2026-05-23-color-design-language/shell-backgrounds.html.
   Overrides the Tailwind utilities the page templates apply (bg-white,
   text-slate-*, border-slate-*) so every page using `shell-topbar` /
   `shell-sidebar` — assessor *and* entity — gets the same shell, without
   per-page template edits. */
.shell-topbar.bg-white {
  background: #3a5488 !important;   /* calmer, desaturated steel-blue */
  border-bottom-color: #2f4674 !important;
  color: #fff;
}
.shell-topbar .text-slate-900 { color: #fff !important; }
.shell-topbar .text-slate-700 { color: #dbeafe !important; }
.shell-topbar .text-slate-600 { color: #e0e7ff !important; }
.shell-topbar .text-slate-500 { color: #bfdbfe !important; }
.shell-topbar .text-brand-700 { color: #fde68a !important; }   /* gold UGQA mark */
.shell-topbar .bg-slate-100 {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}
.shell-topbar .btn-primary {
  background: #fff !important;
  color: #3a5488 !important;
}
.shell-topbar .btn-primary:hover:not(:disabled) {
  background: #eff6ff !important;
  color: #1e3a8a !important;
}
.shell-topbar .btn-ghost {
  color: #dbeafe !important;
}
.shell-topbar .btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
.shell-sidebar.bg-white {
  background: #f6f8ff !important;
  border-right-color: #dbeafe !important;
}

/* ─── Sidebar ────────────────────────────────────────────────────────── */

.sidebar-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #64748b;
  padding: 14px 16px 6px;
  position: sticky; top: 0; background: white; z-index: 1;
}
.sidebar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; margin: 0 8px;
  border-radius: 8px; font-size: 13px;
  color: #334155; cursor: pointer;
  border: none; background: transparent;
  width: calc(100% - 16px); text-align: left;
  font-family: inherit;
  transition: background 0.15s ease;
}
.sidebar-row:hover { background: #f8fafc; }
/* Hover-to-read: long sub names are ellipsis-truncated to fit the row.
   On hover the label un-truncates (wraps to the full name) and grows
   slightly, animated, so users can read names that don't fit.
   A 100ms intent delay filters out the cascade-jiggle when the mouse
   passes quickly over multiple rows — only rows you actually pause on
   un-truncate. The un-truncate itself is driven by a 0.001s keyframe
   animation so the white-space / overflow flip honours the same delay
   as the font transitions (CSS transition-delay doesn't apply to
   non-animatable properties like white-space, but animation-delay
   does).

   NOTE: the hover-redesign overrides for the cycles page rubric
   sidebar (no font-size change, bold, underline) live in
   src/pages/SubmissionsPage.vue's <style> block — Vite's dev server
   only honours HMR for files under src/, which is why the redesign
   rules are co-located there rather than here. */
.sidebar-row span.label-text {
  transition: font-size 0.22s ease-out, font-weight 0.22s ease-out;
}
.sidebar-row:hover span.label-text {
  font-size: 14px;
  font-weight: 500;
  transition-delay: 0.1s, 0.1s;
  animation: sidebar-row-unwrap 0.001s linear 0.1s forwards;
}
@keyframes sidebar-row-unwrap {
  to {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}
.sidebar-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #2563eb; }
.sidebar-row.active {
  background: #dbeafe;     /* brand-100 */
  color: #1e3a8a;          /* brand-900 */
  font-weight: 500;
  position: relative;
}
.sidebar-row.active::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; background: #2563eb; border-radius: 2px;
}
.sidebar-bubble {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.sidebar-bubble--submitted   { background: #dcfce7; color: #166534; }   /* emerald-100/700 */
.sidebar-bubble--has-new-questions{ background: #fef3c7; color: #92400e; }   /* amber-100/700 */
.sidebar-bubble--not-started { background: #e2e8f0; color: #475569; }
.sidebar-bubble--approved    { background: #dcfce7; color: #166534; }
.sidebar-bubble--all-approved{ background: #dcfce7; color: #166534; }
.sidebar-bubble--pending     { background: #fef3c7; color: #92400e; }
.sidebar-bubble--idle        { background: #e2e8f0; color: #475569; }
/* Closed: the cycles stage is over, so nothing is awaiting review any more.
   Neutral rather than green — these subs were never approved, and colouring
   them as approved would assert something that did not happen. */
.sidebar-bubble--closed      { background: #e2e8f0; color: #475569; }
.sidebar-bubble--locked-confirmed { background: #dcfce7; color: #166534; }
.sidebar-bubble--locked-override  { background: #ede9fe; color: #6b21a8; }   /* violet-100/800 */
.sidebar-row.active .sidebar-bubble { background: #2563eb; color: white; }
.sidebar-row span.label-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sidebar-dot--submitted, .sidebar-dot--all-approved      { background: #16a34a; }
.sidebar-dot--has-new-questions, .sidebar-dot--pending       { background: #f59e0b; }
.sidebar-dot--not-started, .sidebar-dot--idle            { background: #cbd5e1; }
.sidebar-dot--closed                                     { background: #94a3b8; }
.sidebar-dot--approved                                   { background: #16a34a; }
.sidebar-dot--locked-confirmed                           { background: #16a34a; }
.sidebar-dot--locked-override                            { background: #8b5cf6; }

/* ─── Progress strip (15 chips) ─────────────────────────────────────── */

.progress-strip { background: white; border-bottom: 1px solid #e2e8f0; padding: 14px 28px; }
.progress-caption { font-size: 12px; color: #475569; margin-bottom: 10px; }
.progress-caption strong { color: #0f172a; font-weight: 600; }
.progress-chips { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; }
.progress-chip {
  height: 30px; border-radius: 6px; border: none; cursor: pointer;
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: white;
  transition: transform 0.08s, box-shadow 0.08s;
}
.progress-chip:hover { transform: translateY(-1px); }
.progress-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.30); }
.progress-chip--submitted, .progress-chip--all-approved, .progress-chip--locked-confirmed { background: #16a34a; }
.progress-chip--has-new-questions, .progress-chip--pending                                { background: #f59e0b; }
.progress-chip--not-started, .progress-chip--idle                                         { background: #cbd5e1; color: #475569; }
.progress-chip--approved                                                                    { background: #16a34a; }
.progress-chip--locked-override                                                           { background: #8b5cf6; }
/* REQ-C4: closed-successfully chip — lighter emerald with dark text
   so it's distinguishable from `submitted` at a glance. */
.progress-chip--closed                                                                    { background: #6ee7b7; color: #064e3b; }
.progress-chip.active { box-shadow: 0 0 0 2px #1d4ed8, 0 0 0 4px white; }

/* ─── Top-right "More" menu ─────────────────────────────────────────── */

.top-menu { position: relative; }
.top-menu-panel {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: white; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15);
  width: 200px; padding: 6px; z-index: 40;
}
.top-menu-panel a {
  display: block; padding: 8px 12px; font-size: 13px; color: #334155;
  border-radius: 6px; text-decoration: none;
}
.top-menu-panel a:hover { background: #f8fafc; color: #0f172a; }
.top-menu-panel a.disabled { opacity: 0.4; pointer-events: none; }

/* ─── Print stylesheet (unchanged behaviour) ───────────────────────── */

@media print {
  body { background: white !important; }
  .no-print { display: none !important; }
  .shell-topbar, .shell-progress, .shell-sidebar { display: none !important; }
  .shell-main { padding: 0 !important; }
  .print-page {
    width: 210mm; min-height: 297mm; padding: 18mm 16mm;
    margin: 0 auto; box-shadow: none !important; border: none !important;
  }
  a { color: inherit; text-decoration: none; }
}

/* "Print page" surface used by both report screens — A4-ish white card. */
.print-page {
  background: white;
  width: 210mm;
  min-height: 297mm;
  margin: 1.5rem auto;
  padding: 18mm 16mm;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Highlight-on-cite for the verification view. */
.cite-highlight {
  background: #fef3c7;
  padding: 0 2px;
  border-radius: 2px;
}
.cite-highlight sup {
  font-size: 0.6rem;
  margin-left: 2px;
  color: #b45309;
  font-weight: 600;
}

/* Switch-role floating pill. */
.switch-role-pill {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 50;
}

/* ─── Workflow roadmap v2 (macro headline + micro stepper) ──────────── */
/* Two-row layout. Macro = "what phase / what status" answered at a
   glance. Micro = thin 5-stage stepper underneath so the eye doesn't
   parse macro + micro as one block. */

.roadmap-v2 {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 28px 14px;
  display: flex; flex-direction: column; gap: 12px;
}

/* Macro row */
.roadmap-macro { display: flex; flex-direction: column; gap: 4px; }
.roadmap-macro-main {
  display: flex; align-items: baseline; gap: 10px;
  font-family: inherit;
}
.roadmap-macro-phase {
  font-size: 20px; font-weight: 700; color: #0f172a; letter-spacing: -0.01em;
}
.roadmap-macro-divider { font-size: 18px; color: #94a3b8; }
.roadmap-macro-status {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.roadmap-macro-status--info    { background: #dbeafe; color: #1d4ed8; }
.roadmap-macro-status--warn    { background: #fef3c7; color: #92400e; }
.roadmap-macro-status--violet  { background: #ede9fe; color: #6d28d9; }
.roadmap-macro-status--success { background: #dcfce7; color: #166534; }
.roadmap-macro-status--muted   { background: #e2e8f0; color: #475569; }
.roadmap-macro-subline {
  font-size: 13px; color: #475569; margin: 0;
}

/* Micro row: thin 5-stage stepper. The connector line sits behind
   the circles via a single ::before pseudo on the <ol>.
   IMPORTANT: the `repeat(5, 1fr)` is load-bearing — the JS `steps`
   array in nav.js::workflowRoadmap MUST stay length-5. Adding a 6th
   chip overflows the grid and visually clips the trailing chip
   (this happened once with an "AI analysis" chip — see commit 0e31705).
   Widen this rule in lock-step with the JS if you ever change the
   stepper length. */
.roadmap-stepper {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.roadmap-stepper::before {
  content: ""; position: absolute;
  left: 6%; right: 6%; top: 11px; height: 2px;
  background: #e2e8f0; z-index: 0;
}
.roadmap-step { position: relative; z-index: 1; }
.roadmap-step-btn {
  width: 100%; background: transparent; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; font-family: inherit;
  transition: transform 0.08s;
}
.roadmap-step-btn:hover:not(:disabled) { transform: translateY(-1px); }
.roadmap-step-btn:disabled { cursor: not-allowed; }
.roadmap-step-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; font-weight: 700;
  background: white; border: 2px solid #cbd5e1; color: #94a3b8;
  transition: all 0.12s;
}
.roadmap-step-label {
  font-size: 11px; font-weight: 600;
  color: #94a3b8; letter-spacing: 0.02em;
}

.roadmap-step--done .roadmap-step-circle  { background: #16a34a; border-color: #16a34a; color: white; }
.roadmap-step--done .roadmap-step-label   { color: #166534; }

.roadmap-step--current .roadmap-step-circle {
  background: #2563eb; border-color: #2563eb; color: white;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
}
.roadmap-step--current .roadmap-step-label {
  color: #1d4ed8; font-weight: 700;
}

.roadmap-step--locked .roadmap-step-circle { /* default greys already applied */ }

/* ─── Submission deadline ribbon (with progress bar) ────────────────── */

.deadline-ribbon {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 24px;
  border-bottom: 1px solid;
  font-family: inherit;
}
.deadline-ribbon-badge {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  min-width: 140px;
}
.deadline-ribbon-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.deadline-ribbon-caption-top { font-size: 11px; font-weight: 600; line-height: 1.2; }
.deadline-ribbon-caption-bot { font-size: 9px; opacity: 0.85; line-height: 1.2; margin-top: 2px; }

.deadline-ribbon-bar {
  flex: 1;
  height: 6px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.10);
  overflow: hidden;
  min-width: 80px;
}
.deadline-ribbon-bar-fill {
  height: 100%; border-radius: 9999px;
  transition: width 0.25s ease-out;
}

.deadline-ribbon-meta {
  flex-shrink: 0;
  text-align: right;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  min-width: 140px;
}

.deadline-ribbon--ok      { background: linear-gradient(90deg, #ecfdf5, #d1fae5); border-color: #a7f3d0; color: #065f46; }
.deadline-ribbon--ok      .deadline-ribbon-num,
.deadline-ribbon--ok      .deadline-ribbon-bar-fill { background: #16a34a; }

.deadline-ribbon--warn    { background: linear-gradient(90deg, #eff6ff, #dbeafe); border-color: #bfdbfe; color: #1e3a8a; }
.deadline-ribbon--warn    .deadline-ribbon-num,
.deadline-ribbon--warn    .deadline-ribbon-bar-fill { background: #3b82f6; }

.deadline-ribbon--urgent  { background: linear-gradient(90deg, #fef2f2, #fee2e2); border-color: #fecaca; color: #991b1b; }
.deadline-ribbon--urgent  .deadline-ribbon-num,
.deadline-ribbon--urgent  .deadline-ribbon-bar-fill { background: #dc2626; }

.deadline-ribbon--passed  { background: linear-gradient(90deg, #f1f5f9, #e2e8f0); border-color: #e2e8f0; color: #475569; }
.deadline-ribbon--passed  .deadline-ribbon-num,
.deadline-ribbon--passed  .deadline-ribbon-bar-fill { background: #64748b; }

/* ─── Pre-visit "Why?" expansion + edit-row styles ──────────────────── */

.previsit-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.previsit-row-num { color: #64748b; flex-shrink: 0; min-width: 18px; padding-top: 1px; }
.previsit-row-text { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.5; }
.previsit-sub-badge {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 9999px;
  background: #e2e8f0; color: #475569;
  flex-shrink: 0;
}
.previsit-why-toggle {
  font-size: 11px; color: #1d4ed8;
  background: transparent; border: none; cursor: pointer;
  padding: 2px 6px; border-radius: 4px;
  flex-shrink: 0;
  font-family: inherit;
}
.previsit-why-toggle:hover { background: #eff6ff; }
.previsit-why-expansion {
  flex-basis: 100%;
  margin-top: 6px; margin-left: 26px;
  padding: 10px 12px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 12px; line-height: 1.5;
  color: #78350f;
}
.previsit-why-expansion strong { display: block; margin-bottom: 4px; color: #78350f; }
.previsit-why-expansion em { font-style: normal; color: #92400e; font-weight: 500; }

.previsit-edit-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px;
  background: #fafbfc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 6px;
}
.previsit-edit-row .drag-handle {
  color: #cbd5e1; user-select: none; cursor: grab;
  padding-top: 8px; flex-shrink: 0;
}
.previsit-edit-row .row-num {
  flex-shrink: 0; color: #64748b; padding-top: 8px; min-width: 20px;
}
.previsit-edit-row textarea { flex: 1; min-height: 0; }
.previsit-edit-row select { width: auto; min-width: 90px; flex-shrink: 0; }
.previsit-edit-row .row-remove {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; color: #dc2626;
  padding: 4px 8px; border-radius: 4px;
  flex-shrink: 0;
  font-family: inherit;
}
.previsit-edit-row .row-remove:hover { background: #fee2e2; }
.previsit-add-btn {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  color: #1d4ed8;
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.previsit-add-btn:hover { background: #eff6ff; }

/* Print: force-show every "Why?" expansion + hide the toggle button */
@media print {
  .previsit-why-toggle { display: none !important; }
  .previsit-why-expansion { display: block !important; }
}

/* ─── Visit page sub-card + interview-card hover ────────────────────── */

.visit-sub-card { transition: box-shadow 0.12s; }
.visit-sub-card:hover { box-shadow: 0 4px 12px -4px rgba(15,23,42,0.10); }
.visit-interview-card { /* uses same card chrome as sub-card; placeholder for future overrides */ }

/* ─── Visit carousel (teal stepper + side-by-side layout) ───────────── */

.visit-shell {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: start;
}
/* 767.98 = useBreakpoints md - 0.02. Was 700, which left every phone
   between 700 and 767px on the desktop layout. */
@media (max-width: 767.98px) {
  .visit-shell { grid-template-columns: 1fr; }
  .visit-stepper {
    position: static !important;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 6px !important;
  }
}

.visit-stepper {
  position: sticky; top: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0;
  -ms-overflow-style: none; scrollbar-width: none;
}
.visit-stepper::-webkit-scrollbar { display: none; }

.visit-step-dot {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #d1d5db; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #9ca3af;
  cursor: pointer; transition: all 0.15s;
}
.visit-step-dot:hover { border-color: #6b7280; color: #374151; }
.visit-step-dot.active {
  border-color: #059669; background: #059669; color: #fff;
  box-shadow: 0 0 0 3px rgba(5,150,105,0.2);
}
.visit-step-dot.done    { border-color: #10b981; background: #10b981; color: #fff; }
.visit-step-dot.partial { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.visit-step-conn { width: 2px; height: 6px; background: #d1d5db; border-radius: 1px; }
.visit-step-conn.done-line { background: #10b981; }

.visit-card {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.visit-card-head {
  padding: 14px 20px;
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  border-bottom: 1px solid #d1fae5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.visit-card-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.visit-card-num {
  width: 32px; height: 32px; border-radius: 10px;
  background: #059669; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.visit-card-title { font-size: 15px; font-weight: 600; color: #064e3b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visit-card-ai    { font-size: 12px; color: #6b7280; flex-shrink: 0; }

.visit-card-body {
  padding: 16px 20px;
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
}
.visit-card-body .visit-sec-gap { grid-column: 1 / -1; }
.visit-card-body .visit-sec-interview { align-self: start; }
.visit-card-body .visit-sec-checklist { align-self: start; }
@media (max-width: 900px) {
  .visit-card-body { grid-template-columns: 1fr; }
}

/* Section blocks (shared structure, distinct colors) */
.visit-sec {
  border-radius: 12px; overflow: hidden;
  border: 1px solid #e5e7eb;
}
.visit-sec-head {
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.visit-sec-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.visit-sec-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.visit-sec-count {
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 10px;
}
.visit-sec-body { padding: 12px 16px; }

/* Interview section — teal/emerald */
.visit-sec-interview { border-color: #a7f3d0; }
.visit-sec-interview .visit-sec-head { background: #ecfdf5; border-bottom: 2px solid #a7f3d0; }
.visit-sec-interview .visit-sec-label { color: #065f46; }
.visit-sec-interview .visit-sec-icon  { background: #d1fae5; color: #059669; }
.visit-sec-interview .visit-sec-count { background: #d1fae5; color: #065f46; }

/* Gap section — amber/orange */
.visit-sec-gap { border-color: #fde68a; }
.visit-sec-gap .visit-sec-head { background: #fffbeb; border-bottom: 2px solid #fde68a; }
.visit-sec-gap .visit-sec-label { color: #92400e; }
.visit-sec-gap .visit-sec-icon  { background: #fef3c7; color: #d97706; }

/* Checklist section — indigo/purple */
.visit-sec-checklist { border-color: #c7d2fe; }
.visit-sec-checklist .visit-sec-head { background: #eef2ff; border-bottom: 2px solid #c7d2fe; }
.visit-sec-checklist .visit-sec-label { color: #3730a3; }
.visit-sec-checklist .visit-sec-icon  { background: #e0e7ff; color: #6366f1; }
.visit-sec-checklist .visit-sec-count { background: #e0e7ff; color: #3730a3; }
.visit-sec-checklist input[type=checkbox] { accent-color: #6366f1; }

/* Interview Q&A items */
.visit-iq-item { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.visit-iq-item:last-child { border-bottom: none; }
.visit-iq-question { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 6px; }
.visit-iq-textarea {
  width: 100%; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  resize: vertical; min-height: 60px; transition: border-color 0.15s;
}
.visit-iq-textarea:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.15); }

/* Carousel footer nav */
.visit-nav {
  padding: 10px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex; align-items: center; justify-content: space-between;
  background: #fafafa;
}
.visit-nav-counter { font-size: 12px; font-weight: 600; color: #6b7280; }

/* ─── Cycle-close card (entity workspace, top of main column) ───────── */

/* Entity-only card — harmonized to the shared indigo/slate tokens. */
.cycle-close-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line, #e7e7ec);
  border-left: 4px solid var(--line, #e7e7ec);
  border-radius: var(--r, 13px);
  background: var(--surface, #fff);
  margin-bottom: 18px;
  box-shadow: none;
}
.cycle-close-card-text { flex: 1; min-width: 0; }
.cycle-close-card-eyebrow {
  color: var(--ink-soft, #6b6b78);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 800;
}
.cycle-close-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #23232b);
  margin-top: 2px;
}
.cycle-close-card-sub {
  font-size: 13px;
  color: var(--ink-soft, #6b6b78);
  margin-top: 2px;
}
.cycle-close-card-progress {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cycle-close-card-bar {
  flex: 1;
  max-width: 240px;
  height: 5px;
  background: var(--surface-soft, #f1f1f5);
  border-radius: 999px;
  overflow: hidden;
}
.cycle-close-card-bar > div {
  height: 100%;
  background: var(--lead-dot, #27ae74);
  transition: width .2s ease-out;
}
.cycle-close-card-count {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft, #6b6b78);
  white-space: nowrap;
}

/* Mode: progress (<15/15, button disabled) */
.cycle-close-card--progress {
  background: var(--surface-soft, #f1f1f5);
  border-left-color: var(--line, #e7e7ec);
}

/* Mode: ready (15/15, button live) */
.cycle-close-card--ready {
  background: var(--accent-soft, #ecebfb);
  border-color: var(--accent-2, #c8c5f2);
  border-left-color: var(--accent, #5b57e0);
  box-shadow: 0 4px 12px -4px rgba(91, 87, 224, .22);
}
.cycle-close-card--ready .cycle-close-card-eyebrow { color: var(--accent, #5b57e0); }

/* Mode: submitted (read-only status) */
.cycle-close-card--submitted {
  background: var(--surface-soft, #f1f1f5);
  border-left-color: var(--ink-faint, #a1a1ad);
}
.cycle-close-card--submitted .cycle-close-card-title { color: var(--ink, #23232b); }

/* Modal */
.cycle-close-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.cycle-close-modal-overlay.show { display: flex; }
.cycle-close-modal {
  background: #ffffff;
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  padding: 26px 28px 22px;
  box-shadow: 0 20px 50px -12px rgba(15, 23, 42, .4);
}
.cycle-close-modal h3 {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 10px;
}
.cycle-close-modal p {
  font-size: 13px;
  color: #475569;
  margin-bottom: 18px;
  line-height: 1.55;
}
.cycle-close-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.cycle-close-modal-warn {
  font-size: 13px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.cycle-close-modal-missing {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.cycle-close-modal-missing li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
.cycle-close-modal-missing li:last-child {
  border-bottom: 0;
}
.cycle-close-modal-missing-link {
  background: none;
  border: 0;
  padding: 0;
  color: #1d4ed8;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.cycle-close-modal-missing-link:hover {
  text-decoration: underline;
}
.cycle-close-modal-missing-status {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* AI reference chip — a small numeric pill used inside the AI analysis
   panel (finding pills, evidence-card prefix) and above cited spans in
   the entity's narrative. Sized to read at a glance without competing
   with body text; brand-tinted, with a subtle border for clean edges. */
.ai-ref-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #6d28d9;
  background: #ede9fe;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  padding: 1px 5px;
  min-width: 16px;
  height: 16px;
  line-height: 1;
  letter-spacing: 0;
}
.ai-ref-chip.risk {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fecaca;
}
.ai-ref-chip.gap {
  color: #6d28d9;
  background: #ede9fe;
  border-color: #ddd6fe;
}

/* In-narrative inline citation — coloured highlight over the matched span. */
.ai-cited {
  background: rgba(124, 58, 237, 0.16);
  padding: 1px 2px;
  border-radius: 3px;
}
.ai-cited-ref { margin-right: 2px; }

/* Hover/focus glow shared by the AI panel's evidence/finding/question
   cards AND the entity narrative's .evidence-passage spans above the
   panel. Emitted by tasks/task-2026-06-02-findings-two-column-glow.
   Base rule: violet shadow + brand border tone with a smooth transition.
   The risk-variant rule lowers it to a red palette for risk cards. */
.is-glowing {
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.32),
              0 6px 18px -8px rgba(124, 58, 237, 0.5);
  border-color: #8b5cf6;
  transition: box-shadow .25s, border-color .25s, background .25s;
}
.fd-card.risk.is-glowing {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.32),
              0 6px 18px -8px rgba(239, 68, 68, 0.5);
  border-color: #ef4444;
}
/* `[data-cite]` is always present on a real evidence-passage span; pinning
   it here bumps specificity from (0,2,0) to (0,2,1) so we win against
   any scoped page-level rules that might compile after this stylesheet. */
.evidence-passage.is-glowing,
.evidence-passage[data-cite].is-glowing {
  background: linear-gradient(transparent 0%, #ede9fe 0%) !important;
  box-shadow: 0 0 0 2px #c4b5fd;
  border-radius: 3px;
}

/* Respect the OS-level reduce-motion preference: keep the highlight but
   drop the transition. */
@media (prefers-reduced-motion: reduce) {
  .is-glowing,
  .evidence-passage.is-glowing {
    transition: none !important;
  }
}

/* Inline citation highlight inside the entity's narrative — REQ-007.
   The annotator (useNarrativeAnnotation.ts) already wraps each cited
   passage in <span class="evidence-passage" data-cite="N"> with a
   trailing <span class="cite-chip" data-cite="N">. These rules give
   that markup its visual treatment. */
.evidence-passage {
  background: linear-gradient(transparent 60%, #fef3c7 60%);
  padding: 0 1px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s, box-shadow .25s;
}
/* In-narrative citation chip — superscript-positioned, brand-tinted pill
   placed after the cited span. Hover darkens it to telegraph it's clickable.
   Matches `.ai-ref-chip` proportions so the two surfaces feel unified. */
.cite-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #6d28d9;
  background: #ede9fe;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  padding: 1px 5px;
  min-width: 16px;
  height: 16px;
  line-height: 1;
  margin-left: 4px;
  vertical-align: super;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.cite-chip:hover {
  background: #ddd6fe;
  border-color: #c4b5fd;
  transform: translateY(-1px);
}

/* ─── Reconcile carousel (assessor/reconcile.html) ───────────────────── */
/* Two-column shell: left rail with 15 sub chips, right pane = one sub
   at a time. Tightened for a single-viewport layout (no scroll on
   typical desktop heights). */
.reconcile-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  .reconcile-shell { grid-template-columns: 1fr; }
  .reconcile-rail { position: static; }
}

.reconcile-rail {
  position: sticky;
  top: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.reconcile-rail-caption {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
  line-height: 1.3;
}
.reconcile-rail-chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

/* ── Sub-criterion picker trigger (phone) ───────────────────────────────────
   The row that replaces the horizontal sub-criterion strip below 768 and opens
   the grouped picker sheet. Copied from the approved prototype
   (`playground-mobile-app-layout.html:138-147`). Global rather than scoped
   because two pages render it — ReconcilePage and EntityWorkspacePage — and a
   scoped copy in each would be the same twenty lines twice.
   Visibility is decided in the templates by `useBreakpoints`, not here, so the
   markup does not exist at all on desktop. */
.picker-open {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e7e7ec);
  border-radius: var(--r, 13px);
  padding: 10px 12px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  /* REQ-012: touch-target floor. */
  min-height: 56px;
}
.picker-open .ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft, #ede9fe);
  color: var(--accent, #5b57e0);
  display: grid;
  place-items: center;
  flex: none;
  line-height: 1;
}
.picker-open .ring b { font-size: 14px; font-weight: 800; }
.picker-open .ring span { font-size: 9px; font-weight: 700; opacity: 0.75; }
.picker-open .po-t { display: flex; flex-direction: column; min-width: 0; }
.picker-open .po-n {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-open .po-s { font-size: 10.5px; color: var(--ink-soft, #64748b); }
.picker-open .chev { margin-left: auto; color: var(--ink-faint, #a1a1ad); flex: none; }

.reconcile-pane {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reconcile-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.reconcile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .reconcile-row { grid-template-columns: 1fr; }
}

.reconcile-panel {
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
}
.reconcile-panel--ai      { background: #f8fafc; }
.reconcile-panel--visit   { background: #ffffff; }
.reconcile-panel--decision{ background: #ffffff; }
.reconcile-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.reconcile-panel-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  display: inline-block;
}

.reconcile-ai-score {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.reconcile-ai-conf {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}
.reconcile-ai-rationale {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #334155;
}
.reconcile-citations {
  margin-top: 6px;
  font-size: 12px;
}
.reconcile-citations summary {
  cursor: pointer;
  font-weight: 600;
  color: #1e293b;
  user-select: none;
  padding: 2px 0;
}
.reconcile-citations ul {
  list-style: none;
  padding: 6px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reconcile-citations li {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #334155;
}
.reconcile-citation-pos    { color: #64748b; font-weight: 600; margin-right: 4px; }
.reconcile-citation-passage{ color: #0f172a; }
.reconcile-citation-note   { color: #475569; font-style: italic; }
.reconcile-citation-line   { color: #94a3b8; font-size: 11px; }

.reconcile-visit-notes-text {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #334155;
  white-space: pre-wrap;
}

.visit-mark-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Decision panel: single horizontal row with tier · exact · justification · Lock. */
.reconcile-decision-row {
  display: grid;
  grid-template-columns: 130px 90px 1fr auto;
  gap: 8px;
  align-items: end;
}
.reconcile-decision-row .field { margin: 0; }
.reconcile-decision-row .field label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  display: block;
  margin-bottom: 2px;
}
.reconcile-decision-row select,
.reconcile-decision-row input,
.reconcile-decision-row textarea {
  padding: 6px 8px !important;
  font-size: 13px !important;
  min-height: 0 !important;
}
.reconcile-decision-row textarea { line-height: 1.4 !important; }
.reconcile-lock-btn {
  padding: 6px 18px !important;
  height: 32px;
  align-self: end;
}
/* 767.98 = useBreakpoints md - 0.02. Was 700, which left every phone
   between 700 and 767px on the desktop layout. */
@media (max-width: 767.98px) {
  .reconcile-decision-row {
    grid-template-columns: 1fr 1fr;
  }
  .reconcile-field-just,
  .reconcile-lock-btn { grid-column: 1 / -1; }
}

.reconcile-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid #f1f5f9;
}
.reconcile-nav-counter {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.02em;
}

/* ════════ Entry-point polish — shared design-system CSS ════════════════
   Ported verbatim from tasks/task-2026-05-21-entry-point-polish/
   playground-entry-point-polish.html (<style> block). Contains the
   :root design tokens, the shared institutional chrome (.pg, .accent-bar,
   .eyebrow, .mark, .pg-top*, .pgbtn*), and ALL login-page CSS. Homepage-
   and dashboard-only rules live in their respective Vue SFCs (Decision 2).
   Do not paraphrase/reformat — this is a literal port. */

  :root{
    /* Phase 2 harmonization: the brand scale is aliased from the old workspace
       BLUE to the shared neutral-bridge INDIGO accent (tokens.css). Every body
       that consumes var(--brand-*) re-skins to indigo with no markup change.
       Slate stays (already neutral, matches the bridge grays); semantic
       green/amber/rose stay. */
    --brand-50:#ecebfb; --brand-100:#dcd9f7; --brand-200:#c8c5f2; --brand-300:#aaa4ec;
    --brand-400:#8884e6; --brand-500:#726ee4; --brand-600:#6460e2; --brand-700:#5b57e0;
    --brand-800:#4843c4; --brand-900:#3a3799;
    --slate-900:#0f172a; --slate-800:#1e293b; --slate-700:#334155; --slate-600:#475569;
    --slate-500:#64748b; --slate-400:#94a3b8; --slate-300:#cbd5e1; --slate-200:#e2e8f0;
    --slate-100:#f1f5f9; --slate-50:#f8fafc;
    --green:#15803d; --green-50:#f0fdf4; --green-200:#bbf7d0;
    --amber:#b45309; --amber-50:#fffbeb; --amber-200:#fde68a;
    --rose:#be123c; --rose-50:#fff1f2; --rose-200:#fecdd3;
  }

  /* ════════ PROTOTYPE — shared institutional design language ════════ */
  .pg{font-family:'Nunito','Segoe UI',system-ui,sans-serif;color:var(--slate-800)}
  .pg h1,.pg h2,.pg h3,.pg h4{font-family:'Quicksand','Segoe UI',system-ui,sans-serif}
  .pg .accent-bar{height:3px;background:var(--brand-700)}
  .pg .eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-700)}
  .pg .mark{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--brand-700)}

  .pg-top{background:#fff;border-bottom:1px solid var(--slate-200);
    padding:13px 28px;display:flex;align-items:center;gap:11px}
  .pg-top .wordmark{font-size:13.5px;font-weight:600;color:var(--slate-900)}
  .pg-top .sep{width:1px;height:16px;background:var(--slate-200)}
  .pg-top .spacer{flex:1}
  .pg-top .who{font-size:12px;color:var(--slate-500)}
  .pg-top .who b{color:var(--slate-700);font-weight:600}

  .pgbtn{display:inline-flex;align-items:center;gap:7px;border-radius:9px;
    font-size:13px;font-weight:600;padding:9px 16px;cursor:pointer;border:1.5px solid transparent;
    font-family:inherit;transition:.13s}
  .pgbtn-primary{background:var(--brand-700);color:#fff}
  .pgbtn-primary:hover{background:var(--brand-800)}
  .pgbtn-ghost{background:transparent;color:var(--slate-600);border-color:var(--slate-300)}
  .pgbtn-ghost:hover{background:var(--slate-50)}
  .pgbtn-block{width:100%;justify-content:center;padding:11px 16px}
  .pgbtn-sm{padding:6px 11px;font-size:12px}

  /* ─── Shared form primitives (auth + workspace forms) ─── */
  .pgform{margin-top:22px;display:flex;flex-direction:column;gap:15px}
  .pgfield label{display:block;font-size:11.5px;font-weight:700;color:var(--slate-700);
    text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
  .pgfield input{width:100%;border:1.5px solid var(--slate-200);border-radius:10px;
    background:#fafbfc;padding:11px 13px;font-size:13.5px;color:var(--slate-900);
    font-family:inherit;transition:.14s}
  .pgfield input:focus{outline:none;border-color:var(--brand-600);background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.10)}
  .pgfield input.bad{border-color:var(--rose);background:#fff}

/* ════════════════════════════════════════════════════════════════════
   SHARED `.au-*` LAYER — buttons, spinner, modal shell
   Self-contained: touches no shared class (.pg* / .pgbtn* / .btn* /
   .pgfield / .pgform / .eyebrow / .accent-bar). Consumed by LogoutModal,
   BaseModal and SubmissionsPage only. The auth pages stopped using this
   layer on 2026-09-13 (they render through src/components/auth now) and
   their page rules were deleted with them; frontend/src/pages/__tests__/
   authRetirement.test.ts guards what must stay.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --au-navy:#15234e; --au-blue-600:#2563eb; --au-blue-700:#1d4ed8; --au-blue-800:#1e40af;
  --au-ink:#0f172a; --au-s700:#334155; --au-s600:#475569; --au-s500:#64748b;
  --au-s400:#94a3b8; --au-s200:#e2e8f0; --au-s100:#f1f5f9; --au-s50:#f8fafc;
  --au-rose:#be123c; --au-rose-50:#fff1f2;
}

/* ── buttons ────────────────────────────────────────────────────── */
.au-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  padding:13px 18px;border-radius:10px;border:1.5px solid transparent;
  transition:background .15s,transform .05s;
}
.au-btn-primary{background:var(--au-blue-700);color:#fff}
.au-btn-primary:hover{background:var(--au-blue-800)}
.au-btn-primary:active{transform:translateY(1px)}
.au-btn-ghost{background:#fff;color:var(--au-s700);border-color:var(--au-s200)}
.au-btn-ghost:hover{background:var(--au-s50)}
.au-btn-block{width:100%}
.au-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.au-btn[disabled]{opacity:.62;cursor:not-allowed}
.au-spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:au-spin .6s linear infinite;
}
@keyframes au-spin{to{transform:rotate(360deg)}}

/* ── logout modal (scrim blurs the live page behind it) ─────────── */
.au-scrim{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(15,23,42,.46);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.au-modal{
  width:100%;max-width:410px;background:#fff;border-radius:18px;
  padding:36px 34px 30px;text-align:center;position:relative;
  font-family:'Inter',system-ui,sans-serif;color:var(--au-ink);
  box-shadow:0 32px 72px -18px rgba(8,15,40,.6),0 0 0 1px rgba(15,23,42,.05);
  animation:au-pop .22s cubic-bezier(.34,1.28,.5,1);
}
@keyframes au-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.au-modal h1{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--au-ink)}
.au-modal p{margin-top:9px;font-size:14.5px;color:var(--au-s500);line-height:1.6}
.au-modal-x{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;
  border:none;background:transparent;color:var(--au-s400);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;
}
.au-modal-x:hover{background:var(--au-s100);color:var(--au-s600)}
.au-modal-x:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.au-card-ico{
  width:54px;height:54px;border-radius:14px;margin:2px auto 18px;
  background:#eff6ff;color:var(--au-blue-700);
  display:flex;align-items:center;justify-content:center;
}
.au-card-actions{margin-top:24px;display:flex;flex-direction:column;gap:10px}

/* ── responsive: the modal shell tightens its padding on phones ── */
@media (max-width:480px){
  .au-modal{padding:28px 22px}
}

/* ─── Current tab "already submitted" centered placeholder ───────────── */
.current-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 48px 24px;
}
.current-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 28rem;
}
.current-placeholder-icon {
  width: 96px;
  height: 96px;
  border-radius: 9999px;
  background: rgb(239 246 255);
  color: rgb(37 99 235);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.current-placeholder-title {
  font-size: 18px;
  font-weight: 600;
  color: rgb(15 23 42);
  margin: 0 0 14px 0;
}
.current-placeholder-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  border-radius: 9999px;
  background: rgb(37 99 235);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 150ms;
}
.current-placeholder-cta:hover {
  background: rgb(29 78 216);
}
.current-placeholder-caption {
  margin: 16px 0 0 0;
  font-size: 13px;
  color: rgb(100 116 139);
  line-height: 1.5;
}