/* =============================================================
VERDICT TERMINAL — v2 (Bloomberg-style three-column reskin)
All classes prefixed .v2- to avoid colliding with legacy CSS.
Loaded AFTER styles.css + verdict.css, so any legacy .tm-* or
.uw-* rules only touch the hidden legacy mount.
============================================================= */
/* ---------- TOKENS (v36.120 — cobalt structure + neon verdict) ---------- */
:root {
--v2-bg: #060810;
--v2-bg-2: #080B18;
--v2-panel: #0B0F1A;
--v2-panel-2: #0F1425;
--v2-panel-3: #141B30;
--v2-line: rgba(59, 101, 255, 0.16);
--v2-line-strong: rgba(59, 101, 255, 0.30);
--v2-line-muted: rgba(140, 155, 200, 0.08);
--v2-text: #E9ECF2;
--v2-text-2: #B4BCD0;
--v2-muted: #6B7590;
--v2-faint: #3E4665;
/* Cobalt — structural. Buttons, focus rings, active states, borders. */
--v2-teal: #1E4CFF;
--v2-teal-2: #3B65FF;
--v2-teal-glow: rgba(30, 76, 255, 0.28);
--v2-teal-soft: rgba(30, 76, 255, 0.08);
/* Neon — reserved for verdict moments only (score, stamp, pass state). */
--v2-neon: #A6F04A;
--v2-neon-2: #C4FF6E;
--v2-neon-glow: rgba(166, 240, 74, 0.35);
--v2-fail: #FF5C7A;
--v2-caution: #FFB84A;
--v2-pass: #A6F04A;
--v2-elite: #6EA0FF;
--v2-tier: var(--v2-teal); /* updated live by JS */
--v2-radius: 12px;
--v2-radius-sm: 8px;
--v2-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 24px rgba(0,0,0,0.28);
--v2-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
--v2-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* ---------- SHELL ---------- */
html, body { background: var(--v2-bg); color: var(--v2-text); font-family: var(--v2-sans); }
body.v2-body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(1200px 700px at 15% -10%, rgba(30,76,255,0.055), transparent 60%),
radial-gradient(1000px 600px at 110% 110%, rgba(30,76,255,0.035), transparent 60%),
var(--v2-bg);
-webkit-font-smoothing: antialiased;
font-size: 14px;
letter-spacing: 0.005em;
}
/* subtle matrix grid */
body.v2-body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(59,101,255,0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,101,255,0.028) 1px, transparent 1px);
background-size: 48px 48px;
z-index: 0;
}
.v2-shell {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 220px 1fr;
min-height: 100vh;
gap: 0;
}
/* ---------- SIDEBAR ---------- */
.v2-sidebar {
display: flex;
flex-direction: column;
padding: 20px 16px 16px;
border-right: 1px solid var(--v2-line);
background: linear-gradient(180deg, rgba(15,21,25,0.6), rgba(10,15,20,0.6));
backdrop-filter: blur(6px);
min-height: 100vh;
}
.v2-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--v2-text);
padding: 4px 6px 20px;
border-bottom: 1px solid var(--v2-line);
margin-bottom: 16px;
}
.v2-logo__mark {
color: var(--v2-teal);
filter: drop-shadow(0 0 8px var(--v2-teal-glow));
display: inline-flex;
}
.v2-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.v2-logo__name {
font-family: var(--v2-mono);
font-weight: 700;
letter-spacing: 0.10em;
font-size: 15px;
}
.v2-logo__sub {
font-size: 9.5px;
letter-spacing: 0.14em;
color: var(--v2-muted);
margin-top: 3px;
}
.v2-nav {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 20px;
}
.v2-nav__item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--v2-radius-sm);
color: var(--v2-text-2);
font: 500 13px/1 var(--v2-sans);
text-align: left;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.v2-nav__item svg { color: var(--v2-muted); flex-shrink: 0; }
.v2-nav__item:hover:not(.is-disabled):not(.is-active) {
background: var(--v2-panel-2);
color: var(--v2-text);
}
.v2-nav__item.is-active {
background: var(--v2-teal-soft);
color: var(--v2-teal);
border-color: var(--v2-line-strong);
}
.v2-nav__item.is-active svg { color: var(--v2-teal); }
.v2-nav__item.is-disabled {
color: var(--v2-faint);
cursor: not-allowed;
}
.v2-nav__item.is-disabled svg { color: var(--v2-faint); }
.v2-persona-block {
margin-bottom: auto;
padding-top: 12px;
border-top: 1px solid var(--v2-line);
}
.v2-persona-label {
font-family: var(--v2-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--v2-muted);
padding: 0 4px 8px;
}
.v2-persona-group {
display: flex;
flex-direction: column;
background: var(--v2-panel);
border: 1px solid var(--v2-line);
border-radius: var(--v2-radius-sm);
padding: 3px;
gap: 2px;
}
.v2-persona-btn {
background: transparent;
border: none;
color: var(--v2-text-2);
padding: 8px 10px;
border-radius: 6px;
font: 500 12.5px/1 var(--v2-sans);
text-align: left;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.v2-persona-btn:hover { color: var(--v2-text); background: var(--v2-panel-2); }
.v2-persona-btn.is-active {
background: var(--v2-teal);
color: #062024;
font-weight: 600;
}
/* --- Persona tree (v36.118 sidebar refactor) --- */
.v2-persona-block--tree { margin-bottom: auto; padding-top: 12px; border-top: 1px solid var(--v2-line); }
.v2-persona-tree {
display: flex; flex-direction: column; gap: 4px;
background: transparent; border: none; padding: 0;
}
.v2-persona-group__wrap { display: flex; flex-direction: column; }
.v2-persona-head {
display: flex; align-items: center; gap: 8px;
background: transparent; border: 1px solid transparent;
color: var(--v2-text-2);
padding: 8px 10px; border-radius: 6px;
font: 600 12.5px/1 var(--v2-sans);
letter-spacing: 0.02em;
text-align: left; cursor: pointer; width: 100%;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.v2-persona-head:hover { color: var(--v2-text); background: var(--v2-panel); }
.v2-persona-head.is-active {
color: var(--v2-teal);
background: rgba(59, 101, 255, 0.06);
border-color: rgba(59, 101, 255, 0.18);
}
.v2-persona-caret {
transition: transform 180ms ease;
color: var(--v2-muted);
transform: rotate(-90deg);
flex-shrink: 0;
}
.v2-persona-head[aria-expanded="true"] .v2-persona-caret { transform: rotate(0); color: var(--v2-teal); }
.v2-persona-count {
margin-left: auto;
font: 500 10px/1 var(--v2-mono);
color: var(--v2-muted);
padding: 3px 6px;
border: 1px solid var(--v2-line);
border-radius: 4px;
}
.v2-persona-head.is-active .v2-persona-count { color: var(--v2-teal); border-color: rgba(59, 101, 255, 0.25); }
.v2-persona-children {
display: none;
flex-direction: column;
gap: 1px;
padding: 4px 0 6px 22px;
margin: 2px 0 4px;
border-left: 1px solid var(--v2-line);
margin-left: 12px;
}
.v2-persona-group__wrap[data-persona] .v2-persona-head[aria-expanded="true"] + .v2-persona-children { display: flex; }
.v2-lane-item {
background: transparent; border: none;
color: var(--v2-muted);
padding: 6px 10px; border-radius: 5px;
font: 500 12px/1.2 var(--v2-sans);
text-align: left; cursor: pointer; width: 100%;
transition: background 120ms ease, color 120ms ease;
}
.v2-lane-item:hover { color: var(--v2-text); background: var(--v2-panel); }
.v2-lane-item.is-active {
color: var(--v2-teal);
background: rgba(59, 101, 255, 0.08);
font-weight: 600;
}
/* --- Signed-in chip --- */
.v2-signed-in { padding: 6px 4px 10px; }
.v2-signed-in__lbl { font: 500 9.5px/1 var(--v2-mono); letter-spacing: 0.16em; color: var(--v2-muted); margin-bottom: 4px; }
.v2-signed-in__name { font: 600 12.5px/1.2 var(--v2-sans); color: var(--v2-text); }
/* --- Welcome splash (v36.118) --- */
.v2-welcome {
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 50% 50%, rgba(15, 21, 25, 0.94), rgba(10, 15, 20, 0.98));
backdrop-filter: blur(8px);
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 400ms ease;
}
.v2-welcome.is-on { opacity: 1; pointer-events: auto; }
.v2-welcome__inner { text-align: center; transform: translateY(6px); opacity: 0; transition: opacity 500ms ease 100ms, transform 500ms ease 100ms; }
.v2-welcome.is-on .v2-welcome__inner { opacity: 1; transform: translateY(0); }
.v2-welcome__eyebrow {
font: 500 11px/1 var(--v2-mono);
letter-spacing: 0.22em;
color: var(--v2-teal);
margin-bottom: 14px;
text-transform: uppercase;
}
.v2-welcome__title {
font: 600 clamp(30px, 5vw, 46px)/1.15 var(--v2-mono);
color: var(--v2-text);
letter-spacing: 0.01em;
margin: 0;
}
.v2-welcome__name { color: var(--v2-teal); text-shadow: 0 0 24px rgba(59, 101, 255, 0.45); }
.v2-welcome__sub { margin-top: 12px; font: 500 12.5px/1.4 var(--v2-sans); color: var(--v2-muted); letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) {
.v2-welcome, .v2-welcome__inner, .v2-persona-caret { transition: none; }
}
.v2-sidebar-foot {
padding-top: 14px;
border-top: 1px solid var(--v2-line);
}
.v2-user-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 6px;
}
.v2-user-pill__avatar {
width: 34px; height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--v2-teal), var(--v2-teal-2));
color: #052224;
display: grid; place-items: center;
font: 700 11px/1 var(--v2-mono);
letter-spacing: 0.06em;
}
.v2-user-pill__meta { line-height: 1.15; }
.v2-user-pill__name { font-size: 13px; font-weight: 600; color: var(--v2-text); }
.v2-user-pill__role { font-size: 11px; color: var(--v2-muted); }
.v2-version {
font: 500 10px/1 var(--v2-mono);
color: var(--v2-faint);
letter-spacing: 0.10em;
padding: 6px 6px 0;
}
/* ---------- MAIN ---------- */
.v2-main {
display: flex;
flex-direction: column;
min-width: 0;
padding: 16px 18px 12px;
gap: 14px;
min-height: 100vh;
}
/* ---------- TOP BAR ---------- */
.v2-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 4px 4px 4px 6px;
}
.v2-session {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--v2-muted);
font: 500 11.5px/1 var(--v2-mono);
letter-spacing: 0.08em;
}
.v2-session__id {
color: var(--v2-text-2);
position: relative;
}
.v2-session__id::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--v2-teal);
box-shadow: 0 0 8px rgba(59, 101, 255, 0.7);
margin-right: 7px;
vertical-align: baseline;
transform: translateY(-1px);
animation: v2-session-blink 2.4s ease-in-out infinite;
}
@keyframes v2-session-blink {
0%, 100% { opacity: 0.35; box-shadow: 0 0 4px rgba(59, 101, 255, 0.4); }
50% { opacity: 1; box-shadow: 0 0 10px rgba(59, 101, 255, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
.v2-session__id::before { animation: none; opacity: 0.8; }
}
.v2-session__sep { color: var(--v2-faint); }
.v2-session__saved { color: var(--v2-teal); font-weight: 500; }
.v2-session__check { color: var(--v2-teal); display: inline-flex; }
.v2-top-actions { display: inline-flex; gap: 8px; }
/* ---------- BUTTONS ---------- */
.v2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 14px;
border-radius: 8px;
font: 600 12.5px/1 var(--v2-sans);
letter-spacing: 0.02em;
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--v2-text);
transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.v2-btn:hover { transform: translateY(-0.5px); }
.v2-btn:active { transform: translateY(0.5px); }
.v2-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.v2-btn--ghost {
border-color: var(--v2-line);
color: var(--v2-text-2);
background: rgba(255,255,255,0.01);
}
.v2-btn--ghost:hover { border-color: var(--v2-line-strong); color: var(--v2-text); }
.v2-btn--ghost svg { color: var(--v2-muted); }
.v2-btn--ghost-accent {
border-color: var(--v2-line-strong);
color: var(--v2-teal);
background: var(--v2-teal-soft);
}
.v2-btn--ghost-accent:hover {
border-color: var(--v2-teal);
box-shadow: 0 0 0 3px var(--v2-teal-soft);
}
.v2-btn--outline {
border-color: var(--v2-line-strong);
color: var(--v2-teal);
background: transparent;
width: 100%;
padding: 11px 14px;
}
.v2-btn--outline:hover {
background: var(--v2-teal-soft);
border-color: var(--v2-teal);
}
.v2-btn--run {
position: relative;
border-color: var(--v2-line-strong);
color: var(--v2-teal);
background: transparent;
width: 100%;
padding: 13px 44px 13px 16px;
font-size: 13px;
letter-spacing: 0.14em;
font-family: var(--v2-mono);
font-weight: 600;
margin-top: 12px;
gap: 10px;
}
.v2-btn--run:hover {
background: var(--v2-teal-soft);
border-color: var(--v2-teal);
box-shadow: 0 0 24px var(--v2-teal-glow);
}
.v2-btn--run__label { display: inline-flex; }
.v2-btn--run__kbd {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
min-width: 22px;
height: 22px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--v2-line);
border-radius: 4px;
color: var(--v2-muted);
font: 500 12px/1 var(--v2-mono);
background: rgba(59, 101, 255, 0.05);
letter-spacing: 0;
transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.v2-btn--run:hover .v2-btn--run__kbd {
color: var(--v2-teal);
border-color: var(--v2-teal);
background: rgba(59, 101, 255, 0.10);
}
.v2-btn--filled {
background: var(--v2-teal);
color: #052224;
border-color: var(--v2-teal);
padding: 11px 18px;
font-weight: 700;
letter-spacing: 0.03em;
}
.v2-btn--filled:hover:not(:disabled) {
background: var(--v2-teal-2);
border-color: var(--v2-teal-2);
box-shadow: 0 0 20px var(--v2-teal-glow);
}
.v2-btn--filled:disabled {
background: rgba(59, 101, 255, 0.14);
color: rgba(232,240,240,0.5);
border-color: rgba(59, 101, 255, 0.14);
}
/* ---------- COLUMNS ---------- */
.v2-columns {
display: grid;
/* v36.182: verdict moved into its own results tab, so intake + notes only */
grid-template-columns: minmax(0, 1fr) 340px;
gap: 14px;
flex: 1;
min-height: 0;
}
.v2-card {
background: var(--v2-panel);
border: 1px solid var(--v2-line);
border-radius: var(--v2-radius);
padding: 16px;
display: flex;
flex-direction: column;
min-width: 0;
box-shadow: var(--v2-shadow);
}
.v2-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 14px;
border-bottom: 1px solid var(--v2-line-muted);
margin-bottom: 14px;
}
.v2-card__head--center { justify-content: center; }
.v2-card__title {
display: inline-flex;
align-items: center;
gap: 8px;
font: 700 11px/1 var(--v2-mono);
letter-spacing: 0.16em;
color: var(--v2-teal);
}
.v2-card__title svg { color: var(--v2-teal); opacity: 0.85; }
.v2-card__action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 8px;
background: transparent;
border: 1px solid var(--v2-line);
border-radius: 6px;
color: var(--v2-muted);
font: 500 11px/1 var(--v2-sans);
cursor: pointer;
transition: color 120ms ease, border-color 120ms ease;
}
.v2-card__action:hover { color: var(--v2-teal); border-color: var(--v2-line-strong); }
/* ---------- VERDICT PANE ---------- */
.v2-verdict-pane { padding: 20px 18px; }
.v2-gauge-wrap {
position: relative;
width: 236px;
height: 236px;
margin: 14px auto 10px;
color: var(--v2-tier);
filter: drop-shadow(0 0 22px rgba(59, 101, 255, 0.10));
}
.v2-gauge-wrap.is-live {
filter: drop-shadow(0 0 26px rgba(59, 101, 255, 0.28));
}
.v2-gauge__svg { width: 100%; height: 100%; display: block; }
.v2-gauge__arc {
transition:
stroke-dasharray 1100ms cubic-bezier(0.22, 0.61, 0.36, 1),
stroke 300ms ease;
}
.v2-gauge__center {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
pointer-events: none;
}
.v2-gauge__score {
font: 700 76px/1 var(--v2-mono);
color: var(--v2-tier);
letter-spacing: -0.02em;
text-shadow:
0 0 24px rgba(59, 101, 255, 0.28),
0 0 6px rgba(232, 240, 240, 0.18);
transition: text-shadow 300ms ease, color 200ms ease;
}
.v2-gauge-wrap.is-live .v2-gauge__score {
text-shadow:
0 0 38px color-mix(in srgb, var(--v2-tier) 55%, transparent),
0 0 12px color-mix(in srgb, var(--v2-tier) 30%, transparent),
0 1px 0 rgba(232, 240, 240, 0.10);
}
.v2-gauge__of {
font: 500 11px/1 var(--v2-mono);
color: var(--v2-muted);
letter-spacing: 0.18em;
margin-top: 2px;
}
.v2-tier { text-align: center; margin: 4px 0 12px; }
.v2-tier__label {
font: 700 14px/1.2 var(--v2-mono);
color: var(--v2-tier);
letter-spacing: 0.16em;
}
.v2-tier__sub {
font: 500 11.5px/1.4 var(--v2-sans);
color: var(--v2-muted);
margin-top: 5px;
letter-spacing: 0.02em;
}
.v2-risk {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--v2-line);
border-radius: 8px;
margin: 4px 0 14px;
background: var(--v2-panel-2);
color: var(--v2-text-2);
cursor: default;
}
.v2-risk[data-level="low"] { border-color: rgba(74,222,128,0.24); }
.v2-risk[data-level="low"] .v2-risk__icon { color: var(--v2-pass); }
.v2-risk[data-level="low"] .v2-risk__label { color: var(--v2-pass); }
.v2-risk[data-level="moderate"] { border-color: rgba(251,191,36,0.28); }
.v2-risk[data-level="moderate"] .v2-risk__icon { color: var(--v2-caution); }
.v2-risk[data-level="moderate"] .v2-risk__label { color: var(--v2-caution); }
.v2-risk[data-level="high"] { border-color: rgba(248,113,113,0.28); }
.v2-risk[data-level="high"] .v2-risk__icon { color: var(--v2-fail); }
.v2-risk[data-level="high"] .v2-risk__label { color: var(--v2-fail); }
.v2-risk__icon { color: var(--v2-muted); display: inline-flex; }
.v2-risk__body { flex: 1; min-width: 0; }
.v2-risk__label { font: 700 10.5px/1 var(--v2-mono); letter-spacing: 0.14em; }
.v2-risk__hint { font-size: 11px; color: var(--v2-muted); margin-top: 3px; line-height: 1.35; }
.v2-risk__chev { color: var(--v2-faint); font-size: 16px; }
.v2-kpis {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.v2-kpi {
background: var(--v2-panel-2);
border: 1px solid var(--v2-line-muted);
border-radius: 8px;
padding: 10px 12px 12px;
min-width: 0;
}
.v2-kpi__lbl {
font: 600 9.5px/1.25 var(--v2-mono);
letter-spacing: 0.12em;
color: var(--v2-muted);
margin-bottom: 6px;
min-height: 2.5em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-transform: uppercase;
}
.v2-kpi__val {
font: 700 16px/1.1 var(--v2-mono);
color: var(--v2-text);
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-kpi__val--good { color: var(--v2-pass); }
.v2-kpi__val--warn { color: var(--v2-caution); }
.v2-kpi__val--bad { color: var(--v2-fail); }
.v2-verdict-pane__view { margin-top: auto; }
/* ---------- INTAKE PANE ---------- */
.v2-intake-pane { min-width: 0; }
.v2-intake__body {
display: flex;
flex-direction: column;
gap: 18px;
overflow-y: auto;
min-height: 0;
padding-right: 4px;
}
.v2-intake__body::-webkit-scrollbar { width: 6px; }
.v2-intake__body::-webkit-scrollbar-track { background: transparent; }
.v2-intake__body::-webkit-scrollbar-thumb { background: rgba(59, 101, 255, 0.10); border-radius: 3px; }
.v2-intake__body::-webkit-scrollbar-thumb:hover { background: rgba(59, 101, 255, 0.20); }
.v2-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.v2-section__title {
font: 700 10.5px/1 var(--v2-mono);
letter-spacing: 0.18em;
color: var(--v2-teal);
padding-bottom: 4px;
border-bottom: 1px dashed var(--v2-line);
}
.v2-field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
}
.v2-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.v2-field--wide { grid-column: 1 / -1; }
.v2-field__lbl {
font: 500 11px/1.2 var(--v2-sans);
color: var(--v2-text-2);
letter-spacing: 0.02em;
}
.v2-input {
width: 100%;
padding: 9px 11px;
background: var(--v2-panel-2);
border: 1px solid var(--v2-line);
border-radius: 7px;
color: var(--v2-text);
font: 500 13px/1.2 var(--v2-mono);
transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
min-width: 0;
appearance: none;
-webkit-appearance: none;
}
.v2-input::placeholder { color: var(--v2-faint); font-family: var(--v2-sans); }
.v2-input:focus {
outline: none;
border-color: var(--v2-teal);
box-shadow: 0 0 0 3px var(--v2-teal-soft);
background: var(--v2-panel-3);
}
select.v2-input {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
font-family: var(--v2-sans);
}
.v2-input-wrap {
position: relative;
display: flex;
align-items: stretch;
}
.v2-input-wrap .v2-input {
padding-left: 26px;
padding-right: 11px;
}
.v2-input-wrap .v2-input:not(.v2-input--money) { padding-left: 11px; padding-right: 40px; }
.v2-input-pre, .v2-input-post {
position: absolute;
top: 50%;
transform: translateY(-50%);
font: 500 12px/1 var(--v2-mono);
color: var(--v2-muted);
pointer-events: none;
}
.v2-input-pre { left: 11px; }
.v2-input-post { right: 11px; }
.v2-field--toggle {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 8px 11px;
background: var(--v2-panel-2);
border: 1px solid var(--v2-line);
border-radius: 7px;
}
.v2-field--toggle .v2-field__lbl { margin: 0; }
.v2-toggle {
width: 40px; height: 22px;
border-radius: 12px;
background: rgba(140,170,180,0.14);
border: 1px solid var(--v2-line);
position: relative;
cursor: pointer;
padding: 0;
transition: background 140ms ease, border-color 140ms ease;
}
.v2-toggle__knob {
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--v2-text-2);
transition: transform 160ms ease, background 160ms ease;
}
.v2-toggle.is-on { background: var(--v2-teal-soft); border-color: var(--v2-teal); }
.v2-toggle.is-on .v2-toggle__knob { transform: translateX(18px); background: var(--v2-teal); }
/* ---------- NOTES PANE ---------- */
.v2-notes__body {
display: flex;
flex-direction: column;
gap: 16px;
overflow-y: auto;
min-height: 0;
padding-right: 4px;
}
.v2-notes__body::-webkit-scrollbar { width: 6px; }
.v2-notes__body::-webkit-scrollbar-thumb { background: rgba(59, 101, 255, 0.10); border-radius: 3px; }
.v2-ai-summary {
background: var(--v2-panel-2);
border: 1px solid var(--v2-line);
border-radius: 8px;
padding: 12px;
}
.v2-ai-summary__label,
.v2-hl__label,
.v2-nl__label {
font: 700 10px/1 var(--v2-mono);
letter-spacing: 0.18em;
color: var(--v2-teal);
margin-bottom: 8px;
}
.v2-ai-summary__row { display: flex; gap: 10px; align-items: flex-start; }
.v2-ai-summary__text {
flex: 1;
font: 500 12px/1.55 var(--v2-sans);
color: var(--v2-text-2);
margin: 0;
letter-spacing: 0.005em;
}
.v2-ai-summary__glyph {
color: var(--v2-teal);
opacity: 0.55;
flex-shrink: 0;
filter: drop-shadow(0 0 6px var(--v2-teal-glow));
}
.v2-hl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v2-hl__item {
display: flex;
gap: 8px;
align-items: flex-start;
font: 500 12px/1.45 var(--v2-sans);
color: var(--v2-text-2);
}
.v2-hl__item::before {
content: "";
flex-shrink: 0;
width: 14px; height: 14px;
margin-top: 1px;
border-radius: 50%;
background: rgba(74,222,128,0.14);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
.v2-hl__item--muted { color: var(--v2-muted); }
.v2-hl__item--muted::before { background: rgba(140,170,180,0.10); background-image: none; }
.v2-hl__item--warn::before {
background: rgba(251,191,36,0.14);
background-image: url("data:image/svg+xml;utf8,");
}
.v2-hl__item--bad::before {
background: rgba(248,113,113,0.14);
background-image: url("data:image/svg+xml;utf8,");
}
.v2-nl__scroll {
display: flex;
flex-direction: column;
gap: 8px;
}
.v2-note {
background: var(--v2-panel-2);
border: 1px solid var(--v2-line-muted);
border-left: 2px solid var(--v2-teal);
border-radius: 6px;
padding: 10px 12px;
}
.v2-note__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.v2-note__title {
font: 600 12px/1 var(--v2-sans);
color: var(--v2-text);
}
.v2-note__meta {
font: 500 10px/1 var(--v2-mono);
letter-spacing: 0.08em;
color: var(--v2-muted);
}
.v2-note__body {
margin: 0;
font: 500 11.5px/1.5 var(--v2-sans);
color: var(--v2-text-2);
}
.v2-notes-pane__view { margin-top: auto; }
/* ---------- CTA BAR ---------- */
.v2-cta-bar {
background: linear-gradient(180deg, var(--v2-panel-2), var(--v2-panel));
border: 1px solid var(--v2-line);
border-radius: var(--v2-radius);
padding: 16px 20px;
display: grid;
grid-template-columns: 56px 1fr 1.4fr 1fr auto;
gap: 18px;
align-items: center;
box-shadow: var(--v2-shadow);
transition: border-color 200ms ease, background 200ms ease;
}
.v2-cta-bar__icon {
width: 56px; height: 56px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--v2-teal-soft);
color: var(--v2-teal);
border: 1px solid var(--v2-line-strong);
}
.v2-cta-bar__lead { min-width: 0; }
.v2-cta-bar__eyebrow {
font: 700 10px/1 var(--v2-mono);
letter-spacing: 0.16em;
color: var(--v2-teal);
margin-bottom: 6px;
}
.v2-cta-bar__headline {
font: 700 17px/1.15 var(--v2-sans);
color: var(--v2-text);
letter-spacing: -0.005em;
}
.v2-cta-bar__sub {
font: 500 12px/1.4 var(--v2-sans);
color: var(--v2-muted);
margin-top: 4px;
}
.v2-cta-bar__step {
min-width: 0;
padding: 0 14px;
border-left: 1px solid var(--v2-line-muted);
border-right: 1px solid var(--v2-line-muted);
}
.v2-cta-bar__step-lbl {
font: 700 9.5px/1 var(--v2-mono);
letter-spacing: 0.16em;
color: var(--v2-muted);
margin-bottom: 6px;
}
.v2-cta-bar__step-title {
font: 600 13.5px/1.2 var(--v2-sans);
color: var(--v2-text);
margin-bottom: 3px;
}
.v2-cta-bar__step-sub {
font: 500 11.5px/1.35 var(--v2-sans);
color: var(--v2-muted);
}
.v2-cta-bar__perks {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
min-width: 0;
}
.v2-cta-perk {
display: inline-flex;
align-items: center;
gap: 5px;
font: 500 11px/1 var(--v2-sans);
color: var(--v2-text-2);
padding: 5px 8px;
border: 1px solid var(--v2-line-muted);
border-radius: 6px;
background: rgba(255,255,255,0.01);
}
.v2-cta-perk svg { color: var(--v2-teal); opacity: 0.85; }
.v2-cta-bar__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}
.v2-cta-bar__learn {
font: 500 11.5px/1 var(--v2-sans);
color: var(--v2-teal);
text-decoration: none;
letter-spacing: 0.01em;
opacity: 0.85;
transition: opacity 140ms ease;
}
.v2-cta-bar__learn:hover { opacity: 1; text-decoration: underline; }
/* CTA states */
.v2-cta-bar[data-state="pass"], .v2-cta-bar[data-state="elite"] {
border-color: rgba(74,222,128,0.30);
}
.v2-cta-bar[data-state="pass"] .v2-cta-bar__icon,
.v2-cta-bar[data-state="elite"] .v2-cta-bar__icon {
color: var(--v2-pass);
background: rgba(74,222,128,0.08);
border-color: rgba(74,222,128,0.30);
}
.v2-cta-bar[data-state="pass"] .v2-cta-bar__eyebrow,
.v2-cta-bar[data-state="elite"] .v2-cta-bar__eyebrow { color: var(--v2-pass); }
.v2-cta-bar[data-state="caution"] {
border-color: rgba(251,191,36,0.32);
}
.v2-cta-bar[data-state="caution"] .v2-cta-bar__icon {
color: var(--v2-caution);
background: rgba(251,191,36,0.10);
border-color: rgba(251,191,36,0.32);
}
.v2-cta-bar[data-state="caution"] .v2-cta-bar__eyebrow { color: var(--v2-caution); }
.v2-cta-bar[data-state="caution"] .v2-cta-bar__learn { color: var(--v2-caution); }
.v2-cta-bar[data-state="fail"] {
border-color: rgba(248,113,113,0.30);
}
.v2-cta-bar[data-state="fail"] .v2-cta-bar__icon {
color: var(--v2-fail);
background: rgba(248,113,113,0.10);
border-color: rgba(248,113,113,0.30);
}
.v2-cta-bar[data-state="fail"] .v2-cta-bar__eyebrow { color: var(--v2-fail); }
.v2-cta-bar[data-state="fail"] .v2-cta-bar__learn { color: var(--v2-fail); }
/* ---------- HIDDEN LEGACY MOUNT ---------- */
.v2-legacy-mount {
position: fixed;
left: -9999px;
top: 0;
width: 1px; height: 1px;
overflow: hidden;
pointer-events: none;
visibility: hidden;
}
/* ---------- ONE-SCREEN DESKTOP FIT (v36.119) ----------
Wide + short viewports (laptops): collapse the entire VERDICT page
into a single 800px viewport with no vertical scroll.
Only activates >=1200px width, so mobile/iPad remain scrollable. */
@media (min-width: 1200px) {
html, body { height: 100%; overflow: hidden; }
.v2-shell { height: 100vh; min-height: 100vh; overflow: hidden; }
.v2-sidebar { height: 100vh; min-height: 0; overflow-y: auto; }
.v2-main {
height: 100vh;
min-height: 0;
padding: 6px 14px 8px;
gap: 8px;
overflow: hidden;
}
.v2-topbar { padding: 2px 4px 2px 6px; }
.v2-columns { min-height: 0; overflow: hidden; gap: 12px; }
.v2-card { min-height: 0; overflow: hidden; }
.v2-verdict-pane, .v2-intake-pane, .v2-notes-pane {
padding: 14px 14px;
min-height: 0;
overflow-y: auto;
}
/* Compact CTA bar */
.v2-cta-bar {
padding: 10px 16px;
grid-template-columns: 44px 1fr 1.2fr 1fr auto;
gap: 14px;
}
.v2-cta-bar__icon { width: 44px; height: 44px; }
.v2-cta-bar__icon svg { width: 22px; height: 22px; }
.v2-cta-bar__eyebrow { margin-bottom: 4px; font-size: 9.5px; }
.v2-cta-bar__headline { font-size: 15px; line-height: 1.15; }
.v2-cta-bar__sub { margin-top: 2px; font-size: 11.5px; line-height: 1.35; }
.v2-cta-bar__step-lbl { margin-bottom: 4px; }
.v2-cta-bar__step-title { font-size: 12.5px; margin-bottom: 2px; }
.v2-cta-bar__step-sub { font-size: 11px; line-height: 1.3; }
.v2-cta-perk { padding: 4px 7px; font-size: 10.5px; }
.v2-cta-bar__perks { gap: 4px 8px; }
.v2-cta-bar__actions { gap: 4px; }
.v2-cta-bar__learn { font-size: 11px; }
/* Compact verdict gauge column */
.v2-gauge-wrap { max-width: 180px; margin: 0 auto; }
.v2-tier { margin: 2px 0 6px; }
.v2-tier__label { font-size: 20px; }
.v2-tier__sub { font-size: 11.5px; }
.v2-risk { padding: 7px 10px; }
.v2-risk__hint { line-height: 1.3; }
.v2-kpis { gap: 6px; }
.v2-kpi { padding: 6px 8px; }
.v2-kpi__val { font-size: 15px; }
.v2-kpi__lbl { font-size: 9.5px; }
.v2-verdict-pane__view { padding: 8px 10px; margin-top: 6px; }
.v2-verdict-pane { padding: 12px 14px; }
}
/* Very short viewports (e.g. 720p laptops) — trim gauge further */
@media (min-width: 1200px) and (max-height: 780px) {
.v2-gauge-wrap { max-width: 170px; }
.v2-verdict-pane, .v2-intake-pane, .v2-notes-pane { padding: 12px; }
.v2-main { padding: 8px 14px 8px; gap: 8px; }
.v2-cta-bar { padding: 8px 14px; }
.v2-cta-bar__icon { width: 40px; height: 40px; }
.v2-cta-bar__headline { font-size: 14px; }
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1440px) {
.v2-columns {
grid-template-columns: minmax(0, 1fr) 320px;
}
}
@media (max-width: 1200px) {
.v2-shell { grid-template-columns: 200px 1fr; }
.v2-columns { grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; }
.v2-verdict-pane, .v2-notes-pane, .v2-intake-pane { padding: 12px; }
.v2-cta-bar { grid-template-columns: 48px 1fr 1.2fr auto; gap: 12px; padding: 14px 16px; }
.v2-cta-bar__perks { display: none; }
}
@media (max-width: 1024px) {
/* iPad: intake takes the full width, notes stack below it */
.v2-columns { grid-template-columns: minmax(0, 1fr); }
.v2-intake-pane, .v2-notes-pane { grid-column: 1 / -1; }
.v2-cta-bar { grid-template-columns: 48px 1fr auto; }
.v2-cta-bar__step { display: none; }
}
@media (max-width: 860px) {
.v2-shell { grid-template-columns: 1fr; }
.v2-sidebar {
flex-direction: row;
align-items: center;
gap: 12px;
padding: 10px 14px;
min-height: 0;
border-right: none;
border-bottom: 1px solid var(--v2-line);
overflow-x: auto;
}
.v2-logo { padding: 0; margin: 0; border: none; flex-shrink: 0; }
.v2-logo__text { flex-direction: row; align-items: baseline; gap: 8px; }
.v2-logo__sub { font-size: 8.5px; margin-top: 0; }
.v2-nav { flex-direction: row; gap: 4px; margin: 0; flex-shrink: 0; }
.v2-nav__item { padding: 6px 10px; font-size: 11.5px; }
.v2-nav__item svg { display: none; }
.v2-persona-block { margin: 0; padding: 0; border: none; flex-shrink: 0; }
.v2-persona-label { display: none; }
.v2-persona-group { flex-direction: row; padding: 2px; }
.v2-persona-btn { padding: 6px 10px; font-size: 11.5px; }
.v2-persona-block--tree { display: none; }
.v2-sidebar-foot { display: none; }
.v2-columns { grid-template-columns: 1fr; }
.v2-verdict-pane, .v2-intake-pane, .v2-notes-pane { grid-column: 1 / -1; }
.v2-topbar { flex-wrap: wrap; }
.v2-cta-bar {
grid-template-columns: 48px 1fr;
gap: 12px;
}
.v2-cta-bar__step, .v2-cta-bar__perks { display: none; }
.v2-cta-bar__actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.v2-cta-bar__actions .v2-btn { flex: 1; }
.v2-main { padding: 12px; }
.v2-field-grid { grid-template-columns: 1fr; }
.v2-kpis { grid-template-columns: repeat(2, 1fr); }
}
/* =============================================================
v36.119 — Per-lane intake renderer classes
============================================================= */
/* Caption strip at top of intake body: lane label + field count */
.v119-intake__caption {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--v2-line-muted, rgba(255,255,255,0.08));
font: 700 10px/1 var(--v2-mono, ui-monospace, "SF Mono", monospace);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--v2-mut, rgba(255,255,255,0.55));
}
.v119-intake__lane { color: var(--v2-teal, #46b8b0); }
.v119-intake__meta { color: var(--v2-mut, rgba(255,255,255,0.55)); }
/* Flat single-column grid for operator lanes */
.v2-field-grid--flat {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
/* Grouped subheader (PML/JV) */
.v119-group {
margin-top: 18px;
}
.v119-group:first-child { margin-top: 0; }
.v119-group__title {
font: 700 10px/1 var(--v2-mono, ui-monospace, "SF Mono", monospace);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--v2-teal, #46b8b0);
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px dashed var(--v2-line-muted, rgba(255,255,255,0.10));
}
/* Compact checkbox grid for PML/JV closing checkpoints */
.v119-checkgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 14px;
margin-top: 6px;
}
@media (max-width: 700px) {
.v119-checkgrid { grid-template-columns: 1fr; }
}
.v119-check {
display: flex;
align-items: center;
gap: 8px;
font: 500 12px/1.35 var(--v2-sans, system-ui);
color: var(--v2-text, #e6edf3);
cursor: pointer;
padding: 4px 0;
}
.v119-check input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
border: 1.5px solid var(--v2-line, rgba(255,255,255,0.24));
border-radius: 3px;
background: transparent;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: border-color 0.15s, background 0.15s;
}
.v119-check input[type="checkbox"]:hover { border-color: var(--v2-teal, #46b8b0); }
.v119-check input[type="checkbox"]:checked {
background: var(--v2-teal, #46b8b0);
border-color: var(--v2-teal, #46b8b0);
}
.v119-check input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 3px;
top: 0px;
width: 4px;
height: 8px;
border: solid #0a0a0a;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Advanced collapsible block */
.v119-advanced {
margin-top: 16px;
border-top: 1px dashed var(--v2-line-muted, rgba(255,255,255,0.10));
padding-top: 12px;
}
.v119-advanced__summary {
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font: 700 10px/1 var(--v2-mono, ui-monospace, "SF Mono", monospace);
letter-spacing: 0.16em;
color: var(--v2-teal, #46b8b0);
text-transform: uppercase;
list-style: none;
padding: 6px 0;
user-select: none;
}
.v119-advanced__summary::-webkit-details-marker { display: none; }
.v119-advanced__caret {
display: inline-block;
width: 10px;
height: 10px;
transition: transform 0.18s ease;
}
.v119-advanced[open] .v119-advanced__caret { transform: rotate(90deg); }
.v119-advanced__label { flex: 1; }
.v119-advanced__count {
color: var(--v2-mut, rgba(255,255,255,0.5));
font-weight: 500;
letter-spacing: 0.08em;
}
.v119-advanced__body {
margin-top: 12px;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
/* ============================================================
v36.120 — Full-width Results Section
Show the Work + Insights (3 buckets) + Get Funded CTA
Cobalt/neon dark theme, appears BELOW the 3-column grid
============================================================ */
.v2-results {
--cobalt: #1E4CFF;
--cobalt-2: #3B65FF;
--cobalt-glow: rgba(30, 76, 255, 0.35);
--neon: #A6F04A;
--panel: #0B0F1A;
--panel-2: #0F1425;
--panel-3: #141B30;
--line: #1A2340;
--line-2: #243158;
--ink: #E9ECF2;
--ink-2: #B4BCD0;
--muted: #6B7590;
display: block;
padding: 40px clamp(20px, 4vw, 56px) 48px;
background: linear-gradient(180deg, #05070E 0%, #060810 50%, #08111F 100%);
border-top: 1px solid var(--line);
color: var(--ink);
}
.v2-results[data-state="empty"] { display: none; }
.v2-results__block {
max-width: 1280px;
margin: 0 auto 32px;
background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
border: 1px solid var(--line);
border-radius: 14px;
padding: 28px clamp(20px, 3vw, 36px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.v2-results__blockhead {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.v2-results__eyebrow {
font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--cobalt-2);
text-transform: uppercase;
}
.v2-results__title {
font-family: inherit;
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0;
color: var(--ink);
}
.v2-results__hint {
font-size: 13px;
color: var(--muted);
margin-left: auto;
font-style: italic;
}
/* ---- Show the Work ---- */
.v2-results__workbody {
background: var(--panel-3);
border: 1px solid var(--line);
border-radius: 10px;
padding: 20px clamp(16px, 2.5vw, 28px);
font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
font-size: 13px;
line-height: 1.65;
color: var(--ink-2);
overflow-x: auto;
}
/* Style the legacy .uw-trail markup we clone in */
.v2-results__workbody .uw-trail {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
color: var(--ink-2);
}
.v2-results__workbody .uw-trail summary,
.v2-results__workbody .uw-trail__stephead {
color: var(--ink) !important;
font-weight: 600;
cursor: pointer;
padding: 8px 0;
border-bottom: 1px dashed var(--line-2);
list-style: none;
}
.v2-results__workbody .uw-trail summary::-webkit-details-marker { display: none; }
.v2-results__workbody .uw-trail summary::before {
content: "▸ ";
color: var(--cobalt-2);
font-family: inherit;
transition: transform 0.2s ease;
}
.v2-results__workbody .uw-trail[open] > summary::before { content: "▾ "; }
.v2-results__workbody .uw-trail__step {
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.v2-results__workbody .uw-trail__step:last-child { border-bottom: none; }
.v2-results__workbody .uw-trail__stepbody {
padding: 8px 0 0 16px;
color: var(--ink-2);
font-size: 12px;
}
.v2-results__workbody .uw-trail__gates {
margin-top: 12px;
padding: 12px;
background: rgba(30, 76, 255, 0.06);
border-left: 2px solid var(--cobalt);
border-radius: 4px;
font-size: 12px;
}
.v2-results__workbody .uw-trail__verdict {
margin-top: 16px;
padding: 14px 16px;
background: rgba(166, 240, 74, 0.08);
border: 1px solid rgba(166, 240, 74, 0.25);
border-radius: 6px;
color: var(--neon);
font-weight: 700;
letter-spacing: 0.02em;
}
/* ---- Insights 3 buckets ---- */
.v2-insights__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 900px) {
.v2-insights__grid { grid-template-columns: 1fr; }
}
.v2-insights__col {
background: var(--panel-3);
border: 1px solid var(--line);
border-radius: 10px;
padding: 18px 20px;
min-height: 160px;
}
.v2-insights__col--works { border-top: 2px solid #6DAA45; }
.v2-insights__col--doesnt { border-top: 2px solid #FF5C7A; }
.v2-insights__col--improve { border-top: 2px solid #FFB84A; }
.v2-insights__collabel {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--line-2);
}
.v2-insights__dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.v2-insights__dot--good { background: #6DAA45; box-shadow: 0 0 8px rgba(109, 170, 69, 0.5); }
.v2-insights__dot--bad { background: #FF5C7A; box-shadow: 0 0 8px rgba(255, 92, 122, 0.5); }
.v2-insights__dot--fix { background: #FFB84A; box-shadow: 0 0 8px rgba(255, 184, 74, 0.5); }
.v2-insights__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.v2-insights__list li {
font-size: 13px;
line-height: 1.55;
color: var(--ink-2);
padding: 8px 12px;
background: rgba(30, 76, 255, 0.04);
border: 1px solid var(--line);
border-radius: 6px;
}
.v2-insights__list li strong {
color: var(--ink);
font-weight: 600;
}
.v2-insights__empty {
color: var(--muted) !important;
font-style: italic;
background: transparent !important;
border: 1px dashed var(--line) !important;
text-align: center;
}
/* ---- Get Funded CTA (full-width) ---- */
.v2-results__fundcta {
max-width: 1280px;
margin: 0 auto;
background: linear-gradient(135deg, #0B1B4E 0%, #0F1425 60%, #0B0F1A 100%);
border: 1px solid var(--cobalt);
border-radius: 14px;
padding: 28px clamp(20px, 3vw, 40px);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.45),
0 0 40px var(--cobalt-glow);
position: relative;
overflow: hidden;
}
.v2-results__fundcta::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 40%;
height: 100%;
background: radial-gradient(circle at 100% 50%, var(--cobalt-glow) 0%, transparent 70%);
pointer-events: none;
}
.v2-fundcta__lead {
flex: 1 1 480px;
position: relative;
z-index: 1;
}
.v2-fundcta__eyebrow {
font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--cobalt-2);
text-transform: uppercase;
margin-bottom: 8px;
}
.v2-fundcta__headline {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.25;
margin-bottom: 6px;
}
.v2-fundcta__sub {
font-size: 14px;
color: var(--ink-2);
line-height: 1.5;
max-width: 540px;
}
.v2-fundcta__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
position: relative;
z-index: 1;
}
@media (max-width: 700px) {
.v2-fundcta__actions {
align-items: stretch;
width: 100%;
}
}
.v2-fundcta__primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 10px;
background: linear-gradient(180deg, var(--cobalt-2) 0%, var(--cobalt) 100%);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.2s ease;
box-shadow: 0 8px 24px rgba(30, 76, 255, 0.4);
}
.v2-fundcta__primary:hover {
transform: translateY(-1px);
box-shadow: 0 12px 32px rgba(30, 76, 255, 0.55);
}
.v2-fundcta__learn {
font-size: 13px;
color: var(--ink-2);
text-decoration: none;
border-bottom: 1px solid var(--line-2);
padding-bottom: 2px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.v2-fundcta__learn:hover {
color: var(--cobalt-2);
border-color: var(--cobalt-2);
}
/* Mobile stacking */
@media (max-width: 700px) {
.v2-results { padding: 28px 16px 36px; }
.v2-results__block { padding: 20px 16px; margin-bottom: 20px; }
.v2-results__blockhead { flex-direction: column; align-items: flex-start; gap: 6px; }
.v2-results__hint { margin-left: 0; }
.v2-results__fundcta { padding: 22px 18px; }
.v2-fundcta__actions { align-items: stretch; }
}
/* ============================================================================
v36.171 — FUNDING ROUTER (5 questions, neon-accented, required for RUN)
Lives inside .v2-intake__body, only visible for the flip lane.
============================================================================ */
.v2-router {
margin-top: 20px;
padding: 18px 16px 14px;
border: 1px solid rgba(166, 240, 74, 0.35);
border-radius: 12px;
background:
linear-gradient(180deg, rgba(166, 240, 74, 0.06) 0%, rgba(166, 240, 74, 0.02) 100%),
var(--v2-panel, #0e1220);
box-shadow:
inset 0 1px 0 rgba(166, 240, 74, 0.10),
0 0 20px rgba(166, 240, 74, 0.06);
position: relative;
}
.v2-router::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 12px;
pointer-events: none;
background: linear-gradient(180deg, rgba(166, 240, 74, 0.45), rgba(166, 240, 74, 0));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 1px;
opacity: 0.5;
}
.v2-router__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.v2-router__eyebrow {
font: 700 11px/1 var(--v2-mono, "JetBrains Mono", ui-monospace, monospace);
letter-spacing: 0.18em;
color: var(--v2-neon, #A6F04A);
text-shadow: 0 0 8px rgba(166, 240, 74, 0.45);
}
.v2-router__hint {
font: 400 12.5px/1.45 var(--v2-sans, ui-sans-serif, system-ui, sans-serif);
color: rgba(255, 255, 255, 0.62);
}
.v2-router__q { border: 0; padding: 0; margin: 0 0 12px; }
.v2-router__qtitle {
display: block;
font: 600 12.5px/1.35 var(--v2-sans, ui-sans-serif, system-ui, sans-serif);
color: rgba(255, 255, 255, 0.92);
margin-bottom: 6px;
padding: 0;
}
.v2-router__opts {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.v2-router__opts label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
font: 500 12px/1 var(--v2-sans, ui-sans-serif, system-ui, sans-serif);
color: rgba(255, 255, 255, 0.82);
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.v2-router__opts label:hover {
border-color: rgba(166, 240, 74, 0.45);
color: #fff;
}
.v2-router__opts input[type="radio"] {
accent-color: var(--v2-neon, #A6F04A);
margin: 0;
}
.v2-router__opts label:has(input:checked) {
border-color: var(--v2-neon, #A6F04A);
background: rgba(166, 240, 74, 0.12);
color: #fff;
box-shadow: 0 0 0 1px rgba(166, 240, 74, 0.35), 0 0 10px rgba(166, 240, 74, 0.18);
}
.v2-router__q.is-missing .v2-router__qtitle::after {
content: " • required";
color: #ff7a7a;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.02em;
}
.v2-router__status {
margin-top: 8px;
font: 500 11.5px/1.3 var(--v2-mono, "JetBrains Mono", ui-monospace, monospace);
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.55);
}
.v2-router__status[data-state="ready"] {
color: var(--v2-neon, #A6F04A);
text-shadow: 0 0 6px rgba(166, 240, 74, 0.35);
}
/* Disabled RUN button when router incomplete */
.v2-btn--run.is-locked {
opacity: 0.45;
cursor: not-allowed;
filter: saturate(0.5);
}
.v2-btn--run.is-locked:hover { transform: none; }
@media (max-width: 640px) {
.v2-router { padding: 14px 12px 12px; }
.v2-router__opts label { padding: 8px 10px; font-size: 12.5px; }
}
/* ============================================================
v36.176 — STORM LAB
Resilience playground: 5 stress levers + Find My Breaking Point.
Mounts as a full-width results block, uses the same panel language
as .v2-results__block; introduces its own cobalt/amber tone scale
for live storm feedback.
============================================================ */
.v2-results__block--storm {
border-color: rgba(255, 176, 82, 0.22);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 176, 82, 0.05) inset;
}
.v2-storm__presets {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
padding: 6px;
background: var(--panel-3);
border: 1px solid var(--line);
border-radius: 12px;
}
.v2-storm__preset {
flex: 1 1 auto;
min-width: 92px;
padding: 10px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--muted);
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.v2-storm__preset:hover { color: var(--ink); background: rgba(255, 255, 255, 0.03); }
.v2-storm__preset.is-active {
background: linear-gradient(180deg, rgba(60, 130, 255, 0.16), rgba(60, 130, 255, 0.05));
border-color: rgba(60, 130, 255, 0.42);
color: var(--ink);
box-shadow: 0 0 0 1px rgba(60, 130, 255, 0.18) inset;
}
.v2-storm__preset[data-preset="heavy"].is-active,
.v2-storm__preset[data-preset="custom"].is-active {
background: linear-gradient(180deg, rgba(255, 140, 82, 0.18), rgba(255, 140, 82, 0.05));
border-color: rgba(255, 140, 82, 0.42);
box-shadow: 0 0 0 1px rgba(255, 140, 82, 0.2) inset;
}
.v2-storm__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
gap: 28px;
align-items: start;
}
@media (max-width: 900px) {
.v2-storm__body { grid-template-columns: 1fr; gap: 20px; }
}
.v2-storm__levers { display: grid; gap: 16px; }
.v2-storm__lever {
background: var(--panel-3);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
}
.v2-storm__leverhead {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 8px;
gap: 10px;
}
.v2-storm__levername {
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.01em;
}
.v2-storm__leverval {
font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
font-size: 14px;
font-weight: 700;
color: var(--cobalt-2);
font-variant-numeric: tabular-nums;
}
.v2-storm__leverfoot {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 6px;
font-size: 11.5px;
color: var(--muted);
font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
}
.v2-storm__leverfoot span:last-child { color: var(--ink); }
.v2-storm__slider {
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 4px;
background: linear-gradient(90deg, rgba(60, 130, 255, 0.35), rgba(255, 140, 82, 0.45));
border-radius: 999px;
outline: none;
cursor: pointer;
}
.v2-storm__slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ink);
border: 3px solid var(--cobalt-2);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
cursor: grab;
transition: transform 0.14s ease;
}
.v2-storm__slider::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.v2-storm__slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ink);
border: 3px solid var(--cobalt-2);
cursor: grab;
}
/* Readout strip.
This used to be a sticky right-hand column beside a tall lever stack, so it
carried `position: sticky; top: 16px; min-height: 100%`. The body is a single
column at every breakpoint now and the readout sits below the levers, so
sticky no longer has a tall sibling to travel against — it detached and the
`min-height: 100%` against an indefinite-height row let it grow on scroll.
Static block, natural height. */
.v2-storm__readout {
position: static;
height: auto;
align-self: start;
background: linear-gradient(180deg, rgba(60, 130, 255, 0.08), rgba(0, 0, 0, 0.2));
border: 1px solid rgba(60, 130, 255, 0.28);
border-radius: 12px;
padding: 20px 18px 16px;
}
.v2-storm__readout-row--hero { text-align: left; margin-bottom: 16px; }
.v2-storm__readout-label {
font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.v2-storm__readout-value {
font-family: inherit;
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
.v2-storm__readout-value[data-tone="good"] { color: #6ce49a; }
.v2-storm__readout-value[data-tone="warn"] { color: #ffb852; }
.v2-storm__readout-value[data-tone="bad"] { color: #ff6a6a; }
.v2-storm__readout-sub {
margin-top: 8px;
font-size: 12.5px;
color: var(--muted);
line-height: 1.45;
}
.v2-storm__readout-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding-top: 14px;
border-top: 1px solid rgba(60, 130, 255, 0.16);
}
.v2-storm__stat {
background: rgba(0, 0, 0, 0.28);
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 12px;
}
.v2-storm__stat-label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
.v2-storm__stat-value {
font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
font-size: 15px;
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.v2-storm__stat-value[data-tone="good"] { color: #6ce49a; }
.v2-storm__stat-value[data-tone="bad"] { color: #ff6a6a; }
.v2-storm__stat-value[data-tone="warn"] { color: #ffb852; }
/* v36.216 STORM v2 P1 · A1 — Scored Storm reference stat + Δ vs Sandbox reconciliation line.
The reference stat is visually subordinate to the four operational stats (dashed border,
softer background), signalling "this is context, not a lever result". The reconcile line
sits below the grid as a compact caption: label · value · hint, tabular. */
.v2-storm__stat--reference {
background: rgba(0, 0, 0, 0.18);
border-style: dashed;
border-color: rgba(120, 145, 200, 0.32);
}
.v2-storm__stat--reference .v2-storm__stat-label {
color: rgba(180, 195, 220, 0.72);
}
.v2-storm__reconcile {
margin-top: 10px;
padding: 8px 12px;
display: flex;
align-items: baseline;
gap: 10px;
background: rgba(0, 0, 0, 0.20);
border: 1px dashed rgba(120, 145, 200, 0.28);
border-radius: 8px;
font-size: 11.5px;
}
.v2-storm__reconcile[hidden] { display: none; }
.v2-storm__reconcile-label {
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
font-size: 10.5px;
}
.v2-storm__reconcile-value {
font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.v2-storm__reconcile-value[data-tone="good"] { color: #6ce49a; }
.v2-storm__reconcile-value[data-tone="bad"] { color: #ff6a6a; }
.v2-storm__reconcile-hint {
color: rgba(180, 195, 220, 0.68);
font-style: italic;
}
/* Breaking points */
.v2-storm__breakpoints {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.v2-storm__bp-header { margin-bottom: 14px; }
.v2-storm__bp-title {
font-size: 15px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
.v2-storm__bp-sub {
font-size: 12.5px;
color: var(--muted);
margin-top: 4px;
}
.v2-storm__bp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.v2-storm__bp {
background: var(--panel-3);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.v2-storm__bp-lever {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.v2-storm__bp-value {
font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
font-size: 18px;
font-weight: 800;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.v2-storm__bp-value[data-tone="good"] { color: #6ce49a; }
.v2-storm__bp-value[data-tone="warn"] { color: #ffb852; }
.v2-storm__bp-value[data-tone="bad"] { color: #ff6a6a; }
.v2-storm__bp-note {
font-size: 11.5px;
color: var(--muted);
line-height: 1.4;
}
@media (max-width: 640px) {
.v2-storm__preset { flex-basis: calc(50% - 8px); }
}
/* ==========================================================================
v36.180 — Math Trail: 2-column layout, no horizontal scroll, condensed copy
Left column: metric name + formula + live values stacked vertically.
Right column: result + tone label.
Applies at ALL breakpoints so iPad/mobile stop scrolling sideways.
========================================================================== */
/* Kill horizontal overflow at the wrapper level — everything wraps. */
.v2-results__workbody { overflow-x: hidden !important; }
.v2-results__workbody .uw-trail__body,
.v2-results__workbody .uw-trail__stepbody,
.v2-results__workbody .uw-trail__group,
.v2-results__workbody .uw-trail__tbl {
overflow-x: hidden;
max-width: 100%;
box-sizing: border-box;
}
/* Kill the outer block padding so the trail sits tight against Insights above. */
.v2-results__block--slim {
padding: 0 !important;
margin-top: 0.75rem;
background: transparent !important;
border: none !important;
}
.v2-results__block--slim .v2-results__workbody {
padding: 0;
margin: 0;
overflow: hidden;
}
/* Slim collapsed pill — 48px, cobalt-tinted, single line. */
.v2-results__workbody > .uw-trail {
border-radius: 10px;
border: 1px solid rgba(96, 165, 250, 0.22);
background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(9, 14, 28, 0.85));
}
.v2-results__workbody > .uw-trail > .uw-trail__head {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.75rem 1rem;
cursor: pointer;
min-height: 48px;
border-bottom: 1px solid transparent;
transition: background-color .18s ease;
}
.v2-results__workbody > .uw-trail[open] > .uw-trail__head {
border-bottom-color: rgba(96, 165, 250, 0.18);
}
.v2-results__workbody > .uw-trail > .uw-trail__head:hover {
background: rgba(96, 165, 250, 0.06);
}
.v2-results__workbody > .uw-trail .uw-trail__phase {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
font-size: 0.68rem;
letter-spacing: 0.14em;
color: rgba(96, 165, 250, 0.85);
padding: 0.18rem 0.5rem;
border: 1px solid rgba(96, 165, 250, 0.28);
border-radius: 6px;
white-space: nowrap;
}
.v2-results__workbody > .uw-trail .uw-trail__title {
font-size: 0.9rem;
font-weight: 600;
color: rgba(245, 246, 248, 0.94);
letter-spacing: 0.01em;
}
.v2-results__workbody > .uw-trail .uw-trail__meta {
font-size: 0.76rem;
color: rgba(245, 246, 248, 0.55);
margin-left: auto;
white-space: nowrap;
}
.v2-results__workbody > .uw-trail .uw-trail__chev {
color: rgba(96, 165, 250, 0.7);
font-size: 0.85rem;
transition: transform .22s ease;
padding: 0 0.15rem;
}
.v2-results__workbody > .uw-trail[open] .uw-trail__chev { transform: rotate(180deg); }
/* Expanded body — compact rhythm. */
.v2-results__workbody > .uw-trail .uw-trail__body {
padding: 0.6rem 1rem 1rem;
}
.v2-results__workbody > .uw-trail .uw-trail__step {
padding: 0.7rem 0;
gap: 0.55rem;
}
.v2-results__workbody > .uw-trail .uw-trail__stepnum {
min-width: 26px;
height: 26px;
font-size: 0.7rem;
}
.v2-results__workbody > .uw-trail .uw-trail__stephead {
font-size: 0.82rem;
margin-bottom: 0.35rem;
}
.v2-results__workbody > .uw-trail .uw-trail__stepbody { font-size: 0.8rem; }
/* ===== 2-COLUMN FORMULA TABLE ===== */
/* Force table to render as a 2-col grid with wrapping content. */
.v2-results__workbody .uw-trail__tbl--formula {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.v2-results__workbody .uw-trail__tbl--formula thead th {
padding: 0.5rem 0.6rem;
font-size: 0.68rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(245, 246, 248, 0.55);
text-align: left;
border-bottom: 1px solid rgba(96, 165, 250, 0.18);
font-weight: 600;
}
.v2-results__workbody .uw-trail__tbl--formula thead th.uw-trail__fhead--val {
text-align: right;
width: 30%;
white-space: nowrap;
}
.v2-results__workbody .uw-trail__frow {
border-bottom: 1px solid rgba(96, 165, 250, 0.10);
}
.v2-results__workbody .uw-trail__frow:last-child { border-bottom: none; }
.v2-results__workbody .uw-trail__fleft {
padding: 0.65rem 0.6rem;
vertical-align: top;
text-align: left;
width: 70%;
min-width: 0;
font-weight: 400;
}
.v2-results__workbody .uw-trail__fmetric {
font-size: 0.85rem;
font-weight: 600;
color: rgba(245, 246, 248, 0.94);
margin-bottom: 0.25rem;
line-height: 1.3;
overflow-wrap: anywhere;
word-break: break-word;
}
.v2-results__workbody .uw-trail__fexpr {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
font-size: 0.75rem;
color: rgba(96, 165, 250, 0.82);
line-height: 1.4;
overflow-wrap: anywhere;
word-break: break-word;
margin-bottom: 0.2rem;
}
.v2-results__workbody .uw-trail__flive {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
font-size: 0.72rem;
color: rgba(245, 246, 248, 0.55);
line-height: 1.4;
overflow-wrap: anywhere;
word-break: break-word;
}
.v2-results__workbody .uw-trail__rowsrc {
font-size: 0.68rem;
color: rgba(245, 246, 248, 0.4);
margin-top: 0.25rem;
font-style: italic;
overflow-wrap: anywhere;
}
.v2-results__workbody .uw-trail__fval {
padding: 0.65rem 0.6rem;
vertical-align: top;
text-align: right;
width: 30%;
white-space: nowrap;
}
.v2-results__workbody .uw-trail__fvalnum {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: rgba(245, 246, 248, 0.98);
line-height: 1.2;
}
.v2-results__workbody .uw-trail__fvaltone {
display: block;
font-size: 0.62rem;
letter-spacing: 0.09em;
text-transform: uppercase;
margin-top: 0.2rem;
opacity: 0.75;
}
/* Tone colors on the value only (row background stays neutral). */
.v2-results__workbody .uw-trail__frow--good .uw-trail__fvalnum { color: #6DAA45; }
.v2-results__workbody .uw-trail__frow--warn .uw-trail__fvalnum { color: #FFB84A; }
.v2-results__workbody .uw-trail__frow--bad .uw-trail__fvalnum { color: #FF5C7A; }
/* Transparency footer — condensed. */
.v2-results__workbody .uw-trail__transparency {
margin-top: 0.75rem;
padding: 0.55rem 0.75rem;
background: rgba(96, 165, 250, 0.05);
border: 1px solid rgba(96, 165, 250, 0.15);
border-radius: 8px;
font-size: 0.72rem;
color: rgba(245, 246, 248, 0.65);
line-height: 1.4;
display: flex;
gap: 0.4rem;
align-items: flex-start;
}
.v2-results__workbody .uw-trail__transparency-icon {
color: rgba(96, 165, 250, 0.8);
flex-shrink: 0;
}
/* iPad + phone: tighter padding, hide meta line so pill stays 1-line. */
@media (max-width: 900px) {
.v2-results__workbody > .uw-trail > .uw-trail__head {
padding: 0.65rem 0.85rem;
gap: 0.5rem;
min-height: 44px;
}
.v2-results__workbody > .uw-trail .uw-trail__meta { display: none; }
.v2-results__workbody > .uw-trail .uw-trail__title { font-size: 0.86rem; }
.v2-results__workbody > .uw-trail .uw-trail__body { padding: 0.4rem 0.75rem 0.8rem; }
.v2-results__workbody > .uw-trail .uw-trail__step { padding: 0.55rem 0; }
/* Tighter 2-col at narrow — result column shrinks slightly. */
.v2-results__workbody .uw-trail__tbl--formula thead th.uw-trail__fhead--val { width: 34%; }
.v2-results__workbody .uw-trail__fleft { width: 66%; padding: 0.55rem 0.45rem; }
.v2-results__workbody .uw-trail__fval { width: 34%; padding: 0.55rem 0.45rem; }
.v2-results__workbody .uw-trail__fmetric { font-size: 0.82rem; }
.v2-results__workbody .uw-trail__fexpr { font-size: 0.72rem; }
.v2-results__workbody .uw-trail__flive { font-size: 0.68rem; }
.v2-results__workbody .uw-trail__fvalnum { font-size: 0.88rem; }
}
/* Phone < 480: drop the eyebrow badge, tighten headers. */
@media (max-width: 480px) {
.v2-results__workbody > .uw-trail .uw-trail__phase { display: none; }
.v2-results__workbody > .uw-trail > .uw-trail__head { padding: 0.6rem 0.75rem; }
.v2-results__workbody .uw-trail__tbl--formula thead th { font-size: 0.62rem; padding: 0.4rem 0.4rem; }
.v2-results__workbody .uw-trail__tbl--formula thead th.uw-trail__fhead--val { width: 38%; }
.v2-results__workbody .uw-trail__fleft { width: 62%; }
.v2-results__workbody .uw-trail__fval { width: 38%; }
}
/* ==========================================================================
v36.180 — Insights list: prevent horizontal scroll inside columns
Long spans (dollar amounts, formulas) were overflowing narrow cols.
========================================================================== */
.v2-insights__col { overflow: hidden; }
.v2-insights__list li {
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
.v2-insights__list li strong {
overflow-wrap: anywhere;
word-break: break-word;
}
/* ==========================================================================
v36.182 — RESULTS TABS (replaces the v36.181 scroll rail)
Verdict / Insights / Math Trail / Storm Lab / Fund are real tab panels now:
exactly one is visible and the operator picks it. Verdict is default because
the score is the thing they came for. The strip sticks to the top of the
results region so switching never requires scrolling back up.
========================================================================== */
.v2-tabs {
position: sticky;
top: 8px;
z-index: 40;
margin: 0 0 20px;
}
.v2-tabs__strip {
display: flex;
gap: 6px;
align-items: stretch;
padding: 6px;
background: rgba(14, 18, 28, 0.82);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 12px;
overflow-x: auto;
scrollbar-width: none;
}
.v2-tabs__strip::-webkit-scrollbar { display: none; }
.v2-tab {
flex: 1 1 0;
min-width: max-content;
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: 9px;
padding: 10px 16px;
color: var(--ink-2);
font: 600 12px/1 var(--v2-mono, ui-monospace, monospace);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.v2-tab:hover:not(.is-active):not([disabled]) {
color: var(--ink);
background: rgba(255, 255, 255, 0.04);
}
.v2-tab:focus-visible {
outline: 2px solid rgba(120, 200, 210, 0.55);
outline-offset: 2px;
}
.v2-tab.is-active {
color: var(--ink);
background: linear-gradient(135deg, rgba(60, 130, 255, 0.18), rgba(255, 140, 82, 0.20));
border-color: rgba(255, 255, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* A section with nothing to show is dimmed and unclickable, never an empty panel */
.v2-tab[disabled] {
opacity: 0.32;
cursor: not-allowed;
pointer-events: none;
}
/* ---------- Panels: exactly one visible ---------- */
.v2-tabpanel { display: none; }
.v2-tabpanel.is-active { display: block; animation: v2-tabfade 220ms ease both; }
@keyframes v2-tabfade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.v2-tabpanel.is-active { animation: none; }
}
/* Panels own their own spacing; kill the stacked-block bottom margin */
.v2-tabpanel > .v2-results__block { margin-bottom: 0; }
/* ==========================================================================
v36.182 — VERDICT PANEL (was the left column, now the first tab)
Full width means the gauge no longer has to stack above everything. Gauge
pins left; tier, risk, KPIs and the funding CTA read down the right.
========================================================================== */
.v2-tabpanel[data-tabpanel="verdict"] .v2-verdict-pane {
padding: 24px 26px 26px;
}
@media (min-width: 900px) {
.v2-tabpanel[data-tabpanel="verdict"] .v2-verdict-pane {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
column-gap: 32px;
align-items: start;
}
.v2-tabpanel[data-tabpanel="verdict"] .v2-verdict-pane > .v2-card__head {
grid-column: 1 / -1;
margin-bottom: 4px;
}
.v2-tabpanel[data-tabpanel="verdict"] .v2-gauge-wrap {
grid-column: 1;
grid-row: 2 / span 6;
width: 100%;
max-width: 260px;
height: auto;
aspect-ratio: 1 / 1;
margin: 4px 0 0;
align-self: start;
}
.v2-tabpanel[data-tabpanel="verdict"] .v2-verdict-pane > .v2-tier,
.v2-tabpanel[data-tabpanel="verdict"] .v2-verdict-pane > .v2-risk,
.v2-tabpanel[data-tabpanel="verdict"] .v2-verdict-pane > .v2-kpis,
.v2-tabpanel[data-tabpanel="verdict"] .v2-verdict-pane > .v127-score-cta {
grid-column: 2;
}
/* Six KPI tiles at full width read as a clean 3x2 instead of a cramped 2x3 */
.v2-tabpanel[data-tabpanel="verdict"] .v2-kpis {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.v2-tabpanel[data-tabpanel="verdict"] .v127-score-cta {
justify-self: start;
min-width: 260px;
}
}
/* The verdict pane used to be merged into the intake card on iPad/mobile, which
left it borderless with a dashed top edge and a hidden header. Inside a tab
panel it is a standalone card again on every width. */
.v2-tabpanel[data-tabpanel="verdict"] .v2-verdict-pane {
margin-top: 0 !important;
border: 1px solid var(--v2-line) !important;
border-radius: var(--v2-radius) !important;
background: var(--v2-panel) !important;
}
.v2-tabpanel[data-tabpanel="verdict"] .v2-verdict-pane .v2-card__head {
display: flex !important;
}
@media (max-width: 899px) {
.v2-tabpanel[data-tabpanel="verdict"] .v2-verdict-pane { padding: 18px 16px 20px; }
.v2-tabpanel[data-tabpanel="verdict"] .v2-gauge-wrap { margin: 10px auto 12px; }
}
@media (max-width: 700px) {
.v2-tabs__strip { padding: 5px; gap: 4px; }
.v2-tab { flex: 0 0 auto; padding: 9px 13px; font-size: 11px; letter-spacing: 0.06em; }
}
/* Below ~1100px the five tabs overflow and scroll. Fade the trailing edge so
it's obvious there are more sections to the right rather than looking clipped. */
@media (max-width: 1100px) {
.v2-tabs { position: relative; }
.v2-tabs::after {
content: "";
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
width: 44px;
pointer-events: none;
border-radius: 0 11px 11px 0;
background: linear-gradient(to right, rgba(14, 18, 28, 0), rgba(14, 18, 28, 0.92));
}
}
/* ---------- Section headers inside panels ----------
The eyebrow and the title were sharing a flex baseline row, so they read as
one run-on string ("// OPERATOR PLAYS INSIGHTS"). Give the eyebrow its own
line and keep the hint right-aligned against the title. */
.v2-tabpanel .v2-results__blockhead {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"eyebrow eyebrow"
"title hint";
align-items: baseline;
column-gap: 16px;
row-gap: 6px;
}
.v2-tabpanel .v2-results__eyebrow { grid-area: eyebrow; }
.v2-tabpanel .v2-results__title { grid-area: title; }
.v2-tabpanel .v2-results__hint { grid-area: hint; margin-left: 0; text-align: right; }
/* The hint column was sized `auto`, i.e. max-content, so a long sentence like
"Five stress levers, live re-compute..." claimed the whole row and crushed
the title down to one word per line, where the two then collided. Cap the
hint, and below 1100px (iPad and phone) drop it onto its own line entirely. */
.v2-tabpanel .v2-results__hint { max-width: 46ch; }
@media (max-width: 1100px) {
.v2-tabpanel .v2-results__blockhead {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "eyebrow" "title" "hint";
}
.v2-tabpanel .v2-results__hint { text-align: left; max-width: none; }
}
/* ==========================================================================
v36.181 — Storm Lab tightened layout
Levers become a 2-col grid on desktop; results panel collapses to a single
horizontal strip below the levers. Cuts vertical footprint ~50%.
========================================================================== */
@media (min-width: 900px) {
.v2-storm__body {
grid-template-columns: 1fr;
gap: 18px;
}
.v2-storm__levers {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.v2-storm__lever { padding: 12px 14px; }
.v2-storm__leverhead { margin-bottom: 6px; }
.v2-storm__leverfoot { font-size: 11px; }
.v2-storm__readout {
display: grid;
grid-template-columns: minmax(240px, 1.2fr) repeat(4, minmax(0, 1fr));
align-items: center;
gap: 14px;
padding: 14px 16px;
}
.v2-storm__readout-row--hero {
display: flex;
flex-direction: column;
gap: 2px;
}
.v2-storm__readout-row--hero .v2-storm__readout-label { font-size: 11px; }
.v2-storm__readout-row--hero .v2-storm__readout-value { font-size: 22px; line-height: 1.1; }
.v2-storm__readout-row--hero .v2-storm__readout-sub { font-size: 11px; }
.v2-storm__readout-grid {
display: contents; /* let its 4 children lay out in the parent grid */
}
.v2-storm__stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0;
background: transparent;
border: 0;
}
.v2-storm__stat-label { font-size: 10.5px; }
.v2-storm__stat-value { font-size: 15px; }
}
/* Sandbox Standard preset — slightly wider so the two-word label fits cleanly */
.v2-storm__preset[data-preset="standard"] { padding-inline: 14px; }
/* ==========================================================================
v36.181 — Math Trail grouped collapsible sections + Expand all
========================================================================== */
.v2-results__workbody .uw-trail__toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.v2-results__workbody .uw-trail__expandall {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.02);
color: var(--ink-2);
cursor: pointer;
transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.v2-results__workbody .uw-trail__expandall:hover {
color: var(--ink);
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.05);
}
.v2-results__workbody .uw-trail__groups {
display: flex;
flex-direction: column;
gap: 10px;
}
.v2-results__workbody details.uw-trail__group {
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
overflow: hidden;
}
.v2-results__workbody details.uw-trail__group[open] {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.025);
}
.v2-results__workbody .uw-trail__groupsum {
list-style: none;
cursor: pointer;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
user-select: none;
}
.v2-results__workbody .uw-trail__groupsum::-webkit-details-marker { display: none; }
.v2-results__workbody .uw-trail__grouptitle {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--ink);
}
.v2-results__workbody .uw-trail__grouphint {
font-size: 11.5px;
color: var(--ink-2);
font-weight: 400;
}
.v2-results__workbody .uw-trail__groupcount {
font-size: 11px;
font-weight: 600;
color: var(--ink-2);
padding: 2px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
}
.v2-results__workbody .uw-trail__groupchev {
font-size: 16px;
color: var(--ink-2);
transform: rotate(90deg);
transition: transform 0.18s ease;
}
.v2-results__workbody details.uw-trail__group[open] .uw-trail__groupchev {
transform: rotate(-90deg);
}
.v2-results__workbody details.uw-trail__group > .uw-trail__tbl {
border-top: 1px solid rgba(255, 255, 255, 0.06);
margin: 0;
}
@media (max-width: 640px) {
.v2-results__workbody .uw-trail__groupsum {
grid-template-columns: 1fr auto auto;
}
.v2-results__workbody .uw-trail__grouphint {
grid-column: 1 / -1;
order: 3;
margin-top: 2px;
}
}
/* ==========================================================================
v36.184 — iPad: five tabs must fit the narrower content column
At 820px the content column is ~536px and the strip wanted 517px of tabs
inside a 468px track, so FUND fell off the right edge. Tighten the tab
metrics between 701 and 1100 so all five sit on one line without scrolling.
========================================================================== */
@media (min-width: 701px) and (max-width: 1100px) {
.v2-tabs__strip { gap: 3px; padding: 5px; }
.v2-tab {
padding: 10px 9px;
font-size: 11px;
letter-spacing: 0.04em;
}
/* All five fit now, so the "there is more to the right" fade is misleading */
.v2-tabs::after { display: none; }
}
/* v36.184 — iPad: the preset row wrapped 3 + 2 with the overflow row centered,
which read as a misalignment rather than a deliberate second row. Lock it to
an even three-column grid so both rows share the same left edge and width. */
@media (min-width: 701px) and (max-width: 1100px) {
.v2-storm__presets {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
justify-content: stretch;
}
.v2-storm__preset {
flex: none;
width: 100%;
text-align: center;
}
}
/* ==========================================================================
v36.184 — iPad landscape: KPI tiles must never truncate a dollar figure
At 1024x768 the two-column verdict layout put six tiles in a 3-wide grid
inside a ~330px column, so labels clamped to "THE FOUNDATIO…" and values
ellipsised to "$69,8…". A truncated profit number is worse than no number.
Between 900 and 1180 use two columns and let labels wrap to three lines.
========================================================================== */
@media (min-width: 900px) and (max-width: 1180px) {
.v2-tabpanel[data-tabpanel="verdict"] .v2-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.v2-tabpanel[data-tabpanel="verdict"] .v2-kpi__lbl {
-webkit-line-clamp: 3;
min-height: 0;
}
}
/* Belt and braces: a money value gets to shrink before it gets to disappear. */
.v2-kpi__val { overflow-wrap: anywhere; }
@media (max-width: 1180px) {
.v2-kpi__val { white-space: normal; text-overflow: clip; font-size: 15px; }
}
/* ==========================================================================
v36.185 — INPUT-CONFIDENCE BANNER
Sits between the tier line and the risk chip. Three severities. Deliberately
NOT tier-colored: this is a statement about the operator's inputs, not about
the deal, and it must not be mistaken for the verdict itself.
========================================================================== */
.v2-conf {
box-sizing: border-box;
margin: 14px 18px 0;
padding: 13px 15px 14px;
border: 1px solid var(--v2-line);
border-left: 3px solid var(--v2-caution, #FFB84A);
border-radius: 10px;
background: rgba(255, 184, 74, 0.055);
text-align: left;
}
.v2-conf[data-level="low"] {
border-left-color: #FF9A3C;
background: rgba(255, 154, 60, 0.075);
}
.v2-conf[data-level="unreliable"] {
border-left-color: var(--v2-fail, #FF5C7A);
background: rgba(255, 92, 122, 0.075);
}
.v2-conf__head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.v2-conf__icon {
display: inline-flex;
color: var(--v2-caution, #FFB84A);
flex: 0 0 auto;
}
.v2-conf[data-level="low"] .v2-conf__icon { color: #FF9A3C; }
.v2-conf[data-level="unreliable"] .v2-conf__icon { color: var(--v2-fail, #FF5C7A); }
.v2-conf__label {
font: 700 10.5px/1 var(--v2-mono);
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--v2-text);
}
.v2-conf__cap {
margin-left: auto;
padding: 3px 8px;
border: 1px solid var(--v2-line);
border-radius: 999px;
font: 600 9.5px/1 var(--v2-mono);
letter-spacing: 0.1em;
color: var(--v2-muted);
white-space: nowrap;
}
.v2-conf__lede {
margin: 9px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--v2-muted);
}
.v2-conf__list {
margin: 10px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 7px;
}
.v2-conf__list li {
position: relative;
padding-left: 15px;
font-size: 12.5px;
line-height: 1.5;
color: var(--v2-text);
}
.v2-conf__list li::before {
content: "";
position: absolute;
left: 3px;
top: 0.62em;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
color: var(--v2-caution, #FFB84A);
opacity: 0.75;
}
.v2-conf[data-level="unreliable"] .v2-conf__list li::before { color: var(--v2-fail, #FF5C7A); }
.v2-conf *, .v2-conf *::before, .v2-conf *::after { box-sizing: border-box; }
@media (max-width: 700px) {
.v2-conf { padding: 12px 13px; margin: 12px 18px 0; }
.v2-conf__cap { margin-left: 0; }
.v2-conf__head { row-gap: 6px; }
}
/* v36.185 — scope-of-instrument footnote under the verdict CTA */
.v2-scopenote {
box-sizing: border-box;
margin: 16px 18px 4px;
padding-top: 13px;
border-top: 1px dashed var(--v2-line);
font: 400 11.5px/1.55 var(--v2-sans, inherit);
color: var(--v2-muted);
text-align: left;
max-width: 62ch;
}
.v2-scopenote strong { color: var(--v2-text); font-weight: 600; }
/* v36.187 — inline raw→verdict ledger inside a What to watch item.
Shows the fragility deduction the engine applied, so the number on the
gauge is never an unexplained result. */
.v2-insights__ledger {
display: inline-block;
margin-top: 4px;
font-variant-numeric: tabular-nums;
font-size: 0.92em;
letter-spacing: 0.01em;
color: var(--v2-accent, #c8a24a);
opacity: 0.95;
}