/* TFA design system
   One neutral scale from near-black to near-white (dark grays with the faintest cool cast), seams one pixel wide, frames with an 8px corner.
   One blue accent for what you act on and what is chosen (buttons, links, pressed choices, focus), for what identifies a
   company in a table, and for the score. Green and red are a figure's sign and nothing else: emerald for up or in the
   company's favor, muted red for down or against it. Flags and tags stay on the neutral scale, their icon or word
   carrying the meaning.
   Type: Archivo, a grotesque with true tabular figures, at two weights (400, 600); headings set a little condensed, tickers
   in its semibold. */

:root {
  --bg: #0a0a0c;
  --bg-raise: #101013;
  --surface: #141417;
  --surface-2: #1a1a1e;
  --surface-3: #212126;
  --surface-4: #2a2a30;
  --line: #232328;
  --line-2: #2f2f36;
  --line-3: #3f3f47;
  --text: #ededf0;
  --text-2: #a8a8b1;
  --text-3: #8a8a94;
  /* The accent: a fill dark enough for white text (5.2:1), a lighter step for text, icons and rings on the dark
     grounds, and a tint and an edge for a chosen control. */
  --accent: #2563eb;
  --accent-hover: #1d55d0;
  --accent-text: #7fb0ff;
  --accent-dim: rgba(59, 130, 246, 0.15);
  --accent-line: rgba(127, 176, 255, 0.36);
  /* The primary action's fill is the accent (it was the scale's lightest step). */
  --inverse: var(--accent);
  --inverse-hover: var(--accent-hover);
  --on-inverse: #ffffff;
  --on-inverse-2: rgba(255, 255, 255, 0.74); /* secondary ink on the accent fill */
  --up: #3fbf8c;
  --up-dim: rgba(63, 191, 140, 0.12);
  --down: #e2706a;
  --down-dim: rgba(226, 112, 106, 0.12);
  /* A middle reading (a fair verdict, a mixed health band) is neutral: no third hue. */
  --mid: #c3ccda;
  --mid-dim: rgba(195, 204, 218, 0.1);
  /* Ink: the one hue that is not a sign. It marks what identifies a company in a dense table (its ticker) and its
     size (market value), never a reading for or against it. */
  --ink: #7fb0ff;
  --ink-dim: rgba(127, 176, 255, 0.1);
  --ink-line: rgba(127, 176, 255, 0.24);
  /* The score tape: a part's earned points in the scale's light step, the rest of its slot in the track. */
  --tape: #c3ccda;
  --tape-track: #2c2c34;
  /* The score's earned points, in the accent: the tape, the ledger's point bars. */
  --score: #5b93f0;
  --r-frame: 8px;
  --r-ctl: 6px;
  --r-tag: 4px;
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Tickers: the same face, semibold (there is no code on the site to set in a monospace). */
  --mono: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1240px;
  --gutter: 24px;
  --nav-h: 56px;
  --shadow-pop: 0 18px 44px -14px rgba(0, 0, 0, 0.75), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--text);
}
::selection { background: rgba(59, 130, 246, 0.35); color: #ffffff; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 3px; }
a { color: inherit; text-decoration-color: var(--line-3); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text-2); }
/* A link in running text is the accent; links with a class (rows, tickers, buttons, the brand) set their own color. */
a:not([class]) { color: var(--accent-text); text-decoration-color: var(--accent-line); }
a:not([class]):hover { text-decoration-color: var(--accent-text); }
img, svg { display: block; }
button, input, select { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }
html { scrollbar-color: var(--surface-4) var(--bg); }

/* Icons: the sprite in icons.svg, sized by font size, colored by the text. */
.i { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; }

.num, table td, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-weight: 600; letter-spacing: 0.01em; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.up { color: var(--up); }
.down { color: var(--down); }
.mid { color: var(--mid); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 50; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--inverse); color: var(--on-inverse); font-size: 14px; text-decoration: none; }
.skip:focus { top: 10px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 16px; } }

