/* ==========================================================================
Rating dashboard — design tokens v1.1 (draft for owner approval, 2026-10-02; colour values unchanged since v0)
Source of truth for every colour, size and font. Components use ONLY these
variables. Spec and rationale: DESIGN-SYSTEM.md (same folder).
Theme resolution (SCREENER-2, owner 3271: light by default):
1. [data-theme="light"|"dark"] on — the served page is "light"; a stored
choice («Светлая» / «Тёмная») is set by the head script before the CSS paints.
2. no data-theme («Как в системе»): prefers-color-scheme: dark → dark theme.
3. otherwise (light or no preference) → light theme.
Fonts (load in , Google Fonts only):
========================================================================== */
:root {
/* ---- Brand: Barracudo (owner, 2026-10-02); brand colour still open ----- */
--brand-name: "X10"; /* the ONLY place the name is written (domain x10.markets) */
--brand-mark: "X10"; /* monogram letter for the square mark */
/* ---- Typography -------------------------------------------------------- */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; /* verdict lines only */
--font-num-features: "tnum" 1, "lnum" 1; /* every figure in data context */
/* size / line-height pairs (desktop; phone overrides below) */
--text-display: 40px; --leading-display: 48px;
--text-h1: 28px; --leading-h1: 36px;
--text-h2: 20px; --leading-h2: 28px;
--text-h3: 16px; --leading-h3: 24px;
--text-verdict: 19px; --leading-verdict: 28px; /* serif */
--text-body: 15px; --leading-body: 24px;
--text-body-sm: 13px; --leading-body-sm: 20px;
--text-caption: 12px; --leading-caption: 16px;
--text-num-lg: 32px; --leading-num-lg: 40px; /* price in coin header */
--text-num: 14px; --leading-num: 20px; /* table figures */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--tracking-tight: -0.02em; /* display, h1 */
--tracking-snug: -0.01em; /* h2, num-lg */
--tracking-normal: 0;
--tracking-ticker: 0.04em; /* tickers: the only uppercase text */
/* grade letter sizes (score badge) */
--grade-size-xl: 44px; /* coin header */
--grade-size-lg: 28px; /* sample card, journal */
--grade-size-md: 18px; /* tables, pillar badges */
--grade-size-sm: 13px; /* inline mentions */
/* ---- Spacing (4-pt scale) ---------------------------------------------- */
--space-0: 0;
--space-half: 2px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* layout */
--page-gutter: 32px; /* phone: 16px */
--grid-gap: 24px; /* phone: 16px */
--content-max: 1280px;
--card-padding: 20px; /* phone: 16px */
--control-h-sm: 32px;
--control-h-md: 40px; /* phone: 44px (touch target) */
--control-h-lg: 48px;
--row-h: 48px; /* table row; phone list row 64px */
--touch-min: 44px;
/* ---- Radii -------------------------------------------------------------- */
--radius-xs: 4px; /* chips, tier dots container, meter segments */
--radius-sm: 6px; /* buttons, inputs, selects, badges */
--radius-md: 8px; /* notices, tooltips, table container */
--radius-lg: 12px; /* cards */
--radius-xl: 16px; /* modals, bottom sheet top corners */
--radius-pill: 999px;
/* ---- Borders / focus ---------------------------------------------------- */
--border-width: 1px;
--focus-width: 2px;
--focus-offset: 2px;
/* ---- Motion ------------------------------------------------------------- */
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
--ease-out: cubic-bezier(0.2, 0, 0, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* ---- Layers ------------------------------------------------------------- */
--z-sticky: 200;
--z-dropdown: 300;
--z-overlay: 900;
--z-modal: 1000;
--z-toast: 1100;
/* ---- Breakpoints (documentation; CSS vars cannot drive @media) ---------
phone 0–599px review viewport 390×844
tablet 600–1023px
desktop 1024–1439px
wide ≥1440px review viewport 1440×900 */
}
/* ==========================================================================
LIGHT THEME (default, SCREENER-2 owner 3271) — the served page carries
data-theme="light"; also «Как в системе» when the OS prefers light or
states no preference. Colour values unchanged since v0 (DESIGN-SYSTEM.md §4).
========================================================================== */
:root,
:root[data-theme="light"] {
color-scheme: light;
--color-bg: #F6F7F9;
--color-surface-1: #FFFFFF;
--color-surface-2: #F0F2F5;
--color-surface-3: #FFFFFF;
--color-overlay: rgba(14, 19, 32, 0.48);
--color-skeleton: #DFE3E9;
--color-skeleton-shine: #EDF0F3;
--color-border-subtle: #E6E9EE;
--color-border: #D3D8E0;
--color-border-strong: #7D8798;
--color-text: #0E1320;
--color-text-secondary: #485165;
--color-text-tertiary: #5B6477;
--color-text-disabled: #9AA3B2;
--color-text-on-accent: #FFFFFF;
--color-accent: #0E1320;
--color-accent-hover: #262E40;
--color-accent-active: #000000;
--color-accent-text: #0E1320;
--color-accent-soft: rgba(14, 19, 32, 0.06);
--color-focus: #1963A5;
--color-on-solid: #FFFFFF;
--state-hover: rgba(0, 0, 0, 0.07);
--state-press: rgba(0, 0, 0, 0.12);
--color-positive: #00787A; --color-positive-text: #006C6E; --color-positive-soft: rgba(0, 120, 122, 0.10);
--color-negative: #C4322F; --color-negative-text: #B02D2A; --color-negative-soft: rgba(196, 50, 47, 0.10);
--color-warning: #8F5B00; --color-warning-text: #885600; --color-warning-soft: rgba(143, 91, 0, 0.10);
--color-info: #1A68AE; --color-info-text: #1963A5; --color-info-soft: rgba(26, 104, 174, 0.10);
--color-success: var(--color-positive);
--color-success-text: var(--color-positive-text);
--color-success-soft: var(--color-positive-soft);
--grade-a: #00787A; --grade-a-text: #006C6E; --grade-a-soft: rgba(0, 120, 122, 0.10);
--grade-b: #4A7B22; --grade-b-text: #436F1F; --grade-b-soft: rgba(74, 123, 34, 0.10);
--grade-c: #6B6656; --grade-c-text: #666152; --grade-c-soft: rgba(107, 102, 86, 0.10);
--grade-d: #9A5800; --grade-d-text: #925400; --grade-d-soft: rgba(154, 88, 0, 0.10);
--grade-f: #C4322F; --grade-f-text: #B02D2A; --grade-f-soft: rgba(196, 50, 47, 0.10);
--grade-meter-off: #D3D8E0;
--tier-dot-on: #485165;
--tier-dot-off: #7D8798;
--chart-up: var(--color-positive);
--chart-down: var(--color-negative);
--chart-flat: #5B6477;
--chart-baseline: #C3C9D2;
--chart-grid: #ECEFF3;
--chart-area-opacity: 0.12;
--shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
--shadow-2: 0 8px 24px rgba(16, 24, 40, 0.10), 0 0 0 1px var(--color-border-subtle);
--shadow-3: 0 24px 64px rgba(16, 24, 40, 0.18), 0 0 0 1px var(--color-border-subtle);
--highlight-top: inset 0 0 0 0 transparent;
}
/* ==========================================================================
DARK THEME — [data-theme="dark"] (the reader's choice), and «Как в системе»
(no data-theme) when the OS prefers dark. The two blocks are identical;
keep them in sync (CSS cannot share a declaration block across @media).
All text tokens ≥ 4.5:1 on every surface; graphics ≥ 3:1 (see DESIGN-SYSTEM.md §4).
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
/* surfaces, back to front */
--color-bg: #0B0E14;
--color-surface-1: #11151D; /* cards, table body */
--color-surface-2: #171C26; /* inputs, hover rows, nested panels */
--color-surface-3: #1D2330; /* popovers, modal, tooltips */
--color-overlay: rgba(4, 6, 10, 0.72); /* modal scrim */
--color-skeleton: #1F2532;
--color-skeleton-shine: #2A3242;
/* borders */
--color-border-subtle: #222936; /* dividers, card outline (decorative) */
--color-border: #2E3644; /* table grid, secondary button */
--color-border-strong: #6B7587; /* input outline: 3.9:1 on surface-1 */
/* text */
--color-text: #E9ECF2; /* 13.3–16.3:1 */
--color-text-secondary: #A9B2C2; /* 7.4–9.1:1 */
--color-text-tertiary: #8C95A7; /* 5.2–6.4:1 — captions, meta */
--color-text-disabled: #5A6272; /* disabled only (WCAG-exempt) */
--color-text-on-accent: #0B0E14; /* on the ink-white primary button: 16.3:1 */
/* accent = INK. The interface itself is monochrome; colour is reserved for
meaning (grades, price direction, flags). Primary button, links, selection. */
--color-accent: #E9ECF2;
--color-accent-hover: #FFFFFF;
--color-accent-active: #D3D9E3;
--color-accent-text: #E9ECF2; /* links: ink + underline (never colour alone) */
--color-accent-soft: rgba(233, 236, 242, 0.08); /* selected row / tab */
--color-focus: #7CC4F8; /* focus ring: 8.3–10.2:1 on every surface */
--color-on-solid: #0B0E14; /* text on any solid semantic/grade fill ≥ 7.3:1 */
--state-hover: rgba(255, 255, 255, 0.08); /* overlay on solid fills (danger button) */
--state-press: rgba(255, 255, 255, 0.14);
/* semantic: base = icons/graphics/fills, -text = AA text, -soft = tint bg */
--color-positive: #42D3BC; --color-positive-text: #42D3BC; --color-positive-soft: rgba(66, 211, 188, 0.14);
--color-negative: #FF7466; --color-negative-text: #FF7466; --color-negative-soft: rgba(255, 116, 102, 0.14);
--color-warning: #F5B946; --color-warning-text: #F5B946; --color-warning-soft: rgba(245, 185, 70, 0.14);
--color-info: #62B6F2; --color-info-text: #62B6F2; --color-info-soft: rgba(98, 182, 242, 0.14);
--color-success: var(--color-positive);
--color-success-text: var(--color-positive-text);
--color-success-soft: var(--color-positive-soft);
/* grades: base = solid fill / meter / chart, -text = letter on surface or soft tint */
--grade-a: #42D3BC; --grade-a-text: #42D3BC; --grade-a-soft: rgba(66, 211, 188, 0.14);
--grade-b: #9AD07A; --grade-b-text: #9AD07A; --grade-b-soft: rgba(154, 208, 122, 0.14);
--grade-c: #BDB7A6; --grade-c-text: #BDB7A6; --grade-c-soft: rgba(189, 183, 166, 0.14);
--grade-d: #F0A04A; --grade-d-text: #F0A04A; --grade-d-soft: rgba(240, 160, 74, 0.14);
--grade-f: #FF7466; --grade-f-text: #FF7466; --grade-f-soft: rgba(255, 116, 102, 0.14);
--grade-meter-off: #2E3644;
/* evidence-tier dots (neutral on purpose: evidence is not "good/bad") */
--tier-dot-on: #A9B2C2;
--tier-dot-off: #6B7587; /* hollow ring, 3.4:1 on surface-3 */
/* charts */
--chart-up: var(--color-positive);
--chart-down: var(--color-negative);
--chart-flat: #8C95A7;
--chart-baseline: #3A4352;
--chart-grid: #1E2430;
--chart-area-opacity: 0.18;
/* elevation: dark UIs separate layers with surface steps + hairlines */
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--color-border);
--shadow-3: 0 24px 64px rgba(0, 0, 0, 0.60), 0 0 0 1px var(--color-border);
--highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* card top edge */
}
}
:root[data-theme="dark"] {
color-scheme: dark;
/* surfaces, back to front */
--color-bg: #0B0E14;
--color-surface-1: #11151D; /* cards, table body */
--color-surface-2: #171C26; /* inputs, hover rows, nested panels */
--color-surface-3: #1D2330; /* popovers, modal, tooltips */
--color-overlay: rgba(4, 6, 10, 0.72); /* modal scrim */
--color-skeleton: #1F2532;
--color-skeleton-shine: #2A3242;
/* borders */
--color-border-subtle: #222936; /* dividers, card outline (decorative) */
--color-border: #2E3644; /* table grid, secondary button */
--color-border-strong: #6B7587; /* input outline: 3.9:1 on surface-1 */
/* text */
--color-text: #E9ECF2; /* 13.3–16.3:1 */
--color-text-secondary: #A9B2C2; /* 7.4–9.1:1 */
--color-text-tertiary: #8C95A7; /* 5.2–6.4:1 — captions, meta */
--color-text-disabled: #5A6272; /* disabled only (WCAG-exempt) */
--color-text-on-accent: #0B0E14; /* on the ink-white primary button: 16.3:1 */
/* accent = INK. The interface itself is monochrome; colour is reserved for
meaning (grades, price direction, flags). Primary button, links, selection. */
--color-accent: #E9ECF2;
--color-accent-hover: #FFFFFF;
--color-accent-active: #D3D9E3;
--color-accent-text: #E9ECF2; /* links: ink + underline (never colour alone) */
--color-accent-soft: rgba(233, 236, 242, 0.08); /* selected row / tab */
--color-focus: #7CC4F8; /* focus ring: 8.3–10.2:1 on every surface */
--color-on-solid: #0B0E14; /* text on any solid semantic/grade fill ≥ 7.3:1 */
--state-hover: rgba(255, 255, 255, 0.08); /* overlay on solid fills (danger button) */
--state-press: rgba(255, 255, 255, 0.14);
/* semantic: base = icons/graphics/fills, -text = AA text, -soft = tint bg */
--color-positive: #42D3BC; --color-positive-text: #42D3BC; --color-positive-soft: rgba(66, 211, 188, 0.14);
--color-negative: #FF7466; --color-negative-text: #FF7466; --color-negative-soft: rgba(255, 116, 102, 0.14);
--color-warning: #F5B946; --color-warning-text: #F5B946; --color-warning-soft: rgba(245, 185, 70, 0.14);
--color-info: #62B6F2; --color-info-text: #62B6F2; --color-info-soft: rgba(98, 182, 242, 0.14);
--color-success: var(--color-positive);
--color-success-text: var(--color-positive-text);
--color-success-soft: var(--color-positive-soft);
/* grades: base = solid fill / meter / chart, -text = letter on surface or soft tint */
--grade-a: #42D3BC; --grade-a-text: #42D3BC; --grade-a-soft: rgba(66, 211, 188, 0.14);
--grade-b: #9AD07A; --grade-b-text: #9AD07A; --grade-b-soft: rgba(154, 208, 122, 0.14);
--grade-c: #BDB7A6; --grade-c-text: #BDB7A6; --grade-c-soft: rgba(189, 183, 166, 0.14);
--grade-d: #F0A04A; --grade-d-text: #F0A04A; --grade-d-soft: rgba(240, 160, 74, 0.14);
--grade-f: #FF7466; --grade-f-text: #FF7466; --grade-f-soft: rgba(255, 116, 102, 0.14);
--grade-meter-off: #2E3644;
/* evidence-tier dots (neutral on purpose: evidence is not "good/bad") */
--tier-dot-on: #A9B2C2;
--tier-dot-off: #6B7587; /* hollow ring, 3.4:1 on surface-3 */
/* charts */
--chart-up: var(--color-positive);
--chart-down: var(--color-negative);
--chart-flat: #8C95A7;
--chart-baseline: #3A4352;
--chart-grid: #1E2430;
--chart-area-opacity: 0.18;
/* elevation: dark UIs separate layers with surface steps + hairlines */
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--color-border);
--shadow-3: 0 24px 64px rgba(0, 0, 0, 0.60), 0 0 0 1px var(--color-border);
--highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* card top edge */
}
/* ==========================================================================
PHONE overrides (< 600px). Review viewport: 390×844.
========================================================================== */
@media (max-width: 599px) {
:root {
--text-display: 32px; --leading-display: 40px;
--text-h1: 24px; --leading-h1: 32px;
--text-h2: 18px; --leading-h2: 26px;
--text-verdict: 17px; --leading-verdict: 26px;
--text-body: 16px; --leading-body: 24px; /* 16px also stops iOS input zoom */
--text-num-lg: 28px; --leading-num-lg: 36px;
--grade-size-xl: 36px;
--page-gutter: 16px;
--grid-gap: 16px;
--card-padding: 16px;
--control-h-md: 44px;
--row-h: 64px;
}
}
/* Motion off for users who ask for it */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 0ms;
--dur-base: 0ms;
--dur-slow: 0ms;
}
}
/* ==========================================================================
SCREENER-1 (2026-10-11, AMEND-SCREENER-1-v2 §5): the 15 size variables of the home coin table, values from the
design branch fb38c1e tokens v2. ADDED only — every declaration above is byte-unchanged (colours, fonts and
spacing do not change).
========================================================================== */
:root {
--col-coin-min: 200px; --col-coin-phone: 128px; --col-letter: 46px; --measure: 720px; --row-h-compact: 36px;
--size-chip: 24px; --size-icon: 16px; --size-icon-xs: 12px; --size-screen: 100svh; --size-sheet-max: 85svh;
--size-topbar: 56px; --size-tri: 10px; --tile-md: 32px; --tile-sm: 24px; --tooltip-max: 300px;
}
/* ==========================================================================
Barracudo — component layer (v1.2). Extracted verbatim from preview.html v1.1
(everything after the inlined tokens). Uses ONLY tokens.css variables.
Screens = tokens.css + components.css + screens/screens.css.
Preview-only helpers (.ds-*, .state*, .swatch*, .type-row, .tile …) are harmless here.
========================================================================== */
/* ===== base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0; background: var(--color-bg); color: var(--color-text);
font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body);
font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--color-accent-text); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--font-num-features); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico--20 { width: 20px; height: 20px; }
.ico--12 { width: 12px; height: 12px; }
.ico-fill { width: 10px; height: 10px; flex: none; fill: currentColor; }
.skip { position: absolute; left: 16px; top: -48px; z-index: var(--z-toast); background: var(--color-accent); color: var(--color-text-on-accent); padding: 8px 12px; border-radius: var(--radius-sm); }
.skip:focus { top: 8px; }
/* type utilities */
.t-display { font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.t-h1 { font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.t-h2 { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.t-h3 { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-semibold); }
.t-verdict { font-family: var(--font-serif); font-size: var(--text-verdict); line-height: var(--leading-verdict); font-weight: 500; }
.t-body { font-size: var(--text-body); line-height: var(--leading-body); }
.t-sm { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.t-caption { font-size: var(--text-caption); line-height: var(--leading-caption); }
.t-num-lg { font-size: var(--text-num-lg); line-height: var(--leading-num-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.t-num { font-size: var(--text-num); line-height: var(--leading-num); font-weight: var(--weight-medium); }
.muted { color: var(--color-text-secondary); }
.faint { color: var(--color-text-tertiary); }
/* ===== preview chrome (not part of the product) ===== */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-bg); border-bottom: 1px solid var(--color-border-subtle); }
.topbar__in { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-gutter); min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); min-width: 0; }
.brand__mark { width: auto; min-width: 28px; padding: 0 7px; height: 28px; border-radius: 7px; background: var(--color-text); color: var(--color-bg); display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; flex: none; }
.brand__name { display: none; font-weight: 650; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.brand__tag { font-size: 12px; color: var(--color-text-tertiary); white-space: nowrap; }
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); }
.seg button { all: unset; box-sizing: border-box; height: 28px; padding: 0 10px; border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; }
.seg button:hover { color: var(--color-text); }
.seg button[aria-pressed="true"] { background: var(--color-surface-3); color: var(--color-text); box-shadow: var(--shadow-1); }
.seg button:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; }
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-gutter); }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 56px; }
.intro { display: grid; gap: 16px; max-width: 760px; }
.glance { background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--highlight-top), var(--shadow-1); display: grid; gap: 20px; min-width: 0; }
.glance__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.scale li { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; min-width: 0; }
.scale b { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--color-text); }
.scale .num { font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); }
.scale .meter i { width: 8px; }
.key { margin: 0; display: grid; gap: 10px; border-top: 1px solid var(--color-border-subtle); padding-top: 16px; }
.key div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.key dt { display: flex; gap: 4px; align-items: center; }
.key dd { margin: 0; font-size: 13px; line-height: 18px; color: var(--color-text-secondary); }
.hint { font-size: 12px; color: var(--color-text-tertiary); }
.trans { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--color-text-tertiary); }
.coin-spark { display: grid; justify-items: end; gap: 2px; }
.jmini { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border-subtle); color: inherit; text-decoration: none; }
.jmini:last-child { border-bottom: 0; }
.jmini:hover { background: var(--color-surface-2); }
.jmini__info { display: grid; line-height: 18px; min-width: 0; }
.jmini .jresult { text-align: right; min-width: 150px; }
.intro p { color: var(--color-text-secondary); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 0; margin: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface-1); color: var(--color-text-secondary); text-decoration: none; font-size: 13px; font-weight: 500; }
.toc a:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.ds-section { padding-top: 72px; scroll-margin-top: 64px; }
.ds-section > header { display: grid; gap: 8px; margin-bottom: 24px; max-width: 820px; }
.ds-section > header p { color: var(--color-text-secondary); }
.eyebrow { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); letter-spacing: 0.02em; }
.ds-sub { margin-top: 40px; }
.ds-sub > h3 { margin-bottom: 4px; }
.ds-sub > p.why { color: var(--color-text-secondary); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); max-width: 820px; margin-bottom: 16px; }
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.states--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.state { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-width: 0; }
.state__label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--color-text-tertiary); }
.state__stage { background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; justify-content: center; }
.state__stage--center { align-items: center; }
.state__stage--stretch { align-items: stretch; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stack { display: grid; gap: 12px; min-width: 0; }
.note { font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); }
.sample-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-xs); background: var(--color-warning-soft); color: var(--color-warning-text); border: 1px dashed var(--color-warning); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
/* ===== token sheet ===== */
.type-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--color-border-subtle); }
.type-row__meta { font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); }
.type-row__meta b { display: block; color: var(--color-text-secondary); font-weight: 600; font-size: 13px; }
.numcol { display: inline-grid; gap: 2px; text-align: right; padding: 12px 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-1); }
.numcol--prop { font-variant-numeric: proportional-nums; font-feature-settings: "pnum" 1; }
.swatch-group { margin-top: 28px; }
.swatch-group > h4 { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 10px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.swatch { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-1); min-width: 0; }
.swatch__chip { width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.swatch__name { font-size: 12px; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.swatch__val { font-size: 12px; color: var(--color-text-tertiary); overflow-wrap: anywhere; }
.swatch__cr { font-size: 12px; color: var(--color-text-secondary); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pass { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--color-positive-soft); color: var(--color-positive-text); }
.fail { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--color-negative-soft); color: var(--color-negative-text); }
.space-row { display: grid; grid-template-columns: 110px 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0; font-size: 12px; color: var(--color-text-secondary); }
.space-bar { height: 12px; background: var(--color-text-secondary); border-radius: 2px; opacity: 0.55; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.tile { height: 88px; background: var(--color-surface-1); border: 1px solid var(--color-border); display: grid; place-items: center; font-size: 12px; color: var(--color-text-secondary); text-align: center; padding: 8px; }
/* ===== base components ===== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h-md); padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn:focus-visible, .btn.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.btn--primary { background: var(--color-accent); color: var(--color-text-on-accent); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--color-accent-hover); }
.btn--primary:active, .btn--primary.is-active { background: var(--color-accent-active); }
.btn--secondary { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--color-surface-3); border-color: var(--color-border-strong); }
.btn--secondary:active, .btn--secondary.is-active { background: var(--color-surface-2); }
.btn--ghost { background: transparent; color: var(--color-text-secondary); }
.btn--ghost:hover, .btn--ghost.is-hover { background: var(--color-accent-soft); color: var(--color-text); }
.btn--danger { background: var(--color-negative); color: var(--color-on-solid); }
.btn--danger:hover, .btn--danger.is-hover { background-image: linear-gradient(var(--state-hover), var(--state-hover)); }
.btn--danger:active, .btn--danger.is-active { background-image: linear-gradient(var(--state-press), var(--state-press)); }
.btn--sm { height: var(--control-h-sm); padding: 0 12px; font-size: 13px; }
.btn--lg { height: var(--control-h-lg); padding: 0 20px; font-size: 15px; }
.btn--icon { width: var(--control-h-md); padding: 0; }
.btn--sm.btn--icon { width: var(--control-h-sm); }
.btn[disabled], .btn.is-disabled { background: var(--color-surface-2); color: var(--color-text-disabled); border-color: var(--color-border-subtle); cursor: not-allowed; background-image: none; }
.btn.is-loading { cursor: progress; }
.spinner { width: 14px; height: 14px; border: 2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.field { display: grid; gap: 6px; min-width: 0; width: 100%; max-width: 360px; }
.field__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--color-text); }
.field__label .opt { color: var(--color-text-tertiary); font-weight: 400; }
.field__hint { font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); }
.field__msg { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 16px; }
.field__msg .ico { width: 14px; height: 14px; margin-top: 1px; }
.field__msg--error { color: var(--color-negative-text); }
.field__msg--success { color: var(--color-positive-text); }
.control { position: relative; }
.input, .select { width: 100%; height: var(--control-h-md); padding: 0 12px; background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-body); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.input::placeholder { color: var(--color-text-tertiary); opacity: 1; }
.input:hover, .select:hover, .is-hover .input, .is-hover .select { border-color: var(--color-text-tertiary); }
.input:focus-visible, .select:focus-visible, .is-focus .input, .is-focus .select { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 1px var(--color-focus); }
.is-error .input, .is-error .select { border-color: var(--color-negative); }
.is-error .input:focus-visible, .is-error .select:focus-visible { box-shadow: 0 0 0 1px var(--color-negative); }
.is-success .input { border-color: var(--color-positive); }
.input[disabled], .select[disabled] { color: var(--color-text-disabled); background: var(--color-bg); border-color: var(--color-border); cursor: not-allowed; }
.control--trail .input { padding-right: 38px; }
.control__trail { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--color-text-tertiary); pointer-events: none; }
.is-success .control__trail { color: var(--color-positive); }
.is-error .control__trail { color: var(--color-negative); }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.select-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-secondary); pointer-events: none; }
.notice { --n: var(--color-info); --n-soft: var(--color-info-soft); display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--radius-md); background: var(--n-soft); border: 1px solid var(--color-border-subtle); border-left: 3px solid var(--n); width: 100%; }
.notice__icon { color: var(--n); width: 20px; height: 20px; }
.notice__title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--color-text); }
.notice__body { font-size: 13px; line-height: 20px; color: var(--color-text-secondary); }
.notice__actions { display: flex; gap: 8px; align-items: center; }
.notice--success { --n: var(--color-positive); --n-soft: var(--color-positive-soft); }
.notice--warning { --n: var(--color-warning); --n-soft: var(--color-warning-soft); }
.notice--error { --n: var(--color-negative); --n-soft: var(--color-negative-soft); }
.card { background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--card-padding); box-shadow: var(--highlight-top), var(--shadow-1); min-width: 0; width: 100%; }
.card--interactive { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.card--interactive:hover, .card--interactive.is-hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
.card.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 8px; flex-wrap: wrap; }
.card__title { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: 600; }
.card__empty { display: grid; justify-items: start; gap: 10px; }
.sk { display: block; background: linear-gradient(90deg, var(--color-skeleton) 0%, var(--color-skeleton-shine) 50%, var(--color-skeleton) 100%); background-size: 200% 100%; animation: sk 1.4s linear infinite; border-radius: var(--radius-xs); }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sk, .spinner { animation: none; } }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; line-height: 1; background: var(--color-surface-2); color: var(--color-text-secondary); border: 1px solid var(--color-border-subtle); white-space: nowrap; }
.chip--pos { background: var(--color-positive-soft); color: var(--color-positive-text); border-color: transparent; }
.chip--neg { background: var(--color-negative-soft); color: var(--color-negative-text); border-color: transparent; }
.chip--warn { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: transparent; }
.chip--info { background: var(--color-info-soft); color: var(--color-info-text); border-color: transparent; }
.ticker { font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-ticker); color: var(--color-text-tertiary); text-transform: uppercase; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-feature-settings: var(--font-num-features); font-weight: 500; white-space: nowrap; }
.delta--up { color: var(--color-positive-text); }
.delta--down { color: var(--color-negative-text); }
.delta--flat { color: var(--color-text-tertiary); }
.tip { background: var(--color-surface-3); color: var(--color-text); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: 10px 12px; font-size: 13px; line-height: 18px; max-width: 300px; }
.tip b { font-weight: 600; }
.tip .faint { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; }
.table-wrap { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-1); overflow: hidden; width: 100%; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-text-tertiary); padding: 0 16px; height: 40px; border-bottom: 1px solid var(--color-border); white-space: nowrap; background: var(--color-surface-1); }
.table td { padding: 0 16px; height: var(--row-h); border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .r { text-align: right; }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.table tbody tr:hover, .table tbody tr.is-hover { background: var(--color-surface-2); }
.table tbody tr:focus-visible, .table tbody tr.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: calc(-1 * var(--focus-width)); }
.table tbody tr[aria-selected="true"] { background: var(--color-accent-soft); }
.th-sort { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; height: 28px; border-radius: 4px; color: inherit; }
.th-sort:hover { color: var(--color-text); }
.th-sort:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
th[aria-sort] .th-sort { color: var(--color-text); }
.coin-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.coin-cell__logo { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--color-surface-3); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.coin-cell__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-cell__txt { display: grid; min-width: 0; line-height: 18px; }
.table-state { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 32px 16px; color: var(--color-text-secondary); }
.modal { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--color-surface-3); color: var(--color-text); box-shadow: var(--shadow-3); }
.modal::backdrop { background: var(--color-overlay); }
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 20px 0; }
.modal__body { padding: 16px 20px 20px; display: grid; gap: 16px; }
.modal__body .field { max-width: none; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--color-border-subtle); }
.modal-stage { position: relative; width: 100%; padding: 24px 16px; border-radius: var(--radius-lg); background: var(--color-overlay); display: grid; place-items: center; overflow: hidden; }
.modal-stage .modal { position: static; display: block; width: 100%; max-width: 440px; }
.modal-stage .modal__body { gap: 12px; }
/* ===== domain components ===== */
[data-grade="A"] { --g: var(--grade-a); --g-text: var(--grade-a-text); --g-soft: var(--grade-a-soft); }
[data-grade="B"] { --g: var(--grade-b); --g-text: var(--grade-b-text); --g-soft: var(--grade-b-soft); }
[data-grade="C"] { --g: var(--grade-c); --g-text: var(--grade-c-text); --g-soft: var(--grade-c-soft); }
[data-grade="D"] { --g: var(--grade-d); --g-text: var(--grade-d-text); --g-soft: var(--grade-d-soft); }
[data-grade="F"] { --g: var(--grade-f); --g-text: var(--grade-f-text); --g-soft: var(--grade-f-soft); }
.grade { display: inline-flex; align-items: center; gap: 12px; position: relative; border-radius: var(--radius-md); }
.grade:focus-visible, .grade.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: 4px; }
.grade__tile { position: relative; display: grid; place-items: center; flex: none; font-weight: 700; line-height: 1; letter-spacing: -0.02em; border-radius: var(--radius-sm); }
.grade--solid .grade__tile { background: var(--g); color: var(--color-on-solid); }
.grade--soft .grade__tile { background: var(--g-soft); color: var(--g-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 45%, transparent); }
.grade--xl .grade__tile { width: 72px; height: 72px; font-size: var(--grade-size-xl); border-radius: var(--radius-lg); }
.grade--lg .grade__tile { width: 48px; height: 48px; font-size: var(--grade-size-lg); border-radius: var(--radius-md); }
.grade--md .grade__tile { width: 28px; height: 28px; font-size: 16px; }
.grade--sm .grade__tile { width: 20px; height: 20px; font-size: 12px; border-radius: var(--radius-xs); }
.grade__info { display: grid; gap: 4px; min-width: 0; }
.grade__score { font-variant-numeric: tabular-nums; font-feature-settings: var(--font-num-features); font-weight: 600; color: var(--color-text); line-height: 1; }
.grade--xl .grade__score { font-size: 28px; letter-spacing: -0.01em; }
.grade--lg .grade__score { font-size: 20px; }
.grade--md .grade__score { font-size: 14px; }
.grade__max { font-size: 0.55em; color: var(--color-text-tertiary); font-weight: 500; margin-left: 2px; }
.grade__label { font-size: 12px; line-height: 16px; color: var(--color-text-secondary); white-space: nowrap; }
.grade.is-empty .grade__tile { background: transparent; color: var(--color-text-tertiary); box-shadow: inset 0 0 0 1px var(--color-border-strong); border: 0; outline: 1px dashed var(--color-border-strong); outline-offset: -1px; box-shadow: none; }
.grade.is-error .grade__tile { background: var(--color-surface-2); color: var(--color-negative-text); box-shadow: inset 0 0 0 1px var(--color-border); }
.grade.is-updated .grade__tile { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--g); }
.grade__cap { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg); color: var(--color-negative); }
.grade__cap .ico { width: 18px; height: 18px; }
.meter { display: inline-flex; gap: 2px; }
.meter i { width: 12px; height: 4px; border-radius: 1px; background: var(--grade-meter-off); }
.grade--md .meter i { width: 6px; height: 3px; }
.meter[data-level="5"] i, .meter[data-level="4"] i:nth-child(-n+4), .meter[data-level="3"] i:nth-child(-n+3), .meter[data-level="2"] i:nth-child(-n+2), .meter[data-level="1"] i:nth-child(1) { background: var(--g); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pillar { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); text-align: left; color: inherit; font: inherit; min-width: 0; cursor: pointer; width: 100%; transition: border-color var(--dur-fast) var(--ease-out); }
.pillar:hover, .pillar.is-hover { border-color: var(--color-border-strong); }
.pillar:focus-visible, .pillar.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.pillar--unweighted { border-style: dashed; border-color: var(--color-border-strong); background: transparent; }
.pillar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.pillar__name { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pillar__weight { font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pillar__main { display: flex; align-items: center; gap: 8px; }
.pillar__score { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pillar__why { font-size: 12px; line-height: 16px; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pillar.is-empty .pillar__why, .pillar.is-error .pillar__why { color: var(--color-text-tertiary); }
.tier { display: inline-flex; gap: 3px; align-items: center; margin-left: auto; }
.tier i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--tier-dot-off); }
.tier[data-tier="1"] i, .tier[data-tier="2"] i:nth-child(-n+2), .tier[data-tier="3"] i:nth-child(1) { background: var(--tier-dot-on); border-color: var(--tier-dot-on); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend .tier { margin-left: 0; }
.dash-box { width: 14px; height: 10px; border: 1px dashed var(--color-border-strong); border-radius: 2px; }
.flags { display: grid; gap: 8px; width: 100%; }
.flags__head { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-text); }
.flags__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px; }
.flag { --f: var(--color-negative); --f-text: var(--color-negative-text); --f-soft: var(--color-negative-soft); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--f-soft); border-left: 3px solid var(--f); }
.flag--caution { --f: var(--color-warning); --f-text: var(--color-warning-text); --f-soft: var(--color-warning-soft); }
.flag--info { --f: var(--color-info); --f-text: var(--color-info-text); --f-soft: var(--color-info-soft); }
.flag--clear { --f: var(--color-positive); --f-text: var(--color-positive-text); --f-soft: var(--color-positive-soft); }
.flag__icon { color: var(--f-text); width: 20px; height: 20px; }
.flag__title { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--color-text); }
.flag__effect { color: var(--f-text); }
.flag__text { font-size: 13px; line-height: 18px; color: var(--color-text-secondary); grid-column: 2; }
.flag.is-focus, .flag:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.flags-none { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--color-text-secondary); }
.flags-none .ico { color: var(--color-positive); }
.spark { display: block; overflow: visible; }
.spark .line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark .area { stroke: none; fill-opacity: var(--chart-area-opacity); }
.spark .base { stroke: var(--chart-baseline); stroke-width: 1; stroke-dasharray: 2 3; }
.spark[data-trend="up"] .line { stroke: var(--chart-up); } .spark[data-trend="up"] .area, .spark[data-trend="up"] .end { fill: var(--chart-up); }
.spark[data-trend="down"] .line { stroke: var(--chart-down); } .spark[data-trend="down"] .area, .spark[data-trend="down"] .end { fill: var(--chart-down); }
.spark[data-trend="flat"] .line { stroke: var(--chart-flat); } .spark[data-trend="flat"] .area, .spark[data-trend="flat"] .end { fill: var(--chart-flat); }
.spark .cross { stroke: var(--color-text-tertiary); stroke-width: 1; }
.spark-wrap { display: inline-flex; align-items: center; gap: 10px; }
.spark-empty { width: 120px; height: 32px; display: grid; place-items: center; border: 1px dashed var(--color-border); border-radius: var(--radius-xs); font-size: 12px; color: var(--color-text-tertiary); }
.coin-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: start; width: 100%; }
.coin-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.coin-logo { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 18px; background: var(--color-surface-3); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.coin-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.coin-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; }
.coin-verdict { margin-top: 14px; max-width: 62ch; color: var(--color-text); }
.coin-meta { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.coin-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.coin-score { display: grid; gap: 8px; justify-items: end; }
.jlist { width: 100%; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-1); overflow: hidden; }
.jhead, .jrow { display: grid; grid-template-columns: 104px minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 1.1fr) 132px; gap: 16px; align-items: center; padding: 0 16px; }
.jhead { height: 40px; font-size: 12px; color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border); }
.jrow { min-height: 60px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-subtle); font-size: 14px; color: inherit; text-decoration: none; }
.jrow:last-child { border-bottom: 0; }
.jrow:hover, .jrow.is-hover { background: var(--color-surface-2); }
.jrow:focus-visible, .jrow.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: calc(-1 * var(--focus-width)); }
.jgrades { display: flex; align-items: center; gap: 6px; }
.jgrades .arrow { color: var(--color-text-tertiary); }
.jprice { display: grid; line-height: 18px; }
.jprice small { font-size: 12px; color: var(--color-text-tertiary); }
.jresult { display: grid; line-height: 18px; }
.jresult small { font-size: 12px; color: var(--color-text-tertiary); white-space: nowrap; }
.jl { display: none; font-size: 12px; color: var(--color-text-tertiary); }
.chg-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.chg { --c: var(--color-text-secondary); --c-soft: var(--color-surface-2); display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 4px; border-bottom: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); }
.chg:last-child { border-bottom: 0; }
.chg:hover, .chg.is-hover { background: var(--color-surface-2); }
.chg:focus-visible, .chg.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: 0; }
.chg--up { --c: var(--color-positive-text); --c-soft: var(--color-positive-soft); }
.chg--down { --c: var(--color-negative-text); --c-soft: var(--color-negative-soft); }
.chg--flag { --c: var(--color-warning-text); --c-soft: var(--color-warning-soft); }
.chg--clear { --c: var(--color-positive-text); --c-soft: var(--color-positive-soft); }
.chg__icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-soft); color: var(--c); }
.chg__title { font-size: 14px; line-height: 20px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chg__text { font-size: 13px; line-height: 18px; color: var(--color-text-secondary); }
.chg__date { font-size: 12px; line-height: 20px; color: var(--color-text-tertiary); white-space: nowrap; }
.unread { width: 8px; height: 8px; border-radius: 50%; background: var(--color-focus); display: inline-block; }
/* ===== v1: profile, strip, thesis, signals, size ===== */
.grade--info .grade__tile { background: transparent; box-shadow: none; outline: 1px dashed color-mix(in srgb, var(--g) 85%, transparent); outline-offset: -1px; }
.strip-wrap { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.strip { display: inline-flex; gap: 3px; flex-wrap: nowrap; }
.strip .grade--sm .grade__tile { width: 20px; height: 20px; font-size: 12px; }
.coin-cell__sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.size { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: var(--radius-xs); font-size: 12px; line-height: 1; font-weight: 500; color: var(--color-text-tertiary); border: 1px solid var(--color-border); white-space: nowrap; }
.size--risk { color: var(--color-warning-text); background: var(--color-warning-soft); border-color: transparent; font-weight: 600; }
.ph-only { display: none; }
.cell-extra { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }
.sigs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.profile { display: grid; gap: 12px; min-width: 0; width: 100%; align-content: start; }
.profile__count { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.profile__n { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.profile__n small { font-size: 16px; font-weight: 500; color: var(--color-text-tertiary); }
.profile__lbl { font-size: 13px; color: var(--color-text-secondary); }
.facts { margin: 0; display: grid; gap: 6px; }
.facts div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; line-height: 16px; }
.facts dt { color: var(--color-text-tertiary); }
.facts dd { margin: 0; color: var(--color-text); display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar { display: block; flex: 1; max-width: 120px; height: 4px; border-radius: 2px; background: var(--grade-meter-off); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--color-text-secondary); }
.slot { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.slot__tile { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px dashed var(--color-border-strong); display: grid; place-items: center; color: var(--color-text-tertiary); }
.slot__title { font-size: 13px; line-height: 18px; font-weight: 600; }
.slot__text { font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); }
.coin-score--profile { justify-items: stretch; width: 320px; }
.coin-score--profile .coin-spark { justify-items: start; }
.coin-score--profile .spark { width: 100%; }
.pillar__meta { font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); }
.pillar__note { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--color-text-secondary); }
.family { display: grid; gap: 4px; padding-top: 4px; }
.family__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.family__tag { width: 24px; height: 24px; border-radius: var(--radius-xs); display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--color-text); color: var(--color-bg); }
.thesis { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-1); overflow: hidden; width: 100%; }
.state__stage .thesis { background: var(--color-surface-2); }
.thesis__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 16px; border-bottom: 1px solid var(--color-border-subtle); }
.thesis__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thesis__foot { display: grid; gap: 8px; justify-items: start; padding: 16px; border-top: 1px solid var(--color-border-subtle); }
.stamp { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); }
.tq { border-bottom: 1px solid var(--color-border-subtle); }
.tq:last-child { border-bottom: 0; }
.tq > summary { list-style: none; display: grid; grid-template-columns: 20px minmax(0, 1fr) 150px 16px; gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; }
.tq > summary::-webkit-details-marker { display: none; }
.tq > summary:hover, .tq.is-hover > summary { background: var(--color-surface-2); }
.state__stage .tq > summary:hover, .state__stage .tq.is-hover > summary { background: var(--color-surface-3); }
.tq > summary:focus-visible, .tq.is-focus > summary { outline: var(--focus-width) solid var(--color-focus); outline-offset: calc(-1 * var(--focus-width)); }
.tq__n { font-size: 12px; color: var(--color-text-tertiary); font-weight: 600; }
.tq__q { font-size: 14px; line-height: 20px; color: var(--color-text); }
.tq__meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tq__chev { color: var(--color-text-tertiary); transition: transform var(--dur-fast) var(--ease-out); }
.tq[open] .tq__chev { transform: rotate(180deg); }
.tq__body { padding: 0 16px 14px 48px; display: grid; gap: 4px; justify-items: start; font-size: 13px; line-height: 20px; color: var(--color-text-secondary); }
.tq__body a { display: inline-flex; align-items: center; gap: 4px; }
.ans { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: 12px; font-weight: 600; color: var(--color-text); white-space: nowrap; }
.ans--na { color: var(--color-text-tertiary); border-style: dashed; background: transparent; }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 10px; height: 4px; border-radius: 1px; background: var(--grade-meter-off); }
.pips[data-v="1"] i:first-child, .pips[data-v="2"] i { background: var(--color-text); }
.pips--na i { background: transparent; outline: 1px dashed var(--color-border-strong); outline-offset: -1px; }
.thesis { container-type: inline-size; }
@container (max-width: 560px) {
.tq > summary { grid-template-columns: 20px minmax(0, 1fr) 16px; grid-template-areas: "n q chev" ". meta ."; gap: 6px 10px; padding: 12px; }
.tq__n { grid-area: n; } .tq__q { grid-area: q; } .tq__meta { grid-area: meta; justify-content: flex-start; } .tq__chev { grid-area: chev; }
.tq__body { padding: 0 12px 12px 42px; }
}
.scenario { display: inline-grid; gap: 2px; padding: 8px 12px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.scenario b { font-size: 14px; line-height: 20px; font-weight: 600; }
.scenario span { font-size: 12px; line-height: 16px; color: var(--color-text-tertiary); }
.sig { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--radius-xs); font: inherit; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; }
.sig .ico { width: 14px; height: 14px; }
button.sig { cursor: pointer; }
button.sig:hover, .sig.is-hover { border-color: currentColor; }
button.sig:focus-visible, .sig.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.sig--prelim { color: var(--color-info-text); border: 1px dashed var(--color-info); background: transparent; }
.sig--ok { color: var(--color-positive-text); background: var(--color-positive-soft); }
.sig--fail { color: var(--color-negative-text); background: var(--color-negative-soft); }
.sig--risk { color: var(--color-warning-text); background: var(--color-warning-soft); }
.sig--icon { padding: 0 4px; }
.ev { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: var(--radius-xs); font-size: 12px; font-weight: 500; line-height: 1; color: var(--color-text-secondary); background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); white-space: nowrap; }
.ev--none { border-style: dashed; border-color: var(--color-border-strong); color: var(--color-text-tertiary); background: transparent; }
.sigcard { background: var(--color-surface-3); color: var(--color-text); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 16px; display: grid; gap: 10px; width: 100%; max-width: 460px; align-content: start; }
.sigcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sigcard__rule { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
.sigcard__hist { border-top: 1px solid var(--color-border-subtle); padding-top: 10px; display: grid; gap: 8px; }
.hist { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.hist th, .hist td { padding: 4px 0; text-align: left; font-weight: 400; }
.hist thead th { font-size: 12px; color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-subtle); }
.hist tbody th { color: var(--color-text-secondary); }
.hist td { font-weight: 600; }
.hist .r { text-align: right; padding-left: 16px; }
.caveats { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12px; line-height: 16px; color: var(--color-text-secondary); }
.sigcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; padding-top: 2px; }
.sigcard--pop { margin: auto; border: 0; inset: 0; position: fixed; height: fit-content; width: min(460px, calc(100vw - 32px)); box-shadow: var(--shadow-3); }
.sigcard--pop::backdrop { background: var(--color-overlay); }
.sigcard--pop:not(:popover-open) { display: none; }
.grade__info .grade__label { white-space: normal; }
h5 { margin: 0; }
.table tbody td { padding-top: 8px; padding-bottom: 8px; }
#rating-table .coin-cell { min-width: 200px; }
#rating-table .coin-cell__name { white-space: normal; }
.pillar__main { flex-wrap: wrap; row-gap: 4px; }
.pillar__score { white-space: nowrap; }
.sigcard__close { justify-self: end; }
.sigcard--pop .sample-tag { justify-self: start; }
.siglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.siglist li { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-2); }
.feed { list-style: none; margin: 0; padding: 0; width: 100%; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-1); overflow: hidden; }
.feed__item { display: grid; grid-template-columns: minmax(0, 1.2fr) 220px minmax(0, 1.6fr) auto; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border-subtle); }
.feed__item:last-child { border-bottom: 0; }
.feed__item:hover, .feed__item.is-hover { background: var(--color-surface-2); }
.feed__item:focus-visible, .feed__item.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: calc(-1 * var(--focus-width)); }
.feed__sig { display: grid; gap: 4px; min-width: 0; }
.feed__when { display: flex; align-items: center; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.table-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fchip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface-1); color: var(--color-text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.fchip:hover, .fchip.is-hover { color: var(--color-text); border-color: var(--color-border-strong); }
.fchip:focus-visible, .fchip.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.fchip[aria-pressed="true"] { background: var(--color-accent); color: var(--color-text-on-accent); border-color: transparent; }
.fchip .risk { color: var(--color-warning); }
.fchip[aria-pressed="true"] .risk { color: inherit; }
.fchip .cnt { color: var(--color-text-tertiary); font-size: 12px; }
.fchip[aria-pressed="true"] .cnt { color: inherit; opacity: 0.7; }
.fchip[disabled] { cursor: not-allowed; color: var(--color-text-disabled); border-color: var(--color-border-subtle); }
.fchip[disabled] .risk, .fchip[disabled] .cnt { color: inherit; }
.chg--sig { --c: var(--color-info-text); --c-soft: var(--color-info-soft); }
.size--high { color: var(--color-negative-text); background: var(--color-negative-soft); border-color: transparent; font-weight: 600; }
.fchip .risk--high { color: var(--color-negative); }
.liq { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.liq .ico { color: var(--color-text-tertiary); }
.liq:focus-visible, .liq.is-focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.liq--none { background: transparent; border-style: dashed; border-color: var(--color-border-strong); color: var(--color-text-tertiary); }
.liq--error { background: transparent; color: var(--color-negative-text); }
.liq--error .ico { color: var(--color-negative); }
.liq--icon { padding: 0 5px; }
.coin-liq { margin-top: 10px; }
.th-wrap { white-space: normal !important; min-width: 96px; line-height: 14px !important; }
@media (min-width: 600px) { #rating-table th, #rating-table td { padding-left: 12px; padding-right: 12px; } }
.chg__title .sig { height: 20px; }
.jgrades .t-caption { margin-left: 4px; }
/* sample */
.sample { border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-1); padding: 24px; display: grid; gap: 24px; box-shadow: var(--highlight-top), var(--shadow-1); }
.sample__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sample__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; }
.panel-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.mini-pillars { display: inline-flex; gap: 3px; }
.foot { margin-top: 96px; padding: 24px 0 48px; border-top: 1px solid var(--color-border-subtle); color: var(--color-text-tertiary); font-size: 12px; line-height: 18px; display: grid; gap: 6px; }
/* ===== responsive ===== */
@media (max-width: 1023px) {
.hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sample__grid { grid-template-columns: minmax(0, 1fr); }
.jhead { display: none; }
.jrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "coin result" "grades grades" "price price"; gap: 8px 12px; padding-top: 14px; padding-bottom: 14px; }
.jrow .jdate { display: none; }
.jrow .jcoin { grid-area: coin; }
.jrow .jgrades { grid-area: grades; }
.jrow .jprice-then { grid-area: price; }
.jrow .jprice-now { display: none; }
.jrow .jresult { grid-area: result; text-align: right; }
.jl { display: inline; }
.feed__item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "coin when" "q q" "sig sig"; gap: 8px 12px; }
.feed__coin { grid-area: coin; } .feed__q { grid-area: q; } .feed__sig { grid-area: sig; } .feed__when { grid-area: when; }
.col-wide { display: none; }
}
@media (max-width: 599px) {
.pillars { gap: 8px; }
.type-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.col-opt { display: none; }
.table th, .table td { padding: 0 12px; }
.coin-head { grid-template-columns: minmax(0, 1fr); }
.coin-actions .btn { flex: 1 1 0; }
.sample { padding: 16px; gap: 20px; border-radius: var(--radius-lg); }
.ds-section { padding-top: 56px; }
.hero { padding-top: 32px; }
.glance { padding: 16px; border-radius: var(--radius-lg); }
.scale { gap: 4px; }
.scale .grade--lg .grade__tile { width: 44px; height: 44px; font-size: 24px; }
.key div { grid-template-columns: 52px minmax(0, 1fr); }
.brand__tag { display: none; }
.topbar__in { flex-wrap: nowrap; }
.brand__name { overflow: hidden; text-overflow: ellipsis; }
.brand__mark { padding: 0 4px; }
.seg button { padding: 0 8px; font-size: 12px; }
.notice { grid-template-columns: 20px minmax(0, 1fr); }
.notice__actions { grid-column: 2; }
.pillar__head { flex-direction: column; align-items: flex-start; gap: 0; }
.pillar__name { white-space: normal; overflow: visible; }
.pillar__why { -webkit-line-clamp: 3; }
.coin-cell__name { white-space: normal; }
.coin-main { display: contents; }
.coin-head .coin-id { order: 1; }
.coin-score { order: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.coin-price { order: 3; margin-top: 0; }
.coin-liq { order: 3; margin-top: 0; }
.coin-verdict { order: 4; margin-top: 0; }
.coin-meta { order: 5; margin-top: 0; }
.coin-actions { order: 6; margin-top: 0; }
.jmini { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info result" "grades grades"; gap: 8px 12px; }
.jmini .jmini__info { grid-area: info; }
.jmini .jgrades { grid-area: grades; }
.jmini .jresult { grid-area: result; min-width: 0; }
.modal { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.modal__foot { flex-direction: column-reverse; }
.modal__foot .btn { width: 100%; }
.modal-stage .modal { border-radius: var(--radius-xl); }
.chg { grid-template-columns: 32px minmax(0, 1fr); }
.chg__date { grid-column: 2; line-height: 16px; }
.ph-only { display: flex; }
.coin-score--profile { width: 100%; display: grid; justify-content: stretch; }
.thesis__head { padding: 12px; }
.thesis__foot { padding: 12px; }
.fchip { height: 44px; }
.sigcard--pop { margin: auto auto 0; width: 100%; max-width: 100%; max-height: 90vh; overflow: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.table th, .table td { padding: 0 8px; }
.table th:first-child, .table td:first-child { padding-left: 12px; }
.table th:last-child, .table td:last-child { padding-right: 12px; }
.strip { gap: 2px; }
.strip .grade--sm .grade__tile { width: 18px; height: 18px; font-size: 11px; }
.size__risk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.facts div { grid-template-columns: 108px minmax(0, 1fr); }
.feed__item { padding: 12px; }
}
/* Barracudo reader site (packet 4) — layout of the static pages. Values are tokens (design/tokens.css) only; px appear
only in the design-system breakpoints (600 / 1024 / 1440) and 1 px hairlines (R1-12); the header's «Меню» breakpoint
is in em (40em, owner 3283).
Mobile first. */
html { scroll-padding-top: calc(var(--control-h-lg) + var(--space-4)); scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none; animation: none; } }
html:not(.js) .js-only { display: none; }
html.js .nojs-only, html.js .nojs-note { display: none; }
[hidden] { display: none; }
html.js.q #sections { display: none; } /* a query URL shows results: the sections never flash */
/* chrome */
/* SCREENER-2: brand left; the nav and the theme button on the right of one line. The nav is a list (GOV.UK «Header»
with navigation): inline from 40em; below it a «Меню» button (scripts only) shows the list under the bar. Without
scripts the list stays in the page and the button is not shown. The breakpoint is in em (owner 3283; CSS-Tricks «PX,
EM or REM Media Queries?»): an em media query follows the browser's default font size, so larger text gets the menu
at wider screens (640 px at 16 px, 840 px at 21 px). site.js watches the same max-width query. */
.route-nav { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-left: auto; min-width: 0; }
.route-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.nav-menu, .theme__btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
min-height: var(--control-h-sm); border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer;
font-size: var(--text-body-sm); font-weight: var(--weight-medium); }
.nav-menu { display: none; padding: 0 var(--space-3); box-shadow: inset 0 0 0 1px var(--color-border); }
.theme__btn { width: var(--control-h-sm); }
.nav-menu:hover, .theme__btn:hover, .theme__btn[aria-expanded="true"], .nav-menu[aria-expanded="true"] { color: var(--color-text); background: var(--color-accent-soft); }
.nav-menu:focus-visible, .theme__btn:focus-visible, .theme__menu button:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
/* the theme menu (WAI-ARIA APG menu button; MDN Web Docs header): three radio items, the chosen one ticked */
.theme { position: relative; flex: none; }
.theme__menu { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: var(--z-dropdown); margin: 0; padding: var(--space-1);
list-style: none; min-width: calc(var(--space-20) * 2); background: var(--color-surface-3); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.theme__menu button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--touch-min);
padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-body-sm); color: var(--color-text); cursor: pointer; white-space: nowrap; }
.theme__menu button:hover, .theme__menu button:focus { background: var(--color-accent-soft); }
.theme__menu button .ico { visibility: hidden; }
.theme__menu button[aria-checked="true"] { font-weight: var(--weight-semibold); }
.theme__menu button[aria-checked="true"] .ico { visibility: visible; }
/* the inline links from 40em to 599 px with their side padding halved (SCREENER-2: measured at 420 px, 428 px with 8 px
padding). Since owner 3283 the range is empty at any browser default font of 15 px and above (40em ≥ 600 px); kept
paired with the menu query so the menu rows never take the halved padding. */
@media (min-width: 40em) and (max-width: 599px) { .route-nav .route-nav__list a { padding: 0 var(--space-1); } }
@media (max-width: 39.9375em) {
html.js .nav-menu { display: inline-flex; }
/* closed: out of the layout before site.js sets `hidden` (no flash, no shift); open: full-width rows under the bar */
html.js .route-nav__list:not(.is-open) { display: none; }
html.js .route-nav__list.is-open { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 0; padding: var(--space-1) var(--page-gutter) var(--space-2);
background: var(--color-bg); border-bottom: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-2); }
html.js .route-nav__list.is-open a { display: flex; width: 100%; min-height: var(--touch-min); }
}
.route-nav a { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-body-sm); font-weight: var(--weight-medium); }
.route-nav a:hover { color: var(--color-text); background: var(--color-accent-soft); }
.route-nav a[aria-current="page"] { color: var(--color-text); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-border); }
.route-nav a:focus-visible, .crumb:focus-visible, .cgroup__all a:focus-visible, .pager a:focus-visible, .crow__name a:focus-visible, .tq__body a:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }
.topbar__in { flex-wrap: nowrap; }
.route-foot { margin-top: var(--space-12); padding-left: var(--page-gutter); padding-right: var(--page-gutter); } /* .foot resets the container gutter */
.foot__disc { color: var(--color-text-secondary); }
/* CMC-1 (owner 3391): the licence credit, muted like the footer captions (tertiary text: 5.54:1 light, 6.41:1 dark on
--color-bg); no underline at rest, underline on hover, the focus ring on keyboard focus; a 24 px target (WCAG 2.2 2.5.8) */
.foot__credit-link { display: inline-flex; align-items: center; min-height: var(--space-6); color: var(--color-text-tertiary); text-decoration: none; }
.foot__credit-link:hover { text-decoration: underline; text-decoration-color: currentColor; }
.foot__credit-link:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }
.nojs-note { margin: 0; }
.skip { max-width: calc(100% - var(--space-8)); }
.skip:not(:focus) { top: auto; bottom: 100%; }
/* headings and blocks */
.page-head { padding: var(--space-6) 0 var(--space-2); display: grid; gap: var(--space-2); max-width: calc(var(--space-20) * 11); }
.page-head p { color: var(--color-text-secondary); }
.card-title { display: grid; gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); }
.card-title .ticker { margin-left: var(--space-2); }
.crumb { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); margin-top: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-secondary); text-decoration: none; }
.crumb:hover { color: var(--color-text); }
.section { margin-top: var(--space-10); }
.section > h2, .section__head h2 { margin-bottom: var(--space-1); }
.section__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.sub-h { margin: var(--space-6) 0 var(--space-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.actions .btn { flex: 1 1 auto; }
.save-msg:empty { display: none; }
.save-msg { margin-top: var(--space-3); }
.card-foot { margin-top: var(--space-8); }
.prov { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-tertiary); overflow-wrap: anywhere; }
h1, h2, h3, .eyebrow { overflow-wrap: anywhere; }
/* disclosure: tap-accessible, never hover-only */
.disc > summary { cursor: pointer; list-style: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-height: var(--touch-min); max-width: 100%; color: var(--color-text-secondary); }
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }
.disc__body { margin: var(--space-1) 0 var(--space-2); padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.disc .chip { cursor: pointer; }
.filters[open] .tq__chev, .disc[open] > summary .tq__chev { transform: rotate(180deg); }
/* chips (shape + text; colour never alone) */
.chip, .pre-chip, .szc, .ans { white-space: normal; height: auto; min-height: var(--space-5); padding-top: var(--space-half); padding-bottom: var(--space-half); line-height: var(--leading-caption); max-width: 100%; overflow-wrap: anywhere; }
.pre-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding-left: var(--space-2); padding-right: var(--space-2); border-radius: var(--radius-xs); border: 1px dashed var(--color-border-strong); color: var(--color-text-tertiary); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.chip--accepted { color: var(--color-positive-text); background: var(--color-positive-soft); border-color: transparent; font-weight: var(--weight-semibold); }
.chip--open { border-style: dashed; border-color: var(--color-border-strong); color: var(--color-text); }
.chip--current { color: var(--color-text); border-color: var(--color-border-strong); font-weight: var(--weight-semibold); }
.ans--dash { border-style: dashed; }
.szc { display: inline-flex; align-items: center; gap: var(--space-1); padding-left: var(--space-2); padding-right: var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--color-text-tertiary); border: 1px solid var(--color-border); }
.szc--L4 { color: var(--color-warning-text); background: var(--color-warning-soft); border-color: transparent; font-weight: var(--weight-semibold); }
.szc--L5 { color: var(--color-negative-text); background: var(--color-negative-soft); border-color: transparent; font-weight: var(--weight-semibold); }
.szc .ico { width: var(--space-3); height: var(--space-3); }
.st-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.st-chip--trading_check { border-style: dashed; border-color: var(--color-border-strong); color: var(--color-text); }
/* buttons reflow down to 195 CSS px */
.btn { white-space: normal; height: auto; min-height: var(--touch-min); padding-top: var(--space-2); padding-bottom: var(--space-2); line-height: var(--leading-body-sm); text-align: center; max-width: 100%; }
.fchip { white-space: normal; height: auto; min-height: var(--touch-min); padding-top: var(--space-1); padding-bottom: var(--space-1); max-width: 100%; }
/* index */
.search { margin-top: var(--space-4); }
.search__field { max-width: calc(var(--space-20) * 6); }
.search__field .input { font-size: var(--text-h3); }
.filters { margin-top: var(--space-3); }
.filters__body { margin: var(--space-2) 0 0; display: grid; gap: var(--space-3); }
.filters__class { display: grid; gap: var(--space-1); max-width: calc(var(--space-20) * 4); }
.filters__class .select { padding-right: var(--space-10); }
#list-status { margin: var(--space-3) 0 0; min-height: var(--leading-body-sm); } /* reserved: no shift when JS fills it */
#search-alert:empty, #list-empty:empty { display: none; }
#search-alert, #list-empty { margin-top: var(--space-4); }
.empty-state { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.empty-state b { font-size: var(--text-h3); }
.empty-state p { color: var(--color-text-secondary); font-size: var(--text-body-sm); }
.empty-state .ico { color: var(--color-text-tertiary); }
.empty-state ul { margin: 0; padding-left: var(--space-4); }
.results { margin-top: var(--space-6); }
.results__list { margin-top: var(--space-3); }
.results #more { margin-top: var(--space-4); }
.qlist2 { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.qrow { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); min-width: 0; }
.qrow > *, .qrow__head > *, .qrow__meta > * { min-width: 0; max-width: 100%; }
.qrow:target, .qrow.is-target { border-color: var(--color-border-strong); }
.qrow--review { box-shadow: var(--highlight-top), var(--shadow-1); }
.qrow__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.qrow__reason { color: var(--color-text); overflow-wrap: anywhere; }
.qrow p, .crow p { overflow-wrap: anywhere; }
.qrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.qrow__meta .disc__body { flex-basis: 100%; }
.qrow__cta { justify-self: start; }
.qrow .st-list { margin-top: 0; }
.res__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.cgroup { margin-top: var(--space-6); display: grid; gap: var(--space-2); }
.cgroup__all { margin-top: var(--space-1); }
.cgroup__all a, .crow__name a, .pager a, .tq__body a { color: var(--color-text); text-underline-offset: var(--space-half); }
.cgroup__all a { display: inline-flex; align-items: center; min-height: var(--touch-min); font-weight: var(--weight-semibold); }
/* class pages */
.clist { margin: var(--space-3) 0 0; padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.crow { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
.crow__name a { display: inline-flex; align-items: center; min-height: var(--touch-min); font-weight: var(--weight-semibold); }
.pager { margin-top: var(--space-6); }
.pager ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pager a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch-min); min-height: var(--touch-min); padding: 0 var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); text-decoration: none; }
.pager a:hover { background: var(--color-surface-2); }
.pager a[aria-current="page"] { background: var(--color-accent); color: var(--color-text-on-accent); border-color: transparent; font-weight: var(--weight-semibold); }
/* card */
.topblock { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: 0 0 var(--space-2); }
.topblock__item { display: grid; gap: var(--space-1); min-width: 0; align-content: start; }
.topblock dt { font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); }
.topblock dd { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text); overflow-wrap: anywhere; }
.topblock dd.t-verdict { font-size: var(--text-verdict); line-height: var(--leading-verdict); font-weight: var(--weight-semibold); }
.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.kv dt { color: var(--color-text-tertiary); }
.kv dd { margin: 0 0 var(--space-2); color: var(--color-text); min-width: 0; overflow-wrap: anywhere; }
.kv dd > span + span::before { content: " · "; color: var(--color-text-tertiary); }
.card--flush { padding: 0; overflow: hidden; }
.tq > summary { grid-template-columns: var(--space-5) minmax(0, 1fr) var(--space-4); grid-template-areas: "n q chev" ". meta ."; padding: var(--space-3); }
.tq__n { grid-area: n; } .tq__q { grid-area: q; } .tq__meta { grid-area: meta; justify-content: flex-start; } .tq__chev { grid-area: chev; }
.tq__body { padding: 0 var(--space-3) var(--space-3) var(--space-10); }
.table-wrap { max-width: 100%; }
.mini-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.mini-table caption { text-align: left; }
.mini-table thead { display: none; }
.mini-table, .mini-table tbody, .mini-table tr, .mini-table td { display: block; }
.mini-table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
.mini-table td { padding: var(--space-half) 0; overflow-wrap: anywhere; }
.mini-table td[data-col]::before { content: attr(data-col) ": "; color: var(--color-text-tertiary); }
.mini-table tr:target { background: var(--color-accent-soft); }
.comp { list-style: none; margin: var(--space-1) 0; padding: 0; display: grid; gap: var(--space-half); }
.score { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.score__label h2 { font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; }
.score__label { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-text); display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; align-items: baseline; }
.score__num { display: flex; align-items: baseline; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.score__num b { font-size: var(--text-num-lg); line-height: var(--leading-num-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--color-text); }
.score__num span { font-size: var(--text-h3); color: var(--color-text-tertiary); }
.score.is-partial .score__num b { color: var(--color-text-secondary); } /* dashed box = not final (§7); text keeps 4.5:1 */
.score.is-partial .score__box { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.score__state { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-text-secondary); }
.score__disc { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-tertiary); }
.pl-list, .in-list, .mat-list, .hist-list, .saved-list, .ev-list, .dev-list, .inv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
.pl-row__g { display: inline-flex; align-items: center; gap: var(--space-2); }
.pl-row__name { display: grid; gap: var(--space-half); min-width: 0; }
.pl-row .pl-conf { grid-column: 1 / -1; }
.pl-conf > summary .grade__label { white-space: normal; }
.pl-key { margin-bottom: var(--space-2); }
.pl-key .scale { margin: var(--space-2) 0; grid-template-columns: repeat(auto-fit, minmax(var(--space-16), 1fr)); }
.in-group { border-bottom: 1px solid var(--color-border-subtle); padding: var(--space-1) 0; }
.in-list { padding: var(--space-2) 0 var(--space-3); }
.in-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: center; }
.legend5 { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.dev-list li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.dev__k { font-size: var(--text-body-sm); color: var(--color-text-tertiary); min-width: var(--space-16); }
.dev-own { margin: 0 0 var(--space-2); padding-left: var(--space-4); }
.inv-list ul, .inv-names { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.sigbox { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-1); }
/* SITE-FACTS-1: «Что пишет официальный сайт» — the 8 rows always stand (GOV.UK «Summary list»: a row without an answer
stays, with its reason); a shown passage is a quotation with its page link and read date (Wikipedia {{cite web}});
the money line stands apart from the rows (a claim beside the data, never merged). */
.sf-site { margin: 0 0 var(--space-3); }
.sf-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sf-row { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle); min-width: 0; }
.sf-row__label { margin: 0; font-weight: var(--weight-medium); color: var(--color-text); }
.sf-row__state { margin: 0; color: var(--color-text-secondary); }
.sf-row[data-state="not_found"] .sf-row__state, .sf-row[data-state="unclear"] .sf-row__state,
.sf-row[data-state="withheld"] .sf-row__state { color: var(--color-text-tertiary); }
.sf-quote { margin: 0; padding-left: var(--space-3); border-left: 1px solid var(--color-border-strong); color: var(--color-text); overflow-wrap: anywhere; }
.sf-quote q { quotes: "«" "»"; }
.sf-cite { margin: 0; color: var(--color-text-tertiary); }
.sf-money { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); }
.sf-money p { margin: 0; min-width: 0; flex: 1 1 auto; }
.flags__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.hist-row { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); }
.hist-row.is-current { border-left: var(--focus-width) solid var(--color-border-strong); padding-left: var(--space-3); }
.hist-row__chips { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.ev-list li { overflow-wrap: anywhere; }
.ev-fact { display: block; border-bottom: 1px solid var(--color-border-subtle); }
/* saved */
.saved-item { display: grid; gap: var(--space-1); }
.saved-item .actions { margin-top: var(--space-2); }
#saved-warn:empty { display: none; }
#saved-warn { margin-top: var(--space-3); }
@media (min-width: 600px) {
.topblock { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.topblock__item--lead { grid-column: 1 / -1; }
.actions .btn { flex: 0 1 auto; }
.route-nav a, .crumb, .disc > summary, .fchip { min-height: var(--control-h-sm); }
.fchip { height: var(--control-h-sm); }
.btn { min-height: var(--control-h-md); }
.kv { grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.kv dd { margin-bottom: 0; }
.in-row { grid-template-columns: minmax(0, 1fr) auto; }
.in-row__r { grid-column: 1 / -1; }
.tq > summary { grid-template-columns: var(--space-5) minmax(0, 1fr) auto var(--space-4); grid-template-areas: "n q meta chev"; padding: var(--space-3) var(--space-4); }
.tq__meta { justify-content: flex-end; }
.tq__body { padding: 0 var(--space-4) var(--space-3) var(--space-12); }
.qrow { padding: var(--card-padding); }
.page-head { padding-top: var(--space-10); }
}
@media (min-width: 1024px) {
.mini-table thead { display: table-header-group; }
.mini-table { display: table; }
.mini-table tbody { display: table-row-group; }
.mini-table tr { display: table-row; padding: 0; }
.mini-table th { text-align: left; font-weight: var(--weight-medium); font-size: var(--text-caption); color: var(--color-text-tertiary); padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.mini-table td { display: table-cell; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; }
.mini-table td[data-col]::before { content: none; }
.mini-table .num { text-align: right; }
.qlist2--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
.page-head { max-width: calc(var(--space-20) * 12); }
}
/* Barracudo reader site — the home coin table «Рейтинг монет» (SCREENER-1, owner 3152 / 3160 / 3161 / 3167).
Look of the design-branch mockup (design/screener, round 2, c64937a), built on main's components (.table, .th-sort,
.delta, .grade, .chip, .fchip, .select, .btn, .tip, .empty-state, .disc). Tokens only: no hex colour; px appear only in
1 px hairlines and the breakpoints 600 / 1200 / 1440 (AMEND §5), and 768 for the column widths (SCREENER-2). Mobile
first. */
/* ---- page: full width from 1200 px (AMEND §5), the token gutters kept ---------------------------------------- */
@media (min-width: 1200px) { body[data-page="screener"] main.container { max-width: none; } }
/* ---- X10-HEADER (owner 3373 / 3374): above the table one title with one muted meta line (TradingView screener title,
CoinGecko stats line), one stat card (CoinGecko / DeFiLlama: a small label over one big figure), one row of size
segments with «Фильтры» and «Колонки» at its right end (CMC network chips + Filters / Columns). The sentences moved
to the sheet, the tips and «О рейтинге» below the pager. Tokens only. ------------------------------------------- */
.sc-head { padding-bottom: 0; max-width: none; gap: var(--space-1); }
@media (min-width: 600px) { .sc-head { padding-top: var(--space-6); } }
.sc-meta { margin: 0; }
/* the ×10 stat card: label (caption) · big figure (h2 step, tabular figures) with its ⓘ · sub-line (caption) with
«Как считали»; as wide as its content, never wider than the page */
.sc-x10 { display: inline-grid; gap: 0; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); max-width: 100%;
border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.sc-x10__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); }
.sc-x10__l { margin: 0; font-size: var(--text-caption); line-height: var(--leading-caption);
font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.sc-x10__v { margin: 0; font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug); color: var(--color-text); white-space: nowrap; }
.sc-x10__i { margin-left: calc(var(--space-2) - var(--space-3)); }
.sc-x10__s { margin: 0; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-secondary); }
.sc-x10__how { margin-left: auto; font-size: var(--text-caption); line-height: var(--leading-caption);
font-weight: var(--weight-medium); color: var(--color-accent-text); white-space: nowrap; }
.sc-x10__how:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }
html[data-sc-error] .sc-x10__i { display: none; }
/* one segment row: the chips scroll sideways inside it (never wrap); «Фильтры» and «Колонки» stay at its right end */
.sc-bar { position: relative; display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.sc-segw { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.sc-seg { position: relative; display: flex; flex: 1 1 auto; min-width: 0; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
padding: var(--space-1); margin: calc(var(--space-1) * -1); } /* room for the focus ring inside the scroller */
.sc-seg::-webkit-scrollbar { display: none; }
/* X10-HEADER fix r1 item 8: where the row scrolls, the table frame's edge shades (X10-FIRST-1 A5, scrolling shadows)
on the side that has more chips; site.js sets `is-l` / `is-r` from the row's scroll position on scroll and resize */
.sc-segw::before, .sc-segw::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--space-4); z-index: 1;
pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.sc-segw::before { left: 0; background: linear-gradient(to right, color-mix(in srgb, var(--color-text) 14%, transparent), transparent); }
.sc-segw::after { right: 0; background: linear-gradient(to left, color-mix(in srgb, var(--color-text) 14%, transparent), transparent); }
.sc-segw.is-l::before, .sc-segw.is-r::after { opacity: 1; }
.sc-seg .fchip { flex: none; white-space: nowrap; }
.sc-tools { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.sc-open { position: relative; }
.sc-open[aria-expanded="true"], .sc-colbtn[aria-expanded="true"] { background: var(--color-surface-3); }
.sc-open__n:empty { display: none; }
.sc-open__n { display: inline-grid; place-items: center; min-width: var(--size-chip); min-height: var(--size-chip); padding: 0 var(--space-1);
border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-text-on-accent); font-size: var(--text-caption); }
.fchip__n { color: var(--color-text-tertiary); font-size: var(--text-caption); }
.fchip[aria-pressed="true"] .fchip__n { color: inherit; }
.fchip .ico { color: var(--color-warning); }
.fchip[aria-pressed="true"] .ico { color: inherit; }
/* «Фильтры»: the sheet's content (conditions, parameter, order with its help line, reset) and its two actions */
.sc-sheet { display: none; }
.sc-sheet__scrim { display: none; }
.sc-sheet__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-4);
border-bottom: 1px solid var(--color-border-subtle); }
.sc-sheet__head h2 { margin: 0; }
.sc-sheet__head h2:focus { outline: none; }
.sc-filters { display: grid; justify-items: start; gap: var(--space-4); overflow: auto; padding: var(--space-4); }
.sc-filters .fchips { gap: var(--space-2); }
.sc-sheet__foot { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.sc-sheet__foot .btn { flex: 1 1 auto; }
.sc-sheet__panel { background: var(--color-surface-1); }
/* from 600 px a non-modal dialog under the button (no scrim, the page stays usable) */
@media (min-width: 600px) {
.sc-sheet.is-open { display: block; position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: var(--z-dropdown); }
.sc-sheet__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: calc(var(--space-20) * 5);
max-width: calc(100vw - var(--page-gutter) * 2); max-height: var(--size-sheet-max); border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
}
.sc-param, .sc-sort, .sc-per { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sc-param .control, .sc-sort .control, .sc-per .control { position: relative; }
.sc-param .select, .sc-sort .select, .sc-per .select { min-height: var(--control-h-sm); height: var(--control-h-sm); font-size: var(--text-body-sm); width: auto; }
.sc-param .select[disabled] { color: var(--color-text-disabled); cursor: not-allowed; }
.sc-reset[disabled] { color: var(--color-text-disabled); cursor: not-allowed; }
.sc-sort__help { flex: 1 0 100%; margin: 0; max-width: var(--measure); }
/* ---- the table frame: sideways scroll only inside it (owner 3167, CMC phone); when the whole table fits, site.js
lets it flow in the page (`.is-flat`) and the header sticks under the top bar ---------------------------------- */
.sc-frame { position: relative; margin-top: var(--space-3); min-width: 0; overflow: auto; max-height: calc(var(--size-screen) - var(--size-topbar));
overscroll-behavior-x: contain; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.sc-frame:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
/* fixed layout (widths from the colgroup, tokens only): a page of rows re-lays out cheaply and the columns do not jump
between pages; the table is never narrower than the sum of its columns, so the frame scrolls sideways instead */
.sc { table-layout: fixed; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); border-collapse: separate; border-spacing: 0; }
.sc .k-rank { width: var(--space-10); }
.sc .k-coin { width: calc(var(--col-coin-min) - var(--space-12)); }
/* RULING r2 RS-6: each width is the smallest token sum that fits the column's longest published value or header word
on the real build (measured at 390 and 1440): «$0,0000000003870», «+717,2 %», «+2 596,0 %», «Капитализация», «Оценено,», «Модель», «Флаги» */
.sc .k-price { width: calc(var(--space-16) * 2 + var(--space-2)); }
.sc .k-ch24 { width: calc(var(--space-20) + var(--space-2)); }
.sc .k-ch7, .sc .k-ch30 { width: calc(var(--space-20) + var(--space-4)); }
.sc .k-sig { width: calc(var(--col-letter) * 3); }
.sc .k-score { width: calc(var(--space-20) + var(--space-10)); } /* A10: «предварительная» on one header line */
.sc .k-p { width: calc(var(--col-letter) + var(--space-2)); }
.sc .k-cap { width: calc(var(--space-20) + var(--space-6) + var(--space-1)); }
.sc .k-depth { width: calc(var(--col-letter) * 2); }
.sc .k-unlock { width: calc(var(--space-20) + var(--space-8)); } /* X10-FIRST-1: «разблокировка» */
.sc .k-flags { width: calc(var(--space-12) + var(--space-2)); }
/* SCREENER-2 (owner 3271): from 768 px the table is exactly as wide as its columns — the sum of the widths above, with
the seven letter columns (Notion database table view: the set widths kept, the spare frame width empty on the right
of the last column); after a resize site.js writes the sum of the current widths. Below 768 px: unchanged.
Fix r1 F1: from 768 px «Сигнал» opens at the smallest token sum ≥ 230 px, so a badge name takes at most two lines
(at its RS-6 width above, 138 px, up to five); 138 stays its minimum (the separator's aria-valuemin) and the phone's. */
@media (min-width: 768px) {
.sc .k-sig { width: calc(var(--col-letter) * 5); }
.sc { width: calc(var(--space-10) + var(--col-coin-min) - var(--space-12) + var(--space-16) * 2 + var(--space-2)
+ var(--space-20) + var(--space-2) + (var(--space-20) + var(--space-4)) * 2 + var(--col-letter) * 5 + var(--space-20)
+ var(--space-10) + (var(--col-letter) + var(--space-2)) * 7 + var(--space-20) + var(--space-6) + var(--space-1)
+ var(--col-letter) * 2 + var(--space-20) + var(--space-8) + var(--space-12) + var(--space-2)); }
}
.sc td { overflow: hidden; }
/* RULING r2 RS-7: while the head's `sc-js` class is on (scripts run here), the rows after the default page size (100),
marked `sc-rest` by the server, are never laid out — on screen and in print alike, so a print keeps the rows the
screen shows. site.js drops the mark from a row it shows; without the class (no JS, a failed init, the fail-safe
timer) every row is laid out. A class, not `:nth-child(n+101)`: a positional selector re-styles every later row
each time site.js moves one. */
@media screen, print { html.sc-js #sc-body > tr.sc-rest { display: none; } }
/* HOME-LITE item 3: the notice of a failed load of the other rows sits above the table frame (GOV.UK error message) */
.sc-alert { margin: 0 0 var(--space-3); }
/* HOME-LITE item 5: the link to the full list under the first page, without scripts and after a failed init alike */
.sc-all { margin: var(--space-3) 0 0; }
html.js[data-sc-error] .sc-all.nojs-only { display: block; }
/* fix r1 (seat note): site.js blocked or never run, the head's fail-safe took `sc-js` off without an init: every served
row is laid out as without scripts, so the link to the full list shows too (GOV.UK progressive enhancement) */
html.js:not(.sc-js):not([data-sc-init]) .sc-all.nojs-only { display: block; }
/* each body row paints as its own layer (a positioned box), so a page shown in steps (RULING r2 RS-3) repaints only the
rows a step adds: without it every frame re-recorded the whole table, ≈ 80 ms at CPU ×4, whatever the step size */
.sc tbody tr { position: relative; }
/* a published number is never cut (AMEND §1 «as published») and never broken (RULING r2 RS-6): a numeric cell is one
no-wrap run, its number joined to «%» / «млн» / «млрд» by a non-breaking space, and its column is as wide as the
longest published value; the depth cell wraps between its words only, the figure staying one run */
.sc td.num { text-overflow: clip; }
.sc-nw { white-space: nowrap; }
.sc th, .sc td { height: var(--row-h-compact); padding: var(--space-1); white-space: nowrap; text-align: right;
vertical-align: middle; background: var(--color-surface-1); border-bottom: 1px solid var(--color-border-subtle); }
.sc thead th { position: sticky; top: 0; z-index: 2; height: auto; padding: var(--space-2) var(--space-1) var(--space-1);
vertical-align: bottom; white-space: normal; border-bottom-color: var(--color-border); }
.sc .c-coin, .sc .c-rank { padding-left: var(--space-3); }
.sc td.num, .sc thead th { padding-left: var(--space-half); }
.sc tbody tr:last-child td, .sc tbody tr:last-child th { border-bottom: 0; }
.sc .c-coin, .sc .c-sig, .sc .c-flags { text-align: left; }
.sc .c-score { text-align: center; } /* A10: own decision, centred like the letter columns (.c-p) */
.sc .c-rank { color: var(--color-text-tertiary); }
.sc .c-p { padding-left: var(--space-half); padding-right: var(--space-half); text-align: center; }
.sc .c-flags { border-left: 1px solid var(--color-border-subtle); }
.sc .c-cap { border-left: 1px solid var(--color-border-subtle); }
.sc td.c-depth { white-space: normal; }
.sc .c-coin { position: sticky; left: 0; z-index: 1; }
/* SCREENER-2: a header cell under the pointer or the focus rises above its neighbours, and the one left of it above
that, so both resize edges of the hovered cell (each straddles its boundary) are hit and drawn on both sides; the
sticky coin header stays on top of all */
.sc thead th:is(:hover, :focus-within) { z-index: 3; }
.sc thead th:has(+ th:is(:hover, :focus-within)) { z-index: 4; }
.sc thead tr > th.c-coin { z-index: 5; }
.sc tbody tr:hover td, .sc tbody tr:hover th, .sc tbody tr:focus-within td, .sc tbody tr:focus-within th { background: var(--color-surface-2); }
html.js .sc tbody tr { cursor: pointer; }
/* a failed or unparsable init (data-sc-error) is the no-JS view: the enhanced controls are hidden (fix round r1 item 4) */
html[data-sc-error] .js-only { display: none; }
html[data-sc-error] .sc tbody tr { cursor: auto; }
.sc tbody tr.is-target td, .sc tbody tr.is-target th { background: var(--color-accent-soft); }
.sc tbody a, .sc tbody button { scroll-margin-top: calc(var(--size-topbar) + var(--space-20)); scroll-margin-left: var(--col-coin-min); }
/* header: the label is the sort button; under it one icon row — the sort arrow (part of the button) and the ⓘ (a
separate button); they never overlap, so the ⓘ never widens a column (mockup r2, CMC ⓘ, WAI sortable table) */
.sc .th-in { display: block; position: relative; padding-bottom: var(--size-chip); }
.sc .th-sort, .sc .th-lab { display: inline-block; height: auto; white-space: normal; text-align: inherit; color: inherit; font-weight: var(--weight-medium); }
.sc .th-sort .sc-ar { position: absolute; bottom: var(--space-1); right: calc(var(--size-chip) + var(--space-half) + var(--space-2)); color: var(--color-border-strong); }
.sc .th-in > .sc-i { position: absolute; bottom: 0; right: var(--space-2); } /* clear of the resize edge's half */
.sc .c-coin .sc-ar, .sc .c-sig .sc-ar, .sc .c-flags .sc-ar { right: auto; left: 0; }
.sc .c-coin .th-in > .sc-i, .sc .c-sig .th-in > .sc-i, .sc .c-flags .th-in > .sc-i { right: auto; left: var(--space-4); }
.sc .c-p .th-in > .sc-i { right: auto; left: calc(50% - var(--size-chip) / 2); }
.sc .c-score .sc-ar { right: calc(50% + var(--space-1)); }
.sc .c-score .th-in > .sc-i { right: auto; left: calc(50% + var(--space-half)); }
.sc th[aria-sort] { color: var(--color-text); }
.sc th[aria-sort] .sc-ar { color: var(--color-text); }
.sc th[aria-sort="ascending"] .sc-ar { transform: rotate(180deg); }
.sc-i { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: var(--size-chip); height: var(--size-chip); flex: none;
border-radius: var(--radius-xs); color: var(--color-text-tertiary); cursor: pointer; }
.sc-i:hover, .sc-i[aria-expanded="true"] { color: var(--color-text); background: var(--color-surface-3); }
.sc-i:focus-visible, .sc-sig:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--space-half); }
/* SCREENER-2: the resize edge (AG Grid column resize; WAI-ARIA APG «Window Splitter»): a 24 px hit area straddling the
cell's right edge (WCAG 2.5.8), outside the sort button; a 2 px line on hover, focus and drag. From 768 px only. */
.sc-sep { position: absolute; top: 0; bottom: 0; right: calc(var(--size-chip) / -2); width: var(--size-chip); z-index: 1;
cursor: col-resize; touch-action: none; }
/* fix r1: the last edge too — its line on the table's right border, its hit area across it (the frame scrolls 12 px past
the table for it, as AG Grid's last column edge) */
.sc-sep::after { content: ""; position: absolute; top: var(--space-2); bottom: var(--space-2); left: calc(50% - var(--focus-width) / 2);
width: var(--focus-width); border-radius: var(--radius-pill); background: transparent; }
.sc-sep:hover::after, .sc-sep.is-drag::after { background: var(--color-border-strong); }
.sc-sep:focus-visible { outline: none; }
.sc-sep:focus-visible::after { background: var(--color-focus); box-shadow: 0 0 0 var(--focus-width) var(--color-focus); }
/* during a drag the capturing edge keeps its cursor and pointerdown's default (text selection) is prevented; no class on
the root: an inherited property changed there (cursor) restyles all 975 rows (measured ≈ 200 ms at CPU ×2.8) */
/* «Колонки» (X10-HEADER item 5; WAI-ARIA APG Disclosure): «Ширина колонок» (WCAG 2.5.7, Excel «Format → Column
width») and «Сбросить ширину» in a panel under the button; from 768 px, scripts only */
.sc-cols { display: none; }
@media (min-width: 768px) { html.js .sc-cols { display: block; position: relative; } }
.sc-cols .btn { min-height: var(--control-h-sm); height: var(--control-h-sm); font-size: var(--text-body-sm); }
.sc-colpanel { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: var(--z-dropdown); width: max-content;
max-width: calc(100vw - var(--page-gutter) * 2); max-height: var(--size-sheet-max); overflow: auto; padding: var(--space-3);
border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-1); box-shadow: var(--shadow-2); }
.sc-colpanel:has(.sc-wpanel:not([hidden])) { width: calc(var(--space-20) * 10); }
.sc-colpanel__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sc-cols #sc-wbtn[aria-expanded="true"] { background: var(--color-surface-2); }
.sc-wpanel { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border-subtle); }
.sc-wpanel ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-20) * 3), 1fr)); gap: var(--space-1) var(--space-6); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.sc-wpanel li { display: grid; grid-template-columns: minmax(0, 1fr) var(--control-h-sm) var(--space-10) var(--control-h-sm); align-items: center; gap: var(--space-1); }
.sc-wpanel output { text-align: center; }
.sc-wstep { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm);
border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text); cursor: pointer; font-weight: var(--weight-semibold); }
.sc-wstep:hover { background: var(--color-surface-2); }
.sc-wstep:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.sc-wstep[disabled] { color: var(--color-text-disabled); cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--color-border-subtle); }
@media (max-width: 767px) { .sc-sep { display: none; } }
/* cells */
.sc-coin { display: grid; min-width: 0; color: var(--color-text); text-decoration: none; }
/* the name is never cut (AMEND §1, RS-6): it wraps, a long single word anywhere; the ticker and size line wraps too */
/* A10: «Оценка X10» — the number, its coverage by weight under it in caption style; no meter, no band colour */
.sc .c-score b, .sc .c-score small { display: block; }
.sc .c-score b { font-weight: var(--weight-semibold); }
.sc .c-score .sc-g { margin-left: var(--space-1); font-style: normal; }
.sc .c-score small, .sc-th-sub { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-tertiary); font-weight: var(--weight-regular); }
.sc td.c-score:not(.num) { color: var(--color-text-tertiary); }
.sc-th-sub { display: block; }
.sc-coin__n { font-weight: var(--weight-semibold); white-space: normal; overflow-wrap: anywhere; }
a.sc-coin:hover .sc-coin__n { text-decoration: underline; }
.sc-coin__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-tertiary); }
.sc-coin__lv { display: inline-flex; align-items: center; gap: var(--space-half); }
.sc td.c-flags { color: var(--color-text-tertiary); }
/* price change: the published signed text; ▲ / ▼ from the class (CMC green ▲ / red ▼, never colour alone; zero neutral) */
.sc td.up { color: var(--color-positive-text); }
.sc td.down { color: var(--color-negative-text); }
.sc td.flat { color: var(--color-text-tertiary); }
.sc td.up::before, .sc td.down::before { font-size: var(--text-caption); margin-right: var(--space-1); }
.sc td.up::before { content: "▲"; }
.sc td.down::before { content: "▼"; }
/* the letter tile = main's .grade--soft tile (§9.1), one element */
.sc-g { display: inline-grid; place-items: center; width: var(--tile-sm); height: var(--tile-sm); border-radius: var(--radius-xs);
font-size: var(--grade-size-sm); font-weight: var(--weight-bold); line-height: 1; background: var(--g-soft); color: var(--g-text);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 45%, transparent); }
/* a cell reason is a button (fix round r1 item 5, WCAG 2.1.1): no UA chrome. Zero specificity (:where), so .chip,
.sc-q and .sc-st keep their own look; the «—» of a missing value is tertiary text, as the cell was */
:where(button.sc-rz) { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
line-height: inherit; text-align: inherit; letter-spacing: inherit; }
:where(.sc td > .sc-rz) { color: var(--color-text-tertiary); }
[data-rz] { cursor: help; }
/* X10-FIRST-1 A7 (owner 3335): a missing value is a blank cell; its reason button fills the cell so the reason still
opens by a tap or a click anywhere in it (the accessible name and description carry the meaning) */
.sc td > .sc-rz:empty { display: block; width: 100%; min-height: var(--leading-body-sm); }
.sc-na--tile { display: inline-block; width: var(--tile-sm); height: var(--tile-sm); vertical-align: middle;
outline: 1px dashed var(--color-border-strong); outline-offset: calc(var(--space-half) * -1); }
.sc td.c-p.rz { outline: 1px dashed var(--color-border-strong); outline-offset: calc(var(--space-2) * -1); } /* no letter: dashed, «не считается» */
.sc .sc-rz:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--space-half); }
.sc-coin__lv.is-risk::after { content: "⚠"; margin-left: var(--space-1); color: var(--color-warning); }
.sc-q { margin-left: var(--space-half); vertical-align: super; font-size: smaller; font-weight: var(--weight-bold); color: var(--color-text); }
.sc-st { margin-left: var(--space-1); color: var(--color-warning); }
.sc-na { color: var(--color-text-tertiary); }
.sc-fl { cursor: help; }
.sc-sig { all: unset; box-sizing: border-box; display: grid; max-width: 100%; padding: var(--space-half) var(--space-1);
margin-left: calc(var(--space-1) * -1); border-radius: var(--radius-xs); cursor: pointer; text-align: left; }
.sc-sig:hover { background: var(--color-surface-3); }
.sc-sig__d { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-semibold); }
.sc-sig__more { color: var(--color-text-secondary); font-weight: var(--weight-medium); }
/* owner 3313: a signal's name takes at most two lines, its end an ellipsis; the cell's button opens the tip with every signal
in full (IBM Carbon data table: overflowing cell text truncates and is shown in full on demand), so a signal row stays
near the others' height instead of 85–117 px at the phone's 138 px column */
.sc-sig__n { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-secondary); white-space: normal;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* the shared tip (hover / focus / tap; WCAG 1.4.13) */
.sc-tip { position: fixed; z-index: var(--z-dropdown); max-width: var(--tooltip-max); white-space: normal; text-align: left; }
.sc-tip ul { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.sc-tip p { margin: var(--space-1) 0 0; }
.sc-sigs .sc-sig__ev, .sc-tip .sc-sig__ev { color: var(--color-text-secondary); }
/* X10-FIRST-1 A5: the scroll affordance — the scrolling-shadows cue (Lea Verou) on the edge that has more columns. The
table's cells and its sticky coin column are opaque, so the CSS-only `background-attachment: local` variant would be
painted under them; the two shades are overlays of the frame's wrapper, shown by site.js from the frame's scroll
position (`is-l` after a scroll to the right, `is-r` while more columns are to the right). */
.sc-shade { position: relative; margin-top: var(--space-3); min-width: 0; }
.sc-shade > .sc-frame { margin-top: 0; }
.sc-shade::before, .sc-shade::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: var(--space-4);
pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); z-index: var(--z-sticky); }
.sc-shade::before { left: calc(var(--col-coin-phone) - var(--space-8) + 1px); background: linear-gradient(to right, color-mix(in srgb, var(--color-text) 14%, transparent), transparent); }
.sc-shade::after { right: 1px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
background: linear-gradient(to left, color-mix(in srgb, var(--color-text) 14%, transparent), transparent); }
.sc-shade.is-l::before, .sc-shade.is-r::after { opacity: 1; }
@media (min-width: 600px) { .sc-shade::before { left: calc(var(--space-10) + var(--col-coin-min) - var(--space-12) + 1px); } }
/* empty state, pager, notes */
.sc-empty { margin: var(--space-4); }
.sc-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.sc-pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.sc-pg { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; min-width: var(--control-h-sm); height: var(--control-h-sm);
padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-body-sm); color: var(--color-text-secondary); cursor: pointer;
font-variant-numeric: tabular-nums; }
.sc-pg:hover { background: var(--color-surface-2); color: var(--color-text); }
.sc-pg[aria-current="page"] { background: var(--color-accent); color: var(--color-text-on-accent); font-weight: var(--weight-semibold); }
.sc-pg[disabled] { color: var(--color-text-disabled); background: transparent; cursor: not-allowed; }
.sc-pg:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--space-half); }
.sc-gap { color: var(--color-text-tertiary); padding: 0 var(--space-1); }
.sc-notes { margin-top: var(--space-4); }
.sc-notes .kv, .sc-sigs { max-width: var(--measure); }
.sc-sigs { display: grid; gap: var(--space-2); }
.sc-sigs ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.sc-sigs p { margin: var(--space-1) 0 0; }
.sc-frame.is-flat { overflow: visible; max-height: none; }
.sc-frame.is-flat .sc thead th { top: var(--size-topbar); }
.sc thead th:first-child { border-top-left-radius: var(--radius-lg); }
.sc thead th:last-child { border-top-right-radius: var(--radius-lg); }
/* «О рейтинге» after the pager (X10-HEADER item 7; CMC `homepage-summary`): the value sentence and one disclosure */
.sc-about { margin-top: var(--space-8); max-width: var(--measure); }
.sc-about h2 { margin: 0; }
.sc-value { margin: var(--space-2) 0 0; color: var(--color-text-secondary); }
.sc-about__x10 { margin-top: var(--space-1); scroll-margin-top: calc(var(--size-topbar) + var(--space-4)); }
.sc-about__x10 .disc__body p, .sc-about__x10 .disc__body ul { margin: var(--space-1) 0 0; }
.sc-about__x10 .disc__body ul { padding-left: var(--space-4); }
/* ---- phone ---------------------------------------------------------------------------------------------------- */
@media (max-width: 599px) {
.brand__name { display: none; }
.sc-head { padding-top: var(--space-4); }
/* «Фильтры» keeps its width when a filter is applied: the count badge sits on its corner (CLS 0) */
.sc-open__n { position: absolute; top: calc(var(--space-2) * -1); right: calc(var(--space-2) * -1); }
.sc-bar { margin-top: var(--space-2); }
.sc-x10 { display: grid; margin-top: var(--space-2); }
.sc-x10__i { margin-top: calc((var(--leading-h2) - var(--touch-min)) / 2); margin-bottom: calc((var(--leading-h2) - var(--touch-min)) / 2); }
.sc-shade { margin-top: var(--space-2); }
/* below 600 px the modal bottom sheet (focus kept inside, the background inert) */
.sc-sheet.is-open { display: block; position: fixed; inset: 0; z-index: var(--z-modal); }
.sc-sheet__scrim { display: block; position: absolute; inset: 0; background: var(--color-overlay); }
.sc-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: var(--size-sheet-max); display: grid;
grid-template-rows: auto minmax(0, 1fr) auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-3); }
.sc .c-rank { padding: 0; font-size: 0; border-bottom-width: 0; } /* the column stays (fixed layout), 0 wide */
.sc tbody .c-rank *, .sc thead .c-rank .sc-i { display: none; }
/* the header keeps its name for assistive tech (axe empty-table-header), drawn nowhere — components .sr-only */
.sc thead .c-rank .th-lab { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.sc .k-rank { width: 0; }
/* A10: the phone coin column gives 32 px to «Оценка X10», so Монета · Оценка X10 · Сигнал fit the 356 px frame */
.sc .k-coin { width: calc(var(--col-coin-phone) - var(--space-8)); }
.sc-coin__sub .ticker { white-space: normal; overflow-wrap: anywhere; } /* a ticker longer than the column wraps, as the name does (RS-6) */
.sc td, .sc tbody th { height: var(--control-h-lg); }
.sc .th-sort { min-height: var(--touch-min); }
.sc-i { width: var(--touch-min); height: var(--touch-min); }
.sc-pg { min-width: var(--touch-min); height: var(--touch-min); }
.sc-param .select, .sc-sort .select, .sc-per .select { min-height: var(--touch-min); height: var(--touch-min); }
}