*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Refined Megadodo — 70s paperback soul, calmed for a clinical tool:
off-white paper, muted terracotta + teal, hairline borders, soft shadows.
Keep the Hitchhiker's identity; lose the shout. Dark = warm brown, not cold gray. */
:root {
/* Native control chrome (checkboxes, date pickers, select arrows,
scrollbars) rendered light-mode inside warm-dark — no color-scheme
was ever declared (audit 2026-07-15 P2 #32). */
color-scheme: light;
/* Surfaces */
--bg: #faf6ef; /* page — off-white paper (was cream #f5ead5) */
--surface: #ffffff; /* cards / panels */
--surface-raised: #f4ecdb; /* sidebar / raised paper */
--card: #ffffff; /* alias used by older rules */
--border: #e7ddca; /* hairline warm border */
--border-strong: #c9bda3; /* one notch stronger — dashed drop-zones, emphasis */
/* Text */
--ink: #2c2a26; /* primary text / strong lines */
--text: #2c2a26;
--muted: #756c5a; /* secondary text — ~4.7:1 on --bg, WCAG AA */
--text-muted: #8a7f6b; /* hints / tertiary (large / non-essential) */
/* Brand */
--accent: #c2602f; /* muted terracotta (was burnt orange #d85a30) */
--accent-dk: #a84f23; /* hover */
--btn-accent: #a84f23; /* solid fills with white text (buttons/active pills/user bubble) — AA 5.5:1 */
--btn-accent-hover: #8f3f1b;
--accent-text: #a84f23; /* accent used as TEXT on light fills — AA 4.6:1 (flips brighter in dark) */
--accent-lt: #f6e7dc; /* soft accent fill */
--accent-muted: #e8c9b3;
--teal: #0f6e56;
--teal-lt: #e6f3ec;
--amber: #c47a1e; /* calmer amber (was #fbbf24) */
--amber-lt: #faeeda;
--user-bg: #a84f23; /* darker for white-text AA (chat bubble) */
--user-fg: #ffffff;
/* Scorecard role dots (--sc-role-1..7) — categorical seat hues, each ≥3:1 on --surface */
--sc-role-1: #1D9E75; --sc-role-2: #D4537E; --sc-role-3: #378ADD; --sc-role-4: #BA7517;
--sc-role-5: #7F77DD; --sc-role-6: #c2602f; --sc-role-7: #0F6E56;
/* Semantic status — prefer these over scattered hex literals */
--success: #2f8f4e;
--success-dk: #1f6b39; /* AA-dark green for text on --success-lt */
--success-lt: #e8f4ea;
--amber-dk: #8a5410; /* AA-dark amber for text on --amber-lt */
/* Fixed dark-on-solid-amber text/icon colors (chips/badges filled with
var(--amber) itself, not --amber-lt). Same value in both themes today
— not redefined in the dark block — so tokenizing here changes zero
rendered pixels, it just stops the value being repeated as a bare hex
literal across 10 separate rules. */
--amber-ink: #412402;
--amber-ink-2: #633806; /* softer variant — .digest-items body text */
--amber-ink-3: #854F0B; /* .digest-dismiss icon */
--danger: #c0392b;
--danger-dk: #a32d2d;
--danger-lt: #f7e7e7;
--danger-border: rgba(163,45,45,0.16);
--warn: #c47a1e;
--warn-lt: #fbf2e1;
--purple: #534AB7;
--purple-lt: #EEEDFE;
/* Type */
/* Known, intentional hex/font-size exceptions outside this token system (audit
2026-07-13 P2) — don't re-flag these in a future token-drift sweep:
- js/13-update-banner.js: the update toast is deliberately always-dark
regardless of app theme, so it uses its own literal hex palette.
- js/05-meeting-audio.js, js/09-library-vto.js: dev-console-only easter-egg
console.log('%c...') strings — CSS custom properties are inert inside
console %c styling, so these MUST stay literal (see the reverse-normalize
footgun note in CLAUDE.md). */
--font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
--fs-2xs: 10px; --fs-2xs-half: 10.5px; --fs-xs: 11px; --fs-xs-half: 11.5px;
--fs-sm: 12px; --fs-sm-half: 12.5px; --fs-base: 13px; --fs-base-half: 13.5px;
--fs-md: 14px; --fs-md-half: 14.5px;
--fs-15: 15px; --fs-lg: 16px; --fs-17: 17px; --fs-xl: 18px; --fs-2xl: 20px;
--fs-3xl: 24px; --fs-4xl: 28px; --fs-5xl: 40px;
/* Spacing scale (compact density) */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
/* Geometry */
--radius: 10px;
--radius-sm: 8px;
--radius-lg: 14px;
--border-w: 1px; /* hairline default (was 1.5–2px ink) */
/* Soft shadows (replaces the 4px hard-offset ink shadow) */
--shadow-sm: 0 1px 2px rgba(60,45,25,0.07);
--shadow: 0 1px 3px rgba(60,45,25,0.09);
--shadow-md: 0 4px 14px rgba(60,45,25,0.12);
/* Shell */
--sidebar-w: 188px;
}
/* Warm dark — brown-black + cream, keeps the paperback feel */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #1c1916;
--surface: #272320;
--surface-raised: #211d19;
--card: #272320;
--border: #3a342c;
--border-strong: #4a4238;
--ink: #ede4d3;
--text: #ede4d3;
--muted: #a89c87;
--text-muted: #8c8474;
--accent: #e07a45;
--accent-dk: #c96a38;
--btn-accent: #b85a2a; /* solid fills w/ white text — AA 4.6:1 in dark */
--btn-accent-hover: #a84f23;
--accent-text: #f0997b; /* accent-as-text, brighter for AA on dark fills */
--accent-lt: #3a2a20;
--accent-muted: #5a4636;
--teal: #5dcaa5;
--teal-lt: #1d2b26;
--amber: #d99a4a;
--amber-lt: #2e2517;
--user-bg: #b85a2a; /* darker for white-text AA (chat bubble) */
--user-fg: #ffffff;
/* Scorecard role dots — lightened for the dark surface (#0F6E56 teal was ~2.6:1) */
--sc-role-1: #3FBE95; --sc-role-2: #E97AA0; --sc-role-3: #5DA6F0; --sc-role-4: #D89A3A;
--sc-role-5: #9B93EC; --sc-role-6: #e07a45; --sc-role-7: #2FA588;
--success: #5dba78;
--success-dk: #7fce97; /* brighter green for text on dark --success-lt */
--success-lt: #1e2c20;
--amber-dk: #e0b366; /* brighter amber for text on dark --amber-lt */
--danger: #e88a7a;
--danger-dk: #e88a7a;
--danger-lt: #3a2420;
--danger-border: rgba(232,138,122,0.22);
--warn: #d99a4a;
--warn-lt: #2e2517;
--purple: #AFA9EC;
--purple-lt: #2a2640;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
--shadow: 0 1px 3px rgba(0,0,0,0.30);
--shadow-md: 0 4px 14px rgba(0,0,0,0.40);
}
html, body {
height: 100%;
font-family: var(--font);
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
}
.shell {
display: flex;
flex-direction: column;
height: 100dvh;
width: 100%;
padding-left: var(--sidebar-w); /* reserve space for the fixed sidebar */
}
/* ── Persistent left sidebar (Phase 1 shell) ─────────────── */
.mb-sidebar {
position: fixed; left: 0; top: 0; bottom: 0;
width: var(--sidebar-w); z-index: 50;
background: var(--surface-raised);
border-right: var(--border-w) solid var(--border);
display: flex; flex-direction: column; gap: 2px;
padding: 12px 10px; overflow-y: auto;
}
.mb-sb-brand {
display: flex; align-items: center; gap: 8px;
padding: 4px 6px 10px; cursor: pointer; border-radius: var(--radius-sm);
}
.mb-sb-brand:hover { background: var(--accent-lt); }
.mb-sb-brand .logo { width: 26px; height: 26px; border-radius: 7px; }
.mb-sb-brand .logo img { width: 26px; height: 26px; object-fit: cover; }
.mb-sb-brand b { font-size: var(--fs-lg); font-weight: 600; color: var(--text); letter-spacing: -0.01em; flex: 1; min-width: 0; }
.mb-sb-42 {
width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
background: var(--surface); border: var(--border-w) solid var(--accent);
color: var(--accent); font-size: var(--fs-sm); font-weight: 600;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: transform 0.15s;
}
.mb-sb-42:hover { transform: scale(1.12) rotate(-6deg); }
.mb-sb-group { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted); padding: 10px 8px 3px; }
.mb-sb-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 7px 8px; border: none; background: none; cursor: pointer;
border-radius: var(--radius-sm); font-family: var(--font);
font-size: var(--fs-base); color: var(--text); text-align: left;
transition: background 0.12s, color 0.12s;
}
.mb-sb-item .ti { font-size: var(--fs-lg); color: var(--muted); width: 18px; flex-shrink: 0; text-align: center; }
/* Sidebar count badges (audit design-advisor B4) — appended as the last
child of a .mb-sb-item; margin-left:auto pushes it flush right since
.mb-sb-item is already display:flex. */
.sb-badge {
margin-left: auto; background: var(--accent); color: var(--user-fg);
font-size: var(--fs-2xs-half); font-weight: 600; line-height: 1;
padding: 3px 6px; border-radius: 9px; flex-shrink: 0;
}
.mb-sb-item.active .sb-badge { background: var(--accent-dk); }
.mb-sb-item:hover { background: var(--accent-lt); }
.mb-sb-item.active { background: var(--accent-lt); color: var(--accent-dk); font-weight: 500; }
.mb-sb-item.active .ti { color: var(--accent); }
.mb-sb-spacer { flex: 1; min-height: 8px; }
@media (max-width: 860px) {
.shell { padding-left: 0; }
.mb-sidebar { transform: translateX(-100%); transition: transform 0.22s ease;
box-shadow: var(--shadow-md); }
.mb-sidebar.open { transform: translateX(0); }
}
/* ── Header → slim calm top bar ─────────────────────────── */
header {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 18px;
background: var(--surface);
border-bottom: var(--border-w) solid var(--border);
flex-shrink: 0;
}
#nav { display: none !important; } /* nav now lives in the sidebar */
header .home-link { display: none; } /* brand now lives in the sidebar */
header > .badge-42 { display: none; } /* 42 now lives in the sidebar */
.mb-sb-toggle {
display: none; background: none; border: none; cursor: pointer;
color: var(--muted); font-size: var(--fs-2xl); padding: 4px; border-radius: var(--radius-sm);
}
@media (max-width: 860px) { .mb-sb-toggle { display: inline-flex; } }
.logo {
width: 32px; height: 32px;
border-radius: 9px;
overflow: hidden;
flex-shrink: 0;
}
.logo img { width: 32px; height: 32px; object-fit: cover; }
.home-link {
display: flex; align-items: center; gap: 10px;
flex: 1; min-width: 0;
cursor: pointer; border-radius: 9px;
padding: 3px 6px; margin: -3px -6px;
transition: background 0.15s;
}
.home-link:hover { background: var(--accent-lt); }
.home-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header-text { min-width: 0; }
.header-text h1 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0.04em; color: var(--ink); text-transform: uppercase; }
.header-text p { font-size: var(--fs-xs); color: var(--accent-muted); margin-top: 1px; letter-spacing: 0.1em; text-transform: uppercase; }
/* The Answer — header badge */
.badge-42 {
width: 30px; height: 30px; border-radius: 50%;
background: var(--accent-lt); color: var(--accent-dk);
font-size: var(--fs-base); font-weight: 600;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; cursor: pointer; user-select: none;
transition: transform 0.15s, box-shadow 0.15s;
}
.badge-42:hover { transform: scale(1.1) rotate(-6deg); box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.badge-42:active { transform: scale(0.95); }
.badge-42:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The Answer — quote popup easter egg */
#quote-pop {
position: fixed; inset: 0; z-index: 10000;
display: none; align-items: center; justify-content: center;
background: rgba(20,16,10,0.55); backdrop-filter: blur(3px);
opacity: 0; transition: opacity 0.2s;
}
#quote-pop.visible { opacity: 1; }
#quote-pop .quote-card {
background: var(--card); color: var(--text);
border: 1px solid var(--border);
border-radius: 16px; max-width: 460px; width: calc(100% - 48px);
padding: 28px 26px 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.3);
transform: translateY(10px) scale(0.97); transition: transform 0.2s;
text-align: center;
}
#quote-pop.visible .quote-card { transform: translateY(0) scale(1); }
#quote-pop .quote-42 {
width: 44px; height: 44px; border-radius: 50%;
background: var(--btn-accent); color: var(--user-fg);
font-size: var(--fs-xl); font-weight: 600;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 14px;
}
#quote-pop .quote-text { font-size: var(--fs-lg); line-height: 1.5; font-weight: 600; }
#quote-pop .quote-src { font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
#quote-pop .quote-actions { margin-top: 18px; display: flex; gap: 8px; justify-content: center; }
#quote-pop .quote-btn {
background: var(--btn-accent); color: var(--user-fg); border: none; cursor: pointer;
font-size: var(--fs-base); font-weight: 600; padding: 8px 16px; border-radius: 9px;
}
#quote-pop .quote-btn.ghost { background: transparent; color: var(--muted); border: 1.5px solid var(--muted); }
/* Back button — only visible in chat view */
#back-btn {
display: none;
align-items: center; gap: 5px;
background: none; border: none; cursor: pointer;
font-size: var(--fs-base); font-weight: 500; color: var(--muted);
padding: 4px 8px 4px 4px; border-radius: 8px;
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}
#back-btn:hover { color: var(--accent); background: var(--accent-lt); }
/* Header actions group */
.header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}
.header-sep {
width: 1px; height: 18px;
background: var(--border);
margin: 0 2px;
flex-shrink: 0;
}
/* Nav buttons — only in chat view */
#header-nav {
display: none;
align-items: center;
gap: 6px;
}
/* Shared button base — consolidates den-btn/sc-action-btn/header-btn/app-page-btn
into one system (audit 2026-07-13, mockup-approved): a common shape + a
primary (accent-filled) / secondary (neutral) / ghost (outlined) palette,
each family keeping only its own layout quirks and context overrides below. */
.den-btn, .sc-action-btn, .header-btn, .app-page-btn {
padding: 7px 14px;
border-radius: 8px;
border: 1px solid transparent;
font-family: var(--font);
font-size: var(--fs-sm);
font-weight: 600;
cursor: pointer;
display: flex; align-items: center; gap: 5px;
white-space: nowrap;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.den-btn, .sc-action-btn, .app-page-btn {
background: var(--btn-accent); color: var(--user-fg);
}
.den-btn:hover, .app-page-btn:hover { background: var(--btn-accent-hover); }
.sc-action-btn:hover { background: var(--teal); }
.den-btn:disabled, .sc-action-btn:disabled, .app-page-btn:disabled { opacity: 0.5; cursor: default; }
/* header-btn's own default is the "secondary" (neutral) palette — it sits on
the header's dark surface, unlike the other three which sit on light panels. */
.header-btn {
background: var(--surface);
color: var(--ink);
border-color: var(--border);
flex-shrink: 0;
}
.header-btn:hover { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent); }
.header-btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
/* In-panel action buttons sit on the light panel surface, where the header's
cream-on-dark palette is invisible until hover. Give them a solid accent fill. */
.onb-add-form .header-btn,
#cert-type-manager .header-btn {
background: var(--btn-accent); border-color: var(--btn-accent); color: var(--user-fg);
justify-content: center;
}
.onb-add-form .header-btn:hover,
#cert-type-manager .header-btn:hover {
background: var(--btn-accent-hover); border-color: var(--accent-dk); color: var(--user-fg);
}
.onb-add-form .header-btn:disabled,
#cert-type-manager .header-btn:disabled { background: var(--accent); border-color: var(--accent); }
/* Person pill (always in header) */
.person-pill-wrap { display: flex; align-items: center; gap: 5px; }
.person-pill-label { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.person-select {
padding: 4px 8px;
border-radius: 20px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: var(--fs-sm); font-weight: 500;
font-family: var(--font);
cursor: pointer; outline: none;
transition: border-color 0.15s;
}
.person-select:focus { border-color: var(--accent); }
/* ── Dashboard view ─────────────────────────────────────── */
#dashboard {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0 24px;
}
.hero {
padding: 44px 20px 32px;
text-align: center;
max-width: 680px;
margin: 0 auto;
}
.hero h2 {
font-size: var(--fs-4xl); font-weight: 600; letter-spacing: 0.01em;
color: var(--text); margin-bottom: 8px;
}
.hero > p {
font-size: var(--fs-md); color: var(--muted);
margin-bottom: 24px; line-height: 1.6;
}
.search-box {
display: flex; align-items: center; gap: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 10px 10px 16px;
box-shadow: var(--shadow);
transition: box-shadow 0.15s, transform 0.15s;
}
.search-box:focus-within {
transform: translate(-1px, -1px);
box-shadow: var(--shadow);
}
.search-icon { color: var(--muted); flex-shrink: 0; }
.search-box input {
flex: 1; border: none; outline: none;
font-family: var(--font); font-size: var(--fs-15);
background: transparent; color: var(--text);
}
.search-box input::placeholder { color: var(--muted); }
.ask-btn {
background: var(--btn-accent); color: var(--user-fg);
border: 1px solid var(--border); border-radius: 8px;
padding: 8px 16px; font-size: var(--fs-base); font-weight: 600;
letter-spacing: 0.03em;
cursor: pointer; flex-shrink: 0;
transition: background 0.15s;
}
.ask-btn:hover { background: var(--teal); }
.quick-chips {
display: flex; flex-wrap: wrap; gap: 7px;
justify-content: center; margin-top: 16px;
}
.qchip {
padding: 6px 13px; border-radius: 20px;
border: 1px solid var(--border);
background: var(--surface);
font-size: var(--fs-base); cursor: pointer; color: var(--text);
transition: background 0.15s;
}
.qchip:hover { background: var(--amber); }
/* Cards grid */
.cards-section {
padding: 0 16px;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.dash-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px 16px 16px;
cursor: pointer;
transition: box-shadow 0.15s, transform 0.15s;
display: flex; flex-direction: column; gap: 6px;
font: inherit; text-align: left; width: 100%;
}
.dash-card:hover {
box-shadow: var(--shadow);
transform: translate(-1px, -1px);
}
.dash-card-icon {
width: 36px; height: 36px; border-radius: 9px;
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
margin-bottom: 6px;
}
.dash-card-icon.orange { background: var(--accent); color: var(--user-fg); }
.dash-card-icon.green { background: var(--teal); color: var(--user-fg); }
.dash-card-icon.amber { background: var(--amber); color: var(--amber-ink); }
.dash-card-icon.purple { background: var(--purple); color: var(--purple-lt); }
.dash-card h3 { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.dash-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.dash-card-count {
display: inline-block; margin-top: 4px;
font-size: var(--fs-xs); font-weight: 600; color: var(--text);
background: var(--bg); border: 1px solid var(--border);
border-radius: 20px; padding: 2px 9px;
}
.dash-card-count.green { background: var(--teal-lt); color: var(--teal); }
/* Live status sub-line — surfaces "is anything wrong here?" per card */
.dash-card-status {
display: flex; align-items: center; gap: 6px;
margin-top: 4px; font-size: var(--fs-xs); line-height: 1.3; color: var(--muted);
}
.dash-card-status .sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.dash-card-status.amber { color: var(--warn); }
.dash-card-status.red { color: var(--danger-dk); }
.dash-card-status.green { color: var(--teal); }
.dash-card-status.gray { color: var(--muted); }
/* Recent activity */
.activity-section {
padding: 24px 16px 48px;
}
.section-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.section-header h3 {
font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted);
}
.see-all-btn {
background: none; border: none; cursor: pointer;
font-size: var(--fs-sm); font-weight: 500; color: var(--accent-dk);
padding: 0;
}
.activity-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.activity-item {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 14px 14px 12px;
display: flex; flex-direction: column; gap: 6px;
cursor: pointer;
transition: box-shadow 0.15s, transform 0.15s;
}
.activity-item:hover {
box-shadow: var(--shadow);
transform: translate(-1px, -1px);
}
.activity-dot {
width: 7px; height: 7px; border-radius: 50%;
flex-shrink: 0;
}
.activity-dot.orange { background: var(--accent); }
.activity-dot.amber { background: var(--amber); }
.activity-dot.green { background: var(--teal); }
.activity-body { min-width: 0; }
.activity-text {
font-size: var(--fs-base); color: var(--text); line-height: 1.4;
font-weight: 600;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.activity-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.activity-empty { font-size: var(--fs-base); color: var(--muted); padding: 14px 0; }
/* ── Chat view ──────────────────────────────────────────── */
#chat {
display: none;
flex: 1;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
#chat.active { display: flex; }
.messages {
flex: 1;
overflow-y: auto;
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 16px;
-webkit-overflow-scrolling: touch;
}
.msg {
display: flex; flex-direction: column;
max-width: 85%; gap: 4px;
}
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.agent { align-self: flex-start; align-items: flex-start; }
.bubble {
padding: 11px 15px; border-radius: var(--radius);
font-size: var(--fs-15); line-height: 1.55;
white-space: pre-wrap; word-break: break-word;
}
.msg.user .bubble { background: var(--user-bg); color: var(--user-fg); border: 1px solid var(--border); border-bottom-right-radius: 4px; }
.msg.agent .bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.sources { display: flex; flex-wrap: wrap; gap: 5px; padding: 3px 0; }
.source-badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; }
/* Phase B — span-level citations in chat answers */
.cite-ref { color: var(--accent-text); font-weight: 500; font-size: 0.72em; cursor: pointer; padding: 0 1px; vertical-align: super; line-height: 0; }
.cite-ref:hover { text-decoration: underline; }
.cite-ref:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.citations { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.citations-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.citations-head i { font-size: var(--fs-md); color: var(--accent); }
.citation-item { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.citation-item.citation-flash { border-color: var(--accent); background: var(--accent-lt); }
.citation-row { display: flex; align-items: baseline; gap: 8px; }
.citation-marker { color: var(--accent-text); font-weight: 500; font-size: var(--fs-sm); flex: 0 0 auto; }
.citation-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.citation-quote { margin-top: 5px; padding-left: 9px; border-left: 3px solid var(--accent); font-size: var(--fs-sm-half); line-height: 1.55; color: var(--muted); }
/* Thinking dots */
.thinking .bubble {
display: flex; gap: 5px; align-items: center; padding: 14px 16px;
}
.dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--border);
animation: pulse 1.2s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
30% { opacity: 1; transform: scale(1.25); }
}
/* ── Input bar ──────────────────────────────────────────── */
.input-bar {
padding: 10px 20px;
padding-bottom: max(10px, env(safe-area-inset-bottom));
background: var(--surface);
border-top: 1px solid var(--border);
flex-shrink: 0;
}
/* Recording bar */
.mic-recording-bar {
display: none; align-items: center; gap: 10px;
padding: 8px 10px; margin-bottom: 8px;
background: var(--danger-lt); border: 1px solid var(--danger-border);
border-radius: 10px;
}
.mic-waveform { display: flex; align-items: center; gap: 2.5px; height: 30px; flex: 1; }
.waveform-bar {
flex: 1; border-radius: 3px; background: var(--danger);
height: 10%; min-height: 3px; transition: height 75ms ease;
}
.mic-recording-label { font-size: var(--fs-sm); color: var(--danger); white-space: nowrap; font-weight: 500; }
.file-preview {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; margin-bottom: 6px;
background: var(--accent-lt);
border: 1px solid var(--accent-muted);
border-radius: 8px; font-size: var(--fs-base); color: var(--text);
}
.file-preview .remove-file { cursor: pointer; color: var(--muted); font-size: var(--fs-15); line-height: 1; margin-left: auto; }
.file-preview .remove-file:hover { color: var(--accent); }
form { display: flex; gap: 8px; align-items: flex-end; }
.icon-btn {
width: 44px; height: 44px; border-radius: 10px;
border: 1px solid var(--border); background: var(--bg);
color: var(--text); cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--amber); color: var(--ink); }
.icon-btn.recording { background: var(--danger-lt); color: var(--danger); border-color: var(--danger); }
.icon-btn.has-file { background: var(--accent-lt); color: var(--accent); border-color: var(--accent); }
textarea {
flex: 1; resize: none;
border: 1px solid var(--border); border-radius: 10px;
padding: 10px 14px;
font-family: var(--font); font-size: var(--fs-15); line-height: 1.45;
background: var(--bg); color: var(--text);
outline: none; max-height: 120px; min-height: 44px;
overflow-y: auto; transition: border-color 0.15s;
}
textarea:focus { border-color: var(--accent); }
textarea::placeholder { color: var(--muted); }
/* Focus borders — replaces inline onfocus/onblur JS on these inputs (audit 2026-07-11 P2). */
#upload-meeting-date:focus { border-color: var(--accent); }
.spk-name-input:focus { border-color: var(--accent); }
.admin-role-label:focus { border-color: var(--border); }
button[type="submit"] {
width: 44px; height: 44px; border-radius: 10px;
border: 1px solid var(--border); background: var(--btn-accent); color: var(--user-fg);
font-size: var(--fs-xl); cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.15s;
}
button[type="submit"]:disabled { opacity: 0.4; cursor: default; }
button[type="submit"]:not(:disabled):hover { opacity: 0.85; }
/* ── Note / Meeting / Consolidate bubbles ───────────────── */
.msg.note-confirm .bubble {
background: var(--accent-lt);
border: 1px solid var(--accent-muted);
font-size: var(--fs-md);
}
.note-entity { font-weight: 600; color: var(--accent-dk); }
.note-superseded {
margin-top: 6px; font-size: var(--fs-sm); color: var(--muted);
padding-top: 6px; border-top: 1px solid var(--border);
}
.msg.consolidate-result .bubble {
background: var(--success-lt); border: 1px solid var(--border); font-size: var(--fs-md);
}
.consolidate-stat { font-weight: 600; color: var(--success); }
.consolidate-action-list {
margin-top: 10px; font-size: var(--fs-sm); color: var(--muted);
display: flex; flex-direction: column; gap: 4px;
}
.consolidate-action-list .ca-archive { color: var(--danger); }
.consolidate-action-list .ca-merge { color: var(--warn); }
.consolidate-action-list .ca-update { color: var(--purple); }
/* ── Consolidate review (pre-confirm) ───────────────────── */
.msg.consolidate-review .bubble {
background: var(--warn-lt); border: 1px solid var(--border); font-size: var(--fs-md);
}
.consolidate-review-actions {
display: flex; gap: 8px; margin-top: 12px;
}
.consolidate-apply-btn {
padding: 6px 16px; border-radius: 8px; border: none;
background: var(--success); color: var(--user-fg); font-size: var(--fs-base); font-weight: 600;
cursor: pointer; transition: opacity 0.15s;
}
.consolidate-apply-btn:hover { opacity: 0.85; }
.consolidate-apply-btn:disabled { opacity: 0.5; cursor: default; }
.consolidate-cancel-btn {
padding: 6px 14px; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface);
color: var(--muted); font-size: var(--fs-base); cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.consolidate-cancel-btn:hover { background: var(--bg); color: var(--text); }
.consolidate-cancel-btn:disabled { opacity: 0.5; cursor: default; }
/* ── Undo upload btn ────────────────────────────────────── */
.undo-btn {
display: inline-block; margin-top: 8px; padding: 3px 10px;
font-size: var(--fs-sm); color: var(--muted); cursor: pointer;
background: none; border: 1px solid var(--border); border-radius: 6px;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.undo-btn:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-lt); }
.undo-btn:disabled { opacity: 0.5; cursor: default; }
/* ── Correct btn ────────────────────────────────────────── */
.correct-btn {
background: var(--bg); border: 1px solid var(--border); padding: 3px 8px; margin-top: 4px;
font-size: var(--fs-xs); color: var(--muted); cursor: pointer;
display: inline-flex; align-items: center; gap: 3px;
border-radius: 6px; transition: color 0.15s, background 0.15s, border-color 0.15s;
align-self: flex-start;
}
.correct-btn:hover { color: var(--accent); background: var(--accent-lt); border-color: var(--accent); }
/* ── Answer trust strip — citations + last-verified + feedback thumbs
(audit design-advisor A2/A3/B2) ────────────────────────────────── */
.answer-trust-strip {
display: flex; align-items: center; gap: 8px; margin-top: 6px;
font-size: var(--fs-xs); color: var(--muted); /* was --text-muted, 3.66:1 AA-fail; audit 2026-07-23 P2 #19 */
}
.trust-verified { display: inline-flex; align-items: center; gap: 4px; }
.trust-verified i { font-size: var(--fs-sm); color: var(--teal); }
.trust-spacer { flex: 1; }
.trust-thumb {
background: none; border: 1px solid var(--border); border-radius: 6px;
padding: 3px 6px; color: var(--muted); cursor: pointer; line-height: 1;
display: inline-flex; align-items: center; transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.trust-thumb:hover { color: var(--accent); background: var(--accent-lt); border-color: var(--accent); }
.trust-thumb.active { color: var(--accent-dk); background: var(--accent-lt); border-color: var(--accent); }
.trust-thumb i { font-size: var(--fs-sm); }
/* ── Markdown ───────────────────────────────────────────── */
.bubble-md { white-space: normal !important; }
.bubble-md h2 { font-size: var(--fs-17); font-weight: 600; margin: 12px 0 5px; }
.bubble-md h3 { font-size: var(--fs-15); font-weight: 600; margin: 10px 0 4px; color: var(--muted); }
.bubble-md p { margin-bottom: 8px; }
.bubble-md p:last-child { margin-bottom: 0; }
.bubble-md ul, .bubble-md ol { padding-left: 18px; margin-bottom: 8px; }
.bubble-md li { margin-bottom: 3px; line-height: 1.5; }
.bubble-md strong { font-weight: 600; }
.bubble-md em { font-style: italic; }
.bubble-md table { border-collapse: collapse; width: 100%; margin-bottom: 8px; font-size: var(--fs-base); display: block; overflow-x: auto; }
.bubble-md th, .bubble-md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.bubble-md th { background: var(--bg); font-weight: 600; }
.bubble-md tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
.bubble-md hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.bubble-md code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: var(--fs-base); font-family: monospace; }
.bubble-md img { max-width: 100%; border-radius: 8px; margin: 10px 0; display: block; border: 1px solid var(--border); }
/* ── Scorecard view (Meeting OS) ────────────────────────── */
#scorecard-view {
display: none;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#scorecard-view.active { display: block; }
.sc-toolbar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 14px 16px 10px;
}
.sc-toolbar h2 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: 0.01em; }
.sc-toolbar .sc-spacer { margin-left: auto; }
.sc-back {
display: flex; align-items: center; gap: 4px;
background: none; border: none; cursor: pointer;
font-family: var(--font); font-size: var(--fs-base); color: var(--muted); padding: 4px 6px 4px 0;
}
.sc-back i { font-size: var(--fs-base); }
.sc-back:hover { color: var(--accent); }
/* The L10 runner's back button pauses (recording keeps going), it does not
navigate home like every other .sc-back — give it a distinct warn tint so
it doesn't read as an identical "back to home" control. */
.sc-back-pause { color: var(--warn); }
.sc-back-pause:hover { color: var(--warn); opacity: 0.8; }
.sc-pill {
padding: 5px 12px; border-radius: 20px;
border: 1px solid var(--border); background: var(--surface);
font-family: var(--font); font-size: var(--fs-sm); cursor: pointer; color: var(--text);
transition: background 0.15s;
}
.sc-pill:hover { background: var(--accent-lt); border-color: var(--accent-muted); }
.sc-pill.active { background: var(--btn-accent); color: var(--user-fg); font-weight: 600; }
.sc-pill.active:hover { background: var(--btn-accent-hover); border-color: var(--btn-accent-hover); }
.sc-action-btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.sc-action-btn.secondary:hover { background: var(--amber); }
.sc-grid-wrap { padding: 0 16px 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-grid { border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); min-width: 100%; }
.sc-grid th, .sc-grid td { padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sc-grid th { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); text-align: center; }
.sc-grid th.sc-week-current { color: var(--text); font-weight: 600; }
.sc-grid td.sc-metric-cell, .sc-grid th.sc-metric-cell {
position: sticky; left: 0; background: var(--bg); z-index: 1;
min-width: 150px; max-width: 220px; white-space: normal;
/* the metric cell is now for screen readers (audit
2026-07-16 UI P2); neutralize the .sc-grid th defaults (center / muted /
weight 500 / fs-xs) so it renders byte-identical to the old . */
text-align: left; color: var(--text); font-weight: 400; font-size: var(--fs-sm);
}
@supports not (position: sticky) {
.sc-metric-cell:first-child, th:first-child { position: relative; }
}
.sc-metric-name { font-weight: 600; font-size: var(--fs-sm); }
.sc-metric-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.sc-cell { text-align: center; font-weight: 600; min-width: 52px; }
.sc-cell.green { background: var(--teal-lt); color: var(--teal); }
.sc-cell.red { background: var(--danger-lt); color: var(--danger-dk); }
/* Non-color status cue for colorblind users — glyph precedes the value */
.sc-cell.green::before { content: '✓ '; font-size: 0.85em; }
.sc-cell.red::before { content: '✗ '; font-size: 0.85em; }
.sc-cell.neutral { background: var(--surface); color: var(--text); }
.sc-cell.missing { background: var(--surface-raised); color: var(--muted); font-weight: 400; }
.sc-seat-header td {
padding: 12px 8px 5px; border-bottom: 1px solid var(--border);
font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-dk);
}
.sc-seat-header td:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; }
.sc-seat-header .sc-seat-owner { text-transform: none; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* Inline sparkline strokes — class-based so they flip with the theme */
.sc-spark-line { stroke: var(--teal); }
.sc-spark-target { stroke: var(--muted); }
.sc-spark-dot.green { fill: var(--teal); }
.sc-spark-dot.red { fill: var(--danger-dk); }
.sc-spark-dot.neutral { fill: var(--muted); }
.sc-section-label {
font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
color: var(--muted); text-transform: uppercase; padding: 14px 16px 6px;
}
.sc-empty { padding: 28px 16px; font-size: var(--fs-base); color: var(--muted); font-style: italic; }
/* Entry + manage lists */
.sc-list { padding: 0 16px 40px; display: flex; flex-direction: column; gap: 8px; }
/* Scannable list views become a responsive card grid on wide screens */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; padding: 18px 22px 40px; align-content: start; }
/* People / control rows: keep a bounded measure so the per-row controls
(History / Permissions / role select) sit next to the name instead of
being stranded at the far edge on a full-bleed frame. Widened from the
prior 1180px so wide screens aren't half-empty, but still bounded. */
.rows-narrow { max-width: 1320px; margin: 0 auto; width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; padding: 14px 14px 32px; } }
/* Tasks: flow the open action-item cards into a responsive grid so they
fill the width instead of stacking in a narrow single column. */
#tasks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; align-content: start; }
@media (max-width: 560px) { #tasks-list { grid-template-columns: 1fr; } }
.sc-row {
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
padding: 10px 12px;
}
.sc-row-title { font-size: var(--fs-base); font-weight: 600; }
.sc-row-sub { font-size: var(--fs-xs); color: var(--muted); }
.sc-row-controls { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.sc-input {
border: 1px solid var(--border); border-radius: 8px;
padding: 7px 10px; font-family: var(--font); font-size: var(--fs-md);
background: var(--bg); color: var(--text); outline: none;
width: 110px;
}
.sc-input:focus { border-color: var(--accent); }
.sc-input.wide { flex: 1; min-width: 140px; }
.sc-select {
border: 1px solid var(--border); border-radius: 8px;
padding: 7px 8px; font-family: var(--font); font-size: var(--fs-sm);
background: var(--bg); color: var(--text); outline: none; max-width: 160px;
}
.sc-saved-tick { color: var(--teal); font-size: var(--fs-md); font-weight: 600; }
.sc-field-label { font-size: var(--fs-xs); color: var(--muted); display: block; margin-bottom: 2px; }
/* Roles & owners — compact card grid */
.sc-role-cards {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px; padding: 0 16px 8px;
}
.sc-role-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
padding: 12px 14px; display: flex; flex-direction: column; gap: 7px;
}
.sc-role-card-head { display: flex; align-items: center; gap: 8px; }
.sc-role-card .sc-input { width: 100%; box-sizing: border-box; }
.sc-role-card .sc-select { max-width: none; width: 100%; box-sizing: border-box; }
.sc-role-name { border: none; background: transparent; font-weight: 600; font-size: var(--fs-md); padding: 4px 2px; }
.sc-role-name:focus { border: 1px solid var(--accent); background: var(--bg); }
.sc-role-card-add { border-style: dashed; justify-content: center; }
.sc-role-card-add .sc-action-btn { width: 100%; }
/* Metrics editor — grouped by role, dense table per group */
.sc-mgroups { padding: 0 16px 40px; }
.sc-mgroup {
border: 1px solid var(--border); border-radius: 10px;
overflow: hidden; margin-bottom: 12px; background: var(--surface);
}
.sc-mgroup-head {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.sc-mdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sc-mgroup-name { font-size: var(--fs-base); font-weight: 600; }
.sc-mgroup-meta { font-size: var(--fs-xs); color: var(--muted); }
.sc-mtable { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-base); }
.sc-mtable th {
font-size: var(--fs-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--muted); text-align: left; padding: 6px 8px; white-space: nowrap;
}
.sc-mtable td { padding: 5px 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.sc-mtable tr.sc-mrow.archived { opacity: 0.5; }
.sc-mtable .sc-input, .sc-mtable .sc-select { width: 100%; max-width: none; box-sizing: border-box; }
.sc-mname { border: none; background: transparent; font-weight: 500; padding: 6px 4px; }
.sc-mname:focus { border: 1px solid var(--accent); background: var(--bg); }
.sc-mact { display: flex; gap: 4px; justify-content: flex-end; }
.sc-icon-btn {
width: 30px; height: 30px; padding: 0; display: inline-flex;
align-items: center; justify-content: center; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface); color: var(--text);
cursor: pointer; font-size: var(--fs-15); transition: background 0.15s;
}
.sc-icon-btn:hover { background: var(--amber); }
.sc-icon-btn.danger { color: var(--danger-dk); border-color: var(--danger-border); }
.sc-icon-btn.danger:hover { background: var(--danger-lt); }
.sc-mdetail { display: none; }
.sc-mdetail.open { display: table-row; }
.sc-mdetail td { background: var(--bg); }
.sc-mdetail-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 4px 2px; }
.sc-mdetail-inner label { font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sc-mmove { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.sc-mmove .sc-select { width: auto; min-width: 150px; }
.sc-mgroup-add {
display: flex; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); background: var(--bg);
}
/* ── Meeting OS view (rocks / issues / todos) ───────────── */
#eos-view {
display: none;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#eos-view.active { display: block; }
.eos-status-pill {
padding: 4px 11px; border-radius: 20px;
border: 1px solid var(--border);
font-family: var(--font); font-size: var(--fs-xs); font-weight: 600;
cursor: pointer; white-space: nowrap;
transition: transform 0.1s;
}
.eos-status-pill:active { transform: scale(0.95); }
/* Done/dropped rocks render this as a , not a — no click
affordance for a chip that no longer toggles (audit 2026-07-23 UI P1). */
span.eos-status-pill { cursor: default; }
span.eos-status-pill:active { transform: none; }
.eos-status-pill.on_track { background: var(--teal-lt); color: var(--teal); }
.eos-status-pill.off_track { background: var(--danger-lt); color: var(--danger-dk); }
.eos-status-pill.done { background: var(--teal-lt); color: var(--teal); font-weight: 700; }
.eos-status-pill.dropped { background: var(--surface-raised); color: var(--muted); }
/* Non-color status cue for colorblind users */
.eos-status-pill.on_track::before { content: '✓ '; }
.eos-status-pill.off_track::before { content: '✗ '; }
.eos-status-pill.done::before { content: '✓ '; }
.eos-src {
font-size: var(--fs-xs); border-radius: 20px; padding: 2px 8px; font-weight: 500;
border: 1px solid var(--border); background: var(--bg); color: var(--muted);
white-space: nowrap;
}
.eos-src.scorecard_red { background: var(--danger-lt); color: var(--danger-dk); border-color: var(--danger-border); }
/* text was var(--amber) on var(--amber-lt) — AA fail, audit 2026-07-15 P2 #33 */
.eos-src.rock_offtrack { background: var(--amber-lt); color: var(--amber-dk); border-color: var(--border); }
.eos-src.transcript { background: var(--teal-lt); color: var(--teal); border-color: var(--border); }
.eos-src.l10 { background: var(--purple-lt); color: var(--purple); border-color: var(--border); }
.eos-src.live { background: var(--accent-lt); color: var(--accent-text); border-color: var(--accent-muted); display: inline-flex; align-items: center; gap: 5px; }
.dt-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; }
/* Open (never-closed) meeting row: subtle left accent bar + inline actions */
.dt-meeting-row.open-meeting { box-shadow: inset 2px 0 0 var(--accent); }
.dt-meeting-row-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; margin-top: 1px; }
.dt-row-btn {
font: inherit; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
color: var(--text); background: var(--surface); cursor: pointer;
border: 1px solid var(--border-strong); border-radius: 7px; padding: 4px 10px;
}
.dt-row-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Decision Ledger (Phase C) */
.dc-card .sc-row-title { font-weight: 500; }
.dc-chip { font-size: var(--fs-xs); border-radius: 20px; padding: 2px 10px; font-weight: 500; white-space: nowrap; flex: 0 0 auto; }
.dc-chip.dc-open { background: var(--accent-lt); color: var(--accent-text); }
.dc-chip.dc-too_early { background: var(--amber-lt); color: var(--amber-dk); }
.dc-chip.dc-confirmed { background: var(--success-lt); color: var(--success-dk); }
.dc-chip.dc-refuted { background: var(--danger-lt); color: var(--danger-dk); }
.dc-chip.dc-retired { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.dc-pred { margin-top: 6px; font-size: var(--fs-base); color: var(--muted); display: flex; align-items: baseline; gap: 6px; }
.dc-pred i { color: var(--accent); font-size: var(--fs-md); }
.dc-pred-none { color: var(--muted); }
.dc-track { color: var(--text-muted); }
.dc-verdict { margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--accent); font-size: var(--fs-sm-half); line-height: 1.55; color: var(--muted); }
.dc-verdict i { color: var(--muted); font-size: var(--fs-base); margin-right: 4px; }
.dc-predform { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.dc-link { background: none; border: none; padding: 0; color: var(--accent-text); font-size: var(--fs-base); font-weight: 500; cursor: pointer; }
.dc-link:hover { text-decoration: underline; }
.eos-rank-btn {
width: 26px; height: 22px; border-radius: 6px;
border: 1px solid var(--border); background: var(--surface);
font-size: var(--fs-xs); cursor: pointer; color: var(--text); line-height: 1;
}
.eos-rank-btn:hover { background: var(--amber); }
.eos-rank-btn:disabled { opacity: 0.3; cursor: default; }
.eos-stat {
display: inline-block; padding: 5px 13px; border-radius: 20px;
border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600;
}
.eos-stat.good { background: var(--teal-lt); color: var(--teal); }
.eos-stat.bad { background: var(--danger-lt); color: var(--danger-dk); }
.eos-stat.none { background: var(--bg); color: var(--muted); font-weight: 400; }
.eos-check {
width: 26px; height: 26px; border-radius: 50%;
border: 1px solid var(--border); background: var(--surface);
cursor: pointer; flex-shrink: 0; font-size: var(--fs-base); line-height: 1;
display: flex; align-items: center; justify-content: center;
color: transparent; transition: background 0.15s, color 0.15s;
}
.eos-check:hover { color: var(--muted); }
.eos-check.checked { background: var(--teal); border-color: var(--teal); color: var(--user-fg); }
.sc-cell.red.droppable { cursor: pointer; }
.sc-cell.red.droppable:hover { outline: 2px solid var(--danger-dk); outline-offset: -2px; }
/* ── L10 meeting runner ─────────────────────────────────── */
#runner-view {
display: none;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#runner-view.active { display: flex; flex-direction: column; }
.runner-rail {
display: flex; gap: 5px; padding: 10px 16px 0;
overflow-x: auto; -webkit-overflow-scrolling: touch;
flex-shrink: 0;
}
.runner-chip {
flex: 1; min-width: 74px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--surface); padding: 6px 8px;
font-family: var(--font); font-size: var(--fs-xs); text-align: center;
cursor: pointer; opacity: 0.5; transition: opacity 0.15s, background 0.15s;
}
.runner-chip .runner-chip-time { color: var(--muted); font-size: var(--fs-xs); }
.runner-chip.current { opacity: 1; background: var(--amber); font-weight: 600; }
.runner-chip.current .runner-chip-time { color: var(--amber-ink); }
.runner-chip.visited { opacity: 0.8; background: var(--teal-lt); }
.runner-statusbar {
display: flex; align-items: center; gap: 10px;
padding: 8px 16px; flex-shrink: 0; flex-wrap: wrap;
}
#runner-timer {
font-size: var(--fs-3xl); font-weight: 600; letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
#runner-timer.over { color: var(--danger-dk); }
.runner-rec {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-xs); font-weight: 600; color: var(--danger-dk);
border: 1px solid var(--danger-border); border-radius: 20px; padding: 3px 10px;
background: var(--danger-lt); cursor: pointer;
}
.runner-rec.off { color: var(--muted); border-color: var(--border); background: var(--bg); font-weight: 400; }
.runner-rec-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
animation: recblink 1.2s ease-in-out infinite;
}
@keyframes recblink { 50% { opacity: 0.25; } }
/* Persistent, cross-screen recording pill (lives in the always-visible header). */
.global-rec-pill {
display: inline-flex; align-items: center; gap: 7px;
font-size: var(--fs-xs); font-weight: 600; color: var(--danger-dk);
border: 1px solid var(--danger-border); border-radius: 20px; padding: 4px 12px;
background: var(--danger-lt); cursor: pointer; white-space: nowrap;
}
.global-rec-pill.paused { color: var(--muted); border-color: var(--border); background: var(--bg); }
.global-rec-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
animation: recblink 1.2s ease-in-out infinite;
}
.global-rec-pill.paused .global-rec-dot { animation: none; background: var(--muted); }
.global-rec-label { font-weight: 400; color: var(--danger-dk); }
.global-rec-pill.paused .global-rec-label { color: var(--muted); }
@media (max-width: 560px) { .global-rec-label { display: none; } }
#runner-body { flex: 1; padding-bottom: 20px; }
.runner-nav {
display: flex; gap: 8px; padding: 10px 16px;
padding-bottom: max(10px, env(safe-area-inset-bottom));
border-top: 1px solid var(--border); background: var(--surface);
flex-shrink: 0; position: sticky; bottom: 0;
}
.runner-headlines {
width: calc(100% - 32px); margin: 8px 16px; min-height: 140px;
border: 1px solid var(--border); border-radius: 10px; padding: 12px;
font-family: var(--font); font-size: var(--fs-md); line-height: 1.5;
background: var(--surface); color: var(--text); outline: none; resize: vertical;
}
.runner-headlines:focus { border-color: var(--accent); }
/* ── L10 in-app capture bar + processing card ───────────── */
#runner-capture { padding: 0 16px; }
#runner-capture:empty { display: none; }
#recent-capture { padding: 12px 16px 0; }
#recent-capture:empty { display: none; }
.cap-bar {
background: var(--surface); border: 1px solid var(--danger-border);
border-radius: var(--radius); padding: 12px 14px; margin-top: 8px;
}
.cap-bar.paused { border-color: var(--border); }
.cap-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cap-time { font-size: var(--fs-4xl); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: 0.5px; }
.cap-time-label { font-size: var(--fs-sm); color: var(--muted); }
.cap-meta { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cap-wave { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-bottom: 12px; }
.cap-wave span { flex: 1; border-radius: 2px; background: var(--danger); height: 12%; min-height: 3px; transition: height 75ms ease; }
.cap-bar.paused .cap-wave span { background: var(--border); }
.cap-controls { display: flex; align-items: center; gap: 8px; }
.cap-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 8px; font-size: var(--fs-base); font-weight: 600;
border: 1px solid var(--border); background: var(--bg); color: var(--text);
cursor: pointer; transition: background 0.15s, color 0.15s;
}
.cap-btn:hover { background: var(--amber); color: var(--ink); }
.cap-btn.danger { color: var(--danger); border-color: var(--danger); }
.cap-btn.danger:hover { background: var(--danger); color: var(--user-fg); }
.cap-mic { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.cap-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 12px 16px; margin-top: 8px;
}
.cap-step { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: var(--fs-md); color: var(--text); }
.cap-step .cap-sub { color: var(--muted); font-size: var(--fs-sm); }
.cap-step .cap-ico { width: 18px; text-align: center; flex-shrink: 0; }
.cap-ico.pending { color: var(--muted); }
.cap-ico.active { color: var(--accent); }
.cap-ico.ok { color: var(--teal); }
.cap-ico.err { color: var(--danger); }
.cap-card-foot {
border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px;
display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-md);
}
.cap-spin { display: inline-block; animation: cap-rot 0.9s linear infinite; }
@keyframes cap-rot { to { transform: rotate(360deg); } }
.cap-speakers { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; }
.cap-spk-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cap-spk-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; min-width: 74px; }
.cap-spk-input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: var(--fs-base); background: var(--surface); color: var(--text); }
.cap-spk-input:focus { outline: none; border-color: var(--accent); }
/* ── Library view (document list + editor) ──────────────── */
#library-view {
display: none;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#library-view.active { display: block; }
.lib-editor {
width: calc(100% - 32px); margin: 8px 16px; min-height: 55vh;
border: 1px solid var(--border); border-radius: 10px; padding: 14px;
font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-base); line-height: 1.55;
background: var(--surface); color: var(--text); outline: none; resize: vertical;
}
#lib-title {
font-family: var(--font);
font-size: var(--fs-17); font-weight: 600;
}
.lib-editor:focus { border-color: var(--accent); }
.lib-kind {
font-size: var(--fs-xs); border-radius: 20px; padding: 2px 9px; font-weight: 500;
border: 1px solid var(--border); background: var(--bg); color: var(--muted);
white-space: nowrap; flex-shrink: 0;
max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
/* ── Slide-out panels ───────────────────────────────────── */
#upload-panel {
position: fixed; top: 0; right: 0;
width: 380px; max-width: 100vw; height: 100%;
background: var(--surface); border-left: 1px solid var(--border);
z-index: 100; display: flex; flex-direction: column;
transform: translateX(100%); transition: transform 0.25s ease;
box-shadow: -4px 0 24px rgba(0,0,0,0.08);
}
#upload-panel.open {
transform: translateX(0);
}
/* ── Admin full-screen overlay ──────────────────────────── */
#admin-panel {
position: fixed; inset: 0; z-index: 200;
background: var(--bg);
display: none; flex-direction: row;
}
#admin-panel.open { display: flex; }
#admin-sidebar {
width: 220px; flex-shrink: 0;
background: var(--surface); border-right: 1px solid var(--border);
display: flex; flex-direction: column; padding: 0;
}
#admin-sidebar-header {
padding: 20px 20px 16px; font-size: var(--fs-15); font-weight: 600;
color: var(--text); border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.admin-nav-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px; margin: 4px 8px; border-radius: 8px;
font-size: var(--fs-base); color: var(--muted); cursor: pointer;
border: none; background: none; width: calc(100% - 16px); text-align: left;
}
.admin-nav-item:hover { background: var(--bg); color: var(--text); }
.admin-nav-item.active { background: var(--bg); color: var(--text); font-weight: 600; border: 1px solid var(--border); }
.admin-nav-icon { font-size: var(--fs-lg); }
#admin-content { flex: 1; overflow-y: auto; padding: 32px 40px; }
.admin-section-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text); margin: 0 0 4px; }
.admin-section-desc { font-size: var(--fs-base); color: var(--muted); margin: 0 0 20px; line-height: 1.5; }
.admin-role-card {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px; border: 1px solid var(--border);
border-radius: 8px; background: var(--surface); margin-bottom: 8px;
}
.admin-role-card.dragging { opacity: 0.45; }
.admin-staff-card {
padding: 14px 16px; border: 1px solid var(--border);
border-radius: 8px; background: var(--surface); margin-bottom: 8px;
}
.admin-add-row { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
/* Vocab panel table */
.vocab-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.vocab-table th { padding: 8px 12px; text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }
.vocab-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.vocab-table tr:last-child td { border-bottom: none; }
.vocab-term { font-weight: 600; color: var(--text); }
.vocab-aliases { color: var(--muted); font-size: var(--fs-sm); cursor: pointer; }
.vocab-aliases:focus { outline: 1px solid var(--accent); border-radius: 4px; }
.vocab-del-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: var(--fs-15); padding: 2px 4px; line-height: 1; }
.vocab-del-btn:hover { color: var(--accent); }
.vocab-subtitle { padding: 10px 16px 4px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; border-bottom: 1px solid var(--border); }
/* Week 1 checklist items */
.w1-item { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; }
.w1-item:last-child { border-bottom: none; }
.w1-item.done { opacity: 0.6; }
.w1-check { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: background 0.15s, border-color 0.15s; }
.w1-check.done { background: var(--teal); border-color: var(--teal); color: var(--user-fg); font-size: var(--fs-xs); }
.w1-body { flex: 1; min-width: 0; }
.w1-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
.w1-desc { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; line-height: 1.4; }
.w1-ack-btn { margin-top: 8px; font-size: var(--fs-sm); padding: 5px 10px; border-radius: 6px; border: 1px solid var(--accent); color: var(--accent); background: var(--accent-lt); cursor: pointer; }
.w1-ack-btn:hover { background: var(--btn-accent); color: var(--user-fg); }
.w1-acked { font-size: var(--fs-sm); color: var(--teal); margin-top: 6px; font-weight: 600; }
.w1-progress { padding: 12px 16px; font-size: var(--fs-base); color: var(--muted); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.w1-progress-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.w1-progress-fill { height: 100%; background: var(--teal); border-radius: 3px; transition: width 0.3s; }
/* Staff panel */
.staff-member { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.staff-member:last-child { border-bottom: none; }
.staff-name { font-size: var(--fs-md); font-weight: 600; }
.staff-role { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.staff-stats { font-size: var(--fs-xs); color: var(--teal); margin-top: 4px; }
.staff-role-select { font-size: var(--fs-sm); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; background: var(--bg); color: var(--text); cursor: pointer; }
.staff-section-label { padding: 10px 16px 4px; font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--border); }
.onb-item-row { padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); }
.onb-item-row:last-child { border-bottom: none; }
.onb-item-title { flex: 1; }
.onb-delete-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: var(--fs-lg); padding: 2px 4px; line-height: 1; }
.onb-delete-btn:hover { color: var(--accent); }
.onb-add-form { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.onb-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-base); font-family: var(--font); background: var(--bg); }
.onb-input:focus { outline: none; border-color: var(--accent); }
.onb-add-row { display: flex; gap: 8px; }
.onb-add-row .header-btn { background: var(--btn-accent); color: var(--user-fg); border-color: var(--btn-accent); }
.onb-add-row .header-btn:hover { background: var(--btn-accent-hover); border-color: var(--accent-dk); color: var(--user-fg); }
.onb-role-tabs { display: flex; gap: 4px; padding: 10px 16px 0; flex-wrap: wrap; }
.onb-role-tab { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); font-size: var(--fs-sm); cursor: pointer; background: var(--bg); color: var(--text); }
.onb-role-tab.active { background: var(--btn-accent); color: var(--user-fg); border-color: var(--btn-accent); }
/* Profile setup modal */
#profile-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; align-items: center; justify-content: center; padding: 20px; }
#profile-modal.open { display: flex; }
.profile-modal-box { background: var(--surface); border-radius: 16px; padding: 28px 24px; width: 100%; max-width: 340px; box-shadow: 0 8px 40px rgba(0,0,0,0.18); }
.profile-modal-box h2 { font-size: var(--fs-xl); font-weight: 600; margin-bottom: 6px; }
.profile-modal-box p { font-size: var(--fs-base); color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.profile-field { margin-bottom: 14px; }
.profile-field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-bottom: 5px; letter-spacing: 0.04em; text-transform: uppercase; }
.profile-field input, .profile-field select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-md); font-family: var(--font); background: var(--bg); color: var(--text); }
.profile-field input:focus, .profile-field select:focus { outline: none; border-color: var(--accent); }
.profile-save-btn { width: 100%; padding: 11px; background: var(--btn-accent); color: var(--user-fg); border: none; border-radius: 10px; font-size: var(--fs-md); font-weight: 600; cursor: pointer; margin-top: 4px; }
.profile-save-btn:hover { background: var(--btn-accent-hover); }
.profile-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Acknowledgment modal */
#ack-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: flex-end; justify-content: center; }
#ack-modal.open { display: flex; }
.ack-modal-box { background: var(--surface); border-radius: 16px 16px 0 0; padding: 0; width: 100%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; }
.ack-modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.ack-modal-title { font-size: var(--fs-15); font-weight: 600; }
.ack-modal-close { background: none; border: none; cursor: pointer; font-size: var(--fs-2xl); color: var(--muted); line-height: 1; }
.ack-modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.ack-modal-content { font-size: var(--fs-base); line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; background: var(--bg); border-radius: 8px; padding: 14px; margin-bottom: 16px; max-height: 40vh; overflow-y: auto; }
.ack-modal-footer { padding: 12px 20px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.ack-modal-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-base); cursor: pointer; }
.ack-modal-checkbox input { margin-top: 2px; flex-shrink: 0; }
.ack-modal-sign-btn { padding: 11px; background: var(--btn-accent); color: var(--user-fg); border: none; border-radius: 10px; font-size: var(--fs-md); font-weight: 600; cursor: not-allowed; opacity: 0.4; }
.ack-modal-sign-btn.ready { cursor: pointer; opacity: 1; }
.ack-modal-sign-btn.ready:hover { background: var(--btn-accent-hover); }
#panel-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.28); z-index: 99;
}
#panel-overlay.open { display: block; }
/* Sits just below .mb-sidebar's z-index:50 so it dims the page behind the
drawer without covering the drawer itself (audit 2026-07-15 P2 #38). */
#sidebar-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.28); z-index: 45;
}
#sidebar-overlay.open { display: block; }
.panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px 12px; border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.panel-close-btn {
background: none; border: none; cursor: pointer;
font-size: var(--fs-xl); color: var(--muted); line-height: 1;
padding: 4px; flex-shrink: 0;
}
.panel-close-btn:hover { color: var(--text); }
.facts-search {
display: block; width: calc(100% - 32px);
margin: 12px 16px 8px;
padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
font-family: var(--font); font-size: var(--fs-md); background: var(--bg); color: var(--text);
outline: none; flex-shrink: 0;
}
.facts-search:focus { border-color: var(--accent); }
/* Library search — same shape as .facts-search, but sits in the Library
view's own padding rhythm (22px gutter, matching .card-grid). */
.lib-search {
display: block; width: calc(100% - 44px);
margin: 14px 22px 2px;
padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
font-family: var(--font); font-size: var(--fs-md); background: var(--bg); color: var(--text);
outline: none; flex-shrink: 0;
}
.lib-search:focus { border-color: var(--accent); }
.lib-count { padding: 6px 22px 0; font-size: var(--fs-xs); color: var(--muted); }
.lib-snippet { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.lib-snippet mark { background: var(--accent-lt); color: var(--text); padding: 0 2px; border-radius: 3px; }
@media (max-width: 560px) { .lib-search { width: calc(100% - 28px); margin: 12px 14px 2px; } .lib-count { padding: 6px 14px 0; } }
.panel-list {
flex: 1; overflow-y: auto; padding: 4px 16px 16px;
display: flex; flex-direction: column; gap: 8px;
-webkit-overflow-scrolling: touch;
}
.fact-card, .task-card, .meeting-date-row, .contact-card {
padding: 10px 13px; background: var(--surface);
border: 1px solid var(--border); border-radius: 10px;
box-shadow: var(--shadow-sm);
}
.fact-entity { font-weight: 600; color: var(--accent-dk); font-size: var(--fs-base); margin-bottom: 3px; }
.fact-value { font-size: var(--fs-md); line-height: 1.45; color: var(--text); word-break: break-word; }
.fact-meta { margin-top: 5px; font-size: var(--fs-xs); color: var(--muted); }
.meeting-date-row {
font-size: var(--fs-md); font-weight: 500; cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
transition: background 0.15s, border-color 0.15s;
}
.meeting-date-row:hover { background: var(--accent-lt); border-color: var(--accent); color: var(--accent); }
.meeting-arrow { color: var(--muted); font-size: var(--fs-sm); }
.contact-name { font-weight: 600; font-size: var(--fs-md); margin-bottom: 5px; }
.contact-detail { font-size: var(--fs-base); color: var(--muted); line-height: 1.6; }
.task-text { font-size: var(--fs-md); line-height: 1.45; color: var(--text); word-break: break-word; margin-bottom: 5px; }
.task-meta { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 8px; }
.task-done-btn, .task-dismiss-btn {
padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
background: var(--surface); font-size: var(--fs-sm); cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.task-done-btn { color: var(--success); border-color: var(--border); margin-right: 6px; }
.task-done-btn:hover { background: var(--success-lt); border-color: var(--success); }
.task-dismiss-btn { color: var(--muted); }
.task-dismiss-btn:hover { background: var(--accent-lt); color: var(--accent); border-color: var(--accent); }
/* ── Quiz cards ─────────────────────────────────────────── */
.quiz-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.quiz-question { font-weight: 600; font-size: var(--fs-15); line-height: 1.4; }
.quiz-hint { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); }
.quiz-reveal-btn { width: 100%; margin-top: 12px; padding: 10px; border-radius: 8px; border: 1px solid var(--accent); background: none; color: var(--accent); font-size: var(--fs-md); cursor: pointer; transition: background 0.15s; }
.quiz-reveal-btn:hover { background: var(--accent-lt); }
.quiz-answer { display: none; margin-top: 10px; padding: 10px 12px; background: var(--success-lt); border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-md); line-height: 1.5; }
.quiz-answer.visible { display: block; }
/* ── Debrief card (post-meeting extraction review) ── */
.debrief-sep { margin: 12px 0; border: none; border-top: 1px solid var(--border); }
.debrief-group-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 10px 0 6px; }
.debrief-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.debrief-item:last-of-type { border-bottom: none; }
.debrief-item-text { flex: 1; font-size: var(--fs-base); line-height: 1.45; color: var(--text); }
.debrief-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.debrief-save-btn { padding: 3px 10px; border-radius: 6px; border: 1px solid var(--accent); background: none; color: var(--accent); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.debrief-save-btn:hover { background: var(--accent-lt); }
.debrief-save-btn:disabled { opacity: 0.5; cursor: default; }
.debrief-dismiss-btn { padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border); background: none; color: var(--muted); font-size: var(--fs-sm); cursor: pointer; transition: background 0.15s; }
.debrief-dismiss-btn:hover { background: var(--bg); }
@keyframes spin { to { transform: rotate(360deg); } }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Input focus ring (audit 2026-07-16 UI P2): text inputs/textareas/selects set
outline:none, which beats the global *:focus-visible ring above — leaving only
a 1px border-color tint as the keyboard-focus cue, easy to miss on bordered
cards. Add a soft accent ring (the existing --accent-lt pattern, cf. .mb-field)
so focus is clearly visible. Added after the outline:none rules so no need to
touch each one; box-shadow doesn't conflict with their border-color change. */
.onb-input:focus, .den-input:focus, .sc-input:focus, .dti-input:focus,
.facts-search:focus, .lib-editor:focus, .pf-field input:focus,
.vto-ed-input:focus, .cap-spk-input:focus,
.profile-field input:focus, .profile-field select:focus {
box-shadow: 0 0 0 3px var(--accent-lt);
}
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.task-err { color: var(--danger); font-size: var(--fs-sm); margin-top: 4px; }
.inbox-item-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.inbox-item-row--accent { background: var(--accent-lt); }
/* Wide screens: flow the inbox queue into two columns so the rows fill the
frame and the queue is shorter (controls stay next to their item). */
@media (min-width: 1200px) {
#inbox-list > div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
.msg-42-badge { font-size: var(--fs-xs); color: var(--muted); text-align: right; margin-top: 6px; font-style: italic; opacity: 0.7; }
.meeting-confirm-detail { margin-top: 6px; font-size: var(--fs-base); color: var(--muted); }
.whats-new-list { margin-top: 10px; padding-left: 16px; font-size: var(--fs-base); list-style: disc; }
.whats-new-overflow { color: var(--muted); margin-top: 4px; }
.apply-changes-err { font-size: var(--fs-sm); color: var(--danger); margin-top: 6px; }
.sign-in-retry-btn { margin-top: 12px; padding: 8px 18px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; font-size: var(--fs-md); }
.cert-person-card { background: var(--surface-raised); border: 0.5px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.cert-person-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 0.5px solid var(--border); }
.cert-person-row { padding: 10px 14px; }
.cert-person-row--divided { border-bottom: 0.5px solid var(--border); }
.upload-file-row { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.upload-file-row--over { border-color: var(--warn); }
.speaker-name-row { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
#backup-warning { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: var(--warn-lt); color: var(--text); border: 1px solid var(--warn); font-size: var(--fs-base); line-height: 1.5; }
.fin-year-prompt-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 9999; }
/* ── DON'T PANIC toast (HHGTTG easter egg) ── */
#dont-panic-toast {
position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(80px);
z-index: 9999; pointer-events: none;
background: var(--amber); color: var(--amber-ink);
border: 1px solid var(--border);
padding: 14px 28px; border-radius: 12px;
font-size: var(--fs-3xl); font-weight: 600; letter-spacing: 0.1em;
box-shadow: var(--shadow);
opacity: 0; transition: opacity 0.35s, transform 0.35s;
white-space: nowrap;
}
#dont-panic-toast.visible {
opacity: 1; transform: translateX(-50%) translateY(0);
}
.think-aside {
font-size: var(--fs-xs); color: var(--muted); font-style: italic;
margin-top: 4px; text-align: center;
}
/* (Digest-banner + F-03 daily-digest panel CSS removed 2026-07-15 — their
markup/JS left with the homepage redesign; see 01-home.js note.) */
/* F-04 weekly interview */
#dt-interview:empty, #dt-interview-review:empty { display: none; }
.dti-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.dti-head { margin-bottom: 4px; }
.dti-head-title { font-size: var(--fs-md); font-weight: 600; color: var(--accent); }
.dti-sub { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 12px; }
.dti-q { margin-bottom: 12px; }
.dti-q-text { font-size: var(--fs-base-half); font-weight: 600; color: var(--text); margin: 0 0 6px; line-height: 1.45; }
.dti-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-family: var(--font); font-size: var(--fs-base); line-height: 1.5; background: var(--bg); color: var(--text); outline: none; resize: vertical; }
.dti-input:focus { border-color: var(--accent); }
.dti-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.dti-btn { font-family: var(--font); font-size: var(--fs-base); font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text); transition: background 0.15s, color 0.15s; }
.dti-btn.small { padding: 5px 11px; font-size: var(--fs-sm); }
.dti-btn.primary { background: var(--teal); color: var(--user-fg); border-color: var(--teal); }
.dti-btn.primary:hover { opacity: 0.9; }
.dti-btn.ghost { background: none; border-color: var(--border); color: var(--muted); font-weight: 400; }
.dti-btn.ghost:hover { color: var(--text); }
.dti-note { font-size: var(--fs-sm-half); color: var(--teal); font-weight: 600; }
.dti-draft-title { font-size: var(--fs-base-half); font-weight: 600; color: var(--text); margin: 6px 0 6px; }
.dti-draft-body { background: var(--bg); border-radius: 8px; padding: 10px 12px; font-size: var(--fs-sm-half); line-height: 1.6; color: var(--muted); white-space: pre-wrap; margin-bottom: 12px; max-height: 220px; overflow-y: auto; }
/* Interview routing — where a captured answer is about to be merged. */
.dti-target { display: flex; align-items: flex-start; gap: 10px; background: var(--accent-lt); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; }
.dti-target .ti { font-size: 18px; color: var(--accent-dk); flex-shrink: 0; }
.dti-target-body { min-width: 0; }
/* Text on --accent-lt uses --text/--muted, NOT --accent-dk: the accent pair
measures 3.66:1 in dark mode (fails AA). The icon carries the accent instead. */
.dti-target-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
/* --muted on --accent-lt measures 4.29:1 (under AA) — hierarchy comes from
size and weight here, not from a lighter colour. */
.dti-target-sub { font-size: var(--fs-xs); color: var(--text); margin-top: 2px; }
.dti-alts { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 12px; }
.dti-diff-label { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 5px; }
.dti-diff { border: 1px solid var(--border); border-radius: 8px; overflow: hidden auto; max-height: 240px; margin-bottom: 12px; }
.dti-diff-line { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); line-height: 1.6; padding: 2px 10px; white-space: pre-wrap; word-break: break-word; color: var(--muted); }
.dti-diff-add { background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--text); }
/* Strikethrough carries "removed"; --muted over the red tint is 4.47:1 (under AA). */
.dti-diff-del { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--text); text-decoration: line-through; }
.dti-heldback { background: var(--bg); border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; padding: 9px 12px; font-size: var(--fs-sm-half); color: var(--text); margin-bottom: 12px; }
.dti-heldback-why { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.dti-review-item { border-top: 1px solid var(--border); padding: 9px 0; }
.dti-review-item:first-of-type { border-top: none; }
.dti-review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dti-review-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.dti-review-by { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.dti-review-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dti-btn.outline { background: transparent; color: var(--accent-dk); border-color: var(--accent-dk); }
.dti-btn.outline:hover { background: var(--accent-lt); }
.dti-review-preview { margin-top: 8px; background: var(--surface, var(--bg)); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: var(--fs-sm); color: var(--text-muted, var(--muted)); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
/* F-05 weekly satisfaction pulse */
#dt-satisfaction:empty, #dt-satisfaction-trend:empty { display: none; }
.dts-anon { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dts-due { font-size: var(--fs-sm); font-weight: 600; color: var(--teal); background: var(--teal-lt); padding: 3px 10px; border-radius: 8px; }
.dts-scale { display: flex; gap: 8px; margin-bottom: 14px; }
.dts-score { flex: 1; padding: 11px 0; font-family: var(--font); font-size: var(--fs-xl); font-weight: 600; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; }
.dts-score:hover { border-color: var(--accent); }
.dts-score.sel { background: var(--teal); border-color: var(--teal); color: var(--user-fg); }
.dts-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.dts-stat { background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.dts-stat-label { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 4px; }
.dts-stat-val { font-size: var(--fs-3xl); font-weight: 600; color: var(--text); }
.dts-stat-val .unit { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
.dts-spark, .sat-line-chart { width: 100%; height: auto; display: block; }
.sat-line-chart [role="button"]:focus-visible { outline: 2px solid var(--accent-dk); outline-offset: 2px; }
.dts-empty { font-size: var(--fs-sm-half); color: var(--muted); font-style: italic; }
/* ── Stale fact badge + verify buttons ── */
.fact-stale-badge {
display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em;
color: var(--amber-ink); background: var(--amber); border: 1px solid var(--border);
border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
text-transform: uppercase;
}
.fact-actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.fact-verify-btn, .fact-update-btn {
padding: 3px 9px; background: none; border: 1px solid var(--border);
border-radius: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); cursor: pointer;
transition: border-color 0.12s, color 0.12s;
}
.fact-verify-btn:hover { border-color: var(--success); color: var(--success); }
.fact-update-btn:hover { border-color: var(--accent); color: var(--accent); }
/* ── Voice confirmation ── */
.msg.voice-confirm .bubble { background: var(--accent-lt); border: 1px solid var(--accent-muted); }
.voice-transcript-edit {
width: 100%; min-height: 60px; max-height: 160px; padding: 8px 10px;
border: 1px solid var(--border); border-radius: 8px; font-family: var(--font);
font-size: var(--fs-md); color: var(--text); background: var(--bg);
resize: vertical; margin: 8px 0; box-sizing: border-box;
}
.voice-confirm-actions { display: flex; gap: 8px; margin-top: 2px; }
.voice-confirm-btn {
padding: 6px 14px; background: var(--btn-accent); color: var(--user-fg);
border: none; border-radius: 8px; font-size: var(--fs-base); font-weight: 600; cursor: pointer;
}
.voice-confirm-btn:hover { opacity: 0.88; }
.voice-discard-btn {
padding: 6px 12px; background: none; border: 1px solid var(--border);
border-radius: 8px; font-size: var(--fs-base); color: var(--muted); cursor: pointer;
}
.voice-discard-btn:hover { background: var(--bg); color: var(--text); }
/* ── Keyword search ── */
.search-section { padding: 0 16px 20px; }
.keyword-search-box {
display: flex; align-items: center; gap: 8px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 8px 12px; transition: border-color 0.15s;
}
.keyword-search-box:focus-within { border-color: var(--accent); }
.keyword-search-box input {
flex: 1; border: none; outline: none; font-family: var(--font);
font-size: var(--fs-md); background: transparent; color: var(--text);
}
.keyword-search-box input::placeholder { color: var(--muted); }
.search-clear-btn {
background: none; border: none; cursor: pointer; padding: 0 2px;
color: var(--muted); font-size: var(--fs-xl); line-height: 1; display: none;
}
#search-results { display: none; margin-top: 8px; }
#search-results.visible { display: block; }
.search-group-label {
font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.06em; margin: 10px 0 5px;
}
.search-result-fact, .search-result-doc {
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
padding: 9px 12px; margin-bottom: 5px; cursor: pointer; transition: border-color 0.12s;
}
.search-result-fact:hover, .search-result-doc:hover { border-color: var(--accent); }
.search-result-fact strong, .search-result-doc strong { font-size: var(--fs-base); color: var(--text); }
.search-result-fact span { font-size: var(--fs-sm); color: var(--muted); display: block; margin-top: 2px; }
.search-result-doc .doc-snippet { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; line-height: 1.5; }
.search-empty { font-size: var(--fs-base); color: var(--muted); padding: 8px 0; }
/* ── General utility toast ── */
#util-toast {
position: fixed; top: 72px; right: 20px; z-index: 9999; pointer-events: none;
background: var(--surface-raised); color: var(--text);
border: 1px solid var(--border);
padding: 10px 16px; border-radius: 10px;
font-size: var(--fs-base); font-weight: 500;
box-shadow: var(--shadow-md);
opacity: 0; transform: translateY(-8px);
transition: opacity 0.2s, transform 0.2s;
max-width: 320px; white-space: pre-wrap;
}
#util-toast.error { background: var(--danger-lt); color: var(--danger-dk); border-color: var(--danger-border); pointer-events: auto; cursor: pointer; }
#util-toast.visible { opacity: 1; transform: translateY(0); }
/* ── Panel state helpers (loading / empty / error) ──────────── */
@keyframes skel-shimmer { 0%,100%{opacity:.55} 50%{opacity:.22} }
.skel { background: var(--border); border-radius: 5px; animation: skel-shimmer 1.4s ease-in-out infinite; }
.skel-row { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; }
.skel-row:last-child { border-bottom: none; }
.panel-state { padding: 32px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.panel-state-icon { font-size: var(--fs-4xl); opacity: .5; }
.panel-state-msg { font-size: var(--fs-md); font-weight: 600; color: var(--text); line-height: 1.4; }
.panel-state-hint { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; max-width: 280px; }
.panel-state-action { margin-top: 6px; padding: 7px 18px; border-radius: 8px; border: 1.5px solid var(--accent); background: none; color: var(--accent); font-size: var(--fs-base); font-family: var(--font); cursor: pointer; transition: background .15s, color .15s; }
.panel-state-action:hover { background: var(--btn-accent); color: var(--user-fg); }
.panel-state-error { background: var(--danger-lt); border-radius: 10px; }
.panel-state-error .panel-state-msg { color: var(--danger-dk); }
.panel-state-error .panel-state-action { border-color: var(--danger-dk); color: var(--danger-dk); }
.panel-state-error .panel-state-action:hover { background: var(--danger-dk); color: var(--user-fg); }
/* Minimum touch targets in panels */
.fact-card, .task-card, .meeting-date-row, .contact-card { min-height: 44px; }
/* Markdown: pre/code, tighter heading rhythm */
.bubble-md pre { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; margin: 8px 0; overflow-x: auto; }
.bubble-md pre code { background: none; border: none; padding: 0; font-size: var(--fs-sm-half); line-height: 1.65; }
.bubble-md h2 { margin-top: 14px; }
.bubble-md h2:first-child, .bubble-md h3:first-child { margin-top: 0; }
.bubble-md ul, .bubble-md ol { margin-bottom: 10px; }
.bubble-md li { margin-bottom: 5px; }
.bubble-md blockquote { border-left: 3px solid var(--accent); padding-left: 12px; margin: 8px 0; color: var(--muted); font-style: italic; }
.bubble-md-fallback-warning { display: flex; align-items: center; gap: 8px; background: var(--amber-lt); border: 1px solid var(--amber); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: var(--fs-sm); color: var(--amber-dk); line-height: 1.4; }
.bubble-md-fallback-warning a { color: var(--amber-dk); text-decoration: underline; }
/* ── Cert cards ─────────────────────────────────────────────── */
.cert-card { padding: 11px 16px; border-bottom: 1px solid var(--border); min-height: 44px; }
.cert-card:last-child { border-bottom: none; }
.cert-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.cert-type { font-size: var(--fs-sm); color: var(--muted); margin-top: 1px; }
.cert-dates { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
.cert-expiry-ok { color: var(--teal); font-weight: 600; }
.cert-expiry-warn { color: var(--warn); font-weight: 600; }
.cert-expiry-overdue { color: var(--accent); font-weight: 600; }
.cert-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
/* ── Query history (inline in staff panel) ──────────────────── */
.qhist-row { padding: 8px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: flex-start; }
.qhist-row:last-child { border-bottom: none; }
.qhist-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.qhist-dot.answered { background: var(--teal); }
.qhist-dot.unanswered { background: var(--accent); }
.qhist-text { font-size: var(--fs-sm); color: var(--text); line-height: 1.45; }
.qhist-date { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.staff-history-btn { font-size: var(--fs-xs); padding: 2px 9px; border-radius: 6px; border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; }
.staff-history-btn:hover, .staff-history-btn.active { border-color: var(--accent); color: var(--accent); }
.perm-pill { font-size: var(--fs-xs); padding: 3px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.perm-pill.active { background: var(--btn-accent); color: var(--user-fg); border-color: var(--btn-accent); }
.perm-pill.locked { opacity: 0.5; cursor: default; pointer-events: none; }
.admin-role-row.dragging { opacity: 0.45; }
.admin-drag-handle:active { cursor: grabbing; }
.staff-perms-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 6px; border-top: 1px solid var(--border); background: var(--surface); }
.staff-history-wrap { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Mobile: panels become bottom-sheets */
@media (max-width: 480px) {
#upload-panel {
width: 100%; top: auto; bottom: 0; height: 88dvh; max-width: 100%;
border-left: none; border-top: 1px solid var(--border);
border-radius: 14px 14px 0 0;
transform: translateY(100%);
}
#upload-panel.open { transform: translateY(0); }
#admin-sidebar { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); }
#admin-content { padding: 20px 16px; }
#admin-panel { flex-direction: column; }
#upload-panel::before {
content: ''; display: block; width: 36px; height: 4px; border-radius: 2px;
background: var(--border); margin: 10px auto 2px;
}
.messages { padding: 14px 14px; }
.header-btn { padding: 5px 8px; font-size: var(--fs-xs); }
}
/* ── Refined Megadodo component library (mb-*) ─────────────────
Token-based, collision-free, auto dark-mode. Adopted by new
surfaces (financials) + Phase 2 re-skins. Compact density. */
.mb-btn {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font); font-size: var(--fs-base); font-weight: 500;
padding: 8px 14px; border-radius: var(--radius-sm);
border: var(--border-w) solid var(--border); background: var(--surface);
color: var(--text); cursor: pointer; transition: background .15s, border-color .15s;
}
.mb-btn:hover { background: var(--accent-lt); border-color: var(--accent-muted); }
.mb-btn--primary { background: var(--btn-accent); border-color: var(--btn-accent); color: var(--user-fg); }
.mb-btn--primary:hover { background: var(--btn-accent-hover); border-color: var(--accent-dk); }
.mb-btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.mb-btn--ghost:hover { background: var(--accent-lt); color: var(--accent); }
.mb-btn--danger { background: var(--danger); border-color: var(--danger); color: var(--user-fg); }
.mb-btn--sm { padding: 5px 10px; font-size: var(--fs-sm); }
.mb-btn:disabled { opacity: .5; cursor: default; }
/* Styled confirm()/alert() replacement — see appConfirm()/appAlert() in 00-core.js */
.dt-modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.4);
display: flex; align-items: center; justify-content: center;
z-index: 9999; padding: 20px; box-sizing: border-box;
}
.dt-modal {
background: var(--surface); border: var(--border-w) solid var(--border);
border-radius: 14px; padding: 20px; min-width: 280px; max-width: 420px;
box-shadow: 0 10px 34px rgba(0,0,0,.20);
}
.dt-modal-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin-bottom: 6px; }
.dt-modal-body { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 16px; white-space: pre-wrap; }
.dt-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.mb-card {
background: var(--surface); border: var(--border-w) solid var(--border);
border-radius: 12px; padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.mb-pill, .mb-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-sm); font-weight: 500; line-height: 1;
border: var(--border-w) solid var(--border); background: var(--surface); color: var(--text);
}
.mb-pill { padding: 5px 12px; border-radius: 20px; }
.mb-badge { padding: 3px 8px; border-radius: var(--radius-sm); }
.mb-pill--accent, .mb-badge--accent { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent-muted); }
.mb-pill--success, .mb-badge--success { background: var(--teal-lt); color: var(--teal); border-color: var(--teal); }
.mb-pill--danger, .mb-badge--danger { background: var(--danger-lt); color: var(--danger-dk); border-color: var(--danger-border); }
.mb-pill--warn, .mb-badge--warn { background: var(--warn-lt); color: var(--warn); border-color: var(--warn); }
.mb-field {
width: 100%; font-family: var(--font); font-size: var(--fs-base);
padding: 8px 10px; border-radius: var(--radius-sm);
border: var(--border-w) solid var(--border); background: var(--bg); color: var(--text);
outline: none; transition: border-color .15s, box-shadow .15s;
}
.mb-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); }
/* KPI metric card — used by scorecard, denials, financials */
.mb-kpi { background: var(--surface-raised); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.mb-kpi__label { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 2px; }
.mb-kpi__value { font-size: var(--fs-3xl); font-weight: 600; color: var(--text); line-height: 1.1; }
.mb-kpi__delta { font-size: var(--fs-sm); font-weight: 500; }
.mb-kpi__delta--pos { color: var(--teal); }
.mb-kpi__delta--neg { color: var(--danger); }
/* Data table — money/number primitives for financials + dense surfaces */
.mb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base);
background: var(--surface); border: var(--border-w) solid var(--border); border-radius: 12px; overflow: hidden; }
.mb-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--fs-xs);
text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; border-bottom: var(--border-w) solid var(--border); }
.mb-table td { padding: 8px 12px; border-bottom: var(--border-w) solid var(--border); color: var(--text); }
.mb-table tr:last-child td { border-bottom: none; }
.mb-num, .mb-money { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mb-pos { color: var(--teal); }
.mb-neg { color: var(--danger); }
/* Chart frame — neutral container for inline SVG/canvas charts */
.mb-chart { background: var(--surface); border: var(--border-w) solid var(--border);
border-radius: 12px; padding: var(--sp-4); }
/* ── Finances views ──────────────────────────────────────── */
.fin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 720px) { .fin-kpis { grid-template-columns: repeat(2, 1fr); } }
.fin-priv { font-size: var(--fs-xs); font-weight: 500; color: var(--teal); background: var(--teal-lt);
border: var(--border-w) solid var(--teal); border-radius: 20px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 4px; }
.fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .fin-grid { grid-template-columns: 1fr; } }
.fin-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.fin-tab { font-size: var(--fs-sm); border: var(--border-w) solid var(--border); background: var(--bg);
border-radius: 7px; padding: 4px 10px; color: var(--text); cursor: pointer; font-family: var(--font); }
.fin-tab:hover { background: var(--accent-lt); }
.fin-tab.active { background: var(--accent-lt); border-color: var(--accent-muted); color: var(--accent-dk); font-weight: 500; }
.fin-tab.former { color: var(--muted); }
.fin-scroll { overflow-x: auto; }
.fin-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; margin-top: 8px; }
.fin-bars > div { flex: 1; background: var(--accent-muted); border-radius: 3px 3px 0 0; min-height: 2px; }
.fin-bars > div.hi { background: var(--accent); }
.fin-mlabels { display: flex; gap: 4px; margin-top: 5px; }
.fin-mlabels > span { flex: 1; text-align: center; font-size: var(--fs-xs); color: var(--muted); }
.fin-sech { font-size: var(--fs-sm); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 9px; }
/* Snapshot view (analytical layer above the tab mirror) */
.fin-hubhead { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.fin-seg { display: inline-flex; border: var(--border-w) solid var(--border); border-radius: 999px; overflow: hidden; }
.fin-seg button { font-size: var(--fs-base); padding: 6px 16px; border: 0; cursor: pointer; background: transparent; color: var(--text-muted); font-weight: 400; font-family: var(--font); }
.fin-seg button:hover { color: var(--text); }
.fin-seg button.active { background: var(--accent-lt); color: var(--accent-dk); font-weight: 500; }
.fin-kpis-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 16px; }
.mb-kpi__delta--warn { color: var(--warn); }
.fin-ybars { display: flex; align-items: flex-end; gap: 10px; height: 172px; margin-top: 8px; }
.fin-ybar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.fin-ybar-val { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 4px; white-space: nowrap; }
.fin-ybar-track { flex: 1; width: 100%; max-width: 64px; display: flex; align-items: flex-end; }
.fin-ybar-fill { width: 100%; background: var(--accent); border-radius: 5px 5px 0 0; min-height: 2px; }
.fin-ybar-fill.partial { background: var(--accent-muted); }
.fin-ybar-x { font-size: var(--fs-sm); color: var(--muted); margin-top: 7px; white-space: nowrap; }
.fin-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .fin-split-grid { grid-template-columns: 1fr; } }
.fin-split { background: var(--surface-raised); border-radius: 10px; padding: 13px; }
.fin-split-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.fin-split-h .lbl { font-size: var(--fs-base); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.fin-badge { font-size: var(--fs-xs); font-weight: 500; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.fin-badge.ok { color: var(--teal); background: var(--teal-lt); }
/* text was var(--warn) on var(--warn-lt) — AA fail, audit 2026-07-15 P2 #33 */
.fin-badge.warn { color: var(--amber-dk); background: var(--warn-lt); border: var(--border-w) solid var(--warn); }
.fin-split-v { font-size: var(--fs-2xl); font-weight: 600; color: var(--text); }
.fin-split-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
.fin-insight { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-base); color: var(--text); margin: 8px 0; line-height: 1.45; }
.fin-insight i { color: var(--accent); font-size: var(--fs-lg); flex-shrink: 0; margin-top: 1px; }
.fin-sech-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 9px; }
#fin-ai-btn i { color: var(--accent); }
@keyframes fin-spin { to { transform: rotate(360deg); } }
.fin-spin { display: inline-block; animation: fin-spin .8s linear infinite; }
.fin-ai-card { margin-top: 14px; border: var(--border-w) solid var(--accent-muted, var(--border)); border-radius: 12px; padding: 14px 16px; background: var(--accent-lt); }
.fin-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fin-ai-head > i { color: var(--accent); font-size: var(--fs-17); }
.fin-ai-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.fin-ai-meta { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); }
.fin-ai-narr { font-size: var(--fs-base); line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.fin-ai-recs-h { font-size: var(--fs-sm); font-weight: 500; color: var(--text); margin: 0 0 6px; }
.fin-ai-rec { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-base); color: var(--text); margin: 6px 0; line-height: 1.5; }
.fin-ai-rn { color: var(--accent); font-weight: 500; flex-shrink: 0; }
.fin-ai-err { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--danger); }
.fin-lead-name .tag { font-size: var(--fs-2xs); color: var(--muted); border: var(--border-w) solid var(--border); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
/* ── Home redesign (Today-led) ─────────────────────────────────── */
/* Full-bleed: fill the window; #dashboard supplies the 24px gutter. */
.dt-home-head, .dt-omni, .dt-body, .dt-foot { max-width: none; margin-left: 0; margin-right: 0; }
.dt-home-head { margin-top: 4px; margin-bottom: 18px; }
.dt-body { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 4px; }
.dt-body > .dt-left-col { flex: 1; min-width: 0; }
.dt-body > .dt-tiles { flex: 0 0 240px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
@media (max-width: 700px) { .dt-body { flex-direction: column; } }
/* Wide screens: use the horizontal space + cut vertical scroll.
Today's sections flow into 2 columns; the tile rail widens to 2-up. */
@media (min-width: 1200px) {
.dt-body > .dt-tiles { flex-basis: 336px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; gap: 12px; }
#dt-today-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
#dt-today-body > .dt-tsec { break-inside: avoid; }
#dt-today-body > .dt-tsec:nth-child(2) { border-top: none; padding-top: 2px; }
}
.dt-greet { font-size: var(--fs-3xl); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.dt-greet-sub { font-size: var(--fs-md); color: var(--muted); margin: 4px 0 0; }
/* Unified search */
.dt-omni { margin-bottom: 18px; position: relative; }
.dt-omni-bar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow-sm); }
.dt-omni-bar:focus-within { border-color: var(--accent-muted); }
.dt-omni-ico { font-size: var(--fs-xl); color: var(--accent); flex-shrink: 0; }
.dt-omni-input { flex: 1; border: none; background: transparent; font-size: var(--fs-lg); color: var(--ink); outline: none; min-width: 0; font-family: inherit; }
.dt-omni-input::placeholder { color: var(--muted); } /* --muted ~4.7:1 AA (was --text-muted ~3.4:1); audit 2026-07-16 UI P2 */
.dt-omni-hint { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; border-left: var(--border-w) solid var(--border); padding-left: 10px; } /* was --text-muted, AA-fail; audit 2026-07-23 P2 #19 */
/* Never hid on small screens, squeezing the actual search input to ~90px
on a 375px phone (audit 2026-07-15 P2 #37). */
@media (max-width: 700px) { .dt-omni-hint { display: none; } }
.dt-omni-btn { background: var(--btn-accent); color: var(--user-fg); border: none; border-radius: var(--radius-sm); padding: 7px 16px; font-size: var(--fs-base); font-weight: 500; cursor: pointer; flex-shrink: 0; }
.dt-omni-btn:hover { background: var(--btn-accent-hover); }
.dt-omni-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.dt-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.dt-chip i { font-size: var(--fs-base); color: var(--muted); }
.dt-chip:hover { border-color: var(--accent-muted); color: var(--accent); }
.dt-chip:hover i { color: var(--accent); }
/* "Asked this week" strip (audit design-advisor B6) */
.dt-omni-asked-week { margin-top: 14px; padding-top: 12px; border-top: var(--border-w) solid var(--border); }
.dt-omni-asked-week-label {
font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em;
text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
/* Find dropdown */
.dt-omni-find { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; overflow: hidden; }
.dt-find-grp { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 7px 8px 3px; }
.dt-find-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 7px 8px; font-size: var(--fs-base); color: var(--ink); cursor: pointer; }
.dt-find-row i { font-size: var(--fs-15); color: var(--muted); flex-shrink: 0; }
.dt-find-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-find-row:hover { background: var(--accent-lt); }
/* ── Cmd+K global launcher (audit design-advisor A7/UI-B3) ─────────── */
.cmdk-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.32);
z-index: 500; display: flex; align-items: flex-start; justify-content: center;
padding: 12vh 20px 20px; box-sizing: border-box;
}
.cmdk-overlay[hidden] { display: none; }
.cmdk-modal {
background: var(--surface); border: var(--border-w) solid var(--border);
border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.20);
width: 100%; max-width: 480px; overflow: hidden;
}
.cmdk-input-row {
display: flex; align-items: center; gap: 10px; padding: 12px 14px;
border-bottom: var(--border-w) solid var(--border);
}
.cmdk-input-row > i { font-size: var(--fs-xl); color: var(--accent); flex-shrink: 0; }
.cmdk-input { flex: 1; border: none; background: transparent; font-size: var(--fs-md); color: var(--ink); outline: none; font-family: inherit; min-width: 0; }
.cmdk-input::placeholder { color: var(--muted); } /* AA contrast, matches other placeholders; audit 2026-07-16 UI P2 */
.cmdk-esc { font-size: var(--fs-2xs); color: var(--muted); border: var(--border-w) solid var(--border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; } /* was --text-muted, AA-fail; audit 2026-07-23 P2 #19 */
.cmdk-results { max-height: 55vh; overflow-y: auto; padding: 6px; }
.cmdk-empty { padding: 12px 8px; font-size: var(--fs-sm); color: var(--muted); } /* was --text-muted, AA-fail; audit 2026-07-23 P2 #19 */
/* Inline answer */
.dt-omni-answer { margin-top: 10px; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.dt-omni-thinking { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: var(--fs-base); }
.dt-omni-spin { width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: dtspin .7s linear infinite; }
@keyframes dtspin { to { transform: rotate(360deg); } }
.dt-omni-ans-q { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 6px; }
.dt-omni-ans-body { font-size: var(--fs-md); color: var(--ink); line-height: 1.6; }
.dt-omni-ans-body > :first-child { margin-top: 0; } .dt-omni-ans-body > :last-child { margin-bottom: 0; }
.dt-omni-ans-src { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.dt-omni-ans-actions { margin-top: 12px; display: flex; gap: 8px; border-top: var(--border-w) solid var(--border); padding-top: 11px; }
.dt-omni-open { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--teal); font-size: var(--fs-base); font-weight: 500; cursor: pointer; padding: 0; }
.dt-omni-clear { background: none; border: none; color: var(--muted); font-size: var(--fs-base); cursor: pointer; margin-left: auto; }
/* Today panel */
.dt-today { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.dt-today-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.dt-today-head > i { font-size: var(--fs-2xl); color: var(--accent); }
.dt-today-title { font-size: var(--fs-xl); font-weight: 500; color: var(--ink); }
.dt-today-count { margin-left: auto; font-size: var(--fs-xs); color: var(--accent); background: var(--accent-lt); border-radius: 20px; padding: 3px 11px; font-weight: 500; }
.dt-today-head .dt-play-briefing { margin: 0 0 0 10px; }
.dt-today-loading { color: var(--muted); font-size: var(--fs-base); padding: 6px 0; }
.dt-tsec { padding: 13px 0; border-top: var(--border-w) solid var(--border); }
.dt-tsec:first-child { border-top: none; padding-top: 2px; }
.dt-tsec-label { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 9px; }
.dt-tsec-label i { font-size: var(--fs-md); }
.dt-trow { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; background: none; border: none; padding: 6px 0; font-size: var(--fs-md); color: var(--ink); cursor: pointer; line-height: 1.45; }
.dt-trow-ico { width: 22px; height: 22px; border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); margin-top: 1px; background: var(--accent-lt); color: var(--accent); }
.dt-trow-ico.teal { background: var(--teal-lt); color: var(--teal); }
.dt-trow-ico.amber { background: var(--amber-lt); color: var(--amber); }
.dt-trow-ico.red { background: var(--danger-lt); color: var(--danger); }
.dt-trow-main { flex: 1; min-width: 0; }
.dt-trow:hover .dt-trow-main { color: var(--accent); }
.dt-trow-due { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; padding-top: 2px; }
.dt-trow-due.red { color: var(--danger); } .dt-trow-due.amber { color: var(--amber); }
/* F-31 provenance line — every brief row says why you're seeing it */
.dt-trow-why { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; margin-top: 1px; } /* was --text-muted, AA-fail; audit 2026-07-23 P2 #19 */
.dt-trow:hover .dt-trow-why { color: var(--muted); }
/* F-29 recovered-value ledger strip (team aggregates, visible to all staff) */
.dt-ledger { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.dt-ledger-chip { background: var(--bg); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; min-width: 104px; }
.dt-ledger-label { font-size: var(--fs-xs); color: var(--muted); }
.dt-ledger-val { font-size: var(--fs-17); font-weight: 500; color: var(--ink); }
.dt-ledger-val.accent { color: var(--accent); }
.dt-today-allclear { font-size: var(--fs-sm); color: var(--teal); display: flex; align-items: center; gap: 7px; padding: 2px 0 10px; }
/* F-38 ring 1 — spoken briefing */
.dt-play-briefing {
margin: 12px 0 16px;
background: var(--accent-lt);
border-color: var(--accent-muted);
color: var(--accent-dk);
font-weight: 500;
padding: 8px 16px 8px 8px;
gap: 8px;
}
.dt-play-briefing:hover { border-color: var(--accent); color: var(--accent-dk); background: var(--accent-muted); }
.dt-play-briefing .dt-play-briefing-icon {
width: 24px; height: 24px; border-radius: 50%;
background: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.dt-play-briefing .dt-play-briefing-icon i { color: var(--surface); font-size: var(--fs-base); }
.dt-play-briefing i.ti-player-stop { color: var(--accent-dk); font-size: var(--fs-base); }
/* Recent meetings card (dashboard widget + Meetings page share this) */
.dt-meetings-card { margin-bottom: 18px; }
.dt-meetings-viewall { margin-left: auto; font-size: var(--fs-sm); color: var(--accent); }
.dt-meeting-row { border-top: var(--border-w) solid var(--border); padding: 11px 0; display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.dt-meeting-row:first-child { border-top: none; padding-top: 2px; }
.dt-meeting-row-main { flex: 1; min-width: 0; }
.dt-meeting-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.dt-meeting-date { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.dt-meeting-tldr { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); margin: 0; }
.dt-meeting-chevron { font-size: var(--fs-15); color: var(--muted); flex-shrink: 0; margin-top: 3px; transition: transform 0.15s; }
.dt-meeting-chevron.open { transform: rotate(180deg); }
.dt-meeting-detail { padding: 2px 0 10px 0; }
.dt-meeting-points { margin: 2px 0 10px; padding-left: 18px; }
.dt-meeting-points li { font-size: var(--fs-sm); line-height: 1.6; color: var(--text); }
.dt-meeting-transcript-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 9px; border-top: var(--border-w) solid var(--border); flex-wrap: wrap; }
.dt-meeting-transcript-body { margin-top: 8px; padding: 10px 12px; background: var(--bg); border-radius: 8px; font-size: var(--fs-sm-half); line-height: 1.6; color: var(--text); white-space: pre-wrap; max-height: 320px; overflow-y: auto; }
/* Audio playback + re-label speakers */
.dt-meeting-audio-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 9px; border-top: var(--border-w) solid var(--border); }
/* Owner-only delete affordance at the foot of an expanded meeting card */
.dt-meeting-delete-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: var(--border-w) solid var(--border); }
.dt-delete-btn {
font: inherit; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
color: var(--danger); background: var(--surface);
border: 1px solid var(--danger-border); border-radius: 8px; padding: 6px 12px;
}
.dt-delete-btn:hover { background: var(--danger-lt); border-color: var(--danger); }
.dt-meeting-audio-label { display: flex; align-items: center; gap: 6px; color: var(--accent-dk); }
.dt-meeting-audio-player { height: 34px; max-width: 100%; margin-top: 6px; flex-basis: 100%; }
.dt-spk-panel:not(:empty) { margin-top: 10px; border: var(--border-w) solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.dt-spk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dt-spk-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.dt-spk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt-spk-tag { font-size: var(--fs-xs); color: var(--muted); width: 18px; flex-shrink: 0; }
.dt-spk-name-input { flex: 1; min-width: 150px; padding: 6px 8px; font-size: var(--fs-sm); background: var(--bg); color: var(--text); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); }
.dt-spk-name { flex: 1; min-width: 150px; font-size: var(--fs-sm-half); color: var(--text); }
.dt-spk-clip { display: inline-flex; align-items: center; gap: 3px; background: none; border: none; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; padding: 4px 6px; white-space: nowrap; }
.dt-spk-clip:hover { color: var(--accent-dk); }
.dt-spk-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.dt-spk-auto { display: inline-flex; align-items: center; gap: 5px; background: var(--teal-lt); color: var(--teal); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); padding: 5px 9px; font-size: var(--fs-sm-half); font-weight: 500; }
.dt-spk-change { background: none; border: none; color: var(--muted); font-size: var(--fs-xs); cursor: pointer; text-decoration: underline; padding: 4px 6px; }
.dt-spk-change:hover { color: var(--accent-dk); }
/* Voice enrollment (Profile › My voice) */
.voice-enroll { margin-top: 10px; }
.voice-enrolled { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--teal-lt); color: var(--teal); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm-half); margin-bottom: 12px; }
.voice-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.voice-btn-quiet { background: none; border: var(--border-w) solid var(--border); color: var(--muted); border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--fs-sm-half); cursor: pointer; font-family: var(--font); }
.voice-btn-quiet:hover { color: var(--accent-dk); }
.voice-read { background: var(--bg); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: var(--fs-md); line-height: 1.65; color: var(--text); margin-bottom: 14px; }
.voice-lvl-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; }
.voice-lvl { display: flex; gap: 3px; height: 24px; align-items: flex-end; margin-bottom: 14px; }
.voice-lvl-bar { flex: 1; height: 6%; background: var(--teal); border-radius: 2px; transition: height .1s linear; }
.voice-rec-row { display: flex; align-items: center; gap: 12px; }
.voice-rec-stop { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-dk); color: var(--user-fg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--fs-15); }
.voice-rec-stop:disabled { opacity: .45; cursor: default; }
.voice-meter { flex: 1; height: 6px; background: var(--bg); border: var(--border-w) solid var(--border); border-radius: 4px; overflow: hidden; }
.voice-meter-fill { height: 100%; background: var(--teal); transition: width .3s linear; }
/* Quiet state */
.dt-quiet { text-align: center; padding: 18px 10px 8px; }
.dt-quiet-ico { font-size: var(--fs-4xl); color: var(--teal); }
.dt-quiet-h { font-size: var(--fs-lg); font-weight: 500; color: var(--ink); margin: 10px 0 4px; }
.dt-quiet-p { font-size: var(--fs-base); color: var(--muted); margin: 0 0 14px; }
.dt-quiet-btns { display: flex; gap: 8px; justify-content: center; }
/* Live status tiles */
.dt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.dt-tile { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: 12px; padding: 13px 14px; cursor: pointer; box-shadow: var(--shadow-sm); }
.dt-tile:hover { border-color: var(--accent-muted); }
.dt-tile-ico { font-size: var(--fs-17); color: var(--muted); }
.dt-tile:hover .dt-tile-ico { color: var(--accent); }
.dt-tile-n { font-size: var(--fs-xl); font-weight: 500; color: var(--ink); margin-top: 7px; line-height: 1.1; }
.dt-tile-l { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.dt-tile-s { font-size: var(--fs-xs); margin-top: 3px; display: inline-flex; align-items: center; gap: 5px; }
.dt-tile-s .sdot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dt-tile-s.green { color: var(--success); } .dt-tile-s.green .sdot { background: var(--success); }
.dt-tile-s.amber { color: var(--amber); } .dt-tile-s.amber .sdot { background: var(--amber); }
.dt-tile-s.red { color: var(--danger); } .dt-tile-s.red .sdot { background: var(--danger); }
.dt-tile-s.gray { color: var(--muted); } .dt-tile-s.gray .sdot { background: var(--muted); }
.dt-foot { text-align: center; font-size: var(--fs-sm); color: var(--muted); font-style: italic; margin: 8px 0 24px; }
/* ── Sign-in overlay ───────────────────────────────────── */
#sign-in-overlay {
position: fixed; inset: 0; z-index: 1000;
background: var(--bg);
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 24px;
}
#sign-in-overlay .sign-in-brand {
display: flex; align-items: center; gap: 10px;
}
#sign-in-overlay .sign-in-brand .logo {
width: 48px; height: 48px;
border-radius: 12px;
overflow: hidden;
}
#sign-in-overlay .sign-in-brand .logo img { width: 48px; height: 48px; object-fit: cover; }
#sign-in-overlay .sign-in-brand span { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; }
#sign-in-mount { min-width: 320px; }
/* ── User pill (replaces person dropdown) ──────────────── */
.user-pill {
display: flex; align-items: center; gap: 7px;
padding: 4px 10px 4px 6px;
border-radius: 20px;
border: 1px solid var(--border);
background: var(--surface);
font-size: var(--fs-sm); font-weight: 500; color: var(--ink);
cursor: pointer; transition: background 0.15s;
}
.user-pill:hover { background: var(--accent-lt); }
.user-pill-avatar {
width: 22px; height: 22px; border-radius: 50%;
background: var(--accent-lt); color: var(--accent);
font-size: var(--fs-xs); font-weight: 600;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; overflow: hidden;
}
.user-pill-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sign-out-btn {
padding: 4px 10px; border-radius: 20px;
border: 1px solid var(--border); background: var(--surface);
font-size: var(--fs-xs); color: var(--ink); cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sign-out-btn:hover { background: var(--accent-lt); color: var(--accent); }
/* Account menu — admin/account actions consolidated under the avatar */
.account-wrap { position: relative; flex-shrink: 0; }
.account-caret { margin-left: 1px; opacity: 0.85; }
#account-trigger { font-family: var(--font); }
.account-menu {
position: fixed; min-width: 212px;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: 12px;
box-shadow: var(--shadow);
padding: 6px; z-index: 600;
}
.account-menu[hidden] { display: none; }
.account-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 11px; border: none; background: none; border-radius: 8px;
font: inherit; font-size: var(--fs-base); font-weight: 500; color: var(--text);
text-align: left; cursor: pointer; transition: background 0.12s;
}
.account-item:hover, .account-item:focus-visible { background: var(--bg); outline: none; }
.account-item svg { color: var(--muted); flex-shrink: 0; }
.account-item.danger { color: var(--danger-dk); }
.account-item.danger svg { color: var(--danger-dk); }
.account-item.danger:hover, .account-item.danger:focus-visible { background: var(--danger-lt); }
.account-sep { height: 1.5px; background: var(--border); margin: 6px 4px; }
/* ── Skip link (keyboard a11y) ─────────────────────────── */
.skip-link {
position: absolute; left: 8px; top: -48px; z-index: 2000;
background: var(--btn-accent); color: var(--user-fg);
padding: 8px 14px; border-radius: 8px;
font-size: var(--fs-base); font-weight: 600; text-decoration: none;
transition: top 0.15s;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--accent); outline-offset: 2px; }
/* ── Tablet / small-laptop header (481–900px) ──────────────
The header is a non-wrapping row of ~13 buttons; below ~900px
let it wrap and let the nav cluster scroll horizontally so no
control is ever clipped off-screen. */
@media (max-width: 900px) {
header { flex-wrap: wrap; }
.header-actions {
width: 100%; margin-left: 0; margin-top: 8px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
padding-bottom: 2px;
-webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
mask-image: linear-gradient(to right, black 80%, transparent 100%);
}
#header-nav { flex-shrink: 0; }
.header-actions::-webkit-scrollbar { height: 3px; }
.header-actions::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
}
/* ── Respect reduced-motion preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── Inline link-style button (e.g. Library empty-state) ── */
.link-btn {
background: none;
border: none;
cursor: pointer;
color: var(--accent-text);
font-size: inherit;
font-family: var(--font);
text-decoration: underline;
padding: 0;
}
.link-btn:hover { opacity: 0.8; }
/* ═══════════════════════════════════════════════════════════
NAV REDESIGN — header menus + full-page (app-page) views
═══════════════════════════════════════════════════════════ */
/* Header trigger buttons (nav + account share a calm dark-on-cream pill) */
.hdr-trigger {
display: flex; align-items: center; gap: 7px;
padding: 7px 12px; border-radius: var(--radius-sm);
border: var(--border-w) solid var(--border);
background: var(--surface); color: var(--text);
font-family: var(--font); font-size: var(--fs-base); font-weight: 500;
cursor: pointer; white-space: nowrap; flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
}
.hdr-trigger:hover, .hdr-trigger[aria-expanded="true"] { background: var(--accent-lt); border-color: var(--accent-muted); }
.hdr-trigger .ti { font-size: var(--fs-lg); }
.hdr-trigger .hdr-trigger-caret { opacity: 0.8; font-size: var(--fs-base); }
.hdr-acct-avatar {
width: 24px; height: 24px; border-radius: 50%;
background: var(--btn-accent); color: var(--user-fg);
font-size: var(--fs-xs); font-weight: 600;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; overflow: hidden;
}
.hdr-acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Dropdown menus (fixed-positioned in JS, anchored under their trigger) */
.dt-menu {
position: fixed; width: 312px; max-width: calc(100vw - 16px);
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 8px 32px rgba(42,33,24,0.18);
padding: 10px; z-index: 600;
}
.dt-menu[hidden] { display: none; }
.dt-menu-label {
font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted); padding: 8px 8px 5px; font-weight: 600;
}
.dt-menu-user { display: flex; align-items: center; gap: 11px; padding: 6px 8px 12px; }
.dt-menu-user-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: var(--btn-accent); color: var(--user-fg);
font-size: var(--fs-md); font-weight: 600; flex-shrink: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.dt-menu-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dt-menu-user-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.dt-menu-user-role { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.dt-menu-divider { height: 1px; background: var(--border); margin: 6px 2px 8px; }
/* Account-style rows: icon + title + description, always-visible labels */
.dt-menu-row {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 9px 10px; margin-bottom: 5px; border-radius: 9px;
background: var(--bg); border: 1px solid var(--border);
font-family: var(--font); text-align: left; cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.dt-menu-row:hover, .dt-menu-row:focus-visible { border-color: var(--accent); outline: none; }
.dt-menu-row .ti { font-size: var(--fs-17); color: var(--accent); width: 20px; text-align: center; flex-shrink: 0; }
.dt-menu-row-text { flex: 1; min-width: 0; }
.dt-menu-row-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); display: block; }
.dt-menu-row-desc { font-size: var(--fs-xs); color: var(--muted); display: block; margin-top: 1px; }
.dt-menu-row-chev { color: var(--muted); font-size: var(--fs-md); flex-shrink: 0; }
.dt-menu-row.danger .ti, .dt-menu-row.danger .dt-menu-row-title { color: var(--danger-dk); }
.dt-menu-row.danger:hover, .dt-menu-row.danger:focus-visible { border-color: var(--danger-dk); background: var(--danger-lt); }
/* Nav-style tiles: compact 2-up grid with always-visible labels */
.dt-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.dt-menu-tile {
display: flex; align-items: center; gap: 9px;
padding: 11px 11px; border-radius: 9px;
background: var(--bg); border: 1px solid var(--border);
font-family: var(--font); text-align: left; cursor: pointer;
transition: border-color 0.12s;
}
.dt-menu-tile:hover, .dt-menu-tile:focus-visible { border-color: var(--accent); outline: none; }
.dt-menu-tile .ti { font-size: var(--fs-17); color: var(--accent); width: 19px; text-align: center; flex-shrink: 0; }
.dt-menu-tile-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.dt-menu-tile-count {
margin-left: auto; font-size: var(--fs-xs); font-weight: 600;
background: var(--accent-lt); color: var(--accent);
border-radius: 10px; padding: 1px 7px; min-width: 8px; text-align: center;
}
/* ── Full-page (app-page) views — replace slide-out drawers ── */
.app-page {
flex: 1; min-height: 0; background: var(--bg);
display: none; flex-direction: column;
}
.app-page.active { display: flex; }
.app-page-header {
display: flex; align-items: center; gap: 13px;
padding: 14px 22px 13px; border-bottom: 1px solid var(--border);
background: var(--surface); flex-shrink: 0;
}
.app-page-back {
display: flex; align-items: center; gap: 5px;
background: none; border: 1px solid var(--border); cursor: pointer;
font-family: var(--font); font-size: var(--fs-sm); color: var(--text);
padding: 6px 11px; border-radius: 8px; flex-shrink: 0;
transition: border-color 0.12s, color 0.12s;
}
.app-page-back:hover { border-color: var(--accent); color: var(--accent); }
.app-page-titlewrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-page-icon {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: var(--fs-lg); background: var(--accent-lt); color: var(--accent);
}
/* Now an (was a ) so SR heading nav has something between the
chrome and content sub-headings (audit 2026-07-15 P2 #35) — margin:0
neutralizes h2's UA default block margin so it renders identically inside
the flex .app-page-titlewrap row. */
.app-page-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.app-page-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.app-page-btn.ghost { background: none; color: var(--text); border-color: var(--border); }
.app-page-btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: none; }
.app-page-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 22px; }
.app-page-body--flush { padding: 0; }
/* Forms + prose keep a comfortable reading measure inside the full-bleed
frame (was 760px — widened so wide screens aren't half-empty). */
.app-page-body--narrow { max-width: 1040px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.app-page-back i, .app-page-btn i { font-size: var(--fs-md); }
.app-page-subcount { font-size: var(--fs-sm); color: var(--muted); }
.app-page-note { padding: 10px 16px 4px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
/* ── Inline-style extraction (audit 2026-07-03 P2 #24) ──────────────────
Consolidates one-off inline style="" attributes into named/shared
classes. display:none (and other JS-driven values like a progress-bar
width) are intentionally left as inline styles — only their static
sibling properties move here; see CLAUDE.md footgun notes. */
.u-flex-1 { flex: 1; }
.u-mb-1 { margin-bottom: var(--sp-1); }
.u-mb-20 { margin-bottom: var(--sp-5); }
.u-mr-6 { margin-right: 6px; }
.u-muted { color: var(--muted); }
.u-muted-mb6 { color: var(--muted); margin-bottom: 6px; }
.u-subhead { font-weight: 600; font-size: var(--fs-15); }
.u-label-strong { font-weight: 600; margin-bottom: var(--sp-2); }
.u-row-gap-8 { display: flex; gap: var(--sp-2); }
.hdr-menu-wrap { position: relative; flex-shrink: 0; }
#sign-in-status { font-size: var(--fs-base); color: var(--muted); margin-top: var(--sp-2); }
#runner-view .sc-toolbar { padding-bottom: 0; }
#eos-setup-btn i { font-size: var(--fs-md); vertical-align: -2px; }
#inbox-ledger { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#week1-progress-label { white-space: nowrap; font-size: var(--fs-sm); }
/* Upload Meeting Audio panel */
.upload-panel-body { padding: 20px; display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; overflow-y: auto; }
.upload-panel-desc { font-size: var(--fs-base); color: var(--muted); line-height: 1.6; }
#upload-drop-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
/* drag-hover: was inline this.style on the element; moved to a class to match
the .den-drop-zone.active pattern (audit 2026-07-16 UI P2). Same colors, so
the rendered hover is unchanged. */
#upload-drop-zone.active { border-color: var(--accent); background: var(--accent-lt); }
#upload-drop-zone svg { margin-bottom: 10px; }
#upload-drop-label { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.upload-drop-hint { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-1); }
.upload-file-list { flex-direction: column; gap: var(--sp-2); }
.upload-date-row { display: flex; flex-direction: column; gap: 6px; }
.upload-field-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
#upload-meeting-date { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: var(--fs-md); background: var(--bg); color: var(--text); outline: none; }
#upload-submit-btn { padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--btn-accent); color: var(--user-fg); font-family: var(--font); font-size: var(--fs-md); font-weight: 600; cursor: pointer; opacity: 0.45; transition: opacity 0.15s; }
.upload-status-box { font-size: var(--fs-base); line-height: 1.6; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); }
.speaker-naming-section { border-top: 1px solid var(--border); padding-top: 16px; flex-direction: column; gap: var(--sp-3); }
.speaker-naming-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.speaker-naming-desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin-top: -4px; }
#speaker-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
#save-speakers-btn { padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--teal); color: var(--user-fg); font-family: var(--font); font-size: var(--fs-base); font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.speaker-naming-skip-btn { padding: var(--sp-2); border-radius: 8px; border: 1px solid var(--border); background: none; font-family: var(--font); font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
/* Help page */
.help-body { padding: 16px; font-size: var(--fs-md); line-height: 1.7; color: var(--text); }
.help-example-chip { background: var(--surface-raised); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.help-example-chip:last-child { margin-bottom: 0; }
.help-code-chip { background: var(--surface-raised); border-radius: 8px; padding: 8px 12px; font-size: var(--fs-base); font-family: var(--mono); margin-bottom: var(--sp-1); }
.help-code-chip:last-child { margin-bottom: 0; }
/* View-error page */
.view-error-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 3rem 1.5rem; }
.view-error-box > i { font-size: var(--fs-3xl); color: var(--muted); }
.view-error-desc { font-size: var(--fs-base); color: var(--muted); max-width: 340px; }
#view-error-retry { margin-top: var(--sp-1); }
/* Denials — new-denial form + upload flow */
.den-form-row { display: flex; gap: var(--sp-3); }
.den-form-row--top { margin-top: 18px; }
.den-upload-trigger-icon { font-size: var(--fs-sm); margin-right: var(--sp-1); }
#den-upload-step2 { margin-top: var(--sp-5); }
.den-upload-intro { font-size: var(--fs-base); color: var(--muted); margin: 0 0 14px; }
#den-drop-zone > i { font-size: var(--fs-4xl); color: var(--muted); display: block; margin: 0 auto 8px; }
.den-drop-zone-title { margin: 0 0 4px; font-size: var(--fs-md); }
.den-drop-zone-sub { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.den-browse-link { color: var(--accent-dk); cursor: pointer; }
.den-upload-file-row { margin-top: 10px; }
.den-upload-file-row > i { font-size: var(--fs-17); color: var(--muted); }
#den-upload-filename { flex: 1; font-size: var(--fs-base); }
.den-line-remove.den-line-remove--static { position: static; }
.den-phi-review-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.den-phi-review-head > i { font-size: var(--fs-xl); flex-shrink: 0; margin-top: 1px; }
.den-phi-review-title { font-weight: 600; font-size: var(--fs-md); margin-bottom: 3px; }
.den-phi-review-desc { font-size: var(--fs-sm-half); line-height: 1.5; }
#den-phi-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.den-upload-summary-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 13px; margin-bottom: var(--sp-4); }
.den-upload-summary-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
#den-upload-preview { font-size: var(--fs-sm); color: var(--ink); font-family: var(--mono); line-height: 1.6; }
/* Certifications page */
#certs-expiring-badge { font-size: var(--fs-xs); font-weight: 600; background: var(--btn-accent); color: var(--user-fg); padding: 2px 8px; border-radius: 10px; }
#cert-file-label { display: flex; align-items: center; gap: var(--sp-2); border: 1px dashed var(--border); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: var(--fs-sm); color: var(--muted); }
#cert-file-label i { font-size: var(--fs-md); }
#cert-type-manager { border-top: 1px solid var(--border); padding: 12px 16px; }
.cert-type-manager-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: .05em; }
#cert-type-list { margin-bottom: 10px; }
/* Profile page */
#profile-modal-desc { font-size: var(--fs-sm); color: var(--muted); margin: -4px 0 14px; line-height: 1.5; }
.pf-field-hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; line-height: 1.4; }
#profile-save-btn { margin-top: var(--sp-1); }
/* Page content sections (cards) */
.app-sec {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 16px 18px; margin-bottom: 14px;
}
.app-sec-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.app-sec-head .ti { font-size: var(--fs-17); color: var(--accent); }
.app-sec-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.app-sec-sub { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; }
/* Usage tab — adoption dashboard */
.usage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.usage-card { background: var(--surface-raised); border-radius: 10px; padding: 12px 14px; }
.usage-card-label { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 4px; }
.usage-card-val { font-size: var(--fs-3xl); font-weight: 600; color: var(--ink); line-height: 1.1; }
.usage-panel { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px; }
.usage-panel-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.usage-panels { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 800px) { .usage-panels { grid-template-columns: 1fr 1fr; } }
.usage-chart { display: flex; align-items: flex-end; gap: 6px; height: 180px; }
.usage-bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.usage-bar { width: 100%; max-width: 26px; background: var(--purple); border-radius: 4px 4px 0 0; transition: height .2s ease; }
.usage-bar-x { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
.usage-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.usage-table th { font-weight: 500; color: var(--muted); text-align: left; padding: 6px 0; border-bottom: 1px solid var(--border); }
.usage-table td { padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--ink); }
.usage-table tr:last-child td { border-bottom: none; }
.usage-toggle { display: flex; gap: 6px; margin-bottom: 14px; }
.usage-toggle-btn { padding: 6px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: var(--fs-base); font-family: inherit; cursor: pointer; transition: background .15s, color .15s; }
.usage-toggle-btn.active { background: var(--purple); color: var(--user-fg); border-color: var(--purple); font-weight: 600; }
.usage-week-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.usage-week-nav-btn { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: var(--fs-base); font-family: inherit; cursor: pointer; }
.usage-week-nav-btn:disabled { color: var(--border); cursor: default; }
.usage-week-label { flex: 1; text-align: center; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.usage-bar.empty { background: var(--border); opacity: .5; }
/* Maintenance operation cards (Backup, Clean up memory) */
.op-card {
display: flex; align-items: flex-start; gap: 13px;
padding: 15px 16px; border: 1px solid var(--border);
border-radius: 12px; background: var(--surface); margin-bottom: 11px;
}
.op-card-icon {
width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: var(--fs-xl); background: var(--accent-lt); color: var(--accent);
}
.op-card-body { flex: 1; min-width: 0; }
.op-card-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.op-card-desc { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; line-height: 1.45; }
.op-card .app-page-btn { align-self: center; }
/* Profile page form */
.pf-top { display: flex; align-items: center; gap: 16px; }
.pf-avatar {
width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
background: var(--btn-accent); color: var(--user-fg); overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: var(--fs-3xl); font-weight: 600;
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-name { font-size: var(--fs-xl); font-weight: 600; color: var(--text); }
.pf-role-badge {
display: inline-block; margin-top: 5px; font-size: var(--fs-xs); font-weight: 600;
background: var(--accent-lt); color: var(--accent);
border-radius: 20px; padding: 3px 11px;
}
.pf-field { margin-bottom: 13px; }
.pf-field:last-child { margin-bottom: 0; }
.pf-field label { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 5px; letter-spacing: 0.04em; }
.pf-field input, .pf-field select {
width: 100%; box-sizing: border-box; padding: 9px 12px;
border: 1px solid var(--border); border-radius: 8px;
font-family: var(--font); font-size: var(--fs-md); background: var(--bg); color: var(--text);
}
.pf-field input:focus, .pf-field select:focus { outline: none; border-color: var(--accent); }
/* Admin page: top tabs (replaces left sidebar) */
.app-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.app-tab {
padding: 8px 13px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
cursor: pointer; border: none; background: none; font-family: var(--font);
border-bottom: 2px solid transparent; margin-bottom: -1px;
display: flex; align-items: center; gap: 6px;
}
.app-tab .ti { font-size: var(--fs-15); }
.app-tab:hover { color: var(--text); }
.app-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 560px) {
.dt-menu { width: calc(100vw - 16px); }
.app-page-header { padding: 12px 14px; gap: 9px; }
.app-page-body { padding: 14px; }
}
/* ── Denials & Appeals Engine (Phase 1) ──────────────────────── */
.den-phi-banner {
display: flex; align-items: flex-start; gap: 9px;
background: var(--danger-lt); border: 1.5px solid var(--danger);
color: var(--danger-dk); border-radius: var(--radius);
padding: 11px 13px; font-size: var(--fs-sm-half); line-height: 1.5; margin-bottom: 16px;
}
.den-phi-banner i { font-size: var(--fs-17); flex-shrink: 0; margin-top: 1px; }
/* Financial summary chips (the ROI surface) */
.den-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.den-chip {
flex: 1 1 140px; min-width: 130px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px;
}
.den-chip-label { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.den-chip-value { font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); margin-top: 3px; line-height: 1.1; }
.den-chip-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.den-chip.win .den-chip-value { color: var(--teal); }
.den-chip.lost .den-chip-value { color: var(--danger-dk); }
/* Dense table */
.den-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.den-table th {
text-align: left; font-size: var(--fs-xs); color: var(--muted); font-weight: 600;
text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px;
border-bottom: 2px solid var(--border); white-space: nowrap;
}
.den-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.den-table tbody tr { cursor: pointer; }
.den-table tbody tr:hover { background: var(--accent-lt); }
.den-table .den-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.den-authref { font-weight: 600; color: var(--accent-dk); font-variant-numeric: tabular-nums; }
/* Category + status badges */
.den-badge {
display: inline-block; font-size: var(--fs-2xs-half); font-weight: 600; padding: 2px 7px;
border-radius: 9px; white-space: nowrap; text-transform: capitalize;
background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border);
}
.den-badge.cat-medical_necessity { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent-muted); }
/* text was var(--warn) on var(--amber-lt) — AA fail, audit 2026-07-15 P2 #33 */
.den-badge.cat-missing_auth { background: var(--amber-lt); color: var(--amber-dk); border-color: var(--amber); }
.den-badge.cat-coding { background: var(--teal-lt); color: var(--teal); border-color: var(--teal); }
.den-badge.cat-timely_filing { background: var(--purple-lt); color: var(--purple); border-color: var(--purple); }
.den-status { font-size: var(--fs-xs); font-weight: 600; text-transform: capitalize; }
.den-status.s-new { color: var(--muted); }
.den-status.s-drafted { color: var(--accent-dk); }
.den-status.s-submitted { color: var(--warn); }
.den-status.s-resolved.won { color: var(--teal); }
.den-status.s-resolved.lost { color: var(--danger-dk); }
.den-status.s-resolved { color: var(--ink); }
/* Form */
.den-form { max-width: 1040px; }
/* Outcomes log form is full-bleed (PR #429) — override the shared
.den-form cap by id so Denials' identically-classed form is untouched. */
#oc-log-wrap { max-width: none; }
.den-section-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 16px 0 7px; }
.den-field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.den-field-grid.two { grid-template-columns: repeat(2, 1fr); }
.den-field { display: flex; flex-direction: column; gap: 4px; }
.den-field label { font-size: var(--fs-xs-half); color: var(--muted); font-weight: 600; }
/* .den-input/.den-label: referenced by denial edit panels + Outcomes fields
since they shipped, but never defined — fields rendered as unstyled native
controls (audit 2026-07-15 P1 #5). Mirrors .onb-input. */
.den-label { font-size: var(--fs-xs-half); color: var(--muted); font-weight: 600; display: block; margin-bottom: 4px; }
.den-required { color: var(--accent); } /* required-field marker, audit 2026-07-23 P2 #22 */
.den-input {
width: 100%; box-sizing: border-box; padding: 8px 10px;
border: 1px solid var(--border); border-radius: 8px;
font-size: var(--fs-base); font-family: var(--font);
background: var(--bg); color: var(--text);
}
.den-input:focus { outline: none; border-color: var(--accent); }
.den-line-card {
border: 1px solid var(--border); border-radius: var(--radius);
padding: 12px; margin-bottom: 10px; background: var(--surface); position: relative;
}
.den-line-card .den-line-num { font-size: var(--fs-xs); font-weight: 600; color: var(--accent-dk); margin-bottom: 8px; }
.den-line-remove {
position: absolute; top: 9px; right: 9px; background: none; border: none;
color: var(--muted); cursor: pointer; font-size: var(--fs-lg); line-height: 1; padding: 2px;
}
.den-line-remove:hover { color: var(--danger); }
.den-carc-hint { font-size: var(--fs-xs); color: var(--teal); margin-top: 3px; min-height: 14px; }
.den-btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--border); }
.den-btn.small { padding: 5px 11px; font-size: var(--fs-xs); }
.den-addline {
width: 100%; padding: 9px; border: 1.5px dashed var(--border); border-radius: 9px;
background: var(--surface); color: var(--accent-dk); font-family: var(--font);
font-size: var(--fs-sm-half); font-weight: 600; cursor: pointer;
}
.den-addline:hover { border-color: var(--accent); }
/* Movement Paradigm Outcome Capture (Move 1) */
/* Patient/exam fields — persistent above both the upload and confirm
steps (they used to live inside step 1 only, so they vanished from
view the moment step 2's confirm screen replaced it). */
.oc-patient-strip { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.oc-patient-strip .den-field { flex: 1; min-width: 110px; }
.oc-patient-strip .oc-field-patient { flex: 1.3; }
.oc-patient-strip .oc-field-age { flex: 0.7; min-width: 80px; }
.oc-patient-strip .oc-field-clinician { flex: 0.8; }
.oc-field-hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.oc-drop-hint { margin: 14px 0 0; font-size: var(--fs-xs-half); color: var(--muted); line-height: 1.6; max-width: 320px; }
.oc-total-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: var(--accent-lt); border-radius: 7px; padding: 4px;
}
.oc-total-tile .oc-total-label { font-size: var(--fs-2xs-half); color: var(--accent-dk); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.oc-total-tile .oc-total-value { font-size: var(--fs-2xl); font-weight: 500; color: var(--accent-dk); }
.oc-total-tile .oc-total-value span { font-size: var(--fs-sm); font-weight: 400; }
.oc-total-tile.ue { background: var(--surface-raised); }
.oc-total-tile.ue .oc-total-label, .oc-total-tile.ue .oc-total-value { color: var(--ink); }
@media (max-width: 620px) { .oc-patient-strip { flex-direction: column; } }
.oc-delta-badge { background: var(--teal-lt); color: var(--teal); font-weight: 600; padding: 2px 8px; border-radius: 6px; }
/* Clinic-trend "at a glance" strip — full-bleed, matching the site's
default width system (PR #429, request: "make it use the full bleed
of the screen"). Previously capped at 1040px + left-anchored .den-form
below it, which read as an off-center layout on wide screens. */
.oc-summary-strip { width: 100%; box-sizing: border-box; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.oc-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.oc-summary-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.oc-summary-tile-label { display: flex; align-items: center; gap: 5px; font-size: var(--fs-2xs-half); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.oc-summary-tile-label i { font-size: var(--fs-base); color: var(--accent-dk); }
.oc-summary-tile-value { font-size: var(--fs-2xl); font-weight: 500; color: var(--ink); }
@media (max-width: 720px) { .oc-summary-grid { grid-template-columns: repeat(2, 1fr); } }
/* Replaces .oc-summary-grid when /outcomes/summary fails to load — a
compact inline row rather than the full-panel panelError() treatment,
since this strip has no room for a large icon+message stack. */
.oc-summary-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--danger-lt); border-radius: 8px; padding: 12px 14px; }
.oc-summary-error-msg { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: 500; color: var(--danger-dk); }
.oc-summary-error-msg i { font-size: var(--fs-lg); }
.oc-summary-error-retry { font-size: var(--fs-sm-half); font-weight: 600; color: var(--danger-dk); background: none; border: 1.5px solid var(--danger-dk); border-radius: 7px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.oc-summary-error-retry:hover { background: var(--danger-dk); color: var(--user-fg); }
@media (max-width: 720px) { .oc-summary-error { flex-direction: column; align-items: flex-start; } }
/* Confirm step: real uploaded image on the left, vertical fields on the right */
.oc-confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .oc-confirm-grid { grid-template-columns: 1fr; } }
/* Edit mode has no screenshot to show — collapse to one column instead of
reserving a 380px-tall empty placeholder box (audit 2026-07-23 P2 #22). */
.oc-confirm-grid.oc-editing-nogrid { grid-template-columns: 1fr; }
.oc-confirm-grid.oc-editing-nogrid .oc-image-preview { display: none; }
.oc-image-preview { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; min-height: 380px; }
.oc-image-preview-head { background: var(--surface-raised); padding: 8px 14px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 6px; }
.oc-image-preview-head i { font-size: var(--fs-md); }
.oc-image-preview-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px; }
.oc-image-preview-body img { max-width: 100%; max-height: 480px; border-radius: 6px; display: block; }
.oc-field-col-list { display: flex; flex-direction: column; gap: 9px; }
.oc-field-row { display: flex; align-items: center; gap: 10px; }
.oc-field-row label { font-size: var(--fs-sm-half); color: var(--ink); width: 190px; flex-shrink: 0; }
.oc-field-row input { width: 80px; flex-shrink: 0; }
.oc-field-row .oc-latflex-side { width: auto; min-width: 92px; flex-shrink: 0; }
/* On wide screens the confirm step now has room to spare (the image
column no longer forces the score list into a tall single file) —
reflow the 7 core-score rows into 2 columns, matching the site's
existing ≥1200px wide-reflow pattern. */
@media (min-width: 1200px) {
.oc-field-col-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; }
.oc-field-col-list > .oc-total-tile { grid-column: 1 / -1; }
}
/* Persistent lower panels: recent entries + embedded patient trend —
full-bleed (PR #429), matching .oc-summary-strip/.den-form above. */
.oc-lower-grid { width: 100%; box-sizing: border-box; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .oc-lower-grid { grid-template-columns: 1fr; } }
.oc-panel { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.oc-panel-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 500; color: var(--ink); margin-bottom: 12px; }
.oc-panel-head i { font-size: var(--fs-lg); color: var(--accent-dk); }
.oc-panel-note { font-size: var(--fs-xs); color: var(--muted); margin: 10px 0 0; }
.oc-recent-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 8px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 6px; }
.oc-recent-row:last-child { border-bottom: none; }
.oc-recent-row:hover { background: var(--accent-lt); }
.oc-recent-row.active { background: var(--accent-lt); }
.oc-recent-row-patient { font-size: var(--fs-sm-half); font-weight: 600; color: var(--ink); }
.oc-recent-row-date { font-size: var(--fs-xs); color: var(--muted); margin-left: 8px; }
.oc-recent-row-meta { font-size: var(--fs-2xs-half); color: var(--muted); margin-top: 2px; }
.oc-recent-row-type { font-size: var(--fs-2xs-half); background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 1px 7px; border-radius: 5px; }
/* Patient trend table — 8 columns since Age/Clinician were added; the
table itself has no cell padding by default (border-collapse), so
adjacent columns collide without this. */
.oc-trend-table th, .oc-trend-table td { padding: 6px 8px 6px 0; }
.oc-trend-table th:first-child, .oc-trend-table td:first-child { padding-left: 0; }
/* Both Outcomes tables live in .oc-panel, a HALF-width cell of .oc-lower-grid
(1fr 1fr), so they're constrained by their grid cell rather than by the
viewport — an 8-column trend table clipped its last columns with no way to
reach them (audit 2026-07-23 UI P1). A wrapper is correct where a media
query is not: the panel is narrow at ~820-1200px REGARDLESS of how wide
the window is. Replaces the old max-width:720px + display:block hack on
.oc-an-table, which both missed this range and broke table semantics. */
.oc-table-scroll { overflow-x: auto; }
.oc-recent-row-score { font-size: var(--fs-sm-half); font-weight: 600; color: var(--ink); }
/* Edit affordance — Recent entries row + Patient trend table row (icon-only,
ghost, matches .den-line-remove's hover-color pattern). */
.oc-edit-icon {
background: none; border: none; cursor: pointer; color: var(--muted);
padding: 2px; font-size: var(--fs-md); line-height: 1; flex-shrink: 0;
}
.oc-edit-icon:hover { color: var(--accent-dk); }
.oc-story-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; background: var(--accent-lt); border-radius: 8px; padding: 9px 12px; }
.oc-story-note i { font-size: var(--fs-15); color: var(--accent-dk); flex-shrink: 0; }
.oc-story-note span { font-size: var(--fs-xs-half); color: var(--accent-dk); line-height: 1.5; }
#oc-lookup-id { max-width: 160px; }
/* Analytics tab — filter bar + breakdown table. */
.oc-an-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.oc-an-field { flex: 0 0 auto; }
.oc-an-field .den-input { min-width: 120px; }
.oc-an-controls .oc-an-export { align-self: flex-end; margin-bottom: 1px; white-space: nowrap; }
.oc-an-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); margin-top: 14px; }
.oc-an-table th, .oc-an-table td { padding: 8px 10px 8px 0; }
.oc-an-table th { text-align: right; }
.oc-an-table th:first-child, .oc-an-table td:first-child { text-align: left; padding-left: 0; }
.oc-an-table td { text-align: right; border-top: 1px solid var(--border); }
.oc-an-table thead th { border-bottom: 1px solid var(--border); }
.oc-an-table .oc-an-n { color: var(--muted); }
.oc-an-table .oc-an-mode { font-weight: 600; color: var(--ink); } /* the row's modal (most common) pattern */
.oc-an-table tr.oc-an-total td { color: var(--muted); border-top: 2px solid var(--border); }
.oc-an-group-pill { font-size: var(--fs-2xs-half); background: var(--surface); border: 1px solid var(--border); color: var(--ink); padding: 1px 7px; border-radius: 5px; }
.oc-an-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; font-size: var(--fs-xs-half); color: var(--muted); line-height: 1.6; }
.oc-an-note i { flex-shrink: 0; margin-top: 1px; }
.oc-an-note.warn { background: var(--warn-lt); border: 1px solid var(--warn); border-radius: 8px; padding: 9px 12px; color: var(--amber-dk); } /* was --warn on --warn-lt, 3.07:1 AA-fail; audit 2026-07-23 P2 #20, matches the 2026-07-15 --amber-dk migration */
/* Detail / rebuttal */
.den-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.den-type-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.den-type-tab {
padding: 7px 13px; border-radius: 9px; border: 1px solid var(--border);
background: var(--surface); color: var(--ink); font-family: var(--font);
font-size: var(--fs-sm-half); font-weight: 600; cursor: pointer;
}
.den-type-tab.active { background: var(--btn-accent); color: var(--user-fg); border-color: var(--ink); }
.den-body-panel {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 16px 18px; font-size: var(--fs-base-half); line-height: 1.6; white-space: pre-wrap;
color: var(--ink); margin: 10px 0;
}
.den-cite-chip {
display: inline-block; background: var(--accent-lt); color: var(--accent-dk);
font-size: var(--fs-2xs-half); font-weight: 600; padding: 0 5px; border-radius: 5px; vertical-align: baseline;
}
.den-sources {
background: var(--teal-lt); border: 1.5px solid var(--teal); border-radius: var(--radius);
padding: 12px 14px; margin: 10px 0; font-size: var(--fs-sm-half);
}
/* Upload flow */
.den-drop-zone {
border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
padding: 2rem 1rem; text-align: center; cursor: pointer; color: var(--ink);
}
.den-drop-zone.active, .den-drop-zone:hover { border-color: var(--accent); background: var(--accent-lt); }
.den-upload-file-row {
display: flex; align-items: center; gap: 10px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 9px 12px;
}
.den-phi-review-banner {
/* text was var(--warn) on var(--amber-lt) — ~3.07:1, fails AA (audit
2026-07-15 P2 #33); --amber-dk is the purpose-built AA pairing. */
background: var(--amber-lt); border: 1.5px solid var(--amber); color: var(--amber-dk);
border-radius: var(--radius); padding: 12px 14px; margin-bottom: 4px;
}
.den-phi-clean-banner {
background: var(--teal-lt); border: 1.5px solid var(--teal); color: var(--teal);
border-radius: var(--radius); padding: 10px 14px; font-size: var(--fs-base);
display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
/* Edit mode swaps the "read clean" success banner for an amber caution —
same AA-fixed pairing as .den-phi-review-banner. */
.den-phi-clean-banner.oc-editing { background: var(--amber-lt); border-color: var(--amber); color: var(--amber-dk); }
.oc-edit-placeholder { padding: 20px; text-align: center; color: var(--muted); font-size: var(--fs-sm-half); line-height: 1.6; }
.den-phi-row {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 9px 12px; display: flex; align-items: center; gap: 10px;
}
.den-phi-type { font-size: var(--fs-xs); font-weight: 600; color: var(--amber-dk); text-transform: uppercase; letter-spacing: .04em; } /* was --warn on --surface, ~3.41:1 AA-fail; audit 2026-07-23 P2 #20 */
.den-phi-value { font-size: var(--fs-base); color: var(--ink); font-family: var(--mono); margin-top: 1px; }
.den-phi-loc { font-size: var(--fs-xs); color: var(--muted); flex-shrink: 0; }
.den-sources h4 { font-size: var(--fs-sm); color: var(--teal); margin: 0 0 7px; text-transform: uppercase; letter-spacing: .03em; }
.den-source-item { margin-bottom: 8px; line-height: 1.5; }
.den-source-item .q { color: var(--muted); font-style: italic; display: block; margin-top: 2px; }
.den-warn {
/* text was var(--warn) on var(--warn-lt) — same AA fail as above (P2 #33) */
background: var(--warn-lt); border: 1.5px solid var(--warn); border-radius: var(--radius);
padding: 11px 13px; margin: 10px 0; font-size: var(--fs-sm-half); color: var(--amber-dk); line-height: 1.5;
}
.den-actions { display: flex; gap: 9px; flex-wrap: wrap; margin: 14px 0; }
/* ── Payer Policy Radar management (Billing) ──────────────────────────── */
.pw-intro { font-size: var(--fs-base); color: var(--muted); line-height: 1.55; max-width: 640px; margin: 0 0 16px; }
.pw-rows { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); max-width: 720px; }
.pw-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.pw-row:last-child { border-bottom: none; }
.pw-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pw-dot--on { background: var(--teal); }
.pw-dot--off { background: var(--muted); opacity: .5; }
.pw-row-main { flex: 1; min-width: 0; }
.pw-row-payer { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.pw-row--paused .pw-row-payer { color: var(--muted); }
.pw-paused-tag { font-weight: 400; color: var(--muted); }
.pw-row-url { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-row-changed { font-size: var(--fs-xs); color: var(--amber-dk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-row-checked { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.pw-icon-btn { border: 1px solid var(--border); background: var(--bg); border-radius: 6px; padding: 4px 7px; cursor: pointer; color: var(--muted); flex-shrink: 0; display: inline-flex; align-items: center; }
.pw-icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.pw-icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); }
.pw-icon-btn i { font-size: var(--fs-base); }
.pw-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.pw-edit-payer { flex: 1; min-width: 120px; }
.pw-edit-url { flex: 2; min-width: 180px; }
.pw-edit-active { font-size: var(--fs-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pw-edit-actions { display: flex; gap: 6px; }
.pw-add { margin-top: 18px; max-width: 720px; }
.pw-add-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pw-add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pw-add-row .den-input:nth-child(1) { flex: 1; min-width: 130px; }
.pw-add-row .den-input:nth-child(2) { flex: 2; min-width: 180px; }
@media (max-width: 640px) {
.pw-row-checked { display: none; }
.pw-add-row { flex-direction: column; align-items: stretch; }
.pw-add-row .den-btn { width: 100%; }
}
/* Pipeline stepper */
.den-pipeline { display: flex; align-items: flex-start; gap: 0; margin: 18px 0 6px; overflow-x: auto; padding-bottom: 4px; }
.den-pipeline-step {
display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 72px;
position: relative; cursor: pointer;
}
.den-pipeline-step::after {
content: ''; position: absolute; top: 13px; left: calc(50% + 13px);
width: calc(100% - 26px); height: 2px; background: var(--border);
}
.den-pipeline-step:last-child::after { display: none; }
.den-pipeline-step.done::after { background: var(--teal); }
.den-step-circle {
width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
background: var(--surface); display: flex; align-items: center; justify-content: center;
font-size: var(--fs-xs); font-weight: 600; color: var(--muted); position: relative; z-index: 1;
transition: all .2s;
}
.den-pipeline-step.done .den-step-circle { background: var(--teal); border-color: var(--teal); color: var(--user-fg); }
.den-pipeline-step.active .den-step-circle { background: var(--btn-accent); border-color: var(--ink); color: var(--user-fg); }
.den-step-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); margin-top: 5px; text-align: center; line-height: 1.3; }
.den-pipeline-step.done .den-step-label, .den-pipeline-step.active .den-step-label { color: var(--ink); }
/* Outcome picker */
.den-outcome-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.den-outcome-pill {
padding: 6px 13px; border-radius: 20px; border: 1px solid var(--border);
background: var(--surface); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
transition: all .15s;
}
.den-outcome-pill.selected { border-color: var(--ink); }
.den-outcome-pill.selected.win { background: var(--teal); color: var(--user-fg); border-color: var(--teal); }
.den-outcome-pill.selected.loss { background: var(--danger); color: var(--user-fg); border-color: var(--danger); }
.den-outcome-pill.selected.neutral { background: var(--ink); color: var(--bg); }
/* Inline edit panel */
.den-edit-panel {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 16px; margin: 10px 0;
}
.den-edit-panel h4 { font-size: var(--fs-sm); color: var(--teal); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.den-section-sep { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 6px; }
/* Research panel */
.den-research-panel {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 16px; margin: 10px 0;
}
.den-research-panel h4 { font-size: var(--fs-sm); color: var(--accent-dk); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.den-research-section-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.den-study-card {
border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
margin-bottom: 8px; background: var(--bg); display: flex; gap: 10px; align-items: flex-start;
}
.den-study-card input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.den-study-title { font-size: var(--fs-sm-half); font-weight: 600; line-height: 1.4; }
.den-study-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.den-study-abstract { font-size: var(--fs-xs-half); color: var(--ink); margin-top: 4px; line-height: 1.5; }
.den-study-link { font-size: var(--fs-xs); color: var(--teal); text-decoration: none; margin-top: 2px; display: inline-block; }
.den-study-link:hover { text-decoration: underline; }
.den-research-cite-chip {
display: inline-block; background: var(--teal-lt); color: var(--teal);
font-size: var(--fs-2xs-half); font-weight: 600; padding: 0 5px; border-radius: 5px; vertical-align: baseline;
}
@media (max-width: 560px) {
.den-field-grid, .den-field-grid.two { grid-template-columns: 1fr 1fr; }
.den-chip { flex-basis: 45%; }
.den-table th:nth-child(2), .den-table td:nth-child(2) { display: none; }
.den-pipeline { gap: 0; }
.den-step-label { font-size: var(--fs-2xs); }
}
#vto-view { display:none; overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }
#vto-view.active { display:block; }
.vto-wrap { max-width:none; margin:0; padding:8px 20px 48px; }
.vto-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.vto-col { min-width:0; }
.vto-section { background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; }
.vto-section-head { display:flex; align-items:center; justify-content:space-between; padding:8px 11px 7px; border-bottom:1px solid var(--border); }
.vto-section-label { font-size:var(--fs-xs); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.vto-edit-btn { font-size:var(--fs-base); color:var(--accent); background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:4px; font-family:var(--font); padding:0; }
.vto-edit-btn:hover { text-decoration:underline; }
.vto-section-body { padding:9px 11px; }
.vto-field { margin-bottom:11px; }
.vto-field:last-child { margin-bottom:0; }
.vto-field-label { font-size:var(--fs-xs); color:var(--muted); margin-bottom:3px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.vto-field-val { font-size:var(--fs-md); color:var(--text); line-height:1.55; }
.vto-cv-list { list-style:none; margin:0; padding:0; }
.vto-cv-list li { display:flex; align-items:baseline; gap:9px; padding:3px 0; border-bottom:1px solid var(--border); }
.vto-cv-list li:last-child { border-bottom:none; }
.vto-cv-num { font-size:var(--fs-xs); font-weight:600; color:var(--muted); min-width:14px; }
.vto-cv-stmt { font-size:var(--fs-md); font-weight:600; color:var(--text); }
.vto-cv-detail { font-size: var(--fs-sm-half); color:var(--muted); margin-top:2px; line-height:1.45; }
.vto-steps { display:flex; align-items:center; flex-wrap:wrap; gap:0; margin-top:5px; }
.vto-step { font-size:var(--fs-base); font-weight:600; padding:5px 13px; background:var(--bg); border:1px solid var(--border); }
.vto-step:first-child { border-radius:8px 0 0 8px; }
.vto-step:last-child { border-radius:0 8px 8px 0; }
.vto-arrow { font-size:var(--fs-2xs); color:var(--muted); padding:0 1px; }
.vto-two-col { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.vto-three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
.vto-stat { background:var(--bg); border-radius:8px; padding:9px 12px; }
.vto-stat-label { font-size:var(--fs-xs); color:var(--muted); margin-bottom:2px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.vto-stat-val { font-size:var(--fs-2xl); font-weight:600; color:var(--text); }
.vto-meas-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px 14px; }
.vto-divider-label { font-size:var(--fs-xs); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:0 0 7px; }
.vto-critique-ok { margin-top:10px; padding:10px 12px; background:var(--teal-lt); border:1px solid var(--teal); border-radius:8px; font-size:var(--fs-base); color:var(--teal); display:flex; align-items:center; gap:7px; }
.vto-critique-warn { margin-top:10px; padding:10px 12px; background:var(--warn-lt); border:1px solid var(--warn); border-radius:8px; }
/* text was var(--warn) on var(--warn-lt) — AA fail, audit 2026-07-15 P2 #33 */
.vto-critique-warn-title { font-size:var(--fs-base); font-weight:600; color:var(--amber-dk); margin-bottom:4px; }
.vto-critique-item { font-size: var(--fs-sm-half); color:var(--warn); margin-bottom:3px; padding-left:8px; }
.vto-footer { display:flex; gap:8px; margin-top:14px; }
.vto-version-meta { font-size:var(--fs-sm); color:var(--muted); padding:6px 0 0; }
.vto-guarantee { font-style:italic; font-size: var(--fs-base-half); color:var(--muted); line-height:1.55; }
.vto-head-actions { display:flex; align-items:center; gap:8px; }
.vto-ed-field { margin-bottom:13px; }
.vto-ed-field:last-child { margin-bottom:0; }
.vto-ed-label { font-size:var(--fs-xs); color:var(--muted); margin-bottom:4px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.vto-ed-input, .vto-ed-area { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--border); border-radius:7px; font-size:var(--fs-md); font-family:var(--font); background:var(--bg); color:var(--text); }
.vto-ed-input { height:36px; padding:0 10px; }
.vto-ed-area { line-height:1.5; resize:vertical; min-height:60px; }
.vto-ed-input:focus, .vto-ed-area:focus { outline:none; border-color:var(--accent); }
.vto-ed-row { display:flex; gap:7px; align-items:flex-start; margin-bottom:7px; }
.vto-ed-row .vto-ed-input { flex:1; }
.vto-ed-x { width:36px; height:36px; flex:none; border:1px solid var(--border); background:var(--surface); border-radius:7px; cursor:pointer; color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:var(--fs-15); }
.vto-ed-x:hover { color:var(--accent); border-color:var(--accent); }
.vto-ed-add { font-size:var(--fs-base); color:var(--accent); background:none; border:none; cursor:pointer; font-family:var(--font); padding:2px 0; display:inline-flex; align-items:center; gap:5px; margin-top:2px; }
.vto-ed-add:hover { text-decoration:underline; }
.vto-ed-cv { flex:1; display:flex; flex-direction:column; gap:5px; }
.vto-ed-err { display:none; margin:10px 14px 0; padding:9px 11px; background:var(--warn-lt); border:1px solid var(--warn); border-radius:7px; font-size: var(--fs-sm-half); color:var(--warn); }
/* V/TO grids never collapsed on small screens (audit 2026-07-15 P1 #7) —
860px matches the sidebar's own drawer breakpoint; the three-col steps
through two before stacking, matching .oc-log-grid's pattern. Placed
after every base .vto-* rule in the cascade — equal-specificity source
order matters and an earlier placement was silently overridden by the
later unconditional .vto-meas-grid rule (caught in headless testing). */
@media (max-width: 860px) {
.vto-columns { grid-template-columns: 1fr; }
.vto-meas-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.vto-two-col { grid-template-columns: 1fr; }
.vto-three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.vto-three-col { grid-template-columns: 1fr; }
}
#author-view { display:none; }
#author-view.active { display:block; }
.au-wrap { max-width:1040px; margin:0 auto; padding:8px 16px 48px; }
.au-intro { font-size:var(--fs-md); color:var(--muted); line-height:1.55; margin:6px 0 18px; }
.au-topic { display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:13px 15px; margin-bottom:9px; cursor:pointer; font-family:var(--font); transition:background .12s,border-color .12s; }
.au-topic:hover { background:var(--accent-lt); border-color:var(--accent); }
.au-topic b { font-size:var(--fs-md); color:var(--text); display:block; margin-bottom:2px; }
.au-topic span { font-size:var(--fs-sm); color:var(--muted); line-height:1.45; }
.au-q { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:15px 16px; margin-bottom:14px; }
.au-q-text { font-size: var(--fs-md-half); font-weight:600; color:var(--text); margin-bottom:3px; }
.au-q-hint { font-size: var(--fs-xs-half); color:var(--muted); margin-bottom:11px; }
.au-opt { display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; margin-bottom:7px; cursor:pointer; transition:border-color .12s,background .12s; }
.au-opt:hover { border-color:var(--accent); }
.au-opt.sel { border-color:var(--accent); background:var(--accent-lt); }
.au-opt input { margin-top:2px; flex-shrink:0; accent-color:var(--accent); }
.au-opt-l { font-size: var(--fs-base-half); font-weight:600; color:var(--text); }
.au-opt-d { font-size:var(--fs-sm); color:var(--muted); line-height:1.4; }
.au-other input[type=text] { width:100%; margin-top:7px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; font-family:var(--font); font-size: var(--fs-base-half); background:var(--bg); color:var(--text); outline:none; }
.au-btn { padding:12px 18px; border-radius:10px; border:1px solid var(--border); background:var(--btn-accent); color:var(--user-fg); font-family:var(--font); font-size:var(--fs-md); font-weight:600; cursor:pointer; }
.au-btn:disabled { opacity:.45; cursor:not-allowed; }
.au-btn.sec { background:var(--surface); color:var(--text); }
.au-thinking { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:var(--fs-base); padding:24px 4px; }
.au-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:aupulse 1s infinite ease-in-out; }
@keyframes aupulse { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.1)} }