:root {
--banner-bg: #fef2f2;
--banner-fg: #991b1b;
--watermark-color: rgba(220, 38, 38, 0.045);
--rail-bg: #f1f2f5;
--rail-fg: #3b4252;
--rail-fg-muted: #6b7280;
--rail-hover-bg: #e7e9ed;
--rail-active-bg: #e6edfb;
--subrail-bg: #f8fafc;
--rightrail-bg: #f9fafb;
--text: #0f172a;
--muted: #475569;
--rule: #e2e8f0;
--panel-bg: #f1f5f9;
--accent: #1e40af;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* the hidden attribute always wins, even over display:flex */
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
color: var(--text);
background: #fff;
display: flex;
flex-direction: column;
line-height: 1.55;
}
/* ── App header — one row: TDAP title | privilege text | CRTA logo ── */
.app-header {
flex: 0 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding: 0.35rem 1.1rem;
background: var(--banner-bg);
border-bottom: 2px solid var(--banner-fg);
min-height: 50px;
position: relative;
z-index: 100;
}
.app-header-left { justify-self: start; }
.app-header-center {
justify-self: center;
color: var(--banner-fg);
font-weight: 700;
font-size: 0.86rem;
letter-spacing: 0.02em;
text-align: center;
}
.app-header-right { justify-self: end; display: flex; align-items: center; gap: 0.65rem; }
/* Engagement label — small, muted, sits just left of the client logo.
Hidden below ~640px so the header doesn't crowd the wordmark on mobile. */
.app-engagement {
font-size: 0.72rem;
font-weight: 600;
color: var(--banner-fg, #4a4a4a);
letter-spacing: 0.02em;
white-space: nowrap;
opacity: 0.85;
}
/* Engagement switcher — allowlist-gated dropdown next to the program label.
Hidden on narrow viewports along with the program label so the header
stays clean on mobile. Amber underline when guidehouse is active so the
3 internal users notice the non-default state at a glance. */
.engagement-sep {
font-size: 0.72rem;
color: var(--banner-fg, #4a4a4a);
opacity: 0.4;
}
.engagement-switcher { margin: 0; padding: 0; display: inline-flex; }
.engagement-switcher select {
font-family: inherit;
font-size: 0.72rem;
font-weight: 600;
color: var(--banner-fg, #4a4a4a);
letter-spacing: 0.02em;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
padding: 0.18rem 0.42rem;
cursor: pointer;
opacity: 0.85;
appearance: auto;
}
.engagement-switcher select:hover { opacity: 1; border-color: rgba(0, 0, 0, 0.28); }
.engagement-switcher select:focus { outline: 2px solid var(--accent, #C25700); outline-offset: 1px; }
.engagement-switcher select[data-active="guidehouse"] {
border-color: rgba(194, 87, 0, 0.55);
background: rgba(194, 87, 0, 0.06);
opacity: 1;
}
@media (max-width: 640px) {
.app-engagement,
.engagement-sep,
.engagement-switcher { display: none; }
}
.app-title { text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; }
.app-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 7px;
background: var(--accent);
color: #fff;
flex: 0 0 auto;
box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.app-mark svg { width: 16px; height: 16px; }
.app-title-text { display: inline-flex; align-items: baseline; line-height: 1.1; }
/* Wordmark — split "Prime" (light, muted) from "TDAP" (medium, accent).
Per Bhupinder 2026-05-18 — the 800-weight + uppercase tracking was
too loud; refined to 400 + 600 with no letter-spacing flare. */
.app-title-main { font-size: 1.12rem; letter-spacing: 0; }
.app-title-prime { font-weight: 400; color: #64748b; }
.app-title-tdap { font-weight: 600; color: var(--accent); }
.app-title-sub { color: var(--muted); font-size: 0.82rem; margin-left: 0.5rem; font-weight: 400; }
.app-logo { height: 30px; width: auto; max-width: 200px; object-fit: contain; display: block; }
/* ── App sub-header — 2nd row: the selected person/meeting ── */
.app-subheader {
flex: 0 0 auto;
display: flex;
align-items: baseline;
gap: 1rem;
padding: 0.32rem 1.1rem;
background: #f8fafc;
border-bottom: 1px solid var(--rule);
font-size: 0.82rem;
color: var(--muted);
position: relative;
z-index: 99;
}
.app-subheader:empty { display: none; }
.app-subheader strong { color: var(--text); }
.app-subheader .ctx-role { color: var(--muted); }
.app-subheader .ctx-meeting { margin-left: auto; color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── App footer — Primus logo · copyright · version ── */
.app-footer {
flex: 0 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding: 0.45rem 1.1rem;
background: #fbfbfc;
color: var(--muted);
font-size: 0.74rem;
border-top: 1px solid var(--rule);
position: relative;
z-index: 100;
min-height: 50px;
}
.app-footer .app-logo-primus { height: 30px; max-width: 220px; justify-self: start; }
.app-footer-copy { letter-spacing: 0.01em; justify-self: center; text-align: center; }
.app-footer-version { justify-self: end; font-family: ui-monospace, monospace; color: #475569; }
/* ── Diagonal DRAFT watermark (privilege-defense) ───────────────── */
.watermark {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
user-select: none;
font-size: clamp(8rem, 22vw, 18rem);
font-weight: 800;
color: var(--watermark-color);
transform: rotate(-30deg);
}
/* ── App grid (Outlook/Teams 4-col layout) ──────────────────────── */
.app-grid {
flex: 1;
display: grid;
grid-template-columns: 68px 340px minmax(0, 1fr);
min-height: 0;
position: relative;
z-index: 2;
}
.app-grid.with-right-rail {
--rail-width: 420px;
grid-template-columns: 68px 340px minmax(0, 1fr) var(--rail-width);
}
/* Pages without a subitems rail (Home + Process). Drops the 340px column
so the main content gets the room. */
.app-grid.no-subitems { grid-template-columns: 68px minmax(0, 1fr); }
.app-grid.no-subitems.with-right-rail {
grid-template-columns: 68px minmax(0, 1fr) var(--rail-width);
}
/* Docs layout — resizable subitems rail + drag handle + main preview pane.
--docs-rail-width is set on the grid by JS (saved to localStorage). */
.app-grid.docs-layout {
--docs-rail-width: 460px;
grid-template-columns: 68px var(--docs-rail-width) 6px minmax(0, 1fr);
}
.docs-rail-resize {
background: transparent;
border-left: 1px solid var(--rule);
cursor: col-resize;
user-select: none;
}
.docs-rail-resize:hover { background: rgba(77, 141, 246, 0.12); }
.app-grid.docs-layout.docs-resizing .docs-rail-resize { background: rgba(77, 141, 246, 0.18); }
.app-grid.right-rail-maximized {
grid-template-columns: 1fr !important;
}
.app-grid.right-rail-maximized > .menu-rail,
.app-grid.right-rail-maximized > .subitems-rail,
.app-grid.right-rail-maximized > .main-content {
display: none;
}
/* ── Menu rail (column 1) ───────────────────────────────────────── */
.menu-rail {
background: var(--rail-bg);
color: var(--rail-fg);
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0.4rem 0.3rem;
overflow-y: auto;
border-right: 1px solid var(--rule);
z-index: 3;
}
.menu-item, .menu-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.18rem;
padding: 0.5rem 0.2rem;
margin: 0.12rem 0.04rem;
text-decoration: none;
color: var(--rail-fg);
font-size: 0.64rem;
letter-spacing: 0.01em;
border-radius: 6px;
text-align: center;
cursor: pointer;
transition: background 0.13s, color 0.13s;
}
.menu-icon {
width: 21px;
height: 21px;
display: block;
color: inherit;
}
.menu-label { font-weight: 500; }
.menu-item:hover { background: var(--rail-hover-bg); }
.menu-item.active {
background: var(--rail-active-bg);
color: var(--accent);
position: relative;
}
.menu-item.active::before {
content: '';
position: absolute;
left: 0; top: 7px; bottom: 7px;
width: 3px;
border-radius: 0 2px 2px 0;
background: var(--accent);
}
.menu-spacer { flex: 1; }
.menu-user {
cursor: default;
color: var(--rail-fg-muted);
}
.menu-user:hover { background: transparent; }
.menu-tier {
text-align: center;
font-size: 0.58rem;
color: var(--rail-fg-muted);
opacity: 0.8;
margin: 0 0.15rem 0.35rem;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
overflow-wrap: anywhere;
line-height: 1.15;
}
/* CRTA tier = the external/client view — distinct colour, no alarm icon */
.menu-tier.tier-conduent {
color: #b45309;
opacity: 1;
font-weight: 700;
}
/* Banner shown app-wide when viewing as a CRTA user */
.app-conduent-notice {
flex: 0 0 auto;
background: #fffbeb;
border-bottom: 1px solid #fcd34d;
color: #92400e;
font-size: 0.82rem;
padding: 0.4rem 1.1rem;
text-align: center;
}
.app-conduent-notice strong { color: #78350f; }
/* ── Update notifier banner ─────────────────────────────────────────
Shown by base.html JS when /api/version reports a newer build than the
one that rendered the current page. Visually distinct from the yellow
CRTA-notice banner (which is informational, always-on for that
tier) — the update banner is action-oriented: dismiss or refresh. */
.app-update-banner {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 10002;
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.55rem 1.1rem;
background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%);
color: #fff;
font-size: 0.86rem;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
animation: app-update-slide-in 0.25s ease-out;
}
.app-update-banner[hidden] { display: none; }
.app-update-msg { flex: 1; line-height: 1.4; }
.app-update-btn {
background: #fff; color: #1e3a8a;
border: 0; padding: 0.35rem 0.85rem;
font-size: 0.82rem; font-weight: 600;
border-radius: 3px; cursor: pointer;
font-family: inherit;
}
.app-update-btn:hover { background: #f1f5f9; }
.app-update-dismiss {
background: transparent; color: #fff;
border: 1px solid rgba(255,255,255,0.4);
width: 1.8rem; height: 1.8rem;
border-radius: 3px; cursor: pointer;
font-size: 1.1rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
font-family: inherit;
}
.app-update-dismiss:hover { background: rgba(255,255,255,0.12); }
.app-update-dismiss[hidden] { display: none; }
/* Push the rest of the page down when banner is visible so it doesn't
cover the app header. */
body.has-update-banner .app-header { margin-top: 2.45rem; }
@keyframes app-update-slide-in {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ── Sub-items rail (column 2) ──────────────────────────────────── */
.subitems-rail {
background: var(--subrail-bg);
border-right: 1px solid var(--rule);
overflow-y: auto;
padding: 0.5rem 0;
}
.subitems-rail h2.rail-title {
font-size: 1.05rem;
margin: 0.25rem 1rem 0.6rem;
color: var(--text);
font-weight: 600;
}
.subitems-toolbar {
padding: 0.5rem 0.75rem 0.6rem;
border-bottom: 1px solid var(--rule);
margin-bottom: 0.4rem;
background: white;
position: sticky;
top: 0;
z-index: 2;
}
.subitems-toolbar input[type="search"] {
width: 100%;
padding: 0.4rem 0.6rem;
border: 1px solid var(--rule);
border-radius: 4px;
font-size: 0.86rem;
font-family: inherit;
background: var(--subrail-bg);
}
.subitems-toolbar input[type="search"]:focus {
outline: none;
border-color: var(--accent);
background: white;
}
.upload-trigger {
margin-top: 0.45rem;
width: 100%;
padding: 0.4rem 0.6rem;
background: var(--accent);
color: white;
border: none;
border-radius: 4px;
font-size: 0.84rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.upload-trigger:hover { background: #1e3a8a; }
/* ── Upload modal ─────────────────────────────────────────────── */
.upload-modal {
border: none;
border-radius: 8px;
padding: 0;
width: min(92vw, 560px);
max-height: 90vh;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
overflow: hidden;
}
.upload-modal::backdrop {
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(2px);
}
.upload-modal form {
display: flex;
flex-direction: column;
max-height: 90vh;
}
.upload-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid var(--rule);
background: var(--panel-bg);
flex-shrink: 0;
}
.upload-header h2 {
margin: 0;
font-size: 1.1rem;
color: var(--text);
}
.upload-close {
background: transparent;
border: none;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
color: var(--muted);
padding: 0 0.4rem;
}
.upload-close:hover { color: var(--text); }
.upload-body {
padding: 1rem 1.25rem;
overflow-y: auto;
flex: 1;
}
.upload-fs {
border: 1px solid var(--rule);
border-radius: 5px;
padding: 0.7rem 0.95rem 0.85rem;
margin: 0 0 0.9rem;
}
.upload-fs legend {
padding: 0 0.4rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.upload-fs label {
display: block;
margin: 0.4rem 0;
font-size: 0.92rem;
color: var(--text);
}
.upload-fs label.upload-disabled {
color: var(--muted);
cursor: not-allowed;
}
.upload-fs label em {
color: var(--muted);
font-size: 0.85em;
}
.upload-fs input[type="text"],
.upload-fs input[type="date"],
.upload-fs input[type="time"],
.upload-fs input[type="number"],
.upload-fs select,
.upload-fs input[type="file"] {
display: block;
width: 100%;
margin-top: 0.25rem;
padding: 0.4rem 0.55rem;
font-size: 0.92rem;
font-family: inherit;
border: 1px solid var(--rule);
border-radius: 4px;
background: white;
}
.upload-fs select:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.upload-hint {
margin: 0.5rem 0 0;
font-size: 0.78rem;
color: var(--muted);
}
.upload-row {
display: flex;
gap: 0.85rem;
}
.upload-row > label {
flex: 1;
margin: 0.4rem 0;
}
.upload-fs-hint {
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--muted);
font-size: 0.74rem;
margin-left: 0.4rem;
}
/* Multi-file picker — list of selected files with auto-detected role + source */
.upload-file-list {
list-style: none;
margin: 0.7rem 0 0;
padding: 0;
display: grid;
gap: 0.4rem;
}
.upload-file-list li {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.7rem;
background: var(--panel-bg);
border-radius: 4px;
font-size: 0.82rem;
}
.upload-file-list .ufl-name {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 0.78rem;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upload-file-list .ufl-tag {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1px 7px;
border-radius: 999px;
background: var(--rail-bg);
color: var(--rail-fg);
}
.upload-file-list .ufl-tag.ufl-tag-primary { background: rgba(30, 64, 175, 0.12); color: var(--accent); }
.upload-file-list .ufl-size {
font-size: 0.74rem;
color: var(--rail-fg-muted);
}
.tier-warning {
margin: 0 0 0.9rem;
padding: 0.7rem 0.95rem;
background: #fffbeb;
border-left: 4px solid #d97706;
border-radius: 0 4px 4px 0;
font-size: 0.86rem;
color: #78350f;
line-height: 1.5;
}
.tier-warning.hidden { display: none; }
.tier-warning code {
background: rgba(217, 119, 6, 0.15);
color: #78350f;
}
.upload-footer {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
align-items: center;
padding: 0.75rem 1.25rem;
border-top: 1px solid var(--rule);
background: var(--panel-bg);
flex-shrink: 0;
}
.upload-status {
flex: 1;
font-size: 0.86rem;
}
.upload-ok { color: #166534; font-weight: 600; }
.upload-error { color: #b91c1c; }
/* All footer buttons share the EXACT same box — only the colour scheme differs */
.upload-footer .btn-secondary,
.upload-footer .btn-primary,
#upload-submit, #upload-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.1rem;
padding: 0 1.1rem;
font-size: 0.92rem;
font-weight: 600;
line-height: 1;
border: 1px solid transparent;
border-radius: 5px;
cursor: pointer;
box-sizing: border-box;
}
.upload-footer .btn-secondary, #upload-cancel {
background: white;
color: var(--muted);
border-color: var(--rule);
font-weight: 500;
}
.upload-footer .btn-secondary:hover, #upload-cancel:hover { color: var(--text); border-color: var(--muted); }
.upload-footer .btn-primary, #upload-submit {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.upload-footer .btn-primary:hover:not(:disabled), #upload-submit:hover:not(:disabled) { background: #1e3a8a; border-color: #1e3a8a; }
.upload-footer .btn-primary:disabled, #upload-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.subitems-group {
margin-bottom: 0.8rem;
}
.subitems-group h4 {
margin: 0.3rem 1rem 0.3rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--muted);
font-weight: 600;
}
.subitems-group ul {
list-style: none;
margin: 0;
padding: 0;
}
.subitems-group li a, .subitems-item {
display: block;
padding: 0.45rem 1rem;
text-decoration: none;
color: var(--text);
border-left: 3px solid transparent;
font-size: 0.88rem;
line-height: 1.3;
cursor: pointer;
transition: background 0.12s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.subitems-group li a:hover, .subitems-item:hover {
background: rgba(30, 64, 175, 0.04);
}
.subitems-group li a.active, .subitems-item.active {
background: white;
border-left-color: var(--accent);
font-weight: 600;
color: var(--accent);
}
.subitem-meta {
color: var(--muted);
font-size: 0.74rem;
font-weight: 400;
}
.subitems-empty {
padding: 1.5rem 1.25rem;
color: var(--muted);
font-size: 0.85rem;
font-style: italic;
}
/* ── Tree subitems (Sources: Sessions + Documents) ──────────────── */
.subitems-rail details { margin: 0; }
.subitems-rail details > summary {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 0.45rem;
}
.subitems-rail details > summary::-webkit-details-marker { display: none; }
.subitems-rail details > summary::marker { display: none; }
.tree-section > summary {
padding: 0.55rem 1rem;
font-size: 0.9rem;
font-weight: 700;
color: var(--text);
background: white;
border-bottom: 1px solid var(--rule);
}
.tree-section > summary::before {
content: '▶';
display: inline-block;
font-size: 0.55rem;
color: var(--muted);
transition: transform 0.15s;
width: 0.55rem;
}
.tree-section[open] > summary::before { transform: rotate(90deg); }
.tree-group { margin: 0; }
.tree-group > summary {
padding: 0.4rem 1rem 0.3rem 1.65rem;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
font-weight: 600;
}
.tree-group > summary::before {
content: '▸';
display: inline-block;
font-size: 0.6rem;
width: 0.55rem;
transition: transform 0.15s;
}
.tree-group[open] > summary::before { transform: rotate(90deg); }
.subitems-rail .count {
margin-left: auto;
font-size: 0.78rem;
color: var(--muted);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.subitems-rail .tree-group > ul {
list-style: none;
margin: 0;
padding: 0;
}
.subitems-rail .tree-group li a {
padding-left: 1.65rem;
}
/* Single-group people list (used by Sessions rail — no folder/header) */
.rail-people-list {
list-style: none;
margin: 0.4rem 0 0;
padding: 0;
}
.rail-people-list li a {
display: block;
padding: 0.35rem 0.85rem;
text-decoration: none;
color: var(--text);
border-left: 3px solid transparent;
font-size: 0.9rem;
line-height: 1.3;
transition: background 0.12s;
}
.rail-people-list li a:hover { background: #f1f5f9; }
.rail-people-list li a.active {
background: #e0f2fe;
border-left-color: var(--accent);
font-weight: 600;
}
/* Findings tree: items wrap (long dimension names), with a count chip */
.findings-tree > ul {
list-style: none;
margin: 0;
padding: 0;
}
.findings-tree li a {
display: block;
padding: 0.4rem 1rem 0.4rem 1.65rem;
text-decoration: none;
color: var(--text);
border-left: 3px solid transparent;
font-size: 0.88rem;
line-height: 1.35;
white-space: normal; /* wrap instead of truncate */
overflow: visible;
text-overflow: clip;
transition: background 0.12s;
}
.findings-tree li a:hover { background: rgba(30, 64, 175, 0.04); }
.findings-tree li a.active { background: white; border-left-color: var(--accent); font-weight: 600; color: var(--accent); }
.count-inline {
color: var(--muted);
font-size: 0.8em;
font-weight: 400;
margin-left: 0.2rem;
}
.encounter-section {
margin: 2rem 0;
padding-top: 1rem;
border-top: 2px solid var(--rule);
}
.encounter-section:first-of-type {
border-top: none;
padding-top: 0;
}
.encounter-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin-bottom: 0.4rem;
}
.encounter-header h2 {
margin: 0;
color: var(--accent);
}
.encounter-meta {
color: var(--muted);
font-size: 0.88rem;
}
.encounter-switcher {
width: 100%;
padding: 0.4rem 0.55rem;
border: 1px solid var(--rule);
border-radius: 4px;
font-size: 0.86rem;
background: white;
margin-top: 0.25rem;
}
/* ── Inline edit/delete actions ─────────────────────────────────── */
.page-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin: 0 0 0.4rem 0;
}
.page-header h1 { margin: 0; }
.action-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.action-btn {
background: transparent;
border: 1px solid var(--rule);
color: var(--muted);
border-radius: 3px;
padding: 0.18rem 0.6rem;
font-size: 0.78rem;
cursor: pointer;
margin-left: 0.4rem;
font-weight: 500;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.action-btn:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--panel-bg);
}
.action-btn-danger:hover {
color: #b91c1c;
border-color: #b91c1c;
background: #fef2f2;
}
.file-delete {
background: transparent;
border: none;
color: var(--muted);
cursor: pointer;
padding: 0 0.4rem;
font-size: 1rem;
line-height: 1;
margin-left: 0.3rem;
opacity: 0;
transition: opacity 0.15s, color 0.15s;
border-radius: 3px;
}
.rail-files li:hover .file-delete { opacity: 1; }
.file-delete:hover {
color: #b91c1c;
background: #fef2f2;
}
.tree-empty {
margin: 0.35rem 1rem 0.6rem 2rem;
font-size: 0.78rem;
color: var(--muted);
font-style: italic;
}
.tree-empty code {
font-style: normal;
font-size: 0.92em;
}
/* ── Main content (column 3) ────────────────────────────────────── */
.main-content {
background: white;
overflow-y: auto;
padding: 1.25rem 1.75rem 2.5rem;
position: relative;
}
/* Refined scale — tight ratio, restrained weights. Per ui_design_preferences:
"Beautiful UI is sophisticated, not screaming." H1 stays under ~1.2rem;
default weight 500 (medium), not 700 (bold). Use bold only for genuine
emphasis inside body text, not for whole headings. */
h1 { font-size: 1.2rem; font-weight: 500; margin-top: 0; margin-bottom: 0.4rem; color: #0f172a; letter-spacing: -0.005em; }
h2 { font-size: 1.02rem; font-weight: 500; margin-top: 1.4rem; color: var(--accent); }
h3 { font-size: 0.85rem; font-weight: 500; margin-top: 1.15rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
h4 { font-size: 0.84rem; font-weight: 500; margin: 0.85rem 0 0.25rem; color: #475569; }
.lede {
color: var(--muted);
font-size: 0.96rem;
margin: 0 0 1.25rem;
}
section.kv {
margin: 1.25rem 0;
padding: 0.85rem 1.1rem;
background: var(--panel-bg);
border-left: 3px solid var(--accent);
border-radius: 0 4px 4px 0;
}
section.kv dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.4rem 1.25rem;
margin: 0;
}
section.kv dt { font-weight: 600; color: var(--muted); }
section.kv ul, section.kv ol { padding-left: 1.25rem; margin: 0.4rem 0; }
section.kv li { margin-bottom: 0.35rem; }
.placeholder {
margin: 0.85rem 0 1.25rem;
padding: 0.85rem 1.1rem;
background: #fffbeb;
border-left: 3px solid #d97706;
border-radius: 0 4px 4px 0;
color: #92400e;
font-size: 0.92rem;
}
.placeholder-inline { color: #92400e; font-size: 0.88rem; }
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
background: var(--panel-bg);
padding: 0.08rem 0.35rem;
border-radius: 3px;
font-size: 0.9em;
}
table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { background: var(--panel-bg); font-weight: 600; color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:hover { background: var(--panel-bg); }
/* ── State chips ────────────────────────────────────────────────── */
.state-chip {
font-size: 0.72rem;
padding: 0.13rem 0.55rem;
border-radius: 999px;
border: 1px solid;
display: inline-block;
}
.state-draft { background: #fef3c7; border-color: #d97706; color: #92400e; }
.state-dhiraj-reviewed { background: #dbeafe; border-color: #2563eb; color: #1e40af; }
.state-counsel-approved { background: #dcfce7; border-color: #16a34a; color: #166534; }
/* ── Session header (in main content) ───────────────────────────── */
.session-title-row {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin-bottom: 0.25rem;
}
.session-title-meta {
color: var(--muted);
font-size: 0.88rem;
}
.meta-panel {
background: var(--panel-bg);
border: 1px solid var(--rule);
padding: 0.85rem 1.1rem;
border-radius: 4px;
margin: 0.5rem 0 1.25rem;
font-size: 0.92rem;
}
.meta-panel dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.35rem 1rem;
margin: 0;
}
.meta-panel dt { font-weight: 500; color: #64748b; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.meta-panel dd { font-size: 0.9rem; }
.meta-panel dd { margin: 0; }
.meta-panel ul { padding-left: 1.25rem; margin: 0.2rem 0; }
.role-edit-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 0;
margin-left: 0.4rem;
color: var(--muted);
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.role-edit-btn:hover { color: var(--accent); }
.role-edit-icon { width: 15px; height: 15px; display: block; }
#role-edit-form { display: inline-flex; align-items: center; gap: 0.3rem; }
#role-edit-input {
font-family: inherit; font-size: 0.88rem; padding: 0.2rem 0.4rem;
border: 1px solid var(--rule); border-radius: 4px; min-width: 16rem;
}
#role-edit-form .action-btn { margin-left: 0; }
/* ── Person page: 'Also appears in' reverse-index section ───────── */
.person-also-in {
margin: 1rem 0 1.5rem;
padding: 0.85rem 1.1rem;
background: #f8fafc;
border: 1px solid var(--rule);
border-left: 3px solid #94a3b8;
border-radius: 0 5px 5px 0;
}
.person-also-in h3 {
margin: 0 0 0.5rem;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
font-weight: 600;
}
.other-meetings-list { list-style: none; margin: 0; padding: 0; }
.other-meetings-list li { margin: 0.25rem 0; }
.other-meeting-link {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.3rem 0.55rem;
background: white;
border: 1px solid var(--rule);
border-radius: 4px;
text-decoration: none;
color: var(--text);
font-size: 0.88rem;
flex-wrap: wrap;
}
.other-meeting-link:hover { background: #eef2f7; border-color: var(--accent); }
.other-meeting-cat {
font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
color: #64748b; padding: 0.1rem 0.4rem; background: #e2e8f0; border-radius: 3px;
}
.other-meeting-date { font-family: monospace; color: var(--muted); font-size: 0.82rem; }
.other-meeting-title { font-weight: 500; color: #0f172a; }
.other-meeting-tag {
font-size: 0.7rem; padding: 0.05rem 0.35rem; border-radius: 3px;
background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd;
}
.other-meeting-tag.tag-restricted { background: #fef3c7; color: #6b5b1f; border-color: #f0d99c; }
.person-also-in-hint { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--muted); font-style: italic; }
/* ── Meeting list (Meetings / Management / VOC index pages) ─────── */
.meeting-index { margin-top: 1rem; }
.meeting-series { margin: 1.25rem 0 1.75rem; }
.meeting-series h2 {
margin: 0 0 0.5rem;
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #475569;
}
.meeting-series-count { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.meeting-list { list-style: none; margin: 0; padding: 0; }
.meeting-list-item { margin: 0.3rem 0; }
.meeting-list-link {
display: flex; align-items: center; gap: 0.7rem;
padding: 0.55rem 0.85rem;
text-decoration: none;
color: var(--text);
background: white;
border: 1px solid var(--rule);
border-radius: 5px;
transition: background 0.12s, border-color 0.12s;
flex-wrap: wrap;
}
.meeting-list-link:hover { background: #f1f5f9; border-color: var(--accent); }
.meeting-list-date { font-family: monospace; color: var(--muted); font-size: 0.85rem; min-width: 6.5rem; }
.meeting-list-title { flex: 1 1 auto; font-weight: 600; color: #0f172a; }
.meeting-list-meta { font-size: 0.78rem; color: var(--muted); }
.meeting-flag {
font-size: 0.7rem;
padding: 0 0.35rem;
border-radius: 2px;
font-weight: 400;
border: 1px solid transparent;
}
.flag-restricted { color: #92740a; border-color: #f0d99c; }
.flag-feed { color: #1e40af; border-color: #93c5fd; }
/* ── Meeting view (single meeting page) ─────────────────────────── */
.notes-banner {
margin: 1rem 0 1.25rem;
padding: 0.75rem 1rem;
background: #eff6ff;
border: 1px solid #b6d4f7;
border-left: 4px solid #2563eb;
border-radius: 0 5px 5px 0;
font-size: 0.9rem;
color: #14365c;
}
.notes-banner strong { color: #0f2f54; }
.attendee-chip {
display: inline-block;
margin: 0.1rem 0.3rem 0.1rem 0;
padding: 0.15rem 0.55rem;
background: #e2e8f0;
border-radius: 12px;
font-size: 0.8rem;
color: #334155;
}
.meeting-section { margin: 1.25rem 0 1.75rem; }
.meeting-section h3 { font-size: 1rem; margin: 0 0 0.6rem; }
.meeting-topic { margin: 0.6rem 0 1rem; padding: 0.5rem 0.85rem; background: #f8fafc; border-left: 3px solid #94a3b8; }
.meeting-topic h4 { margin: 0 0 0.3rem; font-size: 0.92rem; }
.topic-summary { font-size: 0.92rem; line-height: 1.55; }
.decisions-list, .actions-list, .risks-list { list-style: none; margin: 0; padding: 0; }
.decision, .action-item { padding: 0.4rem 0.6rem; margin: 0.3rem 0; background: #f8fafc; border-radius: 4px; }
.decision-text, .action-text { display: block; font-size: 0.93rem; color: #0f172a; }
.decision-meta, .action-meta, .risk-meta { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
.meeting-admin-bar {
display: flex; gap: 0.5rem; margin: 1.5rem 0;
padding: 0.75rem; background: #f8fafc; border: 1px solid var(--rule); border-radius: 5px;
flex-wrap: wrap;
}
/* ── Upload modal: attendee suggestion chips ─────────────────────── */
.upload-suggestions {
margin-top: 0.4rem;
font-size: 0.8rem;
}
.upload-suggestions > summary {
cursor: pointer;
color: var(--accent);
padding: 0.2rem 0;
list-style: none;
user-select: none;
}
.upload-suggestions > summary::-webkit-details-marker { display: none; }
.upload-suggestions > summary::before { content: "+ "; }
.upload-suggestions[open] > summary::before { content: "− "; }
.upload-chip-strip {
display: flex; flex-wrap: wrap; gap: 0.3rem;
margin-top: 0.3rem;
max-height: 8rem;
overflow-y: auto;
padding: 0.3rem;
background: #f8fafc;
border-radius: 4px;
}
.upload-chip {
font-size: 0.78rem;
padding: 0.18rem 0.55rem;
border: 1px solid var(--rule);
background: white;
color: var(--text);
border-radius: 12px;
cursor: pointer;
}
.upload-chip:hover { background: #eef2f7; border-color: var(--accent); color: var(--accent); }
/* ── Upload modal — 5-category branched ─────────────────────────── */
.upload-cat {
display: block;
padding: 0.4rem 0.5rem;
margin: 0.2rem 0;
border-radius: 4px;
cursor: pointer;
}
.upload-cat:hover { background: #f1f5f9; }
.upload-cat input[type="radio"]:checked + strong,
.upload-cat input[type="radio"]:checked ~ strong { color: var(--accent); }
.upload-checkbox {
display: flex; gap: 0.5rem; align-items: flex-start;
margin: 0.5rem 0;
padding: 0.5rem;
background: #f8fafc;
border-radius: 4px;
font-size: 0.88rem;
line-height: 1.45;
}
.upload-checkbox input[type="checkbox"] { margin-top: 0.2rem; flex: 0 0 auto; }
.upload-checkbox span { flex: 1 1 auto; }
/* ── Docs page download button ──────────────────────────────────── */
.docs-download {
margin-left: 0.6rem;
font-size: 0.78rem;
padding: 0.15rem 0.55rem;
background: var(--accent);
color: white;
text-decoration: none;
border-radius: 3px;
}
.docs-download:hover { background: #1d4ed8; }
/* ── Docs page — Mac-Finder list-view inside the subitems rail ─────────
Layout: search/upload toolbar (sticky on top) + horizontally-scrollable
tree with Name | Date Modified | Size | Kind columns. Drag-resize the
rail (handle between rail and main pane). Main pane is preview surface. */
.docs-rail {
display: flex;
flex-direction: column;
height: 100%;
background: white;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
.docs-rail-toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--rule);
background: #fafbfc;
}
.docs-rail-toolbar input[type="search"] { flex: 1 1 auto; }
.docs-rail-scroll {
flex: 1 1 auto;
overflow-x: auto; /* horizontal scroll when columns exceed rail width */
overflow-y: auto; /* vertical scroll for long file lists */
min-height: 0;
}
/* Finder list-view structure */
.finder-tree, .finder-children {
list-style: none;
margin: 0;
padding: 0;
/* Minimum width keeps all four columns visible; horizontal scroll kicks
in if the rail is narrower than this. */
min-width: 540px;
}
.finder-folder-item, .finder-file-item { margin: 0; padding: 0; }
/* Column header — sticky to the top of the scroll container */
.finder-col-header {
display: flex;
position: sticky;
top: 0;
z-index: 2;
padding: 0.3rem 0.6rem;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
font-size: 0.7rem;
font-weight: 500; /* fine, not bold */
color: #64748b;
min-width: 540px;
}
/* Cell layout — same widths shared between header rows + body rows */
.finder-cell {
display: inline-flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
flex: 0 0 auto;
}
.finder-cell-name { flex: 1 1 auto; min-width: 230px; gap: 0.3rem; }
.finder-cell-date { flex: 0 0 9.5rem; padding-right: 0.5rem; color: #64748b; }
.finder-cell-size { flex: 0 0 4.5rem; padding-right: 0.5rem; text-align: right; justify-content: flex-end; color: #64748b; font-variant-numeric: tabular-nums; }
.finder-cell-kind { flex: 0 0 9rem; padding-right: 0.5rem; color: #64748b; }
/* Row */
.finder-row {
display: flex;
align-items: center;
padding: 0.18rem 0.6rem;
font-size: 0.82rem;
font-weight: 400;
color: #1f2937;
cursor: default;
user-select: none;
border-radius: 0;
/* Indent name cell by depth — chevron + icon stay aligned across depths */
--indent: calc(var(--depth, 0) * 1rem);
}
.finder-row .finder-cell-name { padding-left: var(--indent); }
.finder-row:hover { background: #eef2f7; }
.finder-folder summary.finder-row { cursor: pointer; list-style: none; }
.finder-folder summary.finder-row::-webkit-details-marker { display: none; }
/* Chevron — rotates on [open] */
.finder-chevron {
flex: 0 0 auto;
width: 0.7rem;
display: inline-flex; align-items: center; justify-content: center;
color: #94a3b8;
font-size: 0.55rem;
transition: transform 0.12s ease;
}
.finder-chevron::before { content: "▶"; }
.finder-folder[open] > summary > .finder-cell-name > .finder-chevron { transform: rotate(90deg); }
/* Reserve the chevron's space on file rows so icons align under folder icons */
.finder-chevron-spacer {
flex: 0 0 auto;
width: 0.7rem;
display: inline-block;
}
/* Line-style folder + file icons — mono, single stroke color via
`currentColor` on the SVGs. Set the color here once for the whole tree. */
.finder-folder-icon, .finder-file-icon {
flex: 0 0 auto;
width: 18px; height: 18px;
display: inline-block;
color: #64748b; /* slate-500 — matches column header / muted text */
}
/* Faint emphasis on folders — same hue, slightly stronger so the row reads
as "container" without breaking mono. Comment out if you want fully flat. */
.finder-folder-icon { color: #475569; }
.finder-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
color: #1f2937;
font-weight: 400;
}
.finder-folder-row .finder-name { font-weight: 500; color: #0f172a; }
/* Download icon — appears on hover, fine and unobtrusive */
.finder-download {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 1.1rem; height: 1.1rem;
margin-left: 0.4rem;
border-radius: 3px;
color: #64748b;
text-decoration: none;
font-size: 0.78rem;
opacity: 0;
transition: opacity 0.1s, color 0.1s, background 0.1s;
}
.finder-row:hover .finder-download { opacity: 0.9; }
.finder-download:hover { color: var(--accent); background: #e0f2fe; opacity: 1; }
/* No vertical guide lines — simpler, more like Finder list view */
.finder-children { padding-left: 0; border-left: none; margin-left: 0; }
/* ── Meeting row variant — anchor wrapper for click-through ─────────── */
a.finder-row.meeting-row {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.finder-row.meeting-row:hover { background: #eef2f7; }
a.finder-row.meeting-row.finder-file-row-active {
background: #e0f2fe;
}
a.finder-row.meeting-row.finder-file-row-active .finder-name {
color: var(--accent);
font-weight: 500;
}
/* ── Meeting tier badges — minimal chips in the Tier column ──────────
Subdued, no fills; just a thin tinted border + matching text. The
visual weight should be lower than the meeting title, not compete. */
.meeting-tier-badge {
display: inline-block;
padding: 0 0.35rem;
font-size: 0.7rem;
font-weight: 400;
border-radius: 2px;
white-space: nowrap;
border: 1px solid transparent;
color: #64748b;
}
.meeting-tier-fenced { color: #92740a; border-color: #f0d99c; }
.meeting-tier-shareable { color: #166534; border-color: #bbf7d0; }
.meeting-tier-restricted { color: #991b1b; border-color: #fecaca; }
/* ── VOC analysis: dimension findings rendered in the middle pane ───── */
.dimensions-block { margin-top: 1.25rem; }
.dim-card {
background: #fff;
border: 1px solid var(--rule);
border-radius: 6px;
padding: 0.85rem 1rem;
margin-bottom: 0.7rem;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.dim-card-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.4rem;
}
.dim-card-header h4 {
margin: 0;
font-size: 0.95rem;
color: #0f172a;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.dim-rel-chip {
display: inline-block;
padding: 0 0.35rem;
font-size: 0.68rem;
font-weight: 400;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid transparent;
color: #64748b;
}
.dim-rel-chip-high { color: #b91c1c; border-color: #fecaca; }
.dim-rel-chip-medium { color: #92740a; border-color: #f0d99c; }
.dim-rel-chip-low { color: #64748b; border-color: #e2e8f0; }
.dim-summary {
margin: 0 0 0.55rem;
font-size: 0.92rem;
color: #334155;
line-height: 1.5;
}
.dim-findings {
margin: 0;
padding-left: 1.15rem;
list-style: disc;
color: #1e293b;
}
.dim-findings li {
margin-bottom: 0.4rem;
font-size: 0.9rem;
line-height: 1.5;
}
.dim-finding-meta {
display: inline-block;
margin-left: 0.3rem;
font-size: 0.78rem;
color: #64748b;
}
.weight-chip {
display: inline-block;
padding: 0 0.3rem;
font-size: 0.7rem;
font-weight: 500;
border-radius: 2px;
background: #f1f5f9;
color: #475569;
}
.weight-high { background: #fde68a; color: #854d0e; }
.weight-medium { background: #fef3c7; color: #92400e; }
.weight-low { background: #f1f5f9; color: #64748b; }
.other-findings-list {
list-style: disc;
padding-left: 1.15rem;
margin: 0.5rem 0;
}
.other-findings-list li { margin-bottom: 0.5rem; line-height: 1.5; }
.voices-block .voices-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.voices-list .voice {
border-left: 3px solid #cbd5e1;
padding: 0.4rem 0 0.4rem 0.85rem;
margin-bottom: 0.85rem;
}
.voices-list blockquote {
margin: 0 0 0.25rem;
font-style: italic;
color: #1e293b;
}
.voice-meta {
display: block;
font-size: 0.78rem;
color: #64748b;
}
/* ── Right-rail Notes tab (compact dimension view for VOC) ──────────── */
.vpane-notes.active {
display: block;
overflow-y: auto;
padding: 0.6rem 0.85rem 0.9rem;
font-size: 0.86rem;
line-height: 1.5;
}
.vpane-notes-summary {
font-size: 0.85rem;
color: #1e293b;
margin-bottom: 0.7rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid #e2e8f0;
}
.vpane-notes-summary p { margin: 0 0 0.4rem; }
.vpane-notes-dim {
border-bottom: 1px solid #f1f5f9;
padding: 0.45rem 0;
}
.vpane-notes-dim:last-child { border-bottom: none; }
.vpane-notes-dim > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: baseline;
gap: 0.45rem;
font-size: 0.83rem;
color: #0f2f54;
padding: 0.15rem 0;
}
.vpane-notes-dim > summary::-webkit-details-marker { display: none; }
.vpane-notes-dim > summary::before {
content: "›";
display: inline-block;
width: 0.6rem;
color: #94a3b8;
transition: transform 0.1s;
}
.vpane-notes-dim[open] > summary::before { transform: rotate(90deg); }
.vpane-notes-dim > summary strong { font-weight: 500; }
.vpane-notes-dim ul {
margin: 0.2rem 0 0.3rem;
padding-left: 1.1rem;
color: #334155;
font-size: 0.82rem;
}
.vpane-notes-dim li { margin-bottom: 0.35rem; line-height: 1.45; }
/* ── Main pane — preview placeholder ──────────────────────────────── */
.docs-preview-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
padding: 3rem 1rem;
color: var(--muted);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
.docs-preview-empty svg { margin-bottom: 1rem; }
.docs-preview-title {
font-size: 1rem;
font-weight: 500;
color: #475569;
margin: 0 0 0.4rem;
}
.docs-preview-hint {
font-size: 0.85rem;
color: #94a3b8;
max-width: 28rem;
line-height: 1.55;
margin: 0;
}
.docs-preview-glyph { font-family: -apple-system, system-ui, sans-serif; }
/* On the docs page, the main pane has no padding (full viewer area) */
.app-grid.docs-layout > .main-content {
padding: 0;
background: #f8fafc;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Inline preview pane (PDF in iframe / image in ![]()
/ text in ) */
.docs-preview {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
background: white;
}
.docs-preview-bar {
flex: 0 0 auto;
display: flex; align-items: center; gap: 0.6rem;
padding: 0.5rem 0.85rem;
background: linear-gradient(to bottom, #fafbfc, #eef1f5);
border-bottom: 1px solid var(--rule);
font-size: 0.85rem;
}
.docs-preview-back {
background: none; border: none; cursor: pointer;
font-size: 1.2rem; line-height: 1;
color: var(--muted); padding: 0 0.3rem;
}
.docs-preview-back:hover { color: var(--text); }
.docs-preview-name { flex: 1 1 auto; font-weight: 500; color: #0f172a; }
.docs-preview-download {
font-size: 0.78rem; padding: 0.2rem 0.6rem;
color: var(--accent); background: #e0f2fe; border-radius: 3px;
text-decoration: none;
}
.docs-preview-download:hover { background: var(--accent); color: white; }
.docs-preview-body {
flex: 1 1 auto;
min-height: 0;
background: #f1f5f9;
display: flex;
align-items: stretch;
justify-content: stretch;
overflow: auto;
}
.docs-preview-iframe { flex: 1 1 auto; width: 100%; height: 100%; border: none; background: white; }
.docs-preview-img { display: block; max-width: 100%; max-height: 100%; margin: auto; }
.docs-preview-pre {
flex: 1 1 auto;
margin: 0; padding: 1rem 1.2rem;
background: white;
font-family: -apple-system, "SF Mono", Menlo, monospace;
font-size: 0.85rem;
line-height: 1.55;
white-space: pre-wrap;
word-wrap: break-word;
}
.app-grid.docs-layout > .subitems-rail {
padding: 0; /* the docs-rail manages its own internal padding */
overflow: hidden; /* let docs-rail-scroll handle scroll */
}
/* ── Briefing strip inside chat rail ─────────────────────────────── */
.rail-briefing {
flex: 0 1 auto;
background: #fffdf7;
border-bottom: 1px solid #ebe4cc;
padding: 0.65rem 0.85rem 0.75rem;
overflow-y: auto;
/* No fixed cap — when the upper viewer is collapsed (Office-style toggle on
a tab), the briefing flexes upward to consume the freed vertical space. */
}
.rail-briefing-header {
display: flex; align-items: center; justify-content: space-between;
gap: 0.4rem; margin: 0 0 0.45rem;
flex-wrap: wrap;
}
.rail-briefing-header h5 {
margin: 0; font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em; color: #6b5b1f;
display: inline-flex; align-items: center; gap: 0.35rem;
}
.rail-briefing-meta {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.7rem; color: var(--muted); white-space: nowrap;
}
.rail-briefing-btn {
font-size: 0.72rem;
padding: 0.15rem 0.45rem;
border: 1px solid #c8b061;
border-radius: 3px;
background: #fff;
color: #6b5b1f;
cursor: pointer;
}
.rail-briefing-btn:hover:not(:disabled) { background: #fef7e0; }
.rail-briefing-btn:disabled { opacity: 0.55; cursor: default; }
.rail-briefing-btn-primary { background: #b58900; color: #fff; border-color: #b58900; }
.rail-briefing-btn-primary:hover:not(:disabled) { background: #9a7400; }
.rail-briefing-btn-danger { color: #b91c1c; border-color: #fca5a5; }
.rail-briefing-btn-danger:hover:not(:disabled) { background: #fee2e2; }
.rail-briefing-candidate {
margin: 0.3rem 0 0.5rem;
padding: 0.45rem 0.55rem;
background: #eef6ff;
border: 1px solid #b6d4f7;
border-radius: 3px;
font-size: 0.78rem; color: #14365c; line-height: 1.45;
}
.rail-briefing-candidate strong { color: #0f2f54; }
.rail-briefing-candidate-actions { display: inline-flex; gap: 0.3rem; margin-left: 0.4rem; }
.rail-briefing-candidate-note {
margin: 0 0 0.4rem; padding: 0.25rem 0.45rem;
background: #eef6ff; border-radius: 3px;
font-size: 0.72rem; font-style: italic; color: #14365c;
}
.rail-briefing-stale {
margin: 0.2rem 0 0.4rem;
padding: 0.3rem 0.5rem;
background: #fff7e6; border: 1px solid #f0d99c;
border-radius: 3px;
font-size: 0.74rem; color: #6b5b1f;
}
.rail-briefing-empty {
margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--muted);
}
.rail-briefing-body { margin-top: 0.25rem; }
.rail-briefing-q {
margin: 0; padding: 0.25rem 0;
border-bottom: 1px dashed #ebe4cc;
}
.rail-briefing-q:last-child { border-bottom: none; }
.rail-briefing-q > summary {
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
color: #4a3f17;
padding: 0.25rem 0;
list-style: none;
position: relative;
padding-left: 1rem;
outline: none;
}
.rail-briefing-q > summary::-webkit-details-marker { display: none; }
.rail-briefing-q > summary::before {
content: "▸";
position: absolute; left: 0; top: 0.3rem;
font-size: 0.7rem; color: #b58900;
transition: transform 0.15s ease;
}
.rail-briefing-q[open] > summary::before { transform: rotate(90deg); transform-origin: 0.18rem center; }
.rail-briefing-a {
margin: 0.25rem 0 0.4rem 1rem;
font-size: 0.82rem; line-height: 1.5; color: #1f2937;
}
.rail-briefing-a p { margin: 0 0 0.45rem; }
.rail-briefing-a p:last-child { margin-bottom: 0.25rem; }
.rail-briefing-a ul, .rail-briefing-a ol { margin: 0.3rem 0 0.5rem; padding-left: 1.2rem; }
.rail-briefing-a li { margin: 0.2rem 0; }
.rail-briefing-a .cite {
color: #8a6d1c; text-decoration: none;
border-bottom: 1px dotted #c8b061;
}
.rail-briefing-a .cite:hover { color: #6b5b1f; border-bottom-style: solid; }
.rail-briefing-followup {
margin: 0.1rem 0 0.4rem 1rem;
font-size: 0.7rem;
padding: 0.12rem 0.4rem;
border: 1px dashed #c8b061;
border-radius: 3px;
background: transparent;
color: #6b5b1f;
cursor: pointer;
}
.rail-briefing-followup:hover { background: #fef7e0; border-style: solid; }
/* ── Briefing panel (legacy — main-pane version, unused after rail move) ── */
.briefing-panel {
margin: 1.25rem 0 2rem;
padding: 1.1rem 1.4rem 1.3rem;
background: #fffdf7;
border: 1px solid #f0e6c8;
border-left: 4px solid #b58900;
border-radius: 0 6px 6px 0;
}
.briefing-header {
display: flex; align-items: center; justify-content: space-between;
gap: 0.75rem; margin: 0 0 0.4rem;
flex-wrap: wrap;
}
.briefing-header h2 {
margin: 0; font-size: 1rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; color: #6b5b1f;
}
.briefing-meta {
display: inline-flex; align-items: center; gap: 0.55rem;
font-size: 0.78rem; color: var(--muted);
}
.briefing-meta .action-btn { margin-left: 0.4rem; }
.briefing-stale {
margin: 0.2rem 0 0.6rem;
padding: 0.4rem 0.7rem;
background: #fff7e6; border: 1px solid #f0d99c;
border-radius: 4px;
font-size: 0.85rem; color: #6b5b1f;
}
.briefing-candidate-banner {
margin: 0.4rem 0 0.9rem;
padding: 0.65rem 0.9rem;
background: #eef6ff; border: 1px solid #b6d4f7;
border-radius: 5px;
font-size: 0.9rem; line-height: 1.55; color: #14365c;
}
.briefing-candidate-banner strong { color: #0f2f54; }
.briefing-candidate-actions {
display: inline-flex; gap: 0.4rem; margin-left: 0.5rem;
}
.briefing-candidate-note {
margin: 0 0 0.8rem;
padding: 0.3rem 0.55rem;
background: #eef6ff;
border-radius: 3px;
font-size: 0.82rem; color: #14365c;
font-style: italic;
}
.briefing-body { margin-top: 0.6rem; }
.briefing-q {
margin: 0 0 1.05rem;
padding-bottom: 0.85rem;
border-bottom: 1px dashed #ebe4cc;
}
.briefing-q:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.briefing-q h3 {
margin: 0 0 0.4rem;
font-size: 0.95rem;
font-weight: 600;
color: #4a3f17;
}
.briefing-a { font-size: 0.94rem; line-height: 1.6; color: #1f2937; }
.briefing-a p { margin: 0 0 0.6rem; }
.briefing-a p:last-child { margin-bottom: 0; }
.briefing-a ul, .briefing-a ol { margin: 0.3rem 0 0.7rem; padding-left: 1.4rem; }
.briefing-a li { margin: 0.25rem 0; }
.briefing-a .cite {
color: #8a6d1c; text-decoration: none;
border-bottom: 1px dotted #c8b061;
}
.briefing-a .cite:hover { color: #6b5b1f; border-bottom-style: solid; }
.briefing-empty {
margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--muted);
}
/* ── Session summary ───────────────────────────────────────────── */
.session-summary {
margin: 1rem 0 1.5rem;
padding: 1rem 1.3rem;
background: #f0f9ff;
border-left: 4px solid var(--accent);
border-radius: 0 6px 6px 0;
font-size: 0.96rem;
line-height: 1.65;
color: #0f172a;
}
.session-summary h3 {
margin: 0 0 0.55rem;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.summary-content p { margin: 0 0 0.7rem; }
.summary-content p:last-child { margin-bottom: 0; }
.summary-content ul, .summary-content ol { margin: 0.4rem 0 0.85rem; padding-left: 1.5rem; }
.summary-content li { margin: 0.3rem 0; }
.summary-content strong { color: #0f172a; }
/* ── Analysis (per-dimension) ──────────────────────────────────── */
.analysis { margin: 1.25rem 0 2rem; }
.analysis-meta {
font-size: 0.82rem;
color: var(--muted);
margin: 0 0 0.85rem;
}
/* Per-artifact version provenance — appears under the page title on every
primary content page (findings, recommendations, insights, levers). The
timestamp is wall-clock Eastern year-round per project convention. Keep
muted + small so it reads as audit metadata, not page copy. */
.page-version {
font-size: 0.75rem;
color: var(--muted);
margin: -0.4rem 0 0.85rem;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
opacity: 0.85;
}
.dimension {
margin: 0.65rem 0;
padding: 0.75rem 1rem;
background: var(--panel-bg);
border-left: 4px solid;
border-radius: 0 4px 4px 0;
}
.dim-high { border-left-color: #dc2626; }
.dim-medium { border-left-color: #f59e0b; }
.dim-low { border-left-color: #6b7280; }
.dim-none { border-left-color: #d1d5db; opacity: 0.65; }
.dim-header {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.4rem;
}
.dim-header h4 { margin: 0; color: var(--text); font-size: 0.99rem; }
.dim-summary { margin: 0.35rem 0 0.55rem; color: #1f2937; }
.rel-chip {
font-size: 0.66rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
color: white;
}
.rel-high { background: #dc2626; }
.rel-medium { background: #f59e0b; }
.rel-low { background: #6b7280; }
.rel-none { background: #d1d5db; color: #374151; }
ul.findings, ul.other-findings, ul.quotes {
margin: 0.4rem 0;
padding-left: 1.25rem;
}
ul.findings li, ul.other-findings li, ul.quotes li {
margin: 0.45rem 0;
}
.finding-text { color: #1f2937; }
.finding-meta {
font-size: 0.74rem;
color: var(--muted);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
margin-left: 0.4rem;
white-space: nowrap;
}
ul.other-findings li p { margin: 0.2rem 0 0; color: #1f2937; }
ul.quotes li { list-style: none; margin-bottom: 1.1rem; }
.quotes blockquote {
margin: 0;
padding: 0.55rem 1rem;
border-left: 3px solid var(--accent);
background: #f0f9ff;
font-style: italic;
color: #0f172a;
}
.quote-attr { font-size: 0.84rem; color: var(--muted); margin: 0.3rem 0 0.15rem; }
.quote-why { font-size: 0.84rem; color: var(--muted); margin: 0.15rem 0 0; }
.people-mentioned { display: flex; gap: 2rem; flex-wrap: wrap; }
.pm-group { flex: 1 1 18rem; min-width: 0; }
.pm-group h5 {
margin: 0 0 0.3rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
}
.pm-group ul { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.pm-group li { margin-bottom: 0.35rem; line-height: 1.45; }
.pm-context { color: var(--muted); }
/* ── Findings page (cross-session synthesis) ───────────────────── */
.findings-dim {
margin: 1.5rem 0 2.5rem;
padding-top: 0.4rem;
border-top: 2px solid var(--rule);
}
.findings-dim:first-of-type {
border-top: none;
margin-top: 0.5rem;
padding-top: 0;
}
.dim-summary-content {
margin: 0.4rem 0 1rem;
font-size: 0.96rem;
line-height: 1.65;
}
.dim-summary-content p { margin: 0 0 0.7rem; }
.dim-summary-content p:last-child { margin-bottom: 0; }
.finding-card {
margin: 0.85rem 0 1.5rem;
padding: 0.85rem 1.05rem;
background: white;
border: 1px solid var(--rule);
border-radius: 5px;
scroll-margin-top: 4rem;
}
.finding-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0.4rem;
}
.finding-header h4 {
margin: 0;
color: var(--text);
font-size: 0.98rem;
flex: 1;
line-height: 1.35;
}
.strength-chip {
font-size: 0.65rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
white-space: nowrap;
border: 1px solid;
flex-shrink: 0;
}
.strength-triangulated-high { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.strength-triangulated-medium { background: #fffbeb; border-color: #d97706; color: #92400e; }
.strength-single-high { background: #fef3c7; border-color: #ca8a04; color: #854d0e; }
.strength-single-medium { background: #f1f5f9; border-color: #6b7280; color: #4b5563; }
.finding-body {
margin: 0.45rem 0 0.65rem;
font-size: 0.94rem;
line-height: 1.62;
color: #1f2937;
}
.finding-body p { margin: 0 0 0.5rem; }
.finding-body p:last-child { margin-bottom: 0; }
ul.evidence {
list-style: none;
margin: 0.55rem 0;
padding: 0.55rem 0.9rem;
background: var(--panel-bg);
border-radius: 4px;
font-size: 0.88rem;
}
ul.evidence li {
margin: 0.35rem 0;
padding-left: 0.5rem;
border-left: 2px solid var(--accent);
line-height: 1.5;
}
.evidence-link {
text-decoration: none;
color: var(--accent);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.94em;
font-weight: 600;
}
.evidence-link:hover { text-decoration: underline; }
.implication {
margin: 0.7rem 0 0;
padding: 0.55rem 0.85rem;
background: #f0f9ff;
border-left: 3px solid var(--accent);
border-radius: 0 4px 4px 0;
font-size: 0.9rem;
color: #1f2937;
}
.implication strong { color: var(--accent); }
.implication p { margin: 0; display: inline; }
/* ── Citation links (in main + chat) ───────────────────────────── */
.cite {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.85em;
color: var(--accent);
text-decoration: none;
background: rgba(30, 64, 175, 0.08);
padding: 0.05rem 0.4rem;
border-radius: 3px;
white-space: nowrap;
}
.cite:hover { background: rgba(30, 64, 175, 0.18); text-decoration: underline; }
/* ── Right rail (column 4, session views only) ─────────────────── */
.right-rail {
background: var(--rightrail-bg);
border-left: 1px solid var(--rule);
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
position: relative;
}
.rail-resize-handle {
position: absolute;
left: -3px;
top: 0;
bottom: 0;
width: 6px;
cursor: ew-resize;
z-index: 5;
background: transparent;
transition: background 0.15s;
}
.rail-resize-handle:hover,
.rail-resize-handle:active {
background: rgba(30, 64, 175, 0.4);
}
.rail-toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0.35rem 0.55rem;
background: white;
border-bottom: 1px solid var(--rule);
flex: 0 0 auto;
}
.rail-toolbar-btn {
background: transparent;
border: 1px solid var(--rule);
border-radius: 3px;
padding: 0.18rem 0.55rem;
font-size: 1rem;
cursor: pointer;
color: var(--muted);
line-height: 1;
}
.rail-toolbar-btn:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--panel-bg);
}
.rail-panel {
border-bottom: 1px solid var(--rule);
padding: 0.7rem 1rem;
background: white;
}
.rail-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.4rem;
}
.rail-panel h4 {
margin: 0;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
font-weight: 600;
}
.rail-files ul, .rail-files .files-list {
list-style: none;
margin: 0;
padding: 0;
}
.rail-files li {
font-size: 0.84rem;
padding: 0.18rem 0;
color: var(--text);
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
}
/* ── Inline line icons ──────────────────────────────────────────── */
.ui-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; color: currentColor; flex: 0 0 auto; }
.h-icon { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; margin-right: 0.32rem; color: currentColor; }
.tree-icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 0.3rem; color: var(--muted); }
.file-icon { width: 15px; height: 15px; display: inline-flex; align-items: center; color: var(--muted); flex: 0 0 auto; }
.file-icon svg { width: 15px; height: 15px; }
.file-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-ext {
color: var(--muted);
font-family: ui-monospace, monospace;
font-size: 0.78rem;
}
.file-size {
color: var(--muted);
font-size: 0.74rem;
font-family: ui-monospace, monospace;
flex: 0 0 auto;
}
.files-empty-hint {
font-size: 0.78rem;
color: var(--muted);
margin: 0.2rem 0 0.4rem 0;
font-style: italic;
}
.files-system {
margin-top: 0.3rem;
border-top: 1px dashed var(--rule);
padding-top: 0.3rem;
}
.files-system summary {
cursor: pointer;
font-size: 0.78rem;
color: var(--muted);
padding: 0.15rem 0;
user-select: none;
}
.files-system summary:hover { color: var(--text); }
.files-system[open] summary { color: var(--text); margin-bottom: 0.2rem; }
.rail-no-recording {
color: var(--muted);
font-size: 0.84rem;
font-style: italic;
padding: 0.5rem 1rem;
}
/* ── Right-rail two-half layout: viewer (top) + chat (bottom) ── */
.rail-meeting-switcher {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.6rem;
background: white;
border-bottom: 1px solid var(--rule);
font-size: 0.82rem;
color: var(--muted);
}
.rail-meeting-switcher select {
flex: 1;
font-family: inherit;
font-size: 0.82rem;
padding: 0.2rem 0.3rem;
border: 1px solid var(--rule);
border-radius: 4px;
}
/* ── Right rail — single app section, four tabs.
Layout modes (set on data-layout):
- "full" : top fills rail (default for key-questions/transcript/files)
- "split" : top + bottom (chat) at 50/50 (default for video; also
forced when a citation in chat triggers Video/Transcript)
- "chat-full" : chat fills rail, top hidden (default for chat tab)
Active rpane in top is determined by data-tab.
─────────────────────────────────────────────────────────────────── */
.rail-app {
flex: 1 1 0;
display: flex;
flex-direction: column;
background: white;
overflow: hidden;
height: 100%;
min-height: 0;
}
.rail-tabs {
flex: 0 0 auto;
display: flex;
align-items: stretch;
height: 32px;
padding: 0 0.4rem 0 0;
background: #f8fafc;
border-bottom: 1px solid var(--rule);
}
.vtab {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: 0 0.85rem;
font-size: 0.82rem;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
color: var(--muted);
cursor: pointer;
display: inline-flex;
align-items: center;
}
.vtab:hover { color: var(--text); }
.vtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.vtab-spacer { flex: 1; }
.rail-tabs .rail-toolbar-btn { align-self: center; }
.rail-top {
flex: 1 1 auto;
min-height: 0;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.rail-bottom {
flex: 0 0 0;
min-height: 0;
overflow: hidden;
border-top: 1px solid var(--rule);
display: none;
}
/* Layout modes */
.rail-app[data-layout="full"] .rail-top { flex: 1 1 100%; }
.rail-app[data-layout="full"] .rail-bottom { display: none; }
.rail-app[data-layout="chat-full"] .rail-top { display: none; }
.rail-app[data-layout="chat-full"] .rail-bottom { display: flex; flex-direction: column; flex: 1 1 100%; border-top: none; }
.rail-app[data-layout="split"] .rail-top { flex: 1 1 50%; }
.rail-app[data-layout="split"] .rail-bottom { display: flex; flex-direction: column; flex: 1 1 50%; }
/* rpanes — only the one matching data-tab is shown in the top */
.rpane { display: none; height: 100%; width: 100%; }
.rail-app[data-tab="key-questions"] .rpane[data-pane="key-questions"] { display: block; }
.rail-app[data-tab="tone"] .rpane[data-pane="tone"] { display: block; overflow-y: auto; padding: 0.55rem 0.85rem 0.85rem; }
.rail-app[data-tab="video"] .rpane[data-pane="video"] { display: flex; align-items: center; justify-content: center; background: #000; }
.rail-app[data-tab="transcript"] .rpane[data-pane="transcript"] { display: block; overflow-y: auto; padding: 0.6rem 1rem; }
.rail-app[data-tab="files"] .rpane[data-pane="files"] { display: block; overflow-y: auto; padding: 0.5rem 0.85rem; }
/* ── Tone tab — prosodic analysis of the audio. Card-list layout: each
moment shows speaker · timestamp · quote · observation · interpretation.
Timestamps render as a.cite which the existing handler routes to Video. */
.tone-section { margin: 0 0 0.85rem; }
.tone-section.tone-overall { padding: 0.55rem 0.7rem; background: #f7f5ef; border-radius: 8px; }
.tone-h {
font-size: 0.78rem; font-weight: 600; color: var(--fg);
margin: 0 0 0.35rem; letter-spacing: 0.01em;
text-transform: uppercase; opacity: 0.78;
}
.tone-section[open] > .tone-h,
details.tone-section > summary.tone-h { cursor: pointer; }
details.tone-section > summary.tone-h::-webkit-details-marker { display: none; }
details.tone-section > summary.tone-h::before {
content: '▸'; display: inline-block; margin-right: 0.3rem; font-size: 0.65rem;
opacity: 0.55; transition: transform 0.12s;
}
details.tone-section[open] > summary.tone-h::before { transform: rotate(90deg); opacity: 0.78; }
.tone-count { font-weight: 400; color: var(--fg-muted); margin-left: 0.2rem; }
.tone-line { margin: 0.25rem 0; font-size: 0.84rem; line-height: 1.5; color: var(--fg); }
.tone-line strong { font-weight: 600; }
.tone-baselines { white-space: pre-wrap; font-size: 0.8rem; color: var(--fg-muted); }
.tone-moments, .tone-topics { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.tone-moment, .tone-topic { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.tone-moment:last-child, .tone-topic:last-child { border-bottom: none; }
.tone-moment-head { font-size: 0.78rem; color: var(--fg-muted); margin-bottom: 0.2rem; }
.tone-speaker { color: var(--fg); font-weight: 500; }
.tone-quote {
margin: 0.25rem 0; padding: 0.2rem 0.55rem;
border-left: 2px solid var(--accent); font-style: italic;
font-size: 0.84rem; color: var(--fg); line-height: 1.45;
}
.tone-obs, .tone-interp { margin: 0.2rem 0; font-size: 0.8rem; line-height: 1.45; }
.tone-obs { color: var(--fg-muted); }
.tone-tag {
display: inline-block; font-size: 0.66rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--accent); margin-right: 0.3rem;
}
.tone-ts.cite { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
.tone-empty {
margin: 1.2rem 0.4rem; padding: 0.8rem 0.9rem;
background: var(--bg-card); border: 1px dashed var(--rule); border-radius: 8px;
font-size: 0.84rem; color: var(--fg-muted); line-height: 1.5;
}
.tone-empty code { background: rgba(0,0,0,0.04); padding: 0 0.25rem; border-radius: 3px; font-size: 0.78rem; }
.tone-admin { margin-top: 1.2rem; padding-top: 0.7rem; border-top: 1px solid var(--rule); }
.tone-share-toggle { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.84rem; cursor: pointer; }
.tone-share-toggle input { margin-top: 0.18rem; }
.tone-share-hint { margin: 0.45rem 0 0; font-size: 0.74rem; color: var(--fg-muted); line-height: 1.5; }
.tone-share-hint code { background: rgba(0,0,0,0.04); padding: 0 0.25rem; border-radius: 3px; font-size: 0.72rem; }
/* Pane-specific styling */
.rpane-key-questions {
overflow-y: auto;
padding: 0.55rem 0.85rem 0.85rem;
}
.rpane-key-questions .rail-briefing-header {
display: flex; align-items: baseline; justify-content: flex-end;
margin-bottom: 0.35rem;
}
.rpane-key-questions .rail-briefing-meta {
display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
}
.rpane-video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.rpane-video audio { width: 92%; }
.rpane-transcript { font-size: 0.86rem; line-height: 1.6; }
.rpane-transcript p { margin: 0.25rem 0 0.6rem; }
.rpane-transcript strong { color: var(--accent); }
.rpane-files .files-list { list-style: none; margin: 0; padding: 0; }
.file-row {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.24rem 0.3rem;
margin: 0.04rem 0;
font-size: 0.84rem;
color: var(--text);
border-radius: 4px;
cursor: pointer;
min-width: 0;
}
.file-row:hover { background: rgba(30, 64, 175, 0.06); }
.file-row:hover .file-delete { opacity: 1; }
.file-viewer { height: 100%; display: flex; flex-direction: column; }
.file-viewer-bar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0;
border-bottom: 1px solid var(--rule);
font-size: 0.78rem;
}
.file-viewer-back {
background: transparent;
border: 1px solid var(--rule);
border-radius: 3px;
padding: 0.1rem 0.45rem;
font-size: 0.74rem;
color: var(--accent);
cursor: pointer;
font-weight: 600;
}
.file-viewer-back:hover { background: var(--panel-bg); }
.file-viewer-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-viewer-body {
flex: 1 1 auto;
overflow: auto;
margin: 0.4rem 0 0;
padding: 0.5rem;
background: #f8fafc;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.74rem;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
/* Chat in right rail — lives in .rail-bottom (visibility controlled by
data-layout on the parent .rail-app). Internal layout: header, scrolling
history, sticky form at the bottom. */
.rail-chat {
display: flex;
flex-direction: column;
background: white;
height: 100%;
min-height: 0;
overflow: hidden;
}
.rail-chat .chat-history { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rail-chat .chat-form { flex: 0 0 auto; }
.rail-chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 1rem;
border-bottom: 1px solid var(--rule);
background: white;
}
.rail-chat-header h4 { margin: 0; }
.chat-clear {
background: transparent;
color: var(--muted);
border: 1px solid var(--rule);
border-radius: 3px;
padding: 0.18rem 0.55rem;
font-size: 0.74rem;
cursor: pointer;
white-space: nowrap;
}
.chat-clear:hover { color: #b91c1c; border-color: #b91c1c; background: #fef2f2; }
.chat-history {
flex: 1;
overflow-y: auto;
padding: 0.5rem 0.85rem;
margin: 0;
}
.chat-history .msg {
position: relative;
padding: 0.5rem 0.75rem;
margin: 0.3rem 0;
border-radius: 6px;
font-size: 0.88rem;
line-height: 1.55;
max-width: 95%;
}
.msg-body { white-space: normal; }
.msg-user .msg-body { white-space: pre-wrap; } /* preserve newlines the user typed */
.msg-delete {
position: absolute;
top: 2px;
right: 4px;
background: transparent;
border: none;
color: var(--muted);
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
padding: 0 0.2rem;
opacity: 0;
transition: opacity 0.12s;
}
.chat-history .msg:hover .msg-delete { opacity: 0.6; }
.msg-delete:hover { opacity: 1 !important; color: #b91c1c; }
.msg-user {
background: #f1f5f9;
border-left: 3px solid var(--muted);
margin-right: 0;
margin-left: auto;
}
.msg-assistant {
background: #f0f9ff;
border-left: 3px solid var(--accent);
}
.msg-assistant p { margin: 0.3rem 0; }
.msg-assistant ul, .msg-assistant ol { margin: 0.3rem 0; padding-left: 1.15rem; }
.msg-assistant strong { color: var(--accent); }
.chat-form {
display: flex;
gap: 0.4rem;
padding: 0.5rem 0.75rem 0.75rem;
border-top: 1px solid var(--rule);
}
.chat-form textarea {
flex: 1;
font-family: inherit;
font-size: 0.88rem;
padding: 0.45rem 0.6rem;
border: 1px solid var(--rule);
border-radius: 4px;
resize: none;
min-height: 2.4rem;
max-height: 5rem;
}
.chat-form button {
padding: 0 0.95rem;
font-size: 0.86rem;
font-weight: 600;
background: var(--accent);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.chat-form button:hover:not(:disabled) { background: #1e3a8a; }
.chat-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.chat-error {
color: #b91c1c;
background: #fef2f2;
padding: 0.35rem 0.7rem;
border-radius: 3px;
display: inline-block;
}
.muted { color: var(--muted); }
.ts-anchor {
display: block;
position: relative;
visibility: hidden;
height: 0;
}
/* ── Print ─────────────────────────────────────────────────────── */
@media print {
html, body { overflow: visible; height: auto; }
.menu-rail, .subitems-rail, .right-rail { display: none; }
.app-grid { grid-template-columns: 1fr; }
.banner { position: static; }
.watermark { position: fixed; }
.main-content { overflow: visible; }
}
/* ─────────────────────────────────────────────────────────────────────
Home page — light palette, refined typography (per ui_design_preferences).
No filled hero; thin tinted borders for chips; weight 500 for stat numbers.
───────────────────────────────────────────────────────────────────── */
.home-hero {
background: #f8fafc;
border: 1px solid var(--rule);
border-left: 3px solid var(--accent);
border-radius: 4px;
padding: 1rem 1.25rem;
margin: 0 0 1.25rem;
}
.home-hero-eyebrow {
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
margin: 0 0 0.35rem;
}
.home-hero-title {
font-size: 1.2rem;
font-weight: 500;
margin: 0 0 0.45rem;
color: #0f172a;
}
.home-hero-lede {
font-size: 0.92rem;
color: #334155;
line-height: 1.55;
margin: 0 0 0.7rem;
}
.home-hero-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hero-badge {
display: inline-block;
padding: 0.18rem 0.5rem;
font-size: 0.72rem;
font-weight: 400;
border-radius: 3px;
border: 1px solid transparent;
}
.hero-badge-privilege {
color: #92400e;
border-color: #f0d99c;
background: #fffaf0;
}
/* Stats row — 4 across, single number per card */
.home-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.65rem;
margin: 0 0 1.5rem;
}
.stat-card {
background: white;
border: 1px solid var(--rule);
border-radius: 5px;
padding: 0.85rem 0.95rem;
}
.stat-num {
font-size: 1.65rem;
font-weight: 500;
color: #0f172a;
line-height: 1.1;
margin-bottom: 0.15rem;
letter-spacing: -0.01em;
}
.stat-label {
font-size: 0.85rem;
color: #1e293b;
font-weight: 500;
margin-bottom: 0.2rem;
}
.stat-meta {
font-size: 0.74rem;
color: #64748b;
line-height: 1.35;
}
/* Section title — small caps, restrained */
.home-section-title {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
margin: 0 0 0.55rem;
}
/* Dimension cards — 7 cards, severity-coded left border */
.home-dims { margin: 0 0 1.5rem; }
.dim-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0.55rem;
}
.dim-card {
display: block;
background: white;
border: 1px solid var(--rule);
border-left: 3px solid #cbd5e1;
border-radius: 5px;
padding: 0.65rem 0.85rem 0.7rem;
text-decoration: none;
color: inherit;
transition: background 0.1s, border-color 0.1s;
}
.dim-card:hover { background: #f8fafc; border-color: #cbd5e1; border-left-color: var(--accent); }
.dim-card-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 0.25rem;
}
.dim-card-label {
font-size: 0.7rem;
font-weight: 500;
color: #64748b;
letter-spacing: 0.04em;
}
.sev-chip {
display: inline-block;
padding: 0 0.4rem;
font-size: 0.68rem;
font-weight: 400;
border-radius: 2px;
border: 1px solid transparent;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.sev-critical { color: #b91c1c; border-color: #fecaca; }
.sev-high { color: #92740a; border-color: #f0d99c; }
.sev-medium { color: #475569; border-color: #cbd5e1; }
.sev---- { color: #94a3b8; border-color: #e2e8f0; }
.dim-card.dim-sev-critical { border-left-color: #fecaca; }
.dim-card.dim-sev-high { border-left-color: #f0d99c; }
.dim-card.dim-sev-medium { border-left-color: #e2e8f0; }
.dim-card-name {
font-size: 0.92rem;
font-weight: 500;
color: #0f172a;
margin-bottom: 0.25rem;
}
.dim-card-desc {
font-size: 0.78rem;
color: #475569;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Bottom row — 2 panels (Top findings + Coverage) */
.home-bottom {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 0.85rem;
margin: 0 0 1.5rem;
}
.home-panel {
background: white;
border: 1px solid var(--rule);
border-radius: 5px;
padding: 0.7rem 0.95rem 0.85rem;
}
.home-panel-header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 0.4rem;
}
.home-panel-header h3 {
margin: 0;
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
}
.home-panel-link {
font-size: 0.78rem;
color: var(--accent);
text-decoration: none;
}
.home-panel-link:hover { text-decoration: underline; }
.top-findings-list { list-style: none; margin: 0; padding: 0; }
.top-finding {
display: flex; align-items: baseline; gap: 0.55rem;
padding: 0.4rem 0;
border-bottom: 1px solid #f1f5f9;
font-size: 0.85rem;
line-height: 1.45;
}
.top-finding:last-child { border-bottom: none; }
.top-finding-rank {
flex: 0 0 auto;
width: 6px; height: 6px; border-radius: 50%;
margin-top: 0.45rem;
background: #cbd5e1;
}
.top-finding-rank.rank-3 { background: #dc2626; }
.top-finding-rank.rank-2 { background: #d97706; }
.top-finding-rank.rank-1 { background: #94a3b8; }
.top-finding-text {
color: #1e293b;
text-decoration: none;
}
.top-finding-text:hover { color: var(--accent); }
/* Coverage bars */
.coverage-list { list-style: none; margin: 0; padding: 0; }
.coverage-row {
display: grid;
grid-template-columns: 11rem 1fr 2.5rem;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0;
font-size: 0.82rem;
}
.coverage-label { color: #334155; }
.coverage-bar {
display: block;
height: 8px;
background: #f1f5f9;
border-radius: 4px;
overflow: hidden;
}
.coverage-fill {
display: block;
height: 100%;
background: var(--accent);
border-radius: 4px;
transition: width 0.2s;
}
.coverage-count {
text-align: right;
font-variant-numeric: tabular-nums;
color: #64748b;
font-weight: 500;
}
.coverage-note {
margin: 0.55rem 0 0;
font-size: 0.74rem;
color: #94a3b8;
font-style: italic;
}
/* ─────────────────────────────────────────────────────────────────────
Process page — phase progress visual + per-phase blocks. No week
labels (engagement is delayed; user does not want them surfaced).
───────────────────────────────────────────────────────────────────── */
.phase-progress {
display: flex;
align-items: center;
gap: 0.7rem;
background: white;
border: 1px solid var(--rule);
border-radius: 5px;
padding: 0.85rem 1.25rem;
margin: 0 0 1.5rem;
}
.phase-step { display: flex; flex-direction: column; gap: 0.1rem; min-width: 6rem; }
.phase-dot {
width: 10px; height: 10px; border-radius: 50%;
background: #cbd5e1;
}
.phase-step-complete .phase-dot { background: #16a34a; }
.phase-step-active .phase-dot { background: var(--accent); }
.phase-step-label {
font-size: 0.85rem;
font-weight: 500;
color: #0f172a;
margin-top: 0.25rem;
}
.phase-step-status {
font-size: 0.7rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.phase-connector {
flex: 1 1 auto;
height: 1px;
background: #e2e8f0;
}
.phase-connector-done { background: #86efac; }
/* Per-phase blocks */
.phase-block {
background: white;
border: 1px solid var(--rule);
border-radius: 5px;
padding: 1rem 1.25rem 1.1rem;
margin: 0 0 1rem;
}
.phase-block-header {
display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
margin-bottom: 0.4rem;
}
.phase-block-eyebrow {
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.phase-block-header h2 {
margin: 0;
font-size: 1.05rem;
font-weight: 500;
color: #0f172a;
text-transform: none;
letter-spacing: 0;
}
.phase-block-status {
display: inline-block;
padding: 0 0.4rem;
font-size: 0.7rem;
font-weight: 400;
border-radius: 2px;
border: 1px solid transparent;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-left: auto;
}
.status-complete { color: #166534; border-color: #bbf7d0; }
.status-progress { color: #92740a; border-color: #f0d99c; }
.status-active { color: #1e40af; border-color: #bfdbfe; }
.phase-block-desc {
font-size: 0.92rem;
color: #334155;
line-height: 1.55;
margin: 0 0 0.85rem;
}
.phase-block-cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 1.5rem;
margin: 0 0 0.85rem;
}
.phase-block-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phase-col h4 {
margin: 0 0 0.35rem;
font-size: 0.8rem;
font-weight: 500;
color: #1e293b;
text-transform: none;
letter-spacing: 0;
}
.phase-col ul {
margin: 0;
padding-left: 1rem;
list-style: disc;
color: #334155;
font-size: 0.86rem;
line-height: 1.55;
}
.phase-col li { margin-bottom: 0.2rem; }
.phase-col-meta { color: #64748b; }
.phase-col-header {
display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
margin-bottom: 0.35rem;
}
.access-chip {
font-size: 0.66rem;
padding: 0 0.35rem;
border-radius: 2px;
border: 1px solid transparent;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500;
}
.access-secured { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.phase-block-outputs {
display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
padding-top: 0.6rem;
border-top: 1px solid #f1f5f9;
}
.outputs-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
margin-right: 0.35rem;
}
.output-chip {
font-size: 0.74rem;
padding: 0.1rem 0.45rem;
border: 1px solid var(--rule);
border-radius: 3px;
color: #475569;
background: #f8fafc;
}
.deliverables-list { list-style: none; padding: 0; margin: 0; }
.deliverables-list li {
font-size: 0.86rem;
padding: 0.3rem 0;
border-bottom: 1px solid #f1f5f9;
color: #1e293b;
}
.deliverables-list li:last-child { border-bottom: none; }
.deliverable-status {
display: inline-block;
font-size: 0.66rem;
padding: 0 0.35rem;
border-radius: 2px;
border: 1px solid #f0d99c;
color: #92740a;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 0.45rem;
vertical-align: 1px;
}
.audience-list { list-style: none; padding: 0; margin: 0; }
.audience-row {
display: flex; align-items: flex-start; gap: 0.6rem;
padding: 0.5rem 0;
border-bottom: 1px solid #f1f5f9;
}
.audience-row:last-child { border-bottom: none; }
.audience-avatar {
flex: 0 0 auto;
width: 2rem; height: 2rem;
border-radius: 50%;
background: #e0e7ff;
color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em;
}
.audience-text { flex: 1 1 auto; min-width: 0; }
.audience-name { font-size: 0.92rem; color: #0f172a; font-weight: 500; }
.audience-role { font-size: 0.78rem; color: #64748b; line-height: 1.4; }
.audience-note {
margin: 0.65rem 0 0;
font-size: 0.74rem;
color: #94a3b8;
font-style: italic;
}
/* ── Page-navigation progress bar ────────────────────────────────────
Thin bar at the very top of the viewport, animates 0% → 80% on .loading.
Stays at 80% until the new page DOM replaces it (whereupon the bar is
gone). Doesn't block anything; pointer-events: none. */
/* Page loader — a clearly visible 4px progress bar pinned to the top of
the viewport, with a subtle full-width body dim that fades in if the
navigation takes more than 250ms (so quick navs don't flash). Per
Bhupinder's feedback (2026-05-17 — "cannot make out what you implemented"),
the prior 2px bar was too subtle; this rev is unambiguous. */
.page-loader {
position: fixed;
top: 0; left: 0;
height: 5px;
width: 0%;
background: linear-gradient(to right, var(--accent), #60a5fa, #93c5fd, #60a5fa, var(--accent));
background-size: 200% 100%;
z-index: 10000;
opacity: 0;
pointer-events: none;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.45);
transition: opacity 0.15s ease, width 0.25s ease;
}
.page-loader.loading {
opacity: 1;
width: 80%;
/* Slow ramp gives the impression of progress even on long requests */
transition: opacity 0.05s ease, width 10s cubic-bezier(0.1, 0.7, 0.3, 1);
animation: page-loader-shimmer 1.2s ease-in-out infinite;
}
/* Body dim overlay — appears after a brief delay so quick navs don't flash.
Sits over content, blocks pointer events so user can't click again.
Darker than before (was rgba(...,0.08) — nearly invisible) — now ~20%
so the user can clearly see "the page is busy" without the dim being so
strong it looks broken. */
body.is-loading::after {
content: "";
position: fixed;
top: 5px; /* below the loader bar */
left: 0; right: 0; bottom: 0;
background: rgba(15, 23, 42, 0.22);
z-index: 9999;
pointer-events: auto;
animation: page-dim-fade-in 0.3s ease-out 0.25s both;
}
/* Centered spinner with "Loading…" caption. Fades in after 250ms so quick
navs (cached pages) don't flash a spinner the user never has time to
read. Once visible, it's the clear answer to "did my click register?". */
body.is-loading::before {
content: "Loading…";
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 10001;
padding: 2.4rem 2.2rem 1.4rem;
background: white;
color: var(--text, #0f172a);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25),
0 2px 6px rgba(15, 23, 42, 0.1);
text-align: center;
/* The spinner ring is a separate pseudo-stack — use background-image so we
don't need a third pseudo-element. SVG-as-data-URL, 28px circle. */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center 0.85rem;
background-size: 28px 28px;
animation: page-dim-fade-in 0.3s ease-out 0.25s both;
}
@keyframes page-dim-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes page-loader-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: -100% 50%; }
}
/* ── Dashboard — Findings Summary ──────────────────────────────────── */
.dash-block {
background: white;
border: 1px solid var(--rule);
border-radius: 5px;
padding: 0.85rem 1.1rem 1rem;
margin: 0 0 1rem;
}
.dash-block-header {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 0.5rem; gap: 1rem;
}
.dash-block-meta { font-size: 0.72rem; color: #94a3b8; }
/* Severity matrix — one row per dim, stacked-segment bar */
.sev-matrix { list-style: none; margin: 0; padding: 0; }
.sev-row {
display: grid;
grid-template-columns: 16rem 1fr 2rem;
align-items: center;
gap: 0.65rem;
padding: 0.32rem 0;
border-bottom: 1px solid #f1f5f9;
}
.sev-row:last-child { border-bottom: none; }
.sev-label {
font-size: 0.82rem; color: #1e293b; text-decoration: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sev-label:hover { color: var(--accent); }
.sev-bar {
display: flex; align-items: stretch;
height: 18px;
background: #f1f5f9;
border-radius: 3px; overflow: hidden;
}
.sev-seg {
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.66rem; font-weight: 500; color: white;
min-width: 1.1rem; padding: 0 0.15rem;
}
.sev-seg-high { background: #dc2626; }
.sev-seg-medium { background: #d97706; }
.sev-seg-single { background: #64748b; }
.sev-seg-other { background: #94a3b8; }
.sev-seg-empty { color: #94a3b8; font-style: italic; padding: 0 0.5rem; min-width: auto; }
.sev-total {
font-size: 0.82rem; color: #64748b;
font-variant-numeric: tabular-nums; text-align: right;
}
.sev-legend {
margin: 0.55rem 0 0;
display: flex; gap: 1rem; flex-wrap: wrap;
font-size: 0.72rem; color: #64748b;
}
.sev-key { display: inline-flex; align-items: center; gap: 0.3rem; }
.sev-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 2px;
}
/* Grid for bottom row: top-findings wider + 2 narrower panels */
.dash-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 0.85rem;
margin: 0 0 1.5rem;
}
.dash-panel-wide { /* placeholder for future overrides */ }
/* Top findings — extra meta column (dim badge + evidence count) */
.top-finding-meta {
margin-left: auto;
display: inline-flex; gap: 0.35rem; align-items: center;
}
.dim-badge {
display: inline-block;
padding: 0 0.4rem;
font-size: 0.66rem; font-weight: 500;
color: #64748b; border: 1px solid #e2e8f0; border-radius: 2px;
}
.ev-count {
display: inline-block;
font-size: 0.7rem; color: #94a3b8;
font-variant-numeric: tabular-nums; min-width: 1.4rem; text-align: right;
}
/* Cross-cutting themes — terse list */
.cc-themes-list { list-style: none; margin: 0; padding: 0; }
.cc-theme {
padding: 0.35rem 0;
border-bottom: 1px solid #f1f5f9;
font-size: 0.82rem; line-height: 1.45;
}
.cc-theme:last-child { border-bottom: none; }
.cc-theme a { color: #1e293b; text-decoration: none; }
.cc-theme a:hover { color: var(--accent); }
/* People mentioned — chip cloud */
.people-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.person-chip {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.18rem 0.5rem;
background: #f8fafc;
border: 1px solid var(--rule);
border-radius: 3px;
font-size: 0.78rem;
}
.person-name { color: #1e293b; }
.person-count {
font-size: 0.7rem; color: #94a3b8;
font-variant-numeric: tabular-nums;
border-left: 1px solid var(--rule); padding-left: 0.35rem;
}
/* ── Recommendations page ──────────────────────────────────────────── */
.rec-empty {
background: white;
border: 1px solid var(--rule);
border-left: 3px solid var(--accent);
border-radius: 4px;
padding: 1.2rem 1.4rem 1.4rem;
margin: 1rem 0 1.5rem;
}
.rec-empty p { margin: 0 0 0.5rem; color: #334155; }
.rec-empty-meta { font-size: 0.78rem; color: #94a3b8; margin-top: 0.45rem; }
.rec-meta-bar {
display: flex; justify-content: space-between; align-items: center;
padding: 0.45rem 0.85rem;
background: #f8fafc; border: 1px solid var(--rule); border-radius: 4px;
font-size: 0.8rem; color: #64748b;
margin: 0 0 1.25rem;
}
.rec-priority-block { margin: 0 0 1.5rem; }
.rec-priority-header {
display: flex; align-items: baseline; justify-content: space-between;
margin: 0 0 0.55rem; gap: 1rem;
border-bottom: 1px solid var(--rule); padding-bottom: 0.35rem;
}
.rec-priority-header h2 {
margin: 0;
font-size: 1.02rem;
font-weight: 500;
display: flex; align-items: center; gap: 0.55rem;
text-transform: none; letter-spacing: 0;
}
.rec-priority-hint { font-size: 0.74rem; color: #94a3b8; font-style: italic; }
.rec-pri-chip {
display: inline-block;
padding: 0.1rem 0.5rem;
font-size: 0.72rem; font-weight: 500;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid transparent;
}
.rec-pri-urgent { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.rec-pri-near-term { color: #92740a; border-color: #f0d99c; background: #fffaf0; }
.rec-pri-structural{ color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
/* New horizon labels (2026-05-16) */
.rec-pri-short-term { color: #b45309; border-color: #fcd9b6; background: #fffaf0; }
.rec-pri-medium-term { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.rec-pri-long-term { color: #3f3f73; border-color: #d4d4f0; background: #f5f5fd; }
.rec-list { list-style: none; padding: 0; margin: 0; }
.rec-card {
background: white;
border: 1px solid var(--rule);
border-left: 3px solid #e2e8f0;
border-radius: 5px;
padding: 0.75rem 1rem 0.85rem;
margin: 0 0 0.6rem;
}
.rec-card-header {
display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
margin-bottom: 0.35rem;
}
.rec-card-dim { font-size: 0.78rem; color: #64748b; }
.rec-owner {
margin-left: auto;
font-size: 0.74rem;
padding: 0.05rem 0.45rem;
border: 1px solid var(--rule);
border-radius: 3px;
color: #475569;
background: #f8fafc;
font-weight: 500;
}
.rec-text {
margin: 0 0 0.55rem;
font-size: 0.93rem; line-height: 1.55; color: #1e293b;
}
.rec-card-footer {
display: flex; flex-wrap: wrap; gap: 0.65rem 1.1rem;
font-size: 0.78rem; color: #64748b;
padding-top: 0.5rem;
border-top: 1px solid #f1f5f9;
}
.rec-meta-item strong { color: #475569; font-weight: 500; }
.rec-evidence-link {
color: var(--accent); text-decoration: none;
font-variant-numeric: tabular-nums; font-weight: 500;
}
.rec-evidence-link:hover { text-decoration: underline; }
/* Subitems rail admin sub-section */
.rail-subhead {
margin: 1rem 0 0.25rem;
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
color: #94a3b8; font-weight: 500;
padding: 0 0.85rem;
}
/* ── Recommendations: per-card status chip, edit/delete actions, inline edit form ── */
.rec-card-actions {
margin-left: 0.35rem;
display: inline-flex; gap: 0.15rem; align-items: center;
}
.rec-icon-btn {
background: transparent;
border: 1px solid transparent;
width: 1.4rem; height: 1.4rem;
border-radius: 3px;
color: #94a3b8;
cursor: pointer;
font-size: 0.82rem;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
}
.rec-icon-btn:hover { color: var(--accent); background: #f1f5f9; border-color: var(--rule); }
.rec-del-btn:hover { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.rec-status-chip {
display: inline-block;
padding: 0 0.4rem;
font-size: 0.68rem;
font-weight: 500;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid transparent;
cursor: default;
user-select: none;
}
.rec-status-chip-draft { color: #64748b; border-color: #cbd5e1; background: #f8fafc; cursor: pointer; }
.rec-status-chip-dhiraj-reviewed { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; cursor: pointer; }
.rec-status-chip-counsel-approved { color: #166534; border-color: #bbf7d0; background: #f0fdf4; cursor: pointer; }
.rec-card.rec-status-counsel-approved { border-left-color: #86efac; }
.rec-card.rec-status-dhiraj-reviewed { border-left-color: #bfdbfe; }
.rec-edited { color: #94a3b8 !important; font-size: 0.74rem; }
/* Inline edit form */
.rec-edit-form {
margin-top: 0.55rem;
padding: 0.7rem 0.85rem;
background: #f8fafc;
border: 1px solid var(--rule);
border-radius: 4px;
}
.rec-edit-label {
display: block;
font-size: 0.74rem;
color: #64748b;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.6rem;
}
.rec-edit-label textarea,
.rec-edit-label input[type="text"] {
display: block;
width: 100%;
margin-top: 0.2rem;
padding: 0.35rem 0.5rem;
font: inherit;
font-size: 0.9rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #1e293b;
background: white;
border: 1px solid var(--rule);
border-radius: 3px;
}
.rec-edit-label textarea { resize: vertical; min-height: 4rem; line-height: 1.5; }
.rec-edit-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
}
.rec-edit-actions {
display: flex; gap: 0.4rem;
margin-top: 0.4rem;
}
.action-btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.action-btn-primary:hover { background: #1e3a8a; }
/* ── Recommendations: change-type chip + title + action-block (2026-05-16) ── */
.rec-change-chip {
display: inline-block;
padding: 0.05rem 0.45rem;
font-size: 0.68rem;
font-weight: 500;
border-radius: 2px;
text-transform: lowercase;
letter-spacing: 0.02em;
border: 1px solid transparent;
white-space: nowrap;
}
/* Execution-path chip — true-advisor honest read (2026-05-17).
Same chip shape as change-type but separate semantic. Visible to CRTA
readers (Mark McGinn etc.). Color discipline:
- CRTA-internal = green-ish (you can do this; positive framing)
- External help = blue-ish (neutral acknowledgment, not "red flag")
- Partner = violet (co-execution; neither pure-green nor pure-blue)
- Open = slate (genuine ambiguity; visually quiet) */
.rec-exec-chip {
display: inline-block;
padding: 0.05rem 0.45rem;
font-size: 0.68rem;
font-weight: 500;
border-radius: 2px;
text-transform: none;
letter-spacing: 0.01em;
border: 1px solid transparent;
white-space: nowrap;
}
.rec-exec-conduent-internal { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.rec-exec-external-help { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.rec-exec-partner { color: #6b21a8; border-color: #e9d5ff; background: #faf5ff; }
.rec-exec-open { color: #475569; border-color: #cbd5e1; background: #f8fafc; }
.rec-change-quick-win { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.rec-change-procedural { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.rec-change-architectural { color: #5b21b6; border-color: #ddd6fe; background: #f5f3ff; }
.rec-change-organizational{ color: #92740a; border-color: #f0d99c; background: #fffaf0; }
.rec-change-cultural { color: #9d174d; border-color: #fbcfe8; background: #fdf2f8; }
.rec-change-structural { color: #3f3f73; border-color: #d4d4f0; background: #f5f5fd; }
.rec-title {
margin: 0 0 0.4rem;
font-size: 0.97rem;
font-weight: 500;
line-height: 1.35;
color: #0f172a;
letter-spacing: -0.005em;
}
.rec-action-block {
margin: 0.55rem 0 0.55rem;
padding: 0.55rem 0.75rem;
background: #f8fafc;
border: 1px solid #eef2f7;
border-radius: 4px;
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 0.85rem;
row-gap: 0.3rem;
font-size: 0.84rem;
line-height: 1.5;
}
.rec-action-block dt {
color: #64748b;
font-weight: 500;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-top: 0.1rem;
white-space: nowrap;
}
.rec-action-block dd {
margin: 0;
color: #1e293b;
}
.rec-action-block dt.rec-action-risk {
color: #b91c1c;
}
.rec-action-block dd.rec-action-risk {
color: #7f1d1d;
font-style: italic;
}
/* ── Insights page — seven SVG visualizations ─────────────────────── */
.insights-panel {
background: white;
border: 1px solid var(--rule);
border-radius: 6px;
padding: 1.2rem 1.4rem 1.5rem;
margin: 0 0 1.4rem;
}
.insights-panel-header { margin: 0 0 1rem; }
.insights-panel-title {
margin: 0 0 0.3rem;
font-size: 1.05rem;
font-weight: 500;
letter-spacing: -0.005em;
color: #0f172a;
}
.insights-panel-sub {
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
color: #475569;
max-width: 62rem;
}
.insights-panel-body { position: relative; }
.insights-svg {
display: block;
width: 100%;
max-width: 520px;
height: auto;
margin: 0 auto;
}
.insights-svg-wide { max-width: none; width: 100%; }
.insights-radar-wrap, .insights-sunburst-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
gap: 1.2rem;
align-items: center;
}
@media (max-width: 880px) {
.insights-radar-wrap, .insights-sunburst-wrap { grid-template-columns: 1fr; }
}
.insights-axis-label { font-size: 10.5px; fill: #64748b; font-family: inherit; }
.insights-axis-title { font-size: 11.5px; fill: #475569; font-weight: 500; }
.insights-radar-label { font-size: 11px; font-weight: 500; font-family: inherit; }
.insights-radar-label-sub { font-size: 9.5px; fill: #94a3b8; font-family: inherit; }
.insights-sunburst-center { font-size: 24px; font-weight: 500; fill: #0f172a; font-family: inherit; }
.insights-sunburst-center-sub { font-size: 10.5px; fill: #64748b; font-family: inherit; }
.insights-sankey-bignum { font-size: 22px; font-weight: 500; fill: #0f172a; font-family: inherit; }
.insights-bubble { cursor: pointer; transition: fill-opacity 120ms ease, stroke-width 120ms ease; }
.insights-bubble:hover { fill-opacity: 0.9 !important; stroke-width: 1.6 !important; }
.insights-sankey-band { cursor: pointer; transition: stroke-opacity 120ms ease; }
.insights-sankey-band:hover { stroke-opacity: 0.9 !important; }
.insights-legend {
list-style: none;
margin: 0.9rem 0 0;
padding: 0;
display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
font-size: 0.78rem; color: #475569;
}
.insights-legend-dims { gap: 0.4rem 0.85rem; }
.insights-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.insights-legend-swatch {
display: inline-block; width: 14px; height: 14px;
border-radius: 3px; border: 1px solid transparent;
}
.insights-legend-dot {
display: inline-block; width: 10px; height: 10px;
border-radius: 50%;
}
/* ── Tooltip ── */
.insights-tooltip {
position: fixed;
z-index: 9999;
pointer-events: none;
max-width: 22rem;
padding: 0.4rem 0.6rem;
background: #0f172a;
color: #f1f5f9;
font-size: 0.74rem;
line-height: 1.45;
border-radius: 4px;
box-shadow: 0 6px 16px -4px rgba(0,0,0,0.25);
}
/* ── Severity heatmap ── */
.insights-heatmap {
border-collapse: separate;
border-spacing: 3px;
margin: 0;
width: auto;
}
.insights-heatmap th, .insights-heatmap td {
font-weight: 400;
font-size: 0.82rem;
padding: 0.5rem 0.65rem;
text-align: center;
font-variant-numeric: tabular-nums;
}
.insights-heatmap .hm-corner { width: 1.5rem; }
.insights-heatmap .hm-col-h, .insights-heatmap .hm-row-total {
color: #64748b; font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
padding-bottom: 0.4rem;
}
.insights-heatmap .hm-row-label {
text-align: left;
padding-right: 1rem;
color: #1e293b;
font-size: 0.83rem;
white-space: nowrap;
}
.insights-heatmap .hm-dim-dot {
display: inline-block; width: 10px; height: 10px; border-radius: 50%;
vertical-align: middle; margin-right: 0.45rem;
}
.insights-heatmap .hm-dim-id { color: #64748b; margin-right: 0.4rem; font-weight: 500; }
.insights-heatmap .hm-dim-name { color: #1e293b; }
.insights-heatmap .hm-cell {
color: #0f172a; font-weight: 500;
min-width: 4rem;
border-radius: 4px;
cursor: default;
}
.insights-heatmap .hm-cell:hover { outline: 1.5px solid #1e40af; }
.insights-heatmap tfoot td, .insights-heatmap tfoot th {
border-top: 1px solid var(--rule);
color: #475569;
font-size: 0.76rem;
padding-top: 0.6rem;
}
.insights-heatmap .hm-grand { color: #0f172a; }
@media (max-width: 880px) {
.insights-heatmap { font-size: 0.74rem; }
}
/* ── Recommendation matrix ── */
.insights-rec-matrix {
border-collapse: separate; border-spacing: 4px;
margin: 0; width: 100%;
}
.insights-rec-matrix th, .insights-rec-matrix td {
padding: 0.45rem 0.6rem;
font-size: 0.8rem; font-weight: 400;
text-align: left;
}
.insights-rec-matrix .rm-row {
text-transform: lowercase; color: #475569;
white-space: nowrap; padding-right: 0.8rem;
font-weight: 500; font-size: 0.78rem;
}
.insights-rec-matrix .rm-col, .insights-rec-matrix .rm-row-total {
text-align: center; color: #64748b; font-weight: 500;
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.insights-rec-matrix .rm-cell {
background: #f8fafc; border-radius: 4px;
vertical-align: middle;
min-width: 7rem;
height: 2.4rem;
}
.insights-rec-matrix .rm-dots {
display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.insights-rec-matrix .rm-dot {
display: inline-block; width: 11px; height: 11px; border-radius: 50%;
cursor: pointer; transition: transform 120ms ease;
}
.insights-rec-matrix .rm-dot:hover { transform: scale(1.5); }
.insights-rec-matrix .rm-empty { color: #cbd5e1; font-size: 1.1rem; }
.insights-rec-matrix .rm-row-total { text-align: center; color: #0f172a; }
.insights-rec-matrix tfoot td, .insights-rec-matrix tfoot th {
border-top: 1px solid var(--rule); padding-top: 0.6rem;
color: #475569; font-size: 0.74rem; text-align: center;
}
.insights-rec-matrix .rm-grand { color: #0f172a; }
.insights-rec-matrix .rm-corner { width: 6rem; }
/* ── Insights tab bar (Option 1 / Option 2 shared header, 2026-05-18) ─ */
.insights-tabs {
display: flex;
gap: 0;
margin: 0 0 1rem;
border-bottom: 1px solid var(--rule);
}
.insights-tab {
padding: 0.6rem 1.1rem 0.65rem;
font-size: 0.85rem;
color: #64748b;
text-decoration: none;
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.insights-tab:hover { color: var(--accent); }
.insights-tab-active {
color: #0f172a;
border-bottom-color: var(--accent);
}
/* ── Insights v2 — drill-down rewrite (2026-05-17) ────────────────── */
.iv2-meta {
margin: 0.5rem 0 0;
font-size: 0.78rem;
color: #94a3b8;
}
.iv2-dims {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.iv2-dim-row {
background: white;
border: 1px solid var(--rule);
border-radius: 4px;
border-left: 3px solid #cbd5e1;
overflow: hidden;
}
.iv2-dim-row[open] { border-color: #bfdbfe; box-shadow: 0 1px 3px rgba(15,23,42,0.04); }
.iv2-dim-strength-strong { border-left-color: #16a34a; }
.iv2-dim-strength-partial { border-left-color: #d97706; }
.iv2-dim-strength-gap { border-left-color: #dc2626; }
.iv2-dim-strength-unknown { border-left-color: #94a3b8; }
.iv2-dim-summary {
display: grid;
grid-template-columns: 2.6rem minmax(0, 1.4fr) min-content min-content 6rem 5rem 9rem 1rem;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 0.95rem;
cursor: pointer;
font-size: 0.85rem;
list-style: none;
}
.iv2-dim-summary::-webkit-details-marker { display: none; }
@media (max-width: 980px) {
.iv2-dim-summary {
grid-template-columns: 2.4rem 1fr min-content;
gap: 0.4rem;
}
.iv2-dim-summary > :not(.iv2-dim-id):not(.iv2-dim-name):not(.iv2-dim-toggle) {
display: none;
}
}
.iv2-dim-id { font-weight: 600; font-size: 0.9rem; }
.iv2-dim-name { color: #1e293b; }
.iv2-dim-cap { font-size: 0.65rem; }
.iv2-dim-fcount, .iv2-dim-rcount {
font-size: 0.74rem;
color: #64748b;
font-variant-numeric: tabular-nums;
}
.iv2-dim-bar {
display: inline-flex;
height: 6px;
border-radius: 2px;
overflow: hidden;
background: #f1f5f9;
}
.iv2-dim-bar .db-tier-seg { display: inline-block; min-width: 3px; }
.iv2-dim-toggle {
color: #94a3b8;
font-size: 0.7rem;
transition: transform 0.2s ease;
}
.iv2-dim-row[open] .iv2-dim-toggle { transform: rotate(180deg); }
.iv2-dim-body {
padding: 0.85rem 1.1rem 1.1rem;
border-top: 1px solid #f1f5f9;
background: #fafbfc;
}
.iv2-dim-cap-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
margin-bottom: 1rem;
}
@media (max-width: 720px) { .iv2-dim-cap-block { grid-template-columns: 1fr; } }
.iv2-dim-cap-section {
background: white;
padding: 0.6rem 0.8rem;
border-radius: 3px;
border-left: 2px solid #e2e8f0;
}
.iv2-dim-cap-section h4 {
margin: 0 0 0.25rem;
font-size: 0.68rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.iv2-dim-cap-section p {
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
color: #1e293b;
}
.iv2-dim-cap-section-gap { border-left-color: #fecaca; }
.iv2-dim-cap-section-gap h4 { color: #b91c1c; }
.iv2-dim-subhead {
margin: 0.9rem 0 0.4rem;
font-size: 0.72rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #475569;
}
.iv2-findings-list, .iv2-recs-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: 0.3rem;
}
.iv2-finding, .iv2-rec {
display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
padding: 0.4rem 0.6rem;
background: white;
border: 1px solid var(--rule);
border-radius: 3px;
font-size: 0.8rem;
}
.iv2-finding-title, .iv2-rec-title {
flex: 1; min-width: 0;
color: #1e293b;
text-decoration: none;
font-weight: 500;
}
.iv2-finding-title:hover, .iv2-rec-title:hover { color: var(--accent); }
.iv2-finding-ev {
font-size: 0.7rem;
color: #94a3b8;
}
.iv2-dim-jump {
margin: 0.9rem 0 0;
text-align: right;
font-size: 0.78rem;
}
.iv2-dim-jump a {
color: var(--accent);
text-decoration: none;
}
.iv2-dim-jump a:hover { text-decoration: underline; }
/* Recommendation explorer */
.iv2-rec-filters {
display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
margin: 0 0 0.85rem;
font-size: 0.8rem;
}
.iv2-filter-label {
font-size: 0.74rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 0.35rem;
}
.iv2-filter-btn {
padding: 0.25rem 0.7rem;
background: white;
border: 1px solid var(--rule);
border-radius: 3px;
font-size: 0.76rem;
color: #475569;
cursor: pointer;
font: inherit;
font-size: 0.76rem;
}
.iv2-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.iv2-filter-active {
background: #1e40af;
color: white;
border-color: #1e40af;
}
.iv2-filter-active:hover { color: white; }
.iv2-recs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.7rem;
}
@media (max-width: 980px) { .iv2-recs-grid { grid-template-columns: 1fr; } }
.iv2-recs-col {
background: #fafbfc;
border: 1px solid var(--rule);
border-radius: 4px;
padding: 0.7rem 0.85rem 0.95rem;
}
.iv2-recs-col-title {
margin: 0 0 0.6rem;
display: flex; align-items: center; gap: 0.4rem;
font-size: 0.85rem; font-weight: 500;
}
.iv2-recs-col-count {
font-size: 0.74rem; color: #64748b;
font-variant-numeric: tabular-nums;
}
.iv2-recs-col-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 0.4rem;
}
.iv2-rec-card {
background: white;
border: 1px solid var(--rule);
border-radius: 3px;
padding: 0.55rem 0.7rem;
}
.iv2-rec-card-header {
display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
margin-bottom: 0.4rem;
}
.iv2-rec-card-title {
display: block;
color: #1e293b;
text-decoration: none;
font-size: 0.82rem;
line-height: 1.4;
font-weight: 500;
}
.iv2-rec-card-title:hover { color: var(--accent); }
/* ── Dashboard active-operations strip (2026-05-18) ─────────────────── */
.db-active-ops {
display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
margin: 0 0 1rem;
padding: 0.55rem 0.9rem;
background: #fffbeb;
border: 1px solid #fde68a;
border-left: 3px solid #f59e0b;
border-radius: 4px;
font-size: 0.82rem;
}
.db-active-ops-label {
font-size: 0.72rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #92400e;
}
.db-active-op {
display: inline-flex; align-items: center; gap: 0.45rem;
padding: 0.15rem 0.55rem;
background: white;
border: 1px solid #fde68a;
border-radius: 3px;
color: #44403c;
}
.db-active-op strong { color: #92400e; font-weight: 500; }
.db-active-op-meta { font-size: 0.74rem; color: #78716c; }
.db-stop-btn {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
border-radius: 3px;
padding: 0.1rem 0.55rem;
font-size: 0.74rem;
font-weight: 500;
cursor: pointer;
font-family: inherit;
}
.db-stop-btn:hover { background: #fee2e2; border-color: #fca5a5; }
.db-stop-btn:disabled { opacity: 0.5; cursor: wait; }
/* ── Dashboard (rebuilt 2026-05-17 — SOW-grounded status board) ────── */
.db-hero {
padding: 1.6rem 0 1.4rem;
border-bottom: 1px solid var(--rule);
margin-bottom: 1.4rem;
}
.db-hero-eyebrow {
margin: 0 0 0.45rem;
font-size: 0.72rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 500;
}
.db-hero-lede {
margin: 0;
font-size: 0.96rem;
line-height: 1.65;
color: #1e293b;
max-width: 62rem;
}
.db-hero-lede strong { color: #0f172a; font-weight: 500; }
.db-section { margin: 0 0 1.6rem; }
.db-section-header {
display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap;
margin: 0 0 0.85rem;
}
.db-section-header h2 {
margin: 0;
font-size: 1.02rem;
font-weight: 500;
letter-spacing: -0.005em;
color: #0f172a;
}
.db-section-sub {
font-size: 0.78rem;
color: #64748b;
}
.db-section-internal {
padding-top: 1.2rem;
border-top: 1px solid var(--rule);
margin-top: 2rem;
}
.db-internal-tag {
display: inline-block;
margin-left: 0.45rem;
padding: 0.05rem 0.4rem;
font-size: 0.62rem;
font-weight: 500;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #991b1b;
background: #fef2f2;
border: 1px solid #fecaca;
vertical-align: middle;
}
/* Deliverables list */
.db-deliverables {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
}
@media (max-width: 920px) { .db-deliverables { grid-template-columns: 1fr; } }
.db-deliverable {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 0.85rem 1.1rem;
background: white;
border: 1px solid var(--rule);
border-left: 3px solid #cbd5e1;
border-radius: 4px;
}
.db-deliverable-in-draft { border-left-color: #f59e0b; }
.db-deliverable-in-review { border-left-color: #3b82f6; }
.db-deliverable-counsel-approved { border-left-color: #16a34a; }
.db-deliverable-delivered { border-left-color: #16a34a; }
.db-deliverable-skipped { border-left-color: #94a3b8; opacity: 0.8; }
.db-deliv-main { flex: 1; min-width: 0; }
.db-deliv-main h3 {
margin: 0 0 0.25rem;
font-size: 0.92rem;
font-weight: 500;
color: #0f172a;
}
.db-deliv-notes {
margin: 0;
font-size: 0.78rem;
color: #64748b;
line-height: 1.5;
}
.db-deliv-meta {
display: flex; flex-direction: column; gap: 0.25rem;
align-items: flex-end;
font-size: 0.72rem;
color: #94a3b8;
white-space: nowrap;
}
.db-deliv-status {
display: inline-block;
padding: 0.1rem 0.55rem;
font-size: 0.7rem; font-weight: 500;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid transparent;
}
.db-status-not-started { color: #64748b; border-color: #cbd5e1; background: #f8fafc; }
.db-status-in-draft { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.db-status-in-review { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.db-status-counsel-approved { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.db-status-delivered { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.db-status-skipped { color: #64748b; border-color: #cbd5e1; background: #f1f5f9; text-decoration: line-through; }
.db-deliv-date { font-size: 0.72rem; color: #475569; font-variant-numeric: tabular-nums; }
.db-deliv-edit { font-size: 0.66rem; color: #94a3b8; font-style: italic; }
/* Pending grid */
.db-pending-grid {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.7rem;
}
.db-pending-card {
background: white;
border: 1px solid var(--rule);
border-radius: 4px;
padding: 0.95rem 1.05rem 0.8rem;
display: flex; flex-direction: column;
}
.db-pending-num {
font-size: 1.85rem;
font-weight: 400;
color: #0f172a;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.db-pending-label {
font-size: 0.78rem;
color: #475569;
margin: 0.2rem 0 0.55rem;
line-height: 1.45;
}
.db-pending-link {
font-size: 0.74rem;
color: var(--accent);
text-decoration: none;
margin-top: auto;
align-self: flex-start;
}
.db-pending-link:hover { text-decoration: underline; }
/* Per-dim snapshot table */
.db-dim-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: white;
border: 1px solid var(--rule);
border-radius: 4px;
overflow: hidden;
font-size: 0.86rem;
}
.db-dim-table thead th {
text-align: left;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
padding: 0.55rem 0.75rem;
border-bottom: 1px solid var(--rule);
background: #f8fafc;
}
.db-dim-table tbody td {
padding: 0.6rem 0.75rem;
border-bottom: 1px solid #f1f5f9;
color: #1e293b;
vertical-align: middle;
}
.db-dim-table tbody tr:last-child td { border-bottom: none; }
.db-dim-table tbody tr:hover { background: #fafbfc; }
.db-dim-id {
font-weight: 500;
width: 4.5rem;
white-space: nowrap;
}
.db-dim-id a {
color: var(--accent);
text-decoration: none;
}
.db-dim-name a {
color: #1e293b;
text-decoration: none;
}
.db-dim-name a:hover { color: var(--accent); }
.db-dim-num {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 500;
width: 4rem;
}
.db-dim-flag {
display: inline-block;
margin-left: 0.35rem;
padding: 0.02rem 0.35rem;
font-size: 0.62rem;
font-weight: 500;
color: #6b21a8;
background: #faf5ff;
border: 1px solid #e9d5ff;
border-radius: 2px;
letter-spacing: 0.05em;
cursor: help;
}
.db-dim-flag-inline { margin: 0 0.2rem 0 0; cursor: default; }
.db-cap-badge {
display: inline-block;
padding: 0.1rem 0.5rem;
font-size: 0.7rem;
font-weight: 500;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid transparent;
white-space: nowrap;
}
.db-cap-strong { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.db-cap-partial { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.db-cap-gap { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.db-cap-unknown { color: #64748b; border-color: #cbd5e1; background: #f8fafc; }
.db-cap-mini { padding: 0 0.4rem; font-size: 0.65rem; }
/* Tier-mix bar (mini severity bar in the dim snapshot row) */
.db-tier-bar {
width: 14rem; padding: 0;
}
.db-tier-bar > span { display: inline-block; }
.db-tier-bar {
display: inline-flex !important;
height: 8px;
border-radius: 2px;
overflow: hidden;
background: #f1f5f9;
vertical-align: middle;
margin-top: 0.4rem;
}
.db-tier-seg { height: 100%; min-width: 4px; }
.db-tier-high { background: #dc2626; }
.db-tier-medium { background: #f59e0b; }
.db-tier-single { background: #3b82f6; }
.db-tier-other { background: #cbd5e1; }
.db-tier-key {
display: inline-block; width: 9px; height: 9px;
border-radius: 1.5px; vertical-align: middle;
margin: 0 0.2rem 0 0.4rem;
}
.db-dim-footnote {
margin: 0.6rem 0 0;
font-size: 0.72rem;
color: #94a3b8;
line-height: 1.6;
}
/* Recs shape — three columns */
.db-recs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.7rem;
}
@media (max-width: 920px) { .db-recs-grid { grid-template-columns: 1fr; } }
.db-recs-card {
background: white;
border: 1px solid var(--rule);
border-radius: 4px;
padding: 0.95rem 1.1rem;
}
.db-recs-card h3 {
margin: 0 0 0.6rem;
font-size: 0.78rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
}
.db-recs-bar-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0.4rem;
}
.db-recs-bar-list li {
display: grid;
grid-template-columns: 8rem 1fr 2rem;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
}
.db-recs-bar-divider {
border-top: 1px dashed #e2e8f0;
margin: 0.2rem 0;
display: block !important;
height: 0;
padding: 0;
grid-template-columns: 1fr !important;
}
.db-recs-bar-label { color: #475569; }
.db-recs-bar {
background: #f1f5f9;
border-radius: 2px;
height: 8px;
overflow: hidden;
}
.db-recs-bar-fill {
display: block; height: 100%;
background: linear-gradient(to right, var(--accent), #60a5fa);
transition: width 0.4s ease;
}
.db-recs-bar-fill-conduent-internal { background: linear-gradient(to right, #16a34a, #4ade80); }
.db-recs-bar-fill-partner { background: linear-gradient(to right, #7c3aed, #a78bfa); }
.db-recs-bar-fill-external-help { background: linear-gradient(to right, #1e40af, #60a5fa); }
.db-recs-bar-fill-open { background: linear-gradient(to right, #64748b, #94a3b8); }
.db-recs-bar-fill-strong { background: linear-gradient(to right, #16a34a, #4ade80); }
.db-recs-bar-fill-partial { background: linear-gradient(to right, #d97706, #fbbf24); }
.db-recs-bar-fill-gap { background: linear-gradient(to right, #dc2626, #f87171); }
.db-recs-bar-fill-unknown { background: linear-gradient(to right, #64748b, #94a3b8); }
.db-recs-bar-num {
text-align: right;
font-variant-numeric: tabular-nums;
color: #0f172a;
font-weight: 500;
}
/* Progress grid (admin band) */
.db-progress-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 0.7rem;
}
/* Deliverable edit form */
.db-deliv-edit-form {
margin-top: 1rem;
padding: 1rem 1.2rem;
background: #f8fafc;
border: 1px solid var(--rule);
border-radius: 4px;
}
.db-deliv-edit-title {
margin: 0 0 0.7rem;
font-size: 0.94rem;
font-weight: 500;
color: #0f172a;
}
/* ── Capability heat-map (Insights panel, 2026-05-17) ──────────────────
7 cards in a horizontal strip; collapses to 2 cols then 1 on narrower
viewports. Each card carries a colored strength badge + named assets
+ gap areas. Audience: CRTA CTO. Tone: candid external advisor. */
.capability-strip {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.7rem;
}
@media (max-width: 1280px) { .capability-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 880px) { .capability-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .capability-strip { grid-template-columns: 1fr; } }
.capability-card {
position: relative;
background: white;
border: 1px solid var(--rule);
border-top: 3px solid #cbd5e1;
border-radius: 5px;
padding: 0.7rem 0.85rem 0.85rem;
font-size: 0.78rem;
display: flex; flex-direction: column;
min-height: 11rem;
}
.capability-card.capability-strong { border-top-color: #16a34a; }
.capability-card.capability-partial { border-top-color: #d97706; }
.capability-card.capability-gap { border-top-color: #dc2626; }
.capability-card.capability-unknown { border-top-color: #94a3b8; }
.capability-card-header {
display: flex; align-items: baseline; gap: 0.4rem;
margin-bottom: 0.45rem;
}
.capability-dim-id {
font-size: 0.88rem; font-weight: 600;
}
.capability-dim-label {
font-size: 0.78rem; color: #475569;
}
.capability-strength-badge {
display: inline-block;
padding: 0.15rem 0.55rem;
font-size: 0.7rem; font-weight: 500;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.04em;
align-self: flex-start;
margin-bottom: 0.5rem;
}
.capability-strength-strong { color: #166534; border: 1px solid #bbf7d0; background: #f0fdf4; }
.capability-strength-partial { color: #92400e; border: 1px solid #fde68a; background: #fffbeb; }
.capability-strength-gap { color: #991b1b; border: 1px solid #fecaca; background: #fef2f2; }
.capability-strength-unknown { color: #475569; border: 1px solid #cbd5e1; background: #f8fafc; }
.capability-section { margin: 0 0 0.5rem; }
.capability-section h4 {
margin: 0 0 0.18rem;
font-size: 0.66rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.capability-section p {
margin: 0;
font-size: 0.78rem;
line-height: 1.5;
color: #1e293b;
}
.capability-section-gap h4 { color: #b91c1c; }
.capability-section-gap p { color: #44403c; }
.capability-notes {
margin: 0.4rem 0 0;
padding: 0.4rem 0.55rem;
font-size: 0.72rem;
color: #475569;
background: #f8fafc;
border-left: 2px solid var(--rule);
border-radius: 2px;
line-height: 1.5;
}
.capability-empty { color: #94a3b8; font-style: italic; font-size: 0.78rem; margin: 0.4rem 0 0; }
.capability-edit-btn {
position: absolute; top: 0.5rem; right: 0.5rem;
background: transparent; border: 1px solid transparent;
width: 1.4rem; height: 1.4rem; border-radius: 3px;
color: #cbd5e1; cursor: pointer; font-size: 0.78rem;
display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.capability-edit-btn:hover { color: var(--accent); background: #f1f5f9; border-color: var(--rule); }
.capability-empty-state {
padding: 1.2rem 1.4rem;
background: #f8fafc;
border: 1px solid var(--rule);
border-radius: 4px;
text-align: center;
}
.capability-empty-state p { margin: 0 0 0.5rem; color: #334155; }
.capability-empty-meta { font-size: 0.74rem; color: #94a3b8 !important; margin-top: 0.45rem !important; }
.capability-actions {
margin-top: 0.9rem;
display: flex; align-items: center; gap: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid var(--rule);
}
.capability-actions-hint {
font-size: 0.74rem; color: #94a3b8; font-style: italic;
}
.capability-edit-form {
margin-top: 1rem;
padding: 1rem 1.2rem;
background: #f8fafc;
border: 1px solid var(--rule);
border-radius: 5px;
}
.capability-edit-title {
margin: 0 0 0.7rem;
font-size: 0.95rem;
font-weight: 500;
color: #0f172a;
}
/* ── Levers page — Primus-internal commercial strategy ─────────────── */
.lever-page-header {
position: relative;
padding-top: 2.4rem; /* space for the internal strap */
}
.lever-internal-strap {
position: absolute;
top: 0; left: 0; right: 0;
background: #fef2f2;
color: #991b1b;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
padding: 0.35rem 0.85rem;
border-radius: 3px;
border: 1px solid #fecaca;
text-align: center;
}
/* Lever cards inherit .rec-card base but get a left red stripe so they
read as a different category at a glance. */
.lever-card {
border-left-color: #fca5a5;
border-left-width: 4px;
}
.lever-card.lever-status-dhiraj-reviewed { border-left-color: #bfdbfe; }
.lever-card.lever-status-committed { border-left-color: #86efac; }
.lever-card-header {
gap: 0.45rem;
}
/* Engagement-shape chip — controlled vocab; each shape gets its own hue. */
.lever-shape-chip {
display: inline-block;
padding: 0.08rem 0.5rem;
font-size: 0.7rem;
font-weight: 500;
border-radius: 2px;
text-transform: none;
letter-spacing: 0.01em;
border: 1px solid transparent;
white-space: nowrap;
}
/* Outcome-based vocabulary (2026-05-20) — Primus sells outcomes, not bodies. */
.lever-shape-outcome-deliverable { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.lever-shape-design-and-handover { color: #5b21b6; border-color: #ddd6fe; background: #f5f3ff; }
.lever-shape-advisory-artifact { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.lever-shape-managed-outcomes { color: #9d174d; border-color: #fbcfe8; background: #fdf2f8; }
.lever-shape-training-with-completion { color: #0c4a6e; border-color: #bae6fd; background: #f0f9ff; }
.lever-shape-tooling-license { color: #3f3f73; border-color: #d4d4f0; background: #f5f5fd; }
/* Legacy keys — kept so historic PG rows display sensibly until regenerated. */
.lever-shape-advisory { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.lever-shape-staff-aug { color: #92740a; border-color: #f0d99c; background: #fffaf0; }
.lever-shape-joint-delivery { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.lever-shape-build-handover { color: #5b21b6; border-color: #ddd6fe; background: #f5f3ff; }
.lever-shape-managed-service { color: #9d174d; border-color: #fbcfe8; background: #fdf2f8; }
.lever-shape-training { color: #0c4a6e; border-color: #bae6fd; background: #f0f9ff; }
.lever-shape-tooling { color: #3f3f73; border-color: #d4d4f0; background: #f5f5fd; }
/* Sizing chip — neutral; carries commercial-form text (milestone shape, SLA tier). */
.lever-sizing-chip {
display: inline-block;
padding: 0.08rem 0.5rem;
font-size: 0.74rem;
color: #475569;
background: #f8fafc;
border: 1px solid var(--rule);
border-radius: 2px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.lever-title {
font-size: 1.0rem;
font-weight: 500;
margin: 0.4rem 0 0.7rem;
color: #0f172a;
line-height: 1.35;
}
/* The four content blocks — premise / opportunity / capabilities / risk.
Distinct from .rec-action-block dl: these are paragraph blocks because
each holds multiple sentences. */
.lever-section {
margin: 0 0 0.7rem;
}
.lever-section h4 {
margin: 0 0 0.25rem;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
}
.lever-section p {
margin: 0;
font-size: 0.88rem;
line-height: 1.55;
color: #1e293b;
}
.lever-section-premise h4 { color: #475569; }
.lever-section-opportunity {
background: #f8fafc;
padding: 0.6rem 0.8rem;
border-radius: 4px;
border-left: 2px solid #1e40af;
}
.lever-section-opportunity h4 { color: #1e40af; }
.lever-section-risk h4 { color: #b45309; }
.lever-section-risk p { color: #44403c; font-style: italic; }
.lever-card-footer {
gap: 0.5rem 0.9rem;
font-size: 0.78rem;
}
/* Rail — by engagement shape */
.lever-shape-list { list-style: none; padding: 0; margin: 0; }
.lever-shape-list li {
display: flex; align-items: center; justify-content: space-between;
padding: 0.3rem 0.85rem;
gap: 0.5rem;
}
.lever-shape-list .subitem-meta { font-size: 0.72rem; }
/* Levers nav entry — subtle Primus tint so the internal nature reads */
.menu-item-primus {
position: relative;
}
.menu-item-primus::after {
content: "";
position: absolute;
top: 6px; right: 6px;
width: 4px; height: 4px;
border-radius: 50%;
background: #b91c1c;
}
/* Edit form select dropdown — match input styling */
.rec-edit-label select {
display: block;
width: 100%;
margin-top: 0.2rem;
padding: 0.35rem 0.5rem;
font: inherit;
font-size: 0.9rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #1e293b;
background: white;
border: 1px solid var(--rule);
border-radius: 3px;
}