/* Navigation: the mark and name, the three tools, the data date and a search that opens any report. */
.nav {
  position: sticky; top: 0; z-index: 20; height: var(--nav-h);
  background: rgba(10, 10, 12, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand-mark { width: 24px; height: 24px; flex: none; }
.brand-name { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.brand-long { color: var(--text-3); font-size: 13px; padding-left: 10px; border-left: 1px solid var(--line-2); line-height: 16px; }
/* The tools fill the header's height, the current one underlined in the accent along its bottom edge. */
.nav-links { display: flex; gap: 4px; align-self: stretch; }
.nav-links a {
  display: flex; align-items: center; padding: 0 10px; text-decoration: none; color: var(--text-2); font-size: 14px;
  box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s; white-space: nowrap;
}
.nav-links a:hover { color: var(--text); box-shadow: inset 0 -2px 0 var(--line-3); }
.nav-links a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent-text); }
.nav-links a:focus-visible { outline-offset: -4px; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-meta { font-size: 13px; color: var(--text-3); white-space: nowrap; }
/* What the data is: end-of-day figures from a date, never live. Stale data says how old it is, in the warning's red. */
.data-status {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: var(--r-ctl);
  border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; white-space: nowrap; cursor: default;
}
.data-status .ds-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); flex: none; }
/* Stale data: the words stay neutral and only the warning's icon is red, as on the warning flag. */
.data-status.stale { color: var(--text); border-color: var(--line-3); }
.data-status .i { font-size: 13px; color: var(--down); }
.stale-note { color: var(--text); }
.stale-note .i { color: var(--down); }
.data-status:empty { display: none; }
.nav-search { width: 260px; }
.nav-search .input { height: 34px; font-size: 13.5px; padding-left: 34px; padding-right: 34px; background: var(--surface); }
.nav-search .field > .i { left: 11px; font-size: 15px; }
.nav-search kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 400 11px/1 var(--mono); color: var(--text-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px;
}
.nav-search .input:focus + kbd, .nav-search .input:not(:placeholder-shown) + kbd { display: none; }
@media (max-width: 1100px) { .brand-long { display: none; } .nav-search { width: 200px; } }
@media (max-width: 900px) { .nav-meta, .data-status { display: none; } }
@media (max-width: 760px) {
  .nav .wrap { gap: 12px; }
  .nav-search { display: none; }
  .nav-links { margin-left: auto; gap: 0; }
  .nav-links a { padding: 0 8px; font-size: 13.5px; }
  .nav-end { display: none; }
}
@media (max-width: 420px) { .nav-links a { padding: 0 6px; font-size: 13px; } }
@media (max-width: 360px) { .nav .brand-name { display: none; } }

/* Type: one scale. Headings in sentence case; space above a heading is larger than below. */
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
h1, h2 { font-stretch: 92%; }
h1 { font-size: clamp(26px, 2.6vw, 33px); line-height: 1.12; letter-spacing: -0.028em; }
h2 { font-size: clamp(21px, 2.1vw, 25px); line-height: 1.2; letter-spacing: -0.022em; }
h3 { font-size: 16px; line-height: 1.35; letter-spacing: -0.012em; }
h4 { font-size: 13px; line-height: 1.4; color: var(--text-2); font-weight: 600; letter-spacing: 0; }
p { margin: 0; }
.lede { font-size: 16px; color: var(--text-2); max-width: 64ch; line-height: 1.55; }
.small { font-size: 13px; }
.page-head { padding: 40px 0 24px; }
.page-head .lede { margin-top: 10px; }

