/* T.H.O.M.A.S. shared interface system. */
:root {
/* One canonical interface token layer. The final values preserve the
Lavender clinical system that the app already presents. */
--bg-subtle: #0d1218;
--primary-surface: #b5f0e8;
--primary-text: #2dd4bf;
--info: #82c7f5;
--info-rgb: 130, 199, 245;
--info-soft: rgba(130, 199, 245, 0.08);
--cyan-soft: var(--info-soft);
--text-on-primary: #06231f;
--border-focus: var(--primary);
--shadow-xs: none;
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.40);
--shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.28);
--shadow-focus: 0 0 0 3px rgba(var(--primary-rgb), 0.28);
--glow-cyan: 0 4px 20px rgba(130, 199, 245, 0.10);
--glow-lime: 0 4px 20px rgba(66, 211, 146, 0.10);
--radius-pill: 100px;
--font-main: 'DM Sans', system-ui, -apple-system, sans-serif;
--ease-spring: var(--ease-emphasized);
--ease-wqf: var(--ease-emphasized);
--duration-slow: var(--dur-slow);
--z-base: 1;
--z-dropdown: 100;
--z-toast: 1000;
--z-modal: 2200;
--z-banner-active: 2300;
--z-banner-impersonation: 2350;
--z-overlay-gen: 2400;
--z-help-tip: 2800;
--ghost-border: 1px solid var(--border);
--duration-fast: var(--dur-fast);
--duration-normal: var(--dur-normal);
--ease-out: var(--ease-standard);
--liquid-duration: var(--dur-slow);
--liquid-spring: var(--ease-emphasized);
--glass-blur: var(--blur-lg);
--glass-saturation: 170%;
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88),
inset 0 -1px 0 rgba(255, 255, 255, 0.24),
0 12px 38px rgba(37, 55, 82, 0.1),
0 2px 8px rgba(37, 55, 82, 0.05);
--glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.96),
inset 0 -1px 0 rgba(255, 255, 255, 0.32),
0 20px 50px rgba(37, 55, 82, 0.14),
0 4px 12px rgba(37, 55, 82, 0.07);
--control-height: 2.75rem;
--content-max: 1180px;
--app-content-max: 1600px;
--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--sidebar-w: 17rem;
--lv-solid: #0071e3;
--lv-solid-grad: linear-gradient(90deg, #0071e3, #4a9bf0);
color-scheme: light;
--bg: #e8e8ed;
--bg-elevated: #ffffff;
--bg-card: #ffffff;
--bg-surface: #e8e8ed;
--surface: #ffffff;
--surface-0: #ffffff;
--surface-1: #ffffff;
--surface-2: #f2f2f5;
--surface-3: #d2d2d7;
--surface-lowest: #f2f2f5;
--surface2: #f2f2f5;
--surface3: #e3e3e8;
--surface-hover: #eaeaef;
--border: rgba(0, 0, 0, 0.13);
--border-strong: rgba(0, 0, 0, 0.22);
--border-bright: rgba(0, 113, 227, 0.5);
--text: #1d1d1f;
--text-primary: #1d1d1f;
--text-secondary: #6e6e73;
--text-tertiary: #8e8e93;
--text-muted: #8e8e93;
--primary: #0071e3;
--primary-hover: #0077ed;
--primary-active: #0058b0;
--primary-rgb: 0, 113, 227;
--focus-ring: #0071e3;
--primary-soft: rgba(0, 113, 227, 0.10);
--primary-muted: rgba(0, 113, 227, 0.35);
--accent: #0071e3;
--accent-hover: #0077ed;
--accent-ink: #ffffff;
--text-on-accent: #ffffff;
--status-ink: #ffffff;
--accent-dim: rgba(0, 113, 227, 0.12);
--accent-soft: rgba(0, 113, 227, 0.08);
--accent-cyan: #3d78c9;
--cyan: #3d78c9;
--teal: #0071e3;
--green: #2e7d55;
--lime: #2e7d55;
--success: #2e7d55;
--success-rgb: 46, 125, 85;
--success-soft: #eef7f1;
--lime-soft: #eef7f1;
--amber: #8a5a00;
--warning: #8a5a00;
--warning-rgb: 138, 90, 0;
--warning-soft: #fbf3e6;
--red: #b23a54;
--error: #b23a54;
--error-rgb: 178, 58, 84;
--error-text: #98304a;
--error-soft: #fbeef0;
--purple: #5b3ea3;
--tier-none: #6a6377;
--tier-lite: #5b3ea3;
--tier-pro: #8a5a00;
--tier-departamento: #2e7d55;
--tier-decanatura: #006b73;
--tier-institucional: #7c5cd6;
--radius-xs: 9px;
--radius-sm: 11px;
--radius-md: 14px;
--radius-lg: 18px;
--radius-xl: 24px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
--shadow-md: 0 2px 10px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.14);
--glass-surface: rgba(255, 255, 255, 0.72);
--glass-surface-strong: rgba(255, 255, 255, 0.85);
--glass-surface-soft: rgba(250, 248, 253, 0.6);
--glass-edge: rgba(0, 113, 227, 0.16);
--glass-edge-strong: rgba(0, 113, 227, 0.24);
--lv-sidebar: #ededf0;
--lv-input: #f5f2fb;
--lv-active-text: #0058b0;
--lv-primary-active-bg: rgba(0, 113, 227, 0.12);
--lv-pill-bg: #ffffff;
--lv-pill-border: rgba(0, 0, 0, 0.10);
--lv-pill-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
/* Responsive type and spacing scales. */
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--text-2xs: 0.625rem;
--text-xs: 0.6875rem;
--text-sm: 0.75rem;
--text-label: 0.8125rem;
--text-body-sm: 0.875rem;
--text-body: 1rem;
--text-body-lg: 1.125rem;
--text-title-sm: 1.25rem;
--text-title: 1.5rem;
--text-display: clamp(2.25rem, 5vw, 4rem);
/* Tracking is size-specific: display type reads too loose as it grows and
needs negative tracking; body sits at zero; only small caps take positive.
A single global letter-spacing is wrong at one end of the scale. */
--track-display: -0.022em;
--track-title: -0.015em;
--track-heading: -0.01em;
--track-tight: -0.02em;
--track-normal: 0;
--track-wide: 0.04em;
--track-label: 0.06em;
/* Leading runs inverse to size — tight on display, open on body copy. */
--leading-display: 1.05;
--leading-title: 1.15;
--leading-heading: 1.25;
--leading-body: 1.5;
--shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12);
--shadow-2: 0 2px 10px rgba(0, 0, 0, 0.08);
--shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-4: 0 20px 48px rgba(0, 0, 0, 0.16);
--shadow-5: 0 32px 72px rgba(0, 0, 0, 0.2);
--dur-instant: 100ms;
--dur-fast: 160ms;
--dur-normal: 240ms;
--dur-slow: 400ms;
--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
--blur-xs: 4px;
--blur-sm: 8px;
--blur-md: 20px;
--blur-lg: 28px;
--blur-xl: 40px;
--font-main: var(--font-body);
--text-on-primary: #ffffff;
--primary-text: var(--primary);
--border-focus: var(--focus-ring);
--shadow-xs: var(--shadow-1);
--shadow-sm: var(--shadow-1);
--shadow-md: var(--shadow-2);
--shadow-lg: var(--shadow-4);
--shadow-xl: var(--shadow-5);
--shadow-hover: var(--shadow-3);
--duration-fast: var(--dur-fast);
--duration-normal: var(--dur-normal);
--duration-slow: var(--dur-slow);
--ease-out: var(--ease-standard);
}
:root[data-theme="dark"] {
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13),
inset 0 -1px 0 rgba(255, 255, 255, 0.025),
0 14px 42px rgba(0, 0, 0, 0.32),
0 3px 10px rgba(0, 0, 0, 0.2);
--glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
0 22px 56px rgba(0, 0, 0, 0.4),
0 5px 15px rgba(0, 0, 0, 0.24);
color-scheme: dark;
--bg: #151019;
--bg-elevated: #221a2e;
--bg-card: #221a2e;
--bg-surface: #1a1424;
--surface: #221a2e;
--surface-0: #221a2e;
--surface-1: #2a2137;
--surface-2: #1a1424;
--surface-3: #372c49;
--surface-lowest: #120d17;
--surface2: #2a2137;
--surface3: #372c49;
--surface-hover: #2e2440;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.15);
--border-bright: rgba(10, 132, 255, 0.6);
--text: #f1ecf9;
--text-primary: #f1ecf9;
--text-secondary: #b6adc9;
--text-tertiary: #8b8299;
--text-muted: #8b8299;
--primary: #0a84ff;
--primary-hover: #409cff;
--primary-active: #0071e3;
--primary-rgb: 10, 132, 255;
--focus-ring: #409cff;
--primary-soft: rgba(0, 113, 227, 0.20);
--primary-muted: rgba(10, 132, 255, 0.38);
--accent: #0a84ff;
--accent-hover: #409cff;
--accent-ink: #ffffff;
--text-on-accent: #ffffff;
--status-ink: #ffffff;
--accent-dim: rgba(10, 132, 255, 0.2);
--accent-soft: rgba(10, 132, 255, 0.14);
--accent-cyan: #7fb2f2;
--cyan: #7fb2f2;
--teal: #0a84ff;
--green: #5bd39a;
--lime: #5bd39a;
--success: #5bd39a;
--success-rgb: 91, 211, 154;
--success-soft: rgba(63, 157, 109, 0.18);
--lime-soft: rgba(63, 157, 109, 0.18);
--amber: #f0b968;
--warning: #f0b968;
--warning-rgb: 240, 185, 104;
--warning-soft: rgba(240, 185, 104, 0.15);
--red: #ef8fa4;
--error: #ef8fa4;
--error-rgb: 239, 143, 164;
--error-text: #f3a9ba;
--error-soft: rgba(200, 80, 105, 0.16);
--purple: #b79aef;
--tier-none: #8b8299;
--tier-lite: #b79aef;
--tier-pro: #f0b968;
--tier-departamento: #5bd39a;
--tier-decanatura: #4fc3cc;
--tier-institucional: #9a7cf0;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 2px 14px rgba(0, 0, 0, 0.28);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
--glass-surface: rgba(34, 26, 46, 0.74);
--glass-surface-strong: rgba(42, 33, 55, 0.86);
--glass-surface-soft: rgba(21, 16, 25, 0.66);
--glass-edge: rgba(10, 132, 255, 0.18);
--glass-edge-strong: rgba(10, 132, 255, 0.28);
--lv-sidebar: #1c1526;
--lv-input: #2a2137;
--lv-active-text: #e0d3fb;
--lv-primary-active-bg: rgba(10, 132, 255, 0.32);
--lv-pill-bg: rgba(255, 255, 255, 0.055);
--lv-pill-border: rgba(255, 255, 255, 0.11);
--lv-pill-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-2: 0 2px 14px rgba(0, 0, 0, 0.28);
--shadow-3: 0 8px 24px rgba(0, 0, 0, 0.32);
--shadow-4: 0 20px 60px rgba(0, 0, 0, 0.4);
--shadow-5: 0 32px 80px rgba(0, 0, 0, 0.48);
--font-main: var(--font-body);
--text-on-primary: #ffffff;
--primary-text: var(--primary);
--border-focus: var(--focus-ring);
--shadow-xs: var(--shadow-1);
--shadow-sm: var(--shadow-1);
--shadow-md: var(--shadow-2);
--shadow-lg: var(--shadow-4);
--shadow-xl: var(--shadow-5);
--shadow-hover: var(--shadow-3);
}
/* Application compatibility rules, retained in their original cascade order. */
/* ════════════════════════════════════════════════════
T.H.O.M.A.S. workspace rules
Shared clinical interface
════════════════════════════════════════════════════ */
/* ─── Design Tokens — Visual Overhaul (Jun 2026) ───
One accent family (teal), one info tone (sky), semantic colors carry
the only warm notes. Every fg/bg pair below clears WCAG AA 4.5:1 on
the surfaces it is documented for. --cyan and --lime survive as
aliases so legacy component rules and JS fallbacks keep resolving. */
/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-main);
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
/* Ambient radial wash — coral top-left, cyan top-right (per handoff) */
background-image:
radial-gradient(ellipse 60% 50% at 20% -5%, rgba(var(--primary-rgb), 0.08), transparent 60%),
radial-gradient(ellipse 50% 40% at 90% 10%, rgba(var(--info-rgb), 0.05), transparent 65%);
background-attachment: fixed;
}
::selection {
background: var(--primary);
color: var(--text-on-primary);
}
/* ─── Accessibility: skip-to-main-content link ───
Visually hidden until focused (Tab from page load); becomes a coral
chip in the top-left so keyboard/screen-reader users can jump past
the tab navigation directly to the form. */
.skip-link {
position: fixed;
top: -100px;
left: 12px;
z-index: var(--z-help-tip);
padding: 0.625rem 1rem;
background: var(--primary);
color: var(--text-on-primary);
font-family: var(--font-main);
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
transition: top 150ms var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
top: 12px;
outline: 2px solid var(--text-on-primary);
outline-offset: 2px;
}
/* ─── Super-admin operational panel (/admin/system.html) ─── */
.sa-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.75rem;
}
.sa-tile {
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
padding: 0.875rem 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
min-height: 92px;
}
.sa-tile-skel {
background: var(--surface-2);
animation: skPulse 1.5s ease-in-out infinite;
}
.sa-tile-label {
font-family: var(--font-mono, monospace);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.sa-tile-value {
font-size: 1.375rem;
font-weight: 600;
color: var(--text);
font-family: var(--font-mono, monospace);
letter-spacing: -0.01em;
}
.sa-tile-sub {
font-size: 0.75rem;
color: var(--text-secondary);
line-height: 1.35;
}
.sa-tone-ok { border-left: 3px solid var(--success, #42d392); }
.sa-tone-warn { border-left: 3px solid var(--warning); }
.sa-tone-warn .sa-tile-value { color: var(--warning); }
.sa-tone-crit { border-left: 3px solid var(--error, #f4718a); }
.sa-tone-crit .sa-tile-value { color: var(--error, #f4718a); }
.sa-alert {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 1rem;
border-radius: var(--radius-md);
font-size: 0.8125rem;
margin-bottom: 0.5rem;
}
.sa-alert-ok {
background: rgba(var(--success-rgb), 0.08);
border: 1px solid rgba(var(--success-rgb), 0.28);
color: var(--text);
}
.sa-alert-ok .icon { color: var(--success, #42d392); }
.sa-alert-warn {
background: rgba(var(--warning-rgb), 0.08);
border: 1px solid rgba(var(--warning-rgb), 0.32);
color: var(--text);
}
.sa-alert-warn .icon { color: var(--warning); }
.sa-alert-crit {
background: rgba(var(--error-rgb), 0.08);
border: 1px solid rgba(var(--error-rgb), 0.36);
color: var(--text);
}
.sa-alert-crit .icon { color: var(--error, #f4718a); }
.sa-table {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
}
.sa-table th {
text-align: left;
padding: 0.625rem 0.875rem;
font-family: var(--font-mono, monospace);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-tertiary);
border-bottom: 1px solid var(--surface-3);
}
.sa-table td {
padding: 0.625rem 0.875rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
}
.sa-table tr:hover td { background: var(--surface-2); }
/* ─── Operator drill-in modal ─────────────────────────────────────────
Used by /admin.html when an operator clicks a user row. Backdrop
blocks pointer events on the dashboard behind it; the inner panel
scrolls if content overflows the viewport. */
.sa-modal-backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.72);
-webkit-backdrop-filter: blur(var(--blur-xs));
backdrop-filter: blur(var(--blur-xs));
display: none;
align-items: flex-start;
justify-content: center;
z-index: 1000;
padding: 3rem 1rem;
overflow-y: auto;
}
.sa-modal-backdrop.sa-modal-open { display: flex; }
.sa-modal {
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-lg);
width: 100%;
max-width: 920px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.sa-modal-head {
display: flex; align-items: center; gap: var(--space-3);
padding: 0.875rem 1.125rem;
border-bottom: 1px solid var(--surface-3);
}
.sa-modal-head strong { font-size: 0.9375rem; flex: 1; }
.sa-modal-close {
background: none; border: none; cursor: pointer;
color: var(--text-secondary);
min-width: 44px; min-height: 44px;
padding: 0.25rem; border-radius: 4px;
}
.sa-modal-close:hover { background: var(--surface-3); color: var(--text); }
.sa-modal-body { padding: 1.125rem; color: var(--text); font-size: var(--text-body-sm); line-height: 1.5; }
.sa-modal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.625rem;
margin-bottom: 1.125rem;
}
.sa-modal-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.875rem;
}
@media (max-width: 720px) {
.sa-modal-cols { grid-template-columns: 1fr; }
}
.sa-kpi-sub {
font-size: 0.75rem;
color: var(--text-tertiary);
font-family: var(--font-mono, monospace);
letter-spacing: 0.04em;
margin-top: 0.125rem;
}
/* ─── Reformatter pipeline strip (pre-review + per-job) ───────────────
Horizontal step indicator: dot → spinner → check / x. Shared between
the inline upload pipeline (above the textarea) and the per-job row
pipeline (in the jobs list). The compact variant tightens the gaps
for use inside a job row. */
.rf-pipeline {
display: flex;
align-items: flex-start;
gap: 0;
padding: 0.875rem 0;
flex-wrap: nowrap;
overflow-x: auto;
}
.rf-pipeline[hidden] { display: none; }
.rf-pipeline-compact { padding: 0; }
/* ─── Persistent batch-failure card ─────────────────────────────────
Sits at the top of the reformatter card. Unlike a toast it stays put
until the user acts. Red-tinted surface; optional repair CTA. */
.rf-batch-error {
border: 1px solid rgba(var(--error-rgb), 0.45);
background: rgba(var(--error-rgb), 0.07);
border-radius: var(--radius-md, 12px);
padding: 0.875rem 1rem;
margin-bottom: 1rem;
}
.rf-batch-error[hidden] { display: none; }
.rf-batch-error-head {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--error-text);
font-size: 0.8125rem;
}
.rf-batch-error-head .icon { font-size: var(--text-body-lg); }
.rf-batch-error-head strong { flex: 1; font-weight: 600; }
.rf-error-dismiss {
background: none; border: none; cursor: pointer;
color: var(--text-tertiary);
padding: 0.125rem; border-radius: 4px; line-height: 0;
}
.rf-error-dismiss:hover { background: var(--surface-3); color: var(--text); }
.rf-batch-error-detail {
margin: 0.5rem 0 0;
font-size: 0.75rem;
color: var(--text-secondary);
line-height: 1.5;
}
.rf-batch-error-hint {
margin: 0.5rem 0 0;
font-size: 0.75rem;
color: var(--text-tertiary);
line-height: 1.5;
}
.rf-batch-error-actions {
margin-top: 0.75rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.rf-batch-error-actions:empty { display: none; }
.rf-pipe-step {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 0 0 auto;
font-size: 0.75rem;
}
.rf-pipe-dot-wrap {
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
flex: 0 0 22px;
}
.rf-pipe-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--surface-3);
}
.rf-pipe-pending .rf-pipe-dot-wrap {
background: transparent;
border: 1px dashed var(--surface-3);
}
.rf-pipe-pending .rf-pipe-name { color: var(--text-tertiary); }
.rf-pipe-active .rf-pipe-dot-wrap {
background: rgba(var(--primary-rgb), 0.12);
border: 1px solid var(--primary);
}
.rf-pipe-active .rf-pipe-name { color: var(--text); font-weight: 600; }
.rf-pipe-done .rf-pipe-dot-wrap {
background: var(--success, #42d392);
color: var(--surface-0, #0a0e13);
}
.rf-pipe-done .rf-pipe-dot-wrap .icon { font-size: var(--text-body-sm); }
.rf-pipe-done .rf-pipe-name { color: var(--text-secondary); }
.rf-pipe-error .rf-pipe-dot-wrap {
background: var(--error);
color: var(--text-on-accent);
}
.rf-pipe-error .rf-pipe-dot-wrap .icon { font-size: var(--text-body-sm); }
.rf-pipe-error .rf-pipe-name { color: var(--error-text); font-weight: 600; }
.rf-pipe-spinner {
width: 10px; height: 10px;
border: 2px solid rgba(var(--primary-rgb), 0.3);
border-top-color: var(--primary);
border-radius: 50%;
animation: rf-spin 0.9s linear infinite;
}
@keyframes rf-spin {
to { transform: rotate(360deg); }
}
.rf-pipe-label { display: flex; flex-direction: column; line-height: 1.2; }
.rf-pipe-name { font-size: var(--text-sm); letter-spacing: 0.02em; }
.rf-pipe-sub {
font-size: 0.75rem;
color: var(--text-tertiary);
font-family: var(--font-mono, monospace);
margin-top: 0.0625rem;
}
.rf-pipe-rail {
flex: 1 1 12px;
min-width: 12px;
height: 1px;
background: var(--surface-3, #222d38);
margin: 0 0.25rem;
align-self: center;
}
.rf-pipe-step.rf-pipe-done + .rf-pipe-step .rf-pipe-rail,
.rf-pipeline-compact .rf-pipe-rail { min-width: 8px; }
/* Sticky in-flight banner — patterned on #impersonationBanner.
Lives above the tab nav so the user sees it on every tab when a
reformatter job is queued or processing. Clickable as a unit —
takes them back to the jobs list. */
.rf-active-banner {
position: sticky;
top: 0;
z-index: var(--z-banner-active);
width: 100%;
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 1rem;
background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.95), rgba(var(--primary-rgb), 0.82));
color: var(--text-on-primary);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.02em;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
text-align: left;
font-family: inherit;
}
/* `display: flex` would otherwise override the HTML hidden attribute;
restore the default UA `display: none` so the banner truly hides. */
.rf-active-banner[hidden] { display: none; }
.rf-active-banner:hover { filter: brightness(1.06); }
.rf-active-banner-icon {
font-size: 1rem;
animation: rf-pulse 2s ease-in-out infinite;
}
@keyframes rf-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.rf-active-banner-text { flex: 1 1 auto; }
.rf-active-banner-cta {
font-family: var(--font-mono, monospace);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.1875rem 0.625rem;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
}
.rf-jobs-highlight {
animation: rf-jobs-flash 2s ease-out;
}
@keyframes rf-jobs-flash {
0% { box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.6); }
100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0); }
}
/* Sticky banner shown when this tab carries an impersonation token.
Coral background so it's impossible to miss; high z-index so it sits
above modals; offsets the app body below it by its own height. */
#impersonationBanner {
position: sticky;
top: 0;
z-index: var(--z-banner-impersonation);
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 1rem;
background: var(--primary);
color: var(--text-on-primary);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.01em;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#impersonationBanner strong { font-weight: 600; }
#impersonationBanner button {
margin-left: auto;
background: rgba(255, 255, 255, 0.18);
color: var(--text-on-primary);
border: 1px solid rgba(255, 255, 255, 0.4);
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-size: 0.75rem;
font-family: var(--font-mono, monospace);
font-weight: 600;
cursor: pointer;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#impersonationBanner button:hover {
background: rgba(255, 255, 255, 0.28);
}
/* Toggle switch for feature flag rows. Minimal — no animation library. */
.sa-toggle { position: relative; display: inline-block; width: 36px; height: 18px; cursor: pointer; }
.sa-toggle input { opacity: 0; width: 0; height: 0; }
.sa-toggle-slider {
position: absolute; inset: 0;
background: var(--surface-3);
border-radius: 999px;
transition: background-color 0.15s ease;
}
.sa-toggle-slider::before {
content: ''; position: absolute;
width: 14px; height: 14px; left: 2px; top: 2px;
background: var(--text-secondary);
border-radius: 50%;
transition: transform 0.15s ease, background-color 0.15s ease;
}
.sa-toggle input:checked + .sa-toggle-slider { background: var(--primary); }
.sa-toggle input:checked + .sa-toggle-slider::before {
transform: translateX(18px);
background: var(--surface-2);
}
/* ─── Dashboard chrome ─── */
/* Container limits page width but lets the bg breathe edge-to-edge. */
.sa-app {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem 4rem;
}
@media (max-width: 720px) {
.sa-app { padding: 0 var(--space-3) var(--space-12); }
}
/* Sticky top bar — brand, time range picker, last-updated, alert badge. */
.sa-topbar {
position: sticky;
top: 0;
z-index: 200;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.875rem 0 0.75rem;
margin-bottom: 1.125rem;
background: rgba(10, 14, 19, 0.88);
-webkit-backdrop-filter: blur(var(--blur-sm));
backdrop-filter: blur(var(--blur-sm));
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-wrap: wrap;
}
.sa-topbar-brand {
display: flex;
flex-direction: column;
gap: 0.125rem;
line-height: 1.1;
}
.sa-topbar-brand strong {
font-size: 0.875rem;
letter-spacing: -0.01em;
color: var(--text);
}
.sa-topbar-brand small {
font-family: var(--font-mono, monospace);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.sa-topbar-spacer { flex: 1; }
.sa-topbar-meta {
display: flex;
align-items: center;
gap: 0.875rem;
flex-wrap: wrap;
font-size: 0.75rem;
color: var(--text-tertiary);
}
.sa-topbar-meta .sa-pulse {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success, #42d392);
box-shadow: 0 0 8px rgba(var(--success-rgb), 0.6);
animation: skPulse 1.8s ease-in-out infinite;
vertical-align: middle;
margin-right: 0.375rem;
}
.sa-alert-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
border-radius: 999px;
font-family: var(--font-mono, monospace);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sa-alert-badge-ok {
background: rgba(var(--success-rgb), 0.12);
color: var(--success, #42d392);
border: 1px solid rgba(var(--success-rgb), 0.32);
}
.sa-alert-badge-warn {
background: rgba(var(--warning-rgb), 0.12);
color: var(--warning);
border: 1px solid rgba(var(--warning-rgb), 0.4);
}
.sa-alert-badge-crit {
background: rgba(var(--error-rgb), 0.14);
color: var(--error, #f4718a);
border: 1px solid rgba(var(--error-rgb), 0.44);
}
/* Time-range pill group. */
.sa-range {
display: inline-flex;
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: 999px;
padding: 0.125rem;
}
.sa-range button {
background: transparent;
border: 0;
padding: 0.25rem 0.75rem;
font-family: var(--font-mono, monospace);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-tertiary);
cursor: pointer;
border-radius: 999px;
transition: background 0.12s ease, color 0.12s ease;
}
.sa-range button:hover { color: var(--text); }
.sa-range button.sa-range-active {
background: var(--primary);
color: var(--text-on-primary, #fff);
}
/* Hero KPI strip — 6 mega numbers + sparkline each. */
.sa-hero {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.625rem;
margin-bottom: 1.375rem;
}
@media (max-width: 1100px) { .sa-hero { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .sa-hero { grid-template-columns: repeat(2, 1fr); } }
.sa-kpi {
position: relative;
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
padding: 0.75rem 0.875rem 0.625rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
min-height: 92px;
overflow: hidden;
}
.sa-kpi-label {
font-family: var(--font-mono, monospace);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.sa-kpi-value {
font-family: var(--font-mono, monospace);
font-size: 1.5rem;
font-weight: 600;
color: var(--text);
letter-spacing: -0.02em;
line-height: 1.1;
}
.sa-kpi-sub {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
color: var(--text-tertiary);
font-family: var(--font-mono, monospace);
}
.sa-kpi-trend-up { color: var(--success, #42d392); }
.sa-kpi-trend-down { color: var(--error, #f4718a); }
.sa-kpi-trend-flat { color: var(--text-tertiary); }
.sa-kpi-spark {
position: absolute;
right: 8px;
bottom: 8px;
opacity: 0.7;
pointer-events: none;
}
/* Two-column main grid for the live charts / health tiles. */
.sa-main {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 0.875rem;
margin-bottom: 1.5rem;
}
@media (max-width: 1024px) { .sa-main { grid-template-columns: 1fr; } }
/* ─── Security & access posture panel ─── */
.sa-main-security { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1024px) { .sa-main-security { grid-template-columns: 1fr; } }
.sa-sec-checks { display: flex; flex-direction: column; gap: 0.375rem; }
.sa-sec-check {
display: flex; align-items: flex-start; gap: 0.625rem;
padding: 0.5625rem 0.6875rem; border-radius: var(--radius-md);
background: var(--surface-2); border: 1px solid var(--surface-3);
}
.sa-sec-check .icon { margin-top: 0.0625rem; }
.sa-sec-ok .icon { color: var(--success, #5bc08a); }
.sa-sec-warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--surface-3)); }
.sa-sec-warn .icon { color: var(--warning); }
.sa-sec-crit { border-color: color-mix(in srgb, var(--error, #f4718a) 55%, var(--surface-3)); }
.sa-sec-crit .icon { color: var(--error, #f4718a); }
.sa-sec-check-label { font-size: 0.78125rem; font-weight: 600; color: var(--text); }
.sa-sec-check-detail { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 0.0625rem; line-height: 1.35; }
.sa-sec-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-1);
}
@media (max-width: 560px) { .sa-sec-stats { grid-template-columns: repeat(2, 1fr); } }
.sa-sec-stat {
background: var(--surface-2); border: 1px solid var(--surface-3);
border-radius: var(--radius-md); padding: 0.5625rem 0.625rem; text-align: center;
}
.sa-sec-stat-value { font-size: 1.1875rem; font-weight: 700; font-family: var(--font-mono, monospace); }
.sa-sec-stat-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-top: 0.125rem; }
.sa-sec-stat-sub { font-size: var(--text-2xs); color: var(--text-tertiary); margin-top: 0.0625rem; }
/* ─── Models & pricing readout ─── */
.sa-models-body { display: flex; flex-direction: column; gap: 0.375rem; }
.sa-model-row {
display: flex; align-items: baseline; justify-content: space-between; gap: 0.625rem;
padding: 0.4375rem 0.6875rem; border-radius: var(--radius-md);
background: var(--surface-2); border: 1px solid var(--surface-3);
}
.sa-model-role { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.sa-model-id { font-size: var(--text-sm); color: var(--primary); overflow-wrap: anywhere; text-align: right; }
.sa-model-pricing {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.375rem; margin-top: var(--space-1);
}
.sa-model-pricing > div {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
padding: 0.375rem 0.625rem; border-radius: var(--radius-sm);
background: var(--surface-2); border: 1px solid var(--surface-3);
}
.sa-model-pricing span { font-size: var(--text-xs); color: var(--text-secondary); }
.sa-model-pricing strong { font-size: var(--text-label); font-family: var(--font-mono, monospace); }
.sa-model-pricing small { font-size: 0.5625rem; color: var(--text-tertiary); font-weight: 400; }
.sa-model-pricing-unknown { font-size: 0.71875rem; color: var(--warning); padding: var(--space-2) 0.125rem; }
.sa-card {
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-lg);
padding: 1rem 1.125rem 0.875rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.sa-card-head {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.75rem;
font-family: var(--font-mono, monospace);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.sa-card-head strong {
color: var(--text);
font-weight: 600;
letter-spacing: -0.005em;
text-transform: none;
font-family: var(--font-main);
font-size: 0.8125rem;
}
.sa-card-head-spacer { flex: 1; }
/* Inline SVG chart container — fills the card width. */
.sa-chart-wrap {
width: 100%;
min-height: 160px;
}
.sa-chart-wrap svg { width: 100%; height: auto; display: block; }
/* Health row inside the right column. */
.sa-health-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
}
.sa-health-row .sa-tile { min-height: 80px; padding: 0.625rem var(--space-3); gap: 0.125rem; }
.sa-health-row .sa-tile-value { font-size: var(--text-body-lg); }
/* Search + filter strip for the users table. */
.sa-table-toolbar {
display: flex;
align-items: center;
gap: 0.625rem;
flex-wrap: wrap;
padding: 0.75rem 0.875rem;
border-bottom: 1px solid var(--surface-3);
}
.sa-table-toolbar input[type="search"] {
flex: 1;
min-width: 200px;
padding: 0.375rem 0.625rem;
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: 6px;
color: var(--text);
font-size: 0.75rem;
}
.sa-filter-pill {
padding: 0.25rem 0.625rem;
border-radius: 999px;
font-family: var(--font-mono, monospace);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
background: transparent;
border: 1px solid var(--surface-3);
color: var(--text-tertiary);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.sa-filter-pill:hover { color: var(--text); }
.sa-filter-pill.sa-filter-active {
background: var(--primary);
border-color: var(--primary);
color: var(--text-on-primary, #fff);
}
/* Bottom 2x2 grid for insights/audit/integrity/flags. */
.sa-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.875rem;
margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .sa-bottom { grid-template-columns: 1fr; } }
/* Section title inside a card with optional right-aligned actions. */
.sa-section-title {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text);
}
.sa-section-title .sa-section-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.375rem;
}
.sa-section-title .icon { color: var(--text-secondary); }
/* Operator console accessibility and account-control surfaces. */
.sa-app {
font-size: 0.875rem;
line-height: 1.5;
}
.sa-build-id {
color: var(--info);
font-family: var(--font-mono, monospace);
font-size: 0.875rem;
overflow-wrap: anywhere;
}
.sa-topbar-brand small,
.sa-topbar-meta,
.sa-range button,
.sa-kpi-label,
.sa-kpi-sub,
.sa-card-head,
.sa-card-head strong,
.sa-sec-check-detail,
.sa-model-role,
.sa-model-id,
.sa-model-pricing span,
.sa-model-pricing small,
.sa-model-pricing-unknown,
.sa-section-title {
font-size: 0.875rem;
}
.sa-sec-check-label { font-size: var(--text-body-sm); }
.sa-sec-stat-label,
.sa-sec-stat-sub { font-size: var(--text-body-sm); }
.sa-table { font-size: var(--text-body-sm); }
.sa-table th { font-size: var(--text-body-sm); color: var(--text-secondary); }
.sa-app [style*="font-size:9px"],
.sa-app [style*="font-size:10px"],
.sa-app [style*="font-size:11px"],
.sa-app [style*="font-size:12px"],
.sa-app [style*="font-size:13px"] {
font-size: 0.875rem !important;
}
.sa-app .sa-table td,
.sa-app .sa-table td div,
.sa-app .sa-table td span,
.sa-app .sa-table td strong,
.sa-app .sa-table td code {
font-size: 0.875rem !important;
line-height: 1.45;
}
.sa-table-toolbar input[type="search"] {
min-height: 42px;
font-size: 1rem;
color: var(--text);
}
.sa-table-toolbar input[type="search"]::placeholder { color: var(--text-secondary); }
.sa-filter-pill { min-height: 36px; font-size: var(--text-body-sm); }
.sa-app button:focus-visible,
.sa-app a:focus-visible,
.sa-app input:focus-visible,
.sa-app textarea:focus-visible,
.sa-app select:focus-visible,
.sa-action-dialog button:focus-visible,
.sa-action-dialog input:focus-visible,
.sa-action-dialog textarea:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
box-shadow: var(--shadow-focus);
}
.sa-user-row button {
min-width: 38px;
min-height: 38px;
justify-content: center;
}
#saAuditFilter {
min-height: 36px;
max-width: 210px;
padding: 0.375rem 1.75rem 0.375rem 0.625rem;
border: 1px solid var(--surface-3);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text);
font: var(--text-body-sm) var(--font-main);
text-transform: none;
letter-spacing: normal;
}
.sa-repeat-count {
display: inline-block;
margin-left: 0.25rem;
padding: 0.0625rem 0.3125rem;
border-radius: 999px;
background: var(--surface-3);
color: var(--text);
}
.sa-action-dialog {
width: min(680px, calc(100vw - 32px));
max-height: calc(100vh - 40px);
padding: 0;
overflow: auto;
color: var(--text);
background: var(--surface-1);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
}
.sa-action-dialog::backdrop { background: rgba(5, 8, 12, 0.82); }
.sa-action-dialog-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.125rem;
padding: 1.25rem 1.375rem 1rem;
border-bottom: 1px solid var(--surface-3);
}
.sa-action-dialog h2 { margin: 0.1875rem 0 0; font-size: 1.375rem; line-height: 1.25; }
.sa-action-dialog-eyebrow {
color: var(--info);
font: var(--text-body-sm) var(--font-mono, monospace);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sa-action-dialog-eyebrow-danger { color: var(--error, #f4718a); }
.sa-icon-button {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
cursor: pointer;
}
.sa-action-dialog-body { display: grid; gap: var(--space-3); padding: var(--space-5) 1.375rem; }
.sa-action-dialog-body label { color: var(--text); font-size: var(--text-body-sm); font-weight: 600; }
.sa-action-dialog textarea,
.sa-action-dialog input {
width: 100%;
padding: 0.6875rem 0.75rem;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
font: var(--text-body)/1.45 var(--font-main);
box-sizing: border-box;
}
.sa-action-dialog textarea::placeholder,
.sa-action-dialog input::placeholder { color: var(--text-secondary); }
.sa-scope-notice {
padding: 0.75rem 0.875rem;
color: var(--text);
background: var(--info-soft);
border: 1px solid rgba(var(--info-rgb), 0.38);
border-radius: var(--radius-md);
font-size: 0.875rem;
}
.sa-danger-notice {
padding: 0.75rem 0.875rem;
color: var(--error-text, #ffb3c0);
background: rgba(var(--error-rgb), 0.09);
border: 1px solid rgba(var(--error-rgb), 0.38);
border-radius: var(--radius-md);
font-size: 0.875rem;
line-height: 1.55;
}
.sa-reset-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
.sa-grant-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-reset-summary > div {
display: grid;
gap: 0.1875rem;
padding: 0.625rem 0.75rem;
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
}
.sa-reset-summary span { color: var(--text-secondary); font-size: var(--text-body-sm); }
.sa-reset-summary strong { color: var(--text); font-size: 0.9375rem; }
.sa-action-dialog-copy { margin: 0; color: var(--text-secondary); font-size: var(--text-body-sm); line-height: 1.6; }
.sa-action-dialog-status { min-height: 24px; color: var(--text-secondary); font-size: var(--text-body-sm); }
.sa-action-dialog-error { color: var(--error-text); }
.sa-action-dialog-success { color: var(--success); }
.sa-action-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 0.625rem;
padding: 0.875rem 1.375rem 1.25rem;
border-top: 1px solid var(--surface-3);
}
.sa-action-dialog-actions .btn { min-height: 42px; font-size: var(--text-body-sm); }
.sa-action-dialog-actions .btn:disabled { opacity: 0.48; cursor: not-allowed; }
.sa-account-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.125rem;
margin-top: 0.875rem;
padding: 0.875rem 1rem;
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
}
.sa-account-controls strong { font-size: 0.9375rem; }
.sa-account-controls p { margin: 0.1875rem 0 0; color: var(--text-secondary); font-size: var(--text-body-sm); }
.sa-account-controls .btn { flex: 0 0 auto; min-height: 40px; font-size: var(--text-body-sm); }
.sa-job-diagnostics-card { margin-top: 0.875rem; }
.sa-job-diagnostics { display: grid; gap: var(--space-2); }
.sa-job-diagnostic {
padding: 0.625rem 0.75rem;
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
}
.sa-job-diagnostic-error { border-color: rgba(var(--error-rgb), 0.45); }
.sa-job-diagnostic-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) 0.875rem; }
.sa-job-diagnostic-head strong { font-size: var(--text-body-sm); }
.sa-job-diagnostic-head span,
.sa-job-diagnostic-head time,
.sa-job-diagnostic-id { color: var(--text-secondary); font-size: var(--text-body-sm); }
.sa-job-diagnostic-head time { margin-left: auto; }
.sa-job-diagnostic-id { margin-top: 0.1875rem; overflow-wrap: anywhere; }
.sa-job-diagnostic details { margin-top: var(--space-2); }
.sa-job-diagnostic summary { color: var(--error-text); cursor: pointer; font-size: var(--text-body-sm); }
.sa-job-diagnostic ul { margin: var(--space-2) 0 0; padding-left: 1.375rem; }
.sa-job-diagnostic code { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: var(--text-body-sm); }
.sa-empty-note { padding: 0.875rem; color: var(--text-secondary); font-size: var(--text-body-sm); text-align: center; }
@media (max-width: 640px) {
.sa-reset-summary { grid-template-columns: 1fr; }
.sa-account-controls { align-items: stretch; flex-direction: column; }
.sa-action-dialog-actions { flex-direction: column-reverse; }
.sa-action-dialog-actions .btn { width: 100%; }
}
/* ─── Quota warning banner (≥80% / ≥95% of monthly quota used) ─── */
.quota-banner {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.125rem;
margin: 0 0 0.75rem;
border-radius: var(--radius-md);
font-size: 0.8125rem;
line-height: 1.45;
flex-wrap: wrap;
}
.quota-banner .icon { font-size: var(--text-title-sm); flex-shrink: 0; }
.quota-banner-msg { flex: 1 1 220px; }
.quota-banner-cta {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 0.75rem;
letter-spacing: 0.03125em;
padding: 0.375rem 0.875rem;
border-radius: 6px;
border: 0;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.quota-banner-warn {
background: rgba(var(--warning-rgb), 0.07);
border: 1px solid rgba(var(--warning-rgb), 0.25);
color: var(--text-secondary, #a3aeb9);
}
.quota-banner-warn .icon { color: var(--warning); }
.quota-banner-warn .quota-banner-cta {
background: var(--warning);
color: #1a1a1f;
}
.quota-banner-crit {
background: rgba(var(--error-rgb), 0.08);
border: 1px solid rgba(var(--error-rgb), 0.32);
color: var(--text, #e9eef3);
}
.quota-banner-crit .icon { color: var(--error); }
.quota-banner-crit .quota-banner-cta {
background: var(--primary);
color: var(--text-on-primary);
}
#app { position: relative; z-index: 1; }
/* ─── Material Symbols ─── */
.icon {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 1.25rem;
display: inline-block;
line-height: 1;
vertical-align: middle;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
/* Prevent ligature text flashing (e.g. "person", "tune") before font loads */
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
text-rendering: optimizeLegibility;
}
.icon.filled {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
/* Size modifiers — extracted from 18+ inline `style="font-size:var(--text-body)"` and
2× `style="font-size:var(--text-body-lg)"` patterns in index.html. Pair with .icon
directly: tune. */
.icon-sm { font-size: var(--text-body-sm); }
.icon-md { font-size: var(--text-body); }
.icon-lg { font-size: var(--text-body-lg); }
/* Hide icon ligature text until the Material Symbols font is loaded.
The .icons-loading class is added by an inline script in and
removed when document.fonts.ready resolves (or after a 2s timeout). */
html.icons-loading .icon {
visibility: hidden;
}
html.icons-ready .icon {
visibility: visible;
}
/* ─── App Shell ─── */
#app {
max-width: 100%;
margin: 0 auto;
padding: 1.5rem 2rem;
}
/* ─── Header ─── */
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.125rem 1.5rem;
background: transparent;
border: none;
border-radius: var(--radius-lg);
box-shadow: none;
margin-bottom: 1.75rem;
position: relative;
overflow: hidden;
}
/* iPad portrait + smaller. Without this the header used to stack to
>200px tall (brand wraps, tagline overflows, top-bar-actions drop to
the next row) — eating most of the visible area on a 768×1024 tablet. */
@media (max-width: 1024px) {
.top-bar {
padding: 0.75rem 1rem;
margin-bottom: 1.125rem;
}
.brand-tagline {
font-size: 0.75rem;
line-height: 1.2;
}
.brand-tagline .accent {
font-size: 0.75rem;
margin-bottom: 0.0625rem;
}
}
@media (max-width: 768px) {
.top-bar { flex-wrap: wrap; gap: 0.625rem; }
.brand-tagline { display: none; }
}
/* Hidden in handoff — kept as a no-op so existing markup works */
.top-bar::after { content: none; display: none; }
.top-bar-brand {
display: flex;
gap: 1rem;
align-items: center;
position: relative;
z-index: 1;
}
.brand-badge {
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.14em;
padding: 0.625rem 0.875rem;
background: var(--primary);
color: var(--text-on-primary);
border: none;
border-radius: var(--radius-md);
}
/* Editorial italic tagline (replaces brand-label/title/subtitle stack) */
.brand-tagline {
font-family: var(--font-display);
font-style: italic;
font-size: 1.25rem;
font-weight: 400;
color: var(--text-secondary);
letter-spacing: -0.005em;
line-height: 1.15;
}
.brand-tagline .accent {
display: inline-block;
font-family: var(--font-mono);
font-style: normal;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--primary-text);
margin-bottom: 0.1875rem;
}
.brand-pills {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-top: 0.625rem;
font-style: normal;
font-family: var(--font-main);
}
/* Legacy stack (still rendered server-side) — restyle to coexist with the new tagline */
.brand-label {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 0.125rem;
}
.brand-title {
font-family: var(--font-display);
font-style: italic;
font-size: 1.875rem;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--text);
}
.brand-subtitle {
display: flex;
gap: 0.375rem;
margin-top: 0.375rem;
flex-wrap: wrap;
align-items: center;
}
.top-bar-actions {
display: flex;
gap: 0.625rem;
align-items: center;
}
/* ─── Diagnostic Chips (pills) ─── */
.pill {
display: inline-flex;
align-items: center;
padding: 0.1875rem 0.625rem;
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.04em;
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.02);
white-space: nowrap;
}
.pill-sm { font-size: var(--text-sm); padding: 0.125rem var(--space-2); }
.pill-cyan { background: var(--cyan-soft); color: var(--cyan); border-color: rgba(var(--info-rgb), 0.30); }
.pill-lime { background: var(--lime-soft); color: var(--lime); border-color: rgba(var(--success-rgb), 0.30); }
.pill-pink { background: var(--primary-soft); color: var(--primary-surface); border-color: var(--primary-muted); }
.pill-lavender { background: var(--primary-soft); color: var(--primary-surface); border-color: var(--primary-muted); }
.pill-mint { background: var(--lime-soft); color: var(--lime); border-color: rgba(var(--success-rgb), 0.30); }
.pill-yellow { background: var(--warning-soft); color: var(--warning); border-color: rgba(var(--warning-rgb), 0.30); }
.pill-success { background: var(--success-soft); color: var(--success); border-color: rgba(var(--success-rgb), 0.30); }
.pill-error { background: var(--error-soft); color: var(--error); border-color: var(--primary-muted); }
.pill-tonal { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-muted); }
/* ─── Icon Button ─── */
.btn-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: var(--ghost-border);
border-radius: var(--radius-md);
background: var(--surface-2);
color: var(--text-secondary);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn-icon:hover {
background: var(--surface-3);
color: var(--text);
box-shadow: var(--shadow-sm);
}
/* ─── Tabs — underline style (per handoff) ─── */
/* Sticky so the active-tab underline stays visible as the user scrolls a
long bank/billing/admin view. Replaces the audit's "breadcrumb" item —
the active underline IS the "you are here" signal once it persists at
the top of the viewport. Backdrop-filter keeps text legible when the
bar overlaps scrolled content. */
.tab-bar {
display: flex;
gap: 0.125rem;
margin-bottom: 1.75rem;
background: rgba(10, 14, 19, 0.78);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
border-radius: 0;
padding: 0;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
position: sticky;
top: 0;
z-index: 50;
}
.tab-btn {
flex: 0 1 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.125rem;
font-family: var(--font-main);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
border: none;
border-radius: 0;
background: transparent;
color: var(--text-tertiary);
cursor: pointer;
transition: color var(--duration-fast) var(--ease-out);
position: relative;
}
.tab-btn .icon { font-size: var(--text-body-lg); }
.tab-btn:hover {
background: transparent;
color: var(--text-secondary);
}
.tab-btn.active {
background: transparent;
color: var(--text);
box-shadow: none;
}
.tab-btn::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
background: var(--primary);
border-radius: 2px 2px 0 0;
transform: scaleX(0);
transform-origin: 50% 100%;
transition: transform var(--duration-normal) var(--ease-out);
}
.tab-btn.active::after { transform: scaleX(1); }
.tab-btn.active .icon { color: var(--text); }
/* ─── Views ─── */
.view {
display: none;
animation: viewFade 0.3s var(--ease-out);
}
.view.active { display: block; }
@keyframes viewFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Section Labels — readable, with primary-tinted icon ─── */
.section-label {
display: flex;
align-items: center;
gap: 0.625rem;
font-family: var(--font-main);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.005em;
text-transform: none;
color: var(--text);
margin-bottom: 0.25rem;
}
.section-label .icon { font-size: var(--text-title-sm); color: var(--primary); opacity: 0.85; }
.section-label .pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 6px rgba(var(--success-rgb), 0.50);
animation: statusPulse 3s ease-in-out infinite;
}
.section-hint {
font-size: 0.8125rem;
color: var(--text-tertiary);
margin: -0.125rem 0 1.125rem 0;
line-height: 1.55;
text-wrap: pretty;
}
/* ─── Config Surface — handoff card pattern (border-color hover) ─── */
.config-surface {
background: var(--surface-0);
border: var(--ghost-border);
border-radius: var(--radius-lg);
padding: 1.75rem;
margin-bottom: 0.875rem;
transition: border-color var(--duration-normal) var(--ease-out);
position: relative;
}
.config-surface::before { display: none; }
.config-surface::after { display: none; }
.config-surface:hover {
border-color: rgba(255, 255, 255, 0.10);
}
.config-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem 1.25rem;
}
.config-grid .full { grid-column: 1 / -1; }
.config-grid .half { grid-column: span 1; }
/* ─── Toggle Switch ─── */
.toggle-row {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
font-size: 0.875rem;
color: var(--text);
user-select: none;
padding: 0.375rem 0;
}
.neu-toggle {
appearance: none;
-webkit-appearance: none;
width: 0;
height: 0;
opacity: 0;
position: absolute;
}
.toggle-slider {
position: relative;
width: 40px;
height: 22px;
min-width: 40px;
background: var(--surface-3);
border-radius: 11px;
transition: background 0.25s ease;
border: var(--ghost-border);
}
.toggle-slider::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: var(--text-tertiary);
border-radius: 50%;
transition: transform 0.25s ease, background 0.25s ease;
}
.neu-toggle:checked + .toggle-slider {
background: var(--primary);
border-color: var(--primary);
}
.neu-toggle:checked + .toggle-slider::after {
transform: translateX(18px);
background: var(--surface-2);
}
/* ─── Export Config ─── */
.export-surface {
background: var(--surface-0);
border: var(--ghost-border);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 1.25rem;
transition: box-shadow var(--duration-normal) var(--ease-out);
}
.export-surface::after { display: none; }
.export-surface:hover {
box-shadow: var(--shadow-md);
}
.export-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.875rem;
}
/* ─── Form Elements — technical lab aesthetic ─── */
.form-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.form-group label {
font-family: var(--font-main);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--text-secondary);
}
.form-group .hint {
font-size: 0.8125rem;
color: var(--text-tertiary);
line-height: 1.5;
margin-top: -0.125rem;
}
.neu-select,
.neu-input,
.neu-textarea {
font-family: var(--font-main);
font-size: 0.9375rem;
font-weight: 400;
color: var(--text);
padding: 0.8125rem 0.875rem;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-md);
background: var(--surface-lowest);
outline: none;
transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
width: 100%;
}
.neu-select:hover, .neu-input:hover, .neu-textarea:hover {
border-color: rgba(255, 255, 255, 0.10);
}
.neu-select:focus, .neu-input:focus, .neu-textarea:focus {
border-color: var(--primary-muted);
background: var(--surface-0);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.neu-select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2393a1ae' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 2.125rem;
}
.neu-textarea { resize: vertical; min-height: 72px; line-height: 1.6; }
/* ─── Buttons — surgical precision ─── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6875rem 1.25rem;
min-height: 44px;
border-radius: var(--radius-md);
font-family: var(--font-main);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
border: var(--ghost-border);
outline: none;
white-space: nowrap;
transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
line-height: 1.2;
background: var(--surface-2);
color: var(--text);
}
.btn .icon { font-size: var(--text-body-lg); }
.btn:hover {
background: var(--surface-3);
box-shadow: var(--shadow-sm);
}
.btn:active {
transform: translateY(0);
}
.btn:focus-visible, .btn-icon:focus-visible, .tab-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.btn:disabled {
opacity: 0.35;
cursor: not-allowed;
transform: none;
}
/* ─── Feature-gated elements ─── */
.feature-gated {
opacity: 0.35 !important;
cursor: not-allowed !important;
pointer-events: auto !important;
position: relative;
}
.feature-gated:hover {
background: var(--surface-2) !important;
box-shadow: none !important;
transform: none !important;
}
.feature-gated-tooltip {
display: none;
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--surface-0, #111);
color: var(--primary-text);
font-size: 0.75rem;
font-weight: 600;
padding: 0.5rem 0.875rem;
border-radius: 8px;
white-space: nowrap;
z-index: 100;
border: 1px solid var(--primary);
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
pointer-events: none;
}
.feature-gated-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--primary);
}
.feature-gated:hover .feature-gated-tooltip {
display: block;
}
.apa-gated {
opacity: 0.3;
position: relative;
cursor: not-allowed;
}
.apa-gated::after {
content: attr(data-gate-msg);
position: absolute;
top: -2px;
left: 0;
right: 0;
bottom: -2px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(17,17,17,0.85);
color: var(--primary);
font-size: 0.75rem;
font-weight: 600;
border-radius: 6px;
opacity: 0;
transition: opacity 0.15s;
}
.apa-gated:hover::after {
opacity: 1;
}
.btn-primary {
background: var(--primary);
color: var(--text-on-primary);
border-color: transparent;
box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.15), inset 0 0 0 0.5px rgba(181, 240, 232, 0.25);
}
.btn-primary:hover {
background: var(--primary-hover);
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.25), inset 0 0 0 0.5px rgba(181, 240, 232, 0.35);
}
.btn-ghost {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--text-secondary);
}
.btn-ghost:hover {
background: var(--surface-2);
box-shadow: none;
}
.btn-approve {
background: var(--lime-soft);
color: var(--lime);
border-color: rgba(var(--success-rgb), 0.25);
}
.btn-approve:hover {
background: var(--success);
color: var(--text-on-accent);
box-shadow: var(--glow-lime);
}
.btn-reject {
background: transparent;
color: var(--text-secondary);
}
.btn-reject:hover {
background: var(--error-soft);
border-color: var(--primary-muted);
color: var(--error);
}
.btn-confirm {
background: var(--error);
color: var(--text-on-accent);
border-color: transparent;
box-shadow: 0 0 12px rgba(var(--error-rgb), 0.20);
}
.btn-confirm:disabled { opacity: 0.35; }
/* ─── Button density + semantic variants ─────────────────────────────
Use .btn-sm on list-row action buttons that previously relied on inline
`style="font-size: var(--text-sm);padding:var(--space-1) 0.625rem"`. Combine with a color variant
(e.g. .btn-danger-subtle) and/or .btn-iconish to match the old look. */
.btn-sm {
padding: 0.4375rem 0.75rem;
font-size: 0.8125rem;
min-height: 36px;
gap: 0.375rem;
}
.btn-sm .icon { font-size: var(--text-body-sm); }
.btn-xs {
padding: 0.1875rem 0.5rem;
font-size: 0.75rem;
gap: 0.25rem;
}
.btn-xs .icon { font-size: var(--text-body-sm); }
/* Subtle destructive: tints without a full background swap — used for
delete buttons inside list cards where a solid red would shout. */
.btn-danger-subtle {
color: var(--error, #f4718a);
border-color: rgba(var(--error-rgb), 0.20);
}
.btn-danger-subtle:hover {
background: rgba(var(--error-rgb), 0.08);
border-color: rgba(var(--error-rgb), 0.40);
color: var(--error, #f4718a);
}
/* Subtle success: same pattern for Activar-type actions. */
.btn-success-subtle {
color: var(--success, #42d392);
border-color: rgba(var(--success-rgb), 0.22);
}
.btn-success-subtle:hover {
background: rgba(var(--success-rgb), 0.08);
border-color: rgba(var(--success-rgb), 0.40);
color: var(--success, #42d392);
}
/* Tight icon-only variant — keeps .btn base styling but strips the text gap
and padding. Pair with aria-label for accessibility (the iconButton() JS
helper enforces this). */
.btn-iconish {
padding: 0.25rem 0.5rem;
gap: 0;
/* `.page-app .btn-iconish` forces min-width/min-height 44px for the touch
target, which makes the box wider than its padding-sized content. Without
an explicit centre the glyph stays pinned to the flex start — about 5px
left of centre in a 44px button. */
justify-content: center;
}
.btn-iconish .icon { font-size: var(--text-body); }
.btn-export {
background: var(--surface-2);
color: var(--text);
}
.btn-export:hover { background: var(--surface-3); }
.btn-export-primary {
background: var(--primary);
color: var(--text-on-primary);
border-color: transparent;
box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.15);
}
.btn-export-primary:hover { background: var(--primary-hover); }
/* On narrow screens collapse secondary export-bar buttons to icon-only
so the primary "Exportar → DOCX" doesn't get visually crowded out by
the four siblings (ZipGrade, Validar IA, Aprobar todas, etc.). */
@media (max-width: 900px) {
.export-bar .btn-export:not(.btn-export-primary) span:not(.icon) {
display: none;
}
.export-bar .btn-export:not(.btn-export-primary) {
padding: 0.4375rem 0.625rem;
}
}
/* Compact density variant for the header export buttons. Replaces inline
`style="font-size: var(--text-sm);padding:0.375rem var(--space-3)"` on #exportBtn / #exportZipGradeBtn
so it can scale up on touch devices via the @media block. */
.btn-export-compact {
font-size: 0.8125rem;
padding: 0.5625rem 0.875rem;
min-height: 40px;
}
.btn-export-compact .icon { font-size: 0.9375rem; }
@media (max-width: 480px) {
.btn-export-compact {
font-size: 0.75rem;
padding: 0.625rem 0.875rem;
min-height: 40px;
}
.btn-export-compact .icon { font-size: var(--text-body); }
}
.btn-generate {
background: var(--primary);
color: var(--text-on-primary);
border-color: transparent;
width: 100%;
justify-content: center;
padding: 1rem 1.75rem;
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.01em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
position: relative;
overflow: hidden;
transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn-generate:hover {
background: var(--primary-hover);
box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
transform: translateY(-1px);
}
.btn-generate:active {
transform: translateY(0);
}
.btn-generate-kbd {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
background: rgba(0, 0, 0, 0.20);
padding: 0.1875rem 0.5rem;
border-radius: 4px;
margin-left: 0.375rem;
letter-spacing: 0.04em;
}
/* ─── Sticky generate dock — frosted, hovers above content ─── */
.generate-dock {
position: sticky;
bottom: 20px;
background: rgba(13, 18, 24, 0.85);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
padding: 0.375rem;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
margin-top: 1.5rem;
z-index: 10;
}
.generate-dock .btn-generate { box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.15); }
/* ─── Question Card — layered laboratory glass ─── */
.q-card {
background: var(--surface-0);
border: var(--ghost-border);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 1rem;
animation: cardRise 0.4s var(--ease-out) both;
transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.q-card:hover {
box-shadow: var(--shadow-hover);
}
.q-card:nth-child(1) { animation-delay: 0s; }
.q-card:nth-child(2) { animation-delay: 0.06s; }
.q-card:nth-child(3) { animation-delay: 0.12s; }
.q-card:nth-child(4) { animation-delay: 0.18s; }
.q-card:nth-child(5) { animation-delay: 0.24s; }
/* Subtle left accent — single quiet teal signature (the old 6-color
rotation carried no meaning and fought the palette) */
.q-card { border-left: 2px solid var(--primary-muted); }
.q-card:hover { border-left-color: var(--primary); }
@keyframes cardRise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.q-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.375rem;
background: var(--surface-1);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
flex-wrap: wrap;
gap: 0.625rem;
}
.q-header .q-num {
font-family: var(--font-display);
font-style: italic;
font-size: 1.375rem;
font-weight: 400;
color: var(--text-tertiary);
min-width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--radius-sm);
}
.q-header .q-meta {
display: flex;
gap: 0.375rem;
align-items: center;
flex-wrap: wrap;
}
.q-body { padding: var(--space-5); }
.q-vignette {
font-size: 0.9375rem;
line-height: 1.85;
color: var(--text);
margin-bottom: 1rem;
white-space: pre-wrap;
}
.q-leadin {
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.875rem;
padding: 0.625rem 0.875rem;
background: var(--primary-soft);
border-left: 3px solid var(--primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* ─── Options ─── */
.q-options { display: flex; flex-direction: column; gap: 0.375rem; }
.q-opt {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
font-size: 0.875rem;
line-height: 1.7;
border: var(--ghost-border);
color: var(--text);
background: var(--bg);
transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.q-opt:hover {
background: var(--surface-0);
transform: translateX(2px);
}
.q-opt.correct {
background: var(--lime-soft);
border-color: rgba(var(--success-rgb), 0.20);
box-shadow: var(--glow-lime);
}
.q-opt .letter {
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.75rem;
min-width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
border: none;
border-radius: var(--radius-sm);
color: var(--text-secondary);
flex-shrink: 0;
}
.q-opt.correct .letter {
background: var(--success);
color: var(--text-on-accent);
box-shadow: 0 0 8px rgba(var(--success-rgb), 0.25);
}
.q-opt .correctlabel {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--lime);
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.25rem;
background: var(--lime-soft);
padding: 0.125rem 0.625rem;
border-radius: var(--radius-md);
border: 1px solid rgba(var(--success-rgb), 0.30);
}
/* ─── Image Alert ─── */
.img-alert {
padding: 0.875rem 1.25rem;
background: var(--primary-soft);
font-size: 0.8125rem;
color: var(--text);
display: flex;
gap: 0.75rem;
}
/* ─── Explanation Panel ─── */
.exp-panel { padding: 0 var(--space-5) var(--space-4); }
.exp-toggle {
background: none;
border: none;
cursor: pointer;
font-family: var(--font-main);
font-size: 0.8125rem;
font-weight: 600;
color: var(--primary);
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.375rem;
transition: color var(--duration-fast);
}
.exp-toggle:hover { color: var(--primary-hover); }
.exp-content {
margin-top: 0.75rem;
animation: expExpand 0.3s var(--ease-out);
}
@keyframes expExpand {
from { opacity: 0; max-height: 0; }
to { opacity: 1; max-height: 2000px; }
}
.exp-teaching {
font-size: 0.8125rem;
line-height: 1.9;
padding: 1rem;
background: var(--primary-soft);
color: var(--text);
border-left: 3px solid var(--primary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin-bottom: 0.75rem;
white-space: pre-wrap;
}
.exp-rationale {
font-size: 0.75rem;
padding: 0.625rem 0.875rem;
border-radius: var(--radius-sm);
margin-bottom: 0.25rem;
line-height: 1.7;
}
.exp-rationale.correct {
background: var(--success-soft);
color: var(--text);
}
.exp-rationale.wrong {
background: var(--surface-2);
color: var(--text-secondary);
}
.exp-keyconcept {
margin-top: 0.75rem;
padding: 0.875rem 1rem;
background: var(--surface-2);
border: 0.5px dashed rgba(255, 255, 255, 0.10);
border-radius: var(--radius-md);
font-size: 0.75rem;
color: var(--text-secondary);
line-height: 1.7;
}
.exp-keyconcept strong { color: var(--text); }
/* ─── Actions Bar ─── */
.q-actions {
padding: 0.75rem 1.25rem;
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
background: var(--surface-2);
}
.q-actions .status-result {
display: flex;
align-items: center;
gap: 0.5rem;
animation: statusPop 0.35s var(--ease-spring);
}
.undo-reject-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: transparent;
border: 1px solid rgba(255,255,255,0.10);
color: var(--text-secondary);
padding: 0.25rem 0.625rem;
border-radius: var(--radius-sm);
font-family: var(--font-main);
font-size: 0.75rem;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.undo-reject-btn:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.18);
color: var(--text);
}
.undo-reject-btn .icon {
font-size: 0.875rem;
}
@keyframes statusPop {
0% { transform: scale(0.8); opacity: 0; }
60% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
.reject-inline { display: flex; gap: 0.375rem; align-items: center; flex: 1; }
.reject-inline select {
font-family: var(--font-main);
font-size: 0.75rem;
font-weight: 500;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
border: var(--ghost-border);
background: var(--surface-lowest);
color: var(--text);
cursor: pointer;
}
/* ─── Chips — diagnostic status ─── */
.m3chip {
display: inline-flex;
align-items: center;
padding: 0 0.75rem;
height: 24px;
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.04em;
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.02);
gap: 0.25rem;
}
.m3chip.tonal { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-muted); }
.m3chip.success { background: var(--lime-soft); color: var(--lime); border-color: rgba(var(--success-rgb), 0.30); }
.m3chip.error { background: var(--error-soft); color: var(--error); border-color: var(--primary-muted); }
/* ─── Status Bar ─── */
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-secondary);
padding: 0.75rem 1rem;
background: var(--surface-0);
border: var(--ghost-border);
border-radius: var(--radius-md);
flex-wrap: wrap;
gap: 0.5rem;
}
/* ─── Skeleton ─── */
.skeleton-container { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.skeleton-card {
background: var(--surface-0);
border: var(--ghost-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.skeleton-header {
padding: 1rem 1.25rem;
background: var(--surface-2);
display: flex;
gap: 0.875rem;
align-items: center;
}
.skeleton-body { padding: 1.125rem; display: flex; flex-direction: column; gap: var(--space-3); }
.skeleton-line {
height: 12px;
border-radius: 6px;
background: linear-gradient(105deg,
var(--surface-2) 38%, var(--surface-3) 50%, var(--surface-2) 62%);
background-size: 220% 100%;
animation: skShimmer 1.4s ease-in-out infinite;
}
@keyframes skShimmer {
from { background-position: 130% 0; }
to { background-position: -90% 0; }
}
.skeleton-line.w100 { width: 100%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w20 { width: 20%; height: 24px; }
.skeleton-line:nth-child(2) { animation-delay: 0.15s; }
.skeleton-line:nth-child(3) { animation-delay: 0.3s; }
@keyframes skPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }
/* ─── Cinematic Generation Pipeline ─── */
/* Full-screen overlay when body.is-generating — works from any tab */
body.is-generating { overflow: hidden; }
body.is-generating #loadingState {
display: flex !important;
position: fixed;
inset: 0;
/* Sits above modals (--z-modal: 2200) so a confirm/prompt that fires
mid-generation can't punch through the overlay. */
z-index: var(--z-overlay-gen);
background: rgba(10, 14, 19, 0.96);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
align-items: center;
justify-content: center;
padding: 2rem;
overflow-y: auto;
animation: genFadeIn 0.25s ease;
}
body.is-generating #loadingState .gen-stage {
width: 100%;
max-width: 760px;
margin-bottom: 0;
}
@keyframes genFadeIn { from { opacity: 0; } to { opacity: 1; } }
.gen-stage {
background: var(--surface-0);
border: var(--ghost-border);
border-radius: var(--radius-lg);
padding: 1.75rem;
margin-bottom: 1rem;
position: relative;
overflow: hidden;
}
.gen-stage::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, var(--primary-soft), transparent);
animation: genSweep 3s linear infinite;
pointer-events: none;
}
@keyframes genSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.gen-top {
display: flex;
align-items: center;
gap: 0.875rem;
margin-bottom: 1.125rem;
position: relative;
z-index: 1;
}
.gen-phase-title {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cyan);
}
.gen-phase-sub {
font-size: 0.875rem;
color: var(--text);
margin-top: 0.1875rem;
}
.gen-pipeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
margin-bottom: 1.125rem;
position: relative;
z-index: 1;
}
.gen-step {
padding: 0.75rem 0.875rem;
background: var(--surface-lowest);
border: var(--ghost-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: 0.25rem;
transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.gen-step.active {
background: var(--primary-soft);
border-color: var(--primary-muted);
box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.08);
}
.gen-step.done {
background: var(--lime-soft);
border-color: rgba(var(--success-rgb), 0.30);
}
.gen-step .step-num {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--text-tertiary);
}
.gen-step.active .step-num { color: var(--primary); }
.gen-step.done .step-num { color: var(--lime); }
.gen-step .step-name {
font-size: 0.75rem;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 0.375rem;
}
.gen-step .step-name .icon { font-size: var(--text-body-sm); }
.gen-step.active .step-name .icon {
color: var(--primary);
animation: pulseBreath 1.2s ease-in-out infinite;
}
.gen-step.done .step-name .icon { color: var(--lime); }
@keyframes pulseBreath {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Stream output panel (cinematic) */
.stream-out {
background: var(--surface-lowest);
border: var(--ghost-border);
border-left: 2px solid var(--primary);
border-radius: var(--radius-lg);
padding: 1.5rem 1.75rem;
margin-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.9;
color: var(--text);
white-space: pre-wrap;
box-shadow: 0 0 24px rgba(var(--primary-rgb), 0.08);
min-height: 80px;
position: relative;
z-index: 1;
}
.stream-out .stream-meta {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-tertiary);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.625rem;
display: flex;
gap: 0.625rem;
align-items: center;
}
.pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
animation: pulseBreath 1.2s ease-in-out infinite;
}
/* Log console */
.gen-log {
background: var(--surface-lowest);
border: var(--ghost-border);
border-radius: var(--radius-md);
padding: 0.875rem 1rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-secondary);
line-height: 1.8;
max-height: 160px;
overflow: hidden;
position: relative;
z-index: 1;
mask-image: linear-gradient(to bottom, transparent, black 30%, black);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black);
}
.gen-log-line {
display: flex;
gap: 0.625rem;
animation: logLineIn 0.25s ease-out;
}
.gen-log-line .ts { color: var(--text-tertiary); flex-shrink: 0; }
.gen-log-line .lvl { color: var(--cyan); flex-shrink: 0; width: 40px; }
.gen-log-line.ok .lvl { color: var(--lime); }
.gen-log-line.warn .lvl { color: var(--warning); }
@keyframes logLineIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 700px) {
.gen-pipeline { grid-template-columns: 1fr 1fr; }
.gen-stage { padding: 1.125rem 0.875rem; }
.stream-out { padding: var(--space-4); }
}
@media (max-width: 480px) {
.gen-pipeline { grid-template-columns: 1fr; }
}
/* ─── Streaming Typewriter ─── */
.stream-cursor {
display: inline-block;
width: 2px;
height: 14px;
background: var(--primary);
margin-left: 0.0625rem;
vertical-align: text-bottom;
animation: streamBlink 0.6s ease-in-out infinite;
}
@keyframes streamBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
#streamingOutput {
position: relative;
border-left: 2px solid var(--primary);
background: var(--surface-lowest) !important;
box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.06);
transition: box-shadow 0.3s ease;
}
#streamingOutput:not(:empty) {
box-shadow: 0 0 24px rgba(var(--primary-rgb), 0.10);
}
/* ─── Spinner Ring — Clinical Cyan ─── */
.spinner-ring {
width: 44px;
height: 44px;
border: 2px solid rgba(var(--info-rgb), 0.10);
border-top-color: var(--cyan);
border-radius: 50%;
animation: spin 0.7s linear infinite;
box-shadow: 0 0 12px rgba(var(--info-rgb), 0.10);
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ─── Async button state ───
Add .is-loading (JS: ui.setButtonLoading) to any button while its
request is in flight: input is blocked, label dims, an inline spinner
appears. Works on filled and ghost buttons alike via currentColor. */
.is-loading {
position: relative;
pointer-events: none;
opacity: 0.78;
}
.is-loading::after {
content: '';
position: absolute;
right: 10px;
top: 50%;
width: 13px;
height: 13px;
margin-top: -0.4375rem;
border: 2px solid transparent;
border-top-color: currentColor;
border-right-color: currentColor;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
/* ─── Medical Word Loader (compact inline) ─── */
.med-loader {
--loader-bg: var(--bg);
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.125rem;
background: rgba(16, 22, 29, 0.7);
border: var(--ghost-border);
border-radius: var(--radius-md);
margin-top: 0.5rem;
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
}
.spinner-ring-sm {
width: 22px;
height: 22px;
border: 2px solid rgba(var(--info-rgb), 0.10);
border-top-color: var(--cyan);
border-radius: 50%;
animation: spin 0.7s linear infinite;
flex-shrink: 0;
}
.med-words {
overflow: hidden;
position: relative;
height: 22px;
flex: 1;
min-width: 0;
}
.med-words::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
var(--loader-bg) 5%,
transparent 25%,
transparent 75%,
var(--loader-bg) 95%
);
z-index: 20;
pointer-events: none;
}
.med-word {
display: block;
height: 22px;
line-height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--cyan);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
animation: medWordSpin 6s infinite;
}
@keyframes medWordSpin {
10% { transform: translateY(-102%); }
25% { transform: translateY(-100%); }
35% { transform: translateY(-202%); }
50% { transform: translateY(-200%); }
60% { transform: translateY(-302%); }
75% { transform: translateY(-300%); }
85% { transform: translateY(-402%); }
100% { transform: translateY(-400%); }
}
.med-loader-sub {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-tertiary);
opacity: 0.5;
white-space: nowrap;
flex-shrink: 0;
}
/* ─── Empty ─── */
.empty { text-align: center; padding: 3.75rem var(--space-5); color: var(--text-secondary); font-size: 0.9375rem; }
.empty-icon-wrap {
width: 72px;
height: 72px;
margin: 0 auto 1.25rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
border: var(--ghost-border);
border-radius: var(--radius-lg);
}
.empty-icon-wrap .icon { font-size: 2rem; color: var(--text-tertiary); }
.empty p { max-width: 280px; margin: 0 auto; line-height: 1.7; }
/* ─── Image Placeholder ─── */
.img-placeholder {
display: inline-block;
padding: 0.1875rem 0.75rem;
margin: 0.25rem 0.125rem;
border-radius: var(--radius-sm);
background: var(--primary-soft);
border: 1px dashed var(--primary-muted);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
color: var(--primary);
}
/* ─── Error ─── */
.error-banner {
padding: 0.875rem 1.125rem;
border: 1px solid var(--primary-muted);
border-radius: var(--radius-md);
background: var(--error-soft);
color: var(--error);
font-size: 0.8125rem;
font-weight: 500;
margin-top: 1rem;
display: flex;
gap: 0.75rem;
align-items: flex-start;
box-shadow: 0 0 16px rgba(var(--error-rgb), 0.10);
}
.error-banner .icon { flex-shrink: 0; color: var(--error); }
/* ─── Toast ─── */
.toast-container {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
pointer-events: none;
}
.toast {
background: rgba(34, 45, 56, 0.90);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
color: var(--text);
padding: 0.75rem 1rem 0.75rem 1.25rem;
border-radius: var(--radius-md);
border: var(--ghost-border);
font-size: 0.875rem;
font-weight: 500;
box-shadow: var(--shadow-lg);
animation: toastIn 0.3s var(--ease-out);
pointer-events: auto;
display: flex;
align-items: center;
gap: 0.625rem;
max-width: min(560px, 90vw);
}
/* Dismissal is JS-driven (hover pauses the timer; close button) — the old
pure-CSS toastOut at a fixed 2.5s couldn't be paused or closed. */
.toast-closing { animation: toastOut 0.25s ease-in forwards; }
.toast-error { border-color: rgba(244, 113, 138, 0.5); }
.toast-error .icon:first-child { color: var(--error); }
.toast-warning { border-color: rgba(245, 185, 65, 0.5); }
.toast-warning .icon:first-child { color: var(--warning); }
.toast-msg { flex: 1; }
.toast-close {
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 0.25rem;
margin: -0.25rem -0.25rem -0.25rem 0;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
}
.toast-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
@keyframes toastIn {
from { opacity: 0; transform: translateY(16px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
from { opacity: 1; }
to { opacity: 0; transform: translateY(-8px) scale(0.95); }
}
/* ─── Modal — Glassmorphism (frosted laboratory glass) ─── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(16, 22, 29, 0.60);
backdrop-filter: blur(var(--blur-lg));
-webkit-backdrop-filter: blur(var(--blur-lg));
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
}
.modal-surface {
background: rgba(27, 36, 46, 0.85);
backdrop-filter: blur(var(--blur-xl));
-webkit-backdrop-filter: blur(var(--blur-xl));
border: var(--ghost-border);
border-radius: var(--radius-lg);
padding: 1.75rem;
max-width: 480px;
width: 100%;
box-shadow: var(--shadow-xl);
/* Ambient light leak */
background-image: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.06) 0%, transparent 50%);
}
.modal-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.modal-header .icon {
font-size: 1.5rem;
background: var(--primary-soft);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
color: var(--primary);
}
.modal-surface h2 { font-size: var(--text-title-sm); font-weight: 600; color: var(--text); }
.modal-surface p { font-size: var(--text-body-sm); color: var(--text-secondary); margin-bottom: var(--space-5); line-height: 1.7; }
.modal-actions { display: flex; gap: 0.625rem; justify-content: flex-end; margin-top: var(--space-5); }
/* ─── Responsive ─── */
@media (max-width: 900px) {
.source-radio-group { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
#app { padding: 0.875rem; padding-bottom: var(--space-24); /* leave room for sticky dock */ }
.config-surface { padding: 1.125rem 0.875rem; }
.config-grid { grid-template-columns: 1fr 1fr; }
.export-grid { grid-template-columns: 1fr; }
.export-meta-row { grid-template-columns: 1fr; padding: var(--space-3) 0.875rem; }
/* Top bar — compact "app chrome" mode on phones.
The marketing tagline + brand-pills are wonderful on desktop but they
devour the viewport on a phone. Hide them and keep only the badge,
user identity, and logout — single horizontal row, fits comfortably. */
.top-bar {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.625rem;
padding: 0.625rem 0.75rem;
margin-bottom: 1.125rem;
}
.top-bar-brand { gap: 0.625rem; align-items: center; }
.brand-tagline,
.brand-pills,
.brand-subtitle { display: none; }
.brand-badge { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
.top-bar-actions {
width: auto;
/* Override the inline style="flex-direction:column;align-items:flex-end;gap:var(--space-2)"
on this element so the actions sit on a single horizontal row. */
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 0.5rem !important;
}
/* Header export buttons (DOCX / ZipGrade) hide on phones — the same
buttons live inside the Resultados view, so they're not lost. */
#exportBtnWrap { display: none !important; }
.q-header { flex-direction: column; align-items: flex-start; }
.brand-title { font-size: var(--text-body); }
/* Tab bar: allow horizontal scroll on small screens so tabs don't crush */
.tab-bar {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; }
/* Make primary CTA full width on mobile so it's thumb-reachable */
.btn-generate { width: 100%; justify-content: center; }
/* Toggle row reflows: hint drops to its own line */
.toggle-row { flex-wrap: wrap; row-gap: var(--space-1); }
.toggle-hint { margin-left: 2.375rem; flex-basis: 100%; }
/* Status bar reflows */
.status-bar { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
#exportBtnInline { flex-wrap: wrap; }
/* Source-radio grid: force single column at phone widths so cards size
to their own content instead of being stretched to match the tallest
sibling. Bumped to a more specific selector + !important to win
against any cached/older 2-col rule the user might still be on. */
.source-section .source-radio-group { grid-template-columns: 1fr !important; }
.source-radio-group { grid-template-columns: 1fr !important; }
.source-radio { padding: var(--space-3) 0.875rem; }
.source-radio-help { font-size: var(--text-sm); line-height: 1.4; }
/* Material de referencia card — squeeze the long parenthetical sublabel
("(libro, presentación o resumen — ...)") which wraps to 3 lines and
bloats the card vertically. */
.source-book-picker { padding: 0.625rem var(--space-3); gap: 0.375rem; }
.source-book-picker-label { flex-wrap: wrap; gap: 0.375rem; font-size: var(--text-sm); }
.source-book-picker-label > span:nth-of-type(2) > span { display: none; }
/* Native iOS