/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Yrsa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/yrsa-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Yrsa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/yrsa-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Yrsa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/yrsa-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Yrsa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/yrsa-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Yrsa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/yrsa-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Yrsa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/yrsa-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* An accounting ledger: ledger paper, green column rules, a green double margin rule, red ink only for losses
   and warnings, a double underline under totals. Index = search and quick screens above one register; entry =
   a summary first, details behind six ledger tabs. */
:root {
  --bg: #f5f1e8;            /* atlas paper */
  --surface: #fbf8f1;       /* sheet */
  --ink: #1c2027;
  --ink-2: #3d434d;
  --muted: #666b75;
  --line: #ddd5c5;          /* rule */
  --line-strong: #b8ab93;
  --grid: #ece6d9;
  --accent: #1d4275;        /* ink blue: links, marks of the main series */
  --accent-2: #7697c2;      /* the lighter step of the same blue: second series */
  --accent-3: #a4481f;      /* terracotta, sparingly: the logo's hinge, numerals of the contents, hover of the map */
  --accent-soft: #e3e9f2;
  --gain: #1d6b57;
  --loss: #b3271c;          /* red ink */
  --hatch: #b3271c;
  --under-soft: #dcebe4;
  --over-soft: #f6e1dd;
  --fair-soft: #ece8de;
  --logo-tile: #ffffff;     /* logos are drawn for light backgrounds, so the tile stays white in dark mode too */
  --font-display: "Yrsa", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11151b; --surface: #171c24; --ink: #e7e9ee; --ink-2: #c3c8d1; --muted: #8e95a1;
    --line: #29303b; --line-strong: #414b5a; --grid: #1c222b; --accent: #93b8e8; --accent-2: #5278a8; --accent-3: #e08a5c;
    --accent-soft: #1b2533; --gain: #6fd09c; --loss: #f08a7e; --hatch: #f08a7e;
    --under-soft: #173326; --over-soft: #3a1d1a; --fair-soft: #1f242c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11151b; --surface: #171c24; --ink: #e7e9ee; --ink-2: #c3c8d1; --muted: #8e95a1;
  --line: #29303b; --line-strong: #414b5a; --grid: #1c222b; --accent: #93b8e8; --accent-2: #5278a8; --accent-3: #e08a5c;
  --accent-soft: #1b2533; --gain: #6fd09c; --loss: #f08a7e; --hatch: #f08a7e;
  --under-soft: #173326; --over-soft: #3a1d1a; --fair-soft: #1f242c;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15.5px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 520px) { .wrap { padding-inline: 16px; } }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kontakt-email { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.neg { color: var(--loss); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; }
.linkish { all: unset; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.linkish:hover { text-decoration-thickness: 2px; }
.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.linkish:disabled { color: var(--muted); text-decoration: none; cursor: default; }

/* Header */
.site { border-bottom: 3px double var(--line-strong); }
.site .wrap { display: flex; align-items: center; gap: 10px 18px; padding-block: 16px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 700 23px/1.1 var(--font-display); color: var(--ink); text-decoration: none; letter-spacing: -0.005em; }
.brand-mark { width: 32px; height: 32px; flex: none; }
.lg-a { stroke: var(--accent); } .lg-s { stroke: var(--accent-2); } .lg-h { fill: var(--accent-3); }
.stamp-mark { display: inline-block; transform: rotate(-4deg); color: var(--loss); border: 2px solid currentColor; border-radius: 4px; font: 700 13px/1 var(--font-body); font-stretch: 85%; padding: 4px 8px 3px; opacity: .9; }
.site-nav { margin-left: auto; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-nav a { text-decoration: none; color: var(--ink-2); }
.site-nav a:hover { color: var(--accent); text-decoration: underline; }
.site-nav a[aria-current] { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; }
/* Live site: the first row lists the kinds of investments, the second the sections of the current kind. On a phone the
   second row stays on one line and scrolls sideways instead of wrapping. */
.sub-nav { border-top: 1px solid var(--line); background: var(--surface); }
.sub-nav .wrap { display: flex; flex-wrap: nowrap; gap: 22px; padding-block: 9px; font-size: 14.5px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.sub-nav .wrap::-webkit-scrollbar { display: none; }
.sub-nav a { text-decoration: none; color: var(--ink-2); }
.sub-nav a:hover { color: var(--accent); text-decoration: underline; }
.sub-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; }
/* Signpost (home page of the live site), set like a printed atlas: a dateline above the headline, a map of the
   stocks as the picture, a table of contents instead of cards, columns divided by rules instead of boxes */
.hub-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; gap: 28px 60px; padding-block: 30px 34px; }
.hub-kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-3); margin: 6px 0 14px; }
.hub-hero h1 { font: 700 clamp(36px, 4.7vw, 60px)/1 var(--font-display); letter-spacing: -0.02em; margin: 0 0 18px; }
.hub-hero .entry-lead { margin-top: 0; max-width: 52ch; }
.hub-hero .searchbar { margin-top: 24px; max-width: 520px; }
.hub-art { width: 100%; max-width: 400px; height: auto; justify-self: end; }
.hub-art .tick { stroke: var(--line-strong); stroke-width: 1.2; }
.hub-art .grat { stroke: var(--accent-2); stroke-width: 1.15; }
.hub-art .axis { stroke: var(--accent); stroke-width: 1.4; }
.hub-art .dot { fill: var(--bg); stroke: var(--accent); stroke-width: 3; }
.hub-art text { font: 600 13px var(--font-body); fill: var(--muted); letter-spacing: .08em; text-anchor: middle; }
.hub-toc { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: toc; }
.hub-toc > li { display: grid; grid-template-columns: 46px minmax(0, 1fr); padding: 18px 0; border-bottom: 1px solid var(--line); counter-increment: toc; }
.hub-toc > li::before { content: counter(toc); font: 700 32px/1 var(--font-display); color: var(--accent-3); }
.hub-toc > li.soon::before { color: var(--line-strong); }
.hub-toc-head { display: flex; align-items: baseline; gap: 12px; }
.hub-toc-head h3 { font: 700 27px/1.1 var(--font-display); margin: 0; }
.hub-toc-head h3 a { color: var(--ink); text-decoration: none; }
.hub-toc-head h3 a:hover { color: var(--accent); text-decoration: underline; }
.hub-toc > li.soon h3 { color: var(--ink-2); font-size: 23px; }
.hub-toc-head .dots { flex: 1; min-width: 20px; border-bottom: 2px dotted var(--line-strong); transform: translateY(-5px); }
.hub-toc-head .n { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.hub-toc p { margin: 7px 0 0; color: var(--ink-2); max-width: 74ch; }
.hub-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; padding: 0; font-size: 15.5px; }
.hub-links li:first-child a { font-weight: 600; }
.hub-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.hub-panel { padding: 0 30px; border-left: 1px solid var(--line-strong); min-width: 0; display: flex; flex-direction: column; }
.hub-panel:first-child { padding-left: 0; border-left: 0; }
.hub-panel:last-child { padding-right: 0; }
.hub-panel h3 { font: 700 21px/1.2 var(--font-display); margin: 0 0 2px; }
.hub-panel .what { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }
.hub-list { list-style: none; margin: 0; padding: 0; }
.hub-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); min-width: 0; }
.hub-list li > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-decoration: none; }
.hub-list li > a:hover { text-decoration: underline; }
.hub-list .co-mark { width: 26px; height: 26px; border-radius: 6px; font-size: 13px; }
.hub-r { margin-left: auto; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font-size: 14px; font-variant-numeric: tabular-nums; }
.hub-r .score-cell { align-items: center; }
.hub-when { color: var(--muted); min-width: 52px; text-align: right; }
.hub-list.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.hub-more { margin: auto 0 0; padding-top: 10px; font-size: 14.5px; }
@media (max-width: 900px) {
  .hub-hero { grid-template-columns: minmax(0, 1fr); padding-block: 22px 26px; }
  .hub-art { display: none; }
  .hub-toc > li { grid-template-columns: 34px minmax(0, 1fr); }
  .hub-toc > li::before { font-size: 26px; }
  .hub-toc-head h3 { font-size: 24px; }
  .hub-cols { grid-template-columns: minmax(0, 1fr); }
  .hub-panel { padding: 18px 0 0; margin-top: 18px; border-left: 0; border-top: 1px solid var(--line-strong); }
  .hub-panel:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
}