/* Claim and proof: a short claim on the left, the live figures that back it on the right. */
.claim-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 48px; padding: 30px 0 20px; }
.claim-head > div { display: contents; }
.claim-head h1 { grid-column: 1 / -1; }
.claim-head .lede { grid-column: 1; }
.claim-head .source-line { grid-column: 1; grid-row: 3; margin-top: 4px; }
.claim-head .proof-line { grid-column: 2; grid-row: 2; }
.claim-head .lede { margin-top: 0; }
.claim-head h1 { text-wrap: pretty; }
.proof-line { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 13px; color: var(--text-3); }
.proof-line div { display: flex; flex-direction: column; gap: 1px; }
.proof-line dt { order: 2; }
.proof-line dd { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* The header shows the data's date on wide screens; below that the claim's proof line does. */
.proof-date { display: none !important; }
@media (max-width: 900px) { .proof-date { display: block !important; } .proof-line .proof-date { display: flex !important; } }
.date-line { font-size: 13px; color: var(--text-3); }
/* Where a page's figures come from and when (common.js): end-of-day prices, the filings' day, the update's time. */
.source-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.source-line > span { display: inline-flex; align-items: center; gap: 6px; }
.proof-line dd.up { color: var(--up); }
.proof-line dd.down { color: var(--down); }
@media (max-width: 860px) {
  .claim-head { grid-template-columns: 1fr; padding: 22px 0 16px; }
  .claim-head .proof-line { grid-column: 1; grid-row: auto; margin-top: 6px; gap: 6px 18px; }
  .claim-head .lede { font-size: 15px; }
  .proof-line dd { font-size: 14px; }
}

/* Section heads: a heading, its count or date beside it, one line under it. */
.sec { margin-top: 72px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 12px; }
.sec-head .count { color: var(--text-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.sec-lede { color: var(--text-2); font-size: 14.5px; max-width: 76ch; margin: 0 0 16px; }

/* Buttons: the primary is the accent; the rest are hairline outlines. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--r-ctl);
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; background: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--inverse); color: var(--on-inverse); }
.btn-primary:hover { background: var(--inverse-hover); }
.btn-ghost { color: var(--text); border-color: var(--line-2); font-weight: 400; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line-3); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn .i { font-size: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; text-decoration: none; }
.text-link .i { font-size: 15px; transition: transform .2s var(--ease); }
.text-link:hover .i { transform: translateX(2px); }
.text-link:hover { text-decoration: underline; text-decoration-color: var(--line-3); }

/* Inputs and the ticker search */
.field { position: relative; }
.input {
  width: 100%; height: 44px; padding: 0 14px 0 40px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  outline: none; transition: border-color .15s, background .15s; font-size: 15px;
}
.input::placeholder { color: var(--text-3); }
.input:hover { border-color: var(--line-3); }
.input:focus { border-color: var(--text-2); background: var(--surface-2); }
.field > .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 17px; pointer-events: none; }
.search-row { display: flex; gap: 8px; }
.search-row .field { flex: 1; }
.search-row .btn { height: 44px; }

.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 300px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-frame);
  padding: 4px; box-shadow: var(--shadow-pop); display: none; max-height: 360px; overflow: auto;
}
.nav-search .suggest { left: auto; width: 380px; }
.suggest.open { display: block; }
.suggest [role="option"] {
  width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: var(--r-ctl); cursor: pointer; font-size: 14px;
}
.suggest [role="option"]:hover, .suggest [role="option"][aria-selected="true"] { background: var(--surface-4); }
.suggest .s-sym { font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.01em; }
.suggest .s-name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest .s-sec { color: var(--text-3); font-size: 12px; white-space: nowrap; }
/* On the highlighted row's lighter surface Slate Label falls under 4.5:1, so the sector takes the name's color. */
.suggest [role="option"]:hover .s-sec, .suggest [role="option"][aria-selected="true"] .s-sec { color: var(--text-2); }
.suggest .s-empty { padding: 10px; color: var(--text-3); font-size: 14px; }
/* On a phone the sector moves under the name, so a long name isn't cut to a few letters. */
@media (max-width: 520px) {
  .suggest [role="option"] { grid-template-columns: 56px minmax(0, 1fr); row-gap: 1px; }
  .suggest .s-sec { grid-column: 2; }
}

