:root,
html[data-theme="dark"] {
/* CISO surface tokens — uso en .surface-calm y descendientes */
--calm-surface: linear-gradient(180deg, rgba(15, 26, 38, 0.72), rgba(10, 19, 28, 0.72));
--calm-border: rgba(148, 177, 195, 0.10);
--calm-text: #e8f0f7;
--calm-muted: #8ea4b6;
--calm-radius: 18px;
--calm-shadow: 0 8px 28px rgba(1, 5, 8, 0.18);
--calm-accent: var(--brand);
--calm-good: var(--success);
--calm-warn: var(--brand);
--calm-alert: var(--danger);
--calm-pad: 24px;
--calm-gap: 16px;
/* Premium art tokens — uso en dashboard role-aware y surfaces calm */
--art-radial-gradient-amber: linear-gradient(180deg, #ffd899 0%, #f4bb63 100%);
--art-radial-gradient-teal: linear-gradient(180deg, #50d3c6 0%, #88a9ff 100%);
--art-glow-amber: 0 0 0 3px rgba(244, 187, 99, 0.18);
--art-glow-teal: 0 0 0 3px rgba(80, 211, 198, 0.18);
--art-glow-success: 0 0 0 3px rgba(98, 226, 162, 0.18);
--art-glow-danger: 0 0 0 3px rgba(255, 122, 122, 0.18);
--art-hover-lift: translateY(-2px);
--art-hover-shadow: 0 18px 42px rgba(1, 5, 8, 0.32);
--art-card-backdrop: blur(8px);
--art-pulse-keyframes: pulse-soft;
--bg: #07121b;
--bg-deep: #03080d;
--bg-soft: #10293a;
--panel: rgba(10, 18, 28, 0.88);
--panel-strong: rgba(9, 18, 27, 0.96);
--panel-border: rgba(124, 161, 185, 0.16);
--text: #edf4fb;
--muted: #90a7b9;
--line: rgba(148, 177, 195, 0.14);
--brand: #f4bb63;
--brand-strong: #ffd899;
--brand-2: #50d3c6;
--brand-3: #88a9ff;
--danger: #ff7a7a;
--success: #62e2a2;
--accent: #50d3c6;
--shadow: 0 28px 80px rgba(1, 5, 8, 0.42);
--shadow-soft: 0 12px 36px rgba(1, 5, 8, 0.18);
--radius: 26px;
--app-background:
radial-gradient(circle at top left, rgba(244, 187, 99, 0.18), transparent 30%),
radial-gradient(circle at 84% 14%, rgba(80, 211, 198, 0.12), transparent 26%),
radial-gradient(circle at bottom left, rgba(136, 169, 255, 0.1), transparent 26%),
linear-gradient(180deg, #051019 0%, #0a1621 52%, #0d1925 100%);
--grid-line: rgba(125, 167, 196, 0.05);
--grid-mask: rgba(255, 255, 255, 0.24);
--orb-a: rgba(244, 187, 99, 0.18);
--orb-b: rgba(80, 211, 198, 0.12);
--panel-surface:
linear-gradient(180deg, rgba(18, 32, 45, 0.9), rgba(8, 16, 25, 0.96)),
rgba(10, 18, 28, 0.92);
--surface-elevated:
radial-gradient(circle at top left, rgba(244, 187, 99, 0.12), transparent 34%),
linear-gradient(180deg, rgba(13, 24, 36, 0.96), rgba(7, 15, 24, 0.96));
--surface-card:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
--surface-soft:
linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.025);
--surface-selected:
linear-gradient(135deg, rgba(244, 187, 99, 0.18), rgba(80, 211, 198, 0.08)),
rgba(255, 255, 255, 0.04);
--surface-selected-border: rgba(244, 187, 99, 0.34);
--surface-selected-shadow:
inset 0 0 0 1px rgba(244, 187, 99, 0.12),
0 14px 34px rgba(0, 0, 0, 0.16);
--surface-alert:
linear-gradient(180deg, rgba(255, 122, 122, 0.14), rgba(255, 122, 122, 0.04)),
rgba(255, 255, 255, 0.02);
--surface-watch:
linear-gradient(180deg, rgba(244, 187, 99, 0.14), rgba(244, 187, 99, 0.04)),
rgba(255, 255, 255, 0.02);
--surface-good:
linear-gradient(180deg, rgba(98, 226, 162, 0.12), rgba(98, 226, 162, 0.04)),
rgba(255, 255, 255, 0.02);
--surface-neutral:
linear-gradient(180deg, rgba(136, 169, 255, 0.12), rgba(136, 169, 255, 0.04)),
rgba(255, 255, 255, 0.02);
--surface-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
--button-primary-text: #07121b;
--button-primary-shadow: 0 12px 28px rgba(244, 187, 99, 0.24);
--button-secondary-bg: rgba(255, 255, 255, 0.05);
--button-secondary-border: rgba(255, 255, 255, 0.12);
--button-secondary-text: var(--text);
--button-danger-soft-border: rgba(255, 122, 122, 0.24);
--button-danger-soft-text: #ffd8d8;
--field-border: rgba(255, 255, 255, 0.1);
--field-bg: linear-gradient(180deg, rgba(5, 12, 18, 0.72), rgba(7, 14, 22, 0.6));
--field-focus-border: rgba(97, 212, 196, 0.7);
--field-focus-ring: 0 0 0 3px rgba(97, 212, 196, 0.14);
--field-invalid-border: rgba(255, 122, 122, 0.72);
--field-invalid-ring: 0 0 0 3px rgba(255, 122, 122, 0.12);
--menu-surface:
linear-gradient(180deg, rgba(10, 19, 29, 0.98), rgba(7, 14, 22, 0.98)),
rgba(10, 19, 29, 0.98);
--menu-border: rgba(255, 255, 255, 0.12);
--table-surface:
linear-gradient(180deg, rgba(12, 22, 32, 0.92), rgba(8, 16, 24, 0.9)),
rgba(7, 15, 24, 0.78);
--table-head-surface:
linear-gradient(180deg, rgba(18, 31, 44, 0.98), rgba(10, 19, 28, 0.98));
--table-row-even: rgba(255, 255, 255, 0.012);
--table-row-hover: rgba(255, 255, 255, 0.02);
--overlay-backdrop: rgba(3, 10, 16, 0.42);
--overlay-panel:
linear-gradient(180deg, rgba(18, 32, 45, 0.97), rgba(8, 16, 25, 0.98)),
rgba(10, 18, 28, 0.96);
--overlay-header:
linear-gradient(180deg, rgba(12, 24, 35, 0.96), rgba(12, 24, 35, 0.82));
--toast-surface: rgba(7, 18, 28, 0.94);
--chip-bg: rgba(255, 255, 255, 0.04);
--chip-border: rgba(255, 255, 255, 0.08);
--chip-hover-bg: rgba(80, 211, 198, 0.08);
--chip-hover-border: rgba(80, 211, 198, 0.28);
--score-dial-track: rgba(255, 255, 255, 0.08);
--score-dial-shadow: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.24));
--tone-alert-border: rgba(255, 122, 122, 0.2);
--tone-watch-border: rgba(244, 187, 99, 0.2);
--tone-good-border: rgba(98, 226, 162, 0.2);
--tone-neutral-border: rgba(136, 169, 255, 0.18);
--text-strong: #f8fcff;
--surface-hero-dashboard:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.14), transparent 28%),
radial-gradient(circle at left center, rgba(80, 211, 198, 0.12), transparent 32%),
linear-gradient(180deg, rgba(10, 22, 32, 0.96), rgba(6, 14, 22, 0.96));
--surface-hero-report:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.1), transparent 24%),
radial-gradient(circle at left top, rgba(136, 169, 255, 0.12), transparent 28%),
linear-gradient(180deg, rgba(13, 25, 38, 0.97), rgba(8, 17, 26, 0.94));
--surface-premium:
radial-gradient(circle at top right, rgba(80, 211, 198, 0.12), transparent 30%),
radial-gradient(circle at left top, rgba(244, 187, 99, 0.08), transparent 34%),
linear-gradient(180deg, rgba(17, 31, 44, 0.97), rgba(8, 16, 25, 0.96));
--surface-premium-soft:
radial-gradient(circle at top right, rgba(136, 169, 255, 0.13), transparent 30%),
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
rgba(255, 255, 255, 0.026);
--surface-premium-border: rgba(148, 177, 195, 0.18);
--surface-premium-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 22px 52px rgba(1, 8, 14, 0.22);
--surface-value-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
--surface-toggle-bg: rgba(255, 255, 255, 0.05);
--surface-toggle-border: rgba(255, 255, 255, 0.1);
--surface-toggle-active:
linear-gradient(135deg, rgba(244, 187, 99, 0.22), rgba(80, 211, 198, 0.1)),
rgba(255, 255, 255, 0.06);
--surface-form:
linear-gradient(180deg, rgba(11, 21, 31, 0.9), rgba(8, 16, 25, 0.78)),
rgba(7, 15, 24, 0.76);
--surface-form-border: rgba(148, 177, 195, 0.16);
--surface-form-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 8px 18px rgba(0, 0, 0, 0.08);
--surface-table:
linear-gradient(180deg, rgba(12, 22, 32, 0.92), rgba(8, 16, 24, 0.9)),
rgba(7, 15, 24, 0.78);
--surface-table-head:
linear-gradient(180deg, rgba(18, 31, 44, 0.98), rgba(10, 19, 28, 0.98));
--surface-chip:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
rgba(255, 255, 255, 0.03);
--surface-chip-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 8px 16px rgba(0, 0, 0, 0.08);
--surface-status:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
rgba(255, 255, 255, 0.03);
}
html[data-theme="light"] {
--calm-surface:
linear-gradient(180deg, rgba(255, 251, 246, 0.96), rgba(246, 239, 230, 0.96)),
rgba(255, 251, 246, 0.94);
--calm-border: rgba(84, 99, 113, 0.14);
--calm-text: #1d2830;
--calm-muted: #61707b;
--calm-shadow: 0 8px 28px rgba(48, 34, 17, 0.08);
--calm-accent: var(--brand);
--calm-good: var(--success);
--calm-warn: var(--brand);
--calm-alert: var(--danger);
--bg: #f7f2eb;
--bg-deep: #e8ddd0;
--bg-soft: #e4efe9;
--panel: rgba(255, 251, 246, 0.9);
--panel-strong: rgba(255, 250, 244, 0.98);
--panel-border: rgba(80, 66, 48, 0.12);
--text: #1d2830;
--muted: #61707b;
--line: rgba(84, 99, 113, 0.14);
--brand: #ba7f28;
--brand-strong: #efcd90;
--brand-2: #138a82;
--brand-3: #5d81d8;
--danger: #c65f5f;
--success: #1f9b6f;
--accent: #138a82;
--shadow: 0 26px 62px rgba(48, 34, 17, 0.12);
--shadow-soft: 0 14px 30px rgba(48, 34, 17, 0.08);
--app-background:
radial-gradient(circle at top left, rgba(186, 127, 40, 0.16), transparent 30%),
radial-gradient(circle at 84% 14%, rgba(19, 138, 130, 0.12), transparent 26%),
radial-gradient(circle at bottom left, rgba(93, 129, 216, 0.1), transparent 26%),
linear-gradient(180deg, #fbf7f1 0%, #f4ede4 52%, #ece4da 100%);
--grid-line: rgba(92, 112, 128, 0.07);
--grid-mask: rgba(76, 93, 106, 0.14);
--orb-a: rgba(186, 127, 40, 0.16);
--orb-b: rgba(19, 138, 130, 0.12);
--panel-surface:
linear-gradient(180deg, rgba(255, 251, 246, 0.96), rgba(245, 238, 229, 0.98)),
rgba(255, 251, 246, 0.94);
--surface-elevated:
radial-gradient(circle at top left, rgba(186, 127, 40, 0.08), transparent 34%),
linear-gradient(180deg, rgba(253, 249, 243, 0.98), rgba(243, 236, 227, 0.98));
--surface-card:
linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(249, 244, 237, 0.9)),
rgba(255, 255, 255, 0.84);
--surface-soft:
linear-gradient(135deg, rgba(186, 127, 40, 0.08), rgba(19, 138, 130, 0.05)),
rgba(255, 255, 255, 0.78);
--surface-selected:
linear-gradient(135deg, rgba(186, 127, 40, 0.14), rgba(19, 138, 130, 0.08)),
rgba(255, 255, 255, 0.94);
--surface-selected-border: rgba(186, 127, 40, 0.3);
--surface-selected-shadow:
inset 0 0 0 1px rgba(186, 127, 40, 0.12),
0 18px 32px rgba(66, 50, 31, 0.08);
--surface-alert:
linear-gradient(180deg, rgba(198, 95, 95, 0.1), rgba(198, 95, 95, 0.02)),
rgba(255, 247, 246, 0.92);
--surface-watch:
linear-gradient(180deg, rgba(186, 127, 40, 0.12), rgba(186, 127, 40, 0.03)),
rgba(255, 250, 241, 0.92);
--surface-good:
linear-gradient(180deg, rgba(31, 155, 111, 0.1), rgba(31, 155, 111, 0.03)),
rgba(245, 252, 249, 0.92);
--surface-neutral:
linear-gradient(180deg, rgba(93, 129, 216, 0.1), rgba(93, 129, 216, 0.03)),
rgba(246, 249, 255, 0.92);
--surface-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
--button-primary-text: #172129;
--button-primary-shadow: 0 14px 28px rgba(186, 127, 40, 0.18);
--button-secondary-bg: rgba(255, 255, 255, 0.88);
--button-secondary-border: rgba(84, 99, 113, 0.14);
--button-secondary-text: #23303a;
--button-danger-soft-border: rgba(198, 95, 95, 0.24);
--button-danger-soft-text: #913737;
--field-border: rgba(84, 99, 113, 0.16);
--field-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 236, 0.92));
--field-focus-border: rgba(19, 138, 130, 0.58);
--field-focus-ring: 0 0 0 3px rgba(19, 138, 130, 0.12);
--field-invalid-border: rgba(198, 95, 95, 0.5);
--field-invalid-ring: 0 0 0 3px rgba(198, 95, 95, 0.12);
--menu-surface:
linear-gradient(180deg, rgba(255, 251, 246, 0.99), rgba(246, 239, 230, 0.99)),
rgba(255, 251, 246, 0.99);
--menu-border: rgba(84, 99, 113, 0.12);
--table-surface:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 239, 229, 0.95)),
rgba(255, 255, 255, 0.86);
--table-head-surface:
linear-gradient(180deg, rgba(250, 244, 236, 0.98), rgba(241, 233, 223, 0.98));
--table-row-even: rgba(84, 99, 113, 0.035);
--table-row-hover: rgba(19, 138, 130, 0.05);
--overlay-backdrop: rgba(58, 42, 25, 0.2);
--overlay-panel:
linear-gradient(180deg, rgba(255, 251, 246, 0.98), rgba(244, 237, 228, 0.98)),
rgba(255, 251, 246, 0.96);
--overlay-header:
linear-gradient(180deg, rgba(255, 249, 242, 0.98), rgba(248, 241, 233, 0.92));
--toast-surface: rgba(255, 249, 242, 0.96);
--chip-bg: rgba(255, 255, 255, 0.8);
--chip-border: rgba(84, 99, 113, 0.12);
--chip-hover-bg: rgba(19, 138, 130, 0.08);
--chip-hover-border: rgba(19, 138, 130, 0.24);
--score-dial-track: rgba(29, 40, 48, 0.12);
--score-dial-shadow: drop-shadow(0 12px 24px rgba(58, 42, 25, 0.12));
--tone-alert-border: rgba(198, 95, 95, 0.2);
--tone-watch-border: rgba(186, 127, 40, 0.2);
--tone-good-border: rgba(31, 155, 111, 0.2);
--tone-neutral-border: rgba(93, 129, 216, 0.18);
--text-strong: #16242d;
--surface-hero-dashboard:
radial-gradient(circle at top right, rgba(186, 127, 40, 0.16), transparent 28%),
radial-gradient(circle at left center, rgba(19, 138, 130, 0.12), transparent 30%),
linear-gradient(180deg, rgba(255, 251, 246, 0.98), rgba(243, 235, 225, 0.98));
--surface-hero-report:
radial-gradient(circle at top right, rgba(186, 127, 40, 0.12), transparent 24%),
radial-gradient(circle at left top, rgba(93, 129, 216, 0.12), transparent 28%),
linear-gradient(180deg, rgba(255, 251, 246, 0.99), rgba(244, 236, 227, 0.98));
--surface-premium:
radial-gradient(circle at top right, rgba(19, 138, 130, 0.11), transparent 28%),
radial-gradient(circle at left top, rgba(186, 127, 40, 0.08), transparent 32%),
linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 239, 229, 0.98));
--surface-premium-soft:
radial-gradient(circle at top right, rgba(93, 129, 216, 0.1), transparent 30%),
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 244, 237, 0.94)),
rgba(255, 255, 255, 0.88);
--surface-premium-border: rgba(84, 99, 113, 0.14);
--surface-premium-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.56),
0 18px 40px rgba(48, 34, 17, 0.08);
--surface-value-shadow: 0 10px 22px rgba(88, 70, 47, 0.08);
--surface-toggle-bg: rgba(255, 255, 255, 0.82);
--surface-toggle-border: rgba(84, 99, 113, 0.14);
--surface-toggle-active:
linear-gradient(135deg, rgba(186, 127, 40, 0.18), rgba(19, 138, 130, 0.08)),
rgba(255, 255, 255, 0.95);
--surface-form:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 241, 233, 0.96)),
rgba(255, 255, 255, 0.92);
--surface-form-border: rgba(84, 99, 113, 0.16);
--surface-form-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.62),
0 8px 18px rgba(88, 70, 47, 0.06);
--surface-table:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 239, 229, 0.95)),
rgba(255, 255, 255, 0.86);
--surface-table-head:
linear-gradient(180deg, rgba(250, 244, 236, 0.98), rgba(241, 233, 223, 0.98));
--surface-chip:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 244, 237, 0.96)),
rgba(255, 255, 255, 0.88);
--surface-chip-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.62),
0 8px 16px rgba(88, 70, 47, 0.05);
--surface-status:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 241, 233, 0.96)),
rgba(255, 255, 255, 0.9);
}
/* Light theme surface parity: newer premium surfaces must not retain dark-only fills. */
html[data-theme="light"] .premium-sidebar,
html[data-theme="light"] body.sidebar-compact .premium-sidebar,
html[data-theme="light"] :is(body.task-mode, body.simple-mode) .premium-sidebar,
html[data-theme="light"] :is(body.task-mode, body.simple-mode).sidebar-compact .premium-sidebar {
border-color: var(--panel-border);
background:
radial-gradient(circle at 16% 5%, rgba(19, 138, 130, 0.08), transparent 30%),
var(--panel-surface);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.58),
0 24px 58px rgba(48, 34, 17, 0.1);
}
html[data-theme="light"] .premium-sidebar-sticky-head {
background:
linear-gradient(180deg, rgba(255, 251, 246, 0.995) 0%, rgba(246, 239, 230, 0.98) 84%, rgba(246, 239, 230, 0.9) 100%);
}
html[data-theme="light"] :is(body.task-mode, body.simple-mode) .simple-module-more-list {
border-color: var(--surface-selected-border);
background: var(--menu-surface);
box-shadow: 0 18px 44px rgba(48, 34, 17, 0.12);
}
html[data-theme="light"] .premium-sidebar .premium-nav-icon::before,
html[data-theme="light"] body.sidebar-compact .premium-sidebar .premium-nav-icon::before,
html[data-theme="light"] :is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-icon::before {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 241, 233, 0.96)),
rgba(255, 255, 255, 0.88);
box-shadow:
inset 0 0 0 1px rgba(84, 99, 113, 0.08),
0 8px 18px rgba(48, 34, 17, 0.08);
}
html[data-theme="light"] .dossier-table-surface tr,
html[data-theme="light"] .risk-register-card,
html[data-theme="light"] .requirement-dossier-card,
html[data-theme="light"] .framework-card {
background:
radial-gradient(circle at 8% 0%, rgba(19, 138, 130, 0.08), transparent 30%),
var(--surface-card);
box-shadow: 0 18px 38px rgba(48, 34, 17, 0.08);
}
html[data-theme="light"] .risk-register-pager,
html[data-theme="light"] .register-pager,
html[data-theme="light"] .incident-meta-grid span,
html[data-theme="light"] .reference-insight-metrics span {
background: var(--surface-soft);
}
html[data-theme="light"] .evidence-upload-shell input[type="file"] {
border-color: var(--field-border);
background: var(--field-bg);
}
.surface-calm,
.surface-calm * {
font-feature-settings: "ss01" on, "ss03" on;
}
.surface-calm .calm-card {
background: var(--calm-surface);
border: 1px solid var(--calm-border);
border-radius: var(--calm-radius);
box-shadow: var(--calm-shadow);
padding: var(--calm-pad);
color: var(--calm-text);
}
.surface-calm .calm-card-title {
margin-bottom: 8px;
color: var(--calm-muted);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.surface-calm .calm-card-value {
color: var(--calm-text);
font-size: 44px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.05;
}
.surface-calm .calm-card-value.is-good {
color: var(--calm-good);
}
.surface-calm .calm-card-value.is-warn {
color: var(--calm-warn);
}
.surface-calm .calm-card-value.is-alert {
color: var(--calm-alert);
}
@keyframes pulse-soft {
0%,
100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
.surface-calm .calm-card {
transition:
transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.surface-calm .calm-card:hover {
transform: var(--art-hover-lift);
box-shadow: var(--art-hover-shadow);
}
.surface-calm .calm-card:active {
transform: translateY(0) scale(0.992);
box-shadow: var(--calm-shadow);
}
.pulse-dot {
animation: var(--art-pulse-keyframes) 2s ease-in-out infinite;
}
.premium-radial-dial {
position: relative;
display: grid;
place-items: center;
min-width: 9rem;
color: var(--calm-text);
}
.premium-radial-dial-svg {
width: min(100%, 9.5rem);
filter: var(--score-dial-shadow);
overflow: visible;
transform: rotate(-90deg);
}
.premium-radial-dial-track,
.premium-radial-dial-progress,
.premium-radial-dial-inner {
fill: none;
}
.premium-radial-dial-track {
stroke: var(--score-dial-track);
stroke-width: 12;
}
.premium-radial-dial-progress {
stroke: url("#premium-radial-gradient-amber");
stroke-width: 12;
stroke-linecap: round;
transition: stroke-dashoffset 800ms ease;
}
.premium-radial-dial-ring-teal .premium-radial-dial-inner {
stroke: url("#premium-radial-gradient-teal");
}
.premium-radial-dial-ring-amber .premium-radial-dial-inner {
stroke: url("#premium-radial-gradient-amber");
}
.premium-radial-dial-inner {
stroke-width: 5;
opacity: 0.7;
}
.premium-radial-dial-content {
position: absolute;
inset: auto;
display: grid;
gap: 0.1rem;
place-items: center;
text-align: center;
}
.premium-radial-dial-value {
color: var(--calm-text);
font-size: clamp(2rem, 5vw, 3rem);
line-height: 0.95;
letter-spacing: -0.05em;
}
.premium-radial-dial-content span {
color: var(--calm-muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.premium-radial-segments {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
justify-content: center;
margin-top: 0.65rem;
}
.premium-radial-segments span {
display: inline-flex;
gap: 0.35rem;
align-items: center;
color: var(--calm-muted);
font-size: 0.78rem;
font-weight: 700;
}
.premium-radial-segments i {
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: var(--brand-2);
box-shadow: var(--art-glow-teal);
}
@keyframes premium-shimmer {
0% {
background-position: 120% 0;
}
100% {
background-position: -120% 0;
}
}
.premium-skeleton {
display: grid;
gap: 0.55rem;
width: 100%;
min-width: 0;
}
.premium-skeleton-line {
display: block;
width: 100%;
height: 1rem;
border-radius: 999px;
background:
linear-gradient(
110deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.16) 24%,
rgba(255, 255, 255, 0.06) 48%
),
rgba(255, 255, 255, 0.06);
background-size: 220% 100%;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
animation: premium-shimmer 1.35s linear infinite;
}
.premium-skeleton-size-sm .premium-skeleton-line {
height: 0.78rem;
}
.premium-skeleton-size-md .premium-skeleton-line {
height: 1rem;
}
.premium-skeleton-size-lg .premium-skeleton-line {
height: 1.55rem;
}
.premium-skeleton-size-xl .premium-skeleton-line {
height: 2.25rem;
}
.premium-skeleton-size-orb {
width: 10rem;
max-width: 100%;
aspect-ratio: 1;
}
.premium-skeleton-size-orb .premium-skeleton-line {
width: 100%;
height: 100%;
border-radius: 999px;
}
.premium-skeleton-width-short {
width: 40%;
}
.premium-skeleton-width-mid {
width: 62%;
}
.premium-skeleton-width-wide {
width: 84%;
}
.premium-skeleton-width-full {
width: 100%;
}
.dashboard-skeleton-card {
min-height: 10rem;
pointer-events: none;
}
.dashboard-skeleton-copy {
display: grid;
align-content: center;
gap: 0.72rem;
min-width: 0;
}
.dashboard-posture-skeleton {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: clamp(1rem, 3vw, 2.5rem);
width: 100%;
}
.dashboard-timeline-skeleton {
display: grid;
gap: 0.8rem;
}
.dashboard-skeleton-row {
display: grid;
gap: 0.55rem;
padding: 0.85rem 0.95rem;
border: 1px solid var(--surface-premium-border);
border-radius: 20px;
background: rgba(255, 255, 255, 0.035);
}
@media (prefers-reduced-motion: reduce) {
.premium-skeleton-line {
animation: none;
}
}
@media (max-width: 760px) {
.dashboard-posture-skeleton {
grid-template-columns: 1fr;
}
.premium-skeleton-size-orb {
width: 7.5rem;
}
}
.premium-sparkline {
display: block;
width: 100%;
min-height: 3rem;
overflow: visible;
}
.premium-sparkline-fill {
opacity: 0.75;
}
.premium-sparkline-line {
filter: drop-shadow(0 6px 12px rgba(80, 211, 198, 0.16));
stroke-dasharray: 180;
stroke-dashoffset: 180;
animation: premium-sparkline-draw 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes premium-sparkline-draw {
to {
stroke-dashoffset: 0;
}
}
.premium-timeline-rail {
position: relative;
display: grid;
gap: 0.85rem;
margin: 0;
padding: 0;
list-style: none;
}
.premium-timeline-rail::before {
content: "";
position: absolute;
top: 0.35rem;
bottom: 0.35rem;
left: 0.42rem;
width: 2px;
border-radius: 999px;
background: linear-gradient(180deg, var(--brand), var(--brand-2), var(--brand-3));
opacity: 0.42;
}
.premium-timeline-item {
position: relative;
display: grid;
grid-template-columns: 0.9rem minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
}
.premium-timeline-dot {
position: relative;
z-index: 1;
width: 0.82rem;
height: 0.82rem;
margin-top: 0.25rem;
border-radius: 999px;
background: var(--brand-3);
box-shadow: 0 0 0 4px rgba(136, 169, 255, 0.16);
}
.premium-timeline-item-good .premium-timeline-dot {
background: var(--success);
box-shadow: var(--art-glow-success);
}
.premium-timeline-item-warn .premium-timeline-dot {
background: var(--brand);
box-shadow: var(--art-glow-amber);
}
.premium-timeline-item-info .premium-timeline-dot {
background: var(--brand-2);
box-shadow: var(--art-glow-teal);
}
.premium-timeline-content {
display: grid;
gap: 0.2rem;
min-width: 0;
}
.premium-timeline-content p,
.premium-timeline-content time {
margin: 0;
}
.premium-timeline-content p {
color: var(--calm-text);
line-height: 1.45;
}
.premium-timeline-content time {
color: var(--calm-muted);
font-size: 0.8rem;
}
.premium-empty-illustration {
display: block;
width: min(100%, 9rem);
height: auto;
margin-bottom: 0.75rem;
}
.dashboard-ciso-premium-posture {
display: grid;
grid-template-columns: minmax(8rem, 0.55fr) minmax(0, 1fr);
gap: 1rem;
align-items: center;
}
.dashboard-operator-premium-posture {
display: grid;
grid-template-columns: minmax(8rem, 0.52fr) minmax(0, 1fr);
gap: 1rem;
align-items: center;
}
.dashboard-analyst-premium-posture {
display: grid;
grid-template-columns: minmax(9rem, 0.5fr) minmax(0, 1fr);
gap: 1rem;
align-items: center;
}
.dashboard-auditor-premium-posture {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
align-items: center;
min-width: 0;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--calm-accent) 28%, var(--calm-border));
border-radius: 26px;
background:
radial-gradient(circle at 88% 10%, rgba(244, 187, 99, 0.16), transparent 34%),
color-mix(in srgb, var(--calm-surface) 84%, transparent);
overflow: hidden;
}
.dashboard-auditor-premium-posture::after {
content: "AUDIT";
position: absolute;
right: -0.3rem;
bottom: -0.6rem;
color: rgba(244, 187, 99, 0.08);
font-size: clamp(3.2rem, 10vw, 7rem);
font-weight: 900;
letter-spacing: 0.08em;
pointer-events: none;
}
.dashboard-auditor-seal {
display: grid;
place-items: center;
width: clamp(4.4rem, 9vw, 6.3rem);
height: clamp(4.4rem, 9vw, 6.3rem);
border: 1px solid color-mix(in srgb, var(--calm-accent) 48%, var(--calm-border));
border-radius: 999px;
background: rgba(244, 187, 99, 0.14);
color: var(--calm-accent);
font-size: clamp(2rem, 5vw, 3.4rem);
font-weight: 900;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
}
.dashboard-auditor-attestation {
position: relative;
z-index: 1;
display: grid;
gap: 0.4rem;
min-width: 0;
text-align: left;
}
.dashboard-auditor-attestation span {
color: var(--calm-muted);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dashboard-auditor-attestation strong {
color: var(--calm-text);
font-size: clamp(1.35rem, 3vw, 2rem);
letter-spacing: -0.04em;
}
.dashboard-auditor-attestation p {
margin: 0;
color: var(--calm-muted);
}
.dashboard-auditor-attestation code {
display: block;
max-width: 100%;
overflow: hidden;
color: var(--calm-accent);
font-family: "SFMono-Regular", "Cascadia Code", "Liberation Mono", monospace;
font-size: 0.72rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-analyst-open-ring {
display: grid;
gap: 0.4rem;
min-width: 0;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--calm-border));
border-radius: 24px;
background:
radial-gradient(circle at 32% 22%, rgba(255, 122, 122, 0.18), transparent 48%),
color-mix(in srgb, var(--calm-surface) 82%, transparent);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}
.dashboard-analyst-open-ring span {
color: var(--calm-muted);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dashboard-analyst-open-ring strong {
font-size: clamp(3.2rem, 8vw, 6rem);
letter-spacing: -0.07em;
line-height: 0.9;
}
.dashboard-analyst-severity-stack {
display: flex;
min-width: 0;
overflow: hidden;
border: 1px solid var(--calm-border);
border-radius: 999px;
background: color-mix(in srgb, var(--calm-surface) 68%, transparent);
}
.dashboard-analyst-severity-segment {
flex: 0 1 var(--ui-percent);
min-width: 1.8rem;
padding: 0.32rem 0.45rem;
color: #10151f;
font-size: 0.72rem;
font-weight: 900;
text-align: center;
}
.dashboard-analyst-severity-critical {
background: var(--danger);
}
.dashboard-analyst-severity-high {
background: #ff9a66;
}
.dashboard-analyst-severity-medium {
background: var(--brand);
}
.dashboard-analyst-severity-low {
background: var(--brand-2);
}
.dashboard-ciso-premium-copy {
display: grid;
gap: 0.75rem;
min-width: 0;
}
.dashboard-ciso-premium-copy .calm-card-value {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
align-items: baseline;
}
.dashboard-ciso-premium-copy .calm-card-value span {
color: var(--calm-muted);
font-size: 0.45em;
letter-spacing: 0;
}
.dashboard-ciso-premium-copy p {
margin: 0;
color: var(--calm-muted);
}
.dashboard-ciso-card-sparkline {
display: block;
min-width: 0;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
background: var(--app-background);
color: var(--text);
font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
letter-spacing: 0.01em;
text-rendering: optimizeLegibility;
}
body {
position: relative;
overflow-x: hidden;
}
body.notification-panel-open {
overflow: hidden;
}
body.discard-confirm-open {
overflow: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(180deg, var(--grid-mask), transparent 82%);
opacity: 0.32;
}
.background-orb {
position: fixed;
border-radius: 999px;
filter: blur(100px);
opacity: 0.7;
pointer-events: none;
}
.background-orb-a {
width: 20rem;
height: 20rem;
background: var(--orb-a);
top: 2rem;
right: 6rem;
}
.background-orb-b {
width: 24rem;
height: 24rem;
background: var(--orb-b);
bottom: 1rem;
left: 2rem;
}
.shell {
position: relative;
z-index: 2;
width: min(1480px, calc(100vw - 2rem));
margin: 0 auto;
padding: 1.5rem 0 3.5rem;
display: grid;
gap: 1rem;
}
.shell-language {
width: fit-content;
justify-self: end;
display: grid;
grid-template-columns: auto auto auto;
gap: 0.75rem;
align-items: end;
padding: 0.8rem 0.95rem;
border-radius: 20px;
}
.shell-language-head {
display: grid;
gap: 0.2rem;
min-width: 8.4rem;
padding-right: 0.25rem;
}
.shell-language-head .eyebrow {
margin-bottom: 0;
}
.shell-language-head strong {
color: var(--text-strong);
font-size: 0.96rem;
line-height: 1.15;
}
.shell-utility-field {
min-width: 8.8rem;
display: grid;
gap: 0.35rem;
}
.shell-language label {
color: var(--muted);
font-size: 0.88rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.shell-language select {
min-width: 0;
padding-block: 0.75rem;
}
:is(body.task-mode, body.simple-mode).workspace-open .shell {
gap: 0.55rem;
padding-top: 0.75rem;
}
:is(body.task-mode, body.simple-mode).workspace-open .app-shell {
gap: 0.45rem;
}
:is(body.task-mode, body.simple-mode).workspace-open .shell-language {
display: none;
}
:is(body.task-mode, body.simple-mode).workspace-open .shell-language-head {
display: none;
}
:is(body.task-mode, body.simple-mode).workspace-open .shell-utility-field {
min-width: 6.9rem;
gap: 0.18rem;
}
:is(body.task-mode, body.simple-mode).workspace-open .shell-language label {
font-size: 0.64rem;
letter-spacing: 0.07em;
}
:is(body.task-mode, body.simple-mode).workspace-open .shell-language select {
min-height: 2rem;
padding-block: 0.36rem;
border-radius: 12px;
font-size: 0.86rem;
}
.login-shell {
min-height: calc(100vh - 5rem);
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 2rem;
align-items: center;
}
.login-shell > .auth-guide {
display: none;
}
.login-shell .hero-copy {
gap: 0.9rem;
}
.login-shell .hero-copy h1 {
max-width: 12ch;
font-size: clamp(2.75rem, 5vw, 4.8rem);
}
.login-shell .lede {
line-height: 1.55;
}
.login-shell .hero-points {
gap: 0.5rem;
margin-top: 0.45rem;
}
.login-shell .auth-panel {
padding: 1.45rem;
gap: 0.82rem;
}
.auth-guide {
grid-column: 1 / -1;
display: grid;
gap: 0.95rem;
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--info) 12%, transparent), transparent 30%),
linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 92%, transparent), color-mix(in srgb, var(--surface-panel) 95%, transparent)),
var(--panel-surface);
}
.auth-guide-copy {
margin: -0.2rem 0 0.1rem;
max-width: 72ch;
color: var(--muted);
line-height: 1.6;
}
.auth-guide-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
}
.auth-guide-card {
display: grid;
gap: 0.35rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid var(--panel-border);
background: var(--surface-card);
box-shadow: var(--surface-inset-shadow);
}
.auth-role-preview {
display: grid;
gap: 0.95rem;
padding-top: 0.2rem;
}
.auth-shadow-preview {
display: grid;
gap: 1rem;
padding: 1rem 1.05rem;
border-radius: 22px;
border: 1px solid var(--panel-border);
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--info) 14%, transparent), transparent 42%),
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 90%, transparent), color-mix(in srgb, var(--surface-panel) 95%, transparent)),
var(--surface-card);
box-shadow: var(--surface-inset-shadow);
}
.auth-shadow-preview-alert {
border-color: color-mix(in srgb, var(--danger) 30%, var(--panel-border));
}
.auth-shadow-preview-watch {
border-color: color-mix(in srgb, var(--warning) 32%, var(--panel-border));
}
.auth-shadow-preview-good,
.auth-shadow-preview-contained {
border-color: color-mix(in srgb, var(--success) 28%, var(--panel-border));
}
.auth-shadow-preview-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.auth-shadow-preview-head h4 {
margin: 0;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
letter-spacing: 0.03em;
}
.auth-shadow-preview-copy {
margin: 0.35rem 0 0;
color: var(--muted);
line-height: 1.6;
}
.auth-shadow-preview-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem;
}
.auth-shadow-preview-card {
display: grid;
gap: 0.3rem;
padding: 0.9rem 0.95rem;
border-radius: 18px;
border: 1px solid var(--panel-border);
background: color-mix(in srgb, var(--surface-card) 94%, transparent);
}
.auth-shadow-preview-card span,
.auth-shadow-preview-card small {
color: var(--muted);
}
.auth-shadow-preview-card span {
font-size: 0.76rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.auth-shadow-preview-card strong {
font-size: 1.4rem;
line-height: 1;
}
.auth-shadow-preview-card small {
line-height: 1.45;
}
.auth-role-preview-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.85rem;
}
.auth-role-preview-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border-radius: 20px;
border: 1px solid var(--panel-border);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 92%, transparent), color-mix(in srgb, var(--surface-panel) 94%, transparent)),
var(--surface-card);
box-shadow: var(--surface-inset-shadow);
}
.auth-role-preview-card-shadow {
border-color: color-mix(in srgb, var(--info) 42%, var(--panel-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--info) 16%, transparent), transparent 42%),
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 90%, transparent), color-mix(in srgb, var(--surface-panel) 95%, transparent)),
var(--surface-card);
}
.auth-role-preview-head,
.auth-role-preview-meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.85rem;
}
.auth-role-preview-head {
align-items: center;
}
.auth-role-preview-head strong,
.auth-role-preview-meta strong {
display: block;
}
.auth-role-preview-meta {
padding-top: 0.2rem;
border-top: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
}
.auth-role-preview-meta span {
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.auth-role-preview-card .signal-copy {
margin: 0;
}
.login-auth-note {
margin: 0.2rem 0 0;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.5;
}
.hero-copy h1,
.panel-header h2,
.topbar h2,
.section-heading h3 {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
letter-spacing: 0.03em;
margin: 0;
}
.hero-copy {
display: grid;
gap: 1.25rem;
}
.hero-copy h1 {
font-size: clamp(3.3rem, 6vw, 5.9rem);
line-height: 0.92;
max-width: 10ch;
}
.lede {
max-width: 56ch;
color: var(--muted);
font-size: 1.05rem;
line-height: 1.75;
margin: 0;
}
.hero-points {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 1.5rem;
}
.hero-points span,
.pill {
padding: 0.62rem 0.95rem;
border-radius: 999px;
background: var(--surface-chip);
border: 1px solid var(--chip-border);
color: var(--text);
font-size: 0.9rem;
box-shadow: var(--surface-chip-shadow);
font-weight: 600;
letter-spacing: 0.01em;
}
.eyebrow {
margin: 0 0 0.65rem;
color: var(--brand);
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 0.82rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.panel {
border: 1px solid var(--panel-border);
background: var(--panel-surface);
box-shadow: var(--shadow);
border-radius: var(--radius);
backdrop-filter: blur(28px);
}
.auth-panel {
padding: 2rem;
display: grid;
gap: 1.05rem;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--brand) 10%, transparent), transparent 28%),
linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 92%, transparent), color-mix(in srgb, var(--surface-panel) 94%, transparent)),
var(--panel-surface);
}
.auth-panel-copy {
margin: 0.45rem 0 0;
color: var(--muted);
line-height: 1.55;
}
.auth-quick-check {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.auth-quick-check span {
padding: 0.58rem 0.82rem;
border-radius: 999px;
border: 1px solid var(--chip-border);
background: var(--surface-chip);
color: var(--text);
font-size: 0.84rem;
letter-spacing: 0.03em;
box-shadow: var(--surface-chip-shadow);
}
.login-sso-options {
display: grid;
gap: 0.85rem;
}
.login-sso-divider {
margin: 0.1rem 0 0;
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.login-sso-note {
margin: 0;
color: var(--muted);
font-size: 0.92rem;
}
.login-sso-button-grid {
display: grid;
gap: 0.75rem;
}
.login-sso-button {
display: grid;
justify-items: start;
gap: 0.2rem;
text-decoration: none;
}
.login-sso-button-match {
border-color: color-mix(in srgb, var(--info) 42%, var(--panel-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--info) 14%, transparent), transparent 42%),
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 92%, transparent), color-mix(in srgb, var(--surface-panel) 96%, transparent)),
var(--surface-card);
}
.login-sso-button small {
color: var(--muted);
font-size: 0.82rem;
}
.login-route-hint-note {
margin: -0.1rem 0 0;
padding: 0.85rem 0.95rem;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--panel-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%),
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 92%, transparent), color-mix(in srgb, var(--surface-panel) 97%, transparent)),
var(--surface-card);
color: var(--muted-strong);
font-size: 0.88rem;
line-height: 1.55;
}
.login-sso-recommendation {
display: grid;
}
.login-sso-recommendation-card {
display: grid;
gap: 0.85rem;
padding: 1rem 1.05rem;
border-radius: 20px;
border: 1px solid var(--panel-border);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 92%, transparent), color-mix(in srgb, var(--surface-panel) 95%, transparent)),
var(--surface-card);
box-shadow: var(--surface-inset-shadow);
}
.login-sso-recommendation-card-emphasis {
border-color: color-mix(in srgb, var(--info) 42%, var(--panel-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--info) 16%, transparent), transparent 42%),
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 90%, transparent), color-mix(in srgb, var(--surface-panel) 95%, transparent)),
var(--surface-card);
}
.login-sso-recommendation-head,
.login-sso-recommendation-meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.85rem;
}
.login-sso-recommendation-head h4,
.login-sso-recommendation-meta strong {
margin: 0;
display: block;
}
.login-sso-recommendation-meta {
padding-top: 0.15rem;
border-top: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
}
.login-sso-recommendation-meta span {
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.login-sso-recommendation-button {
margin-top: 0.15rem;
}
.login-form-sso-route-locked #login-submit-button[data-login-route-locked="true"] {
border-color: color-mix(in srgb, var(--accent) 42%, var(--panel-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 20%, transparent), transparent 42%),
linear-gradient(180deg, color-mix(in srgb, var(--brand) 90%, white 10%), color-mix(in srgb, var(--brand) 88%, black 12%));
}
label,
.compact-form {
display: grid;
gap: 0.5rem;
}
label span {
color: var(--muted-strong);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
input,
select,
textarea,
button {
font: inherit;
}
input,
select,
textarea {
width: 100%;
padding: 0.95rem 1rem;
border-radius: 16px;
border: 1px solid var(--surface-form-border);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
var(--surface-form);
color: var(--text);
box-shadow: var(--surface-form-shadow);
outline: none;
transition:
border-color 160ms ease,
box-shadow 160ms ease,
transform 160ms ease,
background 160ms ease;
}
input:hover,
select:hover,
textarea:hover {
border-color: color-mix(in srgb, var(--brand) 16%, var(--surface-form-border));
}
textarea {
min-height: 5.8rem;
resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--field-focus-border);
box-shadow: var(--field-focus-ring);
}
.enhanced-select-shell {
position: relative;
display: block;
width: 100%;
}
.enhanced-select-native {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
pointer-events: none;
appearance: none;
}
.enhanced-select-trigger {
width: 100%;
min-height: 3.7rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
padding: 0.95rem 1rem;
border-radius: 16px;
border: 1px solid var(--surface-form-border);
background: var(--surface-form);
color: var(--text);
box-shadow: var(--surface-form-shadow);
text-align: left;
cursor: pointer;
transition:
border-color 160ms ease,
box-shadow 160ms ease,
transform 160ms ease,
opacity 160ms ease;
}
.enhanced-select-trigger:hover {
transform: translateY(-1px);
}
.enhanced-select-trigger:focus-visible {
border-color: var(--field-focus-border);
box-shadow: var(--field-focus-ring);
}
.enhanced-select-trigger:disabled {
cursor: not-allowed;
opacity: 0.62;
transform: none;
}
.enhanced-select-trigger-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.enhanced-select-trigger.placeholder .enhanced-select-trigger-label {
color: var(--muted);
}
.enhanced-select-trigger-icon {
flex: none;
width: 0.7rem;
height: 0.7rem;
border-right: 2px solid color-mix(in srgb, var(--text) 88%, transparent);
border-bottom: 2px solid color-mix(in srgb, var(--text) 88%, transparent);
transform: rotate(45deg) translateY(-1px);
transition: transform 160ms ease;
}
.enhanced-select-shell.open .enhanced-select-trigger {
border-color: var(--field-focus-border);
box-shadow: var(--field-focus-ring);
}
.enhanced-select-shell.open .enhanced-select-trigger-icon {
transform: rotate(-135deg) translateX(-1px);
}
.enhanced-select-shell.is-disabled .enhanced-select-trigger {
cursor: not-allowed;
opacity: 0.62;
transform: none;
}
.enhanced-select-shell.is-invalid .enhanced-select-trigger {
border-color: var(--field-invalid-border);
box-shadow: var(--field-invalid-ring);
}
.enhanced-select-menu {
position: fixed;
z-index: 70;
display: grid;
gap: 0.2rem;
padding: 0.4rem;
overflow-y: auto;
border-radius: 20px;
border: 1px solid var(--menu-border);
background: var(--menu-surface);
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.34),
0 0 0 1px rgba(255, 255, 255, 0.03);
}
.enhanced-select-option {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.75rem 0.85rem;
border: 0;
border-radius: 14px;
background: transparent;
color: var(--text);
text-align: left;
cursor: pointer;
}
.enhanced-select-option:hover,
.enhanced-select-option.active {
background: rgba(80, 211, 198, 0.14);
}
.enhanced-select-option.selected {
background: rgba(244, 187, 99, 0.16);
color: #ffe1ae;
font-weight: 700;
}
.enhanced-select-option[disabled] {
cursor: not-allowed;
opacity: 0.45;
}
.button {
border: none;
border-radius: 999px;
padding: 0.9rem 1.35rem;
cursor: pointer;
transition:
transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
background 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.button,
.module-role-button,
.module-nav-button,
.admin-tab-button,
.module-subnav-button,
.table-action-button,
.chip-button,
.inline-link-button,
.link-button {
text-decoration: none;
}
.action-button,
.button-primary,
.table-action-button.emphasis {
box-shadow:
var(--button-primary-shadow),
inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}
.action-button::after {
content: "→";
margin-left: 0.55rem;
font-weight: 800;
}
.button:hover {
transform: translateY(-1px);
}
.button:active {
transform: translateY(0) scale(0.985);
box-shadow: none;
}
.button-primary {
background: linear-gradient(135deg, var(--brand), var(--brand-strong));
color: var(--button-primary-text);
font-weight: 700;
box-shadow: var(--button-primary-shadow);
}
.button-secondary {
background: var(--button-secondary-bg);
color: var(--button-secondary-text);
border: 1px solid var(--button-secondary-border);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 10px 22px rgba(0, 0, 0, 0.06);
}
.button.action-button {
box-shadow:
var(--button-primary-shadow),
inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}
.button-secondary.danger-soft {
border-color: var(--button-danger-soft-border);
color: var(--button-danger-soft-text);
}
.login-hint {
margin: 0;
color: var(--muted);
min-height: 1.2rem;
}
.app-shell {
display: grid;
gap: 1.25rem;
}
.workspace-shell {
display: grid;
grid-template-columns: 14.5rem minmax(0, 1fr);
gap: 1rem;
align-items: start;
scroll-padding-top: 1rem;
}
.workspace-stage {
display: grid;
gap: 1.15rem;
}
.module-sidebar {
position: sticky;
top: 1rem;
max-height: calc(100vh - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.9rem;
display: grid;
gap: 0.78rem;
background: var(--surface-elevated);
}
.module-brand {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.72rem;
align-items: start;
padding: 0.8rem;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.12), rgba(80, 211, 198, 0.08)),
rgba(255, 255, 255, 0.03);
}
.module-brand h2 {
margin: 0;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1.55rem;
letter-spacing: 0.05em;
}
.module-brand-mark,
.topbar-mark {
width: 3rem;
height: 3rem;
border-radius: 18px;
display: grid;
place-items: center;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1.4rem;
font-weight: 700;
color: #07121b;
background: linear-gradient(135deg, var(--brand), var(--brand-strong));
box-shadow: 0 16px 30px rgba(244, 187, 99, 0.18);
}
.module-sidebar-head-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.55rem;
align-items: end;
}
.sidebar-density-toggle {
align-self: start;
justify-self: start;
white-space: nowrap;
padding-inline: 0.85rem;
}
.module-stack-disclosure,
.module-role-detail-disclosure,
.dashboard-inline-disclosure,
.report-depth-disclosure {
display: grid;
gap: 0.75rem;
}
.module-stack-disclosure summary,
.module-role-detail-disclosure summary,
.dashboard-inline-disclosure summary,
.report-depth-disclosure summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
}
.module-stack-disclosure summary::-webkit-details-marker,
.module-role-detail-disclosure summary::-webkit-details-marker,
.dashboard-inline-disclosure summary::-webkit-details-marker,
.report-depth-disclosure summary::-webkit-details-marker {
display: none;
}
.module-stack-disclosure summary::after,
.module-role-detail-disclosure summary::after,
.dashboard-inline-disclosure summary::after,
.report-depth-disclosure summary::after {
content: "+";
color: var(--brand);
font-size: 1.1rem;
line-height: 1;
margin-left: auto;
}
.module-stack-disclosure[open] summary::after,
.module-role-detail-disclosure[open] summary::after,
.dashboard-inline-disclosure[open] summary::after,
.report-depth-disclosure[open] summary::after {
content: "−";
}
.module-brand-strip {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.module-brand-strip span {
padding: 0.4rem 0.64rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.035);
color: var(--muted);
font-size: 0.76rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.module-sidebar-head h3 {
font-size: 1.38rem;
}
.module-sidebar-copy,
.module-copy {
margin: 0.45rem 0 0;
color: var(--muted);
line-height: 1.6;
}
.simple-module-switch {
display: none;
gap: 0.35rem;
padding: 0.64rem;
border-radius: 16px;
}
.simple-module-switch label {
display: grid;
gap: 0.26rem;
margin: 0;
}
.simple-module-button-row {
display: none;
}
.simple-module-button {
border: 1px solid rgba(80, 211, 198, 0.16);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
rgba(255, 255, 255, 0.018);
color: var(--text);
cursor: pointer;
font: inherit;
}
.simple-module-switch span {
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.simple-module-switch select {
width: 100%;
min-height: 2.32rem;
border-radius: 12px;
}
.simple-module-switch small {
color: var(--muted);
line-height: 1.35;
}
.module-nav {
display: grid;
gap: 0.85rem;
}
.module-role-rail {
display: grid;
gap: 0.8rem;
padding: 0.82rem;
}
.module-role-rail-head {
display: grid;
gap: 0.35rem;
}
.module-role-rail-head h4,
.module-nav-group-title {
margin: 0;
font-size: 1rem;
letter-spacing: 0.02em;
}
.module-role-button-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.module-role-button[data-module-role-focus="all"] {
grid-column: 1 / -1;
}
.module-role-button {
width: 100%;
text-align: left;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.025);
color: var(--text);
padding: 0.78rem 0.9rem;
display: grid;
gap: 0.16rem;
}
.module-role-button span {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1rem;
letter-spacing: 0.04em;
}
.module-role-button small {
color: var(--muted);
font-size: 0.78rem;
}
.module-role-button:hover {
border-color: rgba(255, 255, 255, 0.14);
transform: translateX(2px);
}
.module-role-button.active {
border-color: rgba(80, 211, 198, 0.26);
background:
linear-gradient(135deg, rgba(80, 211, 198, 0.14), rgba(244, 187, 99, 0.08)),
rgba(255, 255, 255, 0.04);
box-shadow: inset 0 0 0 1px rgba(80, 211, 198, 0.1);
}
.module-role-summary {
display: grid;
gap: 0.22rem;
padding: 0.85rem 0.95rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.03);
}
.module-role-summary strong {
font-size: 0.96rem;
letter-spacing: 0.02em;
}
.module-role-access-badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
:is(body.task-mode, body.simple-mode) .module-stack-disclosure,
:is(body.task-mode, body.simple-mode) .module-role-detail-disclosure {
display: none;
}
:is(body.task-mode, body.simple-mode) .module-role-rail-head .eyebrow,
:is(body.task-mode, body.simple-mode) .module-role-summary,
:is(body.task-mode, body.simple-mode) .module-role-access-badges,
:is(body.task-mode, body.simple-mode) .module-role-rail-head,
:is(body.task-mode, body.simple-mode) .module-role-home-summary,
:is(body.task-mode, body.simple-mode) #module-role-access-note,
:is(body.task-mode, body.simple-mode) #module-role-guide-button,
:is(body.task-mode, body.simple-mode) .module-role-detail-disclosure {
display: none;
}
:is(body.task-mode, body.simple-mode) #module-brand-copy,
:is(body.task-mode, body.simple-mode) #module-brand-eyebrow,
:is(body.task-mode, body.simple-mode) .module-sidebar-head .module-sidebar-copy,
:is(body.task-mode, body.simple-mode) .module-role-rail-head .module-sidebar-copy,
:is(body.task-mode, body.simple-mode) .module-role-home-summary .module-sidebar-copy,
:is(body.task-mode, body.simple-mode) .module-nav-group-head,
:is(body.task-mode, body.simple-mode) .module-nav-group-copy,
:is(body.task-mode, body.simple-mode) .module-nav-button small {
display: none;
}
:is(body.task-mode, body.simple-mode) .workspace-shell {
grid-template-columns: minmax(0, 1fr);
gap: 0.7rem;
}
:is(body.task-mode, body.simple-mode) .workspace-stage {
gap: 0.68rem;
}
:is(body.task-mode, body.simple-mode) .module-sidebar {
position: static;
max-height: none;
overflow: visible;
gap: 0.48rem;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
:is(body.task-mode, body.simple-mode) .module-brand {
display: none;
}
:is(body.task-mode, body.simple-mode) .module-sidebar-head-row {
display: none;
}
:is(body.task-mode, body.simple-mode) .simple-module-switch {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
position: relative;
z-index: 12;
justify-self: stretch;
align-items: center;
padding: 0.54rem 0.68rem;
border-color: rgba(244, 187, 99, 0.2);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.105), rgba(80, 211, 198, 0.045)),
rgba(255, 255, 255, 0.022);
backdrop-filter: blur(18px);
box-shadow: inset 0 0 0 1px rgba(244, 187, 99, 0.045);
}
:is(body.task-mode, body.simple-mode) .simple-module-switch label {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.55rem;
}
:is(body.task-mode, body.simple-mode) .simple-module-switch span {
color: var(--brand);
font-size: 0.66rem;
letter-spacing: 0.08em;
}
:is(body.task-mode, body.simple-mode) .simple-module-switch select {
display: none;
}
:is(body.task-mode, body.simple-mode) .simple-module-button-row {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
gap: 0.42rem;
align-items: center;
overflow: visible;
}
:is(body.task-mode, body.simple-mode) .simple-module-current-area {
min-width: 0;
display: grid;
gap: 0.08rem;
padding: 0.38rem 0.62rem;
border-radius: 13px;
border: 1px solid rgba(244, 187, 99, 0.24);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.12), rgba(80, 211, 198, 0.055)),
rgba(255, 255, 255, 0.025);
box-shadow: inset 0 0 0 1px rgba(244, 187, 99, 0.05);
}
:is(body.task-mode, body.simple-mode) .simple-module-current-area span {
color: var(--muted);
font-size: 0.58rem;
letter-spacing: 0.08em;
}
:is(body.task-mode, body.simple-mode) .simple-module-current-area strong {
min-width: 0;
overflow: hidden;
color: var(--text);
font-size: 0.9rem;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
:is(body.task-mode, body.simple-mode) .simple-module-more-label {
flex: 0 0 auto;
color: var(--muted);
font-size: 0.6rem;
font-weight: 900;
letter-spacing: 0.1em;
opacity: 0.72;
text-transform: uppercase;
}
:is(body.task-mode, body.simple-mode) .simple-module-more-menu {
flex: 0 0 auto;
position: relative;
align-self: stretch;
display: block;
}
:is(body.task-mode, body.simple-mode) .simple-module-more-menu summary {
min-height: 100%;
display: inline-flex;
align-items: center;
padding: 0.36rem 0.74rem;
border: 1px dashed rgba(244, 187, 99, 0.28);
border-radius: 13px;
background: rgba(244, 187, 99, 0.055);
color: var(--brand);
cursor: pointer;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.04em;
line-height: 1;
list-style: none;
white-space: nowrap;
}
:is(body.task-mode, body.simple-mode) .simple-module-more-menu summary::-webkit-details-marker {
display: none;
}
:is(body.task-mode, body.simple-mode) .simple-module-more-menu summary::after {
content: "+";
margin-left: 0.42rem;
color: var(--muted);
font-weight: 950;
}
:is(body.task-mode, body.simple-mode) .simple-module-more-menu[open] summary::after {
content: "-";
}
:is(body.task-mode, body.simple-mode) .simple-module-more-list {
display: none;
position: absolute;
top: calc(100% + 0.42rem);
right: 0;
z-index: 30;
width: min(22rem, calc(100vw - 2rem));
max-height: min(26rem, calc(100dvh - 8rem));
gap: 0.42rem;
align-items: stretch;
padding: 0.58rem;
overflow: auto;
border: 1px solid rgba(244, 187, 99, 0.18);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(13, 26, 39, 0.98), rgba(8, 17, 26, 0.98)),
rgba(8, 17, 26, 0.98);
box-shadow: 0 18px 44px rgba(1, 8, 14, 0.36);
}
:is(body.task-mode, body.simple-mode) .simple-module-more-menu[open] .simple-module-more-list {
display: grid;
}
:is(body.task-mode, body.simple-mode) .simple-module-button {
min-height: 1.95rem;
width: 100%;
padding: 0.36rem 0.64rem;
border-radius: 12px;
color: var(--muted);
font-size: 0.78rem;
font-weight: 850;
line-height: 1;
text-align: left;
white-space: nowrap;
}
:is(body.task-mode, body.simple-mode) .simple-module-button:hover,
:is(body.task-mode, body.simple-mode) .simple-module-button:focus-visible {
border-color: rgba(244, 187, 99, 0.34);
color: var(--text);
outline: none;
}
:is(body.task-mode, body.simple-mode) .simple-module-button-secondary {
border-color: rgba(255, 255, 255, 0.09);
background: rgba(255, 255, 255, 0.015);
opacity: 0.78;
}
:is(body.task-mode, body.simple-mode) .simple-module-button.active {
border-color: rgba(244, 187, 99, 0.4);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.2), rgba(80, 211, 198, 0.07)),
rgba(255, 255, 255, 0.03);
color: var(--brand);
box-shadow: inset 0 0 0 1px rgba(244, 187, 99, 0.09);
}
:is(body.task-mode, body.simple-mode) .simple-module-switch small {
color: var(--muted);
font-size: 0.72rem;
line-height: 1.25;
}
:is(body.task-mode, body.simple-mode) .module-role-rail {
display: none;
}
:is(body.task-mode, body.simple-mode) .module-role-home-summary {
display: none;
}
:is(body.task-mode, body.simple-mode) .module-role-home-summary strong {
font-size: 0.84rem;
}
:is(body.task-mode, body.simple-mode) .module-role-home-summary .module-sidebar-copy {
font-size: 0.76rem;
line-height: 1.35;
}
:is(body.task-mode, body.simple-mode) .module-role-home-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.4rem;
}
:is(body.task-mode, body.simple-mode) .module-role-home-actions .button {
width: 100%;
flex: initial;
min-height: 2.18rem;
padding: 0.48rem 0.56rem;
font-size: 0.78rem;
}
:is(body.task-mode, body.simple-mode) #module-role-home-button {
order: 1;
}
:is(body.task-mode, body.simple-mode) #module-role-next-button {
order: 2;
}
:is(body.task-mode, body.simple-mode) #module-detail-mode-button {
order: 3;
}
:is(body.task-mode, body.simple-mode) .module-nav {
display: none;
}
:is(body.task-mode, body.simple-mode) .module-nav-group {
gap: 0.28rem;
padding: 0.42rem;
border-radius: 15px;
}
:is(body.task-mode, body.simple-mode) .module-nav-button {
gap: 0;
min-height: 2.35rem;
padding: 0.5rem 0.58rem;
border-radius: 14px;
}
:is(body.task-mode, body.simple-mode) .module-nav-button span {
font-size: 0.88rem;
}
:is(body.task-mode, body.simple-mode) .dashboard-depth-disclosure {
display: none;
}
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] #dashboard-command-grid,
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] #dashboard-operating-grid,
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] #dashboard-score-explainer,
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] #dashboard-posture-breakdown,
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] .dashboard-shadow-command-section,
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] .dashboard-first-minute-grid {
display: none;
}
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] .dashboard-hero {
grid-template-columns: minmax(0, 1fr);
gap: 0.85rem;
padding: 0.85rem;
}
.dashboard-premium-hides-legacy .module-hero-main,
.dashboard-premium-hides-legacy [data-dashboard-panel="shadow-command-center"],
.dashboard-premium-hides-legacy #dashboard-posture-breakdown,
.dashboard-premium-hides-legacy #dashboard-score-explainer {
display: none;
}
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] .dashboard-command-card {
padding: 0.72rem;
}
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] .dashboard-hero .module-copy {
display: none;
}
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] .dashboard-hero-summary,
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] #dashboard-command-notes {
display: none;
}
:is(body.task-mode, body.simple-mode) .dashboard-role-launch-footer {
align-items: center;
}
.dashboard-next-cue {
display: grid;
gap: 0.25rem;
padding: 0.85rem 0.95rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.025);
}
.role-capability-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.role-capability-grid-compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.module-role-rail .role-capability-grid,
.module-role-rail .role-capability-grid-compact {
grid-template-columns: 1fr;
}
.role-capability-card {
display: grid;
gap: 0.2rem;
padding: 0.72rem 0.8rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
}
.role-capability-card strong {
font-size: 0.82rem;
line-height: 1.45;
}
.role-capability-card span {
font-size: 0.74rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.module-role-rail .role-capability-card {
padding: 0.82rem 0.92rem;
}
.module-role-rail .role-capability-card strong {
font-size: 0.88rem;
line-height: 1.42;
}
.role-capability-card.enabled {
border-color: rgba(98, 226, 162, 0.18);
box-shadow: inset 0 0 0 1px rgba(98, 226, 162, 0.05);
}
.role-capability-card.disabled {
opacity: 0.88;
border-color: rgba(255, 255, 255, 0.06);
}
.ai-fw-route-card {
position: relative;
align-content: start;
min-height: 15.5rem;
}
.ai-fw-route-card::before {
content: "";
position: absolute;
inset: 1rem auto 1rem 0;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, var(--brand), rgba(80, 211, 198, 0.55));
opacity: 0.78;
}
.ai-fw-route-card .section-heading,
.ai-fw-route-card .chip-list,
.ai-fw-route-card .form-note,
.ai-fw-route-card .table-subtle,
.ai-fw-route-card .ai-fw-route-action-copy,
.ai-fw-route-card .inline-actions {
margin-left: 0.52rem;
}
.ai-fw-route-state {
border-color: rgba(244, 187, 99, 0.22);
background: rgba(244, 187, 99, 0.11);
}
.ai-fw-route-action-copy {
margin-top: 0.1rem;
margin-bottom: 0;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.55;
}
.ai-fw-route-card .inline-actions {
margin-top: 0.45rem;
}
.ai-fw-route-card .inline-actions .button {
display: inline-flex;
align-items: center;
min-width: 12rem;
justify-content: center;
}
.module-role-home-summary,
.dashboard-role-home {
display: grid;
gap: 0.75rem;
padding: 0.85rem 0.95rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.02);
}
.module-role-home-summary strong,
.dashboard-role-home strong {
font-size: 0.9rem;
letter-spacing: 0.02em;
}
.module-role-home-summary-divider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
}
.module-role-home-actions,
.dashboard-role-home-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.module-role-home-actions .button,
.dashboard-role-home-actions .button {
flex: 1 1 12rem;
}
.module-nav-group {
display: grid;
gap: 0.55rem;
padding: 0.72rem;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.06);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
rgba(255, 255, 255, 0.015);
}
.module-nav-group-head {
display: grid;
gap: 0.3rem;
}
.module-nav-group-copy {
margin: 0;
color: var(--muted);
line-height: 1.55;
font-size: 0.84rem;
}
.module-nav-group-current {
border-color: rgba(244, 187, 99, 0.14);
box-shadow: inset 0 0 0 1px rgba(244, 187, 99, 0.06);
}
.module-nav-group.role-muted {
opacity: 0.56;
}
.module-nav-group.role-relevant {
border-color: rgba(80, 211, 198, 0.18);
box-shadow: inset 0 0 0 1px rgba(80, 211, 198, 0.06);
}
.module-nav-button {
width: 100%;
text-align: left;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
color: var(--text);
padding: 0.74rem 0.82rem;
display: grid;
gap: 0.2rem;
position: relative;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition:
transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
background 150ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.module-nav-button span {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 0.96rem;
letter-spacing: 0.04em;
}
.module-nav-button small {
color: var(--muted);
font-size: 0.78rem;
}
.module-nav-button[data-nav-count]::after {
content: attr(data-nav-count);
position: absolute;
top: 0.72rem;
right: 0.82rem;
min-width: 1.45rem;
height: 1.45rem;
padding: 0 0.35rem;
border-radius: 999px;
display: inline-grid;
place-items: center;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.module-nav-button-signal-alert:not(.active) {
border-color: rgba(255, 109, 91, 0.28);
background:
linear-gradient(180deg, rgba(255, 109, 91, 0.12), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.03);
}
.module-nav-button-signal-watch:not(.active) {
border-color: rgba(244, 187, 99, 0.24);
background:
linear-gradient(180deg, rgba(244, 187, 99, 0.1), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.03);
}
.module-nav-button-signal-good:not(.active) {
border-color: rgba(80, 211, 198, 0.22);
background:
linear-gradient(180deg, rgba(80, 211, 198, 0.1), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.03);
}
.module-nav-button-signal-alert[data-nav-count]::after {
background: rgba(255, 109, 91, 0.2);
border-color: rgba(255, 109, 91, 0.3);
}
.module-nav-button-signal-watch[data-nav-count]::after {
background: rgba(244, 187, 99, 0.2);
border-color: rgba(244, 187, 99, 0.28);
}
.module-nav-button-signal-good[data-nav-count]::after {
background: rgba(80, 211, 198, 0.18);
border-color: rgba(80, 211, 198, 0.26);
}
.module-nav-group-signal-alert {
border-color: rgba(255, 109, 91, 0.24);
box-shadow: inset 0 0 0 1px rgba(255, 109, 91, 0.08);
}
.module-nav-group-signal-watch {
border-color: rgba(244, 187, 99, 0.22);
box-shadow: inset 0 0 0 1px rgba(244, 187, 99, 0.08);
}
.module-nav-group-signal-good {
border-color: rgba(80, 211, 198, 0.18);
box-shadow: inset 0 0 0 1px rgba(80, 211, 198, 0.07);
}
body.sidebar-compact .workspace-shell {
grid-template-columns: 12.35rem minmax(0, 1fr);
}
body.sidebar-compact .module-brand,
body.sidebar-compact .module-role-rail,
body.sidebar-compact .module-nav-group {
border-radius: 18px;
}
body.sidebar-compact .module-role-rail {
display: none;
}
body.sidebar-compact .module-brand {
padding: 0.72rem;
}
body.sidebar-compact .module-brand h2 {
font-size: 1.36rem;
}
body.sidebar-compact .module-sidebar-head h3 {
font-size: 1.2rem;
}
body.sidebar-compact .module-sidebar {
gap: 0.62rem;
}
body.sidebar-compact .module-sidebar-head-row {
grid-template-columns: 1fr;
align-items: start;
}
body.sidebar-compact #module-brand-eyebrow,
body.sidebar-compact #module-brand-copy,
body.sidebar-compact .module-sidebar-head .module-sidebar-copy,
body.sidebar-compact .module-role-rail-head .module-sidebar-copy,
body.sidebar-compact #module-role-summary-copy,
body.sidebar-compact #module-role-access-note,
body.sidebar-compact .module-nav-group-copy,
body.sidebar-compact .module-nav-group-title,
body.sidebar-compact .module-nav-button small,
body.sidebar-compact .module-stack-disclosure .form-section-summary-copy small,
body.sidebar-compact .module-role-detail-disclosure .form-section-summary-copy small {
display: none;
}
body.sidebar-compact .module-role-home-summary {
gap: 0.55rem;
padding: 0.72rem 0.78rem;
}
body.sidebar-compact .module-role-home-actions {
flex-direction: column;
}
body.sidebar-compact .module-role-home-actions .button {
width: 100%;
flex: initial;
}
:is(body.task-mode, body.simple-mode).sidebar-compact .module-role-home-actions {
display: grid;
grid-template-columns: 1fr;
}
body.sidebar-compact .module-nav-button span {
font-size: 0.92rem;
}
body.sidebar-compact .module-nav-button[data-nav-count]::after {
top: 0.54rem;
right: 0.58rem;
}
body.sidebar-compact .module-nav-group-head {
gap: 0.12rem;
}
body.sidebar-compact .module-nav-group-copy {
display: none;
}
.module-nav-button:hover {
transform: translateX(2px);
border-color: rgba(255, 255, 255, 0.14);
}
.module-nav-button:active {
transform: translateX(1px) scale(0.992);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.module-nav-button.active {
border-color: rgba(244, 187, 99, 0.32);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.18), rgba(80, 211, 198, 0.08)),
rgba(255, 255, 255, 0.04);
box-shadow:
inset 0 0 0 1px rgba(244, 187, 99, 0.12),
0 14px 34px rgba(0, 0, 0, 0.16);
}
.module-nav-button.role-muted {
opacity: 0.52;
}
.module-nav-button.role-relevant:not(.active) {
border-color: rgba(80, 211, 198, 0.16);
box-shadow: inset 0 0 0 1px rgba(80, 211, 198, 0.05);
}
/* Premium grouped sidebar */
.workspace-shell {
grid-template-columns: minmax(19rem, 28.75rem) minmax(0, 1fr);
gap: clamp(1rem, 1.45vw, 1.8rem);
}
body.sidebar-compact .workspace-shell,
:is(body.task-mode, body.simple-mode) .workspace-shell,
:is(body.task-mode, body.simple-mode).sidebar-compact .workspace-shell {
grid-template-columns: minmax(18rem, 28.75rem) minmax(0, 1fr);
}
.premium-sidebar {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 1.05rem;
padding: clamp(1.45rem, 2vw, 2rem);
max-height: calc(100dvh - 2rem);
overflow: hidden;
border-radius: 26px;
border: 1px solid rgba(157, 190, 213, 0.14);
background:
radial-gradient(circle at 16% 5%, rgba(80, 211, 198, 0.09), transparent 30%),
linear-gradient(180deg, rgba(13, 30, 45, 0.98), rgba(5, 17, 27, 0.99));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.045),
0 28px 80px rgba(0, 0, 0, 0.22);
}
.premium-sidebar-scroll-area {
min-height: 0;
display: grid;
gap: 1.05rem;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 0.16rem;
scrollbar-gutter: stable;
}
.premium-sidebar-sticky-head {
position: sticky;
top: 0;
z-index: 20;
display: grid;
gap: 0.9rem;
padding: 0 0 0.92rem;
margin: 0;
background:
linear-gradient(180deg, rgba(13, 30, 45, 0.995) 0%, rgba(10, 25, 39, 0.98) 84%, rgba(10, 25, 39, 0.88) 100%);
backdrop-filter: blur(18px);
}
.premium-sidebar-sticky-head::after {
content: "";
position: absolute;
right: 0;
bottom: 0.18rem;
left: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(157, 190, 213, 0.18), transparent);
opacity: 0;
transition: opacity 160ms ease;
}
.premium-sidebar.premium-sidebar-search-active .premium-sidebar-sticky-head::after {
opacity: 1;
}
.premium-sidebar .module-brand {
align-items: center;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.premium-sidebar .module-brand h2 {
color: #f4f8ff;
font-family: "Avenir Next", "Trebuchet MS", sans-serif;
font-size: clamp(1.35rem, 1.4vw, 1.72rem);
font-weight: 850;
letter-spacing: -0.03em;
}
.premium-sidebar .module-brand .eyebrow {
margin-top: 0.1rem;
color: #98aec2;
font-size: 1.02rem;
font-weight: 750;
letter-spacing: -0.02em;
text-transform: none;
}
.premium-sidebar .module-brand-mark {
width: 3.25rem;
height: 3.25rem;
border-radius: 15px;
font-family: "Avenir Next", "Trebuchet MS", sans-serif;
font-size: 1.42rem;
background: linear-gradient(135deg, #f1d676 0%, #80dfbf 100%);
box-shadow: 0 18px 40px rgba(80, 211, 198, 0.14);
}
.premium-sidebar #module-brand-copy,
.premium-sidebar .module-sidebar-head-row,
.premium-sidebar .module-stack-disclosure,
.premium-sidebar .module-role-rail,
.premium-sidebar .simple-module-switch {
display: none;
}
.premium-sidebar-search {
min-width: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.72rem;
align-items: center;
padding: 0.78rem 0.86rem;
border: 1px solid rgba(157, 190, 213, 0.14);
border-radius: 15px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.025);
}
.premium-sidebar-search-icon {
width: 1.15rem;
height: 1.15rem;
border: 2px solid #9db3c6;
border-radius: 999px;
position: relative;
opacity: 0.9;
}
.premium-sidebar-search-icon::after {
content: "";
position: absolute;
right: -0.38rem;
bottom: -0.26rem;
width: 0.48rem;
height: 2px;
border-radius: 999px;
background: #9db3c6;
transform: rotate(45deg);
}
.premium-sidebar-search input {
min-width: 0;
border: 0;
background: transparent;
color: #eef5ff;
font: inherit;
font-size: 1.02rem;
font-weight: 720;
outline: none;
}
.premium-sidebar-search input::placeholder {
color: #91a6ba;
opacity: 1;
}
.premium-sidebar-search kbd {
padding: 0.18rem 0.46rem;
border-radius: 8px;
border: 1px solid rgba(157, 190, 213, 0.12);
background: rgba(255, 255, 255, 0.055);
color: #c4d1dc;
font-family: "Avenir Next", "Trebuchet MS", sans-serif;
font-size: 0.76rem;
font-weight: 850;
}
.premium-sidebar-focus-actions {
display: flex;
justify-content: stretch;
}
.module-focus-mode-toggle {
width: 100%;
justify-content: center;
white-space: nowrap;
}
.premium-sidebar-context {
display: grid;
gap: 0.58rem;
}
.premium-sidebar-context .topbar-context,
.premium-sidebar-context .topbar-scope {
padding: 0.74rem 0.82rem;
border-color: rgba(157, 190, 213, 0.12);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
box-shadow: none;
}
.premium-sidebar-context .topbar-context-label {
color: #91a6ba;
font-size: 0.68rem;
}
.premium-sidebar-context .topbar-context-copy {
color: #9fb2c5;
font-size: 0.78rem;
}
.premium-sidebar-context .topbar-shadow-actions {
gap: 0.42rem;
}
.premium-sidebar-context .topbar-shadow-action,
.premium-sidebar-context .topbar-regulatory-lens-button {
min-height: 2.12rem;
font-size: 0.68rem;
}
.premium-sidebar-context .topbar-shadow-chip-list {
display: none;
}
.premium-module-nav {
order: 20;
gap: 1.12rem;
}
.premium-sidebar.premium-sidebar-search-active .premium-sidebar-context,
.premium-sidebar.premium-sidebar-search-active .premium-sidebar-actions,
.premium-sidebar.premium-sidebar-search-active .module-stack-disclosure,
.premium-sidebar.premium-sidebar-search-active .module-role-rail,
.premium-sidebar.premium-sidebar-search-active .simple-module-switch,
.premium-sidebar.premium-sidebar-search-active .module-sidebar-head-row {
display: none !important;
}
.premium-sidebar.premium-sidebar-search-active .premium-module-nav {
order: 1;
gap: 0.65rem;
margin-top: 0.1rem;
padding-top: 0.15rem;
}
.premium-sidebar.premium-sidebar-search-active .premium-nav-group {
padding: 0.35rem;
border: 1px solid rgba(157, 190, 213, 0.12);
border-radius: 18px;
background: rgba(255, 255, 255, 0.025);
}
.premium-sidebar.premium-sidebar-search-active .premium-nav-group-head {
min-height: 2.24rem;
padding-inline: 0.18rem;
}
.premium-sidebar.premium-sidebar-search-active .module-nav-button {
margin-left: 0;
width: 100%;
}
.premium-sidebar-actions {
order: 30;
display: grid;
gap: 0.78rem;
margin-top: auto;
padding-top: 0.95rem;
border-top: 1px solid rgba(157, 190, 213, 0.12);
}
.premium-sidebar-identity {
min-width: 0;
justify-content: space-between;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.premium-sidebar-identity .identity-copy {
min-width: 0;
}
.premium-sidebar-action-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.premium-sidebar-action-grid .button {
width: 100%;
min-height: 2.35rem;
justify-content: center;
border-color: rgba(157, 190, 213, 0.12);
background: rgba(255, 255, 255, 0.035);
color: #dce8f4;
box-shadow: none;
}
.premium-sidebar-action-grid .button:hover,
.premium-sidebar-action-grid .button:focus-visible {
border-color: rgba(80, 211, 198, 0.32);
background: rgba(80, 211, 198, 0.08);
color: #f7fbff;
}
.premium-sidebar-action-grid .notification-shell,
.premium-sidebar-action-grid .logout-form {
min-width: 0;
display: grid;
}
.premium-sidebar-action-grid .notification-button {
position: relative;
}
.premium-sidebar-action-grid .notification-badge {
margin-left: 0.35rem;
}
.premium-nav-group {
gap: 0.48rem;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.premium-nav-group.hidden,
.premium-search-hidden {
display: none !important;
}
.premium-nav-group-head {
min-height: 2.7rem;
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 0.7rem;
align-items: center;
border-radius: 15px;
color: #dce8f4;
cursor: pointer;
list-style: none;
}
.premium-nav-group-head::-webkit-details-marker {
display: none;
}
.premium-nav-group-head::after {
content: "›";
color: #68849b;
font-size: 1.55rem;
font-weight: 300;
line-height: 1;
transition: transform 160ms ease;
}
.premium-nav-group[open] > .premium-nav-group-head::after {
transform: rotate(90deg);
}
.premium-nav-group-label {
min-width: 0;
display: grid;
grid-template-columns: 1.75rem minmax(0, 1fr);
gap: 0.86rem;
align-items: center;
}
.premium-nav-group .eyebrow {
min-width: 0;
overflow: hidden;
color: #dce8f4;
font-family: "Avenir Next", "Trebuchet MS", sans-serif;
font-size: 1.02rem;
font-weight: 850;
letter-spacing: -0.02em;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
}
.premium-nav-icon {
width: 1.55rem;
height: 1.55rem;
display: inline-grid;
place-items: center;
color: #9dbed2;
position: relative;
}
.premium-nav-icon::before {
content: "•";
display: inline-grid;
place-items: center;
width: 1.42rem;
height: 1.42rem;
border: 1px solid rgba(157, 190, 213, 0.34);
border-radius: 999px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
rgba(5, 18, 29, 0.72);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.035),
0 8px 18px rgba(0, 0, 0, 0.18);
font-family: "Avenir Next", "Trebuchet MS", sans-serif;
font-size: 0.62rem;
font-weight: 850;
letter-spacing: -0.04em;
line-height: 1;
}
.premium-nav-icon-overview::before {
content: "P";
}
.premium-nav-icon-governance,
.premium-nav-icon-reporting {
color: #ffd47b;
}
.premium-nav-icon-governance::before {
content: "G";
}
.premium-nav-icon-discovery {
color: #50d3c6;
}
.premium-nav-icon-discovery::before {
content: "D";
}
.premium-nav-icon-firewall {
color: #77a4ff;
}
.premium-nav-icon-firewall::before {
content: "AI";
font-size: 0.52rem;
}
.premium-nav-icon-quality::before {
content: "Q";
}
.premium-nav-icon-reporting::before {
content: "R";
}
.premium-nav-icon-setup::before {
content: "S";
}
.premium-nav-group-badge {
min-width: 1.85rem;
padding: 0.2rem 0.54rem;
border-radius: 999px;
background: rgba(255, 109, 91, 0.22);
color: #ffabb2;
font-size: 0.82rem;
font-weight: 900;
line-height: 1.2;
text-align: center;
}
.premium-nav-group-badge-new {
background: rgba(244, 187, 99, 0.2);
color: #ffc86f;
}
.premium-sidebar .module-nav-button {
min-height: 2.85rem;
margin-left: 2.42rem;
width: calc(100% - 2.42rem);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.68rem 0.9rem 0.68rem 1rem;
border: 1px solid transparent;
border-radius: 12px;
background: transparent;
color: #9fb2c5;
box-shadow: none;
}
.premium-sidebar .module-nav-button small {
display: none;
}
.premium-sidebar .module-nav-button span {
min-width: 0;
overflow: hidden;
color: inherit;
font-family: "Avenir Next", "Trebuchet MS", sans-serif;
font-size: 1.02rem;
font-weight: 780;
letter-spacing: -0.02em;
text-overflow: ellipsis;
white-space: nowrap;
}
.premium-sidebar .module-nav-button:hover {
border-color: rgba(157, 190, 213, 0.1);
background: rgba(255, 255, 255, 0.035);
color: #eef5ff;
transform: none;
}
.premium-sidebar .module-nav-button.active {
border-color: rgba(255, 212, 123, 0.08);
background:
linear-gradient(90deg, rgba(244, 187, 99, 0.14), rgba(80, 211, 198, 0.055)),
rgba(255, 255, 255, 0.035);
color: #f7fbff;
box-shadow: none;
}
.premium-sidebar .module-nav-button.active::before {
content: "";
position: absolute;
left: -1.02rem;
width: 3px;
height: 1.55rem;
border-radius: 999px;
background: linear-gradient(180deg, #ffd47b, #50d3c6);
}
.premium-sidebar .module-nav-button[data-nav-count]::after {
position: static;
min-width: 1.62rem;
height: 1.62rem;
flex: 0 0 auto;
color: #ffdce0;
background: rgba(255, 109, 91, 0.2);
border-color: transparent;
box-shadow: none;
}
body.sidebar-compact .premium-sidebar,
:is(body.task-mode, body.simple-mode) .premium-sidebar,
:is(body.task-mode, body.simple-mode).sidebar-compact .premium-sidebar {
gap: 1.05rem;
padding: clamp(1.2rem, 1.6vw, 1.7rem);
border: 1px solid rgba(157, 190, 213, 0.14);
background:
radial-gradient(circle at 16% 5%, rgba(80, 211, 198, 0.09), transparent 30%),
linear-gradient(180deg, rgba(13, 30, 45, 0.98), rgba(5, 17, 27, 0.99));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.045),
0 28px 80px rgba(0, 0, 0, 0.22);
}
body.sidebar-compact .premium-sidebar .module-brand,
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-brand {
display: grid;
padding: 0;
}
body.sidebar-compact .premium-sidebar #module-brand-eyebrow {
display: block;
}
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-nav {
display: grid;
}
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-sidebar-head-row,
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-role-rail,
:is(body.task-mode, body.simple-mode) .premium-sidebar .simple-module-switch,
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-stack-disclosure {
display: none;
}
.module-screen {
display: grid;
gap: 1rem;
scroll-margin-top: 1rem;
opacity: 1;
will-change: opacity;
}
.module-screen[aria-hidden="true"] {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Premium motion system */
.module-screen.is-leaving {
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition:
opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.module-screen.is-entering {
animation: module-screen-enter 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.module-screen.is-entering > * {
animation: module-screen-stagger-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.module-screen.is-entering > *:nth-child(2) {
animation-delay: 32ms;
}
.module-screen.is-entering > *:nth-child(3) {
animation-delay: 64ms;
}
.module-screen.is-entering > *:nth-child(n + 4) {
animation-delay: 96ms;
}
@keyframes module-screen-enter {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes module-screen-stagger-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.module-screen,
.module-screen.is-leaving,
.module-screen.is-entering,
.module-screen.is-entering > *,
.premium-sparkline-line {
animation: none !important;
transition: none !important;
transform: none !important;
}
.module-screen.is-leaving {
opacity: 1;
}
.premium-sparkline-line {
stroke-dashoffset: 0;
}
}
.module-hero,
.module-card {
padding: 1.4rem;
scroll-margin-top: 1rem;
}
.module-hero {
display: grid;
gap: 1rem;
align-items: start;
background:
radial-gradient(circle at top right, rgba(80, 211, 198, 0.08), transparent 28%),
linear-gradient(180deg, rgba(13, 26, 39, 0.98), rgba(8, 17, 26, 0.94));
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-hero {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-hero .module-copy,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-hero .hero-points,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-hero .highlight-list {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-hero h3 {
font-size: 1.28rem;
letter-spacing: 0.02em;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow {
gap: 0.38rem;
padding: 0.52rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .section-heading h3 {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .section-heading {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-steps {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-compact {
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem;
align-items: center;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-task-picker,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-current {
gap: 0.18rem;
padding: 0.42rem 0.54rem;
border-radius: 14px;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-task-picker {
position: relative;
grid-template-columns: minmax(0, 1fr) max-content;
align-items: center;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-task-picker > span,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-selected-hint,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-select-fallback {
grid-column: 1 / -1;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-task-picker > span,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-selected-hint {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-buttons {
display: grid;
gap: 0.42rem;
overflow: visible;
padding-bottom: 0.1rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-task-menu {
justify-self: end;
position: relative;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-task-menu summary {
min-height: 100%;
border-radius: 13px;
white-space: nowrap;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-task-menu .module-task-flow-more-list {
position: absolute;
top: calc(100% + 0.42rem);
right: 0;
z-index: 28;
width: min(26rem, calc(100vw - 2rem));
max-height: min(28rem, calc(100dvh - 10rem));
padding: 0.58rem;
overflow: auto;
border: 1px solid rgba(80, 211, 198, 0.18);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(13, 26, 39, 0.98), rgba(8, 17, 26, 0.98)),
rgba(8, 17, 26, 0.98);
box-shadow: 0 18px 44px rgba(1, 8, 14, 0.36);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-current-task {
min-width: 0;
display: grid;
gap: 0.08rem;
padding: 0.38rem 0.62rem;
border-radius: 13px;
border: 1px solid rgba(80, 211, 198, 0.2);
background:
linear-gradient(135deg, rgba(80, 211, 198, 0.1), rgba(244, 187, 99, 0.055)),
rgba(255, 255, 255, 0.02);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-current-task span {
color: var(--muted);
font-size: 0.58rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-current-task strong {
min-width: 0;
overflow: hidden;
color: var(--text);
font-size: 0.86rem;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-button {
min-width: 0;
width: 100%;
padding: 0.42rem 0.52rem;
border-radius: 13px;
text-align: left;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-button span {
width: 1.35rem;
height: 1.35rem;
font-size: 0.62rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-button strong {
font-size: 0.78rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-button small {
font-size: 0.58rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-selected-hint {
max-width: 100%;
color: var(--muted);
font-size: 0.72rem;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-current strong {
font-size: 0.92rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-current {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-actions {
grid-template-columns: max-content;
gap: 0.36rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-advanced {
min-height: 2.18rem;
padding: 0.42rem 0.68rem;
border: 1px solid rgba(144, 167, 185, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.018);
box-shadow: none;
color: var(--text);
cursor: pointer;
font: inherit;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-advanced:hover,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-advanced:focus-visible {
border-color: rgba(80, 211, 198, 0.3);
background: rgba(80, 211, 198, 0.08);
outline: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen {
align-content: start;
min-height: 0;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure {
border-color: rgba(244, 187, 99, 0.3);
background:
linear-gradient(180deg, rgba(12, 22, 32, 0.94), rgba(8, 16, 24, 0.92)),
var(--surface-card);
box-shadow:
0 18px 42px rgba(1, 8, 14, 0.2),
inset 0 0 0 1px rgba(244, 187, 99, 0.07);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > :not(summary) {
margin-inline: 0.72rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > .module-task-context-strip {
display: none;
flex-wrap: nowrap;
gap: 0.36rem;
align-items: center;
margin-block: 0.32rem 0.2rem;
padding: 0.2rem 0.28rem;
border-radius: 999px;
border: 0;
background: transparent;
}
:is(body.task-mode, body.simple-mode) .guided-task-work-surface-screen .module-content-disclosure.focused-disclosure > .module-task-context-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
gap: 0.65rem;
align-items: center;
margin-block: 0.45rem 0.35rem;
padding: 0.62rem 0.72rem;
border: 1px solid rgba(80, 211, 198, 0.16);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(80, 211, 198, 0.08), rgba(244, 187, 99, 0.045)),
rgba(255, 255, 255, 0.018);
}
:is(body.task-mode, body.simple-mode) .guided-task-work-surface-screen .module-task-context-copy {
min-width: 0;
display: grid;
gap: 0.12rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-work-surface-screen .module-task-context-copy span,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > .module-task-context-strip span {
flex: 0 0 auto;
color: var(--brand);
font-size: 0.58rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
:is(body.task-mode, body.simple-mode) .guided-task-work-surface-screen .module-content-disclosure.focused-disclosure > .module-task-context-strip > span {
justify-self: end;
padding: 0.24rem 0.5rem;
border-radius: 999px;
background: rgba(244, 187, 99, 0.08);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > .module-task-context-strip strong {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-work-surface-screen .module-content-disclosure.focused-disclosure > .module-task-context-strip strong {
display: block;
min-width: 0;
overflow: hidden;
color: var(--text-strong);
font-size: 0.98rem;
line-height: 1.18;
text-overflow: ellipsis;
white-space: nowrap;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > .module-task-context-strip small {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-work-surface-screen .module-content-disclosure.focused-disclosure > .module-task-context-strip small {
display: -webkit-box;
overflow: hidden;
color: var(--muted);
font-size: 0.76rem;
line-height: 1.3;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .module-task-context-actions {
display: flex;
flex: 0 0 auto;
gap: 0.36rem;
align-items: center;
margin-left: auto;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .module-task-context-button {
min-height: 1.82rem;
padding: 0.3rem 0.56rem;
border: 1px solid rgba(244, 187, 99, 0.26);
border-radius: 999px;
background: rgba(244, 187, 99, 0.08);
color: var(--brand);
cursor: pointer;
font: inherit;
font-size: 0.66rem;
font-weight: 900;
letter-spacing: 0.06em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .module-task-context-button-primary {
border-color: rgba(244, 187, 99, 0.42);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.24), rgba(80, 211, 198, 0.1)),
rgba(244, 187, 99, 0.12);
color: var(--text-strong);
box-shadow: 0 10px 24px rgba(1, 8, 14, 0.22);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .module-task-context-button-primary:disabled {
border-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.018);
box-shadow: none;
color: var(--muted);
cursor: not-allowed;
opacity: 0.72;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .module-task-context-button:hover,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .module-task-context-button:focus-visible {
border-color: rgba(244, 187, 99, 0.42);
color: var(--text);
outline: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .module-task-context-button-muted {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.018);
color: var(--muted);
}
@media (max-width: 760px) {
:is(body.task-mode, body.simple-mode) .guided-task-work-surface-screen .module-content-disclosure.focused-disclosure > .module-task-context-strip {
grid-template-columns: minmax(0, 1fr);
gap: 0.48rem;
padding: 0.58rem;
border-radius: 16px;
}
:is(body.task-mode, body.simple-mode) .guided-task-work-surface-screen .module-content-disclosure.focused-disclosure > .module-task-context-strip > span {
justify-self: start;
}
:is(body.task-mode, body.simple-mode) .guided-task-work-surface-screen .module-content-disclosure.focused-disclosure .module-task-context-actions {
width: 100%;
margin-left: 0;
}
:is(body.task-mode, body.simple-mode) .guided-task-work-surface-screen .module-content-disclosure.focused-disclosure .module-task-context-button {
flex: 1 1 0;
justify-content: center;
text-align: center;
white-space: normal;
}
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .module-card-subtle,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .form-section-card,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .form-section-disclosure,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .compact-form {
padding: 0.78rem 0.85rem;
border-radius: 16px;
box-shadow: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .compact-form,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .form-section-card,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .form-section-disclosure,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .form-section-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .checkbox-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .settings-checkbox-grid {
gap: 0.55rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure label,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .field-label {
gap: 0.22rem;
font-size: 0.78rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure input:not([type="checkbox"]):not([type="radio"]),
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure select,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure textarea,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .enhanced-select-trigger {
min-height: 2.25rem;
padding: 0.42rem 0.58rem;
border-radius: 12px;
font-size: 0.82rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure textarea {
min-height: 4.4rem;
max-height: 8.5rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .checkbox-item {
min-height: 0;
padding: 0.46rem 0.55rem;
border-radius: 12px;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.form-section-disclosure:not(.module-content-disclosure),
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.bulk-import-disclosure,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.block-packet-disclosure {
gap: 0.42rem;
padding: 0.55rem 0.62rem;
border-style: dashed;
border-color: rgba(255, 255, 255, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.012);
box-shadow: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.form-section-disclosure:not(.module-content-disclosure) > summary,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.bulk-import-disclosure > summary,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.block-packet-disclosure > summary {
align-items: center;
gap: 0.45rem;
min-height: 2rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.form-section-disclosure:not(.module-content-disclosure) > summary::before,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.bulk-import-disclosure > summary::before,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.block-packet-disclosure > summary::before {
content: "More detail";
flex: none;
padding: 0.18rem 0.42rem;
border-radius: 999px;
background: rgba(80, 211, 198, 0.08);
color: var(--muted);
font-size: 0.54rem;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
html[lang="es"] :is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.form-section-disclosure:not(.module-content-disclosure) > summary::before,
html[lang="es"] :is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.bulk-import-disclosure > summary::before,
html[lang="es"] :is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.block-packet-disclosure > summary::before {
content: "Más detalle";
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.form-section-disclosure:not(.module-content-disclosure)[open] > :not(summary),
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.bulk-import-disclosure[open] > :not(summary),
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure details.block-packet-disclosure[open] > :not(summary) {
max-height: min(18rem, 42dvh);
overflow: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .table-shell,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .discovery-register,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .mini-card-list,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .report-readiness-list,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .findings-trend-list,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .requirement-evidence-list,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .requirement-evidence-live-list,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .connector-doc-list,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .provider-lane-list,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .shadow-pressure-list {
max-height: clamp(13rem, 34dvh, 24rem);
overflow: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .section-heading {
gap: 0.18rem;
margin-bottom: 0.45rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .section-heading h3 {
font-size: 1rem;
line-height: 1.22;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .section-heading .module-copy,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .section-heading p:not(.eyebrow) {
max-width: 58rem;
font-size: 0.82rem;
line-height: 1.35;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .module-copy,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .form-note:not(.form-feedback-error),
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .empty-state-copy,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .controls-overview-copy,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .signal-copy {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .controls-overview-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .dashboard-role-launch-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .summary-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .metric-grid {
gap: 0.55rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .controls-overview-card {
min-height: 0;
padding: 0.72rem 0.78rem;
border-radius: 16px;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .controls-overview-title,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .role-agenda-title {
font-size: 0.95rem;
line-height: 1.2;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .controls-overview-copy,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .signal-copy {
font-size: 0.8rem;
line-height: 1.32;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .form-actions,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .button-row,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .table-actions {
gap: 0.42rem;
align-items: center;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .button,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .link-button {
min-height: 2.18rem;
padding: 0.44rem 0.68rem;
border-radius: 999px;
font-size: 0.78rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .button-primary,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .action-button,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .table-action-button.emphasis {
order: -1;
border-color: rgba(244, 187, 99, 0.38);
box-shadow:
0 10px 22px rgba(244, 187, 99, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .button-secondary,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .table-action-button:not(.emphasis),
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .form-cancel-button {
border-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.018);
box-shadow: none;
color: var(--muted);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .button-secondary:hover,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .button-secondary:focus-visible,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .table-action-button:not(.emphasis):hover,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .table-action-button:not(.emphasis):focus-visible {
border-color: rgba(80, 211, 198, 0.22);
color: var(--text);
outline: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .link-button:not(.table-action-button),
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .inline-link-button {
border: 1px solid rgba(80, 211, 198, 0.22);
background:
linear-gradient(135deg, rgba(80, 211, 198, 0.12), rgba(244, 187, 99, 0.05)),
rgba(255, 255, 255, 0.02);
color: var(--text);
box-shadow: inset 0 0 0 1px rgba(80, 211, 198, 0.055);
text-decoration: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .link-button:not(.table-action-button)::before {
content: "Open";
color: var(--brand);
font-size: 0.58rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
html[lang="es"] :is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .link-button:not(.table-action-button)::before {
content: "Abrir";
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure .inline-link-button::after {
content: "→";
color: var(--brand);
font-weight: 900;
}
.module-task-flow {
display: grid;
gap: 1rem;
border-color: rgba(80, 211, 198, 0.16);
background:
radial-gradient(circle at top left, rgba(80, 211, 198, 0.08), transparent 30%),
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
rgba(255, 255, 255, 0.018);
}
@media (min-width: 981px) {
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow {
position: sticky;
top: 1rem;
z-index: 18;
border-color: rgba(244, 187, 99, 0.22);
backdrop-filter: blur(18px);
box-shadow:
0 18px 36px rgba(1, 8, 14, 0.22),
inset 0 0 0 1px rgba(244, 187, 99, 0.055);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure {
scroll-margin-top: 5.25rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure {
max-height: calc(100dvh - 13.15rem);
overflow: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary {
position: sticky;
top: 0;
z-index: 3;
min-height: 0;
padding: 0.72rem 0.9rem;
border-bottom: 1px solid rgba(244, 187, 99, 0.18);
cursor: default;
list-style: none;
background:
linear-gradient(180deg, rgba(16, 27, 39, 0.98), rgba(16, 27, 39, 0.92)),
var(--surface-card);
backdrop-filter: blur(16px);
box-shadow:
inset 4px 0 0 rgba(244, 187, 99, 0.82),
0 10px 22px rgba(1, 8, 14, 0.16);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary strong {
color: var(--text-strong);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary::before {
content: "Work here";
flex: 0 0 auto;
margin-top: 0.1rem;
padding: 0.22rem 0.48rem;
border-radius: 999px;
border: 1px solid rgba(244, 187, 99, 0.26);
background: rgba(244, 187, 99, 0.1);
color: var(--brand);
font-size: 0.58rem;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
html[lang="es"] :is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary::before {
content: "Trabaja aqui";
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary::-webkit-details-marker {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary::after {
content: none;
display: none;
}
}
.module-task-flow .section-heading h3 {
max-width: 60rem;
font-size: 1.1rem;
line-height: 1.35;
}
.module-task-flow-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.65rem;
margin: 0;
padding: 0;
list-style: none;
}
.module-task-flow-steps li {
display: grid;
gap: 0.2rem;
min-height: 4.6rem;
padding: 0.78rem 0.9rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
rgba(255, 255, 255, 0.016);
}
.module-task-flow-steps li.active {
border-color: rgba(244, 187, 99, 0.32);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.18), rgba(80, 211, 198, 0.065)),
rgba(255, 255, 255, 0.026);
box-shadow: inset 0 0 0 1px rgba(244, 187, 99, 0.08);
}
.module-task-flow-steps span {
color: var(--muted);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.module-task-flow-steps strong {
align-self: end;
color: var(--text);
font-size: 0.95rem;
line-height: 1.25;
}
.module-task-flow-compact {
display: grid;
grid-template-columns: minmax(14rem, 0.8fr) minmax(18rem, 1.1fr) minmax(13rem, auto);
gap: 0.85rem;
align-items: stretch;
}
.module-task-flow-task-picker,
.module-task-flow-current {
display: grid;
gap: 0.35rem;
padding: 0.86rem 0.95rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
rgba(255, 255, 255, 0.018);
}
.module-task-flow-task-picker > span,
.module-task-flow-current span {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.module-task-flow-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
gap: 0.5rem;
}
.module-task-flow-button {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.18rem 0.42rem;
align-items: center;
min-height: 3.1rem;
border-radius: 16px;
border: 1px solid rgba(80, 211, 198, 0.16);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
rgba(255, 255, 255, 0.018);
color: var(--text);
cursor: pointer;
font: inherit;
text-align: left;
transition:
border-color 160ms ease,
box-shadow 160ms ease,
transform 160ms ease;
}
.module-task-flow-button:hover,
.module-task-flow-button:focus-visible {
border-color: rgba(244, 187, 99, 0.34);
box-shadow: 0 12px 24px rgba(1, 8, 14, 0.18);
outline: none;
transform: translateY(-1px);
}
.module-task-flow-button span {
display: inline-grid;
grid-row: span 2;
place-items: center;
width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
background: rgba(80, 211, 198, 0.14);
color: var(--accent-strong);
font-size: 0.68rem;
font-weight: 900;
}
.module-task-flow-button strong {
overflow: hidden;
color: var(--text);
font-size: 0.86rem;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.module-task-flow-button small {
color: var(--muted);
font-size: 0.62rem;
font-weight: 850;
letter-spacing: 0.09em;
line-height: 1;
text-transform: uppercase;
}
.module-task-flow-button-current {
border-color: rgba(244, 187, 99, 0.38);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.2), rgba(80, 211, 198, 0.07)),
rgba(255, 255, 255, 0.026);
box-shadow: inset 0 0 0 1px rgba(244, 187, 99, 0.08);
}
.module-task-flow-button-current span {
background: rgba(244, 187, 99, 0.2);
color: var(--brand);
}
.module-task-flow-more {
display: grid;
gap: 0.5rem;
}
.module-task-flow-more summary {
width: max-content;
min-height: 2rem;
padding: 0.42rem 0.72rem;
border: 1px dashed rgba(244, 187, 99, 0.28);
border-radius: 999px;
background: rgba(244, 187, 99, 0.055);
color: var(--brand);
cursor: pointer;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.08em;
list-style: none;
text-transform: uppercase;
}
.module-task-flow-more summary::-webkit-details-marker {
display: none;
}
.module-task-flow-more summary::after {
content: "+";
margin-left: 0.42rem;
color: var(--muted);
font-weight: 950;
}
.module-task-flow-more[open] summary::after {
content: "-";
}
.module-task-flow-more-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
gap: 0.5rem;
}
.module-task-flow-select-fallback {
display: none;
}
.module-task-flow-current {
border-color: rgba(244, 187, 99, 0.22);
box-shadow: inset 0 0 0 1px rgba(244, 187, 99, 0.07);
}
.module-task-flow-current strong {
font-size: 1rem;
line-height: 1.35;
}
.module-task-flow-current small {
color: var(--muted);
line-height: 1.45;
}
.module-task-flow-actions {
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: 0.55rem;
}
@media (max-width: 980px) {
.module-task-flow-steps,
.module-task-flow-compact {
grid-template-columns: 1fr;
}
.module-task-flow-actions {
display: grid;
grid-template-columns: 1fr;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow {
position: sticky;
top: 1rem;
z-index: 18;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen > .module-task-flow .module-task-flow-actions {
justify-items: end;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure {
scroll-margin-top: 7.75rem;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure {
max-height: calc(100dvh - 15rem);
overflow: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary {
position: sticky;
top: 0;
z-index: 3;
border-bottom: 1px solid rgba(244, 187, 99, 0.18);
cursor: default;
list-style: none;
background:
linear-gradient(180deg, rgba(16, 27, 39, 0.98), rgba(16, 27, 39, 0.92)),
var(--surface-card);
box-shadow:
inset 4px 0 0 rgba(244, 187, 99, 0.82),
0 10px 22px rgba(1, 8, 14, 0.16);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary strong {
color: var(--text-strong);
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary::before {
content: "Work here";
flex: 0 0 auto;
margin-top: 0.1rem;
padding: 0.2rem 0.44rem;
border-radius: 999px;
border: 1px solid rgba(244, 187, 99, 0.26);
background: rgba(244, 187, 99, 0.1);
color: var(--brand);
font-size: 0.56rem;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
html[lang="es"] :is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary::before {
content: "Trabaja aqui";
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary::-webkit-details-marker {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-content-disclosure.focused-disclosure > summary::after {
content: none;
display: none;
}
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen details.module-content-disclosure:not(.focused-disclosure) {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-task-flow details.module-content-disclosure {
display: initial;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .guided-task-hidden-surface {
display: none !important;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .guided-task-hidden-content {
display: none !important;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-admin #admin-entry-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-admin #admin-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-program #program-overview-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-program #program-shadow-bridge,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-program #program-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-program #program-start-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-controls #controls-overview-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-controls #controls-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-controls #controls-start-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-discovery #discovery-summary-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-discovery #discovery-register-intro-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-discovery #discovery-systems-bridge,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-discovery #discovery-launchpad-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-discovery #discovery-guidance-rail,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-discovery #discovery-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-systems #systems-overview-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-systems #systems-shadow-bridge,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-systems #systems-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-systems #systems-start-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-providers #provider-summary-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-providers #providers-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-providers #providers-start-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-providers #providers-guidance-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-vendors #vendor-summary-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-vendors #vendors-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-vendors #vendors-start-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-vendors #vendor-guidance-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-agents #agent-summary-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-agents #agent-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-evals #eval-summary-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-evals #eval-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-evals #eval-guidance-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-risk #risk-overview-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-risk #risk-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-risk #risk-start-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-risk #risk-guidance-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-risk #risk-reference-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-incidents #incident-overview-grid,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-incidents #incident-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-incidents #incident-reference-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-incidents #incident-lenses-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-evidence #evidence-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-evidence #evidence-start-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-integrations #integrations-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-integrations #integrations-start-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-integrations #integrations-guidance-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-reporting #report-toolbar-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-reporting #report-launchpad-panel,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-reporting #report-role-launchpad,
:is(body.task-mode, body.simple-mode) .guided-task-flow-module-reporting #report-agenda-panel {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .module-subnav,
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .admin-tabs {
display: none;
}
:is(body.task-mode, body.simple-mode) .guided-task-flow-screen .admin-shell {
grid-template-columns: minmax(0, 1fr);
}
.module-hero h3 {
font-size: 2.25rem;
letter-spacing: 0.04em;
}
.module-hero-main {
display: grid;
gap: 0.95rem;
}
.hero-points-compact {
margin-top: 0;
}
.dashboard-hero {
grid-template-columns: 1.02fr 0.98fr;
gap: 1.2rem;
align-items: stretch;
background: var(--surface-hero-dashboard);
}
.dashboard-command-card {
padding: 1.15rem;
border-radius: 22px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium);
box-shadow: var(--surface-premium-shadow);
}
.dashboard-ciso-surface {
display: grid;
gap: var(--calm-gap);
margin-top: 1rem;
}
.dashboard-role-home-panel {
display: grid;
gap: 1rem;
border-color: color-mix(in srgb, var(--brand) 24%, var(--surface-premium-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--brand) 10%, transparent), transparent 32%),
linear-gradient(180deg, color-mix(in srgb, var(--surface-premium-soft) 96%, transparent), color-mix(in srgb, var(--surface-card) 94%, transparent));
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
:is(body.task-mode, body.simple-mode) [data-module-screen="dashboard"] .dashboard-role-home-panel {
display: grid;
}
.dashboard-ciso-posture-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.34fr);
gap: var(--calm-gap);
align-items: center;
overflow: hidden;
}
.dashboard-ciso-posture-card h3 {
margin: 0;
color: var(--calm-text);
font-size: clamp(1.8rem, 3vw, 3rem);
letter-spacing: -0.04em;
line-height: 0.98;
}
.dashboard-ciso-summary {
max-width: 68ch;
margin: 0.75rem 0 0;
color: var(--calm-muted);
line-height: 1.55;
}
.dashboard-ciso-posture {
min-width: 0;
display: grid;
justify-items: end;
gap: 0.45rem;
text-align: right;
}
.dashboard-ciso-posture > div {
display: flex;
min-width: 0;
align-items: baseline;
justify-content: flex-end;
gap: 0.4rem;
}
.dashboard-ciso-posture .calm-card-value {
font-size: clamp(3.3rem, 9vw, 6.6rem);
}
.dashboard-ciso-posture span,
.dashboard-ciso-posture p {
color: var(--calm-muted);
}
.dashboard-ciso-posture p {
margin: 0;
line-height: 1.35;
}
.dashboard-ciso-status-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--calm-gap);
}
.dashboard-ciso-status-card {
appearance: none;
width: 100%;
min-width: 0;
display: grid;
gap: 0.55rem;
text-align: left;
cursor: pointer;
}
.dashboard-ciso-status-card:hover {
border-color: color-mix(in srgb, var(--calm-accent) 38%, var(--calm-border));
transform: translateY(-1px);
}
.dashboard-ciso-card-copy {
color: var(--calm-muted);
line-height: 1.45;
}
.dashboard-ciso-timeline-card {
display: grid;
gap: 0.85rem;
}
.dashboard-ciso-timeline {
display: grid;
gap: 0.72rem;
}
.dashboard-operator-workbench {
display: grid;
grid-template-columns: minmax(14rem, 0.78fr) minmax(0, 1.22fr);
gap: var(--calm-gap);
align-items: start;
}
.dashboard-operator-actions {
position: sticky;
top: 1rem;
display: grid;
gap: 0.75rem;
}
.dashboard-operator-action {
appearance: none;
display: grid;
gap: 0.25rem;
width: 100%;
min-width: 0;
padding: 0.9rem 1rem;
border: 1px solid var(--calm-border);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(80, 211, 198, 0.12), transparent 58%),
color-mix(in srgb, var(--calm-surface) 84%, transparent);
color: var(--calm-text);
text-align: left;
cursor: pointer;
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease;
}
.dashboard-operator-action:hover {
border-color: color-mix(in srgb, var(--calm-accent) 42%, var(--calm-border));
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
transform: translateY(-2px);
}
.dashboard-operator-action span {
font-weight: 800;
}
.dashboard-operator-action small {
color: var(--calm-muted);
line-height: 1.35;
}
.dashboard-operator-attention-card {
display: grid;
gap: 0.85rem;
}
.dashboard-operator-attention-card h3 {
margin: 0;
color: var(--calm-text);
font-size: clamp(1.5rem, 2.2vw, 2.35rem);
letter-spacing: -0.04em;
}
.dashboard-operator-attention-card p {
margin: 0;
color: var(--calm-muted);
}
.dashboard-operator-device-list {
display: grid;
gap: 0.6rem;
}
.dashboard-operator-device-row {
appearance: none;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.7rem;
align-items: center;
width: 100%;
min-width: 0;
padding: 0.72rem 0.8rem;
border: 1px solid var(--calm-border);
border-radius: 16px;
background: color-mix(in srgb, var(--calm-surface) 76%, transparent);
color: var(--calm-text);
text-align: left;
cursor: pointer;
}
.dashboard-operator-device-row small {
color: var(--calm-muted);
}
.dashboard-operator-pulse {
width: 0.7rem;
height: 0.7rem;
border-radius: 999px;
background: var(--calm-warn);
box-shadow: 0 0 0 0 rgba(244, 187, 99, 0.42);
animation: operator-attention-pulse 1.8s ease-out infinite;
}
.dashboard-analyst-workbench {
display: grid;
grid-template-columns: minmax(13rem, 0.72fr) minmax(0, 1.28fr);
gap: var(--calm-gap);
align-items: start;
}
.dashboard-analyst-filter-bar {
position: sticky;
top: 1rem;
display: grid;
gap: 0.7rem;
padding: 0.7rem;
border: 1px solid var(--calm-border);
border-radius: 22px;
background: color-mix(in srgb, var(--calm-surface) 82%, transparent);
backdrop-filter: blur(16px);
}
.dashboard-analyst-filter {
appearance: none;
padding: 0.72rem 0.85rem;
border: 1px solid var(--calm-border);
border-radius: 999px;
background: linear-gradient(135deg, rgba(255, 122, 122, 0.12), transparent);
color: var(--calm-text);
font-weight: 800;
text-align: left;
cursor: pointer;
}
.dashboard-analyst-filter:hover {
border-color: color-mix(in srgb, var(--danger) 36%, var(--calm-border));
transform: translateY(-1px);
}
.dashboard-analyst-findings-card {
display: grid;
gap: 0.8rem;
}
.dashboard-analyst-findings-list {
display: grid;
gap: 0.65rem;
}
.dashboard-analyst-finding-row {
appearance: none;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.72rem;
align-items: center;
width: 100%;
min-width: 0;
padding: 0.76rem 0.82rem;
border: 1px solid var(--calm-border);
border-radius: 17px;
background: color-mix(in srgb, var(--calm-surface) 76%, transparent);
color: var(--calm-text);
text-align: left;
cursor: pointer;
transition:
transform 160ms ease,
border-color 160ms ease,
background 160ms ease;
}
.dashboard-analyst-finding-row:hover {
border-color: color-mix(in srgb, var(--brand) 36%, var(--calm-border));
background: color-mix(in srgb, var(--calm-surface) 88%, transparent);
transform: translateY(-1px);
}
.dashboard-analyst-finding-row small {
color: var(--calm-muted);
}
.dashboard-auditor-workbench {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(13rem, 0.75fr);
gap: var(--calm-gap);
align-items: start;
}
.dashboard-auditor-evidence-index {
position: relative;
display: grid;
gap: 0.8rem;
overflow: hidden;
}
.dashboard-auditor-evidence-index::after {
content: "";
position: absolute;
inset: auto -10% -35% 38%;
height: 12rem;
background: radial-gradient(circle, rgba(244, 187, 99, 0.12), transparent 68%);
pointer-events: none;
}
.dashboard-auditor-evidence-group {
position: relative;
z-index: 1;
border: 1px solid var(--calm-border);
border-radius: 18px;
background: color-mix(in srgb, var(--calm-surface) 76%, transparent);
overflow: hidden;
}
.dashboard-auditor-evidence-group summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
padding: 0.82rem 0.9rem;
color: var(--calm-text);
cursor: pointer;
list-style: none;
}
.dashboard-auditor-evidence-group summary::-webkit-details-marker {
display: none;
}
.dashboard-auditor-evidence-group summary span {
font-weight: 850;
}
.dashboard-auditor-evidence-group summary strong {
color: var(--calm-accent);
font-variant-numeric: tabular-nums;
}
.dashboard-auditor-evidence-list {
display: grid;
gap: 0.55rem;
padding: 0 0.9rem 0.9rem;
}
.dashboard-auditor-evidence-row {
appearance: none;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.7rem;
align-items: center;
width: 100%;
min-width: 0;
padding: 0.65rem 0.72rem;
border: 1px solid var(--calm-border);
border-radius: 14px;
background: color-mix(in srgb, var(--calm-surface) 86%, transparent);
color: var(--calm-text);
text-align: left;
cursor: pointer;
transition:
border-color 160ms ease,
background 160ms ease;
}
.dashboard-auditor-evidence-row:hover {
border-color: color-mix(in srgb, var(--calm-accent) 36%, var(--calm-border));
background: color-mix(in srgb, var(--calm-surface) 94%, transparent);
}
.dashboard-auditor-evidence-row small {
color: var(--calm-muted);
}
.dashboard-auditor-actions {
position: sticky;
top: 1rem;
display: grid;
gap: 0.75rem;
}
.dashboard-auditor-actions .dashboard-operator-action {
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.12), transparent 58%),
color-mix(in srgb, var(--calm-surface) 84%, transparent);
}
.dashboard-auditor-actions .dashboard-operator-action:hover {
transform: none;
}
@keyframes operator-attention-pulse {
70% {
box-shadow: 0 0 0 0.55rem rgba(244, 187, 99, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(244, 187, 99, 0);
}
}
.dashboard-ciso-timeline-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
min-width: 0;
padding: 0.76rem 0.82rem;
border-radius: 16px;
border: 1px solid var(--calm-border);
background: color-mix(in srgb, var(--calm-surface) 72%, transparent);
}
.dashboard-ciso-timeline-item > span {
width: 0.62rem;
height: 0.62rem;
border-radius: 999px;
background: var(--calm-accent);
}
.dashboard-ciso-timeline-item-good > span {
background: var(--calm-good);
}
.dashboard-ciso-timeline-item-watch > span {
background: var(--calm-warn);
}
.dashboard-ciso-timeline-item-alert > span {
background: var(--calm-alert);
}
.dashboard-ciso-timeline-item strong,
.dashboard-ciso-timeline-item p {
min-width: 0;
}
.dashboard-ciso-timeline-item strong {
display: block;
color: var(--calm-text);
}
.dashboard-ciso-timeline-item p,
.dashboard-ciso-timeline-item time {
margin: 0;
color: var(--calm-muted);
line-height: 1.35;
}
.dashboard-ciso-timeline-item time {
white-space: nowrap;
}
.dashboard-hero-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
.dashboard-hero-summary-card {
display: grid;
gap: 0.45rem;
padding: 0.95rem 1rem;
border-radius: 22px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium-soft);
box-shadow: var(--surface-premium-shadow);
}
.dashboard-hero-summary-card .signal-value {
font-size: 1.2rem;
}
.dashboard-hero-summary-card-good {
border-color: rgba(98, 226, 162, 0.2);
}
.dashboard-hero-summary-card-watch {
border-color: rgba(244, 187, 99, 0.2);
}
.dashboard-hero-summary-card-alert {
border-color: rgba(255, 122, 122, 0.2);
}
.dashboard-hero-summary-card-neutral {
border-color: rgba(136, 169, 255, 0.18);
}
.dashboard-posture-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.dashboard-posture-layout > *,
#dashboard-posture-score,
#dashboard-posture-breakdown,
.score-dial-shell,
.score-dial-copy,
.signal-card {
min-width: 0;
}
.command-note-stack {
display: grid;
gap: 0.8rem;
}
.command-note {
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium-soft);
box-shadow: var(--shadow-soft);
}
.command-note p {
margin: 0;
color: var(--text);
line-height: 1.55;
}
.surface-guide {
margin: 0 0 0.85rem;
color: var(--muted);
line-height: 1.55;
}
.dashboard-command-grid,
.report-command-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.dashboard-first-minute-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1rem;
align-items: start;
}
.dashboard-shadow-command-section {
margin-top: 1rem;
}
#dashboard-shadow-command {
display: grid;
gap: 1rem;
}
#dashboard-shadow-diligence {
display: grid;
gap: 1rem;
}
#dashboard-shadow-governed-intake {
display: grid;
gap: 1rem;
}
.shadow-board-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.8rem;
}
.shadow-board-card {
display: grid;
gap: 0.34rem;
padding: 0.95rem 1rem;
border-radius: 20px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium-soft) 98%, transparent),
color-mix(in srgb, var(--surface-card) 92%, transparent)
),
var(--surface-panel);
box-shadow: var(--surface-premium-shadow);
}
.shadow-board-card-alert {
border-color: rgba(255, 122, 122, 0.24);
}
.shadow-board-card-watch {
border-color: rgba(244, 187, 99, 0.22);
}
.shadow-board-card-good {
border-color: rgba(98, 226, 162, 0.22);
}
.shadow-board-card-neutral {
border-color: rgba(136, 169, 255, 0.18);
}
.shadow-board-label {
margin: 0;
color: var(--muted);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.shadow-board-value {
color: var(--text-strong);
font-size: 1.9rem;
line-height: 1;
}
.shadow-board-copy {
margin: 0;
color: var(--muted);
line-height: 1.45;
}
.dashboard-shadow-command-banner {
margin-bottom: 0;
}
.dashboard-shadow-diligence-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.dashboard-shadow-diligence-card {
display: grid;
gap: 0.85rem;
}
.dashboard-shadow-diligence-list {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: 0.45rem;
color: var(--muted);
}
.dashboard-shadow-diligence-list li {
line-height: 1.5;
}
.dashboard-shadow-diligence-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.dashboard-inline-disclosure {
padding: 1rem 1.05rem;
}
.dashboard-inline-disclosure > :not(summary) {
margin-top: 0.4rem;
}
.dashboard-evidence-row {
display: grid;
}
.score-dial-shell {
display: grid;
grid-template-columns: minmax(150px, 180px) 1fr;
gap: 1rem;
align-items: center;
}
.dashboard-command-card .score-dial-shell {
grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
align-items: start;
}
.score-dial-visual {
position: relative;
width: min(100%, 180px);
aspect-ratio: 1;
display: grid;
place-items: center;
}
.score-dial-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
filter: var(--score-dial-shadow);
}
.score-dial-track,
.score-dial-progress {
fill: none;
stroke-width: 12;
stroke-linecap: round;
}
.score-dial-track {
stroke: var(--score-dial-track);
}
.score-dial-progress {
transition: stroke-dashoffset 240ms ease;
}
.score-dial-center {
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
gap: 0.2rem;
}
.score-dial-center strong {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: clamp(2.5rem, 5vw, 3.4rem);
line-height: 0.9;
}
.score-dial-center span {
color: var(--muted);
font-size: 0.8rem;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.score-dial-copy {
display: grid;
gap: 0.75rem;
}
.score-dial-caption {
margin: 0;
color: var(--text);
line-height: 1.65;
}
.dashboard-score-explainer {
margin-top: 1rem;
display: grid;
gap: 1rem;
}
.dashboard-score-explainer-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.8rem;
}
.dashboard-score-callout,
.dashboard-attention-item,
.dashboard-role-visibility-card {
position: relative;
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.025);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.dashboard-drilldown-button {
position: relative;
width: 100%;
text-align: left;
cursor: pointer;
color: var(--text);
font: inherit;
appearance: none;
-webkit-appearance: none;
}
.dashboard-drilldown-button::before {
content: "Open";
position: absolute;
top: 0.78rem;
right: 0.78rem;
z-index: 2;
padding: 0.28rem 0.56rem;
border-radius: 999px;
border: 1px solid rgba(244, 187, 99, 0.24);
background: rgba(244, 187, 99, 0.1);
color: var(--text);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
html[lang="es"] .dashboard-drilldown-button::before {
content: "Abrir";
}
:is(body.task-mode, body.simple-mode) .dashboard-drilldown-button::before {
top: 0.6rem;
right: 0.6rem;
padding: 0.34rem 0.68rem;
border-color: rgba(244, 187, 99, 0.36);
background: linear-gradient(135deg, rgba(244, 187, 99, 0.22), rgba(80, 211, 198, 0.1));
box-shadow: 0 8px 18px rgba(1, 8, 14, 0.16);
font-size: 0.72rem;
}
.dashboard-score-callout {
min-height: 11.25rem;
padding: 1.1rem 1.15rem 1rem;
display: grid;
align-content: start;
gap: 0.65rem;
background:
radial-gradient(circle at top right, rgba(80, 211, 198, 0.12), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.025);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 18px 40px rgba(1, 8, 14, 0.18);
transition:
transform 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
.dashboard-score-callout::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 32%);
opacity: 0.9;
}
.dashboard-drilldown-button:is(.dashboard-score-callout, .dashboard-hero-summary-card, .dashboard-driver-card, .dashboard-context-kpi):hover {
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 22px 48px rgba(1, 8, 14, 0.24);
}
#dashboard-attention-now,
#dashboard-role-visibility {
display: grid;
gap: 0.75rem;
}
.dashboard-score-callout-good {
border-color: rgba(98, 226, 162, 0.28);
background:
radial-gradient(circle at top right, rgba(98, 226, 162, 0.18), transparent 38%),
linear-gradient(180deg, rgba(98, 226, 162, 0.08), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.025);
}
.dashboard-score-callout-watch {
border-color: rgba(244, 187, 99, 0.28);
background:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.18), transparent 38%),
linear-gradient(180deg, rgba(244, 187, 99, 0.08), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.025);
}
.dashboard-score-callout-alert {
border-color: rgba(255, 122, 122, 0.28);
background:
radial-gradient(circle at top right, rgba(255, 122, 122, 0.16), transparent 38%),
linear-gradient(180deg, rgba(255, 122, 122, 0.08), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.025);
}
.dashboard-score-callout-neutral {
border-color: rgba(136, 169, 255, 0.24);
background:
radial-gradient(circle at top right, rgba(136, 169, 255, 0.16), transparent 38%),
linear-gradient(180deg, rgba(136, 169, 255, 0.07), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.025);
}
.dashboard-attention-item {
width: 100%;
text-align: left;
padding: 0.95rem 1rem;
display: grid;
gap: 0.5rem;
}
.dashboard-attention-item-watch {
border-color: rgba(244, 187, 99, 0.18);
}
.dashboard-attention-item-alert {
border-color: rgba(255, 122, 122, 0.22);
}
.dashboard-attention-item-good {
border-color: rgba(98, 226, 162, 0.18);
}
.dashboard-attention-item .signal-value,
.dashboard-score-callout .signal-value,
.dashboard-role-visibility-card .signal-value {
font-size: 1.3rem;
color: #f7fbff;
text-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}
.dashboard-role-visibility-card {
padding: 1rem;
display: grid;
gap: 0.7rem;
}
.dashboard-role-launch-grid,
.module-role-launch-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
.dashboard-role-stage-card,
.module-stage-card {
display: grid;
gap: 0.65rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium-soft);
box-shadow: var(--shadow-soft);
}
.dashboard-role-stage-card strong,
.module-stage-card strong {
font-size: 1rem;
line-height: 1.35;
}
.dashboard-role-stage-card-good,
.module-stage-card-good {
border-color: rgba(98, 226, 162, 0.2);
}
.dashboard-role-stage-card-watch,
.module-stage-card-watch {
border-color: rgba(244, 187, 99, 0.2);
}
.dashboard-role-stage-card-alert,
.module-stage-card-alert {
border-color: rgba(255, 109, 132, 0.24);
background: color-mix(in srgb, var(--surface-premium-soft) 82%, rgba(255, 109, 132, 0.08));
}
.dashboard-role-stage-card-neutral,
.module-stage-card-neutral {
border-color: rgba(132, 154, 182, 0.18);
}
.dashboard-role-stage-card .button,
.module-stage-card .button {
justify-self: start;
}
.dashboard-role-launch-footer,
.module-stage-footer {
margin-top: 0.9rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.dashboard-role-agenda-inline {
margin-top: 1rem;
display: grid;
gap: 0.85rem;
}
.dashboard-inline-disclosure-quiet {
margin-top: 0.95rem;
padding-inline: 0;
padding-bottom: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.dashboard-inline-disclosure-quiet > :not(summary) {
margin-top: 0.7rem;
}
.dashboard-role-capability-list {
display: grid;
gap: 0.55rem;
}
.dashboard-role-capability-item {
display: grid;
padding: 0.78rem 0.9rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.07);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
}
.dashboard-role-capability-item strong {
font-size: 0.84rem;
line-height: 1.45;
}
.dashboard-role-home-actions + .button {
justify-self: start;
}
.dashboard-driver-section {
display: grid;
gap: 0.9rem;
padding: 1rem;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at top right, rgba(80, 211, 198, 0.08), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.dashboard-driver-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
.dashboard-driver-card,
.dashboard-context-kpi {
display: grid;
gap: 0.55rem;
padding: 0.95rem 1rem;
position: relative;
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.09), transparent 34%),
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.025);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 18px 38px rgba(1, 8, 14, 0.18);
color: var(--text);
}
.dashboard-driver-card-good,
.dashboard-context-kpi-good {
border-color: rgba(98, 226, 162, 0.2);
}
.dashboard-driver-card-watch,
.dashboard-context-kpi-watch {
border-color: rgba(244, 187, 99, 0.2);
}
.dashboard-driver-card-alert,
.dashboard-context-kpi-alert {
border-color: rgba(255, 122, 122, 0.2);
}
.dashboard-driver-card-neutral,
.dashboard-context-kpi-neutral {
border-color: rgba(136, 169, 255, 0.18);
}
.dashboard-driver-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.75rem;
}
.dashboard-driver-impact {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3rem;
padding: 0.28rem 0.55rem;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.dashboard-driver-impact-up {
background: rgba(98, 226, 162, 0.14);
color: #8ef4b7;
}
.dashboard-driver-impact-down {
background: rgba(255, 122, 122, 0.14);
color: #ffb06f;
}
.dashboard-driver-bar-shell {
height: 0.45rem;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.07);
}
.dashboard-driver-bar {
display: block;
height: 100%;
border-radius: inherit;
width: var(--ui-percent, 0%);
}
.dashboard-driver-bar-up {
background: linear-gradient(90deg, #50d3c6, #8ef4b7);
}
.dashboard-driver-bar-down {
background: linear-gradient(90deg, #ff7a7a, #ffb06f);
}
.dashboard-context-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.8rem;
}
.dashboard-context-kpi .signal-value,
.dashboard-driver-card .signal-value {
color: var(--text-strong);
text-shadow: var(--surface-value-shadow);
}
.dashboard-context-kpi .signal-value {
font-size: clamp(2rem, 3vw, 2.8rem);
letter-spacing: -0.03em;
}
.report-card-featured {
grid-column: 1 / -1;
}
.dashboard-depth-disclosure {
margin-top: 1rem;
display: grid;
gap: 1rem;
}
.dashboard-secondary-grid {
margin-top: 0.4rem;
}
.dashboard-operating-grid {
margin-top: 1rem;
}
.dashboard-command-grid > .report-card,
.dashboard-secondary-grid > .report-card,
#dashboard-operating-grid > [data-dashboard-panel] {
position: relative;
isolation: isolate;
overflow: hidden;
}
.dashboard-command-grid > .report-card > *,
.dashboard-secondary-grid > .report-card > *,
#dashboard-operating-grid > [data-dashboard-panel] > * {
position: relative;
z-index: 1;
}
.dashboard-command-grid > .report-card::before,
.dashboard-secondary-grid > .report-card::before,
#dashboard-operating-grid > [data-dashboard-panel]::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at top right, rgba(80, 211, 198, 0.12), transparent 44%);
opacity: 0.88;
}
#dashboard-operating-grid > [data-dashboard-panel] {
display: grid;
gap: 0.95rem;
padding: 1.15rem 1.2rem;
border-radius: 24px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium-soft) 96%, transparent),
color-mix(in srgb, var(--surface-card) 94%, transparent)
),
var(--surface-panel);
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
#dashboard-operating-grid > [data-dashboard-panel] .section-heading,
.dashboard-command-grid > .report-card .section-heading,
.dashboard-secondary-grid > .report-card .section-heading {
gap: 0.24rem;
}
#dashboard-operating-grid > [data-dashboard-panel] .section-heading h3,
.dashboard-command-grid > .report-card .section-heading h3,
.dashboard-secondary-grid > .report-card .section-heading h3 {
font-size: 1.24rem;
line-height: 1.08;
}
.dashboard-command-grid > .report-card .section-heading .eyebrow,
.dashboard-secondary-grid > .report-card .section-heading .eyebrow,
#dashboard-operating-grid > [data-dashboard-panel] .section-heading .eyebrow {
color: color-mix(in srgb, var(--brand) 84%, var(--text));
}
.shadow-feature-card {
border-color: rgba(244, 187, 99, 0.24);
background:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.18), transparent 34%),
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium) 96%, transparent),
color-mix(in srgb, var(--surface-premium-soft) 96%, transparent)
),
var(--surface-panel);
box-shadow:
inset 0 0 0 1px rgba(244, 187, 99, 0.08),
0 22px 44px rgba(7, 18, 27, 0.22);
}
.shadow-feature-card::before {
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 26%),
radial-gradient(circle at top right, rgba(244, 187, 99, 0.16), transparent 42%);
}
.dashboard-signal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.dashboard-command-card .dashboard-signal-grid {
grid-template-columns: repeat(2, minmax(220px, 1fr));
}
.signal-card {
padding: 1rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022)),
rgba(255, 255, 255, 0.03);
display: grid;
gap: 0.45rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.signal-card-alert {
background: linear-gradient(180deg, rgba(255, 122, 122, 0.14), rgba(255, 122, 122, 0.04));
}
.signal-card-watch {
background: linear-gradient(180deg, rgba(244, 187, 99, 0.14), rgba(244, 187, 99, 0.04));
}
.signal-card-good {
background: linear-gradient(180deg, rgba(98, 226, 162, 0.14), rgba(98, 226, 162, 0.04));
}
.signal-card-neutral {
background: linear-gradient(180deg, rgba(136, 169, 255, 0.12), rgba(136, 169, 255, 0.04));
}
.signal-label {
margin: 0;
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.signal-value {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 2.2rem;
line-height: 1;
color: var(--text);
}
.signal-copy {
margin: 0;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.5;
}
.module-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.ai-firewall-module-screen {
gap: 1rem;
}
.ai-firewall-hero {
grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
align-items: stretch;
}
.ai-firewall-module-grid {
grid-template-columns: minmax(0, 1fr);
}
.ai-firewall-workbench {
display: grid;
gap: 1rem;
}
.ai-firewall-workbench .hidden {
display: none !important;
}
.system-focus-shell {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 1rem;
}
.system-portfolio-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
.system-portfolio-card {
width: 100%;
text-align: left;
padding: 1rem 1.05rem;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
color: var(--text);
display: grid;
gap: 0.65rem;
cursor: pointer;
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease;
}
.system-portfolio-card:hover {
transform: translateY(-2px);
border-color: rgba(80, 211, 198, 0.22);
}
.system-portfolio-card.active {
border-color: rgba(244, 187, 99, 0.34);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.18), rgba(80, 211, 198, 0.08)),
rgba(255, 255, 255, 0.04);
box-shadow:
inset 0 0 0 1px rgba(244, 187, 99, 0.12),
var(--shadow-soft);
}
.system-portfolio-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: start;
}
.system-portfolio-head h4,
.system-focus-header h4 {
margin: 0;
font-size: 1.2rem;
}
.system-portfolio-metrics,
.system-focus-meta {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
color: var(--muted);
font-size: 0.9rem;
}
.system-focus-panel,
.system-focus-state {
display: grid;
gap: 1rem;
min-height: 100%;
}
.system-focus-header {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: start;
flex-wrap: wrap;
}
.system-focus-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.9rem;
}
.systems-overview-grid,
.controls-overview-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.shadow-governed-bridge {
display: grid;
gap: 1rem;
}
.shadow-governed-bridge-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem;
}
.shadow-governed-bridge-actions {
justify-content: flex-start;
}
.systems-workspace {
display: grid;
}
.systems-panel {
display: grid;
gap: 1rem;
}
.systems-intake-shell {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 1rem;
align-items: start;
}
/* Systems workbench density */
.systems-workbench-screen {
gap: clamp(0.75rem, 1.1vw, 1rem);
}
.systems-workbench-hero {
padding: clamp(1.05rem, 1.6vw, 1.45rem);
}
.systems-workbench-hero h3 {
max-width: 16ch;
}
.systems-workbench-hero .module-copy {
max-width: 76ch;
}
.systems-workbench-overview {
gap: 0.65rem;
}
.systems-start-panel,
.systems-work-surface-card:not(.hidden) {
padding: clamp(0.95rem, 1.35vw, 1.22rem);
}
.systems-work-surface {
gap: clamp(0.7rem, 1vw, 0.95rem);
}
.systems-work-surface .systems-panel {
gap: clamp(0.7rem, 1vw, 0.95rem);
}
.systems-work-surface .system-focus-shell,
.systems-work-surface .systems-intake-shell {
gap: 0.72rem;
}
.systems-work-surface .system-portfolio-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.systems-work-surface .system-portfolio-card,
.systems-work-surface .controls-overview-card {
padding: 0.82rem;
}
.systems-work-surface .system-portfolio-card {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.55rem 0.9rem;
min-height: 4.2rem;
}
.systems-work-surface .system-portfolio-card .controls-overview-copy {
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.systems-work-surface .system-portfolio-metrics {
grid-column: 1 / -1;
gap: 0.42rem;
font-size: 0.78rem;
}
.systems-work-surface .system-portfolio-metrics span:nth-child(n + 5) {
display: none;
}
.systems-work-surface .system-portfolio-head {
align-items: center;
}
.systems-work-surface .system-portfolio-head h4 {
font-size: clamp(1rem, 0.85vw + 0.86rem, 1.16rem);
}
.systems-work-surface .system-focus-panel,
.systems-work-surface .system-focus-state {
gap: 0.72rem;
}
.systems-work-surface-card > .section-heading {
margin-bottom: 0.45rem;
}
.systems-work-surface-card .controls-panel-copy,
.systems-work-surface-card .module-copy {
max-width: 74ch;
margin-bottom: 0.68rem;
}
.systems-subnav .module-subnav-button {
min-height: 2.85rem;
padding: 0.7rem 0.85rem;
}
.systems-subnav .module-subnav-button small {
display: none;
}
.analyst-intake-router-host {
min-width: 0;
}
.analyst-intake-router {
display: grid;
gap: 0.85rem;
padding: clamp(1rem, 1.6vw, 1.35rem);
}
.analyst-intake-router-head {
display: grid;
grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.25fr);
gap: clamp(0.7rem, 1.5vw, 1.2rem);
align-items: end;
}
.analyst-intake-router-head h3 {
margin: 0;
}
.analyst-intake-router-head p:last-child {
max-width: 78ch;
margin: 0;
color: var(--muted);
font-size: clamp(0.9rem, 1.05vw, 1rem);
line-height: 1.5;
}
.analyst-intake-router-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.7rem;
}
.analyst-intake-route {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"step copy"
"cta cta";
gap: 0.55rem 0.7rem;
min-width: 0;
padding: 0.82rem;
text-align: left;
color: var(--text);
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
border-radius: 20px;
background:
linear-gradient(145deg, color-mix(in srgb, var(--surface-soft) 84%, transparent), color-mix(in srgb, var(--surface-card) 96%, transparent)),
var(--surface-card);
cursor: pointer;
transition:
border-color var(--motion-fast) ease,
box-shadow var(--motion-fast) ease,
transform var(--motion-fast) ease;
}
.analyst-intake-route:hover,
.analyst-intake-route:focus-visible,
.analyst-intake-route.active {
border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
box-shadow: 0 18px 46px color-mix(in srgb, var(--accent) 14%, transparent);
transform: translateY(-1px);
}
.analyst-intake-route-step {
grid-area: step;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
color: var(--surface-base);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
border-radius: 999px;
background: linear-gradient(135deg, var(--accent), var(--brand));
}
.analyst-intake-route-copy {
grid-area: copy;
display: grid;
gap: 0.2rem;
min-width: 0;
}
.analyst-intake-route-copy > span {
color: var(--accent);
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.analyst-intake-route-copy strong {
color: var(--text-strong);
line-height: 1.15;
}
.analyst-intake-route-copy small {
display: -webkit-box;
overflow: hidden;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.34;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.analyst-intake-route-cta {
grid-area: cta;
justify-self: start;
padding: 0.36rem 0.6rem;
color: var(--text-strong);
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.04em;
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}
.analyst-intake-route.active .analyst-intake-route-cta {
color: var(--surface-base);
border-color: transparent;
background: linear-gradient(135deg, var(--accent), var(--brand));
}
@media (max-width: 1180px) {
.analyst-intake-router-head,
.analyst-intake-router-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.analyst-intake-router-head,
.analyst-intake-router-grid {
grid-template-columns: 1fr;
}
.analyst-intake-route {
grid-template-columns: auto minmax(0, 1fr);
}
.analyst-intake-route-cta {
width: 100%;
text-align: center;
}
}
.systems-decision-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.7rem;
}
.systems-decision-strip button {
display: grid;
gap: 0.42rem;
min-width: 0;
padding: 0.85rem;
text-align: left;
color: var(--text);
border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
border-radius: 18px;
background:
linear-gradient(145deg, color-mix(in srgb, var(--surface-soft) 82%, transparent), color-mix(in srgb, var(--surface-card) 96%, transparent)),
var(--surface-card);
cursor: pointer;
transition:
border-color var(--motion-fast) ease,
box-shadow var(--motion-fast) ease,
transform var(--motion-fast) ease;
}
.systems-decision-strip button:hover,
.systems-decision-strip button:focus-visible {
border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 16%, transparent);
transform: translateY(-1px);
}
.systems-decision-strip span {
color: var(--accent);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.systems-decision-strip strong {
color: var(--text-strong);
line-height: 1.18;
}
.systems-decision-strip small {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.35;
}
.provider-decision-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.7rem;
}
.provider-decision-strip button {
display: grid;
gap: 0.42rem;
min-width: 0;
padding: 0.85rem;
text-align: left;
color: var(--text);
border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
border-radius: 18px;
background:
linear-gradient(145deg, color-mix(in srgb, var(--surface-soft) 82%, transparent), color-mix(in srgb, var(--surface-card) 96%, transparent)),
var(--surface-card);
cursor: pointer;
transition:
border-color var(--motion-fast) ease,
box-shadow var(--motion-fast) ease,
transform var(--motion-fast) ease;
}
.provider-decision-strip button:hover,
.provider-decision-strip button:focus-visible {
border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 16%, transparent);
transform: translateY(-1px);
}
.provider-decision-strip span {
color: var(--accent);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.provider-decision-strip strong {
color: var(--text-strong);
line-height: 1.18;
}
.provider-decision-strip small {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.35;
}
.vendor-decision-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.7rem;
}
.vendor-decision-strip button {
display: grid;
gap: 0.42rem;
min-width: 0;
padding: 0.85rem;
text-align: left;
color: var(--text);
border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
border-radius: 18px;
background:
linear-gradient(145deg, color-mix(in srgb, var(--surface-soft) 82%, transparent), color-mix(in srgb, var(--surface-card) 96%, transparent)),
var(--surface-card);
cursor: pointer;
transition:
border-color var(--motion-fast) ease,
box-shadow var(--motion-fast) ease,
transform var(--motion-fast) ease;
}
.vendor-decision-strip button:hover,
.vendor-decision-strip button:focus-visible {
border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 16%, transparent);
transform: translateY(-1px);
}
.vendor-decision-strip span {
color: var(--accent);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vendor-decision-strip strong {
color: var(--text-strong);
line-height: 1.18;
}
.vendor-decision-strip small {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.35;
}
.systems-register-surface {
display: grid;
gap: 0.85rem;
}
.systems-register-list {
display: grid;
gap: 0.85rem;
}
.systems-register-card {
display: grid;
gap: 0.9rem;
min-width: 0;
padding: clamp(0.95rem, 1.5vw, 1.25rem);
border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
border-radius: 28px;
background:
radial-gradient(circle at 8% 0%, rgba(80, 211, 198, 0.1), transparent 32%),
linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
color-mix(in srgb, var(--surface-panel) 94%, transparent);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.16);
}
.systems-register-card-good {
border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}
.systems-register-card-watch {
border-color: color-mix(in srgb, var(--accent-2) 28%, var(--border));
}
.systems-register-card-alert {
border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}
.systems-register-card-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.85rem;
align-items: start;
}
.systems-register-card-head h4 {
margin: 0.1rem 0 0.25rem;
font-size: clamp(1.12rem, 0.6vw + 1rem, 1.45rem);
line-height: 1.05;
}
.systems-register-card-head p {
margin: 0;
color: var(--muted);
}
.systems-register-kicker {
color: var(--accent-2);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.systems-register-status-strip,
.systems-register-actions,
.systems-register-context {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.systems-register-status-strip {
justify-content: flex-end;
}
.systems-register-lanes {
display: grid;
grid-template-columns: minmax(15rem, 1fr) minmax(14rem, 0.9fr) minmax(18rem, 1.15fr);
gap: 0.75rem;
}
.systems-register-lane {
display: grid;
align-content: start;
gap: 0.55rem;
min-width: 0;
padding: 0.8rem;
border: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
border-radius: 22px;
background: color-mix(in srgb, var(--surface-card) 62%, transparent);
}
.systems-register-lane-alert {
border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
}
.systems-register-lane-watch {
border-color: color-mix(in srgb, var(--accent-2) 36%, var(--border));
}
.systems-register-lane-good {
border-color: color-mix(in srgb, var(--success) 32%, var(--border));
}
.systems-register-lane h5 {
margin: 0;
font-size: 1rem;
line-height: 1.15;
}
.systems-register-lane p {
margin: 0;
color: var(--muted);
}
.systems-register-metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
}
.systems-register-metric {
display: grid;
gap: 0.08rem;
min-width: 0;
padding: 0.55rem 0.62rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
}
.systems-register-metric strong {
color: var(--text);
font-size: 1rem;
line-height: 1;
}
.systems-register-metric small,
.systems-register-context {
color: var(--muted);
font-size: 0.82rem;
}
.systems-register-metric-good {
background: color-mix(in srgb, var(--success) 12%, transparent);
}
.systems-register-metric-watch {
background: color-mix(in srgb, var(--accent-2) 13%, transparent);
}
.systems-register-metric-alert {
background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.systems-register-context {
padding-top: 0.25rem;
}
.systems-register-actions {
justify-content: flex-start;
padding-top: 0.65rem;
border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
@media (max-width: 1180px) {
.systems-register-lanes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.systems-register-lane:first-child {
grid-column: 1 / -1;
}
}
@media (max-width: 760px) {
.systems-register-card-head,
.systems-register-lanes,
.systems-register-metric-grid {
grid-template-columns: 1fr;
}
.systems-register-status-strip {
justify-content: flex-start;
}
.systems-register-actions .table-action-button {
width: 100%;
}
}
.vendor-register-surface,
.vendor-review-surface {
display: grid;
gap: 0.85rem;
}
.vendor-register-list,
.vendor-review-list {
display: grid;
gap: 0.85rem;
}
.vendor-register-card,
.vendor-review-card {
display: grid;
gap: 0.9rem;
min-width: 0;
padding: clamp(0.95rem, 1.5vw, 1.25rem);
border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
border-radius: 28px;
background:
radial-gradient(circle at 9% 0%, rgba(255, 204, 113, 0.09), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.016)),
color-mix(in srgb, var(--surface-panel) 94%, transparent);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.17);
}
.vendor-register-card-good,
.vendor-review-card-good {
border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}
.vendor-register-card-watch,
.vendor-review-card-watch,
.vendor-register-card-neutral,
.vendor-review-card-neutral {
border-color: color-mix(in srgb, var(--accent-2) 26%, var(--border));
}
.vendor-register-card-alert,
.vendor-review-card-alert {
border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}
.vendor-register-card-head,
.vendor-review-card-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.85rem;
align-items: start;
}
.vendor-register-card-head h4,
.vendor-review-card-head h4 {
margin: 0.08rem 0 0.22rem;
font-size: clamp(1.08rem, 0.5vw + 1rem, 1.36rem);
line-height: 1.07;
}
.vendor-register-card-head p,
.vendor-review-card-head p {
margin: 0;
color: var(--muted);
}
.vendor-register-kicker {
color: var(--accent-2);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.vendor-register-status-strip,
.vendor-register-actions,
.vendor-register-context {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.vendor-register-status-strip {
justify-content: flex-end;
}
.vendor-register-lanes {
display: grid;
grid-template-columns: minmax(13rem, 0.82fr) minmax(18rem, 1.1fr) minmax(18rem, 1.08fr);
gap: 0.75rem;
}
.vendor-review-body {
display: grid;
grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.15fr) minmax(16rem, 0.95fr);
gap: 0.75rem;
}
.vendor-register-lane {
display: grid;
align-content: start;
gap: 0.55rem;
min-width: 0;
padding: 0.78rem;
border: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
border-radius: 22px;
background: color-mix(in srgb, var(--surface-card) 62%, transparent);
}
.vendor-register-lane-alert {
border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
}
.vendor-register-lane-watch {
border-color: color-mix(in srgb, var(--accent-2) 34%, var(--border));
}
.vendor-register-lane-good {
border-color: color-mix(in srgb, var(--success) 32%, var(--border));
}
.vendor-register-lane h5 {
margin: 0;
font-size: 1rem;
line-height: 1.15;
}
.vendor-register-lane p {
margin: 0;
color: var(--muted);
}
.vendor-register-metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
}
.vendor-register-metric {
display: grid;
gap: 0.08rem;
min-width: 0;
padding: 0.55rem 0.62rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
}
.vendor-register-metric strong {
color: var(--text);
font-size: 0.98rem;
line-height: 1.05;
}
.vendor-register-metric small,
.vendor-register-context {
color: var(--muted);
font-size: 0.82rem;
}
.vendor-register-metric-good {
background: color-mix(in srgb, var(--success) 12%, transparent);
}
.vendor-register-metric-watch {
background: color-mix(in srgb, var(--accent-2) 13%, transparent);
}
.vendor-register-metric-alert {
background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.vendor-register-context {
padding-top: 0.2rem;
}
.vendor-register-context span {
min-width: min(100%, 18rem);
}
.vendor-register-actions {
justify-content: flex-start;
padding-top: 0.65rem;
border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
@media (max-width: 1180px) {
.vendor-register-lanes,
.vendor-review-body {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vendor-register-lanes .vendor-register-lane:first-child,
.vendor-review-body .vendor-register-lane:nth-child(2) {
grid-column: 1 / -1;
}
}
@media (max-width: 760px) {
.vendor-register-card-head,
.vendor-review-card-head,
.vendor-register-lanes,
.vendor-review-body,
.vendor-register-metric-grid {
grid-template-columns: 1fr;
}
.vendor-register-status-strip {
justify-content: flex-start;
}
.vendor-register-actions .table-action-button {
width: 100%;
}
}
/* Analyst compact register density */
.systems-register-list.analyst-register-list,
.provider-profile-list.analyst-register-list,
.vendor-register-list.analyst-register-list,
.vendor-review-list.analyst-register-list {
gap: 0.68rem;
}
.provider-profile-list {
display: grid;
gap: 0.68rem;
}
.systems-register-card.analyst-register-card,
.provider-profile-card.analyst-register-card,
.vendor-register-card.analyst-register-card,
.vendor-review-card.analyst-register-card {
gap: 0.68rem;
padding: clamp(0.72rem, 1vw, 1rem);
border-radius: 22px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}
.systems-register-card.analyst-register-card,
.vendor-register-card.analyst-register-card {
grid-template-columns: minmax(12rem, 0.82fr) minmax(0, 1.58fr) minmax(8.5rem, 0.42fr);
grid-template-areas:
"head lanes actions"
"context lanes actions";
align-items: start;
}
.vendor-review-card.analyst-register-card {
grid-template-columns: minmax(12rem, 0.82fr) minmax(0, 1.58fr) minmax(8.5rem, 0.42fr);
grid-template-areas: "head body actions";
align-items: start;
}
.provider-profile-card.analyst-register-card {
display: grid;
grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.25fr) minmax(10rem, 0.48fr);
grid-template-areas:
"head meta actions"
"accountability docs actions";
align-items: start;
gap: 0.68rem;
}
.systems-register-card.analyst-register-card .systems-register-card-head,
.vendor-register-card.analyst-register-card .vendor-register-card-head,
.vendor-review-card.analyst-register-card .vendor-review-card-head,
.provider-profile-card.analyst-register-card .connector-head {
grid-area: head;
grid-template-columns: 1fr;
gap: 0.45rem;
}
.systems-register-card.analyst-register-card .systems-register-lanes,
.vendor-register-card.analyst-register-card .vendor-register-lanes {
grid-area: lanes;
grid-template-columns: minmax(9rem, 0.88fr) minmax(10rem, 1fr) minmax(12rem, 1.12fr);
gap: 0.55rem;
}
.vendor-review-card.analyst-register-card .vendor-review-body {
grid-area: body;
grid-template-columns: minmax(9rem, 0.88fr) minmax(12rem, 1.1fr) minmax(10rem, 0.92fr);
gap: 0.55rem;
}
.systems-register-card.analyst-register-card .systems-register-context,
.vendor-register-card.analyst-register-card .vendor-register-context {
grid-area: context;
gap: 0.35rem;
padding-top: 0;
font-size: 0.76rem;
line-height: 1.3;
}
.systems-register-card.analyst-register-card .systems-register-actions,
.vendor-register-card.analyst-register-card .vendor-register-actions,
.vendor-review-card.analyst-register-card .vendor-register-actions,
.provider-profile-card.analyst-register-card .connector-actions {
grid-area: actions;
align-content: start;
align-items: stretch;
justify-content: flex-start;
gap: 0.42rem;
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.systems-register-card.analyst-register-card .systems-register-actions,
.vendor-register-card.analyst-register-card .vendor-register-actions,
.vendor-review-card.analyst-register-card .vendor-register-actions,
.provider-profile-card.analyst-register-card .connector-actions {
flex-direction: column;
}
.provider-profile-card.analyst-register-card .connector-meta {
grid-area: meta;
display: grid;
gap: 0.28rem;
margin-top: 0;
font-size: 0.82rem;
line-height: 1.35;
}
.provider-profile-card.analyst-register-card > .accountability-table-cell {
grid-area: accountability;
margin-top: 0;
padding: 0.65rem;
border-radius: 16px;
}
.provider-profile-card.analyst-register-card .connector-docs {
grid-area: docs;
margin-top: 0;
font-size: 0.82rem;
line-height: 1.38;
}
.analyst-register-card :is(
.systems-register-lane,
.vendor-register-lane
) {
gap: 0.4rem;
padding: 0.62rem 0.68rem;
border-radius: 16px;
}
.analyst-register-card :is(
.systems-register-card-head h4,
.vendor-register-card-head h4,
.vendor-review-card-head h4,
.connector-head h4
) {
font-size: clamp(1rem, 0.38vw + 0.95rem, 1.18rem);
line-height: 1.08;
}
.analyst-register-card :is(
.systems-register-lane h5,
.vendor-register-lane h5
) {
font-size: 0.92rem;
line-height: 1.12;
}
.analyst-register-card :is(
.systems-register-card-head p,
.vendor-register-card-head p,
.vendor-review-card-head p,
.systems-register-lane p,
.vendor-register-lane p,
.connector-meta p,
.connector-docs p
) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.analyst-register-card :is(
.systems-register-metric-grid,
.vendor-register-metric-grid,
.accountability-meta-grid
) {
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
gap: 0.36rem;
}
.analyst-register-card :is(
.systems-register-metric,
.vendor-register-metric
) {
padding: 0.46rem 0.52rem;
border-radius: 14px;
}
.analyst-register-card :is(
.systems-register-metric strong,
.vendor-register-metric strong
) {
font-size: 0.9rem;
}
.analyst-register-card :is(
.status,
.pill,
.sla-pill
) {
max-width: 100%;
white-space: normal;
}
.analyst-register-card :is(
.table-action-button,
.button
) {
min-height: 2.35rem;
padding: 0.5rem 0.7rem;
font-size: 0.82rem;
line-height: 1.2;
}
@media (max-width: 1380px) {
.systems-register-card.analyst-register-card,
.vendor-register-card.analyst-register-card {
grid-template-columns: minmax(12rem, 0.82fr) minmax(10rem, 0.48fr);
grid-template-areas:
"head actions"
"lanes lanes"
"context context";
}
.vendor-review-card.analyst-register-card {
grid-template-columns: minmax(12rem, 0.82fr) minmax(10rem, 0.48fr);
grid-template-areas:
"head actions"
"body body";
}
.provider-profile-card.analyst-register-card {
grid-template-columns: minmax(12rem, 0.82fr) minmax(10rem, 0.48fr);
grid-template-areas:
"head actions"
"meta meta"
"accountability docs";
}
}
@media (max-width: 920px) {
.systems-register-card.analyst-register-card,
.vendor-register-card.analyst-register-card,
.vendor-review-card.analyst-register-card,
.provider-profile-card.analyst-register-card {
grid-template-columns: 1fr;
grid-template-areas:
"head"
"meta"
"lanes"
"body"
"accountability"
"docs"
"context"
"actions";
}
.systems-register-card.analyst-register-card .systems-register-lanes,
.vendor-register-card.analyst-register-card .vendor-register-lanes,
.vendor-review-card.analyst-register-card .vendor-review-body {
grid-template-columns: 1fr;
}
.systems-register-card.analyst-register-card .systems-register-actions,
.vendor-register-card.analyst-register-card .vendor-register-actions,
.vendor-review-card.analyst-register-card .vendor-register-actions,
.provider-profile-card.analyst-register-card .connector-actions {
flex-direction: row;
flex-wrap: wrap;
}
}
@media (max-width: 640px) {
.analyst-register-card :is(
.table-action-button,
.button
) {
width: 100%;
}
}
.governance-detail-drawer[open] .compact-form {
padding-bottom: 0.35rem;
}
.eval-dashboard-shell {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.assurance-detail-drawer[open] .compact-form {
padding-bottom: 0.35rem;
}
:is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
) {
--detail-drawer-max: min(38rem, 64dvh);
--work-surface-drawer-width: min(42rem, calc(100vw - 2rem));
}
:is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
):not([open]) {
padding-block: 0.78rem;
}
:is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] {
position: fixed;
inset: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
z-index: 1200;
width: auto;
max-width: none;
max-height: none;
min-height: 0;
overflow: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
margin: 0;
padding: clamp(1rem, 2vw, 1.35rem);
border-color: color-mix(in srgb, var(--brand) 26%, var(--surface-premium-border));
border-radius: clamp(22px, 2vw, 34px);
background:
radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 30%),
linear-gradient(155deg, #081522, #050d16) !important;
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.58), 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent);
opacity: 1 !important;
animation: workSurfaceDrawerIn 180ms ease-out both;
}
.work-surface-drawer-portal[open] {
box-sizing: border-box;
display: grid !important;
grid-template-rows: auto auto minmax(0, 1fr);
gap: clamp(0.9rem, 1.6vw, 1.25rem);
contain: none !important;
isolation: isolate;
}
.report-detail-drawer.work-surface-drawer-portal[open] {
background:
radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 30%),
linear-gradient(155deg, #0a1723, #07111b) !important;
opacity: 1 !important;
}
.report-detail-drawer.work-surface-drawer-portal[open]::before {
content: none !important;
}
:is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] > summary {
position: sticky;
top: 0;
z-index: 4;
margin: calc(-1 * clamp(1rem, 2vw, 1.35rem)) calc(-1 * clamp(1rem, 2vw, 1.35rem)) 0;
padding: 0.9rem min(18rem, 44vw) 0.9rem clamp(1rem, 2vw, 1.35rem);
border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 76%, transparent);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium) 99%, black),
color-mix(in srgb, var(--surface-premium-strong) 98%, black)
),
var(--surface-premium);
backdrop-filter: none;
}
.work-surface-drawer-close {
position: sticky;
top: 0.88rem;
z-index: 6;
float: right;
margin: 0.2rem 0 1rem 1rem;
min-height: 2.7rem;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}
body.work-surface-drawer-open {
overflow: hidden;
}
body.work-surface-drawer-open::after {
content: "";
position: fixed;
inset: 0;
z-index: 1190;
background:
radial-gradient(circle at 28% 12%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 34%),
rgba(1, 6, 11, 0.9);
pointer-events: auto;
}
@keyframes workSurfaceDrawerIn {
from {
opacity: 0;
transform: translateY(0.35rem) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.governance-detail-drawer,
.assurance-detail-drawer {
--detail-drawer-max: min(40rem, 66dvh);
}
.mini-card-list {
margin: 0.35rem 0 0;
padding-left: 1rem;
color: var(--muted);
}
.mini-card-list li + li {
margin-top: 0.28rem;
}
.system-intake-summary,
.system-intake-empty {
display: grid;
gap: 1rem;
}
.system-intake-readiness {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.system-intake-meta {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
color: var(--muted);
font-size: 0.9rem;
}
.system-intake-missing h4 {
margin: 0 0 0.55rem;
font-size: 1rem;
}
.system-intake-missing .controls-overview-copy {
margin: 0 0 0.75rem;
}
.eu-ai-pack-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 0.85rem;
}
.eu-ai-pack-card {
display: grid;
gap: 0.75rem;
align-content: start;
}
.eu-ai-pack-card strong {
display: block;
margin-bottom: 0.35rem;
}
.eu-ai-pack-card-alert {
background:
linear-gradient(180deg, rgba(255, 122, 122, 0.12), rgba(255, 122, 122, 0.03)),
rgba(255, 255, 255, 0.03);
}
.eu-ai-pack-card-watch {
background:
linear-gradient(180deg, rgba(244, 187, 99, 0.12), rgba(244, 187, 99, 0.03)),
rgba(255, 255, 255, 0.03);
}
.eu-ai-pack-card-neutral {
background:
linear-gradient(180deg, rgba(132, 150, 196, 0.09), rgba(132, 150, 196, 0.02)),
rgba(255, 255, 255, 0.03);
}
.workflow-rail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
}
.workflow-stage,
.workflow-action-panel {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 1rem;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at top right, rgba(132, 150, 196, 0.08), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.025);
display: grid;
gap: 0.55rem;
box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.workflow-stage::before,
.workflow-action-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 26%),
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 36%);
opacity: 0.8;
}
.workflow-stage > *,
.workflow-action-panel > * {
position: relative;
z-index: 1;
}
.workflow-stage-approved {
background:
linear-gradient(180deg, rgba(98, 226, 162, 0.12), rgba(98, 226, 162, 0.03)),
rgba(255, 255, 255, 0.02);
}
.workflow-stage-pending {
background:
linear-gradient(180deg, rgba(244, 187, 99, 0.12), rgba(244, 187, 99, 0.03)),
rgba(255, 255, 255, 0.02);
}
.workflow-stage-changes_requested,
.workflow-stage-rejected {
background:
linear-gradient(180deg, rgba(255, 122, 122, 0.14), rgba(255, 122, 122, 0.03)),
rgba(255, 255, 255, 0.02);
}
.workflow-stage-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: start;
flex-wrap: wrap;
padding-bottom: 0.55rem;
border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 76%, transparent);
}
.workflow-stage h5 {
margin: 0;
font-size: 1.12rem;
line-height: 1.18;
}
.workflow-stage-meta {
margin: 0;
color: var(--muted-strong);
font-size: 0.88rem;
line-height: 1.5;
}
.workflow-action-panel textarea {
min-height: 6.4rem;
}
.workflow-action-panel .form-actions {
padding-top: 0.6rem;
border-top: 1px solid color-mix(in srgb, var(--panel-border) 76%, transparent);
}
.pill-good {
border-color: rgba(98, 226, 162, 0.18);
}
.pill-watch {
border-color: rgba(244, 187, 99, 0.24);
}
.pill-alert {
border-color: rgba(255, 122, 122, 0.24);
}
.pill-neutral {
border-color: rgba(136, 169, 255, 0.2);
}
.pill-healthy {
border-color: rgba(98, 226, 162, 0.18);
background: rgba(98, 226, 162, 0.08);
}
.pill-stale {
border-color: rgba(244, 187, 99, 0.24);
background: rgba(244, 187, 99, 0.08);
}
.pill-failing {
border-color: rgba(255, 122, 122, 0.24);
background: rgba(255, 122, 122, 0.08);
}
.pill-pending {
border-color: rgba(136, 169, 255, 0.2);
background: rgba(136, 169, 255, 0.08);
}
.controls-overview-card {
width: 100%;
text-align: left;
padding: 1.05rem 1.1rem;
border-radius: 22px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium-soft);
color: var(--text);
display: grid;
gap: 0.45rem;
cursor: pointer;
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.controls-overview-card-static {
cursor: default;
}
.controls-overview-card-static:hover {
transform: none;
border-color: var(--surface-premium-border);
box-shadow: var(--shadow-soft);
}
.controls-overview-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 42%);
opacity: 0.6;
pointer-events: none;
}
button.controls-overview-card:not(.controls-overview-card-static)::before,
.controls-overview-card[data-scroll-target]::before,
.controls-overview-card[data-target-module]::before,
.controls-overview-card[data-report-nav]::before,
.controls-overview-card[data-report-launch-target]::before,
.controls-overview-card[data-program-launch-target]::before,
.controls-overview-card[data-controls-launch-target]::before,
.controls-overview-card[data-admin-launch-target]::before,
.controls-overview-card[data-report-focus-target]::before {
content: "Open";
position: absolute;
top: 0.72rem;
right: 0.72rem;
z-index: 2;
padding: 0.26rem 0.54rem;
border-radius: 999px;
border: 1px solid rgba(244, 187, 99, 0.24);
background: rgba(244, 187, 99, 0.1);
color: var(--text);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
pointer-events: none;
}
html[lang="es"] button.controls-overview-card:not(.controls-overview-card-static)::before,
html[lang="es"] .controls-overview-card[data-scroll-target]::before,
html[lang="es"] .controls-overview-card[data-target-module]::before,
html[lang="es"] .controls-overview-card[data-report-nav]::before,
html[lang="es"] .controls-overview-card[data-report-launch-target]::before,
html[lang="es"] .controls-overview-card[data-program-launch-target]::before,
html[lang="es"] .controls-overview-card[data-controls-launch-target]::before,
html[lang="es"] .controls-overview-card[data-admin-launch-target]::before,
html[lang="es"] .controls-overview-card[data-report-focus-target]::before {
content: "Abrir";
}
:is(body.task-mode, body.simple-mode) button.controls-overview-card:not(.controls-overview-card-static)::before,
:is(body.task-mode, body.simple-mode) .controls-overview-card[data-scroll-target]::before,
:is(body.task-mode, body.simple-mode) .controls-overview-card[data-target-module]::before,
:is(body.task-mode, body.simple-mode) .controls-overview-card[data-report-nav]::before,
:is(body.task-mode, body.simple-mode) .controls-overview-card[data-report-launch-target]::before,
:is(body.task-mode, body.simple-mode) .controls-overview-card[data-program-launch-target]::before,
:is(body.task-mode, body.simple-mode) .controls-overview-card[data-controls-launch-target]::before,
:is(body.task-mode, body.simple-mode) .controls-overview-card[data-admin-launch-target]::before,
:is(body.task-mode, body.simple-mode) .controls-overview-card[data-report-focus-target]::before {
top: 0.6rem;
right: 0.6rem;
padding: 0.34rem 0.68rem;
border-color: rgba(244, 187, 99, 0.36);
background: linear-gradient(135deg, rgba(244, 187, 99, 0.22), rgba(80, 211, 198, 0.1));
box-shadow: 0 8px 18px rgba(1, 8, 14, 0.16);
font-size: 0.72rem;
}
.controls-overview-card:hover {
transform: translateY(-2px);
border-color: var(--chip-hover-border);
box-shadow: var(--surface-premium-shadow);
}
.dashboard-drilldown-button:focus-visible,
.controls-overview-card:focus-visible,
.module-subnav-button:focus-visible,
.topbar-shadow-route:focus-visible {
outline: 2px solid rgba(244, 187, 99, 0.78);
outline-offset: 3px;
}
.program-overview-card-static {
cursor: default;
}
.program-overview-card-static:hover {
transform: none;
border-color: rgba(255, 255, 255, 0.08);
}
.controls-overview-card.active {
border-color: rgba(244, 187, 99, 0.34);
box-shadow:
inset 0 0 0 1px rgba(244, 187, 99, 0.12),
var(--shadow-soft);
}
.controls-overview-card-alert {
background:
linear-gradient(180deg, rgba(255, 122, 122, 0.14), rgba(255, 122, 122, 0.04)),
rgba(255, 255, 255, 0.02);
}
.controls-overview-card-watch {
background:
linear-gradient(180deg, rgba(244, 187, 99, 0.14), rgba(244, 187, 99, 0.04)),
rgba(255, 255, 255, 0.02);
}
.controls-overview-card-good {
background:
linear-gradient(180deg, rgba(98, 226, 162, 0.12), rgba(98, 226, 162, 0.04)),
rgba(255, 255, 255, 0.02);
}
.controls-overview-card-neutral {
background:
linear-gradient(180deg, rgba(136, 169, 255, 0.12), rgba(136, 169, 255, 0.04)),
rgba(255, 255, 255, 0.02);
}
.controls-overview-label {
margin: 0;
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.controls-overview-value {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 2.2rem;
line-height: 1;
letter-spacing: -0.02em;
}
.controls-overview-copy {
margin: 0;
color: var(--muted);
line-height: 1.45;
}
.operations-posture-explained-card {
align-content: start;
}
.operations-posture-card-help {
position: relative;
z-index: 1;
display: grid;
gap: 0.42rem;
margin-top: 0.28rem;
padding-top: 0.65rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.operations-posture-card-help p {
display: grid;
gap: 0.14rem;
margin: 0;
color: var(--muted);
font-size: 0.82rem;
line-height: 1.35;
}
.operations-posture-card-help span {
color: var(--brand);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.role-agenda-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 0.9rem;
}
.role-agenda-card {
width: 100%;
text-align: left;
display: grid;
gap: 0.7rem;
}
.role-agenda-title {
font-size: 1.08rem;
line-height: 1.3;
}
/* Task Flow owns visible navigation; these route bridges only preserve legacy handlers. */
.task-route-bridge {
display: none !important;
}
.module-subnav {
position: sticky;
top: 0.75rem;
z-index: 12;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
padding: 0.35rem;
border-radius: 24px;
background:
linear-gradient(180deg, rgba(10, 20, 31, 0.86), rgba(10, 20, 31, 0.68)),
rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.055);
backdrop-filter: blur(14px);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}
.module-subnav-button {
width: 100%;
text-align: left;
padding: 1rem 1.05rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
color: var(--text);
display: grid;
gap: 0.22rem;
cursor: pointer;
isolation: isolate;
position: relative;
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease;
}
.module-subnav-button::after,
.admin-tab-button::after,
.module-nav-button:not([data-nav-count])::after {
content: "→";
position: absolute;
right: 0.82rem;
top: 50%;
transform: translateY(-50%);
opacity: 0.55;
font-weight: 900;
color: var(--accent);
}
.module-subnav-button span {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1.05rem;
letter-spacing: 0.04em;
}
.module-subnav-button small {
color: var(--muted);
font-size: 0.84rem;
line-height: 1.45;
}
.module-subnav-button:hover {
transform: translateY(-2px);
border-color: rgba(80, 211, 198, 0.24);
}
.module-subnav-button.active {
border-color: rgba(244, 187, 99, 0.34);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.18), rgba(80, 211, 198, 0.08)),
rgba(255, 255, 255, 0.04);
box-shadow:
inset 0 0 0 1px rgba(244, 187, 99, 0.12),
var(--shadow-soft);
}
/* Integrations workbench density */
.integrations-workbench-screen {
gap: clamp(0.75rem, 1.1vw, 1rem);
}
.integrations-workbench-hero {
padding: clamp(1.05rem, 1.6vw, 1.45rem);
}
.integrations-workbench-hero h3 {
max-width: 16ch;
}
.integrations-workbench-hero .module-copy {
max-width: 76ch;
}
.integrations-start-panel,
.integrations-work-surface-card:not(.hidden) {
padding: clamp(0.95rem, 1.35vw, 1.22rem);
}
.integrations-start-panel .module-role-launch-grid,
.integrations-work-surface-card .controls-overview-grid {
gap: 0.65rem;
}
.integrations-start-panel .module-stage-card,
.integrations-work-surface-card .controls-overview-card {
padding: 0.82rem;
}
.integrations-work-surface-card > .section-heading {
margin-bottom: 0.45rem;
}
.integrations-work-surface-card .module-copy,
.integrations-work-surface-card .controls-panel-copy {
max-width: 74ch;
margin-bottom: 0.68rem;
}
.integrations-connectors-card {
display: grid;
gap: 0.8rem;
}
.integrations-connectors-card #integrations-list {
display: grid;
gap: 0.65rem;
}
.integrations-subnav .module-subnav-button {
min-height: 2.85rem;
padding: 0.7rem 0.85rem;
}
.integrations-subnav .module-subnav-button small {
display: none;
}
.controls-workspace {
display: grid;
}
.program-panel {
display: grid;
gap: 1rem;
}
.program-readiness-shell {
grid-template-columns: 1fr;
}
.program-readiness-card {
display: grid;
gap: 0.9rem;
}
.program-readiness-summary,
.program-step-list,
.program-policy-preview {
display: grid;
gap: 1rem;
}
.program-readiness-summary {
grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
align-items: stretch;
}
.program-readiness-overview,
.program-readiness-facts {
min-width: 0;
}
.program-readiness-overview {
display: grid;
gap: 0.8rem;
align-content: center;
padding: clamp(0.95rem, 1.4vw, 1.2rem);
border-radius: 24px;
border: 1px solid var(--surface-premium-border);
background:
radial-gradient(circle at 10% 0%, rgba(255, 176, 111, 0.12), transparent 34%),
linear-gradient(180deg, rgba(16, 29, 42, 0.92), rgba(8, 17, 27, 0.96));
box-shadow: var(--shadow-soft);
}
.program-readiness-overview .score-dial-shell {
grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
gap: clamp(0.85rem, 1.5vw, 1.2rem);
}
.program-readiness-overview .score-dial-visual {
width: min(100%, 150px);
}
.program-readiness-overview .dashboard-support-links {
margin-top: 0;
}
.program-readiness-facts .command-note-stack {
gap: 0.65rem;
}
.program-readiness-facts .command-note {
min-height: 0;
padding: 0.75rem 0.85rem;
border-radius: 18px;
}
.program-step-list {
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.program-step-card,
.program-policy-card,
.program-policy-section {
padding: 1rem;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.025);
box-shadow: var(--shadow-soft);
}
.program-step-card {
display: grid;
gap: 0.85rem;
}
.program-step-card p,
.program-policy-section p {
margin: 0;
color: var(--muted);
line-height: 1.6;
}
.program-step-card-good {
background:
linear-gradient(180deg, rgba(98, 226, 162, 0.12), rgba(98, 226, 162, 0.04)),
rgba(255, 255, 255, 0.02);
}
.program-step-card-watch {
background:
linear-gradient(180deg, rgba(244, 187, 99, 0.12), rgba(244, 187, 99, 0.04)),
rgba(255, 255, 255, 0.02);
}
.program-step-card-alert {
background:
linear-gradient(180deg, rgba(255, 122, 122, 0.14), rgba(255, 122, 122, 0.04)),
rgba(255, 255, 255, 0.02);
}
.program-step-head,
.program-policy-head {
display: flex;
justify-content: space-between;
gap: 0.9rem;
align-items: start;
}
.program-step-head h4,
.program-policy-head h4,
.program-policy-section h5 {
margin: 0;
font-size: 1.08rem;
}
.program-policy-card {
display: grid;
gap: 1rem;
background:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.12), transparent 28%),
linear-gradient(180deg, rgba(12, 24, 35, 0.98), rgba(8, 16, 25, 0.96));
}
.program-policy-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
color: var(--muted);
font-size: 0.9rem;
}
.program-policy-section-list {
display: grid;
gap: 0.85rem;
}
.controls-panel {
display: grid;
gap: 1rem;
}
.controls-panel-copy {
margin: 0 0 1rem;
max-width: 64ch;
color: var(--muted);
line-height: 1.6;
}
.controls-standard-profile-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 0 0 1rem;
padding: 1rem;
border: 1px solid rgba(244, 187, 99, 0.22);
border-radius: 22px;
background:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.12), transparent 34%),
linear-gradient(135deg, rgba(28, 44, 60, 0.92), rgba(11, 24, 36, 0.94));
}
.controls-standard-profile-actions p {
margin: 0;
color: var(--muted);
}
.controls-standard-profile-actions .eyebrow {
margin-bottom: 0.25rem;
color: var(--accent);
}
.controls-standard-profile-actions .button {
flex: 0 0 auto;
}
@media (max-width: 760px) {
.controls-standard-profile-actions {
flex-direction: column;
align-items: stretch;
}
.controls-standard-profile-actions .button {
width: 100%;
justify-content: center;
}
}
.context-compass {
display: grid;
gap: 1rem;
}
.context-compass-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.9rem;
}
.context-compass-item {
display: grid;
gap: 0.55rem;
padding: 1rem 1.05rem;
border-radius: 22px;
border: 1px solid rgba(150, 172, 196, 0.12);
background:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.1), transparent 34%),
linear-gradient(180deg, rgba(15, 28, 40, 0.94), rgba(10, 20, 31, 0.96));
}
.context-compass-kicker {
margin: 0;
color: var(--accent);
font-size: 0.76rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.context-compass-item h4 {
margin: 0;
font-size: 1rem;
line-height: 1.35;
}
.context-compass-copy {
margin: 0;
color: var(--muted);
line-height: 1.55;
font-size: 0.94rem;
}
.admin-shell {
display: grid;
grid-template-columns: 16.4rem minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.admin-shell.admin-shell-focused {
grid-template-columns: minmax(0, 1fr);
gap: 0.9rem;
}
.admin-entry-grid {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 1rem;
align-items: start;
}
.admin-role-start-section,
.admin-command-center-section {
min-height: 100%;
}
.admin-command-card {
align-content: start;
}
.admin-command-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.admin-tabs {
position: sticky;
top: 1rem;
padding: 1.15rem;
}
.admin-depth-rail {
overflow: hidden;
}
.admin-tabs.admin-tabs-focused {
position: static;
padding: 0.72rem;
}
.admin-tabs.admin-tabs-toolbar {
padding-bottom: 0.72rem;
}
.admin-depth-rail.admin-tabs-toolbar {
padding: 0.52rem;
border-color: rgba(144, 167, 185, 0.12);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)),
rgba(7, 15, 24, 0.72);
box-shadow: none;
}
.admin-depth-rail.admin-tabs-toolbar .section-heading,
.admin-depth-rail.admin-tabs-toolbar .admin-tab-copy {
display: none;
}
.admin-tab-copy {
margin: 0 0 0.8rem;
}
.admin-tab-nav {
display: grid;
gap: 0.55rem;
}
.admin-tab-nav.admin-tab-nav-simple {
gap: 0.42rem;
}
.admin-tab-nav.admin-tab-nav-compact {
gap: 0.34rem;
}
.admin-tab-button {
width: 100%;
text-align: left;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
color: var(--text);
padding: 0.9rem 0.95rem;
display: grid;
gap: 0.18rem;
position: relative;
cursor: pointer;
padding-right: 2.1rem;
}
.admin-tab-button span {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1rem;
}
.admin-tab-button small {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.45;
}
.admin-tab-nav.admin-tab-nav-simple .admin-tab-button {
padding: 0.78rem 0.88rem;
gap: 0;
border-radius: 16px;
}
.admin-tab-nav.admin-tab-nav-simple .admin-tab-button small {
display: none;
}
.admin-tab-nav.admin-tab-nav-compact .admin-tab-button {
padding: 0.68rem 0.74rem;
gap: 0;
border-radius: 14px;
}
.admin-tab-nav.admin-tab-nav-compact .admin-tab-button small {
display: none;
}
.admin-tabs.admin-tabs-focused .section-heading {
gap: 0.12rem;
margin-bottom: 0.18rem;
}
.admin-tabs.admin-tabs-focused .section-heading h3 {
font-size: 1.08rem;
}
.admin-tabs.admin-tabs-focused .section-heading .eyebrow {
font-size: 0.7rem;
letter-spacing: 0.14em;
}
.admin-tabs.admin-tabs-focused .admin-tab-copy {
margin-bottom: 0.45rem;
font-size: 0.8rem;
line-height: 1.4;
max-width: 48ch;
}
.admin-tabs.admin-tabs-focused .admin-tab-nav {
gap: 0.34rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-depth-rail.admin-tabs-toolbar .admin-tab-nav {
display: flex;
gap: 0.38rem;
overflow-x: auto;
scrollbar-gutter: stable;
padding-bottom: 0.08rem;
}
.admin-depth-rail.admin-tabs-toolbar .admin-tab-button {
min-width: clamp(8rem, 15vw, 11rem);
padding: 0.58rem 0.72rem;
border-radius: 999px;
border-style: solid;
background: rgba(255, 255, 255, 0.018);
box-shadow: none;
}
.admin-depth-rail.admin-tabs-toolbar .admin-tab-button::after {
content: none;
display: none;
}
.admin-depth-rail.admin-tabs-toolbar .admin-tab-button.active {
border-color: rgba(244, 187, 99, 0.38);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.13), rgba(80, 211, 198, 0.06)),
rgba(255, 255, 255, 0.024);
}
.admin-depth-rail.admin-tabs-toolbar .admin-tab-button span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-tabs.admin-tabs-toolbar .section-heading {
margin-bottom: 0.08rem;
}
.admin-tabs.admin-tabs-toolbar .section-heading h3 {
font-size: 0.98rem;
}
.admin-panel-focused {
padding: 0.88rem;
}
.admin-panel-focused > .section-heading {
gap: 0.12rem;
margin-bottom: 0.45rem;
}
.admin-panel-focused > .section-heading h3 {
font-size: 1.18rem;
}
.admin-panel-focused .controls-panel-copy {
margin-bottom: 0.6rem;
}
.admin-panel-focused .controls-overview-grid,
.admin-panel-focused .module-role-launch-grid {
gap: 0.72rem;
}
.admin-panel-focused .systems-overview-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.78rem;
}
.admin-panel-focused .settings-checkbox-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-panel-focused .module-content-disclosure {
margin-top: 0.78rem;
}
.admin-inline-depth-disclosure {
margin-top: 0.78rem;
}
.admin-register-posture-card {
margin-top: 0.15rem;
}
.admin-tab-button.active {
border-color: rgba(80, 211, 198, 0.32);
background:
linear-gradient(135deg, rgba(80, 211, 198, 0.18), rgba(244, 187, 99, 0.08)),
rgba(255, 255, 255, 0.04);
}
.admin-command-center-section.admin-command-center-compact .module-role-launch-grid {
gap: 0.75rem;
}
.admin-command-center-section.admin-command-center-compact .module-stage-card {
padding: 0.95rem;
}
/* Admin workbench density */
.admin-workbench-screen {
gap: clamp(0.75rem, 1.2vw, 1rem);
}
.admin-workbench-hero {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
padding: clamp(1.05rem, 1.6vw, 1.45rem);
}
.admin-workbench-hero h3 {
max-width: 18ch;
}
.admin-workbench-hero .module-copy {
max-width: 72ch;
}
.admin-workbench-start-grid {
gap: clamp(0.72rem, 1vw, 0.95rem);
}
.admin-workbench-start-grid > .module-card {
padding: clamp(0.95rem, 1.35vw, 1.2rem);
}
.admin-workbench-shell {
gap: clamp(0.65rem, 0.95vw, 0.9rem);
}
.admin-workbench-tabs {
position: sticky;
top: 0.75rem;
z-index: 8;
padding: 0.58rem;
border-color: rgba(144, 167, 185, 0.14);
background:
linear-gradient(135deg, rgba(80, 211, 198, 0.07), rgba(244, 187, 99, 0.035)),
rgba(7, 15, 24, 0.8);
backdrop-filter: blur(18px);
}
.admin-workbench-tabs .section-heading,
.admin-workbench-tabs .admin-tab-copy {
display: none;
}
.admin-task-strip {
display: flex;
gap: 0.42rem;
overflow-x: auto;
scrollbar-gutter: stable;
padding-bottom: 0.1rem;
}
.admin-task-strip .admin-tab-button {
flex: 0 0 clamp(8rem, 13vw, 11.25rem);
min-width: 0;
border-radius: 999px;
padding: 0.58rem 0.76rem;
box-shadow: none;
}
.admin-task-strip .admin-tab-button small {
display: none;
}
.admin-task-strip .admin-tab-button span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-work-surface {
display: grid;
gap: clamp(0.72rem, 1vw, 0.95rem);
}
.admin-work-surface > .module-card:not(.hidden) {
padding: clamp(0.95rem, 1.35vw, 1.22rem);
}
.admin-work-surface > .module-card:not(.hidden) > .section-heading {
margin-bottom: 0.45rem;
}
.admin-work-surface .controls-panel-copy {
max-width: 74ch;
margin-bottom: 0.68rem;
}
.admin-work-surface .controls-overview-grid,
.admin-work-surface .module-role-launch-grid,
.admin-work-surface .systems-overview-grid {
gap: 0.65rem;
}
.admin-work-surface .controls-overview-grid {
grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
.admin-work-surface .module-stage-card,
.admin-work-surface .controls-overview-card {
padding: 0.82rem;
}
.admin-work-surface .module-content-disclosure {
margin-top: 0.72rem;
}
@media (max-width: 760px) {
.admin-workbench-hero {
grid-template-columns: 1fr;
}
.admin-workbench-tabs {
position: relative;
top: auto;
}
.admin-task-strip {
display: grid;
grid-template-columns: 1fr;
overflow: visible;
}
.admin-task-strip .admin-tab-button {
flex-basis: auto;
width: 100%;
}
.admin-work-surface .controls-overview-grid,
.admin-work-surface .module-role-launch-grid,
.admin-work-surface .systems-overview-grid {
grid-template-columns: 1fr;
}
}
.admin-command-center-section.admin-command-center-compact .signal-copy {
font-size: 0.88rem;
line-height: 1.48;
}
.admin-entry-grid.admin-entry-grid-focused {
grid-template-columns: minmax(0, 1fr);
}
.admin-command-center-section.admin-command-center-focused {
order: -1;
}
.admin-panels {
display: grid;
gap: 1rem;
}
.admin-attention-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.admin-attention-copy {
display: grid;
gap: 0.45rem;
}
.admin-attention-copy strong {
line-height: 1.4;
}
.admin-attention-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.7rem;
flex-wrap: wrap;
}
.admin-access-note {
margin: 0.9rem 0 0;
max-width: 48ch;
color: var(--muted);
line-height: 1.6;
}
.topbar {
padding: 0.95rem 1.05rem;
display: grid;
grid-template-columns:
minmax(220px, 1.05fr)
repeat(3, minmax(0, 0.92fr));
gap: 0.7rem;
align-items: start;
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--brand) 14%, transparent), transparent 32%),
linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 96%, transparent), color-mix(in srgb, var(--surface-panel) 98%, transparent));
}
.topbar > * {
min-width: 0;
}
.topbar-primary {
display: flex;
align-items: center;
gap: 0.95rem;
}
.topbar-primary {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
padding: 0.72rem 0.82rem;
border-radius: 20px;
border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
}
.topbar-primary > div:last-child {
min-width: 0;
}
.topbar-primary .eyebrow {
margin-bottom: 0.28rem;
}
.topbar-primary h2 {
font-size: clamp(1.85rem, 2.3vw, 2.55rem);
line-height: 0.92;
max-width: 7.8ch;
}
.topbar-context,
.topbar-module-switch,
.topbar-scope {
display: grid;
gap: 0.2rem;
padding: 0.72rem 0.82rem;
border-radius: 20px;
border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
min-width: 0;
}
.topbar-context-label {
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.topbar-context strong {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1.15rem;
letter-spacing: 0.04em;
}
.topbar-context-copy {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.45;
}
.topbar-glossary-strip {
margin-top: 0.35rem;
gap: 0.38rem;
}
.topbar-glossary-chip {
font-size: 0.74rem;
padding: 0.34rem 0.58rem;
}
.topbar-scope {
gap: 0.45rem;
}
.topbar-shadow-ai {
position: relative;
overflow: hidden;
gap: 0.35rem;
}
.topbar-shadow-ai::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at top right, rgba(80, 211, 198, 0.14), transparent 42%);
opacity: 0.9;
}
.topbar-shadow-ai > * {
position: relative;
z-index: 1;
}
.topbar-shadow-ai-alert {
border-color: color-mix(in srgb, var(--warning) 44%, var(--surface-premium-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--warning) 12%, transparent), transparent 44%),
linear-gradient(180deg, var(--surface-premium-soft), var(--surface-card));
}
.topbar-shadow-ai-watch {
border-color: color-mix(in srgb, var(--brand) 42%, var(--surface-premium-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--brand) 12%, transparent), transparent 44%),
linear-gradient(180deg, var(--surface-premium-soft), var(--surface-card));
}
.topbar-shadow-ai-good,
.topbar-shadow-ai-contained {
border-color: color-mix(in srgb, var(--success) 32%, var(--surface-premium-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--success) 10%, transparent), transparent 44%),
linear-gradient(180deg, var(--surface-premium-soft), var(--surface-card));
}
.topbar-shadow-chip-list {
gap: 0.38rem;
}
.topbar-shadow-chip-list .chip {
font-size: 0.74rem;
}
.topbar-shadow-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 0.1rem;
}
.topbar-shadow-action {
width: 100%;
justify-content: center;
}
.topbar-regulatory-lens {
gap: 0.32rem;
border-color: color-mix(in srgb, var(--brand) 32%, var(--surface-premium-border));
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--brand) 10%, transparent), transparent 44%),
linear-gradient(180deg, var(--surface-premium-soft), var(--surface-card));
}
.topbar-regulatory-lens-good {
border-color: color-mix(in srgb, var(--success) 32%, var(--surface-premium-border));
}
.topbar-regulatory-lens-button {
width: 100%;
min-height: 2rem;
border-radius: 999px;
border: 1px solid rgba(244, 187, 99, 0.26);
background: rgba(244, 187, 99, 0.1);
color: var(--text);
cursor: pointer;
font: inherit;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.topbar-regulatory-lens-button:hover,
.topbar-regulatory-lens-button:focus-visible {
border-color: rgba(244, 187, 99, 0.44);
background: rgba(244, 187, 99, 0.16);
outline: none;
}
@media (max-width: 780px) {
:is(body.task-mode, body.simple-mode).workspace-open .shell-language {
justify-self: stretch;
justify-content: space-between;
flex-wrap: wrap;
}
:is(body.task-mode, body.simple-mode).workspace-open .shell-utility-field {
flex: 1 1 8rem;
}
}
.topbar-shadow-route-strip {
display: grid;
gap: 0.45rem;
}
.topbar-shadow-route-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 0.55rem;
}
.topbar-shadow-route {
position: relative;
display: grid;
gap: 0.24rem;
min-width: 0;
padding: 0.85rem 0.9rem;
border-radius: 18px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium-soft) 96%, transparent),
color-mix(in srgb, var(--surface-card) 92%, transparent)
),
var(--surface-panel);
box-shadow: var(--shadow-soft);
color: var(--text);
text-align: left;
font: inherit;
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
}
.topbar-shadow-route:hover {
transform: translateY(-1px);
box-shadow: var(--surface-premium-shadow);
}
.topbar-shadow-route-active {
box-shadow: var(--surface-premium-shadow), var(--surface-inset-shadow);
}
.topbar-shadow-route-alert {
border-color: color-mix(in srgb, var(--warning) 32%, var(--surface-premium-border));
}
.topbar-shadow-route-watch {
border-color: color-mix(in srgb, var(--brand) 32%, var(--surface-premium-border));
}
.topbar-shadow-route-good {
border-color: color-mix(in srgb, var(--success) 26%, var(--surface-premium-border));
}
.topbar-shadow-route-module {
color: var(--muted);
font-size: 0.69rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.topbar-shadow-route strong {
max-width: calc(100% - 2.5rem);
font-size: 0.92rem;
line-height: 1.25;
}
.topbar-shadow-route-copy {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.4;
}
.topbar-shadow-route-count {
position: absolute;
top: 0.82rem;
right: 0.82rem;
display: inline-grid;
place-items: center;
min-width: 1.85rem;
padding: 0.18rem 0.46rem;
border-radius: 999px;
background: color-mix(in srgb, var(--surface-card) 88%, transparent);
border: 1px solid color-mix(in srgb, var(--surface-premium-border) 84%, transparent);
color: var(--text-strong);
font-size: 0.72rem;
font-weight: 700;
}
.topbar-module-switch select,
.topbar-scope select,
.topbar-role-switcher select {
min-width: 0;
}
.identity,
.identity-copy {
min-width: 0;
}
.notification-button {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.notification-badge {
display: inline-grid;
place-items: center;
min-width: 1.55rem;
height: 1.55rem;
padding: 0 0.35rem;
border-radius: 999px;
background: linear-gradient(135deg, var(--brand), var(--brand-strong));
color: #07121b;
font-size: 0.8rem;
}
.notification-backdrop {
position: fixed;
inset: 0;
background: rgba(3, 10, 16, 0.42);
backdrop-filter: blur(4px);
z-index: 54;
}
.notification-panel {
position: fixed;
top: 50%;
left: 50%;
right: auto;
width: min(34rem, calc(100vw - 2.25rem));
max-height: min(78vh, calc(100vh - 3rem));
padding: 1.15rem;
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(18, 32, 45, 0.97), rgba(8, 16, 25, 0.98)),
rgba(10, 18, 28, 0.96);
box-shadow: 0 36px 90px rgba(1, 5, 8, 0.42);
z-index: 55;
display: grid;
gap: 0.95rem;
transform: translate(-50%, -50%);
isolation: isolate;
}
.notification-panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 28%),
radial-gradient(circle at 12% 12%, rgba(244, 187, 99, 0.08), transparent 24%);
}
.notification-panel > * {
position: relative;
z-index: 1;
}
.notification-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
position: sticky;
top: 0;
padding-bottom: 0.25rem;
background: linear-gradient(180deg, rgba(12, 24, 35, 0.96), rgba(12, 24, 35, 0.82));
backdrop-filter: blur(8px);
z-index: 1;
}
.notification-panel-header .section-heading {
margin: 0;
}
.notification-close {
flex: 0 0 auto;
min-width: 6rem;
}
.notification-panel .stack {
max-height: min(50vh, 32rem);
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 0.2rem;
gap: 0.9rem;
}
.confirm-backdrop {
position: fixed;
inset: 0;
background: rgba(3, 10, 16, 0.48);
backdrop-filter: blur(4px);
z-index: 58;
}
.confirm-dialog {
position: fixed;
inset: 0;
display: grid;
align-items: start;
justify-items: center;
padding: 1.25rem;
overflow-y: auto;
overscroll-behavior: contain;
z-index: 59;
}
.confirm-dialog-shell {
width: min(30rem, calc(100vw - 2rem));
display: grid;
gap: 0.95rem;
max-height: calc(100vh - 2.5rem);
overflow-y: auto;
overscroll-behavior: contain;
padding: 1.05rem 1.1rem 1.15rem;
border-radius: 28px;
background:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.1), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
var(--overlay-panel);
}
.confirm-dialog-shell .section-heading,
.confirm-dialog-shell h3,
.confirm-dialog-shell p {
margin-top: 0;
}
.confirm-dialog-shell .form-actions {
margin-top: 0.1rem;
position: sticky;
bottom: 0;
padding: 0.85rem 0 0;
background: linear-gradient(180deg, rgba(8, 16, 28, 0), color-mix(in srgb, var(--overlay-panel) 92%, transparent) 28%);
backdrop-filter: blur(12px);
}
.block-packet-shell {
width: min(44rem, calc(100vw - 2rem));
padding-right: 0.2rem;
}
.block-packet-shell .module-copy {
margin-bottom: 0;
}
.block-packet-card {
display: grid;
gap: 0.8rem;
padding: 0.9rem 0.95rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at top right, rgba(80, 211, 198, 0.08), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.018)),
rgba(255, 255, 255, 0.015);
box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.block-packet-card-head {
display: grid;
gap: 0.3rem;
}
.block-packet-card-head strong {
color: var(--text);
}
.block-packet-card-head span {
color: var(--muted);
font-size: 0.9rem;
}
.block-packet-disclosure {
display: grid;
gap: 0.75rem;
padding: 0.85rem 0.95rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.015)),
rgba(255, 255, 255, 0.012);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.block-packet-disclosure summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
}
.block-packet-disclosure summary::-webkit-details-marker,
.form-section-disclosure summary::-webkit-details-marker,
.bulk-import-disclosure summary::-webkit-details-marker {
display: none;
}
.block-packet-disclosure summary strong,
.form-section-disclosure summary strong,
.bulk-import-disclosure summary strong,
.bulk-import-disclosure summary {
color: var(--text);
}
.block-packet-disclosure summary span {
color: var(--muted);
font-size: 0.88rem;
line-height: 1.45;
}
.block-packet-disclosure summary::after,
.form-section-disclosure summary::after,
.bulk-import-disclosure summary::after {
content: "+";
color: var(--brand);
font-size: 1.1rem;
line-height: 1;
margin-left: auto;
}
.block-packet-disclosure[open] summary::after,
.form-section-disclosure[open] summary::after,
.bulk-import-disclosure[open] summary::after {
content: "−";
}
.platform-guide-shell {
width: min(72rem, calc(100vw - 2rem));
max-height: calc(100vh - 2rem);
overflow: auto;
}
.module-glossary-shell {
width: min(70rem, calc(100vw - 2rem));
max-height: calc(100vh - 2rem);
overflow: auto;
}
.platform-guide-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.platform-guide-overview {
display: grid;
gap: 0.9rem;
}
.platform-guide-model-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 0.95rem;
}
.platform-guide-callout {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.05rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
}
.platform-guide-callout h4 {
margin: 0.2rem 0 0;
font-size: 1.05rem;
}
.platform-guide-model-callout {
grid-column: 1 / -1;
}
.platform-guide-sequence {
display: grid;
gap: 0.65rem;
margin: 0;
padding-left: 1.2rem;
color: var(--muted);
}
.platform-guide-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 0.95rem;
}
.module-glossary-callout {
align-items: stretch;
}
.module-glossary-card-compact {
gap: 0.7rem;
}
.module-glossary-card-compact .platform-guide-card-body {
gap: 0.55rem;
}
.platform-guide-card {
display: grid;
gap: 0.9rem;
padding: 1rem 1.05rem;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
rgba(255, 255, 255, 0.015);
}
.platform-guide-card.active {
border-color: rgba(244, 187, 99, 0.42);
box-shadow: 0 20px 36px rgba(7, 18, 27, 0.24);
}
.platform-guide-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.8rem;
}
.platform-guide-card-head h4 {
margin: 0.25rem 0 0;
font-size: 1rem;
line-height: 1.45;
}
.platform-guide-card-body {
display: grid;
gap: 0.85rem;
}
.platform-guide-card-body > div {
display: grid;
gap: 0.4rem;
}
.platform-guide-card-body strong {
display: block;
color: var(--text);
}
.platform-guide-card-body p,
.platform-guide-card-body ul {
margin: 0;
color: var(--muted);
}
.platform-guide-card-body ul {
padding-left: 1.15rem;
display: grid;
gap: 0.35rem;
}
.platform-guide-chiplist {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.platform-guide-chip {
display: inline-flex;
align-items: center;
padding: 0.38rem 0.72rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.035);
color: var(--muted);
font-size: 0.9rem;
line-height: 1.2;
}
.platform-guide-role-card .form-actions {
flex-wrap: wrap;
}
.platform-guide-role-card .platform-guide-card-body {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.platform-guide-role-card .button {
min-width: 0;
}
.platform-guide-matrix-card {
grid-column: 1 / -1;
}
.platform-guide-shadow-card {
grid-column: 1 / -1;
}
.platform-guide-shadow-actions {
flex-wrap: wrap;
}
.platform-guide-shadow-actions .button {
min-width: 0;
}
.platform-guide-playbook-head {
border-color: color-mix(in srgb, var(--accent) 32%, transparent);
background:
linear-gradient(135deg, color-mix(in srgb, var(--surface-card) 88%, var(--accent) 12%), var(--surface-card)),
var(--surface-card);
}
.platform-guide-playbook-card {
align-content: start;
min-height: 100%;
}
.platform-guide-playbook-card .platform-guide-card-body {
gap: 0.95rem;
}
.platform-guide-playbook-steps {
padding-left: 1.05rem;
}
.platform-guide-playbook-actions {
flex-wrap: wrap;
align-self: end;
}
.platform-guide-playbook-actions .button {
min-width: 0;
}
.platform-guide-questions {
display: grid;
gap: 1rem;
}
.platform-guide-question-hub {
display: grid;
gap: 1rem;
padding: 1rem;
border-radius: 24px;
border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
background:
linear-gradient(135deg, color-mix(in srgb, var(--surface-card) 94%, var(--brand) 6%), var(--surface-card)),
var(--surface-card);
box-shadow: 0 22px 42px rgba(5, 13, 22, 0.28);
}
.platform-guide-question-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: start;
}
.platform-guide-question-context {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.45rem;
}
.platform-guide-route-pill {
display: inline-flex;
align-items: center;
min-height: 2rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
color: var(--text);
font-size: 0.86rem;
font-weight: 800;
}
.platform-guide-question-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 0.75rem;
}
.platform-guide-question {
border-radius: 20px;
border: 1px solid color-mix(in srgb, var(--border-strong) 76%, transparent);
background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
overflow: hidden;
}
.platform-guide-question[open] {
border-color: color-mix(in srgb, var(--brand) 42%, var(--border-strong));
box-shadow: 0 16px 30px rgba(5, 13, 22, 0.2);
}
.platform-guide-question summary {
display: grid;
gap: 0.35rem;
padding: 0.9rem 1rem;
cursor: pointer;
list-style: none;
}
.platform-guide-question summary::-webkit-details-marker {
display: none;
}
.platform-guide-question summary::after {
content: "+";
position: absolute;
right: 1rem;
top: 0.9rem;
color: var(--brand);
font-weight: 900;
}
.platform-guide-question[open] summary::after {
content: "−";
}
.platform-guide-question summary {
position: relative;
padding-right: 2.5rem;
}
.platform-guide-question-kicker {
color: var(--brand);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.platform-guide-question-answer {
display: grid;
gap: 0.8rem;
padding: 0 1rem 1rem;
}
.platform-guide-question-answer p,
.platform-guide-question-answer ol {
margin: 0;
color: var(--muted);
}
.platform-guide-question-answer ol {
display: grid;
gap: 0.35rem;
padding-left: 1.15rem;
}
.platform-guide-question-actions {
flex-wrap: wrap;
}
.platform-guide-question-actions .button {
min-width: 0;
}
.platform-guide-question-note {
display: grid;
gap: 0.35rem;
padding: 0.9rem 1rem;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
background: color-mix(in srgb, var(--surface-strong) 88%, var(--info) 12%);
}
.platform-guide-question-note p {
margin: 0;
color: var(--muted);
}
.platform-guide-manual-stack {
display: grid;
gap: 1rem;
}
.platform-manual-render {
display: grid;
gap: 1rem;
}
.platform-manual-doc {
display: grid;
gap: 1rem;
}
.platform-manual-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(12rem, auto);
gap: 1rem;
align-items: start;
padding: 1rem 1.1rem;
border-radius: 24px;
border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
background:
linear-gradient(135deg, color-mix(in srgb, var(--surface-card) 92%, var(--brand) 8%), var(--surface-card)),
var(--surface-card);
}
.platform-manual-hero h4,
.platform-manual-hero p {
margin: 0;
}
.platform-manual-hero h4 {
margin-top: 0.25rem;
font-size: clamp(1.1rem, 2vw, 1.45rem);
}
.platform-manual-context {
display: grid;
gap: 0.35rem;
justify-items: start;
padding: 0.75rem;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
background: color-mix(in srgb, var(--surface-strong) 88%, var(--brand) 12%);
}
.platform-manual-context p {
color: var(--text);
font-weight: 800;
}
.platform-manual-layout {
display: grid;
grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.platform-manual-toc {
position: sticky;
top: 0.75rem;
display: grid;
gap: 0.8rem;
padding: 0.95rem;
border-radius: 24px;
border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 94%, var(--surface-strong) 6%), var(--surface-card)),
var(--surface-card);
box-shadow: 0 18px 34px rgba(5, 13, 22, 0.18);
}
.platform-manual-toc .eyebrow {
margin: 0;
}
.platform-manual-search {
display: grid;
gap: 0.4rem;
}
.platform-manual-search-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.platform-manual-search-label span,
.platform-manual-search small {
color: var(--muted);
font-size: 0.8rem;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.platform-manual-search-label kbd {
display: inline-grid;
place-items: center;
min-width: 1.8rem;
min-height: 1.55rem;
padding: 0.1rem 0.45rem;
border-radius: 9px;
border: 1px solid color-mix(in srgb, var(--border-strong) 76%, transparent);
background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
color: var(--brand);
font: inherit;
font-size: 0.76rem;
font-weight: 950;
}
.platform-manual-search small {
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: none;
}
.platform-manual-search input {
width: 100%;
min-height: 2.85rem;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--border-strong) 65%, transparent);
background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
color: var(--text);
padding: 0.65rem 0.8rem;
font: inherit;
}
.platform-manual-search input:focus {
border-color: color-mix(in srgb, var(--brand) 58%, var(--border-strong));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
outline: none;
}
.platform-manual-filter-status,
.platform-manual-filter-empty {
margin: 0;
color: var(--muted);
font-size: 0.88rem;
}
.platform-manual-filter-empty {
padding: 0.75rem;
border-radius: 16px;
border: 1px dashed color-mix(in srgb, var(--warning) 42%, transparent);
background: color-mix(in srgb, var(--warning) 10%, transparent);
color: var(--text);
}
.platform-manual-toc-list {
display: grid;
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
.platform-manual-toc-link {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.35rem 0.65rem;
align-items: center;
min-height: 3rem;
padding: 0.62rem 0.7rem;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--border-strong) 55%, transparent);
background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
color: var(--text);
text-decoration: none;
transition:
border-color 160ms ease,
background 160ms ease,
transform 160ms ease;
}
.platform-manual-toc-link:hover,
.platform-manual-toc-link:focus-visible {
border-color: color-mix(in srgb, var(--brand) 54%, var(--border-strong));
background: color-mix(in srgb, var(--surface-strong) 84%, var(--brand) 10%);
transform: translateY(-1px);
outline: none;
}
.platform-manual-toc-item.is-contextual .platform-manual-toc-link {
border-color: color-mix(in srgb, var(--brand) 64%, var(--border-strong));
background:
linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 78%, var(--brand) 15%), var(--surface-strong)),
var(--surface-strong);
}
.platform-manual-toc-index {
display: inline-grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
color: var(--brand);
font-size: 0.76rem;
font-weight: 900;
}
.platform-manual-toc-title {
min-width: 0;
overflow-wrap: anywhere;
font-weight: 800;
line-height: 1.25;
}
.platform-manual-toc-current {
grid-column: 2;
width: fit-content;
padding: 0.22rem 0.5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--brand) 18%, transparent);
color: var(--brand);
font-size: 0.72rem;
font-weight: 900;
}
.platform-manual-body {
display: grid;
gap: 1rem;
min-width: 0;
}
.platform-manual-section {
display: grid;
gap: 0.9rem;
padding: 1rem;
border-radius: 24px;
border: 1px solid color-mix(in srgb, var(--border-strong) 68%, transparent);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 96%, var(--surface-strong) 4%), var(--surface-card)),
var(--surface-card);
}
.platform-manual-section.is-contextual {
border-color: color-mix(in srgb, var(--brand) 46%, var(--border-strong));
box-shadow: 0 20px 38px rgba(5, 13, 22, 0.2);
}
.platform-manual-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.85rem;
}
.platform-manual-section-head h5,
.platform-manual-section-head p,
.platform-manual-blocks p,
.platform-manual-blocks h3,
.platform-manual-blocks h4,
.platform-manual-blocks h5,
.platform-manual-blocks h6 {
margin: 0;
}
.platform-manual-section-head h5 {
margin-top: 0.2rem;
font-size: 1.05rem;
}
.platform-manual-blocks {
display: grid;
gap: 0.8rem;
color: var(--muted);
}
.platform-manual-step,
.platform-manual-callout,
.platform-manual-glossary-ref,
.platform-manual-screenshot {
margin: 0;
}
.platform-manual-step {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.65rem;
align-items: start;
padding: 0.78rem;
border-radius: 18px;
background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
}
.platform-manual-step-number {
display: inline-grid;
place-items: center;
min-width: 2rem;
height: 2rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--brand) 36%, transparent);
color: var(--brand);
font-weight: 900;
}
.platform-manual-callout {
display: grid;
gap: 0.35rem;
padding: 0.85rem;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--info) 26%, transparent);
background: color-mix(in srgb, var(--surface-strong) 86%, var(--info) 10%);
}
.platform-manual-callout strong {
color: var(--text);
}
.platform-manual-list {
display: grid;
gap: 0.45rem;
margin: 0;
padding-left: 1.1rem;
}
.platform-manual-list-links {
padding-left: 0;
list-style: none;
}
.platform-manual-link-item .button {
min-width: 0;
}
.platform-manual-table-shell {
overflow-x: auto;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--border-strong) 68%, transparent);
}
.platform-manual-table {
width: 100%;
min-width: 44rem;
border-collapse: collapse;
}
.platform-manual-table th,
.platform-manual-table td {
padding: 0.72rem 0.8rem;
border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 85%, transparent);
text-align: left;
vertical-align: top;
}
.platform-manual-table th {
color: var(--brand);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.platform-manual-code {
overflow-x: auto;
margin: 0;
padding: 0.85rem;
border-radius: 16px;
background: color-mix(in srgb, #020b14 82%, var(--surface-strong) 18%);
color: var(--text);
}
.platform-manual-screenshot-placeholder {
display: grid;
gap: 0.35rem;
padding: 1rem;
border-radius: 18px;
border: 1px dashed color-mix(in srgb, var(--border-strong) 70%, transparent);
background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
}
.platform-manual-screenshot figcaption {
display: grid;
gap: 0.25rem;
margin-top: 0.5rem;
color: var(--muted);
}
.role-permission-matrix-shell {
overflow-x: auto;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
}
.role-permission-matrix {
width: 100%;
min-width: 62rem;
border-collapse: collapse;
}
.role-permission-matrix th,
.role-permission-matrix td {
padding: 0.9rem 0.95rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
text-align: left;
vertical-align: top;
}
.role-permission-matrix thead th {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand);
background: rgba(5, 13, 21, 0.6);
}
.role-permission-matrix tbody tr:last-child th,
.role-permission-matrix tbody tr:last-child td {
border-bottom: none;
}
.role-permission-role,
.role-permission-home {
display: grid;
gap: 0.2rem;
}
.role-permission-role strong,
.role-permission-home strong {
font-size: 0.92rem;
}
.role-permission-role span,
.role-permission-home span {
color: var(--muted);
font-size: 0.82rem;
}
.role-permission-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 4.4rem;
padding: 0.38rem 0.68rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
font-size: 0.82rem;
line-height: 1.2;
}
.role-permission-pill-good {
border-color: rgba(98, 226, 162, 0.18);
color: var(--success);
}
.role-permission-pill-muted {
color: var(--muted);
}
.role-permission-pill-neutral {
color: var(--text);
}
.reference-family-block {
display: grid;
gap: 0.9rem;
}
.reference-family-block + .reference-family-block {
margin-top: 0.25rem;
}
.reference-taxonomy-card {
cursor: default;
}
.reference-taxonomy-card:hover {
transform: none;
border-color: rgba(255, 255, 255, 0.08);
}
.bulk-import-assist {
display: grid;
gap: 0.8rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.015);
}
.bulk-import-assist-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.bulk-import-disclosure {
display: grid;
gap: 0.7rem;
padding: 0.8rem 0.85rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(3, 10, 18, 0.35);
}
.bulk-import-disclosure summary {
list-style: none;
cursor: pointer;
color: var(--text);
font-weight: 600;
}
.bulk-import-template {
display: grid;
gap: 0.45rem;
}
.bulk-import-template code {
display: block;
padding: 0.7rem 0.85rem;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(3, 10, 18, 0.72);
color: var(--muted);
font-size: 0.86rem;
line-height: 1.5;
white-space: normal;
word-break: break-word;
}
.bulk-import-actions {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
}
.bulk-import-file-input {
display: none;
}
.bulk-import-status {
margin: 0;
padding: 0.7rem 0.8rem;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: var(--muted);
}
.bulk-import-status[data-tone="success"] {
border-color: rgba(97, 212, 196, 0.24);
background: rgba(97, 212, 196, 0.09);
color: var(--text);
}
.bulk-import-status[data-tone="warning"] {
border-color: rgba(244, 187, 99, 0.24);
background: rgba(244, 187, 99, 0.09);
color: var(--text);
}
.bulk-import-status[data-tone="error"] {
border-color: rgba(255, 122, 122, 0.25);
background: rgba(255, 122, 122, 0.09);
color: var(--text);
}
.block-packet-steps {
margin: 0;
padding-left: 1.15rem;
color: var(--text);
display: grid;
gap: 0.35rem;
}
.block-packet-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.block-packet-summary-grid strong {
display: block;
color: var(--text);
margin-bottom: 0.2rem;
}
.block-packet-summary-grid span {
color: var(--muted);
word-break: break-word;
}
.block-packet-downloads {
display: grid;
gap: 0.7rem;
padding: 0.85rem 0.95rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
rgba(255, 255, 255, 0.015);
}
.block-packet-downloads h4 {
margin: 0;
font-size: 0.95rem;
}
.block-packet-download-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 0.75rem;
}
.block-packet-downloads-stack {
display: grid;
gap: 0.95rem;
}
.block-packet-download-group {
display: grid;
gap: 0.75rem;
}
.block-packet-download-card {
display: grid;
gap: 0.45rem;
padding: 0.85rem 0.9rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(3, 10, 18, 0.54);
}
.block-packet-download-card p {
margin: 0;
color: var(--muted);
font-size: 0.88rem;
line-height: 1.45;
}
.block-packet-adapters,
.block-packet-adapter-result {
display: grid;
gap: 0.75rem;
}
.block-packet-next-step {
display: grid;
gap: 0.7rem;
padding-top: 0.15rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.block-packet-next-step-actions {
margin-top: 0.1rem;
}
.block-packet-adapter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 0.85rem;
}
.block-packet-adapter-card {
display: grid;
gap: 0.8rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
rgba(3, 10, 18, 0.38);
}
.block-packet-adapter-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
}
.block-packet-adapter-meta strong {
display: block;
color: var(--text);
margin-bottom: 0.2rem;
}
.block-packet-adapter-meta span {
color: var(--muted);
word-break: break-word;
}
.block-packet-adapter-permissions {
margin: 0;
padding-left: 1.1rem;
color: var(--muted);
display: grid;
gap: 0.35rem;
}
.notification-summary-grid,
.admin-notification-grid {
display: grid;
gap: 0.85rem;
}
.notification-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.notification-summary-grid .mini-card span {
display: block;
margin-bottom: 0.35rem;
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.notification-summary-grid .mini-card strong {
font-size: 1.45rem;
}
.admin-notification-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
align-items: start;
}
.logout-form {
margin: 0;
}
.form-mode {
margin: 0;
color: var(--brand-strong);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.identity {
display: flex;
gap: 0.75rem;
align-items: center;
padding: 0.4rem 0.45rem 0.4rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
}
.identity-copy {
display: grid;
}
.identity-org {
color: var(--muted);
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.metric-card {
padding: 1.15rem 1.15rem 1.2rem;
}
.metric-card-link {
position: relative;
overflow: hidden;
width: 100%;
text-align: left;
border: 1px solid var(--panel-border);
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.07), transparent 30%),
linear-gradient(180deg, rgba(14, 28, 40, 0.98), rgba(8, 17, 26, 0.94)),
rgba(255, 255, 255, 0.02);
color: var(--text);
box-shadow: var(--shadow-soft);
}
.metric-card-link:hover {
transform: translateY(-2px);
border-color: rgba(80, 211, 198, 0.28);
}
.metric-value {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 2.5rem;
line-height: 1;
margin: 0.5rem 0 0.3rem;
}
.metric-label {
margin: 0;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.78rem;
}
.metric-copy {
margin: 0;
color: var(--text);
line-height: 1.55;
font-size: 0.9rem;
max-width: 28ch;
}
.metric-tone {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 3px;
background: rgba(255, 255, 255, 0.06);
}
.metric-tone-good {
background: linear-gradient(90deg, #50d3c6, #8ef4b7);
}
.metric-tone-watch {
background: linear-gradient(90deg, #f4bb63, #ffd899);
}
.metric-tone-alert {
background: linear-gradient(90deg, #ff7a7a, #ffb06f);
}
.metric-tone-neutral {
background: linear-gradient(90deg, #88a9ff, #50d3c6);
}
.metric-drilldown,
.mini-card-cta {
display: inline-flex;
margin-top: 1rem;
color: var(--brand-2);
font-size: 0.86rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dashboard-drilldown-button .metric-drilldown,
.dashboard-attention-item .metric-drilldown,
.framework-ring-card .metric-drilldown {
margin-top: 0.8rem;
}
.dashboard-grid {
padding: 1.45rem;
display: grid;
grid-template-columns: 1.15fr 0.95fr 0.95fr;
gap: 1.25rem;
background:
radial-gradient(circle at top right, rgba(136, 169, 255, 0.1), transparent 26%),
radial-gradient(circle at left bottom, rgba(80, 211, 198, 0.08), transparent 26%),
linear-gradient(180deg, rgba(11, 22, 33, 0.96), rgba(7, 15, 23, 0.95));
}
.dashboard-hero-summary-card {
min-height: 13rem;
position: relative;
overflow: hidden;
color: var(--text);
background:
radial-gradient(circle at top right, rgba(80, 211, 198, 0.12), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)),
rgba(255, 255, 255, 0.03);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 22px 48px rgba(1, 8, 14, 0.2);
}
.dashboard-hero-summary-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 32%),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 28%);
}
.dashboard-hero-summary-card .signal-label,
.dashboard-context-kpi .signal-label,
.dashboard-driver-card .signal-label,
.dashboard-score-callout .signal-label {
color: var(--muted);
}
.dashboard-hero-summary-card .signal-copy,
.dashboard-score-callout .signal-copy,
.dashboard-context-kpi .signal-copy,
.dashboard-driver-card .signal-copy {
color: var(--text);
opacity: 0.82;
}
.dashboard-hero-summary-card .signal-value {
font-size: clamp(2.25rem, 3.6vw, 3.1rem);
color: var(--text-strong);
letter-spacing: -0.03em;
text-shadow: var(--surface-value-shadow);
}
.dashboard-score-value-row {
display: flex;
align-items: end;
flex-wrap: wrap;
gap: 0.75rem;
}
.dashboard-score-band-chip {
display: inline-flex;
align-items: center;
min-height: 2rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(6, 14, 22, 0.32);
color: var(--text);
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dashboard-score-band-chip-good {
border-color: rgba(98, 226, 162, 0.3);
color: #b8ffd3;
}
.dashboard-score-band-chip-watch {
border-color: rgba(244, 187, 99, 0.3);
color: #ffe0a6;
}
.dashboard-score-band-chip-alert {
border-color: rgba(255, 122, 122, 0.3);
color: #ffd0c1;
}
.dashboard-score-band-chip-neutral {
border-color: rgba(136, 169, 255, 0.28);
color: #d6e2ff;
}
.dashboard-score-band-range {
max-width: 34ch;
}
.dashboard-score-callout-title {
margin: 0;
color: #f7fbff;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
line-height: 1.02;
letter-spacing: -0.02em;
text-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}
.dashboard-score-callout-note {
margin: 0;
color: rgba(237, 244, 251, 0.88);
font-size: 0.94rem;
line-height: 1.45;
}
.dashboard-score-chip-list,
.dashboard-score-series {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
}
.dashboard-score-chip,
.dashboard-score-series-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2rem;
padding: 0.35rem 0.68rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(6, 14, 22, 0.28);
color: var(--text);
font-size: 0.8rem;
letter-spacing: 0.04em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dashboard-score-chip-good {
border-color: rgba(98, 226, 162, 0.24);
color: #b8ffd3;
}
.dashboard-score-chip-alert {
border-color: rgba(255, 122, 122, 0.24);
color: #ffd0c1;
}
.dashboard-score-chip-neutral {
border-color: rgba(136, 169, 255, 0.24);
color: #d6e2ff;
}
.dashboard-score-series-chip {
min-width: 2.8rem;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1rem;
font-weight: 700;
}
.dashboard-score-series-separator {
color: rgba(237, 244, 251, 0.48);
font-size: 1rem;
line-height: 1;
}
.report-hero {
position: relative;
overflow: hidden;
padding: 1.65rem;
display: grid;
grid-template-columns: 1.08fr 0.92fr;
gap: 1.2rem;
align-items: start;
background: var(--surface-hero-report);
border: 1px solid var(--surface-premium-border);
box-shadow: var(--surface-premium-shadow);
}
.report-hero::before,
.report-hero::after {
content: "";
position: absolute;
pointer-events: none;
}
.report-hero::before {
inset: 0;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 24%),
radial-gradient(circle at 82% 18%, rgba(244, 187, 99, 0.18), transparent 24%),
radial-gradient(circle at 16% 0%, rgba(136, 169, 255, 0.18), transparent 26%);
opacity: 0.92;
}
.report-hero::after {
width: 24rem;
height: 24rem;
top: -10rem;
right: -6rem;
border-radius: 999px;
background: radial-gradient(circle, rgba(80, 211, 198, 0.16), transparent 68%);
filter: blur(8px);
opacity: 0.78;
}
.report-hero > * {
position: relative;
z-index: 1;
}
.report-hero-copy {
display: grid;
gap: 1.1rem;
}
.report-hero-copy .eyebrow {
letter-spacing: 0.18em;
}
.report-hero-copy h3 {
margin: 0;
max-width: 12ch;
color: #f7fbff;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: clamp(2.35rem, 4vw, 4.25rem);
line-height: 0.94;
letter-spacing: -0.035em;
text-wrap: balance;
text-shadow: 0 18px 44px rgba(2, 8, 18, 0.28);
}
.report-hero-intro {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 0.95rem;
}
.report-hero-intro-card {
grid-column: span 5;
position: relative;
overflow: hidden;
display: grid;
gap: 0.68rem;
min-height: 100%;
padding: 1rem 1.05rem 1.05rem;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.09);
background:
linear-gradient(155deg, rgba(245, 188, 101, 0.12), rgba(80, 211, 198, 0.06) 44%, rgba(255, 255, 255, 0.03)),
rgba(7, 14, 24, 0.3);
box-shadow:
0 20px 48px rgba(5, 10, 18, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.report-hero-intro-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 24%),
radial-gradient(circle at top right, rgba(136, 169, 255, 0.12), transparent 45%);
opacity: 0.88;
}
.report-hero-intro-card > * {
position: relative;
z-index: 1;
}
.report-hero-intro-card-lead {
grid-column: span 7;
border-color: rgba(245, 188, 101, 0.2);
}
.report-hero-intro-card-support {
border-color: rgba(136, 169, 255, 0.18);
}
.report-hero-intro-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.9rem;
align-items: start;
}
.report-hero-intro-kicker {
margin: 0;
color: rgba(247, 251, 255, 0.62);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.report-hero-intro-title {
margin: 0.2rem 0 0;
color: #f7fbff;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: clamp(1.3rem, 2vw, 1.85rem);
line-height: 0.98;
letter-spacing: -0.03em;
text-wrap: balance;
}
.report-hero-intro-meta {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-start;
gap: 0.45rem;
}
.report-hero-intro-meta .pill {
backdrop-filter: blur(12px);
}
.report-hero-intro-copy {
margin: 0;
color: rgba(247, 251, 255, 0.94);
font-size: 1rem;
line-height: 1.52;
text-wrap: pretty;
}
.report-hero-intro-support {
margin: 0;
color: rgba(247, 251, 255, 0.7);
font-size: 0.92rem;
line-height: 1.45;
text-wrap: pretty;
}
.report-shadow-hero-strip {
margin-top: 1rem;
}
.report-shadow-hero-shell {
position: relative;
overflow: hidden;
display: grid;
gap: 1rem;
padding: 1rem 1.05rem 1.05rem;
border-radius: 24px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium) 96%, transparent),
color-mix(in srgb, var(--surface-card) 94%, transparent)
),
var(--surface-panel);
box-shadow: var(--surface-premium-shadow), var(--surface-inset-shadow);
}
.report-shadow-hero-shell::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at top right, rgba(136, 169, 255, 0.16), transparent 42%);
opacity: 0.88;
}
.report-shadow-hero-shell > * {
position: relative;
z-index: 1;
}
.report-shadow-hero-alert {
border-color: color-mix(in srgb, var(--warning) 40%, var(--surface-premium-border));
}
.report-shadow-hero-watch {
border-color: color-mix(in srgb, var(--brand) 40%, var(--surface-premium-border));
}
.report-shadow-hero-good,
.report-shadow-hero-contained {
border-color: color-mix(in srgb, var(--success) 30%, var(--surface-premium-border));
}
.report-shadow-hero-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: start;
}
.report-shadow-hero-head strong {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1.3rem;
letter-spacing: 0.03em;
}
.report-shadow-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-start;
gap: 0.6rem;
}
.report-shadow-hero-actions .button {
white-space: nowrap;
}
.report-shadow-board-strip {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.report-toolbar-card {
display: grid;
gap: 1rem;
position: relative;
isolation: isolate;
overflow: hidden;
}
.report-toolbar-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 26%),
radial-gradient(circle at top right, rgba(80, 211, 198, 0.08), transparent 42%);
opacity: 0.8;
}
.report-toolbar-card > * {
position: relative;
z-index: 1;
}
.report-toolbar-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
gap: 1rem;
align-items: start;
}
.report-focus-toolbar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 0.75rem;
}
.report-focus-button {
min-height: 100%;
}
.report-summary-button {
appearance: none;
font: inherit;
}
.report-depth-disclosure {
margin-top: 1rem;
position: relative;
overflow: hidden;
padding: 1.05rem 1.1rem 1.1rem;
border-radius: 26px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium) 96%, transparent),
color-mix(in srgb, var(--surface-card) 94%, transparent)
),
var(--surface-panel);
box-shadow: var(--surface-premium-shadow), var(--surface-inset-shadow);
}
.report-depth-disclosure::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 24%),
radial-gradient(circle at top right, rgba(136, 169, 255, 0.14), transparent 40%);
opacity: 0.88;
}
.report-depth-disclosure > * {
position: relative;
z-index: 1;
}
.report-depth-disclosure summary {
align-items: center;
padding-bottom: 0.45rem;
}
.report-depth-disclosure summary::after {
width: 1.9rem;
height: 1.9rem;
display: inline-grid;
place-items: center;
border-radius: 999px;
border: 1px solid var(--chip-border);
background: var(--surface-chip);
box-shadow: var(--surface-chip-shadow);
}
.report-detail-drawer {
--detail-drawer-max: min(36rem, 62dvh);
}
.report-detail-drawer[open] .report-depth-grid,
.report-detail-drawer[open] .report-grid {
padding-bottom: 0.35rem;
}
.discovery-detail-drawer {
--detail-drawer-max: min(38rem, 64dvh);
}
.discovery-detail-drawer[open] .compact-form,
.discovery-detail-drawer[open] .stack,
.discovery-detail-drawer[open] .form-section-card {
padding-bottom: 0.35rem;
}
.accountability-detail-drawer {
--detail-drawer-max: min(39rem, 64dvh);
}
.accountability-detail-drawer[open] .compact-form,
.accountability-detail-drawer[open] .intake-step-panel,
.accountability-detail-drawer[open] .form-section-card,
.accountability-detail-drawer[open] .bulk-import-assist {
padding-bottom: 0.35rem;
}
.integration-detail-drawer {
--detail-drawer-max: min(38rem, 64dvh);
}
.integration-detail-drawer[open] .compact-form,
.integration-detail-drawer[open] .intake-step-panel,
.integration-detail-drawer[open] .integration-choice-shell,
.integration-detail-drawer[open] .checkbox-grid {
padding-bottom: 0.35rem;
}
.risk-detail-drawer {
--detail-drawer-max: min(38rem, 64dvh);
}
.risk-detail-drawer[open] .compact-form,
.risk-detail-drawer[open] .intake-step-panel {
padding-bottom: 0.35rem;
}
.incident-detail-drawer {
--detail-drawer-max: min(38rem, 64dvh);
}
.incident-detail-drawer[open] .compact-form,
.incident-detail-drawer[open] .intake-step-panel {
padding-bottom: 0.35rem;
}
.report-depth-grid {
margin-top: 0.25rem;
display: grid;
gap: 1rem;
padding-top: 0.9rem;
border-top: 1px solid color-mix(in srgb, var(--panel-border) 78%, transparent);
}
.report-depth-grid > .panel {
position: relative;
isolation: isolate;
overflow: hidden;
}
.report-depth-grid > .panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 26%),
radial-gradient(circle at top right, rgba(80, 211, 198, 0.1), transparent 44%);
opacity: 0.82;
}
.report-depth-grid > .panel > * {
position: relative;
z-index: 1;
}
.report-depth-grid > .panel .section-heading {
gap: 0.25rem;
}
.report-depth-grid > .panel .section-heading h3 {
font-size: 1.18rem;
line-height: 1.1;
}
.report-search-field {
display: grid;
gap: 0.45rem;
}
.report-search-field input {
width: 100%;
}
.report-board-panel {
position: relative;
isolation: isolate;
display: grid;
gap: 1rem;
padding: 1rem 1.05rem;
border-radius: 22px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium);
box-shadow: var(--surface-premium-shadow);
}
.report-board-panel > * {
position: relative;
z-index: 1;
}
.report-actions {
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: flex-start;
}
.report-actions .button {
position: relative;
z-index: 3;
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.report-actions-stack {
display: grid;
gap: 0.9rem;
}
.report-action-primary,
.report-action-disclosure {
display: grid;
gap: 0.8rem;
padding: 0.9rem 0.95rem;
border-radius: 18px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium-soft);
}
.report-action-copy {
display: grid;
gap: 0.28rem;
}
.report-action-copy strong,
.report-action-disclosure summary strong {
color: var(--text);
}
.report-action-copy span,
.report-action-disclosure summary span {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.45;
}
.report-action-disclosure summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
}
.report-action-disclosure summary::-webkit-details-marker {
display: none;
}
.report-action-disclosure summary::after {
content: "+";
color: var(--brand);
font-size: 1.1rem;
line-height: 1;
margin-left: auto;
}
.report-action-disclosure[open] summary::after {
content: "−";
}
.report-library-disclosure {
display: grid;
gap: 0.9rem;
}
.report-library-disclosure summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
}
.report-library-disclosure summary::-webkit-details-marker {
display: none;
}
.report-library-disclosure summary::after {
content: "+";
color: var(--brand);
font-size: 1.1rem;
line-height: 1;
margin-left: auto;
}
.report-library-disclosure[open] summary::after {
content: "−";
}
.report-actions-secondary {
padding-top: 0.15rem;
}
.report-board-panel .form-feedback {
margin: 0;
}
.report-actions .button[aria-busy="true"] {
opacity: 0.7;
cursor: progress;
}
.highlight-list {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1rem;
}
.discovery-guidance-rail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
}
.discovery-guidance-card {
display: grid;
gap: 0.4rem;
padding: 1rem;
border-radius: 20px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium-soft);
}
.discovery-guidance-card h4 {
margin: 0;
font-size: 1rem;
}
.highlight-item {
grid-column: span 6;
position: relative;
overflow: hidden;
display: grid;
gap: 0.95rem;
align-content: start;
min-height: 100%;
padding: 1.05rem 1.05rem 1.1rem;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
rgba(8, 16, 26, 0.38);
box-shadow:
0 24px 54px rgba(5, 10, 18, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
.highlight-item::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 26%),
radial-gradient(circle at top right, rgba(80, 211, 198, 0.12), transparent 46%);
opacity: 0.9;
}
.highlight-item > * {
position: relative;
z-index: 1;
}
.highlight-item-feature {
grid-column: 1 / -1;
}
.highlight-item-good {
border-color: rgba(91, 221, 166, 0.2);
}
.highlight-item-watch {
border-color: rgba(136, 169, 255, 0.2);
}
.highlight-item-alert {
border-color: rgba(245, 188, 101, 0.26);
}
.highlight-item-neutral {
border-color: rgba(255, 255, 255, 0.08);
}
.highlight-item-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.highlight-item-body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: start;
}
.highlight-item-copy-stack {
display: grid;
gap: 0.45rem;
}
.highlight-item-title {
margin: 0;
color: #f7fbff;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1.18rem;
line-height: 1.02;
letter-spacing: -0.03em;
text-wrap: balance;
}
.highlight-item-copy {
margin: 0;
color: rgba(247, 251, 255, 0.72);
font-size: 0.94rem;
line-height: 1.52;
text-wrap: pretty;
}
.highlight-item-feature .highlight-item-body {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
}
.highlight-item-feature .highlight-item-title {
font-size: clamp(1.5rem, 2.6vw, 2.2rem);
line-height: 0.95;
max-width: 15ch;
}
.highlight-item-feature .highlight-item-copy {
max-width: 58ch;
font-size: 0.98rem;
}
.highlight-item-index {
color: rgba(247, 251, 255, 0.48);
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 0.94rem;
font-weight: 700;
letter-spacing: 0.2em;
}
.highlight-item-tone {
width: 0.75rem;
height: 0.75rem;
border-radius: 999px;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.03);
}
.highlight-item-tone-good {
background: #74f0b0;
}
.highlight-item-tone-watch {
background: #8fb0ff;
}
.highlight-item-tone-alert {
background: #f4bc65;
}
.highlight-item-tone-neutral {
background: rgba(247, 251, 255, 0.38);
}
.highlight-item-metric {
align-self: start;
color: #f7fbff;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: clamp(2.1rem, 3vw, 2.8rem);
line-height: 0.9;
letter-spacing: -0.04em;
text-shadow: 0 18px 42px rgba(2, 8, 18, 0.24);
}
.highlight-item-feature .highlight-item-metric {
font-size: clamp(2.9rem, 5vw, 4.4rem);
}
.report-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.report-standard-card {
display: grid;
gap: 1rem;
}
.report-standard-actions {
display: grid;
gap: 0.9rem;
}
.report-standard-action-group {
padding: 0.9rem 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
}
.report-standard-action-group .connector-actions {
margin-top: 0.75rem;
}
.report-standard-disclosure {
display: grid;
gap: 0.8rem;
padding: 0.9rem 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
rgba(255, 255, 255, 0.018);
}
.report-standard-disclosure summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
}
.report-standard-disclosure summary::-webkit-details-marker {
display: none;
}
.report-standard-disclosure summary strong {
color: var(--text);
}
.report-standard-disclosure summary span {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.45;
}
.report-standard-disclosure summary::after {
content: "+";
color: var(--brand);
font-size: 1.1rem;
line-height: 1;
margin-left: auto;
}
.report-standard-disclosure[open] summary::after {
content: "−";
}
.report-standard-disclosure-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.9rem;
}
.report-readiness-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.9rem;
margin-top: 1rem;
}
.report-follow-through-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.8rem;
margin-bottom: 0.9rem;
}
.report-follow-through-card {
display: grid;
gap: 0.45rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-elevated) 90%, transparent),
color-mix(in srgb, var(--surface-card) 92%, transparent)
),
var(--surface-panel);
box-shadow: var(--shadow-soft);
}
.report-follow-through-card strong {
color: var(--text-strong);
font-size: 1.6rem;
line-height: 0.95;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
}
.report-follow-through-card-good {
border-color: color-mix(in srgb, var(--success) 24%, var(--line));
}
.report-follow-through-card-watch {
border-color: color-mix(in srgb, var(--warning) 28%, var(--line));
box-shadow: 0 16px 36px rgba(244, 187, 99, 0.08);
}
.report-follow-through-card-alert {
border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
box-shadow: 0 16px 38px rgba(255, 122, 122, 0.08);
}
.report-follow-through-card-neutral {
border-color: color-mix(in srgb, var(--info) 22%, var(--line));
}
.report-readiness-list {
margin-top: 0.4rem;
}
.audit-readiness-table {
display: grid;
gap: 0.7rem;
margin-top: 0.8rem;
}
.audit-readiness-card {
display: grid;
gap: 0.7rem;
min-width: 0;
padding: 0.85rem;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--surface-premium-border) 88%, transparent);
border-left: 3px solid color-mix(in srgb, var(--brand) 60%, var(--warning));
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--surface-elevated) 88%, transparent),
color-mix(in srgb, var(--surface-card) 94%, transparent)
),
var(--surface-panel);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}
.audit-readiness-card-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: start;
}
.audit-readiness-card-title {
display: grid;
gap: 0.15rem;
min-width: 0;
}
.audit-readiness-card-kicker,
.audit-readiness-card-chip span {
color: var(--muted);
font-size: 0.68rem;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.audit-readiness-card-title strong {
color: var(--text-strong);
font-size: clamp(1rem, 1.3vw, 1.18rem);
line-height: 1.18;
overflow-wrap: anywhere;
}
.audit-readiness-card-status {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 12rem;
padding: 0.42rem 0.65rem;
border-radius: 999px;
color: var(--text-strong);
font-size: 0.85rem;
font-weight: 800;
line-height: 1.15;
text-align: center;
overflow-wrap: anywhere;
background: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
border: 1px solid color-mix(in srgb, var(--surface-premium-border) 90%, transparent);
}
.audit-readiness-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
min-width: 0;
}
.audit-readiness-card-chip {
display: inline-grid;
gap: 0.12rem;
min-width: min(100%, 8.8rem);
max-width: 100%;
padding: 0.48rem 0.58rem;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--surface-premium-border) 78%, transparent);
background: color-mix(in srgb, var(--surface-card) 82%, transparent);
}
.audit-readiness-card-chip strong {
color: var(--text);
font-size: 0.9rem;
line-height: 1.25;
overflow-wrap: anywhere;
}
.audit-readiness-card-copy {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
.audit-readiness-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.audit-readiness-card-actions .table-action-button {
min-height: 2.25rem;
padding-inline: 0.85rem;
}
.report-queue-card {
gap: 0.65rem;
}
.report-automation-actions {
margin-top: 1rem;
}
.report-export-lane-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.9rem;
}
.report-export-block {
display: grid;
gap: 0.85rem;
}
.report-standards-review-actions {
margin-top: 1rem;
}
.standards-review-explainer {
margin-bottom: 1rem;
}
.standards-review-section-head {
margin: 1.1rem 0 0.75rem;
}
.standards-review-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 0.9rem;
margin-bottom: 1rem;
}
.standards-review-card {
display: grid;
gap: 0.85rem;
}
.standards-review-card-actions {
margin-top: auto;
}
.standards-review-card-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: start;
}
.standards-review-card-head h4 {
margin: 0.2rem 0 0;
}
.standards-review-verdict {
white-space: nowrap;
}
.standards-review-scope {
margin: 0;
}
.standards-review-detail {
display: grid;
gap: 0.3rem;
}
.standards-review-detail strong {
font-size: 0.88rem;
}
.standards-review-chip-good {
border-color: rgba(98, 226, 162, 0.2);
}
.standards-review-chip-watch {
border-color: rgba(244, 187, 99, 0.24);
}
.standards-review-chip-alert {
border-color: rgba(255, 122, 122, 0.24);
}
.standards-review-chip-neutral {
border-color: rgba(136, 169, 255, 0.22);
}
.report-card {
padding: 1.35rem;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium-soft);
box-shadow: var(--shadow-soft);
position: relative;
}
.report-card::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, var(--brand), var(--brand-strong));
opacity: 0.55;
pointer-events: none;
}
.chart-stack {
display: grid;
gap: 0.8rem;
}
.bar-row {
display: grid;
gap: 0.4rem;
}
.bar-row-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
color: var(--muted);
font-size: 0.9rem;
}
.bar-track {
position: relative;
overflow: hidden;
height: 0.9rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
}
.bar-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
width: var(--ui-percent, 0%);
}
.bar-fill.danger {
background: linear-gradient(90deg, #ff6f7d, #ffb06f);
}
.bar-fill.safe {
background: linear-gradient(90deg, #61d4c4, #8ef4b7);
}
.heatmap-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.65rem;
}
.heatmap-header {
text-align: center;
color: var(--muted);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.heatmap-cell {
min-height: 5rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 0.8rem;
display: grid;
align-content: space-between;
background: rgba(255, 255, 255, 0.04);
width: 100%;
text-align: left;
color: var(--text);
cursor: pointer;
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease;
}
.heatmap-cell:hover {
transform: translateY(-2px);
border-color: rgba(80, 211, 198, 0.24);
box-shadow: var(--shadow-soft);
}
.heatmap-cell strong {
font-size: 2rem;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
}
.heatmap-cell.high {
background: linear-gradient(180deg, rgba(255, 96, 96, 0.25), rgba(255, 145, 85, 0.12));
}
.heatmap-cell.medium {
background: linear-gradient(180deg, rgba(244, 187, 99, 0.18), rgba(255, 213, 122, 0.08));
}
.heatmap-cell.low {
background: linear-gradient(180deg, rgba(80, 211, 198, 0.18), rgba(80, 211, 198, 0.05));
}
.connector-card {
padding: 1rem;
border-radius: 20px;
background: var(--surface-premium-soft);
border: 1px solid var(--surface-premium-border);
box-shadow: var(--shadow-soft);
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
}
.connector-card:hover {
transform: translateY(-2px);
border-color: var(--chip-hover-border);
box-shadow: var(--surface-premium-shadow);
}
.connector-card-highlight {
border-color: rgba(255, 198, 108, 0.38);
box-shadow: 0 0 0 1px rgba(255, 198, 108, 0.18), 0 22px 44px rgba(5, 14, 24, 0.32);
animation: connectorFlash 2.4s ease;
}
@keyframes connectorFlash {
0% {
transform: translateY(0);
box-shadow: 0 0 0 1px rgba(255, 198, 108, 0.28), 0 0 0 0 rgba(255, 198, 108, 0.18);
}
35% {
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(255, 198, 108, 0.32), 0 20px 40px rgba(255, 198, 108, 0.08);
}
100% {
transform: translateY(0);
}
}
.ring-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.9rem;
}
.framework-ring-card {
width: 100%;
text-align: left;
padding: 1rem;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
rgba(255, 255, 255, 0.02);
color: var(--text);
display: grid;
gap: 0.95rem;
box-shadow: var(--shadow-soft);
position: relative;
isolation: isolate;
overflow: hidden;
}
.framework-ring-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at top right, rgba(136, 169, 255, 0.12), transparent 42%);
opacity: 0.8;
}
.framework-ring-card > * {
position: relative;
z-index: 1;
}
.framework-ring-card:hover {
transform: translateY(-2px);
border-color: rgba(80, 211, 198, 0.22);
}
.framework-ring-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: start;
}
.framework-ring-head h4 {
margin: 0;
font-size: 1.04rem;
}
.framework-ring-body {
display: grid;
grid-template-columns: 110px 1fr;
gap: 1rem;
align-items: center;
}
.framework-mini-ring {
position: relative;
width: 110px;
aspect-ratio: 1;
}
.framework-mini-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.framework-mini-ring-center {
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
}
.framework-mini-ring-center strong {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 2rem;
line-height: 0.9;
}
.framework-mini-ring-center span {
color: var(--muted);
font-size: 0.82rem;
}
.framework-ring-copy {
display: grid;
gap: 0.35rem;
}
.framework-ring-copy p {
margin: 0;
color: var(--muted);
line-height: 1.5;
}
.provider-lane-list,
.shadow-pressure-list,
.top-risk-stack {
display: grid;
gap: 0.85rem;
}
.provider-lane-card,
.shadow-pressure-card,
.top-risk-card {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022)),
rgba(255, 255, 255, 0.02);
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
.provider-lane-card::before,
.shadow-pressure-card::before,
.top-risk-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 30%),
radial-gradient(circle at top right, rgba(80, 211, 198, 0.1), transparent 42%);
opacity: 0.78;
}
.provider-lane-card > *,
.shadow-pressure-card > *,
.top-risk-card > * {
position: relative;
z-index: 1;
}
.provider-lane-head,
.shadow-pressure-head,
.top-risk-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: start;
}
.provider-lane-head h4,
.shadow-pressure-head h4,
.top-risk-head h4 {
margin: 0;
font-size: 1rem;
}
.provider-lane-head p,
.shadow-pressure-card p,
.top-risk-card p {
margin: 0.35rem 0 0;
color: var(--muted);
line-height: 1.5;
}
.provider-lane-meters {
display: grid;
gap: 0.8rem;
margin-top: 0.8rem;
}
.provider-meter {
display: grid;
gap: 0.4rem;
}
.provider-meter-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
color: var(--muted);
font-size: 0.88rem;
}
.provider-meter-track,
.shadow-pressure-track {
position: relative;
overflow: hidden;
height: 0.8rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
}
.provider-meter-fill,
.shadow-pressure-fill {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #f4bb63, #50d3c6);
box-shadow: 0 0 16px rgba(80, 211, 198, 0.28);
width: var(--ui-percent, 0%);
}
.shadow-pressure-actions {
margin-top: 0.9rem;
}
.dashboard-support-links {
display: grid;
gap: 0.65rem;
margin-top: 0.9rem;
}
.dashboard-support-links-title {
margin: 0;
color: var(--muted);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dashboard-support-links-row {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.dashboard-support-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
color: var(--text);
font-size: 0.88rem;
line-height: 1.2;
transition:
transform 160ms ease,
border-color 160ms ease,
background 160ms ease;
}
.dashboard-support-link:hover,
.dashboard-support-link:focus-visible {
transform: translateY(-1px);
border-color: rgba(80, 211, 198, 0.22);
background:
linear-gradient(180deg, rgba(80, 211, 198, 0.12), rgba(80, 211, 198, 0.03)),
rgba(255, 255, 255, 0.03);
}
.dashboard-focus-banner {
display: flex;
align-items: start;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 1rem;
margin-bottom: 0.95rem;
border-radius: 20px;
border: 1px solid rgba(244, 187, 99, 0.18);
background:
linear-gradient(180deg, rgba(244, 187, 99, 0.12), rgba(244, 187, 99, 0.03)),
rgba(255, 255, 255, 0.02);
}
.report-focus-banner {
margin-bottom: 1rem;
}
.report-buyer-note-list {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: 0.45rem;
color: var(--muted);
}
.report-buyer-note-list li {
line-height: 1.5;
}
.dashboard-focus-copy {
margin: 0.35rem 0 0;
color: var(--muted);
line-height: 1.5;
}
.accountability-card-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: start;
}
.accountability-card-head h4 {
margin: 0;
}
.accountability-table-cell {
display: grid;
gap: 0.7rem;
}
.accountability-table-main {
color: var(--text);
font-size: 1rem;
line-height: 1.2;
}
.accountability-meta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.45rem 0.8rem;
margin-top: 0.75rem;
color: var(--muted);
font-size: 0.9rem;
}
.accountability-meta-grid strong {
color: var(--text);
font-weight: 600;
margin-right: 0.25rem;
}
.sla-pill {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.65rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text);
font-size: 0.82rem;
letter-spacing: 0.03em;
}
.sla-pill-good {
border-color: rgba(80, 211, 198, 0.22);
background: rgba(80, 211, 198, 0.12);
}
.sla-pill-watch {
border-color: rgba(244, 187, 99, 0.22);
background: rgba(244, 187, 99, 0.12);
}
.sla-pill-alert {
border-color: rgba(255, 122, 122, 0.24);
background: rgba(255, 122, 122, 0.12);
}
.sla-pill-neutral {
border-color: rgba(136, 169, 255, 0.22);
background: rgba(136, 169, 255, 0.1);
}
.findings-trend-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.8rem;
margin-top: 1rem;
}
.findings-trend-card {
padding: 0.9rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022)),
rgba(255, 255, 255, 0.02);
display: grid;
gap: 0.75rem;
}
.findings-trend-card strong {
color: var(--text);
}
.findings-trend-bars {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
align-items: end;
min-height: 8rem;
}
.findings-trend-column {
display: grid;
justify-items: center;
align-content: end;
gap: 0.35rem;
}
.findings-trend-value,
.findings-trend-column small {
color: var(--muted);
}
.findings-trend-bar {
display: block;
width: 100%;
min-height: 0.75rem;
border-radius: 999px 999px 0 0;
height: var(--ui-percent, 0%);
}
.findings-trend-bar-open {
background: linear-gradient(180deg, rgba(244, 187, 99, 0.96), rgba(244, 187, 99, 0.18));
}
.findings-trend-bar-closed {
background: linear-gradient(180deg, rgba(80, 211, 198, 0.96), rgba(80, 211, 198, 0.18));
}
.provider-meter-track-cool .provider-meter-fill-cool {
background: linear-gradient(90deg, #88a9ff, #50d3c6);
}
.intake-step-panel .form-section-card {
margin: 0;
}
.river-shell {
display: grid;
gap: 0.8rem;
}
.river-track {
display: flex;
gap: 0.6rem;
align-items: stretch;
}
.river-segment {
min-height: 5.8rem;
padding: 0.9rem 0.95rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
display: grid;
align-content: space-between;
gap: 0.4rem;
width: var(--ui-percent, 0%);
}
.river-segment span {
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.river-segment strong {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 2rem;
}
.river-segment-good {
background: linear-gradient(180deg, rgba(98, 226, 162, 0.16), rgba(98, 226, 162, 0.05));
}
.river-segment-watch {
background: linear-gradient(180deg, rgba(244, 187, 99, 0.16), rgba(244, 187, 99, 0.05));
}
.river-segment-alert {
background: linear-gradient(180deg, rgba(255, 122, 122, 0.18), rgba(255, 122, 122, 0.05));
}
.risk-matrix-shell {
display: grid;
grid-template-columns: 96px repeat(3, minmax(0, 1fr));
gap: 0.6rem;
align-items: stretch;
}
.risk-matrix-corner {
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
}
.risk-matrix-header {
display: grid;
place-items: center;
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.risk-matrix-header-row {
justify-items: start;
padding-inline: 0.35rem;
}
.risk-matrix-cell {
min-height: 5.6rem;
padding: 0.85rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
display: grid;
align-content: space-between;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, calc(0.04 + var(--cell-strength) * 0.12)),
rgba(255, 255, 255, 0.02)
),
rgba(255, 255, 255, 0.02);
}
.risk-matrix-cell span {
color: var(--muted);
font-size: 0.8rem;
}
.risk-matrix-cell strong {
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 2rem;
}
.risk-matrix-cell.tone-alert {
box-shadow: inset 0 0 0 1px rgba(255, 122, 122, 0.14);
}
.risk-matrix-cell.tone-watch {
box-shadow: inset 0 0 0 1px rgba(244, 187, 99, 0.12);
}
.risk-matrix-cell.tone-good {
box-shadow: inset 0 0 0 1px rgba(98, 226, 162, 0.12);
}
.skyline-chart {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
gap: 0.8rem;
align-items: end;
min-height: 17rem;
}
.skyline-column {
display: grid;
gap: 0.55rem;
justify-items: center;
align-items: end;
}
.skyline-top {
color: var(--text);
font-size: 0.9rem;
}
.skyline-bar-shell {
width: 100%;
height: 11rem;
padding: 0.35rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
display: flex;
align-items: end;
}
.skyline-bar {
display: block;
width: 100%;
border-radius: 16px;
background: linear-gradient(180deg, rgba(244, 187, 99, 0.95), rgba(80, 211, 198, 0.85));
box-shadow: 0 12px 28px rgba(80, 211, 198, 0.18);
height: var(--ui-percent, 0%);
}
.skyline-bar-good {
background: linear-gradient(180deg, #50d3c6, #8ef4b7);
}
.skyline-bar-watch {
background: linear-gradient(180deg, #f4bb63, #ffd899);
}
.skyline-bar-alert {
background: linear-gradient(180deg, #ff7a7a, #ffb06f);
}
.skyline-bar-neutral {
background: linear-gradient(180deg, #88a9ff, #50d3c6);
}
.skyline-label {
color: var(--muted);
font-size: 0.8rem;
text-align: center;
line-height: 1.4;
}
.connector-head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: start;
}
.connector-head h4 {
margin: 0;
font-size: 1.08rem;
}
.connector-meta,
.connector-docs {
margin-top: 0.85rem;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.55;
}
.connector-card > .accountability-table-cell {
margin-top: 0.9rem;
padding: 0.95rem 1rem;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
var(--surface-chip);
border: 1px solid var(--chip-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.connector-actions {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin-top: 1rem;
}
.link-button {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.link-button:not(.table-action-button) {
gap: 0.35rem;
color: var(--accent);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
.link-button:not(.table-action-button)::after {
content: "→";
font-weight: 900;
}
.connector-doc-list {
display: grid;
gap: 0.45rem;
margin-top: 0.75rem;
}
.connector-doc-item {
padding: 0.7rem 0.8rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.connector-doc-item a {
color: var(--text);
text-decoration: none;
}
.checkbox-grid {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
}
.form-note {
grid-column: 1 / -1;
margin: 0;
color: var(--muted);
font-size: 0.92rem;
}
.compact-form > .form-note:first-child {
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.12), rgba(80, 211, 198, 0.06)),
color-mix(in srgb, var(--surface-card) 94%, transparent);
color: var(--muted-strong);
line-height: 1.58;
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
.form-note[data-tone="warning"] {
padding: 0.75rem 0.9rem;
border-radius: 14px;
border: 1px solid rgba(255, 198, 108, 0.2);
background: rgba(109, 67, 10, 0.16);
color: #ffe7bc;
}
.form-note[data-tone="success"] {
padding: 0.75rem 0.9rem;
border-radius: 14px;
border: 1px solid rgba(97, 212, 196, 0.2);
background: rgba(17, 85, 74, 0.16);
color: #d6fff5;
}
.form-note[data-tone="error"] {
padding: 0.75rem 0.9rem;
border-radius: 14px;
border: 1px solid rgba(255, 122, 122, 0.22);
background: rgba(109, 31, 31, 0.18);
color: #ffd2d2;
}
.field-label {
display: block;
margin-bottom: 0.45rem;
color: var(--text);
font-size: 0.9rem;
}
.form-feedback {
grid-column: 1 / -1;
margin: -0.2rem 0 0;
padding: 0.75rem 0.9rem;
border-radius: 14px;
border: 1px solid rgba(255, 122, 122, 0.2);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
rgba(120, 19, 30, 0.18);
color: #ffd8d8;
font-size: 0.92rem;
overflow-wrap: anywhere;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.form-feedback[data-tone="success"] {
border-color: rgba(97, 212, 196, 0.24);
background: rgba(17, 85, 74, 0.18);
color: #d6fff5;
}
.form-feedback[data-tone="error"] {
border-color: rgba(255, 122, 122, 0.2);
background: rgba(120, 19, 30, 0.18);
color: #ffd8d8;
}
.form-feedback[data-tone="warning"] {
border-color: rgba(255, 198, 108, 0.2);
background: rgba(109, 67, 10, 0.18);
color: #ffe7bc;
}
.mfa-management-panel {
margin-top: 1rem;
}
.mfa-panel-card {
display: grid;
gap: 1rem;
}
.mfa-hero-strip {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
gap: 0.85rem;
align-items: stretch;
}
.mfa-app-support-card {
display: grid;
gap: 0.6rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid var(--panel-border);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 90%, transparent), color-mix(in srgb, var(--surface-card) 92%, transparent)),
var(--surface-panel);
}
.mfa-status-grid,
.mfa-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.mfa-setup-shell {
display: grid;
gap: 0.9rem;
}
.mfa-setup-layout {
display: grid;
grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.05fr);
gap: 0.85rem;
align-items: stretch;
}
.mfa-detail-card {
padding: 1rem;
border-radius: 18px;
border: 1px solid var(--panel-border);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 90%, transparent), color-mix(in srgb, var(--surface-card) 92%, transparent)),
var(--surface-panel);
min-width: 0;
}
.mfa-verify-card {
align-content: start;
}
.mfa-detail-card code {
display: block;
margin-top: 0.75rem;
padding: 0.8rem 0.9rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
color: var(--text);
font-size: 0.84rem;
line-height: 1.55;
overflow-wrap: anywhere;
}
.mfa-qr-card img {
display: block;
width: min(100%, 220px);
aspect-ratio: 1 / 1;
margin: 0.85rem auto 0;
padding: 0.65rem;
box-sizing: border-box;
border-radius: 18px;
background: #f8fafc;
box-shadow: inset 0 0 0 1px rgba(7, 18, 27, 0.06);
}
.mfa-qr-card .form-note {
margin-top: 0.8rem;
}
.mfa-inline-form {
align-items: end;
}
.mfa-verify-card .mfa-inline-form {
margin-top: 0.35rem;
}
.mfa-inline-form input,
.mfa-inline-form button {
grid-column: auto;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.8rem 0.9rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
}
.checkbox-item input {
width: auto;
margin: 0;
}
.settings-checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.8rem;
}
.empty-state {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
gap: 0.5rem;
padding: 1rem 1.05rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.04);
color: var(--muted);
border: 1px dashed rgba(255, 255, 255, 0.08);
}
.empty-state-eyebrow {
margin: 0;
color: color-mix(in srgb, var(--brand) 84%, var(--text));
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.empty-state-title {
color: var(--text-strong);
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1.08rem;
line-height: 1.08;
letter-spacing: 0.02em;
}
.empty-state-copy {
margin: 0;
color: var(--muted-strong);
line-height: 1.58;
max-width: 48ch;
}
.empty-state-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: 0.15rem;
}
.empty-state-button {
min-height: 2.55rem;
}
.section-heading {
margin-bottom: 1rem;
}
.section-heading-spaced {
margin-top: 1.15rem;
}
.section-heading h3 {
font-size: 1.3rem;
}
.module-card-subtle {
padding: 1.15rem;
border-radius: 22px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium-soft);
box-shadow: var(--shadow-soft);
}
.compact-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
margin-bottom: 1.1rem;
padding: 1.05rem 1.1rem 1.15rem;
border-radius: 22px;
border: 1px solid var(--surface-premium-border);
background:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.08), transparent 30%),
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
var(--surface-premium-soft);
box-shadow: var(--surface-premium-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.form-section-card,
.form-section-disclosure {
display: grid;
gap: 0.85rem;
padding: 1rem 1.05rem;
border-radius: 20px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
var(--surface-premium-soft);
box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.form-section-header {
display: grid;
gap: 0.25rem;
}
.operating-standards-section {
grid-column: 1 / -1;
}
.operating-standards-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.standards-fieldset {
margin: 0;
min-width: 0;
padding: 0.9rem 0.95rem 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
rgba(255, 255, 255, 0.015);
}
.standards-fieldset legend {
padding: 0 0.35rem;
color: var(--text);
font-weight: 600;
}
.operating-standards-summary {
display: grid;
gap: 0.8rem;
}
.operating-standards-card {
display: grid;
gap: 0.85rem;
}
.operating-standards-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
.operating-standards-summary-item {
display: grid;
gap: 0.45rem;
}
.form-section-header h4 {
margin: 0;
font-size: 1rem;
line-height: 1.4;
}
.form-section-header .eyebrow {
margin: 0;
}
.form-section-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.form-section-grid .form-field-wide {
grid-column: 1 / -1;
}
.form-section-disclosure summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding-bottom: 0.1rem;
}
.form-section-summary-copy {
display: grid;
gap: 0.22rem;
}
.form-section-disclosure summary small {
color: var(--muted);
line-height: 1.45;
}
.form-section-disclosure summary::after,
.block-packet-disclosure summary::after,
.bulk-import-disclosure summary::after {
width: 1.7rem;
height: 1.7rem;
display: inline-grid;
place-items: center;
border-radius: 999px;
border: 1px solid var(--chip-border);
background: var(--surface-chip);
box-shadow: var(--surface-chip-shadow);
flex: none;
}
.module-content-disclosure {
width: 100%;
scroll-margin-top: 1rem;
}
.module-content-disclosure.focused-disclosure {
border-color: rgba(244, 187, 99, 0.24);
box-shadow:
inset 0 0 0 1px rgba(244, 187, 99, 0.08),
0 18px 38px rgba(0, 0, 0, 0.14);
}
.module-content-disclosure.focused-disclosure > summary {
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.12), rgba(80, 211, 198, 0.06)),
rgba(255, 255, 255, 0.025);
}
.module-content-disclosure > :not(summary) {
margin-top: 0.1rem;
}
.module-content-disclosure + .module-content-disclosure {
margin-top: 0.75rem;
}
.form-section-support {
margin: 0;
}
.compact-form textarea,
.compact-form button {
grid-column: 1 / -1;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.compact-form .input-span-2 {
grid-column: 1 / -1;
}
.intake-stepper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
align-items: stretch;
padding: 0.95rem;
border-radius: 24px;
border: 1px solid var(--surface-premium-border);
background:
radial-gradient(circle at top right, rgba(136, 169, 255, 0.12), transparent 32%),
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium-soft) 96%, transparent),
color-mix(in srgb, var(--surface-card) 94%, transparent)
),
var(--surface-panel);
box-shadow: var(--surface-premium-shadow), var(--surface-inset-shadow);
}
.intake-step-chip {
position: relative;
isolation: isolate;
overflow: hidden;
width: 100%;
padding: 1rem 1.05rem;
border-radius: 20px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium-soft);
color: var(--text);
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
align-items: start;
text-align: left;
cursor: pointer;
transition:
border-color 160ms ease,
transform 160ms ease,
background 160ms ease,
box-shadow 160ms ease;
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
.intake-step-chip::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 34%);
opacity: 0.82;
}
.intake-step-chip > * {
position: relative;
z-index: 1;
}
.intake-step-chip:hover {
transform: translateY(-2px);
border-color: rgba(80, 211, 198, 0.22);
box-shadow: 0 18px 34px rgba(7, 18, 27, 0.14), var(--surface-inset-shadow);
}
.intake-step-chip.active {
border-color: rgba(244, 187, 99, 0.34);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.17), rgba(80, 211, 198, 0.05)),
rgba(255, 255, 255, 0.03);
box-shadow:
0 20px 38px rgba(244, 187, 99, 0.1),
inset 0 0 0 1px rgba(244, 187, 99, 0.1);
}
.intake-step-chip.complete {
border-color: rgba(98, 226, 162, 0.22);
background:
linear-gradient(135deg, rgba(98, 226, 162, 0.12), rgba(80, 211, 198, 0.06)),
rgba(255, 255, 255, 0.03);
}
.intake-step-chip-index {
width: 2.25rem;
height: 2.25rem;
border-radius: 999px;
background: rgba(244, 187, 99, 0.16);
border: 1px solid rgba(244, 187, 99, 0.24);
display: grid;
place-items: center;
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 1.16rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.intake-step-chip strong,
.intake-step-chip small {
display: block;
}
.intake-step-chip strong {
font-size: 1.02rem;
line-height: 1.16;
}
.intake-step-chip small {
margin-top: 0.25rem;
color: var(--muted-strong);
line-height: 1.4;
}
.intake-step-panel {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
padding: 1rem 1.05rem 1.1rem;
border-radius: 22px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium-soft) 96%, transparent),
color-mix(in srgb, var(--surface-card) 94%, transparent)
),
var(--surface-panel);
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
.integration-choice-shell {
display: grid;
gap: 0.8rem;
}
.integration-choice-head {
display: grid;
gap: 0.28rem;
}
.integration-choice-head > span {
color: var(--text);
font-weight: 600;
}
.integration-choice-head > small,
.integration-choice-summary {
color: var(--muted);
line-height: 1.5;
}
.integration-provider-lane-stack {
display: grid;
gap: 0.9rem;
}
.integration-provider-group {
display: grid;
gap: 0.6rem;
}
.integration-provider-group-head {
display: grid;
gap: 0.16rem;
}
.integration-provider-group-head strong {
font-size: 0.9rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.integration-provider-group-head small {
color: var(--muted);
line-height: 1.45;
}
.integration-choice-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.integration-choice-card {
width: 100%;
min-height: 8.75rem;
padding: 0.95rem 1rem 1rem;
border-radius: 20px;
border: 1px solid var(--surface-premium-border);
background:
radial-gradient(circle at top right, rgba(136, 169, 255, 0.1), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
var(--surface-premium-soft);
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
color: var(--text);
display: grid;
gap: 0.45rem;
align-content: start;
text-align: left;
cursor: pointer;
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
}
.integration-choice-card:hover {
transform: translateY(-2px);
border-color: rgba(80, 211, 198, 0.24);
box-shadow: 0 18px 34px rgba(7, 18, 27, 0.14), var(--surface-inset-shadow);
}
.integration-choice-card:focus-visible {
outline: none;
border-color: rgba(244, 187, 99, 0.42);
box-shadow:
0 0 0 3px rgba(244, 187, 99, 0.14),
0 18px 34px rgba(7, 18, 27, 0.14),
var(--surface-inset-shadow);
}
.integration-choice-card.active {
border-color: rgba(244, 187, 99, 0.34);
background:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.12), transparent 34%),
linear-gradient(135deg, rgba(244, 187, 99, 0.15), rgba(80, 211, 198, 0.05)),
rgba(255, 255, 255, 0.03);
box-shadow:
0 20px 38px rgba(244, 187, 99, 0.1),
inset 0 0 0 1px rgba(244, 187, 99, 0.1);
}
.integration-choice-card:disabled,
.integration-choice-card[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.6;
transform: none;
}
.integration-choice-kicker {
color: var(--accent);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.integration-choice-card strong {
font-size: 1.02rem;
line-height: 1.22;
}
.integration-choice-card small {
color: var(--muted);
line-height: 1.45;
}
.integration-choice-native {
position: absolute;
pointer-events: none;
opacity: 0;
}
.integration-choice-summary {
margin: 0;
padding: 0.85rem 0.95rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
rgba(255, 255, 255, 0.015);
}
.intake-step-feedback {
margin: 0.05rem 0 0;
padding: 0.8rem 0.9rem;
border-radius: 16px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(135deg, rgba(80, 211, 198, 0.08), rgba(136, 169, 255, 0.08)),
color-mix(in srgb, var(--surface-card) 94%, transparent);
color: var(--muted-strong);
font-size: 0.92rem;
line-height: 1.5;
box-shadow: var(--surface-inset-shadow);
}
.compact-form-inline {
grid-template-columns: minmax(16rem, 1.4fr) minmax(12rem, 0.8fr);
align-items: end;
}
.compact-form-inline .form-actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.compact-form-inline .form-actions .button {
grid-column: auto;
}
.form-default-card {
display: grid;
gap: 0.75rem;
border-color: rgba(244, 187, 99, 0.22);
background:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.12), transparent 34%),
rgba(255, 255, 255, 0.035);
}
.report-export-defaults {
margin-bottom: 1rem;
}
.evidence-workspace-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.9fr);
gap: 1rem;
}
.evidence-readiness-surface {
display: grid;
gap: 1rem;
overflow: hidden;
}
.evidence-readiness-head,
.evidence-readiness-integrity {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
min-width: 0;
}
.evidence-readiness-head > div,
.evidence-readiness-integrity > div {
min-width: 0;
}
.evidence-readiness-actions {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
justify-content: flex-end;
}
.evidence-readiness-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--calm-gap);
}
.evidence-readiness-integrity {
padding: 1rem;
border-radius: var(--calm-radius);
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at top left, rgba(80, 211, 198, 0.12), transparent 34%),
rgba(255, 255, 255, 0.035);
}
.evidence-readiness-integrity code {
display: block;
max-width: 100%;
color: var(--calm-accent);
font-size: 0.82rem;
line-height: 1.45;
overflow-wrap: anywhere;
white-space: normal;
}
.evidence-readiness-integrity p {
max-width: 28rem;
margin: 0;
color: var(--calm-muted);
line-height: 1.5;
}
.evidence-readiness-groups-head {
margin-bottom: 0;
}
.evidence-readiness-groups {
display: grid;
gap: 0.75rem;
}
.evidence-readiness-group {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
background: rgba(255, 255, 255, 0.035);
overflow: hidden;
}
.evidence-readiness-group summary {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
padding: 0.95rem 1rem;
cursor: pointer;
}
.evidence-readiness-group summary span:first-child {
display: grid;
gap: 0.25rem;
min-width: 0;
}
.evidence-readiness-group summary strong,
.evidence-readiness-group summary small {
overflow-wrap: anywhere;
}
.evidence-readiness-group summary small {
color: var(--calm-muted);
}
.evidence-readiness-group-good {
border-color: rgba(80, 211, 198, 0.18);
}
.evidence-readiness-group-watch {
border-color: rgba(244, 187, 99, 0.22);
}
.evidence-readiness-group-alert {
border-color: rgba(255, 112, 112, 0.24);
}
.evidence-readiness-group-detail {
display: grid;
gap: 0.45rem;
padding: 0 1rem 1rem;
}
.evidence-readiness-meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.evidence-readiness-meta span {
padding: 0.35rem 0.55rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
color: var(--calm-muted);
font-size: 0.78rem;
overflow-wrap: anywhere;
}
.evidence-upload-shell {
display: grid;
gap: 0.5rem;
}
.evidence-upload-shell input[type="file"] {
width: 100%;
padding: 0.8rem 0.9rem;
border-radius: 16px;
border: 1px dashed rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.03);
color: var(--muted);
}
.evidence-vault-card {
min-width: 0;
}
.evidence-detail-drawer {
--detail-drawer-max: min(38rem, 64dvh);
}
.evidence-detail-drawer[open] .compact-form,
.evidence-detail-drawer[open] .evidence-vault-preview {
padding-bottom: 0.35rem;
}
.evidence-register-shell {
display: grid;
gap: 0.9rem;
min-width: 0;
}
.evidence-register-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
gap: 0.9rem;
}
.evidence-register-card {
display: grid;
gap: 0.9rem;
padding: clamp(0.95rem, 1.3vw, 1.2rem);
border: 1px solid color-mix(in srgb, var(--surface-premium-border) 84%, transparent);
border-radius: 24px;
background:
radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 34%),
linear-gradient(150deg, color-mix(in srgb, var(--surface-premium) 92%, var(--surface-card)), var(--surface-premium-strong));
box-shadow: var(--shadow-soft);
}
.evidence-register-card-alert {
border-color: color-mix(in srgb, var(--danger) 34%, var(--surface-premium-border));
}
.evidence-register-card-watch {
border-color: color-mix(in srgb, var(--warning) 34%, var(--surface-premium-border));
}
.evidence-register-card-good {
border-color: color-mix(in srgb, var(--success) 26%, var(--surface-premium-border));
}
.evidence-register-card-main {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: start;
}
.evidence-register-card-main h4 {
margin: 0.1rem 0 0.35rem;
max-width: 34rem;
font-size: clamp(1.05rem, 1.2vw, 1.25rem);
}
.evidence-register-card-main .signal-copy {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.evidence-register-card-actions {
display: flex;
justify-content: flex-end;
}
.evidence-register-card-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.6rem;
}
.evidence-register-card-meta span {
display: grid;
gap: 0.18rem;
min-width: 0;
padding: 0.62rem 0.7rem;
border-radius: 16px;
background: color-mix(in srgb, var(--surface-card) 70%, transparent);
color: var(--muted);
overflow-wrap: anywhere;
}
.evidence-register-card-meta strong {
color: var(--text-muted);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.evidence-record-drawer-open {
overflow: hidden;
}
.evidence-record-drawer {
position: fixed;
inset: 0;
z-index: 1250;
padding: clamp(0.9rem, 2vw, 1.6rem);
overflow: auto;
background:
radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 32%),
radial-gradient(circle at 84% 4%, color-mix(in srgb, var(--warning) 6%, transparent), transparent 28%),
color-mix(in srgb, var(--background) 98%, black);
}
.evidence-record-drawer.hidden {
display: none !important;
}
.evidence-record-drawer-panel {
display: grid;
gap: 1rem;
width: min(118rem, 100%);
min-height: calc(100dvh - clamp(1.8rem, 4vw, 3.2rem));
margin: 0 auto;
}
.evidence-record-drawer-head {
position: sticky;
top: 0;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: start;
padding: clamp(1rem, 1.5vw, 1.35rem);
border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--surface-premium-border));
border-radius: 28px;
background:
linear-gradient(145deg, color-mix(in srgb, var(--surface-premium) 99%, black), color-mix(in srgb, var(--surface-premium-strong) 98%, black));
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.52);
backdrop-filter: none;
}
.evidence-record-drawer-head h2 {
margin: 0.18rem 0 0.35rem;
font-size: clamp(1.55rem, 3vw, 3rem);
}
.evidence-record-drawer-head p:last-child {
max-width: 82ch;
margin: 0;
color: var(--muted);
}
.evidence-record-drawer-close {
white-space: nowrap;
}
.evidence-record-drawer-grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
gap: 1rem;
align-items: start;
}
.evidence-record-drawer-card {
display: grid;
gap: 0.9rem;
min-width: 0;
padding: clamp(1rem, 1.4vw, 1.35rem);
border: 1px solid var(--surface-premium-border);
border-radius: 28px;
background:
radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--surface-accent) 7%, transparent), transparent 34%),
linear-gradient(150deg, color-mix(in srgb, var(--surface-premium) 98%, var(--surface-card)), color-mix(in srgb, var(--surface-premium-strong) 98%, black));
box-shadow: var(--shadow-soft);
}
.evidence-record-drawer-card-wide {
grid-column: 1 / -1;
}
.evidence-record-drawer-actions .inline-actions {
margin-top: 0;
}
.evidence-record-version-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 0.8rem;
}
@media (max-width: 980px) {
.evidence-register-card-main,
.evidence-record-drawer-head,
.evidence-record-drawer-grid {
grid-template-columns: 1fr;
}
.evidence-register-card-actions,
.evidence-record-drawer-close {
width: 100%;
}
.evidence-register-card-actions .button,
.evidence-record-drawer-close {
width: 100%;
}
.evidence-register-card-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.evidence-record-drawer {
padding: 0.65rem;
}
.evidence-record-drawer-head,
.evidence-record-drawer-card,
.evidence-register-card {
border-radius: 20px;
}
.evidence-register-card-meta,
.evidence-vault-meta.evidence-vault-meta-inline {
grid-template-columns: 1fr;
}
.evidence-record-drawer-actions .inline-actions {
display: grid;
}
.evidence-record-drawer-actions .table-action-button,
.evidence-record-drawer-actions .link-button {
width: 100%;
}
}
.evidence-vault-preview,
.evidence-vault-focus {
display: grid;
gap: 0.9rem;
}
.evidence-vault-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.8rem;
}
.evidence-vault-focus-head,
.evidence-version-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: start;
flex-wrap: wrap;
}
.evidence-vault-focus-head h4,
.evidence-version-head h4 {
margin: 0;
}
.evidence-vault-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
min-width: 0;
}
.evidence-vault-meta div {
padding: 0.85rem 0.9rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
min-width: 0;
}
.evidence-vault-meta span {
display: block;
margin-bottom: 0.35rem;
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.evidence-vault-meta strong {
display: block;
overflow-wrap: anywhere;
}
.evidence-vault-history-head {
margin-bottom: 0;
}
.evidence-hash {
margin: 0;
padding: 0.75rem 0.85rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
color: var(--muted);
font-size: 0.8rem;
line-height: 1.5;
overflow-wrap: anywhere;
}
.form-field-wide {
grid-column: 1 / -1;
}
.form-actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
padding-top: 0.4rem;
}
.form-cancel-button {
min-width: 8rem;
}
.compact-form .checkbox-item {
min-height: 100%;
}
.stack {
display: grid;
gap: 0.8rem;
}
.mini-card {
padding: 0.95rem 1rem;
border-radius: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: var(--shadow-soft);
}
.mini-card h4 {
margin: 0 0 0.35rem;
font-size: 1rem;
}
.mini-card p {
margin: 0;
color: var(--muted);
font-size: 0.94rem;
line-height: 1.5;
}
.mini-card-link {
width: 100%;
text-align: left;
border: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease;
}
.mini-card-link:hover {
transform: translateY(-2px);
border-color: rgba(80, 211, 198, 0.24);
}
.reference-insight-card {
display: grid;
gap: 0.8rem;
min-width: 0;
}
.reference-insight-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: flex-start;
}
.reference-insight-metrics {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.reference-insight-metrics span {
border: 1px solid rgba(132, 150, 196, 0.18);
background: rgba(10, 18, 32, 0.36);
border-radius: 999px;
padding: 0.3rem 0.7rem;
color: var(--muted);
font-size: 0.84rem;
}
.reference-insight-actions .table-actions {
margin-top: 0;
}
.table-shell {
overflow: auto;
border: 1px solid var(--surface-premium-border);
border-radius: 20px;
background: var(--surface-table);
box-shadow: var(--shadow-soft);
}
.dossier-table-surface {
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
.dossier-table-surface > .table-shell {
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
.dossier-table-surface table,
.dossier-table-surface thead,
.dossier-table-surface tbody,
.dossier-table-surface tr,
.dossier-table-surface th,
.dossier-table-surface td {
display: block;
}
.dossier-table-surface thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.dossier-table-surface tbody {
display: grid;
gap: 1rem;
}
.dossier-table-surface tr {
display: grid;
grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.35fr) minmax(14rem, 0.8fr);
gap: clamp(0.75rem, 1.6vw, 1rem);
align-items: start;
min-width: 0;
padding: clamp(0.95rem, 2vw, 1.2rem);
border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
border-radius: 26px;
background:
radial-gradient(circle at 8% 0%, rgba(80, 211, 198, 0.1), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
color-mix(in srgb, var(--surface-panel) 92%, transparent);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
.dossier-table-surface td {
min-width: 0;
padding: 0;
border: 0;
overflow-wrap: anywhere;
}
.dossier-table-surface td::before {
content: attr(data-label);
display: block;
margin-bottom: 0.38rem;
color: var(--accent-2);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.13em;
line-height: 1.35;
text-transform: uppercase;
}
.dossier-table-surface td:last-child {
grid-column: 1 / -1;
align-self: auto;
padding-top: 0.8rem;
border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.dossier-table-surface .table-actions,
.dossier-table-surface .inline-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.dossier-table-surface .table-action-button,
.dossier-table-surface .button {
min-height: 2.3rem;
}
.risk-register-list {
display: grid;
gap: 1rem;
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
.risk-register-card-stack {
display: grid;
gap: 1rem;
}
.risk-register-pager,
.register-pager {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
padding: 0.75rem 0.85rem;
border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
border-radius: 20px;
background: rgba(255, 255, 255, 0.028);
}
#compliance-table .register-pager {
margin-block: 0.75rem;
}
#compliance-table .register-pager-top {
margin-top: 0;
}
.report-readiness-grid .register-pager {
margin-block: 0.75rem;
}
.report-readiness-grid .register-pager-top {
margin-top: 0;
}
.risk-register-pager p,
.risk-register-pager span,
.register-pager p,
.register-pager span {
margin: 0;
color: var(--muted);
}
.risk-register-pager-actions,
.register-pager-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
justify-content: flex-end;
}
.risk-register-pager .button,
.register-pager .button {
min-height: 2.25rem;
}
.risk-register-card {
display: grid;
gap: clamp(0.9rem, 1.5vw, 1.15rem);
min-width: 0;
padding: clamp(1rem, 2vw, 1.35rem);
border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
border-radius: 28px;
background:
radial-gradient(circle at 8% 0%, rgba(80, 211, 198, 0.08), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.014)),
color-mix(in srgb, var(--surface-panel) 94%, black);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}
.risk-register-card-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: start;
}
.risk-register-card-head h4 {
max-width: 72ch;
margin: 0.18rem 0 0;
font-size: clamp(1.05rem, 1.8vw, 1.45rem);
line-height: 1.25;
}
.risk-register-code,
.risk-register-section-label {
margin: 0;
color: var(--accent-2);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.risk-register-status-row {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.55rem;
}
.risk-register-card-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.55fr);
gap: clamp(1rem, 2vw, 1.4rem);
align-items: start;
}
.risk-register-main,
.risk-register-side {
display: grid;
gap: 0.95rem;
min-width: 0;
}
.risk-register-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.72rem;
}
.risk-register-meta-grid span,
.risk-register-counts span {
display: grid;
gap: 0.18rem;
min-width: 0;
color: var(--text);
}
.risk-register-meta-grid strong,
.risk-register-counts strong,
.risk-register-section-label {
color: var(--muted);
}
.risk-register-treatment,
.risk-register-accountability,
.risk-register-residual {
display: grid;
gap: 0.5rem;
min-width: 0;
padding: 0.9rem;
border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
border-radius: 22px;
background: rgba(255, 255, 255, 0.026);
}
.risk-register-treatment p,
.risk-register-accountability p,
.risk-register-residual p {
margin: 0;
}
.risk-register-muted,
.risk-register-accountability p,
.risk-register-residual p {
color: var(--muted);
}
.risk-register-counts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.65rem;
}
.risk-register-next-move {
justify-self: start;
min-height: 2.35rem;
}
.risk-register-actions .table-actions {
margin-top: 0;
}
.risk-register-actions {
padding-top: 0.75rem;
border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.incident-register-list {
display: grid;
gap: 1rem;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.incident-workspace-grid {
grid-template-columns: minmax(34rem, 1.15fr) minmax(24rem, 0.85fr);
align-items: start;
}
.incident-workspace-grid > .module-card {
min-width: 0;
}
.incident-register-card-stack {
display: grid;
gap: 1rem;
}
.incident-register-card {
position: relative;
isolation: isolate;
display: grid;
gap: 1rem;
padding: clamp(1rem, 1.8vw, 1.25rem);
border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
border-radius: 26px;
background:
radial-gradient(circle at 6% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 34%),
linear-gradient(
135deg,
color-mix(in srgb, var(--surface-elevated) 94%, transparent),
color-mix(in srgb, var(--surface-panel) 96%, transparent)
),
var(--surface-card);
box-shadow: 0 18px 44px rgba(6, 12, 24, 0.14), var(--surface-inset-shadow);
}
.incident-register-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(110deg, rgba(255, 255, 255, 0.06), transparent 36%);
opacity: 0.75;
pointer-events: none;
}
.incident-register-card-alert {
border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
}
.incident-register-card-watch {
border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
}
.incident-register-card-good {
border-color: color-mix(in srgb, var(--success) 28%, var(--line));
}
.incident-register-card-neutral {
border-color: color-mix(in srgb, var(--info) 24%, var(--line));
}
.incident-register-main,
.incident-register-accountability {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.incident-register-heading {
display: grid;
gap: 0.35rem;
}
.incident-register-heading h4 {
margin: 0;
max-width: 46rem;
font-size: clamp(1.18rem, 1.45vw, 1.4rem);
line-height: 1.12;
}
.incident-register-heading .controls-panel-copy {
max-width: 64rem;
}
.incident-register-status,
.incident-register-actions .table-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-start;
}
.incident-register-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.65rem;
}
.incident-register-meta span,
.incident-register-accountability span {
display: grid;
gap: 0.22rem;
min-width: 0;
padding: 0.72rem 0.82rem;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 16px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 74%, transparent), transparent),
var(--surface-panel);
color: var(--muted);
}
.incident-register-meta strong,
.incident-register-accountability strong {
color: var(--text-strong);
font-size: 0.78rem;
letter-spacing: 0.08em;
line-height: 1.2;
text-transform: uppercase;
}
.incident-register-accountability {
grid-template-columns: minmax(14rem, 1fr) repeat(2, minmax(8rem, 0.36fr));
}
.incident-register-next-move {
border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}
.incident-register-actions {
padding-top: 0.85rem;
border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
}
@media (max-width: 1180px) {
.incident-workspace-grid {
grid-template-columns: 1fr;
}
.dossier-table-surface tr {
grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.72fr);
}
.dossier-table-surface td:last-child {
grid-column: 1 / -1;
grid-row: auto;
}
.risk-register-card-body {
grid-template-columns: 1fr;
}
.incident-register-main {
grid-template-columns: 1fr;
}
.incident-register-accountability {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
}
@media (max-width: 760px) {
.dossier-table-surface tr {
grid-template-columns: minmax(0, 1fr);
padding: 0.9rem;
}
.dossier-table-surface td:last-child {
padding-top: 0.7rem;
}
.dossier-table-surface .table-action-button,
.dossier-table-surface .button {
width: 100%;
}
.risk-register-card {
padding: 0.95rem;
border-radius: 22px;
}
.risk-register-pager,
.register-pager {
grid-template-columns: 1fr;
}
.risk-register-pager-actions,
.register-pager-actions {
justify-content: stretch;
}
.risk-register-pager .button,
.register-pager .button {
flex: 1 1 8rem;
}
.risk-register-card-head,
.risk-register-meta-grid,
.risk-register-counts {
grid-template-columns: 1fr;
}
.risk-register-status-row {
justify-content: flex-start;
}
.risk-register-actions .table-actions,
.risk-register-actions .table-action-button {
width: 100%;
}
.incident-register-card {
padding: 0.95rem;
border-radius: 22px;
}
.incident-register-actions .table-actions {
justify-content: flex-start;
}
.incident-register-actions .table-action-button,
.incident-register-actions .button {
width: 100%;
}
}
/* Compact work surface density */
.discovery-workbench-screen .systems-intake-shell {
grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.56fr);
}
.discovery-workbench-screen .discovery-register-panel {
grid-column: 1 / -1;
width: 100%;
max-width: none;
}
.discovery-workbench-screen #discovery-table.table-shell {
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
.discovery-intake-map {
display: grid;
gap: 1rem;
}
.discovery-intake-map .controls-panel-copy {
max-width: 76rem;
margin: 0;
}
.discovery-intake-decision-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.7rem;
}
.discovery-intake-decision-strip article {
display: grid;
gap: 0.42rem;
min-width: 0;
padding: 0.85rem;
border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
border-radius: 18px;
background:
linear-gradient(145deg, color-mix(in srgb, var(--surface-soft) 82%, transparent), color-mix(in srgb, var(--surface-card) 96%, transparent)),
var(--surface-card);
}
.discovery-intake-decision-strip span {
color: var(--accent);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.discovery-intake-decision-strip strong {
color: var(--text-strong);
line-height: 1.18;
}
.discovery-intake-decision-strip small {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.35;
}
.discovery-intake-map-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.8rem;
}
.discovery-intake-map-card {
display: grid;
gap: 0.58rem;
align-content: start;
min-width: 0;
min-height: 12.5rem;
padding: 1rem;
text-align: left;
color: var(--text);
border: 1px solid var(--line);
border-radius: 20px;
background:
linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated) 90%, transparent), color-mix(in srgb, var(--surface-soft) 96%, transparent)),
var(--surface-card);
box-shadow: var(--shadow-soft);
cursor: pointer;
transition:
border-color var(--motion-fast) ease,
box-shadow var(--motion-fast) ease,
transform var(--motion-fast) ease;
}
.discovery-intake-map-card:hover,
.discovery-intake-map-card:focus-visible {
border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 16%, transparent);
transform: translateY(-1px);
}
.discovery-intake-map-card-primary {
border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
background:
linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated) 84%, var(--brand) 16%), color-mix(in srgb, var(--surface-soft) 90%, transparent)),
var(--surface-card);
}
.discovery-intake-map-card strong {
min-width: 0;
color: var(--text-strong);
font-size: clamp(1rem, 0.45vw + 0.94rem, 1.15rem);
line-height: 1.18;
overflow-wrap: anywhere;
}
.discovery-intake-map-card small {
color: var(--muted);
font-size: 0.86rem;
line-height: 1.38;
overflow-wrap: anywhere;
}
.discovery-intake-map-cta {
align-self: end;
justify-self: start;
margin-top: 0.15rem;
color: var(--accent);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.discovery-signal-journey {
display: grid;
gap: 0.9rem;
padding: clamp(0.95rem, 1.2vw, 1.25rem);
border: 1px solid color-mix(in srgb, var(--surface-premium-border) 82%, transparent);
border-radius: 24px;
background:
radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
linear-gradient(135deg, color-mix(in srgb, var(--surface-elevated) 88%, transparent), color-mix(in srgb, var(--surface-card) 94%, transparent)),
var(--surface-panel);
box-shadow: var(--shadow-soft);
}
.discovery-signal-journey .controls-panel-copy {
max-width: 64rem;
margin: 0.25rem 0 0;
}
.discovery-signal-journey-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.7rem;
}
.discovery-signal-journey-step {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.35rem 0.55rem;
align-items: start;
min-width: 0;
padding: 0.85rem;
text-align: left;
color: var(--text);
border: 1px solid var(--line);
border-radius: 18px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 90%, transparent), color-mix(in srgb, var(--surface-soft) 96%, transparent)),
var(--surface-card);
cursor: pointer;
transition:
border-color var(--motion-fast) ease,
box-shadow var(--motion-fast) ease,
transform var(--motion-fast) ease;
}
.discovery-signal-journey-step::after {
content: "";
position: absolute;
top: 50%;
right: -0.58rem;
width: 0.46rem;
height: 0.46rem;
border-top: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
border-right: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
transform: translateY(-50%) rotate(45deg);
}
.discovery-signal-journey-step:last-child::after {
display: none;
}
.discovery-signal-journey-step:hover,
.discovery-signal-journey-step:focus-visible,
.discovery-signal-journey-step.is-active {
border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 14%, transparent);
transform: translateY(-1px);
}
.discovery-signal-journey-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 999px;
color: var(--text-strong);
font-size: 0.78rem;
font-weight: 900;
background: color-mix(in srgb, var(--surface-elevated) 86%, transparent);
border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
}
.discovery-signal-journey-step strong {
min-width: 0;
color: var(--text-strong);
font-size: 1rem;
line-height: 1.12;
overflow-wrap: anywhere;
}
.discovery-signal-journey-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
padding: 0.2rem 0.46rem;
border-radius: 999px;
color: var(--text-strong);
font-size: 0.82rem;
font-weight: 900;
background: color-mix(in srgb, var(--brand) 20%, transparent);
border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
}
.discovery-signal-journey-step small {
grid-column: 1 / -1;
color: var(--muted);
font-size: 0.85rem;
line-height: 1.36;
overflow-wrap: anywhere;
}
.discovery-signal-journey-cta {
grid-column: 1 / -1;
color: var(--accent);
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.discovery-feed-routes {
display: grid;
gap: 0.85rem;
padding: clamp(0.95rem, 1.2vw, 1.25rem);
border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
border-radius: 24px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--surface-elevated) 91%, transparent), color-mix(in srgb, var(--surface-card) 96%, transparent)),
var(--surface-card);
box-shadow: var(--shadow-soft);
}
.discovery-feed-routes .controls-panel-copy {
max-width: 72rem;
margin: 0.25rem 0 0;
}
.discovery-feed-route-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 0.64rem;
}
.discovery-feed-route {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.55rem 0.7rem;
align-items: start;
min-width: 0;
padding: 0.78rem;
text-align: left;
color: var(--text);
border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
border-radius: 18px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 90%, transparent), color-mix(in srgb, var(--surface-soft) 96%, transparent)),
var(--surface-card);
cursor: pointer;
transition:
border-color var(--motion-fast) ease,
box-shadow var(--motion-fast) ease,
transform var(--motion-fast) ease;
}
.discovery-feed-route:hover,
.discovery-feed-route:focus-visible {
border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
box-shadow: 0 18px 42px color-mix(in srgb, var(--accent) 12%, transparent);
transform: translateY(-1px);
}
.discovery-feed-route-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.15rem;
height: 2.15rem;
border-radius: 999px;
color: var(--text-strong);
font-size: 0.78rem;
font-weight: 900;
background: color-mix(in srgb, var(--brand) 18%, var(--surface-elevated));
border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
}
.discovery-feed-route-body {
display: grid;
gap: 0.22rem;
min-width: 0;
}
.discovery-feed-route-body small,
.discovery-feed-route-cta {
color: var(--accent);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.09em;
line-height: 1.2;
text-transform: uppercase;
}
.discovery-feed-route-body strong {
color: var(--text-strong);
font-size: 0.98rem;
line-height: 1.16;
overflow-wrap: anywhere;
}
.discovery-feed-route-body em {
color: var(--muted);
font-size: 0.82rem;
font-style: normal;
line-height: 1.32;
overflow-wrap: anywhere;
}
.discovery-feed-route-cta {
grid-column: 2;
align-self: end;
color: var(--brand);
}
.work-surface-command-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.9rem;
align-items: center;
padding: 0.85rem 1rem;
}
.discovery-command-queue-shell.work-surface-command-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
margin: 0;
}
.discovery-workbench-screen .discovery-command-queue-shell.work-surface-command-strip {
grid-template-columns: minmax(18rem, 1fr) max-content;
}
.work-surface-command-strip > div:first-child {
min-width: 0;
}
.work-surface-command-strip .eyebrow {
margin-bottom: 0.25rem;
}
.work-surface-command-strip .dashboard-focus-copy {
max-width: none;
margin: 0;
line-height: 1.4;
}
.work-surface-command-strip .discovery-command-queue-actions {
flex: 0 0 auto;
align-items: center;
}
.work-surface-command-strip .table-action-button {
min-height: 2.6rem;
white-space: nowrap;
}
.work-surface-filter-row {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
padding: 0;
}
.discovery-command-filter-bar.work-surface-filter-row {
display: flex;
margin: 0;
}
.work-surface-filter-row .button {
min-height: 2.25rem;
padding: 0.36rem 0.65rem;
border-radius: 999px;
font-size: 0.82rem;
line-height: 1.2;
}
.work-surface-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
gap: 0.8rem;
padding: 0;
}
.discovery-register.work-surface-card-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
gap: 0.8rem;
padding: 0;
}
.discovery-register.discovery-command-list {
grid-template-columns: 1fr;
gap: 0.62rem;
}
.work-surface-card-grid .discovery-signal-card {
min-width: 0;
padding: 0.95rem;
border-radius: 19px;
}
.discovery-command-list .discovery-signal-card {
grid-template-columns: 1fr;
align-items: stretch;
gap: 0.72rem;
padding: 0.9rem;
}
.discovery-command-list .discovery-signal-card-head {
display: flex;
gap: 0.7rem;
align-items: flex-start;
justify-content: space-between;
}
.discovery-command-list .discovery-signal-title {
font-size: clamp(1.02rem, 0.82vw + 0.92rem, 1.2rem);
}
.discovery-command-list .discovery-signal-provider {
margin-top: 0.24rem;
font-size: 0.9rem;
}
.discovery-command-list .discovery-signal-badges {
justify-content: flex-start;
}
.discovery-decision-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
gap: 0.55rem;
}
.discovery-quick-fact {
display: grid;
gap: 0.24rem;
min-width: 0;
padding: 0.68rem 0.75rem;
border: 1px solid var(--line);
border-radius: 16px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 86%, transparent), color-mix(in srgb, var(--surface-soft) 94%, transparent)),
var(--surface-card);
}
.discovery-quick-fact span {
color: var(--brand);
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.discovery-quick-fact strong {
min-width: 0;
color: var(--text-strong);
font-size: 0.96rem;
line-height: 1.18;
overflow-wrap: anywhere;
}
.discovery-quick-fact small {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.32;
overflow-wrap: anywhere;
}
.discovery-next-move-row {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
}
.discovery-next-move-row .table-subtle {
margin-top: 0;
}
.discovery-command-list .discovery-signal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.48rem;
}
.discovery-command-list .discovery-signal-panel {
padding: 0.64rem 0.72rem;
}
.discovery-command-list .discovery-card-actions-shell {
min-width: 0;
align-self: stretch;
padding-top: 0.65rem;
border-top: 1px solid var(--line);
}
.discovery-command-list .discovery-card-action-band {
display: grid;
gap: 0.42rem;
}
.discovery-command-list .discovery-card-actions-shell .inline-actions {
gap: 0.42rem;
}
.discovery-command-list .discovery-card-actions-shell .table-action-button {
min-height: 2.35rem;
}
.discovery-card-context {
padding-top: 0.2rem;
}
.discovery-card-context .discovery-signal-grid {
margin-top: 0.65rem;
}
.work-surface-card-grid .discovery-signal-title {
font-size: clamp(1.12rem, 1vw + 0.95rem, 1.35rem);
}
.work-surface-card-grid .discovery-signal-grid {
grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
gap: 0.65rem;
}
.work-surface-card-grid .discovery-signal-panel {
padding: 0.78rem 0.85rem;
border-radius: 15px;
}
.work-surface-card-grid .discovery-card-actions-shell {
gap: 0.6rem;
}
@media (min-width: 1180px) {
.discovery-workbench-screen .discovery-register.discovery-command-list {
gap: 0.78rem;
}
.discovery-workbench-screen .discovery-command-list .discovery-signal-card {
grid-template-columns: minmax(14rem, 0.9fr) minmax(22rem, 1.35fr) minmax(17rem, 0.82fr);
grid-template-areas:
"head facts actions"
"next facts actions"
"detail detail detail";
align-items: stretch;
padding: clamp(0.95rem, 1.2vw, 1.18rem);
}
.discovery-workbench-screen .discovery-command-list .discovery-signal-card-head {
grid-area: head;
display: grid;
align-content: start;
}
.discovery-workbench-screen .discovery-command-list .discovery-signal-badges {
justify-content: flex-start;
}
.discovery-workbench-screen .discovery-command-list .discovery-decision-strip {
grid-area: facts;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-content: stretch;
}
.discovery-workbench-screen .discovery-command-list .discovery-next-move-row {
grid-area: next;
align-self: end;
}
.discovery-workbench-screen .discovery-command-list .discovery-card-actions-shell {
grid-area: actions;
align-content: start;
min-width: 0;
padding: 0 0 0 0.9rem;
border-top: 0;
border-left: 1px solid var(--line);
}
.discovery-workbench-screen .discovery-command-list .discovery-card-context {
grid-area: detail;
}
.discovery-workbench-screen .discovery-command-list .discovery-card-context .discovery-signal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1180px) {
.discovery-intake-map-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.discovery-signal-journey-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.discovery-signal-journey-step:nth-child(2)::after {
display: none;
}
}
@media (max-width: 760px) {
.discovery-workbench-screen .systems-intake-shell {
grid-template-columns: 1fr;
}
.discovery-intake-map-grid {
grid-template-columns: 1fr;
}
.discovery-signal-journey-grid {
grid-template-columns: 1fr;
}
.discovery-signal-journey-step::after {
display: none;
}
.discovery-feed-route-grid {
grid-template-columns: 1fr;
}
.discovery-intake-map-card {
min-height: 0;
}
.discovery-workbench-screen .discovery-command-queue-shell.work-surface-command-strip {
grid-template-columns: 1fr;
}
.work-surface-command-strip {
grid-template-columns: 1fr;
align-items: stretch;
}
.work-surface-command-strip .discovery-command-queue-actions,
.work-surface-command-strip .table-action-button {
width: 100%;
}
.work-surface-filter-row {
display: grid;
grid-template-columns: 1fr;
}
.work-surface-card-grid {
grid-template-columns: 1fr;
}
.discovery-command-list .discovery-signal-card {
grid-template-columns: 1fr;
}
.discovery-command-list .discovery-card-actions-shell {
min-width: 0;
}
.discovery-command-list .discovery-signal-card-head {
display: grid;
}
.discovery-command-list .discovery-card-actions-shell .table-action-button {
width: 100%;
}
}
.discovery-register {
display: grid;
gap: 1rem;
padding: 1rem;
}
.discovery-command-queue-shell {
margin: 0 1rem;
display: flex;
justify-content: space-between;
gap: 0.9rem;
align-items: flex-start;
flex-wrap: wrap;
}
.discovery-command-queue-actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.discovery-command-filter-bar {
margin: 0 1rem;
}
.discovery-signal-card {
display: grid;
gap: 1rem;
padding: 1.1rem;
border-radius: 22px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-premium-soft);
box-shadow: var(--shadow-soft);
}
.discovery-signal-card-head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
flex-wrap: wrap;
}
.discovery-signal-title-block {
min-width: 0;
flex: 1 1 18rem;
}
.discovery-signal-title-block .eyebrow {
margin-bottom: 0.45rem;
}
.discovery-signal-title {
margin: 0;
font-size: 1.45rem;
line-height: 1.05;
overflow-wrap: anywhere;
}
.discovery-signal-provider {
margin: 0.45rem 0 0;
color: var(--muted);
font-size: 1rem;
line-height: 1.5;
overflow-wrap: anywhere;
}
.discovery-signal-badges {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
justify-content: flex-end;
align-items: center;
}
.discovery-signal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.discovery-signal-panel {
display: grid;
gap: 0.35rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.025);
}
.discovery-signal-panel .eyebrow {
margin-bottom: 0.15rem;
}
.discovery-signal-panel strong {
font-size: 1rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.discovery-card-actions-shell {
display: grid;
gap: 0.75rem;
}
.discovery-card-action-band {
display: grid;
gap: 0.55rem;
}
.discovery-card-action-label {
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.discovery-card-more {
padding-top: 0.15rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.discovery-card-more summary {
display: inline-flex;
align-items: center;
gap: 0.55rem;
cursor: pointer;
list-style: none;
color: var(--muted);
font-size: 0.94rem;
}
.discovery-card-more summary::-webkit-details-marker {
display: none;
}
.discovery-card-more summary::before {
content: "+";
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--brand);
font-size: 1rem;
line-height: 1;
}
.discovery-card-more[open] summary::before {
content: "−";
}
.discovery-card-action-band-secondary {
margin-top: 0.75rem;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
line-height: 1.5;
background: transparent;
}
th,
td {
text-align: left;
padding: 0.95rem 1rem;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
th {
color: var(--brand);
font-family: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.82rem;
position: sticky;
top: 0;
background: var(--surface-table-head);
backdrop-filter: blur(16px);
z-index: 1;
}
td {
color: var(--text);
font-size: 0.94rem;
min-width: 0;
overflow-wrap: anywhere;
background: color-mix(in srgb, var(--surface-card) 76%, transparent);
}
tbody tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.012);
}
tbody tr:hover td {
background: rgba(255, 255, 255, 0.02);
}
.status {
display: inline-flex;
align-items: center;
gap: 0.45rem;
white-space: nowrap;
min-height: 2rem;
padding: 0.32rem 0.72rem;
border-radius: 999px;
border: 1px solid var(--chip-border);
background: var(--surface-status);
box-shadow: var(--surface-chip-shadow);
font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.status::before {
content: "";
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
background: var(--brand-2);
box-shadow: 0 0 0 0.18rem color-mix(in srgb, currentColor 10%, transparent);
}
.status.high::before,
.status.critical::before {
background: var(--danger);
}
.status.medium::before {
background: var(--brand);
}
.status.low::before,
.status.active::before,
.status.accepted::before,
.status.closed::before {
background: var(--success);
}
.status.implemented::before {
background: var(--success);
}
.status.in_progress::before,
.status.monitoring::before {
background: var(--brand);
}
.status.pending::before,
.status.warning::before {
background: var(--brand);
}
.status.approved::before {
background: var(--success);
}
.status.applicable::before {
background: var(--success);
}
.status.conditional::before {
background: var(--brand);
}
.status.not_applicable::before,
.status.planned::before {
background: rgba(157, 176, 191, 0.8);
}
.status.rejected::before,
.status.expired::before {
background: var(--danger);
}
.status.gap::before,
.status.blocked::before {
background: var(--danger);
}
.table-subtle {
margin-top: 0.35rem;
color: var(--muted);
line-height: 1.45;
font-size: 0.9rem;
}
.incident-focus-card {
display: grid;
gap: 1rem;
}
.incident-focus-head,
.incident-timeline-head {
display: flex;
justify-content: space-between;
gap: 0.9rem;
align-items: flex-start;
}
.incident-focus-badges {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.incident-accountability-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.85rem;
}
.incident-accountability-card {
display: grid;
gap: 0.35rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid var(--line);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 88%, transparent), color-mix(in srgb, var(--surface-soft) 92%, transparent)),
var(--surface-panel);
box-shadow: 0 12px 32px rgba(6, 12, 24, 0.12);
}
.incident-accountability-card strong {
color: var(--text-strong);
font-size: 1.05rem;
line-height: 1.2;
}
.incident-accountability-card .signal-copy {
margin: 0;
}
.incident-accountability-card-good {
border-color: color-mix(in srgb, var(--success) 26%, var(--line));
}
.incident-accountability-card-watch {
border-color: color-mix(in srgb, var(--warning) 32%, var(--line));
box-shadow: 0 14px 34px rgba(244, 187, 99, 0.08);
}
.incident-accountability-card-alert {
border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
box-shadow: 0 16px 38px rgba(255, 122, 122, 0.08);
}
.incident-accountability-card-neutral {
border-color: color-mix(in srgb, var(--info) 24%, var(--line));
}
.incident-meta-grid,
.incident-copy-grid {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.incident-meta-grid span {
border: 1px solid rgba(132, 150, 196, 0.18);
background: rgba(10, 18, 32, 0.36);
border-radius: 16px;
padding: 0.75rem 0.85rem;
color: var(--muted);
}
.incident-timeline-item {
gap: 0.75rem;
}
.framework-card {
padding: 1rem;
border-radius: 18px;
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
}
.framework-card summary {
cursor: pointer;
list-style: none;
}
.framework-card summary::-webkit-details-marker {
display: none;
}
.framework-card h4,
.framework-item-title {
margin: 0;
}
.framework-item-list {
display: grid;
gap: 0.65rem;
margin-top: 1rem;
}
.framework-item {
padding-top: 0.65rem;
border-top: 1px solid var(--line);
}
.framework-item code {
color: var(--brand);
}
.wizard-shell {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
gap: 1rem;
margin-bottom: 1rem;
padding: 1.15rem 1.2rem 1.2rem;
border-radius: 26px;
border: 1px solid var(--surface-premium-border);
background:
radial-gradient(circle at top right, rgba(244, 187, 99, 0.12), transparent 32%),
radial-gradient(circle at left center, rgba(80, 211, 198, 0.1), transparent 36%),
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium) 96%, transparent),
color-mix(in srgb, var(--surface-card) 94%, transparent)
),
var(--surface-panel);
box-shadow: var(--surface-premium-shadow), var(--surface-inset-shadow);
}
.wizard-shell::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 26%),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 34%);
opacity: 0.8;
}
.wizard-shell > * {
position: relative;
z-index: 1;
}
.wizard-toolbar {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: start;
}
.wizard-toolbar h4,
.wizard-phase h4,
.wizard-summary-card h4 {
margin: 0;
}
.wizard-toolbar-actions {
min-width: 18rem;
display: grid;
gap: 0.75rem;
}
.wizard-summary {
display: grid;
}
.wizard-summary-card {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 1.05rem 1.1rem;
border-radius: 22px;
border: 1px solid var(--surface-premium-border);
background:
radial-gradient(circle at top right, rgba(136, 169, 255, 0.14), transparent 32%),
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium-soft) 96%, transparent),
color-mix(in srgb, var(--surface-card) 94%, transparent)
),
var(--surface-panel);
display: grid;
gap: 0.85rem;
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
.wizard-summary-card::before,
.wizard-phase::before,
.wizard-step::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 36%);
opacity: 0.76;
}
.wizard-summary-card > *,
.wizard-phase > *,
.wizard-step > * {
position: relative;
z-index: 1;
}
.wizard-summary-head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: start;
flex-wrap: wrap;
}
.wizard-progress-track {
position: relative;
overflow: hidden;
height: 1rem;
border-radius: 999px;
background: color-mix(in srgb, var(--surface-card) 84%, transparent);
border: 1px solid color-mix(in srgb, var(--panel-border) 78%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.wizard-progress-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
box-shadow: 0 0 20px color-mix(in srgb, var(--brand-2) 28%, transparent);
width: var(--ui-percent, 0%);
}
.ui-percent-0 { --ui-percent: 0%; }
.ui-percent-5 { --ui-percent: 5%; }
.ui-percent-10 { --ui-percent: 10%; }
.ui-percent-15 { --ui-percent: 15%; }
.ui-percent-20 { --ui-percent: 20%; }
.ui-percent-25 { --ui-percent: 25%; }
.ui-percent-30 { --ui-percent: 30%; }
.ui-percent-35 { --ui-percent: 35%; }
.ui-percent-40 { --ui-percent: 40%; }
.ui-percent-45 { --ui-percent: 45%; }
.ui-percent-50 { --ui-percent: 50%; }
.ui-percent-55 { --ui-percent: 55%; }
.ui-percent-60 { --ui-percent: 60%; }
.ui-percent-65 { --ui-percent: 65%; }
.ui-percent-70 { --ui-percent: 70%; }
.ui-percent-75 { --ui-percent: 75%; }
.ui-percent-80 { --ui-percent: 80%; }
.ui-percent-85 { --ui-percent: 85%; }
.ui-percent-90 { --ui-percent: 90%; }
.ui-percent-95 { --ui-percent: 95%; }
.ui-percent-100 { --ui-percent: 100%; }
.ui-strength-0 { --cell-strength: 0.00; }
.ui-strength-5 { --cell-strength: 0.05; }
.ui-strength-10 { --cell-strength: 0.10; }
.ui-strength-15 { --cell-strength: 0.15; }
.ui-strength-20 { --cell-strength: 0.20; }
.ui-strength-25 { --cell-strength: 0.25; }
.ui-strength-30 { --cell-strength: 0.30; }
.ui-strength-35 { --cell-strength: 0.35; }
.ui-strength-40 { --cell-strength: 0.40; }
.ui-strength-45 { --cell-strength: 0.45; }
.ui-strength-50 { --cell-strength: 0.50; }
.ui-strength-55 { --cell-strength: 0.55; }
.ui-strength-60 { --cell-strength: 0.60; }
.ui-strength-65 { --cell-strength: 0.65; }
.ui-strength-70 { --cell-strength: 0.70; }
.ui-strength-75 { --cell-strength: 0.75; }
.ui-strength-80 { --cell-strength: 0.80; }
.ui-strength-85 { --cell-strength: 0.85; }
.ui-strength-90 { --cell-strength: 0.90; }
.ui-strength-95 { --cell-strength: 0.95; }
.ui-strength-100 { --cell-strength: 1.00; }
.wizard-summary-metrics {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
color: var(--muted);
font-size: 0.92rem;
}
.wizard-next-step {
margin: 0;
color: var(--text);
}
.wizard-phase-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.9rem;
}
.wizard-phase {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 1.05rem 1.1rem;
border-radius: 22px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-premium-soft) 96%, transparent),
color-mix(in srgb, var(--surface-card) 94%, transparent)
),
var(--surface-panel);
display: grid;
gap: 0.85rem;
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
.wizard-phase-head,
.wizard-step-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: start;
flex-wrap: wrap;
}
.wizard-summary-head > div,
.wizard-phase-head > div,
.wizard-step-head > div {
min-width: 0;
flex: 1 1 18rem;
}
.wizard-summary-head .pill,
.wizard-phase-head .pill,
.wizard-step-head .status {
flex: 0 0 auto;
}
.wizard-phase-copy {
margin: 0;
color: var(--muted);
line-height: 1.55;
}
.wizard-step-list {
display: grid;
gap: 0.75rem;
}
.wizard-step {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 0.95rem 1rem;
border-radius: 20px;
border: 1px solid var(--surface-premium-border);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-card) 96%, transparent),
color-mix(in srgb, var(--surface-soft) 94%, transparent)
),
var(--surface-panel);
display: grid;
gap: 0.7rem;
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
.framework-item-title,
.wizard-next-step {
overflow-wrap: anywhere;
}
.compliance-toolbar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.compliance-filter-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin: -0.15rem 0 1rem;
padding: 0.75rem 0.85rem;
border: 1px solid color-mix(in srgb, var(--surface-premium-border) 88%, transparent);
border-radius: 18px;
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--surface-card) 98%, transparent),
color-mix(in srgb, var(--surface-soft) 96%, transparent)
),
var(--surface-panel);
box-shadow: var(--surface-inset-shadow);
}
.compliance-filter-summary-copy {
display: grid;
gap: 0.45rem;
min-width: 0;
}
.compliance-filter-summary-copy strong {
color: var(--text);
}
.compliance-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.compliance-filter-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
max-width: 100%;
padding: 0.35rem 0.58rem;
border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--surface-premium-border));
border-radius: 999px;
background: color-mix(in srgb, var(--brand) 8%, var(--surface-elevated));
color: var(--muted);
font-size: 0.82rem;
}
.compliance-filter-chip strong {
max-width: min(32rem, 54vw);
overflow: hidden;
color: var(--text);
text-overflow: ellipsis;
white-space: nowrap;
}
.compliance-filter-chip-muted {
border-color: var(--surface-premium-border);
background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
}
.compliance-filter-clear {
flex: 0 0 auto;
}
.framework-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
margin-bottom: 1rem;
}
.framework-summary-card {
width: 100%;
text-align: left;
padding: 1rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.03);
color: var(--text);
display: grid;
gap: 0.75rem;
}
.framework-summary-card.active {
border-color: rgba(244, 187, 99, 0.32);
background:
linear-gradient(135deg, rgba(244, 187, 99, 0.18), rgba(80, 211, 198, 0.08)),
rgba(255, 255, 255, 0.04);
}
.framework-summary-head {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: start;
}
.framework-summary-head h4 {
margin: 0;
}
.framework-summary-copy {
margin: 0;
color: var(--muted);
line-height: 1.55;
}
.framework-summary-metrics {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
color: var(--muted);
font-size: 0.9rem;
}
.controls-framework-posture {
display: grid;
gap: 1rem;
border-color: var(--calm-border);
background: var(--calm-surface);
color: var(--calm-text);
}
.controls-framework-row-list {
display: grid;
gap: 0.8rem;
}
.controls-framework-row {
overflow: hidden;
border: 1px solid var(--calm-border);
border-radius: var(--calm-radius);
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--surface-panel) 92%, transparent),
color-mix(in srgb, var(--calm-surface) 96%, transparent)
),
var(--calm-surface);
box-shadow: var(--calm-shadow);
}
.controls-framework-row[open] {
border-color: color-mix(in srgb, var(--calm-accent) 34%, var(--calm-border));
}
.controls-framework-row-good {
--framework-row-tone: var(--calm-good);
}
.controls-framework-row-watch {
--framework-row-tone: var(--calm-warn);
}
.controls-framework-row-alert {
--framework-row-tone: var(--calm-alert);
}
.controls-framework-row-summary {
display: grid;
grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(7.5rem, auto));
gap: 0.85rem;
align-items: center;
min-width: 0;
padding: 1rem;
cursor: pointer;
list-style: none;
}
.controls-framework-row-summary::-webkit-details-marker {
display: none;
}
.controls-framework-row-summary::before {
content: "";
width: 0.72rem;
height: 0.72rem;
border-radius: 999px;
background: var(--framework-row-tone, var(--calm-accent));
box-shadow: 0 0 0 5px color-mix(in srgb, var(--framework-row-tone, var(--calm-accent)) 15%, transparent);
}
.controls-framework-row-main,
.controls-framework-row-score,
.controls-framework-row-status {
min-width: 0;
}
.controls-framework-row-main {
display: grid;
gap: 0.2rem;
}
.controls-framework-row-main strong,
.controls-framework-gap-card h4 {
overflow-wrap: anywhere;
}
.controls-framework-row-kicker,
.controls-framework-row-score small,
.controls-framework-row-status small {
color: var(--calm-muted);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.controls-framework-row-score {
display: grid;
gap: 0.1rem;
}
.controls-framework-row-score strong {
font-size: clamp(1.25rem, 3vw, 1.7rem);
line-height: 1;
}
.controls-framework-row-status {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
justify-content: flex-end;
}
.controls-framework-row-detail {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.85fr);
gap: 1rem;
align-items: start;
padding: 0 1rem 1rem;
}
.controls-framework-domain-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.controls-framework-domain-list span {
display: inline-flex;
flex-wrap: wrap;
gap: 0.3rem;
max-width: 100%;
padding: 0.46rem 0.65rem;
border: 1px solid var(--calm-border);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-chip) 88%, transparent);
color: var(--calm-muted);
font-size: 0.86rem;
}
.controls-framework-domain-list strong {
color: var(--calm-text);
}
.controls-framework-gap-card {
display: grid;
gap: 0.55rem;
min-width: 0;
padding: 0.85rem;
border: 1px solid var(--calm-border);
border-left: 4px solid var(--framework-row-tone, var(--calm-accent));
border-radius: calc(var(--calm-radius) - 6px);
background: color-mix(in srgb, var(--surface-panel) 82%, transparent);
}
.controls-framework-gap-card h4,
.controls-framework-gap-card p {
margin: 0;
}
.controls-framework-row-actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: flex-end;
}
.controls-taxonomy-explainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.9rem;
margin-bottom: 1rem;
}
.compliance-requirement p {
margin: 0;
}
.requirement-dossier-surface {
min-width: 0;
}
.requirement-dossier-list {
display: grid;
gap: 1rem;
min-width: 0;
}
.requirement-dossier-card {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
gap: clamp(0.85rem, 2vw, 1.25rem);
align-items: stretch;
min-width: 0;
padding: clamp(1rem, 2vw, 1.35rem);
border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
border-radius: 28px;
background:
radial-gradient(circle at 8% 0%, rgba(80, 211, 198, 0.12), transparent 28%),
linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
color-mix(in srgb, var(--surface-panel) 92%, transparent);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}
.requirement-dossier-card.active {
border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
0 24px 58px rgba(0, 0, 0, 0.24);
}
.requirement-dossier-main,
.requirement-dossier-rail {
display: grid;
align-content: start;
gap: 0.8rem;
min-width: 0;
}
.requirement-dossier-meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.requirement-dossier-meta span {
display: inline-flex;
max-width: 100%;
padding: 0.28rem 0.55rem;
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-chip) 72%, transparent);
}
.requirement-dossier-title {
display: grid;
gap: 0.35rem;
margin: 0;
max-width: 48rem;
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.12;
}
.requirement-dossier-title code {
width: max-content;
max-width: 100%;
padding: 0.35rem 0.55rem;
border-radius: 12px;
background: rgba(80, 211, 198, 0.12);
color: var(--accent);
white-space: normal;
}
.requirement-dossier-copy,
.requirement-dossier-note,
.requirement-support-empty {
margin: 0;
color: var(--muted);
line-height: 1.55;
}
.requirement-dossier-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
margin-top: 0.15rem;
}
.requirement-dossier-rail {
padding: clamp(0.85rem, 2vw, 1rem);
border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.025);
}
.requirement-support-list {
display: grid;
gap: 0.55rem;
min-width: 0;
}
.requirement-support-control {
display: grid;
gap: 0.12rem;
min-width: 0;
padding: 0.7rem 0.78rem;
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
border-radius: 18px;
background: color-mix(in srgb, var(--surface-chip) 88%, transparent);
}
.requirement-support-control strong,
.requirement-support-control span,
.requirement-support-control small {
min-width: 0;
overflow-wrap: anywhere;
}
.requirement-support-control strong {
color: var(--text);
letter-spacing: 0.04em;
}
.requirement-support-control span {
color: rgba(233, 241, 255, 0.9);
line-height: 1.32;
}
.requirement-support-control small,
.requirement-support-more {
color: var(--muted);
}
.requirement-support-more {
display: inline-flex;
width: max-content;
max-width: 100%;
padding: 0.35rem 0.6rem;
border-radius: 999px;
border: 1px dashed color-mix(in srgb, var(--border) 86%, transparent);
}
@media (max-width: 960px) {
.requirement-dossier-card {
grid-template-columns: 1fr;
}
.requirement-dossier-actions .secondary-button {
width: 100%;
}
}
.inline-link-button {
appearance: none;
background: rgba(80, 211, 198, 0.08);
border: 1px solid rgba(80, 211, 198, 0.18);
border-radius: 999px;
padding: 0.14rem 0.5rem;
margin: 0;
font: inherit;
color: var(--text);
text-align: left;
cursor: pointer;
}
.requirement-focus-link {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem;
font-weight: 700;
color: var(--text);
transition: color 160ms ease;
}
.requirement-focus-link.active,
.requirement-focus-link:hover {
color: var(--accent);
}
.requirement-focus-link:focus-visible {
outline: 2px solid rgba(80, 211, 198, 0.55);
outline-offset: 4px;
border-radius: 8px;
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.chip {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--chip-border);
background: var(--surface-chip);
color: var(--text);
font-size: 0.86rem;
box-shadow: var(--surface-chip-shadow);
font-weight: 600;
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
}
.chip-muted {
opacity: 0.52;
border-style: dashed;
}
.chip-link {
text-decoration: none;
cursor: pointer;
transition:
transform 160ms ease,
border-color 160ms ease,
background 160ms ease;
}
.chip-link:hover,
.chip-button:hover {
transform: translateY(-1px);
border-color: rgba(80, 211, 198, 0.26);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}
.chip-button {
appearance: none;
font: inherit;
cursor: pointer;
text-align: left;
}
.record-chip {
align-items: flex-start;
flex-direction: column;
gap: 0.18rem;
min-width: 10rem;
max-width: min(20rem, 100%);
white-space: normal;
}
.record-chip-code {
font-weight: 700;
letter-spacing: 0.03em;
}
.record-chip-meta {
display: flex;
flex-direction: column;
gap: 0.12rem;
}
.record-chip-title {
color: rgba(233, 241, 255, 0.9);
line-height: 1.3;
}
.record-chip-status {
color: var(--muted);
font-size: 0.78rem;
}
.chip-link:hover {
transform: translateY(-1px);
border-color: rgba(80, 211, 198, 0.28);
background: rgba(80, 211, 198, 0.08);
}
.chip-link:focus-visible {
outline: 2px solid rgba(80, 211, 198, 0.55);
outline-offset: 2px;
}
.requirement-focus-card {
padding: 1.15rem;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
rgba(255, 255, 255, 0.02);
display: grid;
gap: 1rem;
}
.requirement-focus-card > summary {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
list-style: none;
}
.requirement-focus-card > summary::-webkit-details-marker {
display: none;
}
.requirement-focus-card > summary h3 {
margin: 0;
}
.requirement-focus-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0.9rem;
}
.control-preview-dialog {
justify-items: end;
}
.control-preview-shell {
width: min(34rem, calc(100vw - 2rem));
padding-right: 0.2rem;
}
.control-preview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.9rem;
}
.requirement-evidence-list,
.requirement-evidence-live-list {
display: grid;
gap: 0.55rem;
}
.requirement-evidence-item {
padding: 0.8rem 0.9rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
display: grid;
gap: 0.25rem;
}
.requirement-evidence-item p {
margin: 0;
color: var(--muted);
line-height: 1.45;
}
.inline-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.operations-job-card.is-selected,
.operations-job-detail-shell {
border-color: rgba(80, 211, 198, 0.26);
box-shadow:
0 18px 38px rgba(6, 12, 20, 0.16),
0 0 0 1px rgba(80, 211, 198, 0.08) inset;
}
.operations-job-detail-shell {
margin-top: 0.9rem;
}
.operations-queue-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.operations-queue-refinement-grid {
display: grid;
gap: 0.7rem;
grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(180px, 1fr));
}
.operations-queue-refinement-field {
display: grid;
gap: 0.4rem;
}
.operations-queue-refinement-field label {
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.operations-queue-workspace-grid {
display: grid;
gap: 0.9rem;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
align-items: start;
}
.operations-queue-refinement-field input,
.operations-queue-refinement-field select {
width: 100%;
}
.operations-queue-search-field input[type="search"]::-webkit-search-cancel-button {
cursor: pointer;
}
.operations-queue-filter-bar .button.is-active {
border-color: rgba(80, 211, 198, 0.28);
box-shadow:
0 14px 30px rgba(6, 12, 20, 0.12),
0 0 0 1px rgba(80, 211, 198, 0.08) inset;
color: var(--accent-strong);
}
.operations-job-meta-grid,
.operations-job-detail-grid {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.vendor-connection-status-card {
display: grid;
gap: 0.9rem;
}
.vendor-execution-overview-grid {
align-items: start;
}
.vendor-connection-empty {
display: grid;
gap: 0.9rem;
text-align: left;
justify-items: start;
}
.vendor-connection-status-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.85rem;
}
.vendor-connection-status-head strong {
display: block;
margin-top: 0.12rem;
}
.vendor-connection-meta-grid {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.vendor-connection-meta-card,
.vendor-connection-note {
display: grid;
gap: 0.3rem;
padding: 0.95rem 1rem;
border-radius: 1rem;
border: 1px solid var(--border-soft);
background: var(--surface-strong);
box-shadow: var(--surface-shadow-soft);
}
.vendor-connection-meta-card span,
.vendor-connection-note span {
color: var(--muted);
font-size: 0.76rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.vendor-connection-meta-card strong,
.vendor-connection-note strong {
line-height: 1.45;
}
.vendor-connection-meta-card small {
color: var(--muted);
line-height: 1.45;
}
.vendor-connection-actions {
margin-top: 0.15rem;
}
.vendor-connection-workspace {
margin-top: 0.9rem;
}
.vendor-connection-next-step-card {
display: grid;
gap: 0.6rem;
min-height: 100%;
}
.vendor-connection-next-step-card p {
margin: 0;
color: var(--muted);
line-height: 1.55;
}
.vendor-connection-form-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.vendor-connection-form-head h5 {
margin: 0.18rem 0 0;
font-size: 1rem;
}
.vendor-connection-form-head-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.65rem;
}
.vendor-connection-form {
grid-template-columns: minmax(0, 1fr);
gap: 0.9rem;
}
.vendor-connection-toggle-card {
display: grid;
gap: 0.65rem;
padding: 0.95rem 1rem;
border-radius: 1rem;
border: 1px solid var(--border-soft);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
var(--surface-strong);
box-shadow: var(--surface-shadow-soft);
}
.vendor-connection-form .checkbox-inline.vendor-connection-toggle {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 0.8rem;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.vendor-connection-form .checkbox-inline.vendor-connection-toggle input {
width: auto;
margin: 0.18rem 0 0;
flex: 0 0 auto;
}
.vendor-connection-toggle-copy {
display: grid;
gap: 0.28rem;
}
.vendor-connection-toggle-copy strong {
font-size: 0.96rem;
line-height: 1.35;
}
.vendor-connection-toggle-copy small {
color: var(--muted);
line-height: 1.45;
}
.vendor-connection-form .checkbox-inline.vendor-connection-toggle span {
display: block;
}
.vendor-connection-form .form-section-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.vendor-connection-form .form-actions {
align-items: stretch;
}
.vendor-connection-form-actions {
gap: 0.75rem;
}
.vendor-connection-form .form-actions .button {
flex: 1 1 13rem;
}
.vendor-connection-form-actions .vendor-connection-save-button {
flex-basis: 100%;
}
.operations-job-meta-card,
.operations-job-detail-card {
border: 1px solid var(--border-soft);
border-radius: 1rem;
padding: 0.95rem 1rem;
background: var(--surface-strong);
box-shadow: var(--surface-shadow-soft);
}
.operations-job-next-move-card {
margin-top: 0.2rem;
}
.operations-job-inline-disclosure {
margin-top: 0.2rem;
}
.operations-job-inline-disclosure[open] {
padding-bottom: 0.2rem;
}
.operations-job-raw-grid {
display: grid;
gap: 0.85rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.operations-job-raw-card {
display: grid;
gap: 0.65rem;
}
.operations-job-timeline-row {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: baseline;
color: var(--muted);
}
@media (max-width: 960px) {
.operations-queue-refinement-grid {
grid-template-columns: 1fr;
}
.operations-queue-workspace-grid {
grid-template-columns: 1fr;
}
.operations-job-detail-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.vendor-connection-form-head {
flex-direction: column;
}
.vendor-connection-form-head-actions {
width: 100%;
justify-content: flex-start;
}
.vendor-connection-form .form-section-grid {
grid-template-columns: 1fr;
}
.vendor-connection-form .form-actions .button {
flex-basis: 100%;
}
}
.operations-job-timeline-row strong {
color: var(--text);
}
.operations-job-json {
margin: 0;
padding: 0.9rem 1rem;
border-radius: 0.9rem;
border: 1px solid var(--border-soft);
background: var(--surface-panel);
color: var(--text);
white-space: pre-wrap;
word-break: break-word;
font-size: 0.82rem;
line-height: 1.5;
overflow: auto;
max-height: 20rem;
}
.operations-job-history-entry {
border: 1px solid var(--border-soft);
border-radius: 0.9rem;
padding: 0.8rem 0.9rem;
background: var(--surface-panel);
box-shadow: var(--surface-shadow-soft);
}
.operations-job-history-head {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: center;
}
.table-action-button {
border: 1px solid var(--chip-border);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
var(--surface-chip);
color: var(--text);
padding: 0.45rem 0.75rem;
border-radius: 999px;
cursor: pointer;
box-shadow: var(--surface-chip-shadow);
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
transition:
border-color 160ms ease,
transform 160ms ease,
box-shadow 160ms ease;
}
.table-action-button::after {
content: "›";
font-size: 1rem;
line-height: 1;
opacity: 0.72;
}
.table-action-button:hover {
transform: translateY(-1px);
border-color: rgba(80, 211, 198, 0.22);
box-shadow: 0 10px 24px rgba(8, 20, 34, 0.12);
}
.table-action-button.emphasis {
border-color: rgba(247, 199, 109, 0.35);
background: rgba(247, 199, 109, 0.12);
}
.table-action-button.emphasis:hover {
border-color: rgba(247, 199, 109, 0.55);
}
.pill-strong {
border-color: rgba(80, 211, 198, 0.22);
background: rgba(80, 211, 198, 0.1);
}
.table-action-button.danger {
border-color: rgba(255, 122, 122, 0.2);
color: #ffd6d6;
}
@media (max-width: 1080px) {
.discovery-signal-grid {
grid-template-columns: 1fr;
}
}
.hidden {
display: none !important;
}
.toast {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
padding: 0.95rem 1.1rem;
border-radius: 18px;
background: var(--toast-surface);
border: 1px solid var(--panel-border);
color: var(--text);
box-shadow: var(--shadow);
z-index: 10;
}
.shell-language,
.auth-guide-card,
.module-brand,
.module-nav-group,
.module-nav-button,
.module-role-home-summary,
.dashboard-next-cue,
.role-capability-card,
.command-note,
.dashboard-score-callout,
.dashboard-attention-item,
.dashboard-role-visibility-card,
.signal-card,
.system-portfolio-card,
.workflow-stage,
.workflow-action-panel,
.controls-overview-card,
.framework-summary-card,
.requirement-focus-card,
.requirement-evidence-item,
.discovery-signal-card,
.discovery-signal-panel,
.wizard-shell,
.wizard-summary-card,
.wizard-phase,
.wizard-step,
.framework-ring-card,
.report-card,
.program-policy-card,
.program-policy-section,
.eu-ai-pack-card,
.block-packet-card,
.chip,
.table-action-button,
.admin-tab-button,
.reference-insight-metrics span {
border-color: var(--panel-border);
box-shadow: var(--surface-inset-shadow);
}
.shell-language,
.auth-guide-card,
.module-brand,
.module-nav-group,
.module-nav-button,
.module-role-home-summary,
.dashboard-next-cue,
.role-capability-card,
.command-note,
.dashboard-score-callout,
.dashboard-attention-item,
.dashboard-role-visibility-card,
.signal-card,
.system-portfolio-card,
.workflow-stage,
.workflow-action-panel,
.controls-overview-card,
.framework-summary-card,
.requirement-focus-card,
.requirement-evidence-item,
.discovery-signal-card,
.discovery-signal-panel,
.wizard-shell,
.wizard-summary-card,
.wizard-phase,
.wizard-step,
.framework-ring-card,
.report-card,
.program-policy-card,
.program-policy-section,
.eu-ai-pack-card,
.block-packet-card,
.admin-tab-button,
.reference-insight-metrics span {
background: var(--surface-card);
}
.module-brand,
.topbar,
.topbar-primary,
.topbar-context,
.topbar-module-switch,
.topbar-scope,
.module-sidebar {
background: var(--surface-elevated);
}
.shell-language {
border-color: var(--surface-premium-border);
background: linear-gradient(
180deg,
var(--surface-premium-soft),
var(--surface-elevated)
);
box-shadow: var(--surface-premium-shadow);
}
.shell-utility-field {
padding: 0.72rem 0.8rem;
border-radius: 16px;
border: 1px solid var(--surface-premium-border);
background: var(--surface-card);
box-shadow: var(--surface-inset-shadow);
}
.auth-panel,
.auth-guide {
border-color: var(--surface-premium-border);
background: linear-gradient(
180deg,
var(--surface-premium),
var(--surface-premium-soft)
);
box-shadow: var(--surface-premium-shadow);
}
.auth-guide-card {
border-color: var(--surface-premium-border);
background: linear-gradient(
180deg,
var(--surface-premium-soft),
var(--surface-card)
);
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
.auth-panel .panel-header h2,
.auth-guide .section-heading h3,
.topbar-context strong,
.topbar-primary h2 {
color: var(--text-strong);
}
.login-auth-note,
.login-sso-note,
.topbar-context-copy,
.topbar-context-label {
color: var(--muted-strong);
}
.dashboard-hero {
background: var(--surface-hero-dashboard);
}
.report-hero {
background: var(--surface-hero-report);
}
.dashboard-command-card,
.report-board-panel {
border-color: var(--surface-premium-border);
background: var(--surface-premium);
box-shadow: var(--surface-premium-shadow);
}
.report-toolbar-card,
.command-note,
.dashboard-next-cue,
.dashboard-score-callout,
.dashboard-attention-item,
.dashboard-role-visibility-card,
.dashboard-role-stage-card,
.module-stage-card,
.controls-overview-card,
.report-card,
.discovery-signal-card,
.discovery-guidance-card,
.report-action-primary,
.report-action-disclosure {
border-color: var(--surface-premium-border);
background: var(--surface-premium-soft);
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
.dashboard-hero-summary-card {
border-color: var(--surface-premium-border);
background: var(--surface-premium-soft);
box-shadow: var(--surface-premium-shadow);
}
.topbar {
border-color: var(--surface-premium-border);
background: linear-gradient(
180deg,
var(--surface-premium),
var(--surface-elevated)
);
box-shadow: var(--surface-premium-shadow);
}
.topbar-primary,
.topbar-context,
.topbar-module-switch,
.topbar-scope {
border-color: var(--surface-premium-border);
background: linear-gradient(
180deg,
var(--surface-premium-soft),
var(--surface-card)
);
box-shadow: var(--shadow-soft), var(--surface-inset-shadow);
}
.notification-backdrop,
.confirm-backdrop {
background: var(--overlay-backdrop);
}
.notification-panel,
.confirm-dialog-shell {
border-color: var(--panel-border);
background: var(--overlay-panel);
box-shadow: var(--surface-premium-shadow);
}
.notification-panel-header {
background: var(--overlay-header);
}
.confirm-dialog-shell {
padding: 1rem 1.05rem 1.1rem;
border-radius: 26px;
}
.empty-state {
position: relative;
overflow: hidden;
border-color: var(--surface-premium-border);
background: linear-gradient(
180deg,
var(--surface-premium-soft),
var(--surface-card)
);
box-shadow: var(--surface-inset-shadow);
padding: 1.15rem 1.2rem 1.15rem 1.3rem;
color: var(--muted-strong);
line-height: 1.6;
}
.empty-state::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg, var(--brand), var(--brand-strong));
opacity: 0.72;
}
.empty-state::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 38%);
opacity: 0.7;
}
.empty-state > * {
position: relative;
z-index: 1;
}
.empty-state-body {
display: grid;
gap: 0.55rem;
min-width: 0;
}
.empty-state-illustrated {
grid-template-columns: minmax(6rem, 0.28fr) minmax(0, 1fr);
align-items: center;
gap: clamp(1rem, 3vw, 2.4rem);
min-height: clamp(12rem, 24vw, 18rem);
padding: clamp(1.1rem, 2.8vw, 2rem);
border-style: solid;
}
.empty-state-illustration {
width: min(10rem, 28vw);
max-width: 100%;
aspect-ratio: 1;
object-fit: contain;
justify-self: center;
filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.28));
opacity: 0.96;
}
.dashboard-role-empty-state {
min-height: clamp(13rem, 27vw, 20rem);
}
.dashboard-role-empty-state .empty-state-title {
max-width: 16ch;
font-size: clamp(1.55rem, 3vw, 2.55rem);
letter-spacing: 0.01em;
}
.dashboard-role-empty-state .empty-state-copy {
max-width: 58ch;
}
.dashboard-role-empty-state .empty-state-actions {
margin-top: 0.45rem;
}
.empty-state-good::before {
background: linear-gradient(180deg, var(--success), color-mix(in srgb, var(--success) 56%, white));
}
.empty-state-watch::before {
background: linear-gradient(180deg, var(--warning), color-mix(in srgb, var(--warning) 58%, white));
}
.empty-state-alert::before {
background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 58%, white));
}
@media (max-width: 900px) {
.empty-state-illustrated {
grid-template-columns: 1fr;
min-height: auto;
}
.empty-state-illustration {
width: min(7.5rem, 36vw);
justify-self: start;
}
.dashboard-role-empty-state .empty-state-title {
max-width: 20ch;
}
}
@media (max-width: 640px) {
.empty-state-illustrated {
padding: 1rem;
}
.empty-state-actions .empty-state-button {
width: 100%;
}
}
.button-secondary,
.chip,
.table-action-button,
.admin-tab-button {
background: var(--button-secondary-bg);
border-color: var(--button-secondary-border);
color: var(--button-secondary-text);
}
.chip,
.pill,
.table-action-button,
.status {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
var(--surface-chip);
border-color: var(--chip-border);
box-shadow: var(--surface-chip-shadow);
}
.module-brand-mark,
.topbar-mark {
color: var(--button-primary-text);
}
.module-nav-button.active,
.system-portfolio-card.active,
.controls-overview-card.active,
.framework-summary-card.active,
.admin-tab-button.active {
border-color: var(--surface-selected-border);
background: var(--surface-selected);
box-shadow: var(--surface-selected-shadow);
}
.module-nav-button:hover,
.chip-link:hover,
.table-action-button:hover,
.admin-tab-button:hover {
border-color: var(--chip-hover-border);
background: var(--chip-hover-bg);
}
.signal-card-alert,
.controls-overview-card-alert,
.eu-ai-pack-card-alert,
.workflow-stage-changes_requested,
.workflow-stage-rejected {
background: var(--surface-alert);
border-color: var(--tone-alert-border);
}
.signal-card-watch,
.controls-overview-card-watch,
.eu-ai-pack-card-watch,
.workflow-stage-pending {
background: var(--surface-watch);
border-color: var(--tone-watch-border);
}
.signal-card-good,
.controls-overview-card-good,
.workflow-stage-approved {
background: var(--surface-good);
border-color: var(--tone-good-border);
}
.signal-card-neutral,
.controls-overview-card-neutral,
.eu-ai-pack-card-neutral {
background: var(--surface-neutral);
border-color: var(--tone-neutral-border);
}
.table-shell {
border-color: var(--surface-premium-border);
background: linear-gradient(180deg, var(--table-surface), var(--surface-card));
box-shadow: var(--surface-premium-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
padding: 0.18rem;
max-width: 100%;
scrollbar-gutter: stable both-edges;
}
th {
background: var(--table-head-surface);
box-shadow: inset 0 -1px 0 var(--line);
}
.table-shell table {
width: 100%;
min-width: max(760px, 100%);
table-layout: auto;
}
.table-shell th,
.table-shell td {
vertical-align: top;
word-break: normal;
overflow-wrap: normal;
}
.table-shell .table-subtle,
.table-shell .accountability-table-cell,
.table-shell .accountability-meta-grid {
overflow-wrap: anywhere;
}
[data-module-screen="risk"] > .module-grid {
grid-template-columns: minmax(0, 1fr);
}
[data-module-screen="risk"] #risks-table table,
[data-module-screen="risk"] #actions-table table {
min-width: max(68rem, 100%);
}
tbody tr td:first-child {
position: relative;
}
tbody tr td:first-child::before {
content: "";
position: absolute;
left: 0.35rem;
top: 0.8rem;
bottom: 0.8rem;
width: 2px;
border-radius: 999px;
background: color-mix(in srgb, var(--brand) 28%, transparent);
opacity: 0.55;
}
tbody tr:nth-child(even) td {
background: var(--table-row-even);
}
tbody tr td {
transition: background 180ms ease, border-color 180ms ease;
}
tbody tr:hover td {
background: color-mix(in srgb, var(--table-row-hover) 78%, var(--surface-premium-soft));
}
.discovery-card-more summary::before {
border-color: var(--chip-border);
background: var(--chip-bg);
}
.record-chip-title {
color: var(--text);
}
@media (max-width: 1100px) {
.login-shell,
.dashboard-hero,
.dashboard-ciso-posture-card,
.dashboard-posture-layout,
.dashboard-first-minute-grid,
.dashboard-operating-grid,
.dashboard-command-grid,
.dashboard-secondary-grid,
.dashboard-score-explainer-grid,
.dashboard-grid,
.metrics-grid,
.report-command-grid,
.report-depth-grid,
.report-grid,
.report-hero,
.report-hero-intro,
.highlight-list,
.discovery-guidance-rail,
.module-grid,
.eval-dashboard-shell,
.systems-intake-shell,
.system-focus-shell,
.system-focus-metrics,
.system-intake-readiness,
.workflow-rail,
.admin-entry-grid,
.admin-shell,
.workspace-shell {
grid-template-columns: 1fr;
}
.topbar {
grid-template-columns: 1fr;
}
.module-sidebar {
position: static;
}
.program-readiness-summary {
grid-template-columns: 1fr;
}
.admin-tabs {
position: static;
}
.admin-attention-item {
flex-direction: column;
align-items: stretch;
}
.admin-attention-actions {
justify-content: flex-start;
}
.module-nav {
grid-template-columns: 1fr;
}
.systems-overview-grid,
.controls-overview-grid,
.discovery-intake-decision-strip,
.systems-decision-strip,
.provider-decision-strip,
.vendor-decision-strip,
.dashboard-ciso-status-grid,
.shadow-governed-bridge-grid,
.shadow-board-strip,
.dashboard-shadow-diligence-grid,
.system-portfolio-grid,
.context-compass-grid,
.module-subnav,
.risk-matrix-shell {
grid-template-columns: 1fr;
}
.wizard-toolbar,
.wizard-summary-head {
flex-direction: column;
}
.wizard-phase-grid,
.compliance-toolbar,
.compliance-filter-summary,
.controls-framework-row-summary,
.controls-framework-row-detail,
.auth-guide-grid,
.auth-shadow-preview-grid,
.auth-role-preview-grid,
.mfa-hero-strip,
.mfa-setup-layout,
.framework-summary-grid,
.report-shadow-hero-head,
.report-toolbar-head,
.intake-stepper,
.intake-step-panel,
.role-capability-grid,
.role-capability-grid-compact {
grid-template-columns: 1fr;
}
.compliance-filter-summary {
align-items: stretch;
flex-direction: column;
}
.compliance-filter-clear {
width: 100%;
}
.controls-framework-row-summary {
align-items: start;
}
.controls-framework-row-status,
.controls-framework-row-actions {
justify-content: flex-start;
}
:is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer
).work-surface-drawer-portal[open] {
inset: max(0.55rem, env(safe-area-inset-top)) max(0.55rem, env(safe-area-inset-right)) max(0.55rem, env(safe-area-inset-bottom)) max(0.55rem, env(safe-area-inset-left));
width: auto;
max-width: none;
max-height: none;
border-radius: 24px;
}
}
@media (max-width: 1500px) {
.auth-shadow-preview-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.auth-role-preview-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.dashboard-ciso-posture-card,
.dashboard-ciso-status-grid,
.dashboard-ciso-timeline-item,
.dashboard-ciso-premium-posture,
.dashboard-operator-premium-posture,
.dashboard-operator-workbench,
.dashboard-operator-device-row,
.dashboard-analyst-premium-posture,
.dashboard-analyst-workbench,
.dashboard-analyst-finding-row,
.dashboard-auditor-premium-posture,
.dashboard-auditor-workbench,
.dashboard-auditor-evidence-row {
grid-template-columns: 1fr;
}
.dashboard-operator-actions,
.dashboard-analyst-filter-bar,
.dashboard-auditor-actions {
position: static;
}
.dashboard-ciso-timeline-item time {
white-space: normal;
}
.dashboard-ciso-status-card .calm-card-value {
font-size: clamp(2.4rem, 16vw, 3.5rem);
}
}
@media (max-width: 1800px) {
.workspace-shell {
grid-template-columns: 13.9rem minmax(0, 1fr);
}
.dashboard-hero {
grid-template-columns: 1fr;
}
.dashboard-command-card {
order: -1;
}
.dashboard-ciso-status-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-hero-summary,
.dashboard-first-minute-grid,
.dashboard-operating-grid,
.dashboard-score-explainer-grid,
.dashboard-driver-list,
.dashboard-command-grid,
.dashboard-secondary-grid,
.report-command-grid,
.report-depth-grid,
.report-hero,
.report-hero-intro,
.highlight-list,
.discovery-guidance-rail,
.dashboard-grid {
grid-template-columns: 1fr;
}
.dashboard-ciso-posture {
justify-items: start;
text-align: left;
}
.dashboard-ciso-posture > div {
justify-content: flex-start;
}
.report-hero-intro-card,
.report-hero-intro-card-lead,
.highlight-item,
.highlight-item-feature {
grid-column: 1 / -1;
}
}
@media (max-width: 1720px) {
.workspace-shell {
grid-template-columns: 13.2rem minmax(0, 1fr);
}
.topbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.topbar-context-copy,
.module-nav-group-copy,
.module-sidebar-copy {
font-size: 0.82rem;
line-height: 1.48;
}
.module-brand h2 {
font-size: 1.42rem;
}
.report-hero-copy h3 {
max-width: none;
font-size: clamp(2rem, 4vw, 3.35rem);
}
}
@media (max-width: 1760px) {
.admin-entry-grid,
.admin-shell {
grid-template-columns: 1fr;
}
.admin-tabs {
position: static;
}
.admin-tab-nav {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-tab-button {
padding: 0.72rem 0.78rem;
gap: 0;
border-radius: 14px;
}
.admin-tab-button small {
display: none;
}
.admin-shell.admin-shell-focused {
grid-template-columns: 1fr;
}
.admin-tabs.admin-tabs-focused {
position: static;
}
.admin-tabs.admin-tabs-focused .admin-tab-nav {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 1400px) {
.admin-shell {
grid-template-columns: 1fr;
}
.admin-tab-nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-tab-button {
padding: 0.72rem 0.78rem;
gap: 0;
border-radius: 14px;
}
.admin-tab-button small {
display: none;
}
.metrics-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1180px) {
.dashboard-role-launch-grid,
.module-role-launch-grid {
grid-template-columns: minmax(0, 1fr);
}
.admin-tab-nav,
.admin-tabs.admin-tabs-focused .admin-tab-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-panel-focused .systems-overview-grid,
.admin-panel-focused .settings-checkbox-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 1680px) {
.topbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not(.sidebar-compact) .workspace-shell {
grid-template-columns: 12.8rem minmax(0, 1fr);
}
}
@media (max-width: 1500px) {
.shadow-board-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-command-card .dashboard-signal-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 780px) {
.shadow-board-strip {
grid-template-columns: 1fr;
}
.shell {
width: min(100vw - 1rem, 100%);
padding-top: 1rem;
}
.shell-language {
justify-self: stretch;
grid-template-columns: 1fr;
}
.shell-language-head {
min-width: 0;
padding-right: 0;
}
.topbar {
padding: 1rem;
}
.identity {
flex-wrap: wrap;
}
.notification-panel {
top: 50%;
left: 0.9rem;
right: 0.9rem;
width: auto;
max-height: calc(100vh - 2rem);
transform: translate(0, -50%);
}
.dashboard-signal-grid,
.report-actions,
.mfa-status-grid,
.mfa-detail-grid {
grid-template-columns: 1fr;
}
.score-dial-shell,
.framework-ring-body,
.river-track {
grid-template-columns: 1fr;
flex-direction: column;
}
.module-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.module-sidebar-head-row {
grid-template-columns: 1fr;
align-items: start;
}
.systems-overview-grid,
.controls-overview-grid,
.module-subnav {
grid-template-columns: 1fr;
}
.evidence-workspace-grid,
.evidence-readiness-head,
.evidence-readiness-integrity,
.evidence-vault-summary,
.evidence-vault-meta,
.admin-notification-grid,
.notification-summary-grid {
grid-template-columns: 1fr;
}
.evidence-readiness-head,
.evidence-readiness-integrity {
display: grid;
}
.evidence-readiness-actions {
justify-content: stretch;
}
.evidence-readiness-actions .button {
flex: 1 1 12rem;
}
.evidence-readiness-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
:is(
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] {
inset: max(0.55rem, env(safe-area-inset-top)) max(0.55rem, env(safe-area-inset-right)) max(0.55rem, env(safe-area-inset-bottom)) max(0.55rem, env(safe-area-inset-left));
width: auto;
max-width: none;
max-height: none;
border-radius: 24px;
}
.platform-guide-header,
.platform-guide-callout,
.bulk-import-assist-head {
display: grid;
grid-template-columns: 1fr;
}
.compact-form {
grid-template-columns: 1fr;
}
.form-section-grid,
.block-packet-summary-grid,
.block-packet-download-grid,
.block-packet-adapter-grid,
.block-packet-adapter-meta,
.control-preview-grid {
grid-template-columns: 1fr;
}
.intake-stepper,
.intake-step-panel {
grid-template-columns: 1fr;
}
.checkbox-grid,
.heatmap-grid {
grid-template-columns: 1fr;
}
.module-role-button-row {
grid-template-columns: 1fr;
}
.module-role-button[data-module-role-focus="all"] {
grid-column: auto;
}
}
@media (max-width: 560px) {
.module-sidebar,
.module-card,
.module-hero {
padding: 1rem;
}
.dashboard-signal-grid {
grid-template-columns: 1fr;
}
.evidence-readiness-grid {
grid-template-columns: 1fr;
}
.provider-lane-head,
.shadow-pressure-head,
.top-risk-head,
.incident-focus-head,
.incident-timeline-head {
flex-direction: column;
}
.topbar-context,
.identity {
border-radius: 20px;
}
.module-nav {
grid-template-columns: 1fr;
}
.operating-standards-grid,
.operating-standards-summary-grid {
grid-template-columns: 1fr;
}
}
/* Final premium-sidebar responsive guardrail: keep the mockup proportions after legacy media blocks. */
.workspace-shell,
body.sidebar-compact .workspace-shell,
body.task-mode .workspace-shell,
body.task-mode.sidebar-compact .workspace-shell,
:is(body.task-mode, body.simple-mode) .workspace-shell,
:is(body.task-mode, body.simple-mode).sidebar-compact .workspace-shell {
grid-template-columns: minmax(19rem, 28.75rem) minmax(0, 1fr);
}
@media (max-width: 1320px) {
.workspace-shell,
body.sidebar-compact .workspace-shell,
body.task-mode .workspace-shell,
body.task-mode.sidebar-compact .workspace-shell,
:is(body.task-mode, body.simple-mode) .workspace-shell,
:is(body.task-mode, body.simple-mode).sidebar-compact .workspace-shell {
grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
}
.premium-sidebar {
padding: 1.15rem;
}
.premium-sidebar .module-nav-button {
margin-left: 2rem;
width: calc(100% - 2rem);
}
}
@media (max-width: 1100px) {
.workspace-shell,
body.sidebar-compact .workspace-shell,
body.task-mode .workspace-shell,
body.task-mode.sidebar-compact .workspace-shell,
:is(body.task-mode, body.simple-mode) .workspace-shell,
:is(body.task-mode, body.simple-mode).sidebar-compact .workspace-shell {
grid-template-columns: 1fr;
}
.premium-sidebar {
position: static;
max-height: none;
overflow: visible;
}
.premium-sidebar-sticky-head {
position: relative;
top: auto;
}
.premium-module-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.premium-module-nav {
grid-template-columns: 1fr;
}
.premium-sidebar-search {
grid-template-columns: auto minmax(0, 1fr);
}
.premium-sidebar-search kbd {
display: none;
}
}
/* Table focus mode: give dense registers the width back without changing routes. */
@media (min-width: 1101px) {
body[data-focus-mode="on"] .workspace-shell,
body[data-focus-mode="on"].sidebar-compact .workspace-shell,
body[data-focus-mode="on"].task-mode .workspace-shell,
body[data-focus-mode="on"].task-mode.sidebar-compact .workspace-shell,
body[data-focus-mode="on"]:is(.task-mode, .simple-mode) .workspace-shell,
body[data-focus-mode="on"]:is(.task-mode, .simple-mode).sidebar-compact .workspace-shell {
grid-template-columns: minmax(4.75rem, 4.75rem) minmax(0, 1fr) !important;
}
body[data-focus-mode="on"] .premium-sidebar {
padding: 0.72rem;
gap: 0.62rem;
}
body[data-focus-mode="on"] .premium-sidebar-sticky-head {
gap: 0.62rem;
}
body[data-focus-mode="on"] .premium-sidebar .module-brand {
grid-template-columns: 1fr;
justify-items: center;
padding: 0;
}
body[data-focus-mode="on"] .premium-sidebar .module-brand > div,
body[data-focus-mode="on"] .premium-sidebar-search,
body[data-focus-mode="on"] .premium-sidebar-context,
body[data-focus-mode="on"] .simple-module-switch,
body[data-focus-mode="on"] .module-stack-disclosure,
body[data-focus-mode="on"] .module-sidebar-head-row,
body[data-focus-mode="on"] .module-role-rail,
body[data-focus-mode="on"] .premium-sidebar-actions,
body[data-focus-mode="on"] .premium-nav-group .eyebrow,
body[data-focus-mode="on"] .premium-sidebar .module-nav-button span,
body[data-focus-mode="on"] .premium-sidebar .module-nav-button small {
display: none !important;
}
body[data-focus-mode="on"] .module-focus-mode-toggle {
position: fixed;
left: 1rem;
bottom: 1rem;
z-index: 60;
min-width: 0;
width: auto;
max-width: min(15rem, calc(100vw - 2rem));
padding: 0.72rem 0.9rem;
gap: 0.5rem;
font-size: 0.82rem;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}
body[data-focus-mode="on"] .module-focus-mode-toggle::before {
content: "";
display: inline-grid;
place-items: center;
width: 0.72rem;
height: 0.72rem;
border-radius: 999px;
background: linear-gradient(135deg, var(--brand), var(--brand-strong));
box-shadow: 0 0 0 4px rgba(244, 187, 99, 0.16);
}
body[data-focus-mode="on"] .module-focus-mode-toggle::after {
content: attr(data-focus-exit-hint);
display: inline-grid;
place-items: center;
min-width: 1.75rem;
min-height: 1.35rem;
padding-inline: 0.4rem;
border: 1px solid rgba(157, 190, 213, 0.22);
border-radius: 999px;
color: var(--muted);
background: rgba(255, 255, 255, 0.045);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.08em;
}
body[data-focus-mode="on"] .premium-module-nav {
gap: 0.55rem;
}
body[data-focus-mode="on"] .premium-nav-group {
padding: 0.18rem;
border-radius: 18px;
}
body[data-focus-mode="on"] .premium-nav-group-head {
justify-content: center;
padding: 0.46rem 0.25rem;
}
body[data-focus-mode="on"] .premium-nav-group-label {
justify-content: center;
}
body[data-focus-mode="on"] .premium-nav-icon {
margin: 0;
}
body[data-focus-mode="on"] .premium-sidebar .module-nav-button {
min-height: 2.2rem;
width: 100% !important;
margin-left: 0 !important;
padding: 0.44rem !important;
justify-content: center;
justify-items: center;
}
body[data-focus-mode="on"] .premium-sidebar .module-nav-button::before {
content: attr(data-focus-short);
display: inline-grid;
place-items: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 999px;
border: 1px solid rgba(157, 190, 213, 0.22);
background: rgba(255, 255, 255, 0.045);
color: #e8f1fb;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.04em;
}
body[data-focus-mode="on"] .premium-sidebar .module-nav-button.active::before {
border-color: color-mix(in srgb, var(--brand) 64%, transparent);
color: #06131d;
background: linear-gradient(135deg, var(--brand), var(--brand-strong));
}
body[data-focus-mode="on"] .premium-sidebar .module-nav-button[data-nav-count]::after {
top: -0.12rem;
right: -0.12rem;
}
}
/* Premium sidebar shell owns task mode; the legacy top command center stays out of the way. */
#app-shell .topbar,
body.task-mode .topbar,
:is(body.task-mode, body.simple-mode) .topbar {
display: none;
}
body.task-mode .app-shell,
:is(body.task-mode, body.simple-mode) .app-shell {
gap: clamp(0.85rem, 1.2vw, 1.25rem);
}
body.task-mode .workspace-shell,
body.task-mode.sidebar-compact .workspace-shell,
:is(body.task-mode, body.simple-mode) .workspace-shell,
:is(body.task-mode, body.simple-mode).sidebar-compact .workspace-shell {
align-items: start;
margin-top: 0;
}
body.task-mode .premium-sidebar,
body.task-mode.sidebar-compact .premium-sidebar,
:is(body.task-mode, body.simple-mode) .premium-sidebar,
:is(body.task-mode, body.simple-mode).sidebar-compact .premium-sidebar {
position: sticky;
top: 1rem;
max-height: calc(100dvh - 2rem);
overflow: hidden;
}
body.task-mode .premium-sidebar-scroll-area,
body.task-mode.sidebar-compact .premium-sidebar-scroll-area,
:is(body.task-mode, body.simple-mode) .premium-sidebar-scroll-area,
:is(body.task-mode, body.simple-mode).sidebar-compact .premium-sidebar-scroll-area {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
@media (max-width: 1100px) {
body.task-mode .premium-sidebar,
body.task-mode.sidebar-compact .premium-sidebar,
:is(body.task-mode, body.simple-mode) .premium-sidebar,
:is(body.task-mode, body.simple-mode).sidebar-compact .premium-sidebar {
position: static;
max-height: none;
overflow: visible;
}
body.task-mode .premium-sidebar-scroll-area,
body.task-mode.sidebar-compact .premium-sidebar-scroll-area,
:is(body.task-mode, body.simple-mode) .premium-sidebar-scroll-area,
:is(body.task-mode, body.simple-mode).sidebar-compact .premium-sidebar-scroll-area {
overflow: visible;
}
}
/* Premium sidebar compact readability guardrail: prevent older card rules from inflating the nav. */
.premium-sidebar .premium-module-nav,
body.sidebar-compact .premium-sidebar .premium-module-nav,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-module-nav {
gap: 0.48rem;
}
.premium-sidebar .premium-nav-group,
body.sidebar-compact .premium-sidebar .premium-nav-group,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-group {
gap: 0.26rem;
padding: 0;
border: 0;
border-radius: 14px;
background: transparent;
box-shadow: none;
overflow: visible;
}
.premium-sidebar .premium-nav-group-head,
body.sidebar-compact .premium-sidebar .premium-nav-group-head,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-group-head {
min-height: 2.12rem;
padding: 0.16rem 0.18rem;
border: 0;
background: transparent;
box-shadow: none;
}
.premium-sidebar .premium-nav-group-label,
body.sidebar-compact .premium-sidebar .premium-nav-group-label,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-group-label {
grid-template-columns: 1.42rem minmax(0, 1fr);
gap: 0.58rem;
}
.premium-sidebar .premium-nav-group .eyebrow,
body.sidebar-compact .premium-sidebar .premium-nav-group .eyebrow,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-group .eyebrow {
font-size: clamp(0.8rem, 0.74vw, 0.92rem);
font-weight: 760;
letter-spacing: -0.015em;
line-height: 1.1;
}
.premium-sidebar .premium-nav-icon,
body.sidebar-compact .premium-sidebar .premium-nav-icon,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-icon {
width: 1.42rem;
height: 1.42rem;
overflow: visible;
}
.premium-sidebar .premium-nav-icon::before,
body.sidebar-compact .premium-sidebar .premium-nav-icon::before,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-icon::before {
clip-path: none;
width: 1.32rem;
height: 1.32rem;
border-width: 1px;
border-radius: 999px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.018)),
rgba(7, 21, 33, 0.84);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.035),
0 8px 18px rgba(0, 0, 0, 0.16);
font-size: 0.58rem;
}
.premium-sidebar .premium-nav-icon-firewall::before,
body.sidebar-compact .premium-sidebar .premium-nav-icon-firewall::before,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-icon-firewall::before {
font-size: 0.5rem;
}
.premium-sidebar .premium-nav-group-badge,
body.sidebar-compact .premium-sidebar .premium-nav-group-badge,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-group-badge {
min-width: 1.45rem;
padding: 0.14rem 0.44rem;
font-size: 0.68rem;
line-height: 1.05;
}
.premium-sidebar .module-nav-button,
body.sidebar-compact .premium-sidebar .module-nav-button,
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-nav-button {
min-height: 2.16rem;
margin-left: 1.76rem;
width: calc(100% - 1.76rem);
padding: 0.34rem 0.52rem 0.34rem 0.62rem;
border-radius: 10px;
background: transparent;
box-shadow: none;
}
.premium-sidebar .module-nav-button:focus:not(:focus-visible),
.premium-sidebar .premium-nav-group-head:focus:not(:focus-visible),
body.sidebar-compact .premium-sidebar .module-nav-button:focus:not(:focus-visible),
body.sidebar-compact .premium-sidebar .premium-nav-group-head:focus:not(:focus-visible),
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-nav-button:focus:not(:focus-visible),
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-group-head:focus:not(:focus-visible) {
outline: none;
}
.premium-sidebar .module-nav-button:focus-visible,
.premium-sidebar .premium-nav-group-head:focus-visible,
body.sidebar-compact .premium-sidebar .module-nav-button:focus-visible,
body.sidebar-compact .premium-sidebar .premium-nav-group-head:focus-visible,
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-nav-button:focus-visible,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-group-head:focus-visible {
outline: 2px solid rgba(152, 203, 255, 0.72);
outline-offset: 2px;
}
.premium-sidebar .module-nav-button span,
body.sidebar-compact .premium-sidebar .module-nav-button span,
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-nav-button span {
font-size: clamp(0.8rem, 0.74vw, 0.92rem);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.08;
}
.premium-sidebar .module-nav-button[data-nav-count]::after,
body.sidebar-compact .premium-sidebar .module-nav-button[data-nav-count]::after,
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-nav-button[data-nav-count]::after {
min-width: 1.38rem;
height: 1.38rem;
font-size: 0.68rem;
line-height: 1;
}
.premium-sidebar .module-nav-button.active::before,
body.sidebar-compact .premium-sidebar .module-nav-button.active::before,
:is(body.task-mode, body.simple-mode) .premium-sidebar .module-nav-button.active::before {
left: -0.74rem;
height: 1.1rem;
}
/* Premium sidebar group parity: all collapsed/open groups use the same compact rhythm. */
.premium-sidebar .premium-nav-group:not([open]) .premium-nav-group-head,
body.sidebar-compact .premium-sidebar .premium-nav-group:not([open]) .premium-nav-group-head,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-group:not([open]) .premium-nav-group-head {
min-height: 2.34rem;
padding-block: 0.24rem;
}
.premium-sidebar .premium-nav-group[open] .module-nav-button + .module-nav-button,
body.sidebar-compact .premium-sidebar .premium-nav-group[open] .module-nav-button + .module-nav-button,
:is(body.task-mode, body.simple-mode) .premium-sidebar .premium-nav-group[open] .module-nav-button + .module-nav-button {
margin-top: 0.12rem;
}
/* Premium sidebar icon cleanup: navigation markers are stable chips, not decorative CSS art. */
.premium-sidebar :is(
.premium-nav-icon-overview,
.premium-nav-icon-governance,
.premium-nav-icon-discovery,
.premium-nav-icon-firewall,
.premium-nav-icon-quality,
.premium-nav-icon-reporting,
.premium-nav-icon-setup
)::before {
clip-path: none;
mask: none;
transform: none;
}
/* Reporting workbench density: keep the story task-first, with depth behind drawers. */
.reporting-workbench-screen {
gap: 0.9rem;
}
.reporting-workbench-screen > .module-hero {
display: none;
}
.report-briefing-workbench {
grid-template-columns: 1fr;
gap: clamp(0.85rem, 1.2vw, 1.15rem);
padding: clamp(1rem, 1.45vw, 1.35rem);
}
.report-briefing-workbench .report-hero-copy {
gap: 0.75rem;
}
.report-briefing-workbench .report-hero-copy h3 {
max-width: 18ch;
font-size: clamp(2.15rem, 3.1vw, 3.45rem);
}
.report-briefing-workbench .report-hero-intro,
.report-briefing-workbench .highlight-list {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 0.75rem;
}
.report-briefing-workbench .report-hero-intro-head {
grid-template-columns: minmax(0, 1fr);
}
.report-briefing-workbench .report-hero-intro-meta {
justify-content: flex-start;
}
.report-briefing-workbench .report-hero-intro-card,
.report-briefing-workbench .report-hero-intro-card-lead,
.report-briefing-workbench .highlight-item,
.report-briefing-workbench .highlight-item-feature {
grid-column: auto;
}
.report-briefing-workbench .report-hero-intro-card,
.report-briefing-workbench .highlight-item {
min-height: 0;
padding: 0.82rem 0.9rem;
border-radius: 18px;
}
.report-briefing-workbench .report-hero-intro-title {
font-size: clamp(1.08rem, 1.35vw, 1.36rem);
}
.report-briefing-workbench .report-hero-intro-copy,
.report-briefing-workbench .highlight-item-copy {
font-size: 0.9rem;
line-height: 1.42;
}
.report-publish-panel {
display: grid;
align-content: start;
gap: 0.75rem;
min-width: 0;
}
.report-publish-panel .section-heading {
gap: 0.2rem;
}
.report-publish-panel #report-posture-score {
max-width: 14rem;
}
.report-publish-panel .score-dial-shell {
grid-template-columns: minmax(7rem, 0.75fr) minmax(0, 1fr);
gap: 0.7rem;
}
.report-publish-panel .score-ring {
width: min(8.2rem, 30vw);
height: min(8.2rem, 30vw);
}
.report-publish-panel .score-value {
font-size: clamp(2.25rem, 4vw, 3.2rem);
}
.report-publish-panel .command-note-stack {
gap: 0.55rem;
}
.report-publish-panel .command-note {
padding: 0.72rem 0.82rem;
border-radius: 15px;
}
.report-publish-stack {
gap: 0.55rem;
}
.report-publish-primary,
.report-publish-stack .report-action-disclosure {
padding: 0.72rem;
border-radius: 18px;
}
.report-publish-primary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.7rem;
align-items: center;
}
.report-publish-primary .report-actions,
.report-publish-stack .report-actions-secondary {
gap: 0.45rem;
}
.report-publish-primary .button,
.report-publish-stack .report-actions-secondary .button {
min-height: 2.35rem;
padding: 0.5rem 0.78rem;
white-space: nowrap;
}
.report-publish-stack .report-action-disclosure summary {
min-height: 2.25rem;
padding: 0;
}
.report-decision-strip {
position: relative;
top: auto;
z-index: 1;
gap: 0.72rem;
padding: 0.9rem;
overflow: visible;
background:
radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 32%),
linear-gradient(
155deg,
color-mix(in srgb, var(--surface-premium) 99%, var(--bg)),
color-mix(in srgb, var(--surface-card) 98%, var(--bg))
),
var(--surface-premium);
backdrop-filter: none;
}
.report-decision-strip::before {
opacity: 0.36;
}
.report-decision-strip .section-heading {
gap: 0.24rem;
}
.report-decision-strip .controls-panel-copy {
margin: 0;
}
.report-decision-strip-head {
grid-template-columns: minmax(0, 1fr);
gap: 0.65rem;
}
.report-focus-pill-row {
display: flex;
gap: 0.48rem;
overflow-x: auto;
padding-bottom: 0.12rem;
scrollbar-width: thin;
}
.report-focus-pill-row .report-focus-button {
flex: 0 0 min(13.5rem, 46vw);
min-height: 3rem;
padding: 0.6rem 0.72rem;
border-radius: 16px;
}
.report-focus-pill-row .report-focus-button small {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.25;
}
.report-decision-strip .report-search-field {
max-width: 100%;
}
.report-decision-grid {
grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
gap: 0.58rem;
}
.report-decision-grid .controls-overview-card {
min-height: 0;
padding: 0.78rem 0.82rem;
border-radius: 18px;
background:
linear-gradient(
155deg,
color-mix(in srgb, var(--surface-card) 96%, var(--bg)),
color-mix(in srgb, var(--surface-premium-strong) 96%, var(--bg))
),
var(--surface-card);
}
.report-decision-grid .controls-overview-value {
font-size: clamp(1.38rem, 2.2vw, 2rem);
}
.report-focused-surface {
grid-template-columns: minmax(0, 1fr);
gap: 0.85rem;
}
.report-focused-surface > .report-card {
min-width: 0;
padding: clamp(1rem, 1.25vw, 1.25rem);
}
.report-focused-surface > .report-card.hidden {
display: none;
}
.report-detail-drawer {
margin-top: 0.75rem;
}
@media (max-width: 1420px) {
.report-briefing-workbench,
.report-publish-primary,
.report-publish-panel .score-dial-shell {
grid-template-columns: 1fr;
}
.report-publish-panel #report-posture-score {
max-width: none;
}
}
@media (max-width: 760px) {
.report-decision-strip {
position: relative;
top: auto;
}
.report-focus-pill-row .report-focus-button {
flex-basis: min(12rem, 78vw);
}
.report-publish-primary .report-actions,
.report-publish-stack .report-actions-secondary {
display: grid;
}
.report-publish-primary .button,
.report-publish-stack .report-actions-secondary .button {
width: 100%;
white-space: normal;
}
}
/* Work-surface windows must beat focused task-flow density rules. */
body.work-surface-drawer-open .module-screen.active {
transform: none !important;
will-change: opacity;
}
body.work-surface-drawer-open .module-screen.active > * {
transform: none !important;
}
body.work-surface-drawer-open
:is(.workspace-shell, .workspace-main, .workspace-content, .module-screen.active) {
contain: none !important;
filter: none !important;
perspective: none !important;
transform: none !important;
}
body.work-surface-drawer-open :is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] {
position: fixed !important;
inset: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)) !important;
z-index: 1200 !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
min-height: 0 !important;
overflow: auto !important;
display: block !important;
opacity: 1 !important;
transform: none !important;
scrollbar-gutter: stable;
}
body.work-surface-drawer-open :is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] {
position: fixed !important;
inset: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)) !important;
z-index: 1300 !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
min-height: 0 !important;
overflow: auto !important;
overscroll-behavior: contain;
}
body.work-surface-drawer-open :is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] .module-grid,
body.work-surface-drawer-open :is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] .compact-form,
body.work-surface-drawer-open :is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] .table-shell {
width: 100%;
max-width: none;
}
body.work-surface-drawer-open :is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] .table-shell table {
min-width: max(68rem, 100%);
}
body.work-surface-drawer-open :is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] > summary {
position: sticky;
top: 0;
z-index: 2;
}
@media (max-width: 760px) {
.platform-manual-hero,
.platform-manual-layout,
.platform-manual-section-head {
grid-template-columns: 1fr;
}
.platform-manual-layout {
display: grid;
}
.platform-manual-toc {
position: relative;
top: auto;
}
.platform-manual-toc-list {
grid-template-columns: 1fr;
}
.platform-manual-section-head {
display: grid;
}
.platform-manual-section-head .button {
width: 100%;
}
body.work-surface-drawer-open :is(
.report-detail-drawer,
.discovery-detail-drawer,
.accountability-detail-drawer,
.integration-detail-drawer,
.risk-detail-drawer,
.incident-detail-drawer,
.evidence-detail-drawer,
.governance-detail-drawer,
.requirement-detail-drawer,
.assurance-detail-drawer
).work-surface-drawer-portal[open] {
inset: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left)) !important;
width: auto !important;
max-width: none !important;
min-height: 0;
}
.work-surface-drawer-close {
float: none;
width: 100%;
margin: 0.8rem 0 1rem;
}
}