/* ============================================================
Funnel Console — "Linear Look" dark design system
Standalone stylesheet extracted from direction-b-linear-dark.html.
Token values + component classes reproduced faithfully — do not
change visual design.
FONTS — each page must add this in its own :
============================================================ */
/* ============ TOKENS ============ */
:root {
--ground: #08090A;
--ground-2: #0D0D0F;
--panel: #0F1011;
--panel-2: #111214;
--hair: #1B1B1F;
--hair-2: #26262B;
--hair-bright: #303036;
--txt: #E6E6EA;
--txt-2: #8A8A95;
--txt-3: #5A5A63;
--brand: #5E6AD2;
--brand-bright: #7C87E8;
--brand-dim: rgba(94, 106, 210, 0.14);
--good: #4CB782;
--good-dim: rgba(76, 183, 130, 0.12);
--warn: #E2A23B;
--warn-dim: rgba(226, 162, 59, 0.12);
--bad: #E5484D;
--bad-dim: rgba(229, 72, 77, 0.12);
--r-sm: 6px;
--r-md: 9px;
--r-lg: 13px;
--shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.28);
--mono: 'JetBrains Mono', ui-monospace, monospace;
--sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
}
/* ============ LIGHT ("DAY") THEME — additive token override ============
Dark stays the default. This block only activates on
. Remapped to a deliberate Linear light
palette (not a naive inversion): violet stays the sole saturated
accent, semantics darkened for AA on the light panel, the body
brand-glow neutralised, and dark-only chrome backgrounds relit. */
:root[data-theme="light"] {
--ground: #FAFAFB;
--ground-2: #FFFFFF;
--panel: #FFFFFF;
--panel-2: #F6F6F8;
--hair: #E7E7EC;
--hair-2: #DCDCE3;
--hair-bright: #CDCDD5;
--txt: #1A1A22;
--txt-2: #56565F; /* ~6.4:1 on #FFFFFF — passes AA */
--txt-3: #82828C;
--brand: #5E6AD2;
--brand-bright: #4A55C4; /* darker bright so violet text reads on light */
--brand-dim: rgba(94, 106, 210, 0.10);
--good: #2E9E68;
--good-dim: rgba(46, 158, 104, 0.10);
--warn: #B07814;
--warn-dim: rgba(176, 120, 20, 0.10);
--bad: #D23B41;
--bad-dim: rgba(210, 59, 65, 0.10);
--shadow: 0 1px 2px rgba(20,20,40,0.05), 0 8px 24px rgba(20,20,40,0.06);
}
/* neutralise the dark radial brand-glow on the light ground */
:root[data-theme="light"] body { background-image: none; }
/* card top-highlight: the white→transparent sheen reads as a smudge on
a white panel — drop it to a barely-there hairline-warm wash */
:root[data-theme="light"] .card {
background:
linear-gradient(180deg, rgba(20,20,40,0.012), rgba(20,20,40,0) 38%),
var(--panel);
}
/* sidebar sheen: same logic — neutralise the white-on-light gradient */
:root[data-theme="light"] .sidebar {
background: linear-gradient(180deg, rgba(20,20,40,0.01), transparent 22%), var(--ground-2);
}
/* sticky chrome backgrounds hardcode the dark ground — relight them */
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .appmain .frametopbar {
background: rgba(255,255,255,0.78);
}
:root[data-theme="light"] .docactions {
background: rgba(255,255,255,0.92);
}
/* amber anti-fabrication FAIL card: its internal text colors were tuned
for a dark amber tint. Re-tone them for the light amber wash so the
warning stays recognisable and legible. */
:root[data-theme="light"] .verify.fail {
border-color: rgba(176,120,20,0.45);
background: linear-gradient(180deg, rgba(176,120,20,0.12), rgba(176,120,20,0.05));
box-shadow: 0 0 0 1px rgba(176,120,20,0.14), 0 8px 28px rgba(176,120,20,0.08);
}
:root[data-theme="light"] .verify.fail .ftx2 { color: #6E4D0E; }
:root[data-theme="light"] .verify.fail .ftx2 b { color: var(--txt); }
:root[data-theme="light"] .verify.fail .sub { color: rgba(110,77,14,0.85); }
:root[data-theme="light"] .verify.fail .illusnote { color: rgba(110,77,14,0.6); }
:root[data-theme="light"] .illusnote { color: rgba(110,77,14,0.6); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
font-family: var(--sans);
background: var(--ground);
color: var(--txt);
line-height: 1.45;
letter-spacing: -0.011em;
/* restrained brand glow, top-left, very low opacity */
background-image:
radial-gradient(900px 520px at 12% -8%, rgba(94,106,210,0.10), transparent 60%),
radial-gradient(700px 600px at 100% 0%, rgba(94,106,210,0.045), transparent 55%);
background-attachment: fixed;
}
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1, "cv01" 1; }
.tnum { font-variant-numeric: tabular-nums; }
/* ============ SHELL ============ */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.topbar {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; gap: 16px;
height: 56px; padding: 0 40px;
background: rgba(8,9,10,0.72);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid var(--hair);
}
.brandmark {
display: flex; align-items: center; gap: 10px;
font-weight: 600; font-size: 13px; letter-spacing: -0.02em;
}
.brandmark .glyph {
width: 18px; height: 18px; border-radius: 5px;
background: linear-gradient(140deg, var(--brand-bright), var(--brand));
box-shadow: 0 0 0 1px rgba(124,135,232,0.4), 0 0 14px rgba(94,106,210,0.5);
position: relative;
}
.brandmark .glyph::after {
content: ""; position: absolute; inset: 5px;
border-radius: 2px; background: var(--ground);
}
.topbar .sep { width: 1px; height: 18px; background: var(--hair-2); }
.topbar .crumb { font-size: 13px; color: var(--txt-2); }
.topbar .crumb b { color: var(--txt); font-weight: 500; }
.topbar .spacer { flex: 1; }
.topbar .pill {
display: inline-flex; align-items: center; gap: 7px;
height: 28px; padding: 0 11px; border-radius: 999px;
border: 1px solid var(--hair-2); color: var(--txt-2);
font-size: 11px; background: rgba(255,255,255,0.012);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.kbd {
font-family: var(--mono); font-size: 11px; color: var(--txt-2);
border: 1px solid var(--hair-2); border-bottom-width: 2px;
border-radius: 5px; padding: 2px 6px; line-height: 1;
background: rgba(255,255,255,0.02);
}
/* ============ SECTION HEAD ============ */
.screen-tag {
display: flex; align-items: center; gap: 16px;
margin: 0 0 24px;
}
.screen-tag .num {
font-family: var(--mono); font-size: 11px; color: var(--brand-bright);
border: 1px solid var(--brand-dim); background: var(--brand-dim);
padding: 3px 8px; border-radius: 5px; letter-spacing: 0.04em;
}
.screen-tag h1 { font-size: 19px; font-weight: 600; letter-spacing: -0.025em; }
.screen-tag p { font-size: 13px; color: var(--txt-2); }
.screen-tag .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--hair-2), transparent); }
.eyebrow {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--txt-3); font-weight: 500;
}
/* ============ BENTO ============ */
.bento { display: grid; gap: 16px; }
.card {
background:
linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0) 38%),
var(--panel);
border: 1px solid var(--hair); border-radius: var(--r-lg);
box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.card .hd {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 16px; border-bottom: 1px solid var(--hair);
}
.card .hd h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--txt); }
.card .bd { padding: 16px; }
/* ============ FUNNEL FLOW ============ */
.funnel-card .bd { padding: 24px 24px 24px; }
.flow {
display: grid; grid-template-columns: repeat(5, 1fr) auto;
align-items: stretch; gap: 0;
}
.node {
position: relative; padding: 4px 16px 4px 0; cursor: pointer;
transition: transform 0.15s ease;
}
.node + .node { padding-left: 16px; }
.node:not(:last-child)::after {
content: ""; position: absolute; right: -1px; top: 14%; bottom: 14%;
width: 1px; background: var(--hair-2);
}
.node .lbl {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--txt-3); margin-bottom: 9px;
display: flex; align-items: center; gap: 6px;
}
.node .nub { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-bright); }
.node.active .nub { background: var(--brand); box-shadow: 0 0 10px rgba(94,106,210,0.7); }
.node .val {
font-size: 30px; font-weight: 600; letter-spacing: -0.04em;
line-height: 1; font-variant-numeric: tabular-nums;
}
.node .delta { font-family: var(--mono); font-size: 11px; color: var(--txt-3); margin-top: 7px; }
.node:hover { transform: translateY(-1px); }
.node:hover .nub { background: var(--brand-bright); }
/* funnel proportional bar under each stage */
.node .bar { height: 3px; border-radius: 2px; margin-top: 11px; background: var(--hair-2); overflow: hidden; }
.node .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-bright)); border-radius: 2px; }
/* outcome split */
.outcomes {
padding-left: 24px; display: flex; flex-direction: column;
justify-content: center; gap: 7px; min-width: 188px;
border-left: 1px solid var(--hair-2); margin-left: 8px;
}
.oc { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.oc .sw { width: 9px; height: 9px; border-radius: 3px; }
.oc .name { color: var(--txt-2); flex: 1; }
.oc .n { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; }
.sw.rec { background: var(--good); box-shadow: 0 0 8px var(--good-dim); }
.sw.bor { background: var(--warn); }
.sw.rej { background: var(--bad); }
.sw.clo { background: var(--txt-3); }
.sw.err { background: var(--hair-bright); }
/* ============ RUN STRIP ============ */
.runstrip { display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.metricrow { display: flex; gap: 0; }
.metric { padding: 0 24px; border-right: 1px solid var(--hair); }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-3); }
.metric .v { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.metric .v small { font-size: 11px; color: var(--txt-2); font-weight: 400; }
/* sparkline */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; }
.spark i { width: 5px; background: var(--hair-bright); border-radius: 1.5px; opacity: 0.5; }
.spark i.now { background: var(--brand); opacity: 1; box-shadow: 0 0 10px rgba(94,106,210,0.6); }
.illus { font-family: var(--mono); font-size: 10px; color: var(--txt-3); letter-spacing: 0.05em; }
/* ============ RUN CONTROL / PROGRESS ============ */
.progress-card .bd { padding: 16px; }
.runline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.runline .lead { font-size: 13px; color: var(--txt-2); }
.runline .lead b { color: var(--txt); font-weight: 600; }
.btn {
display: inline-flex; align-items: center; gap: 8px;
height: 32px; padding: 0 16px; border-radius: var(--r-sm);
font-size: 13px; font-weight: 500; font-family: var(--sans);
border: 1px solid var(--hair-2); color: var(--txt);
background: rgba(255,255,255,0.025); cursor: pointer;
transition: all 0.14s ease; letter-spacing: -0.01em;
}
.btn:hover { border-color: var(--hair-bright); background: rgba(255,255,255,0.05); }
.btn.primary {
background: var(--brand); border-color: var(--brand-bright); color: #fff;
box-shadow: 0 0 0 1px rgba(124,135,232,0.3), 0 6px 18px rgba(94,106,210,0.28);
}
.btn.primary:hover { background: var(--brand-bright); }
.btn .kbd { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.25); }
.btn.ghost { background: transparent; }
/* Active segmented-filter chip (e.g. Shortlist Verdict/Decision "All"): the chip is
`btn ghost primary`, and `.btn.ghost`'s transparent background wins the cascade over
`.btn.primary`, leaving only its white text — invisible on the light card. Give the
selected chip a readable, theme-safe violet-tinted fill. */
.seg-chips .btn.primary { background: var(--brand-dim); color: var(--brand-bright); box-shadow: none; }
.stages { display: flex; align-items: center; gap: 0; }
.stage { flex: 1; position: relative; }
.stage .track { display: flex; align-items: center; gap: 10px; }
.stage .ico {
width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--hair-2); display: grid; place-items: center;
font-family: var(--mono); font-size: 10px; color: var(--txt-3);
background: var(--ground-2);
}
.stage.done .ico { border-color: var(--good); color: var(--good); background: var(--good-dim); }
.stage.run .ico {
border-color: var(--brand); color: var(--brand-bright); background: var(--brand-dim);
box-shadow: 0 0 0 4px rgba(94,106,210,0.12);
}
.stage.run .ico::after {
content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%;
border: 1px solid var(--brand); animation: ping 1.6s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.9); opacity: 0; } }
.stage .nm { font-size: 11px; color: var(--txt-2); margin-top: 8px; }
.stage.done .nm { color: var(--txt); }
.stage.run .nm { color: var(--brand-bright); font-weight: 500; }
.stage .conn { position: absolute; top: 11px; left: 28px; right: 6px; height: 1px; background: var(--hair-2); }
.stage.done .conn { background: var(--good); }
.stage:last-child .conn { display: none; }
.stage .conn i { display: block; height: 100%; width: 40%; background: var(--brand); box-shadow: 0 0 8px var(--brand); }
/* ============ SHORTLIST TABLE ============ */
.table { width: 100%; border-collapse: collapse; }
.table thead th {
text-align: left; font-family: var(--mono); font-size: 10px;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-3);
font-weight: 500; padding: 0 16px 12px; border-bottom: 1px solid var(--hair);
}
.table thead th.r, .table td.r { text-align: right; }
.table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--hair); font-size: 13px; vertical-align: middle; }
.table tbody tr { transition: background 0.12s ease; cursor: pointer; }
.table tbody tr:hover { background: rgba(94,106,210,0.05); }
.table tbody tr:last-child td { border-bottom: 0; }
.co { font-weight: 600; letter-spacing: -0.015em; }
.ti { color: var(--txt-2); font-size: 12px; }
.loc { color: var(--txt-2); font-size: 12px; }
/* score chip — segmented meter feel */
.score {
display: inline-flex; align-items: baseline; gap: 2px;
font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.score .pts { font-size: 15px; font-weight: 600; }
.score .max { font-size: 10px; color: var(--txt-3); }
.scorewrap { display: flex; align-items: center; gap: 11px; }
.scoremeter { width: 46px; height: 5px; border-radius: 3px; background: var(--hair-2); overflow: hidden; }
.scoremeter i { display: block; height: 100%; border-radius: 3px; }
.s-hi i { background: linear-gradient(90deg, var(--good), #6fd6a3); }
.s-mid i { background: linear-gradient(90deg, var(--warn), #f0bd63); }
.tag {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: 11px; height: 23px; padding: 0 9px;
border-radius: 999px; border: 1px solid var(--hair-2); color: var(--txt-2);
font-variant-numeric: tabular-nums;
}
.tag.applied { color: var(--good); border-color: var(--hair-2); background: transparent; }
.tag.borderline { color: var(--warn); border-color: var(--hair-2); background: transparent; }
.tag .tk { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dash { color: var(--txt-3); }
/* ============ REJECTED ROW ============ */
.rejbar {
display: flex; align-items: center; gap: 16px; padding: 16px 16px;
border-top: 1px solid var(--hair);
background: linear-gradient(90deg, rgba(229,72,77,0.04), transparent 70%);
}
.rejbar .chev { color: var(--bad); font-size: 11px; }
.rejbar .ttl { font-size: 13px; font-weight: 600; }
.rejbar .ttl b { color: var(--bad); }
.rejbar .ex { font-size: 12px; color: var(--txt-2); flex: 1; }
.rejbar .ex code {
font-family: var(--mono); font-size: 11px; color: var(--warn);
background: var(--warn-dim); padding: 2px 7px; border-radius: 4px;
border: 1px solid var(--warn-dim);
}
.btn.override {
height: 30px; font-size: 11.5px; font-weight: 600; color: var(--warn);
border-color: rgba(226,162,59,0.45); background: var(--warn-dim);
}
.btn.override:hover { border-color: var(--warn); background: rgba(226,162,59,0.18); }
/* FIX C — "Rejected (N)" reveal reads as a deliberate full-width strip,
not a chip-height row. Additive modifier on the locked .rejbar. */
.rejbar.strip {
position: relative; padding: 18px 18px 18px 20px; gap: 14px;
background: linear-gradient(90deg, rgba(226,162,59,0.07), rgba(229,72,77,0.04) 40%, transparent 78%);
}
.rejbar.strip::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--warn), var(--bad));
}
.rejbar.strip .ttl { font-size: 14px; }
.rejbar.strip .ex { font-size: 12.5px; }
.rejbar.strip .ex code, .rejbar.strip .ex b { white-space: nowrap; }
/* ============ ADD / SCHEDULE ============ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-3); }
.inp {
display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
border: 1px solid var(--hair-2); border-radius: var(--r-sm);
background: var(--ground-2); color: var(--txt); font-size: 13px;
}
.inp input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--txt); font-family: var(--sans); font-size: 13px; }
.inp input::placeholder { color: var(--txt-3); }
.inp.mono input { font-family: var(--mono); }
.schedrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--hair-2); border-radius: var(--r-sm); overflow: hidden; height: 34px; background: var(--ground-2); }
.stepper .v { flex: 1; text-align: center; font-family: var(--mono); font-size: 13px; }
.stepper button { width: 32px; background: rgba(255,255,255,0.02); border: 0; color: var(--txt-2); cursor: pointer; font-size: 14px; height: 100%; }
.stepper button:hover { background: rgba(255,255,255,0.05); color: var(--txt); }
.stepper button:first-child { border-right: 1px solid var(--hair-2); }
.stepper button:last-child { border-left: 1px solid var(--hair-2); }
/* ============ DIVIDER ============ */
.bigdivide { margin: 64px 0 56px; position: relative; }
.bigdivide .ln { height: 1px; background: linear-gradient(90deg, transparent, var(--hair-2) 12%, var(--hair-2) 88%, transparent); }
.bigdivide .chip {
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
background: var(--ground); padding: 0 16px; font-family: var(--mono);
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--txt-3);
}
/* ============ SCREEN 2 ============ */
.detail-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
.opening-hd { padding: 24px 24px 20px; }
.opening-hd .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.opening-hd h2 { font-size: 23px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.18; }
.opening-hd .meta { display: flex; align-items: center; gap: 10px; margin-top: 11px; font-size: 13px; color: var(--txt-2); }
.opening-hd .meta .co2 { color: var(--txt); font-weight: 600; }
.opening-hd .meta .mid { width: 3px; height: 3px; border-radius: 50%; background: var(--txt-3); }
.verdict-block { text-align: right; flex-shrink: 0; }
.verdict-block .big {
font-family: var(--mono); font-size: 34px; font-weight: 600;
letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.verdict-block .big small { font-size: 13px; color: var(--txt-3); }
.verdict-block .tags { display: flex; gap: 6px; justify-content: flex-end; margin-top: 11px; }
.vtag {
font-family: var(--mono); font-size: 11px; height: 22px; padding: 0 9px;
border-radius: 5px; display: inline-flex; align-items: center; gap: 6px;
letter-spacing: 0.02em; white-space: nowrap;
}
.vtag.rec { color: var(--good); background: transparent; border: 1px solid var(--hair-2); }
.vtag.app { color: var(--brand-bright); background: transparent; border: 1px solid var(--hair-2); }
/* Calibration Feedback item (ADR-0008) — shared by the Opening page + the Feedback page. */
.fb-item { padding: 10px 12px; background: var(--ground-2); border: 1px solid var(--hair-2); border-radius: var(--r-sm); margin-bottom: 9px; }
.fb-item .fb-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-dirtag { font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.02em; }
.fb-dirtag.over { color: var(--warn); background: var(--warn-dim); }
.fb-dirtag.under { color: var(--brand-bright); background: var(--brand-dim); }
.fb-cat { font-family: var(--mono); font-size: 10.5px; color: var(--txt-2); }
.fb-applied { font-family: var(--mono); font-size: 10px; color: var(--good); margin-left: auto; text-transform: uppercase; letter-spacing: 0.05em; }
.fb-comment { font-size: 12.5px; color: var(--txt); line-height: 1.5; margin: 7px 0 4px; }
/* dimension bars — segmented 0-4 */
.dims { padding: 4px 0; }
.dim { display: grid; grid-template-columns: 150px 1fr 28px; align-items: center; gap: 16px; padding: 11px 0; }
.dim + .dim { border-top: 1px solid var(--hair); }
.dim .dname { font-size: 13px; color: var(--txt); }
.dim .dval { font-family: var(--mono); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--txt); }
.seg { display: flex; gap: 5px; }
.seg i {
flex: 1; height: 9px; border-radius: 3px; background: var(--hair-2);
border: 1px solid transparent; transition: all 0.2s ease;
}
.seg i.on { background: linear-gradient(180deg, var(--brand-bright), var(--brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
.seg i.on4 { background: linear-gradient(180deg, #8e98ee, var(--brand)); }
.dimscale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--txt-3); margin-top: 4px; padding: 0 0 0 166px; }
/* facts list */
.facts { display: grid; gap: 0; }
.fact { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; font-size: 13px; }
.fact + .fact { border-top: 1px solid var(--hair); }
.fact .fi {
width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; margin-top: 1px;
display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.fi.ok { background: var(--good-dim); color: var(--good); }
.fi.neu { background: rgba(255,255,255,0.04); color: var(--txt-2); }
.fact .ft { color: var(--txt); }
.fact .ft b { color: var(--txt); }
.fact .ft span { color: var(--txt-2); }
/* flags */
.flag {
display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px;
border-radius: var(--r-md); font-size: 13px;
border: 1px solid var(--hair-2); background: rgba(255,255,255,0.012);
}
.flag .fk { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; margin-top: 1px; }
.flag.soft .fk { color: var(--txt-2); background: rgba(255,255,255,0.05); }
.flag.soft .ftx { color: var(--txt-2); }
.flag.soft .ftx b { color: var(--txt); font-weight: 500; }
/* JD excerpt — reading */
.jd { padding: 20px 24px; }
.jd p { font-size: 13px; line-height: 1.7; color: var(--txt); letter-spacing: -0.005em; }
.jd p .muted { color: var(--txt-2); }
.jd .req { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--txt-2); line-height: 1.65; }
.jd .req b { color: var(--txt); font-weight: 600; }
/* Global link default — no anchor ever shows browser-default blue/purple/underline
(kills :visited purple too; author origin beats the UA stylesheet). Component link
styles (.navitem, .linkout) override via higher specificity. */
a { color: var(--brand-bright); text-decoration: none; }
/* The canonical inline link treatment. Standalone (matches `` AND
``) — muted violet, mono, a subtle underline that lifts on hover. */
.linkout {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--brand-bright); font-family: var(--mono);
text-decoration: none; border-bottom: 1px solid var(--brand-dim); padding-bottom: 2px;
}
.linkout:hover { border-color: var(--brand); color: var(--brand); }
.jd .linkout { margin-top: 16px; } /* JD-context spacing only */
/* A