/* Pills: a sector or tier choice with its count. */
.pills { position: relative; display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px; border-radius: var(--r-ctl);
  background: transparent; border: 1px solid var(--line-2); color: var(--text-2);
  font-size: 13px; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background .15s;
}
.pill:hover { color: var(--text); border-color: var(--line-3); }
.pill[aria-pressed="true"] { background: var(--accent-dim); color: var(--text); border-color: var(--accent-text); }
.pill .count { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-3); }
.pill[aria-pressed="true"] .count { color: var(--accent-text); }
.pill.pill-empty:not([aria-pressed="true"]) { color: var(--text-3); border-color: var(--line); }
.pill[disabled] { opacity: .45; cursor: default; }
@media (max-width: 720px) {
  /* 4px of padding holds a pill's focus ring (2px, 2px out), and the negative margins keep the pills where they were.
     The scroll padding stops a pill brought into view clear of the faded right edge. */
  .pills.scroll {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -2px calc(-1 * var(--gutter)) -2px -4px; padding: 4px 40px 4px 4px;
    scroll-padding-inline: 4px 40px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  .pills.scroll::-webkit-scrollbar { display: none; }
}

/* Segmented control and select */
.seg-field { display: inline-flex; align-items: center; gap: 8px; }
.seg-label, .label-inline { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-ctl); border: 1px solid var(--line-2); }
.seg-btn {
  height: 26px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--text-2);
  font-size: 13px; cursor: pointer; white-space: nowrap; transition: color .15s, background .15s;
}
.seg-btn:hover { color: var(--text); background: var(--surface-2); }
.seg-btn[aria-pressed="true"] { background: var(--accent-dim); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.label-inline { display: inline-flex; align-items: center; gap: 8px; }
.select {
  height: 32px; padding: 0 30px 0 11px; border-radius: var(--r-ctl); background-color: transparent;
  border: 1px solid var(--line-2); color: var(--text); font-size: 13px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c879a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.select:hover { border-color: var(--line-3); }
.select option { background: var(--surface-2); color: var(--text); }

/* Tags: a short word with meaning. */
.tag {
  display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 7px;
  border-radius: var(--r-tag); font-size: 12px; font-weight: 600; white-space: nowrap; letter-spacing: 0;
  background: var(--surface-3); color: var(--text-2);
}
.tag-up { background: var(--up-dim); color: var(--up); }
.tag-down { background: var(--down-dim); color: var(--down); }
.tag-mid { background: var(--mid-dim); color: var(--mid); }
.tag-solid { background: var(--accent-dim); color: var(--accent-text); }
.tag-line { background: transparent; border: 1px solid var(--line-3); color: var(--text-2); }
.debt-word { color: var(--text); white-space: nowrap; }
.debt-word.low { color: var(--text-2); }

/* Flags: a small icon tile in its meaning's tone. */
/* Flags are context, not verdicts: neutral tiles told apart by their icons; only the warning's icon is red. */
.flag {
  width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; border-radius: var(--r-tag);
  background: var(--surface-2); color: var(--text-2); font-size: 13px; box-shadow: inset 0 0 0 1px var(--line-2);
}
.flag .i { width: 14px; height: 14px; }
.flag-down { color: var(--down); }
.flag-set { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.flag-more { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Frames: the one container. A hairline border, an 8px corner, no shadow. */
.frame, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-frame); }
.panel-pad { padding: 20px; }
@media (max-width: 640px) { .panel-pad { padding: 16px; } }

/* Tables */
.table-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--surface); }
.table-wrap.scrolls { overflow-x: auto; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.data caption { text-align: left; }
/* Only the table's own cells: a table nested in one (a row's ledger) keeps its own styles. */
table.data > thead > tr > th {
  text-align: right; font-weight: 400; color: var(--text-3); font-size: 12px; line-height: 1.3;
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--bg-raise);
}
table.data > thead > tr > th:first-child { border-top-left-radius: var(--r-frame); }
table.data > thead > tr > th:last-child { border-top-right-radius: var(--r-frame); }
table.data > thead > tr > th.txt, table.data > tbody > tr > td.txt, table.data > thead > tr > th:first-child, table.data > tbody > tr > td:first-child { text-align: left; }
table.data > tbody > tr > td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data > tbody > tr:last-child > td { border-bottom: 0; }
table.data th .sort {
  all: unset; position: relative; cursor: pointer; display: inline-flex; gap: 3px; align-items: center; color: inherit; border-radius: 3px;
}
/* A right-aligned column's sort arrow hangs to the left of its name, so it takes no width from the column. */
table.data th:not(.txt) .sort .i { position: absolute; right: calc(100% + 1px); top: 50%; transform: translateY(-50%); }
table.data th .sort:hover { color: var(--text); }
table.data th .sort:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
table.data th .sort .i { width: 13px; height: 13px; opacity: 0; transition: opacity .15s; }
table.data th .sort:hover .i, table.data th[aria-sort] .sort .i { opacity: 1; }
table.data th[aria-sort] { color: var(--text); }
.co { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.co .sym { font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.01em; color: var(--text); }
.co .nm { color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sym { text-decoration: none; }
a.sym:hover { text-decoration: underline; text-decoration-color: var(--line-3); }

/* The score tape: ten slots, each as wide as its part's maximum points, filled to the points it earned. */
.tape { display: grid; gap: 2px; height: 8px; width: 100%; }
.tape > span { position: relative; background: var(--tape-track); border-radius: 1px; overflow: hidden; }
.tape > span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); background: var(--score); }
.tape-lg { height: 10px; gap: 2px; }
.score { display: flex; align-items: center; gap: 10px; }
.score b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 22px; letter-spacing: -0.01em; }
.score .tape { width: 120px; }

