:root {
--surface-deep: #050506;
--paper: #f7f7f8;
--paper-raised: #ffffff;
--paper-tint: #efeff2;
--line: #e4e4e9;
--line-strong: #c9c9d2;
--ink-950: #0a0a0c;
--ink-900: #17171b;
--ink-700: #4a4a54;
--ink-500: #676773;
--signal-700: #2450e0;
--signal-600: #3560ff;
--signal-100: #e8edff;
--on-signal: #ffffff;
--amber-700: #8a5a00;
--amber-100: #fff4dc;
--dark-text: #ffffff;
--dark-muted: #a8a8b3;
--dark-line: #232329;
--dark-signal: #8fa8ff;
--success-700: #0f7a3c;
--success-100: #e3f5ea;
--error-700: #b3261e;
--error-100: #fde9e7;
--font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Inter Tight", "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;
--text-xs: clamp(0.74rem, 0.72rem + 0.1vw, 0.8rem);
--text-sm: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
--text-base: clamp(1rem, 0.98rem + 0.15vw, 1.08rem);
--text-lg: clamp(1.12rem, 1.06rem + 0.3vw, 1.28rem);
--text-xl: clamp(1.3rem, 1.2rem + 0.55vw, 1.6rem);
--text-2xl: clamp(1.6rem, 1.4rem + 1vw, 2.15rem);
--text-3xl: clamp(2rem, 1.6rem + 1.8vw, 3rem);
--text-4xl: clamp(2.5rem, 1.8rem + 3.2vw, 4.4rem);
--text-5xl: clamp(3rem, 2rem + 5.2vw, 6rem);
--leading-tight: 1.02;
--leading-snug: 1.25;
--leading-body: 1.6;
--tracking-tight: -0.03em;
--tracking-display: -0.045em;
--tracking-wide: 0.08em;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
--section-y-lg: clamp(4.5rem, 3rem + 6vw, 8rem);
--container: 72rem;
--container-narrow: 46rem;
--gutter: clamp(1.1rem, 4vw, 2rem);
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 20px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(10, 10, 12, 0.04), 0 1px 1px rgba(10, 10, 12, 0.03);
--shadow-md: 0 2px 6px rgba(10, 10, 12, 0.05), 0 12px 32px rgba(10, 10, 12, 0.06);
--shadow-lg: 0 4px 12px rgba(10, 10, 12, 0.06), 0 28px 70px rgba(10, 10, 12, 0.1);
--glow: 0 0 0 1px rgba(53, 96, 255, 0.18), 0 0 32px rgba(53, 96, 255, 0.1);
--glow-strong: 0 0 0 1px rgba(53, 96, 255, 0.3), 0 0 48px rgba(53, 96, 255, 0.18);
--glow-warm: 0 0 42px rgba(255, 138, 61, 0.45), 0 0 90px rgba(255, 138, 61, 0.18);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur: 180ms;
}
.theme-dark,
.on-dark,
.section--dark,
.hero,
.site-footer,
.cta-band,
.tile,
.product-window {
--surface-deep: #050506;
--paper: #050506;
--paper-raised: #0f0f12;
--paper-tint: #0a0a0d;
--line: #1f1f25;
--line-strong: #2f2f37;
--ink-950: #ffffff;
--ink-900: #ececf0;
--ink-700: #a8a8b3;
--ink-500: #8e8e99;
--signal-700: #8fa8ff;
--signal-600: #7c99ff;
--signal-100: #12183a;
--on-signal: #0a0a0c;
--amber-700: #f2b95c;
--amber-100: #2a1e08;
--dark-text: #ffffff;
--dark-muted: #a8a8b3;
--dark-line: #232329;
--dark-signal: #8fa8ff;
--success-700: #5ad48f;
--success-100: #0d2418;
--error-700: #ff8a84;
--error-100: #2b1210;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.55), 0 30px 80px rgba(0, 0, 0, 0.6);
--glow: 0 0 0 1px rgba(143, 168, 255, 0.2), 0 0 32px rgba(143, 168, 255, 0.1);
--glow-strong: 0 0 0 1px rgba(143, 168, 255, 0.32), 0 0 48px rgba(143, 168, 255, 0.18);
color: var(--ink-900);
color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
:root { --dur: 0ms; }
}
@font-face {
font-family: "Inter Tight";
src: url("/fonts/inter-tight-latin.woff2") format("woff2");
font-weight: 400 800;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-latin.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter Fallback";
src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--ink-900);
background: var(--paper);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "cv11", "ss01", "tnum" 0;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-snug);
text-wrap: balance;
color: var(--ink-950);
}
h1, h2 {
letter-spacing: var(--tracking-display);
line-height: var(--leading-tight);
}
h1 em, h2 em {
font-style: normal;
font-weight: 600;
color: var(--ink-700);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); letter-spacing: -0.02em; }
h4 { font-size: var(--text-lg); letter-spacing: -0.01em; }
p, li { max-width: 68ch; }
a {
color: var(--signal-700);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
transition: color var(--dur) var(--ease-out), text-decoration-color var(--dur) var(--ease-out);
}
a:hover { color: var(--ink-950); text-decoration-color: currentColor; }
:focus-visible {
outline: 2px solid var(--signal-600);
outline-offset: 3px;
border-radius: 4px;
}
strong { font-weight: 600; color: var(--ink-950); }
code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--paper-tint);
padding: 0.1em 0.4em;
border-radius: var(--radius-sm);
}
hr { border: 0; border-top: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--signal-100); color: var(--ink-950); }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--ink-950);
color: #fff;
padding: 0.7rem 1.2rem;
border-radius: 0 0 var(--radius) 0;
text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; background: var(--paper); color: var(--ink-900); font-size: 14px; line-height: 1.45; }
.app--bare { display: block; }
.app a { color: var(--signal-700); }
.app h1, .app h2, .app h3 { font-family: var(--font-sans); letter-spacing: -0.01em; }
.app h1 { font-size: 1.35rem; margin: 0; font-weight: 600; }
.app h2 { font-size: 1.02rem; margin: 0; font-weight: 600; }
.app h3 { font-size: 0.95rem; margin: 0 0 0.35rem; font-weight: 600; }
.muted { color: var(--ink-500); }
.app-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface-deep); border-right: 1px solid var(--line); padding: 1rem 0.9rem; display: flex; flex-direction: column; gap: 1rem; }
.app-nav__brand { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-950); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.app-nav__mark { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, var(--signal-700), #7fe0ff); box-shadow: 0 0 0 3px var(--signal-100); }
.app-nav__tenant { font-size: 0.8rem; color: var(--ink-700); padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); }
.app-nav nav ul { list-style: none; margin: 0; padding: 0; }
.app-nav__group { margin-bottom: 0.7rem; }
.app-nav__group-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); margin: 0.2rem 0.5rem 0.25rem; }
.app-nav nav a { display: block; padding: 0.38rem 0.55rem; border-radius: 6px; color: var(--ink-700); text-decoration: none; font-size: 0.86rem; }
.app-nav nav a:hover { background: var(--paper-raised); color: var(--ink-950); }
.app-nav nav a[aria-current="page"] { background: var(--signal-100); color: var(--signal-700); font-weight: 600; }
.app-nav__foot { margin-top: auto; font-size: 0.78rem; color: var(--ink-500); display: flex; flex-direction: column; gap: 0.4rem; }
.app-nav__user { display: block; color: var(--ink-700); margin-bottom: 0.2rem; word-break: break-all; }
.app-nav__site { color: var(--ink-500); text-decoration: none; }
button.link { background: none; border: 0; color: var(--signal-700); cursor: pointer; padding: 0; font: inherit; }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-banner { background: var(--amber-100); color: var(--amber-700); border-bottom: 1px solid var(--line); padding: 0.55rem 1.25rem; font-size: 0.85rem; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem 0.8rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.app-head__tools { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.window-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.window-switch a { padding: 0.28rem 0.6rem; font-size: 0.8rem; text-decoration: none; color: var(--ink-700); border-right: 1px solid var(--line); }
.window-switch a:last-child { border-right: 0; }
.window-switch a[aria-current="true"] { background: var(--signal-100); color: var(--signal-700); font-weight: 600; }
.window-label { font-size: 0.8rem; color: var(--ink-700); }
.app-content { padding: 1.1rem 1.5rem 2rem; display: grid; gap: 1rem; max-width: 1380px; }
.app-content--wide { max-width: none; }
.app-foot { margin-top: auto; padding: 0.8rem 1.5rem; border-top: 1px solid var(--line); color: var(--ink-500); font-size: 0.75rem; }
.flash { margin: 0.8rem 1.5rem 0; padding: 0.6rem 0.9rem; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--paper-raised); font-size: 0.88rem; }
.flash--good { border-color: var(--success-700); color: var(--success-700); background: var(--success-100); }
.flash--bad { border-color: var(--error-700); color: var(--error-700); background: var(--error-100); }
.flash--warn { border-color: var(--amber-700); color: var(--amber-700); background: var(--amber-100); }
.panel { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px; padding: 0.95rem 1.05rem; }
.panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.7rem; }
.panel__lead { margin: 0.2rem 0 0; color: var(--ink-500); font-size: 0.83rem; max-width: 70ch; }
.panel__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 0.6rem; }
.kpi { display: block; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem 0.75rem; text-decoration: none; color: inherit; min-height: 84px; }
a.kpi:hover { border-color: var(--line-strong); }
.kpi--na { opacity: 0.72; border-style: dashed; }
.kpi__label { font-size: 0.72rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi__value { font-size: 1.35rem; font-weight: 600; color: var(--ink-950); margin: 0.15rem 0; font-variant-numeric: tabular-nums; }
.kpi__value--na { font-size: 0.95rem; color: var(--ink-500); font-weight: 500; }
.kpi__meta { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; font-size: 0.74rem; color: var(--ink-500); }
.kpi__note { font-size: 0.7rem; }
.delta { font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--ink-700); }
.delta--good { color: var(--success-700); }
.delta--bad { color: var(--error-700); }
.delta--small { font-size: 0.72rem; }
.badge { display: inline-block; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.12rem 0.42rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-700); margin-right: 0.25rem; white-space: nowrap; }
.badge--good { border-color: var(--success-700); color: var(--success-700); background: var(--success-100); }
.badge--warn { border-color: var(--amber-700); color: var(--amber-700); background: var(--amber-100); }
.badge--bad { border-color: var(--error-700); color: var(--error-700); background: var(--error-100); }
.badge--info { border-color: var(--signal-600); color: var(--signal-700); background: var(--signal-100); }
.spark { display: block; max-width: 100%; }
.spark__line { stroke: var(--signal-700); stroke-width: 1.5; }
.spark__area { fill: var(--signal-100); }
.spark__hl { fill: var(--error-700); opacity: 0.18; }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.tbl th, .tbl td { padding: 0.42rem 0.55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); font-weight: 600; white-space: nowrap; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.tbl__empty { color: var(--ink-500); text-align: center; padding: 1.2rem; }
.tbl .sub { color: var(--ink-500); font-size: 0.75rem; display: block; }
.tbl--compact th, .tbl--compact td { padding: 0.28rem 0.45rem; }
.explain { font-size: 0.82rem; margin-top: 0.5rem; border: 1px dashed var(--line-strong); border-radius: 6px; padding: 0.4rem 0.7rem; }
.explain summary { cursor: pointer; color: var(--ink-700); }
.explain__list { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.8rem; margin: 0.6rem 0 0; }
.explain__list dt { color: var(--ink-500); }
.explain__list dd { margin: 0; }
.callout { border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.88rem; background: var(--paper-tint); }
.callout__title { display: block; margin-bottom: 0.2rem; }
.callout--bad { border-color: var(--error-700); background: var(--error-100); }
.callout--warn { border-color: var(--amber-700); background: var(--amber-100); }
.callout--good { border-color: var(--success-700); background: var(--success-100); }
.callout--info { border-color: var(--signal-600); background: var(--signal-100); }
.empty { padding: 1.6rem; text-align: center; color: var(--ink-500); border: 1px dashed var(--line-strong); border-radius: 8px; }
.opp { display: grid; grid-template-columns: 64px 1fr auto; gap: 0.9rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.opp:last-child { border-bottom: 0; }
.opp__score { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-950); font-size: 1rem; }
.opp__score small { display: block; color: var(--ink-500); font-weight: 400; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.opp__title { font-weight: 600; color: var(--ink-950); text-decoration: none; }
.opp__why { color: var(--ink-700); font-size: 0.85rem; margin: 0.25rem 0; }
.opp__action { font-size: 0.85rem; margin: 0.25rem 0; }
.opp__impact { font-size: 0.78rem; color: var(--ink-500); }
.opp__meta { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; font-size: 0.75rem; color: var(--ink-500); align-items: center; }
.opp__actions { display: flex; flex-direction: column; gap: 0.3rem; min-width: 120px; }
.opp__actions form { display: contents; }
.btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.75rem; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--paper-tint); color: var(--ink-900); font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--signal-600); color: var(--ink-950); }
.btn--primary { background: var(--signal-700); color: var(--on-signal); border-color: var(--signal-700); font-weight: 600; }
.btn--small { padding: 0.22rem 0.55rem; font-size: 0.76rem; }
.btn--danger { border-color: var(--error-700); color: var(--error-700); }
.form-grid { display: grid; gap: 0.8rem; max-width: 720px; }
.field { display: grid; gap: 0.25rem; }
.field label { font-size: 0.8rem; color: var(--ink-700); }
.field input, .field textarea, .field select { background: var(--paper); color: var(--ink-950); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.88rem; width: 100%; }
.field textarea { min-height: 72px; }
.field .hint { font-size: 0.74rem; color: var(--ink-500); }
.inline-form { display: inline; }
.status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.status-list li { display: grid; grid-template-columns: 72px 1fr; gap: 0.6rem; align-items: start; font-size: 0.85rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.status-list li:last-child { border-bottom: 0; }
.status-list .detail { color: var(--ink-500); font-size: 0.78rem; display: block; }
.source { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.source:last-child { border-bottom: 0; }
.source__name { font-weight: 600; color: var(--ink-950); }
.source__meta { color: var(--ink-500); font-size: 0.78rem; }
.heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.heat div { height: 18px; border-radius: 2px; background: var(--paper-tint); font-size: 0.6rem; color: var(--ink-500); text-align: center; line-height: 18px; }
.heat .h1 { background: #12354a; } .heat .h2 { background: #164a66; } .heat .h3 { background: #1c6788; } .heat .h4 { background: #2389b5; color: #04121c; } .heat .h5 { background: var(--signal-700); color: #04121c; }
.score { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 6px solid var(--line-strong); font-weight: 700; font-size: 1.15rem; color: var(--ink-950); }
.score--good { border-color: var(--success-700); } .score--warn { border-color: var(--amber-700); } .score--bad { border-color: var(--error-700); }
.bare { max-width: 440px; margin: 10vh auto; padding: 1.5rem; display: grid; gap: 1rem; }
.bare .panel { padding: 1.2rem; }
@media (max-width: 900px) {
.app { grid-template-columns: 1fr; }
.app-nav { position: static; height: auto; }
.app-nav nav { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.app-nav__group { margin: 0; }
.app-nav__group-title { display: none; }
.app-nav__foot { display: none; }
.app-content { padding: 0.9rem; }
.opp { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.brief__para { margin: 0 0 0.9rem; }
.brief__para p { margin: 0 0 0.25rem; }
.brief__evidence { font-size: 0.72rem; color: var(--ink-500); letter-spacing: 0.01em; }
.brief__evidence span { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-right: 0.35rem; }
.impact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; margin: 0 0 1rem; }
.impact { border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; background: var(--paper-raised); }
.impact--blocked { border-color: var(--amber-700); background: var(--amber-100); }
.impact__v { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.impact__l { font-size: 0.72rem; color: var(--ink-500); }
.impact__note { grid-column: 1 / -1; font-size: 0.72rem; color: var(--ink-500); margin: 0; }
.opp__blocked { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--amber-700); }
.basis { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
.basis__row { display: grid; grid-template-columns: 6rem 1fr; gap: 0.6rem; align-items: start; }
.basis__row p { margin: 0; }
.basis__row .detail { display: block; font-size: 0.75rem; color: var(--ink-500); margin-top: 0.2rem; }
.basis__tag { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--ink-700); text-align: center; margin-top: 0.15rem; }
.basis__tag--observed { border-color: var(--success-700); color: var(--success-700); background: var(--success-100); }
.basis__tag--estimated { border-color: var(--amber-700); color: var(--amber-700); background: var(--amber-100); }
.basis__tag--judgement { border-color: var(--signal-600); color: var(--signal-700); background: var(--signal-100); }
@media (max-width: 40em) { .basis__row { grid-template-columns: 1fr; } }
.tech { margin-top: 0.8rem; }
.tech summary { cursor: pointer; font-size: 0.78rem; color: var(--ink-500); }
.tech[open] summary { margin-bottom: 0.5rem; }