/* Index: search and quick screens */
.hero { padding-block: 30px 6px; }
.hero h1 { font: 700 clamp(30px, 3.6vw, 44px)/1.06 var(--font-display); letter-spacing: -0.015em; margin: 0 0 10px; max-width: 30ch; }
.lead { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 64ch; }
.searchbar { position: relative; max-width: 660px; margin-top: 20px; }
.searchbar svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.searchbar input { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; padding: 13px 14px 13px 44px; }
.searchbar input::placeholder { color: var(--muted); }
.q-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: 0 10px 24px rgba(20, 40, 30, .14); max-height: 420px; overflow-y: auto; }
.q-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 3px; cursor: pointer; }
.q-list li[aria-selected="true"], .q-list li:hover { background: var(--accent-soft); }
.q-list .q-main { display: grid; min-width: 0; }
.q-list .q-main b { font-weight: 700; }
.q-list .q-main .tk { color: var(--accent); font-weight: 700; margin-right: 6px; font-size: 14px; }
.q-list small { color: var(--muted); font-size: 13px; }
.q-list .q-facet .q-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; border: 1px dashed var(--line-strong); color: var(--muted); flex: none; font-size: 15px; }
.q-list .q-sep { padding: 6px 10px 2px; font-size: 12.5px; color: var(--muted); cursor: default; background: none !important; }
.finder { margin-top: 18px; }
.screens { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { cursor: pointer; font-size: 14.5px; font-weight: 600; font-stretch: 92%; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 3px; padding: 8px 12px; line-height: 1.2; display: inline-flex; align-items: baseline; gap: 7px; }
.chip .n { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.chip[aria-pressed="true"] .n { color: var(--surface); opacity: .8; }
.chip:disabled { opacity: .5; cursor: default; }
/* domestic stocks: a toggle that combines with the screens, so it looks a little different */
.local-chip { border: 3px double var(--accent); color: var(--accent); padding: 6px 12px; }
.local-chip[aria-pressed="true"] { border-color: var(--accent); }
.screen-desc { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; }
.screen-desc:empty { display: none; }
.facet-toggle { display: none !important; }
.facet-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.facet { position: relative; }
.facet-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 3px; padding: 7px 10px 7px 12px; }
.facet-btn svg { color: var(--muted); transition: transform .12s; }
.facet-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.facet-btn:hover { border-color: var(--accent); }
.facet-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.facet-btn .badge { display: inline-block; min-width: 19px; padding: 1px 6px; border-radius: 10px; background: var(--accent); color: var(--surface); font-size: 12px; font-weight: 700; text-align: center; line-height: 1.45; }
.facet-pop { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; min-width: 270px; max-width: min(560px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: 0 12px 28px rgba(20, 40, 30, .16); padding: 10px; }
.facet-pop.wide { width: 560px; }
.facet-pop .opt-search { width: 100%; font: inherit; font-size: 14.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 3px; padding: 7px 9px; margin-bottom: 6px; }
.facet-pop .opts { display: grid; gap: 1px; }
.facet-pop .opts.scroll { max-height: 290px; overflow-y: auto; }
.facet-pop .groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.facet-pop fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.facet-pop legend { font-weight: 700; font-size: 14px; padding: 4px 8px 2px; }
.opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 3px; cursor: pointer; font-size: 14.5px; }
.opt:hover { background: var(--accent-soft); }
.opt input { margin: 0; accent-color: var(--accent); width: 16px; height: 16px; }
.opt .ol { min-width: 0; }
.opt .ol small { display: block; color: var(--muted); font-size: 12.5px; }
.opt .n { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.opt.zero { color: var(--muted); cursor: default; }
.opt.zero:hover { background: none; }
.opt[hidden] { display: none; }
.pop-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 4px 0; border-top: 1px solid var(--line); }
.pop-done { cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--surface); background: var(--accent); border: 0; border-radius: 3px; padding: 6px 14px; }
.range-btn svg { color: inherit !important; }
.range-panel { margin-top: 12px; padding: 14px 16px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; --th: 18px; --sh: 26px; }
.range-panel[hidden] { display: none; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px 30px; }
.rcard { min-width: 0; }
.rhead { display: flex; align-items: baseline; gap: 8px; min-height: 22px; }
.rlabel { font-weight: 700; font-size: 14.5px; }
.rval { margin-left: auto; font-size: 13.5px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.rcard.on .rval { color: var(--accent); font-weight: 600; }
.rreset { cursor: pointer; font: inherit; font-size: 17px; line-height: 1; color: var(--muted); background: none; border: 0; padding: 0 2px; }
.rreset:hover { color: var(--accent); }
.rhint { font-size: 12.5px; color: var(--muted); margin: 1px 0 6px; }
.rhist { display: flex; align-items: flex-end; gap: 1px; height: 36px; padding: 0 calc(var(--th) / 2); border-bottom: 1px solid var(--line); }
.rhist span { flex: 1 1 0; min-width: 0; background: var(--line); border-radius: 1px 1px 0 0; }
.rhist span.in { background: var(--accent-2); }
.rcard.on .rhist span.in { background: var(--accent); }
.rslider { position: relative; height: var(--sh); }
.rtrack { position: absolute; left: calc(var(--th) / 2); right: calc(var(--th) / 2); top: calc(var(--sh) / 2 - 2px); height: 4px; background: var(--line); border-radius: 2px; }
.rfill { position: absolute; top: 0; bottom: 0; background: var(--accent-2); border-radius: 2px; }
.rcard.on .rfill { background: var(--accent); }
.rslider input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: var(--sh); margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.rslider input[type=range]::-webkit-slider-runnable-track { height: var(--sh); background: none; border: 0; }
.rslider input[type=range]::-moz-range-track { height: var(--sh); background: none; border: 0; }
.rslider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; box-sizing: border-box; width: var(--th); height: var(--th); margin-top: calc((var(--sh) - var(--th)) / 2); border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); cursor: grab; }
.rslider input[type=range]::-moz-range-thumb { pointer-events: auto; box-sizing: border-box; width: var(--th); height: var(--th); border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); cursor: grab; }
.rslider input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; background: var(--accent-soft); }
.rslider input[type=range]:focus { outline: none; }
.rslider input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.rslider input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.rends { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rends span:first-child, .rends span:last-child { white-space: nowrap; }
.rcount { color: var(--accent); font-weight: 600; text-align: center; }
.rnote { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.sort-by { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.sort-by select { font: inherit; font-size: 14.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 3px; padding: 7px 9px; }
.result-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 10px; font-size: 14.5px; color: var(--ink-2); min-height: 32px; }
.result-bar strong { color: var(--ink); }
.active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.achip { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13.5px; color: var(--accent); background: var(--accent-soft); border: 1px solid transparent; border-radius: 3px; padding: 4px 8px 4px 10px; }
.achip span { font-size: 16px; line-height: 1; }
.achip:hover { border-color: var(--accent); }
.more-rows { text-align: center; margin: 12px 0 0; }
.more-rows button { cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); background: var(--surface); border: 1px solid var(--accent); border-radius: 3px; padding: 9px 18px; }
.more-rows button:hover { background: var(--accent-soft); }
@media (max-width: 640px) {
  .facet { position: static; }
  .facet-pop, .facet-pop.wide { left: 0 !important; right: 0 !important; width: auto; max-width: none; min-width: 0; }
  .facet-pop .groups { grid-template-columns: minmax(0, 1fr); max-height: 60vh; overflow-y: auto; }
  .facet-toggle { display: inline-flex !important; }
  .range-panel { --th: 24px; --sh: 32px; padding: 12px 12px 10px; }
  .rgrid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .facet-bar:not(.open) .facet { display: none; }
  .sort-by { font-size: 13.5px; gap: 6px; }
  .sort-by select { max-width: 170px; }
  .screens { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: thin; }
  .screens li { flex: none; }
}

/* Register */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
.register { min-width: 900px; }
.register th, .register td { padding: 11px 12px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--grid); white-space: nowrap; text-align: left; vertical-align: middle; }
.register th:first-child, .register td:first-child { border-left: 0; }
.register thead th { font-size: 13px; font-stretch: 85%; font-weight: 600; color: var(--ink-2); vertical-align: bottom; white-space: normal; line-height: 1.2; border-bottom: 3px double var(--line-strong); }
.register th.num, .register td.num { text-align: right; }
.register tbody tr:last-child td { border-bottom: 0; }
.register tbody tr { cursor: pointer; }
.register tbody tr:hover td { background: var(--accent-soft); }
.register .co-col { border-right: 3px double var(--line-strong); min-width: 220px; }
.sticky-col { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.sort { all: unset; cursor: pointer; display: inline; text-align: inherit; }
.sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sort .arrow { font-size: 11px; opacity: 0; margin-left: 2px; }
th[aria-sort] .sort { color: var(--ink); }
th[aria-sort] .sort .arrow { opacity: 1; }
.co { color: inherit; text-decoration: none; display: grid; gap: 1px; }
.co:hover .co-name { text-decoration: underline; text-underline-offset: 3px; }
.co-line { display: flex; align-items: baseline; gap: 8px; }
.tk { font-weight: 700; font-stretch: 78%; color: var(--accent); letter-spacing: .02em; font-size: 14px; }
.co-name { font-weight: 600; color: var(--ink); }
.co-sub { font-size: 13px; color: var(--muted); }
.cur { color: var(--muted); font-size: 12.5px; }
.empty td { text-align: center; color: var(--muted); padding: 28px 14px; cursor: default; white-space: normal; }
.empty:hover td { background: transparent !important; }
.table-note { font-size: 13px; color: var(--muted); margin-top: 10px; max-width: 100ch; }
.table-note .note { margin-top: 0; font-size: 13px; }
.score-cell { display: inline-flex; align-items: center; gap: 8px; }
.score-bar { width: 46px; height: 6px; background: var(--grid); position: relative; overflow: hidden; border-radius: 1px; }
.score-bar span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.score-cell.part { color: var(--muted); }
.score-cell.part .score-bar span { background: var(--accent-2); }
.fvpill { display: inline-block; padding: 3px 8px; border-radius: 3px; font-size: 13.5px; font-weight: 600; white-space: nowrap; line-height: 1.35; }
.fvpill.under { background: var(--under-soft); color: var(--gain); }
.fvpill.over { background: var(--over-soft); color: var(--loss); }
.fvpill.fair { background: var(--fair-soft); color: var(--ink-2); }
.fvpill.none { background: transparent; color: var(--muted); font-weight: 400; padding-inline: 0; }

/* Home sections */
.home-sec { margin-top: 48px; }
.home-sec > h2 { font: 700 28px/1.15 var(--font-display); margin: 0 0 6px; padding-bottom: 6px; border-bottom: 3px double var(--line-strong); }
.home-sec > .what { font-size: 15px; color: var(--ink-2); margin-bottom: 14px; max-width: 75ch; }
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
.ov-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px 12px; min-width: 0; }
.ov-panel h3 { font: 700 21px/1.2 var(--font-display); margin: 0 0 2px; }
.ov-panel .what { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; max-width: 60ch; }
.ov-empty { font-size: 14px; color: var(--muted); padding: 24px 0; }
.ov-more { margin-top: 6px; }
.feed { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; }
.feed li { display: grid; grid-template-columns: 92px minmax(0, 150px) minmax(0, 1fr); gap: 4px 14px; padding: 9px 14px; border-top: 1px solid var(--grid); font-size: 14.5px; align-items: baseline; }
.feed li:first-child { border-top: 0; }
.feed .d { color: var(--muted); font-variant-numeric: tabular-nums; border-right: 3px double var(--line-strong); padding-right: 10px; }
.feed .co-link { font-weight: 600; color: var(--ink); text-decoration: none; }
.feed .co-link:hover { color: var(--accent); text-decoration: underline; }
.feed .form { color: var(--muted); font-size: 13px; }
.feed.compact li { grid-template-columns: 92px minmax(0, 1fr); }
@media (max-width: 640px) { .feed li, .feed.compact li { grid-template-columns: 84px minmax(0, 1fr); } .feed li .co-link, .feed li .what-l { grid-column: 2; } }
.feed-more { margin-top: 10px; }
.feed.news li { align-items: start; }
.feed.news .sum { display: block; color: var(--ink-2); margin-top: 2px; }
.ai-block h3 { font-size: 15.5px; margin: 14px 0 4px; }
.ai-block p { max-width: 80ch; }
.ai-list { margin: 6px 0 0; padding-left: 20px; max-width: 80ch; }
.ai-list li { margin: 3px 0; }
.foot-links { margin-top: 8px; }
.az { columns: 4 200px; column-gap: 28px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 14.5px; }
.az li { break-inside: avoid; padding: 2px 0; }
@media (max-width: 640px) { .az { columns: 2; column-gap: 16px; font-size: 13.5px; } }
.az .tk { color: var(--muted); font-size: 12.5px; }
.about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; margin-top: 52px; padding-top: 20px; border-top: 3px double var(--line-strong); }
.about h2 { font: 700 19px/1.25 var(--font-display); margin: 0 0 6px; }
.about p { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 760px) { .about { grid-template-columns: minmax(0, 1fr); } }