/* Meter: a health measure from 1 to 100, colored by its band. */
.meter { display: flex; align-items: center; gap: 10px; }
.meter-track { position: relative; height: 4px; flex: 1; min-width: 60px; background: var(--tape-track); border-radius: 2px; overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--text-2); }
.meter-fill.strong { background: var(--up); }
.meter-fill.fair { background: var(--tape); }
.meter-fill.weak { background: var(--down); }
.meter-val { font-variant-numeric: tabular-nums; font-size: 13px; width: 26px; text-align: right; color: var(--text); }
.meter-none { font-size: 13px; color: var(--text-3); }

/* States */
.skeleton { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; border-radius: var(--r-ctl); }
@media (prefers-reduced-motion: no-preference) { .skeleton { animation: shimmer 1.4s linear infinite; } }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { padding: 40px 24px; text-align: center; color: var(--text-2); font-size: 14.5px; }
/* An empty state straight under the page's h1 titles itself with an h2, styled as the h3 one inside a section. */
.empty h2, .empty h3 { font-size: 16px; line-height: 1.35; letter-spacing: -0.012em; font-stretch: 100%; color: var(--text); margin-bottom: 6px; }
.empty p { max-width: 62ch; margin: 0 auto; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-frame); background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: 13.5px; }
.notice > .i { font-size: 17px; color: var(--text-3); margin-top: 1px; }
.notice a { color: var(--text); }

/* Disclosure: a summary line that opens to the full explanation. */
details.disclose { border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--surface); }
details.disclose > summary { list-style: none; cursor: pointer; padding: 13px 16px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; border-radius: var(--r-frame); }
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary .lead-i { color: var(--text-3); font-size: 16px; }
details.disclose > summary .caret { margin-left: auto; color: var(--text-3); font-size: 16px; transition: transform .25s var(--ease); }
details.disclose[open] > summary .caret { transform: rotate(180deg); }
details.disclose > summary:hover { background: var(--surface-2); }
details.disclose .body { padding: 4px 16px 18px; }

/* Rule lists: a mark, a short name, the explanation. */
.rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rule-list li { padding: 11px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.rule-list li:first-child { border-top: 0; }
.rule-list li > .i { color: var(--text-3); margin-top: 2px; font-size: 15px; }
.rule-list b { font-weight: 600; display: block; color: var(--text); }
.rule-list li > div > span { color: var(--text-2); }
.rule-list.two { grid-template-columns: 1fr 1fr; column-gap: 32px; }
.rule-list.two li:nth-child(2) { border-top: 0; }
@media (max-width: 720px) { .rule-list.two { grid-template-columns: 1fr; } .rule-list.two li:nth-child(2) { border-top: 1px solid var(--line); } }

/* A screener result's ledger (ledger.js): its points part by part, the rules with its own figures, its flags. */
.ledger {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, 0.85fr);
  gap: 32px; padding: 20px 22px 24px;
}
.ledger-col { min-width: 0; }
.ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; min-height: 26px; }
.ledger-head h4 { font-size: 12.5px; color: var(--text-3); }
.ledger-total { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ledger-total b { font-size: 22px; color: var(--text); font-weight: 600; letter-spacing: -0.02em; margin-right: 2px; }
.ledger .tape-lg { margin-bottom: 12px; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ledger-table th, .ledger-table td {
  padding: 6px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; white-space: normal; vertical-align: baseline;
}
.ledger-table th { color: var(--text); padding-right: 12px; width: 34%; }
.ledger-table.rules th { width: 44%; }
.ledger-table.rules td.in { padding-right: 10px; }
.ledger-table td.in { color: var(--text-2); padding-right: 12px; }
.ledger-table td.pt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; width: 92px; }
.ledger-table .pt b { font-weight: 600; }
.ledger-table .pt .of { color: var(--text-3); }
.pt-bar { display: inline-block; position: relative; width: 30px; height: 4px; margin-right: 8px; vertical-align: 2px; background: var(--tape-track); border-radius: 1px; overflow: hidden; }
.pt-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); background: var(--score); }
.ledger-table tr.zero th, .ledger-table tr.zero td.in, .ledger-table tr.zero .pt b { color: var(--text-3); }
.ledger-table tfoot th, .ledger-table tfoot td { border-top: 1px solid var(--line-3); padding-top: 8px; font-weight: 600; color: var(--text); }
.ledger-table tfoot td.in { font-weight: 400; color: var(--text-3); }
.ledger-table.rules th { padding-left: 22px; position: relative; }
.ledger-table.rules .ok { position: absolute; left: 0; top: 7px; color: var(--up); font-size: 14px; }
.ledger-table.rules td.lim { color: var(--text-3); text-align: right; white-space: nowrap; }
.ledger-note { font-size: 12.5px; color: var(--text-3); margin-top: 10px; }
.flag-names { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 13px; }
.flag-names li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.flag-names b { display: block; font-weight: 600; color: var(--text); }
.flag-names span { color: var(--text-2); }
.ledger-notes { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 13px; color: var(--text-2); }
.ledger-go { margin-top: 18px; }
@media (max-width: 1100px) { .ledger { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ledger-side { grid-column: 1 / -1; } }

@media (max-width: 720px) { .ledger { grid-template-columns: 1fr; gap: 24px; padding: 16px 14px 18px; } }

/* Footer */
.foot { margin-top: 112px; border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--text-3); font-size: 13px; }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; }
.foot p { max-width: 72ch; }
.foot p + p { margin-top: 8px; }
.foot .foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); margin-bottom: 10px; font-weight: 600; }
.foot .foot-brand .brand-mark { width: 18px; height: 18px; }
.foot nav { display: flex; gap: 8px 20px; justify-content: flex-end; flex-wrap: wrap; align-content: start; }
.foot nav a { color: var(--text-2); text-decoration: none; }
.foot nav a:hover { color: var(--text); }
@media (max-width: 720px) { .foot .wrap { grid-template-columns: 1fr; } .foot nav { justify-content: flex-start; } }

/* Motion: content is always visible; each page has one authored moment (the screener's ledger unfolding, the insider
   feed's next page arriving, the report's price marker), all on --ease. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0s !important; } }