/* Charts */
.chart { min-height: 100px; }
.chart.fit { min-height: 0; }
.chart svg { display: block; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .grid.zero { stroke: var(--ink-2); }
.chart .ylab, .chart .xlab, .chart .rlab { fill: var(--muted); font: 12px var(--font-body); font-variant-numeric: tabular-nums; }
.chart .rlab { fill: var(--ink-2); }
.chart a:hover .rlab, .chart a:focus .rlab { fill: var(--accent); text-decoration: underline; }
.chart .vlab { fill: var(--ink); font: 600 12px var(--font-body); font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--accent-2); }
.chart .bar.main, .chart .bar.last, .chart .bar.good { fill: var(--accent); }
.chart .bar.neg, .chart .bar.debt, .chart .bar.over { fill: var(--loss); }
.chart .bar.plus { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 2; }
.chart .bar:hover { opacity: .8; }
.chart .hatch-line { stroke: var(--hatch); stroke-width: 1.4; }
.chart .hatch-bg { fill: var(--surface); }
.chart .limit { stroke: var(--loss); stroke-width: 1; }
.chart .limit-lab { fill: var(--loss); font: 600 11.5px var(--font-body); }
.chart .zone-under { fill: var(--under-soft); }
.chart .zone-fair { fill: var(--fair-soft); }
.chart .zone-over { fill: var(--over-soft); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sw { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; background: var(--accent); border-radius: 1px; }
.sw.s2 { background: var(--accent-2); }
.sw.loss { background: var(--loss); }
.sw.est { background: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, transparent 1.5px 4px); outline: 1px solid var(--hatch); outline-offset: -1px; }
.figcap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }

/* Entry: head and verdicts */
.crumbs { font-size: 14px; color: var(--muted); padding-block: 22px 8px; }
.entry-top { display: grid; gap: 0; }
.entry-top h1 { font: 700 clamp(36px, 5vw, 58px)/1 var(--font-display); letter-spacing: -0.02em; margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 340px) { .entry-top h1 { font-size: 30px; } }
.entry-sub { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.entry-sub b { color: var(--accent); font-stretch: 80%; letter-spacing: .02em; }
.entry-lead { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 70ch; margin-top: 14px; }
/* Phones: the description is cut to three lines until the reader opens it */
.lead-more { display: none !important; }
@media (max-width: 640px) {
  #entry-lead:not(.open) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .lead-more:not([hidden]) { display: inline-block !important; margin-top: 4px; }
}
/* The visitor's price: one field for the whole page, right above the tabs */
/* Price, right under the head of the stock: TradingView's strip with the market price, then the one field the page
   asks the visitor to fill in – set large, because the verdict below depends on it. */
.price-block { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--accent); border-radius: 3px; }
.tv-box { padding: 12px 18px 10px; border-bottom: 1px solid var(--line); }
.tv-label, .price-label { display: block; margin: 0 0 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* The widget is given the width of its one-row layout (from 820 px, measured 11. 11. 2026) and its head (the company's
   logo and name, which the page shows itself) is cut away: 98 px. On a phone the row scrolls sideways, the price stays
   on the left. If TradingView changes the layout, the two numbers here are the place to look. */
.tv-crop { height: 84px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tv-crop::-webkit-scrollbar { display: none; }
.tv-wide { width: max(100%, 840px); margin-top: -98px; } /* our own box: the widget's script sets its container to 100 % */
.tv-chart { height: 190px; margin-top: 8px; }
.tv-note { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.tv-box .tv-btn { margin-top: 0; background: none; cursor: pointer; font-family: inherit; }
.price-ask { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 28px; align-items: center; padding: 14px 18px 16px; background: var(--accent-soft); }
.price-ask .price-label { grid-column: 1 / -1; margin: 0; color: var(--ink); }
.price-field { display: flex; align-items: baseline; gap: 8px; width: 250px; background: var(--surface); border: 2px solid var(--accent); border-radius: 4px; padding: 7px 12px 6px; }
.price-field:focus-within { box-shadow: 0 0 0 3px var(--accent-2); }
.price-in { all: unset; box-sizing: border-box; width: 100%; min-width: 0; font: 700 26px/1.2 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; border-bottom: 2px solid var(--line-strong); padding: 2px 0 3px; }
.price-ask .price-in { font-size: 28px; border-bottom: 0; padding: 0; }
.price-in::placeholder { color: var(--muted); font-weight: 500; font-size: 17px; opacity: 1; }
.price-in:focus { border-bottom-color: var(--accent); }
.price-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.price-ask .price-in:focus-visible { outline: 0; }
.price-in[aria-invalid="true"] { border-bottom-color: var(--loss); }
.price-field:has(.price-in[aria-invalid="true"]) { border-color: var(--loss); }
.price-cur { font-size: 16px; font-weight: 600; color: var(--muted); }
.price-result { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.price-meta { grid-column: 1 / -1; font-size: 13px; color: var(--muted); line-height: 1.45; margin: 2px 0 0; }
.price-block .why { margin: 0; padding: 0 18px 10px; font-size: 13px; }
.price-block.flash { animation: priceflash 1.4s ease-out; }
@keyframes priceflash { from { box-shadow: 0 0 0 4px var(--accent-2); } to { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 640px) { .price-ask { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 14px; } .price-field { width: auto; } .tv-box { padding: 10px 14px 8px; } .price-block .why { padding-inline: 14px; } }
.verdicts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; }
.verdict { all: unset; box-sizing: border-box; cursor: pointer; display: grid; align-content: start; gap: 4px; padding: 14px 18px 16px; border-left: 1px solid var(--line); min-width: 0; }
.verdict:first-child { border-left: 0; }
.verdict:hover { background: var(--accent-soft); }
.verdict:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.v-label { font-size: 13.5px; font-weight: 600; font-stretch: 88%; color: var(--ink-2); }
.v-value { font: 700 26px/1.15 var(--font-body); color: var(--ink); }
.v-value small { font-size: 14px; font-weight: 500; color: var(--muted); }
.v-sub { font-size: 14px; color: var(--ink-2); }
.v-go { font-size: 13.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
.minibars { display: flex; gap: 3px; align-items: end; height: 22px; margin-top: 2px; }
.minibars span { width: 10px; background: var(--accent); border-radius: 1px 1px 0 0; }
.minibars span.low { background: var(--accent-2); }
/* Phones: the three verdicts become short rows (label, number, one line of context) that open their tab */
@media (max-width: 760px) {
  .verdicts { grid-template-columns: minmax(0, 1fr); }
  .verdict { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 11px 38px 12px 16px; position: relative; }
  .verdict:first-child { border-top: 0; }
  .verdict .v-label { grid-column: 1; grid-row: 1; align-self: center; font-size: 14.5px; }
  .verdict .v-value { grid-column: 2; grid-row: 1; font-size: 22px; text-align: right; }
  .verdict .v-sub { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted); }
  .verdict .v-go, .verdict .minibars { display: none; }
  .verdict::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 26px; line-height: 1; color: var(--accent); }
}

/* Tabs (ledger index tabs) */
.tabs { display: flex; gap: 2px; margin-top: 30px; border-bottom: 1px solid var(--line-strong); overflow-x: auto; scrollbar-width: thin; }
.tab { all: unset; box-sizing: border-box; cursor: pointer; padding: 10px 16px 9px; font-size: 15px; font-weight: 600; color: var(--ink-2); white-space: nowrap; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; margin-bottom: -1px; }
.tab:hover { color: var(--accent); background: var(--accent-soft); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab[aria-selected="true"] { color: var(--ink); background: var(--surface); border-color: var(--line-strong); border-top: 3px solid var(--accent); padding-top: 8px; }
.tabpanel { padding-top: 26px; }
.tabpanel[hidden] { display: none; }
.tab-intro { color: var(--ink-2); max-width: 72ch; margin-bottom: 18px; font-size: 15.5px; }

/* Entry: overview tab */
.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .summary { grid-template-columns: minmax(0, 1fr); } }
.sum-col { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 14px 18px 16px; }
.sum-col h2 { font: 700 21px/1.2 var(--font-display); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sum-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.4; }
.sum-list .mk { font-weight: 700; }
.sum-list .good .mk { color: var(--gain); }
.sum-list .bad .mk { color: var(--loss); }
.sum-list small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 1px; }
.sum-empty { color: var(--muted); font-size: 14.5px; }
/* Tiles in a ruled grid: each tile draws its own rule (box-shadow into the 1px gap), so a row that is not
   full stays plain paper instead of showing an empty coloured cell */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; overflow: hidden; }
.ledger > .kf { background: var(--surface); padding: 12px 16px 14px; min-width: 0; box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 640px) {
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger > .kf:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ledger > .kf { padding: 11px 13px 12px; }
  .kf-top { flex-wrap: wrap; }
  .kf-top .spark { order: 2; }
}
.kf-label { font-size: 13.5px; font-stretch: 88%; font-weight: 600; color: var(--ink-2); }
.kf-value { font: 700 25px/1.15 var(--font-body); color: var(--ink); margin-top: 6px; letter-spacing: -0.01em; }
.kf-value small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.kf-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.kf-expl { font-size: 13px; color: var(--muted); margin-top: 6px; }
.block { margin-top: 30px; }
.block > h2 { font: 700 26px/1.15 var(--font-display); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 3px double var(--line-strong); }
/* Basic information: two columns of cards that flow like a newspaper, so the long stock card is not squeezed */
.info-grid { columns: 2 340px; column-gap: 16px; }
.info-grid > .card { break-inside: avoid; margin-bottom: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px 16px; min-width: 0; }
.card h3 { font: 700 19px/1.2 var(--font-display); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 14.5px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.facts .code { font-weight: 700; font-stretch: 85%; letter-spacing: .03em; }
.copy { all: unset; cursor: pointer; color: var(--accent); font-size: 13px; margin-left: 8px; text-decoration: underline; text-underline-offset: 3px; }
.copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Notes about the demo are not warnings: grey, like other notes */
.demo-note { color: var(--muted); font-size: 13px; font-weight: 500; }
.brokers { width: 100%; font-size: 14.5px; }
.brokers th { font-size: 13px; font-stretch: 85%; font-weight: 600; color: var(--ink-2); text-align: left; padding: 0 0 6px; }
.brokers td { padding: 7px 0; border-top: 1px solid var(--grid); }
.brokers th:not(:first-child), .brokers td:not(:first-child) { text-align: center; width: 64px; }
.yes { color: var(--gain); font-weight: 700; }
.no { color: var(--muted); }
.card .small { font-size: 13px; color: var(--muted); margin-top: 10px; }
.card p { font-size: 14.5px; color: var(--ink-2); }
.card p + p { margin-top: 8px; }
.sources { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; }

/* Entry: fair value */
.fv-q { font: 700 clamp(26px, 3vw, 34px)/1.12 var(--font-display); margin: 0 0 6px; max-width: 26ch; }
.fv-lead { font-size: 16.5px; color: var(--ink-2); max-width: 62ch; margin: 0 0 18px; }
.fv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: stretch; }
@media (max-width: 860px) { .fv-grid { grid-template-columns: minmax(0, 1fr); } }
.fv-price, .fv-answer { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 16px 18px; }
.fv-price { border-left: 3px double var(--line-strong); }
.fv-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fv-flow > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); font: 700 15px/1 var(--font-body); }
.step-h { display: block; font-weight: 700; font-size: 16px; margin: 3px 0 4px; }
.step-t { font-size: 14.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.tv-btn { display: inline-block; margin-top: 10px; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 3px; color: var(--accent); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.tv-btn:hover { background: var(--accent-soft); }
.tv-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fv-field { display: flex; align-items: baseline; gap: 8px; max-width: 240px; margin: 2px 0 6px; }
.fv-field .price-in { font-size: 28px; }
.why { margin-top: 14px; font-size: 14px; }
.why summary { cursor: pointer; color: var(--accent); font-weight: 600; width: fit-content; }
.why summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.why p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.5; max-width: 62ch; }
.price-block .why { margin-top: 8px; font-size: 13px; }
.fv-price .demo-note { font-size: 12.5px; margin: 10px 0 0; }
.fv-answer { display: flex; flex-direction: column; gap: 6px; border-top: 4px solid var(--line-strong); }
.fv-answer.under { border-top-color: var(--gain); }
.fv-answer.over { border-top-color: var(--loss); }
.fv-answer.fair { border-top-color: var(--ink-2); }
.fv-kicker { margin: 0; font-size: 14.5px; color: var(--muted); font-weight: 600; }
.fv-title { font: 700 clamp(30px, 4vw, 44px)/1.05 var(--font-display); margin: 0; display: flex; align-items: baseline; gap: 10px; }
.fv-answer.under .fv-title { color: var(--gain); }
.fv-answer.over .fv-title { color: var(--loss); }
.fv-title .ic { font: 700 .7em/1 var(--font-body); }
.fv-answer:not(.under):not(.over):not(.fair) .fv-title { font-size: clamp(24px, 3vw, 30px); color: var(--ink-2); }
.fv-sentence { font-size: 16px; color: var(--ink-2); margin: 0 0 6px; max-width: 52ch; }
.fv-bands { width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0 3px; margin-top: auto; }
.fv-bands th { text-align: left; font-weight: 600; padding: 6px 10px; border-radius: 3px 0 0 3px; white-space: nowrap; }
.fv-bands td { text-align: right; padding: 6px 10px; border-radius: 0 3px 3px 0; }
.fv-bands .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }
.fv-bands .under .sw { background: var(--gain); }
.fv-bands .fair .sw { background: var(--muted); }
.fv-bands .over .sw { background: var(--loss); }
.fv-bands tr.on th, .fv-bands tr.on td { font-weight: 700; }
.fv-bands tr.under.on th, .fv-bands tr.under.on td { background: var(--under-soft); }
.fv-bands tr.fair.on th, .fv-bands tr.fair.on td { background: var(--fair-soft); }
.fv-bands tr.over.on th, .fv-bands tr.over.on td { background: var(--over-soft); }
.fv-bands .you { display: inline-block; margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.fv-est { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.fv-est b { color: var(--ink); font-size: 15px; }
.fv-est small { font-size: 12.5px; color: var(--muted); }
.fv-explain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 18px; }
@media (max-width: 860px) { .fv-explain { grid-template-columns: minmax(0, 1fr); } }
.fv-explain h3 { font: 700 19px/1.25 var(--font-display); margin: 0 0 6px; }
.fv-explain p { margin: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; max-width: 62ch; }
.fv-explain strong { color: var(--ink); }
.fv-more { margin-top: 20px; }
.fv-more .fv-cols { margin-top: 0; }
.how-h { font: 700 18px/1.25 var(--font-display); margin: 6px 0 0; }
.fv-box-h { font: 700 19px/1.25 var(--font-display); margin: 0 0 12px; }
.fv-price .fv-go { margin-top: 14px; }
.fv-curve-box { margin-top: 26px; }
.fv-curve-box h3 { font: 700 21px/1.2 var(--font-display); margin: 0 0 2px; }
.fv-curve-box .what { margin: 0; font-size: 14.5px; color: var(--muted); max-width: 80ch; }
.fv-curve { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 10px 7px 4px; }
.fv-curve .gl { stroke: var(--grid); }
.fv-curve .ax { stroke: var(--line-strong); }
.fv-curve .tl { fill: var(--muted); font: 12px var(--font-body); font-variant-numeric: tabular-nums; }
.fv-curve .vl { fill: var(--ink); font: 600 12.5px var(--font-body); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.fv-curve .curve { fill: none; stroke: var(--accent); stroke-width: 2; }
.fv-curve .est { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.fv-curve .ppt { fill: var(--accent-3); stroke: var(--surface); stroke-width: 2; }
.fv-curve .drop { stroke: var(--muted); stroke-dasharray: 3 3; }
.fv-curve .pline { stroke: var(--accent-3); stroke-width: 1.6; stroke-dasharray: 6 4; }
.fv-curve .hit { fill: transparent; }
.fv-curve .hov line { stroke: var(--ink-2); }
.fv-curve .hov circle { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.fv-curve .hov rect { fill: var(--ink); }
.fv-curve .hov text { fill: var(--bg); font: 600 12px var(--font-body); }
#fv-implied { margin: 10px 0 0; max-width: 80ch; color: var(--ink-2); }
#fv-implied strong { color: var(--ink); }
.fv-why { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--accent-3); border-radius: 3px; padding: 14px 18px 14px; }
.fv-why h3 { font: 700 19px/1.25 var(--font-display); margin: 0 0 8px; }
.fv-why ul { margin: 0; padding-left: 18px; }
.fv-why li { margin: 0 0 6px; color: var(--ink-2); max-width: 88ch; }
.fv-why p { margin: 8px 0 0; max-width: 88ch; }
.fv-scale { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 10px 14px 6px; }
.fv-scale .zlab { font: 600 12px var(--font-body); }
.fv-scale .zlab.under { fill: var(--gain); }
.fv-scale .zlab.fair { fill: var(--ink-2); }
.fv-scale .zlab.over { fill: var(--loss); }
.fv-scale .marker { stroke: var(--ink); stroke-width: 2; }
.fv-scale .mlab { fill: var(--ink); font: 600 13px var(--font-body); font-variant-numeric: tabular-nums; }
.fv-scale .mlab small, .fv-scale .msub { fill: var(--muted); font: 12px var(--font-body); }
.fv-scale .price-pt { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.fv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 860px) { .fv-cols { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 16px; min-width: 0; }
.panel h3 { font: 700 19px/1.25 var(--font-display); margin: 0 0 6px; }
.panel p + p { margin-top: 8px; }
.panel .small { font-size: 13.5px; color: var(--muted); }
.assume { display: grid; gap: 12px; margin-top: 12px; }
.assume .row { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 4px 12px; align-items: center; }
.assume label, .assume .lbl { font-weight: 600; font-size: 14.5px; }
.assume .hint { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.assume .val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pct-input { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.pct-input input { width: 84px; font: inherit; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 3px; padding: 6px 8px; }
.pct-input span { color: var(--muted); }
.assume-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 4px; }
.implied { font-size: 15.5px; color: var(--ink-2); }
.implied strong { color: var(--ink); }
.sens { width: 100%; margin-top: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.sens th, .sens td { padding: 7px 8px; text-align: center; border: 2px solid var(--surface); }
.sens thead th { font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-stretch: 88%; }
.sens tbody th { font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: left; font-stretch: 88%; white-space: nowrap; }
.sens td { border-radius: 3px; line-height: 1.25; }
.sens td small { display: block; font-size: 11.5px; color: var(--ink-2); }
.sens td.under { background: var(--under-soft); }
.sens td.fair { background: var(--fair-soft); }
.sens td.over { background: var(--over-soft); }
.sens td.base { outline: 2px solid var(--ink); outline-offset: -2px; }
.how { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; }
.how summary { cursor: pointer; padding: 12px 16px; font: 700 18px/1.25 var(--font-display); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.how summary::-webkit-details-marker { display: none; }
.how summary::after { content: "+"; color: var(--muted); font: 600 16px/1 var(--font-body); }
.how[open] summary::after { content: "−"; }
.how .how-body { padding: 0 16px 16px; display: grid; gap: 12px; }
.how ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 15px; }
.proj { width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.proj th, .proj td { padding: 6px 8px; border-bottom: 1px solid var(--grid); text-align: right; }
.proj th:first-child, .proj td:first-child { text-align: left; }
.proj thead th { font-size: 12.5px; color: var(--ink-2); font-weight: 600; border-bottom: 3px double var(--line-strong); }
.proj tr.total td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.note { font-size: 13.5px; color: var(--muted); margin-top: 12px; max-width: 82ch; }
.fv-none { background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; padding: 16px 18px; max-width: 70ch; }
.fv-none h2 { font: 700 24px/1.2 var(--font-display); margin: 0 0 6px; }
/* Price levels: prices at which the stock would meet each yardstick, computed from the reports only */
.ladder { width: 100%; max-width: 680px; margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; font-size: 15px; }
.ladder td { padding: 8px 12px; border-bottom: 1px solid var(--grid); vertical-align: baseline; }
.ladder tr:last-child td { border-bottom: 0; }
.ladder .lv-p { width: 9.5em; text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.ladder .lv-under td { background: var(--under-soft); }
.ladder .lv-over td { background: var(--over-soft); }
.ladder .lv-fair td { background: var(--fair-soft); font-weight: 600; }
.ladder .lv-you td { background: var(--accent-soft); font-weight: 700; color: var(--ink); box-shadow: inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink); }
.levels-intro { font-size: 14.5px; color: var(--ink-2); max-width: 75ch; }
.flags { background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; padding: 12px 16px; margin: 0 0 16px; }
.flags h3 { font: 700 18px/1.25 var(--font-display); margin: 0 0 6px; }
.flags ul { list-style: none; margin: 0; padding: 0; }
.flags li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--grid); font-size: 14.5px; }
.flags li:first-child { border-top: 0; }
.flags li.serious a { color: var(--loss); font-weight: 600; }
.flags .d { color: var(--muted); font-variant-numeric: tabular-nums; }
.flags .form { color: var(--muted); font-size: 13px; }
.q-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; margin-top: 8px; }
.qtable { min-width: 460px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.qtable th, .qtable td { padding: 7px 12px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; }
.qtable thead th { font-size: 12.5px; font-stretch: 88%; font-weight: 600; color: var(--ink-2); border-bottom: 3px double var(--line-strong); white-space: normal; vertical-align: bottom; }
.qtable th:first-child { text-align: left; }
.qtable tbody th { font-weight: 600; color: var(--ink-2); }
.qtable tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 760px) {
  .q-wrap .qtable th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
}
.ratios-h { font: 700 21px/1.2 var(--font-display); margin: 24px 0 8px; }

/* Entry: assessment */
.assess { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 780px) { .assess { grid-template-columns: minmax(0, 1fr); } }
.radar { display: grid; justify-items: center; gap: 4px; }
.radar svg { max-width: 100%; height: auto; display: block; }
.radar .ring { fill: none; stroke: var(--line); }
.radar .spoke { stroke: var(--line); }
.radar .area { fill: var(--accent); fill-opacity: .2; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.radar .dot { fill: var(--accent); }
.radar .lab { fill: var(--ink); font: 600 13px var(--font-body); }
.radar .sc { fill: var(--muted); font: 12px var(--font-body); font-variant-numeric: tabular-nums; }
.score-total { font: 700 34px/1 var(--font-body); border-bottom: 3px double var(--ink); padding-bottom: 2px; }
.areas { display: grid; gap: 8px; }
.area-box { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; }
.area-box summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 11px 14px; font: 700 18px/1.2 var(--font-display); }
.area-box summary::-webkit-details-marker { display: none; }
.area-box summary::after { content: "+"; color: var(--muted); font: 600 16px/1 var(--font-body); }
.area-box[open] summary::after { content: "−"; }
.pips { display: inline-flex; gap: 3px; }
.pip { width: 10px; height: 10px; background: var(--grid); border: 1px solid var(--line); }
.pip.on { background: var(--accent); border-color: var(--accent); }
.pip.na { background: none; border-style: dashed; border-color: var(--line-strong); }
.area-box .muted { font: 600 14px var(--font-body); font-variant-numeric: tabular-nums; }
.checks { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 7px; font-size: 14.5px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
.checks .mark { font-weight: 700; font-size: 16px; line-height: 1.3; }
.checks .ok .mark { color: var(--gain); }
.checks .bad .mark { color: var(--loss); }
.checks .na .mark, .checks .na { color: var(--muted); }
.checks small { display: block; color: var(--muted); font-size: 13px; }
.div-separate { margin-top: 18px; }
.div-separate > p { font-size: 14px; color: var(--muted); margin-bottom: 8px; }

/* Entry: finances, dividends, taxes */
.fin-wrap { overflow-x: auto; margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; }
.fin { min-width: 720px; font-size: 14.5px; }
.fin th, .fin td { padding: 7px 12px; border-bottom: 1px solid var(--grid); border-left: 1px solid var(--grid); white-space: nowrap; }
.fin thead th { font-size: 13px; font-stretch: 85%; font-weight: 600; color: var(--ink-2); text-align: right; border-bottom: 3px double var(--line-strong); }
.fin thead th:first-child { text-align: left; }
.fin tbody th { text-align: left; font-weight: 500; color: var(--ink); }
.fin .sticky-col { min-width: 220px; border-left: 0; border-right: 3px double var(--line-strong); }
.fin tbody tr.sub th { font-weight: 400; color: var(--muted); padding-left: 24px; }
.fin tbody tr.fin-sec > * { border-top: 1px solid var(--line-strong); padding-top: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fin tbody tr:first-child.fin-sec > * { border-top: 0; }
.fin:not(.all) .older { display: none; }
.fin:not(.all) { min-width: 560px; }
.more-line { margin: 8px 0 0; font-size: 14px; }
.ins-table:not(.all) tbody tr:nth-child(n+6) { display: none; }
a.term { color: inherit; text-decoration: underline dotted var(--line-strong); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; }
a.term:hover, a.term:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
.term-pop { position: absolute; z-index: 60; width: min(340px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--line-strong); border-top: 3px solid var(--accent); border-radius: 3px; box-shadow: 0 8px 26px rgba(0, 0, 0, .16); padding: 12px 14px 12px; font-size: 14.5px; line-height: 1.45; text-align: left; white-space: normal; font-weight: 400; }
.term-pop b { display: block; font: 700 17px/1.2 var(--font-display); color: var(--ink); }
.term-pop p { margin: 4px 0 8px; color: var(--ink-2); }
.gloss-index { font-size: 14.5px; line-height: 2; color: var(--muted); max-width: 112ch; margin-bottom: 6px; }
.gloss-statements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.gloss-statements h3 { font: 700 19px/1.2 var(--font-display); margin: 0 0 6px; }
.gloss-statements p { margin: 0; color: var(--ink-2); }
.gloss { margin: 4px 0 0; }
.gloss-term { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 4px 28px; padding: 14px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 14px; }
.gloss-term dt { font: 700 19px/1.25 var(--font-display); }
.gloss-term dt small { display: block; margin-top: 3px; font: 500 13px/1.3 var(--font-body); color: var(--muted); }
.gloss-term dd { margin: 0; max-width: 78ch; }
.gloss-term dd p { margin: 0 0 6px; color: var(--ink-2); }
.gloss-term dd .gloss-where { font-size: 13.5px; color: var(--muted); margin: 0; }
.gloss-term:target { background: var(--accent-soft); box-shadow: -14px 0 0 var(--accent-soft), 14px 0 0 var(--accent-soft); }
@media (max-width: 760px) { .gloss-statements { grid-template-columns: minmax(0, 1fr); } .gloss-term { grid-template-columns: minmax(0, 1fr); } }
.guide .guide-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; margin-top: 12px; }
.guide h3 { font: 700 18px/1.2 var(--font-display); margin: 0 0 6px; }
.guide ul { margin: 0; padding-left: 18px; }
.guide li { margin: 0 0 7px; color: var(--ink-2); }
.guide-cmp { margin: 12px 0 0; color: var(--ink-2); max-width: 92ch; }
@media (max-width: 760px) { .guide .guide-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .fin-years { display: none; } }
.fin td { text-align: right; font-variant-numeric: tabular-nums; }
.fin tbody tr:last-child > * { border-bottom: 0; }
/* Phones: the wide year-by-metric table becomes small tables, one per topic, newest year first */
.fin-groups { display: none; margin-top: 16px; }
.fin-group { background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; padding: 10px 10px 2px; }
.fin-group + .fin-group { margin-top: 12px; }
.fin-group h3 { font: 700 18px/1.2 var(--font-display); margin: 2px 4px 6px; }
.fin-group h3 small { font: 500 13px var(--font-body); color: var(--muted); margin-left: 6px; }
.fin-mini { width: 100%; table-layout: fixed; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.fin-mini th, .fin-mini td { padding: 7px 4px; border-bottom: 1px solid var(--grid); text-align: right; overflow-wrap: anywhere; }
.fin-mini thead th { font-size: 12.5px; font-stretch: 88%; font-weight: 600; color: var(--ink-2); line-height: 1.2; vertical-align: bottom; border-bottom: 3px double var(--line-strong); }
.fin-mini th:first-child { text-align: left; width: 3.9em; white-space: nowrap; overflow-wrap: normal; }
.fin-mini tbody th { font-weight: 600; color: var(--ink-2); }
.fin-mini tbody tr:last-child > * { border-bottom: 0; }
.fin-mini tr.older { display: none; }
.fin-groups.all .fin-mini tr.older { display: table-row; }
.fin-more { margin-top: 10px; }
@media (max-width: 640px) { .fin-wrap { display: none; } .fin-groups { display: block; } }
.charts-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .charts-2 { grid-template-columns: minmax(0, 1fr); } }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 680px) { .two { grid-template-columns: minmax(0, 1fr); } }
.payments { font-size: 14.5px; }
.payments td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.payments td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.payments tr:last-child td { border-bottom: 0; }
.payout-value { font: 700 34px/1.05 var(--font-body); }
.meter { position: relative; height: 10px; background: var(--grid); margin: 14px 0 6px; border-radius: 1px; }
.meter-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--accent); border-radius: 1px; }
.meter-fill.over { background: var(--loss); }
.meter-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); }
.meter-scale { position: relative; height: 16px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.meter-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.meter-scale span:first-child { transform: none; }
.meter-scale span:last-child { transform: translateX(-100%); }
.calc-box .calc-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 10px; align-items: center; }
.calc-box label { font-weight: 600; font-size: 14.5px; }
.calc-box input { width: 100%; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 3px; padding: 7px 9px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px; font-size: 14px; }
.presets button { color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.calc-out { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; margin: 0; font-size: 14.5px; }
.calc-out dt { color: var(--ink-2); }
.calc-out dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.calc-out dd.big { font-size: 20px; border-bottom: 3px double var(--ink); }
.tax { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .tax { grid-template-columns: minmax(0, 1fr); } }
.tax ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.calc { width: 100%; font-size: 14.5px; }
.calc td { padding: 5px 0; border-bottom: 1px solid var(--grid); }
.calc td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.calc tr.total td { font-weight: 700; border-bottom: 3px double var(--ink); border-top: 1px solid var(--ink); }
.entry-sources { margin-top: 40px; padding-top: 14px; border-top: 3px double var(--line-strong); }
.entry-sources h2 { font: 700 21px/1.2 var(--font-display); margin: 0 0 8px; }

/* Pages */
.page-head { padding-block: 30px 18px; }
.page-head h1 { font: 700 clamp(34px, 5vw, 54px)/1.03 var(--font-display); letter-spacing: -0.02em; margin: 0 0 12px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: 8px; }
.inv-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px double var(--line-strong); border-radius: 3px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inv-card h3 { font: 700 22px/1.15 var(--font-display); margin: 0; }
.inv-card h3 a { color: var(--ink); text-decoration: none; }
.inv-card h3 a:hover, .inv-card h3 a:focus-visible { color: var(--accent); text-decoration: underline; }
.inv-card .mgr { font-size: 13.5px; color: var(--muted); }
.inv-card .tot { font-size: 15px; font-variant-numeric: tabular-nums; margin-top: 6px; }
.inv-card ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 3px; font-size: 14.5px; }
.inv-card .w { color: var(--muted); font-variant-numeric: tabular-nums; }
.inv-card .more { margin-top: auto; padding-top: 8px; font-size: 14px; }
.stale { color: var(--loss); font-size: 13.5px; font-weight: 600; }
.tick { font-size: 12px; font-weight: 700; font-stretch: 85%; letter-spacing: .03em; color: var(--muted); }
.inv-table th[scope="row"] { white-space: normal; min-width: 150px; }
.inv-table td.who, .inv-table td.nm, .inv-table th.l { text-align: left; white-space: normal; min-width: 160px; }
.inv-table .tick, .inv-table td.who a { white-space: nowrap; }
.qtable td.gain { color: var(--gain); }
@media (max-width: 640px) { .inv-table .col-opt { display: none; } .inv-table { min-width: 0; } }
.ins-table td small, .inv-table td small { display: block; font-size: 12px; font-weight: 400; }
.ins-table .who { font-weight: 600; }
.score-card h3 { font: 700 19px/1.2 var(--font-display); margin: 0 0 6px; }
.score-card .big { font: 700 34px/1.1 var(--font-body); margin: 4px 0 8px; }
.score-card .big small { font-size: 16px; font-weight: 500; }
.score-card .big.gain { color: var(--gain); } .score-card .big.neg { color: var(--loss); }
.score-card p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.score-card .checks { margin-top: 10px; }
.cmp-table { min-width: 520px; }
.cmp-table tbody th, .etf-years tbody th { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.cmp-table th.is-me, .cmp-table td.is-me { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.cmp-table thead th a { color: var(--ink); }
.cmp-pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.cmp-pickers .field { display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.cmp-pickers select { font: inherit; padding: 8px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
.disc-form { display: grid; gap: 8px; max-width: 72ch; margin: 6px 0 18px; }
.disc-form textarea { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); resize: vertical; }
.disc-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.disc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.disc-form .btn { font: 600 14.5px var(--font-body); background: var(--accent); color: #fff; border: 0; border-radius: 3px; padding: 9px 16px; cursor: pointer; }
.disc-form .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.disc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 72ch; }
.disc-item { padding: 12px 0; border-top: 1px solid var(--line); }
.disc-meta { display: flex; gap: 10px; align-items: baseline; font-size: 14px; flex-wrap: wrap; }
.disc-meta .linkish { margin-left: auto; font-size: 13px; }
.disc-text { white-space: pre-wrap; font-size: 15.5px; line-height: 1.55; color: var(--ink); margin-top: 4px; overflow-wrap: anywhere; }
.caveats { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-2); max-width: 72ch; }
.rank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 820px) { .rank-grid { grid-template-columns: minmax(0, 1fr); } }
.rank-table { width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.rank-table td { padding: 6px 4px; border-bottom: 1px solid var(--grid); }
.rank-table td.r { width: 34px; color: var(--muted); border-right: 3px double var(--line-strong); text-align: right; padding-right: 10px; }
.rank-table td.v { text-align: right; font-weight: 600; }
.rank-table tr:last-child td { border-bottom: 0; }
.rank-table tr.rk-more { display: none; }
.panel.all .rank-table tr.rk-more { display: table-row; }
.prose { max-width: 72ch; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.prose .tbl-scroll { overflow-x: auto; }
.prose h2 { font: 700 27px/1.15 var(--font-display); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 3px double var(--line-strong); }
.prose p, .prose li { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.prose p + p { margin-top: 10px; }
.prose ol + p, .prose ul + p { margin-top: 10px; }
.prose ul, .prose ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.prose h3 { font: 700 19px/1.25 var(--font-display); margin: 14px 0 4px; }
.prose table { font-size: 15px; margin-top: 8px; }
.prose table td, .prose table th { padding: 6px 10px; border-bottom: 1px solid var(--grid); text-align: left; }
.prose table th { font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 640px) { .prose table td, .prose table th { padding: 6px 6px; } }
.foot { border-top: 3px double var(--line-strong); margin-top: 64px; padding-block: 20px 34px; font-size: 13.5px; color: var(--muted); }
.foot p { max-width: 90ch; }
@media (prefers-reduced-motion: no-preference) { .tabpanel:not([hidden]) { animation: sheet .18s ease-out; } @keyframes sheet { from { opacity: .4; } to { opacity: 1; } } }

/* Company marks, sparklines, trend chips */
.co-mark { --ink: var(--accent); display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 7px; background: var(--ink); color: #fff; font: 700 16px/1 var(--font-display); letter-spacing: -.01em; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); padding-top: 2px; }
.co-mark-l { width: 60px; height: 60px; border-radius: 12px; font-size: 29px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); padding-top: 3px; }
img.co-mark.logo { background: var(--logo-tile); object-fit: contain; padding: 3px; border: 1px solid var(--line); box-shadow: none; }
img.co-mark-l.logo { padding: 6px; }
.title-row { display: flex; align-items: center; gap: 16px; }
.co { display: flex; align-items: center; gap: 11px; }
.co-text { display: grid; gap: 1px; min-width: 0; }
.cmp-co { display: inline-flex; align-items: center; gap: 8px; }
.spark { display: block; flex: none; overflow: visible; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.spark.worse path { stroke: var(--loss); }
.spark.worse circle { fill: var(--loss); }
.spark .sp-zero { stroke: var(--line-strong); stroke-dasharray: 2 2; stroke-width: 1; }
.with-spark { display: inline-flex; align-items: center; gap: 8px; }
.trend { display: inline-block; font-size: 12.5px; font-weight: 600; line-height: 1.3; padding: 2px 9px; border-radius: 999px; background: var(--fair-soft); color: var(--ink-2); }
.trend.good { background: var(--under-soft); color: var(--gain); }
.trend.bad { background: var(--over-soft); color: var(--loss); }
.kf-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kf-trend { margin-top: 9px; }

/* What shareholders get: the receipt ends with a double-underlined total, like a ledger */
.returns .ledger { margin-top: 12px; }
.rr-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; max-width: 760px; margin: 22px 0 8px; }
.rr-h { font: 700 20px/1.25 var(--font-display); margin: 0; }
.rr-price { font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: baseline; gap: 6px; }
.rr-price .price-in { width: 96px; font: inherit; font-size: 15px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); }
.rr-total.pending .rr-value { font-size: 22px; color: var(--muted); text-decoration: none; }
.returns-receipt { background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; padding: 4px 18px 12px; max-width: 760px; }
.rr-row { display: grid; grid-template-columns: auto minmax(20px, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 10px 0 9px; border-bottom: 1px solid var(--grid); }
.rr-label { font-weight: 600; }
.rr-dots { border-bottom: 2px dotted var(--line-strong); transform: translateY(-5px); }
.rr-value { font: 700 21px/1.1 var(--font-body); font-variant-numeric: tabular-nums; text-align: right; }
.rr-note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.rr-row.rr-total { border-bottom: 0; border-top: 1px solid var(--line-strong); margin-top: 2px; padding-top: 12px; }
.rr-total .rr-label { font: 700 19px/1.2 var(--font-display); }
.rr-total .rr-value { font-size: 27px; text-decoration: underline double var(--ink); text-underline-offset: 7px; text-decoration-thickness: 1px; }
.ret-chart { margin-top: 16px; }
.ret-chart .seg-d { fill: var(--accent); }
.ret-chart .seg-b { fill: var(--accent-2); }
.ret-chart .cf-tick { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.ret-chart .hit { fill: transparent; }
.ret-chart .rbar:hover .hit { fill: var(--accent-soft); }
.sw.tick { background: var(--ink); width: 14px; height: 3px; vertical-align: 3px; border-radius: 2px; }

/* Ratios with an explanation (Finance tab) */
.ratio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ratio { background: var(--surface); border: 1px solid var(--line); border-top: 3px double var(--line-strong); border-radius: 3px; padding: 12px 16px 14px; }
.ratio-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }

/* Home */
.hero-text { min-width: 0; max-width: 760px; }
@media (max-width: 520px) { .co-mark-l { width: 46px; height: 46px; font-size: 22px; border-radius: 10px; } .title-row { gap: 12px; } }

/* Index on phones: the wide register turns into cards (company, then three figures: the sorted one,
   the assessment and the fair value estimate) */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; background: none; border: 0; }
  .register { min-width: 0; display: block; }
  .register thead { display: none; }
  .register tbody { display: grid; gap: 8px; }
  .register tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; }
  .register tbody tr:hover td { background: none; }
  .register td { display: none; padding: 0; border: 0 !important; white-space: normal; text-align: left !important; }
  .register td.co-col { display: block; grid-column: 1 / -1; position: static; min-width: 0; background: none; }
  .register td.m-show { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
  .register td.m-show::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); margin-bottom: 1px; }
  .register td .with-spark .spark, .register td .score-bar { display: none; }
  .register tbody tr.empty { display: block; }
  .register tbody tr.empty td { display: block; padding: 20px 4px; }
}
/* Amounts compared across companies: in dollars or in crowns, the visitor's choice */
.cur-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.result-bar .cur-switch { margin-left: auto; }
.cur-switch .seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; background: var(--surface); }
.cur-switch button { all: unset; cursor: pointer; padding: 5px 11px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.cur-switch button + button { border-left: 1px solid var(--line-strong); }
.cur-switch button[aria-pressed="true"] { background: var(--accent); color: var(--surface); }
.cur-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.page-head .cur-switch { margin-top: 12px; }
/* A note keeps one sentence; how it is computed opens on request */
.more { margin-top: 4px; }
.more summary { cursor: pointer; color: var(--accent); width: fit-content; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more p { margin: 6px 0 0; max-width: 82ch; }
.fin thead th small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.sens thead th:first-child { color: var(--muted); font-weight: 500; text-align: left; }
.fv-go { all: unset; cursor: pointer; display: inline-block; margin-top: 10px; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 3px; color: var(--accent); font-weight: 600; font-size: 14.5px; }
.fv-go:hover { background: var(--accent-soft); }
.fv-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fv-now { font-size: 14.5px; color: var(--ink); margin: 6px 0 0; }
.rr-price b { font-variant-numeric: tabular-nums; }
.discussion { margin-top: 40px; }
.tab-section { scroll-margin-top: 12px; }
/* ETF (demo): category tables, the rating in four parts, the Czech investor's view */
.etf-byline { margin-top: 10px; font-size: 14px; color: var(--muted); }
.etf-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.etf-cat { scroll-margin-top: 12px; }
.etf-sub { margin-top: 22px; }
.etf-sub h3 { font: 700 21px/1.2 var(--font-display); margin: 0 0 2px; }
.etf-sub .what { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; max-width: 78ch; }
.etf-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; }
.etf-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; }
/* A table wider than its box: the edge fades out where more columns hide (set by scrollHints) */
.more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), rgba(0,0,0,.12)); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), rgba(0,0,0,.12)); }
.more-left { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.12), #000 40px); mask-image: linear-gradient(90deg, rgba(0,0,0,.12), #000 40px); }
.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.12), #000 40px, #000 calc(100% - 40px), rgba(0,0,0,.12)); mask-image: linear-gradient(90deg, rgba(0,0,0,.12), #000 40px, #000 calc(100% - 40px), rgba(0,0,0,.12)); }
.etf-table { font-size: 14.5px; }
.etf-table th, .etf-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--grid); text-align: left; vertical-align: middle; }
.etf-table th:first-child, .etf-table td:first-child { border-left: 0; }
.etf-table thead th { font-size: 13px; font-stretch: 85%; font-weight: 600; color: var(--ink-2); vertical-align: bottom; line-height: 1.25; border-bottom: 3px double var(--line-strong); }
.etf-table thead th small, .etf-years thead th small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.etf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.etf-table tbody tr { cursor: pointer; }
.etf-table tbody tr:hover td { background: var(--accent-soft); }
.etf-table tbody tr:last-child td { border-bottom: 0; }
.etf-table tr.is-me td { background: var(--accent-soft); }
.etf-table .etf-name a { font-weight: 700; color: var(--ink); text-decoration: none; }
.etf-table .etf-name a:hover, .etf-table .etf-name a:focus-visible { color: var(--accent); text-decoration: underline; }
.etf-table .etf-name small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.etf-table .gain { color: var(--gain); }
.etf-pts { display: inline-block; min-width: 38px; text-align: center; padding: 2px 8px; border-radius: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.etf-pts.big { font-size: 28px; padding: 2px 10px; }
.etf-pts.b1 { background: var(--accent); color: var(--surface); }
.etf-pts.b2 { background: var(--under-soft); color: var(--gain); }
.etf-pts.b3 { background: var(--fair-soft); color: var(--ink-2); }
.etf-pts.b4 { background: var(--over-soft); color: var(--ink-2); }
.etf-pts.b5 { background: var(--over-soft); color: var(--loss); }
.etf-band { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.etf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.etf-cards .card p + p { margin-top: 8px; }
.etf-cards .card h3 small { font: 500 13px var(--font-body); }
.verdict.static { cursor: default; }
.verdict.static:hover { background: none; }
.verdict.static::after { content: none !important; }
.etf-verdicts .v-value .etf-pts { vertical-align: 3px; }
.parts { background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; max-width: 860px; }
.part { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; padding: 12px 16px 14px; border-top: 1px solid var(--grid); }
.part:first-child { border-top: 0; }
.part .p-name { font-weight: 600; }
.part .p-pts { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.part .p-pts small { color: var(--muted); font-weight: 500; }
.part .p-bar { grid-column: 1 / -1; height: 6px; background: var(--grid); border-radius: 1px; overflow: hidden; }
.part .p-bar span { display: block; height: 100%; background: var(--accent); }
.part .p-text { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); max-width: 80ch; }
.part.total { border-top: 1px solid var(--line-strong); }
.part.total .p-pts { font-size: 20px; border-bottom: 3px double var(--ink); padding-bottom: 1px; }
.etf-years { min-width: 520px; }
.etf-years td { text-align: right; }
.etf-top { margin: 0; padding: 0; list-style: none; counter-reset: top; columns: 2 300px; column-gap: 28px; max-width: 760px; }
.etf-top li { counter-increment: top; display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--grid); break-inside: avoid; font-size: 15px; }
.etf-top li::before { content: counter(top) "."; color: var(--muted); min-width: 1.6em; font-variant-numeric: tabular-nums; }
.etf-top li span:first-child { flex: 1; min-width: 0; }
.etf-top .w { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.etf-in { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.etf-in small { display: block; color: var(--muted); font-size: 13px; }
.kf-value.txt { font-size: 19px; overflow-wrap: anywhere; }
.etf-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etf-best { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; }
.etf-best a { font-weight: 700; }
.etf-best small { flex-basis: 100%; color: var(--muted); font-size: 13px; }
@media (max-width: 860px) { .etf-home { grid-template-columns: minmax(0, 1fr); } }
.mar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); max-width: 90ch; }
.mar-list b { color: var(--ink); }
.etf-table .m-rank { display: none; }
.etf-best + .etf-best { margin-top: 8px; }
/* Phones: every ETF becomes a card – the name, then rating, result and fee */
@media (max-width: 640px) {
  .etf-wrap { overflow: visible; background: none; border: 0; }
  .etf-table, .etf-table tbody { display: block; }
  .etf-table thead { display: none; }
  .etf-table tbody { display: grid; gap: 8px; }
  .etf-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px double var(--line-strong); border-radius: 3px; }
  .etf-table tbody tr.is-me { background: var(--accent-soft); }
  .etf-table tbody tr:hover td { background: none; }
  .etf-table td { display: none; padding: 0; border: 0 !important; text-align: left !important; white-space: normal; }
  .etf-table td.etf-name { display: block; grid-column: 1 / -1; }
  .etf-table .m-rank { display: inline; color: var(--muted); font-weight: 600; }
  .etf-table td.m-show { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
  .etf-table td.m-show::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
  .etf-pts.big { font-size: 24px; }
}