/* The company report (report.html). Built on app.css: its tokens, frames, tables, tags, meter, disclosure and the
   screener's ledger. Every color here is a token; green and red only carry a figure's sign. */

/* ---- Search, and the start page ---- */
.report-search { padding-top: 18px; max-width: 520px; }
.report-search .input, .report-search .search-row .btn { height: 40px; }
.report-search.is-start { max-width: 620px; padding-top: 26px; }
.report-search.is-start .input, .report-search.is-start .search-row .btn { height: 48px; }
.r-start { padding-top: 56px; }
.r-start h1:focus { outline: none; }
.r-start .lede { margin-top: 12px; }
.r-pop { margin-top: 40px; }
.r-pop h2 { font-size: 13px; line-height: 1.4; font-weight: 400; letter-spacing: 0; color: var(--text-3); margin-bottom: 10px; }
.r-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 13px; border: 1px solid var(--line-2);
  border-radius: var(--r-ctl); text-decoration: none; font-size: 14px; transition: border-color .15s, background .15s;
}
.chip:hover { border-color: var(--line-3); background: var(--surface-2); }
.chip .sym { font-family: var(--mono); font-weight: 600; font-size: 13px; }
.chip .nm { color: var(--text-2); }

/* ---- Header: the company on the left, its price and size on the right ---- */
.r-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 48px;
  padding: 26px 0 22px; border-bottom: 1px solid var(--line);
}
.r-name { font-size: clamp(26px, 2.8vw, 34px); }
.r-name:focus { outline: none; }
.r-tk { font-family: var(--mono); font-weight: 600; font-size: 0.7em; letter-spacing: -0.01em; color: var(--text-2); margin-right: 0.18em; }
.r-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 10px; font-size: 14px; color: var(--text-2); }
.r-where > span + span::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 12px; background: var(--line-3); vertical-align: -1px; }
.r-pass { margin-left: 14px; text-decoration: none; }
.r-pass .i { width: 13px; height: 13px; }
.r-pass:hover { box-shadow: inset 0 0 0 1px currentColor; }
.r-proof { align-items: flex-end; gap: 6px 28px; }
.r-proof .r-px dd { font-size: 30px; line-height: 1.05; letter-spacing: -0.025em; }
/* Where the figures come from and when (common.js), across the header under the name and price. */
.r-source { grid-column: 1 / -1; margin-top: 2px; }
@media (max-width: 860px) {
  .r-head { grid-template-columns: 1fr; padding: 20px 0 18px; }
  .r-proof .r-px dd { font-size: 26px; }
}
@media (max-width: 520px) {
  .r-pass { margin-left: 0; margin-top: 4px; }
  .r-where > .r-pass { flex-basis: auto; }
}

/* ---- Fair value and price, side by side ---- */
.r-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 16px; margin-top: 20px; align-items: start; }
@media (max-width: 960px) { .r-grid { grid-template-columns: minmax(0, 1fr); } }

.r-verdict { padding: 22px 24px 0; overflow: hidden; }
.r-verdict.is-none { padding-bottom: 22px; }
.r-verdict.is-none:has(.v-how) { padding-bottom: 0; }
.v-word { font-size: clamp(28px, 2.9vw, 36px); line-height: 1.08; letter-spacing: -0.03em; }
.v-line { margin-top: 10px; color: var(--text-2); font-size: 15px; max-width: 62ch; }
.v-line b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.v-line b.up { color: var(--up); }
.v-line b.down { color: var(--down); }
.is-none .v-line { font-size: 14.5px; }

/* The range on its price scale. Labels are placed by report.js fitRange(); these are their places without it. */
.rv { position: relative; height: 70px; margin: 22px 0 16px; font-variant-numeric: tabular-nums; }
.rv.rv-stack { height: 90px; }
.rv-px, .rv-lo, .rv-hi { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; line-height: 18px; }
.rv-px { top: 0; color: var(--text); font-weight: 600; }
.rv-lo, .rv-hi { top: 50px; color: var(--text-2); }
.rv-stack .rv-hi { top: 70px; }
.rv-track { position: absolute; left: 0; right: 0; top: 30px; height: 12px; }
.rv-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-3); }
.rv-band { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--tape-track); box-shadow: inset 0 0 0 1px var(--line-3); }
.rv-mid { position: absolute; top: 2px; bottom: 2px; width: 1px; margin-left: -0.5px; background: var(--text-2); }
.rv-gap { position: absolute; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; transform-origin: left center; }
.rv-gap.down { background: var(--down); }
.rv-gap.up { background: var(--up); }
.rv-gap.from-right { transform-origin: right center; }
.rv-gap.up:not(.from-right) { transform-origin: left center; }
.rv-mark { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); }
/* The one moment of motion on the page: the price marker travels from the fair value's midpoint to today's price,
   drawing the gap the verdict line states. Without motion (or before it runs) everything sits in its final place. */
@media (prefers-reduced-motion: no-preference) {
  .rv-mark { animation: rv-travel 1.1s var(--ease); }
  .rv-gap { animation: rv-draw 1.1s var(--ease); }
  @keyframes rv-travel { from { left: var(--from); } }
  @keyframes rv-draw { from { transform: scaleX(0); } }
}

.v-methods { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.v-methods li { padding: 11px 0 12px; border-bottom: 1px solid var(--line); }
.m-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
.m-name { font-weight: 600; }
.m-name .tag { margin-left: 6px; vertical-align: 1px; }
.m-v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-methods p { margin-top: 3px; font-size: 13px; color: var(--text-2); max-width: 78ch; }
.v-methods li.ref .m-name, .v-methods li.ref .m-v { color: var(--text-2); font-weight: 400; }
.v-fine { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.v-fine a { color: var(--text-2); }
.r-note { margin-top: 14px; }
.r-note > .i { margin-top: 2px; }
/* The explanation is the frame's last row, not a frame inside it. */
.r-verdict details.v-how { margin: 18px -24px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.r-verdict details.v-how > summary { padding: 13px 24px; border-radius: 0; }
.r-verdict details.v-how .body { padding: 0 24px 18px; }
/* The frame clips what lies outside it, so the focus ring is drawn inside the row, following the frame's rounded
   bottom corners while the explanation is closed. */
.r-verdict details.v-how > summary:focus-visible { outline-offset: -2px; }
.r-verdict details.v-how:not([open]) > summary { border-radius: 0 0 calc(var(--r-frame) - 1px) calc(var(--r-frame) - 1px); }
.how-list { list-style: none; margin: 0; padding: 0; }
.how-list li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.how-list li:first-child { border-top: 0; padding-top: 2px; }
.how-list b { display: block; font-weight: 600; }
.how-list span { display: block; margin-top: 3px; color: var(--text-2); max-width: 80ch; }

/* Price: weekly closes, the first close as a dotted line, the latest as a dot. It stays beside the fair value while
   that is read on a wide screen. */
.r-price { padding: 20px 22px 18px; position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 960px) { .r-price { position: static; } }
.p-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.p-head h2 { font-size: 16px; line-height: 1.35; letter-spacing: -0.012em; }
.p-chg { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-over { font-size: 13px; font-weight: 400; color: var(--text-3); }
.pc { margin: 16px 0 0; }
.pc-plot { position: relative; height: 170px; }
.pc-svg { width: 100%; height: 100%; overflow: visible; }
.pc-line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.pc-svg.up .pc-line { stroke: var(--up); }
.pc-svg.down .pc-line { stroke: var(--down); }
.pc-svg.up .pc-stop { stop-color: var(--up); }
.pc-svg.down .pc-stop { stop-color: var(--down); }
.pc-base { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 2 4; }
.pc-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); }
.pc-dot.up { background: var(--up); }
.pc-dot.down { background: var(--down); }
.pc-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pc-foot span { display: flex; flex-direction: column; gap: 1px; }
.pc-foot small { font-size: 12px; color: var(--text-3); }
.pc-foot .pc-end { text-align: right; align-items: flex-end; }
.p-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; border-top: 1px solid var(--line); }
.p-stats div { padding: 12px 0 0; }
.p-stats div + div { padding-left: 14px; border-left: 1px solid var(--line); margin-left: -1px; }
.p-stats div:not(:first-child) { padding-left: 14px; }
.p-stats dt { font-size: 12.5px; color: var(--text-3); }
.p-stats dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.p-stats dd.up { color: var(--up); }
.p-stats dd.down { color: var(--down); }
.p-note { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.r-grid.is-none { grid-template-columns: minmax(0, 1fr); }
.r-grid.is-none .r-price { position: static; }
@media (min-width: 900px) {
  .r-grid.is-none .r-price { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; column-gap: 40px; }
  .r-grid.is-none .p-head { grid-column: 1; grid-row: 1; }
  .r-grid.is-none .pc, .r-grid.is-none .r-none { grid-column: 1; grid-row: 2; }
  .r-grid.is-none .p-side { grid-column: 2; grid-row: 1 / span 2; }
  .r-grid.is-none .p-stats { grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 0; }
  .r-grid.is-none .p-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0 !important; margin: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .r-grid.is-none .p-stats div:first-child { padding-top: 2px !important; }
}
.r-none { margin-top: 14px; color: var(--text-2); font-size: 14px; max-width: 70ch; }

/* ---- The sections below, and the rail of links to them ---- */
.r-rail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 24px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--bg-raise);
}
.r-rail-l { font-size: 12.5px; color: var(--text-3); margin: 0 8px 0 4px; }
.r-rail a { padding: 5px 9px; border-radius: var(--r-ctl); font-size: 13px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.r-rail a:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 720px) {
  .r-rail {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: 40px;
    scroll-padding-inline: 8px 40px; /* a link brought into view by keyboard focus stops clear of the faded edge */
    border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  .r-rail::-webkit-scrollbar { display: none; }
  .r-rail-l { white-space: nowrap; }
}
#main .sec { margin-top: 64px; }
/* html's scroll-padding-top already clears the sticky header; app.css's [id] scroll-margin would add it twice. */
#main [id] { scroll-margin-top: 0; }
#main section[tabindex="-1"]:focus { outline: none; }
.r-fine { margin-top: 12px; font-size: 12.5px; color: var(--text-3); max-width: 96ch; }
.r-fine a { color: var(--text-2); }
.r-go { margin: -6px 0 16px; }

/* Tables on the report: table.data, with a row header in the first column that stays put when the table scrolls. */
.r-table > tbody > tr > th, .r-table > tfoot > tr > th {
  text-align: left; font-weight: 400; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle;
}
.r-table > tbody > tr:last-child > th { border-bottom: 0; }
.r-table > tfoot > tr > th, .r-table > tfoot > tr > td { border-top: 1px solid var(--line-3); border-bottom: 0; padding: 10px 12px; }
.r-table > tfoot > tr > td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-table > thead > tr > th:first-child, .r-table > tbody > tr > th, .r-table > tfoot > tr > th { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.r-table > thead > tr > th:first-child { background: var(--bg-raise); }
.table-wrap.scrolls { overflow-x: auto; }
.r-table td small, .r-table th small { display: block; font-size: 11.5px; color: var(--text-3); }
.r-table .co { line-height: 1.3; }
.r-table .co .nm { max-width: 340px; white-space: normal; overflow: visible; }
.r-table .sym-plain { font-weight: 600; font-size: 13px; }
.r-table td.faint { color: var(--text-3); }
a.peer-link { text-decoration: none; }
a.peer-link:hover .sym { text-decoration: underline; text-decoration-color: var(--line-3); }
a.peer-link:hover .nm { color: var(--text); }
.r-table.peers > tbody > tr:not(.self):hover > * { background: var(--surface-2); }
.r-table.peers > tbody > tr.self > * { background: var(--surface-2); }
.r-table.peers > tbody > tr.self .nm { color: var(--text-3); }
.r-table > tfoot > tr:last-child > th { border-bottom-left-radius: var(--r-frame); }
.r-table > tfoot > tr:last-child > td:last-child { border-bottom-right-radius: var(--r-frame); }
@media (max-width: 640px) {
  .r-table .co .nm { max-width: 150px; }
  .r-table > thead > tr > th, .r-table > tbody > tr > td, .r-table > tbody > tr > th, .r-table > tfoot > tr > * { padding-left: 9px; padding-right: 9px; }
}

/* ---- Screener score: the screener's ledger, on the raised ground it has there ---- */
.r-ledger { background: var(--bg-raise); overflow: hidden; }
.r-ledger .ledger { position: static; animation: none; }
.r-ledger .ledger-head h3 { font-size: 12.5px; line-height: 1.4; font-weight: 600; letter-spacing: 0; color: var(--text-3); }

/* ---- Revenue by quarter: columns on wide screens, one row per quarter on phones (the same markup). Bars grow from
   the zero line: --base is its height in the plot (or, in rows, its distance from the left) and --h the bar's length. */
.q-panel { padding: 22px 24px 22px; --plot-h: 200px; }
.q-panel:has(> details.q-table) { padding-bottom: 0; }
.qc-fig { margin: 0; }
.qc { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.qc-axis { position: relative; height: var(--plot-h); font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.qc-axis span { position: absolute; right: 10px; transform: translateY(50%); white-space: nowrap; }
.qc-plot { position: relative; min-width: 0; }
.qc-grids { position: absolute; left: 0; right: 0; top: 0; height: var(--plot-h); pointer-events: none; }
.qc-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.qc-grid.zero { background: var(--line-3); }
.qc-cols { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.qc-col { position: relative; display: grid; grid-template-rows: var(--plot-h) auto auto; justify-items: center; }
.qc-area { position: relative; width: 100%; height: 100%; }
.qc-bar {
  position: absolute; left: 50%; width: min(24px, 64%); transform: translateX(-50%); bottom: var(--base); height: var(--h);
  background: var(--text-3); border-radius: 3px 3px 0 0; transition: background .15s;
}
.qc-bar.neg { bottom: auto; top: calc(100% - var(--base)); border-radius: 0 0 3px 3px; background: var(--down); }
.qc-col.derived .qc-bar { background: transparent; box-shadow: inset 0 0 0 1px var(--text-3); }
.qc-col:hover .qc-bar { background: var(--text-2); }
.qc-col.derived:hover .qc-bar { background: var(--surface-4); box-shadow: inset 0 0 0 1px var(--text-2); }
.qc-na { position: absolute; left: 0; right: 0; bottom: calc(var(--base, 0%) + 6px); text-align: center; font-size: 11px; color: var(--text-3); }
.qc-x { margin-top: 8px; font-size: 11.5px; line-height: 1.3; color: var(--text-3); text-align: center; white-space: nowrap; }
.qc-x b { display: block; font-weight: 600; color: var(--text-2); }
.qc-yoy { margin-top: 4px; min-height: 18px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qc-yoy.up { color: var(--up); }
.qc-yoy.down { color: var(--down); }
.qc-yoy.adj { text-decoration: underline dotted; text-underline-offset: 3px; }
.qc-val { display: none; }
.qc-tip {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 5; width: 232px; padding: 10px 12px;
  display: none; pointer-events: none; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  box-shadow: var(--shadow-pop); font-size: 12.5px; line-height: 1.45; color: var(--text-2); text-align: left;
}
.qc-tip.left { left: 0; transform: none; }
.qc-tip.right { left: auto; right: 0; transform: none; }
.qc-tip b { display: block; font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.qc-tip span { display: block; margin-top: 3px; }
.qc-col:hover { z-index: 4; }
.qc-col:hover .qc-tip { display: block; }
.qc-cap { margin-top: 14px; font-size: 13.5px; color: var(--text-2); max-width: 90ch; }
.qc-note { margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
.qc-stale { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px; color: var(--mid); }
.qc-stale .i { margin-top: 2px; }
.qc-keys { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.qc-keys li { display: flex; align-items: baseline; gap: 8px; }
.qk { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 2px; transform: translateY(1px); }
.qk.derived { box-shadow: inset 0 0 0 1px var(--text-3); }
.qk.adj { width: 14px; height: 6px; border-radius: 0; border-bottom: 1px dotted var(--text-2); }
.qk.none { width: 14px; height: 1px; border-radius: 0; background: var(--line-3); transform: translateY(-3px); }
.q-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 28px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.q-stats dt { font-size: 12.5px; color: var(--text-3); }
.q-stats dd { margin: 0; }
.q-stats dd:not(.s) { margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.q-stats dd.s { margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.q-fine { margin-top: 12px; font-size: 12.5px; color: var(--text-3); max-width: 90ch; }
details.disclose.q-table { margin: 18px -24px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.q-table > summary { padding: 13px 24px; border-radius: 0; }
.q-table .body { padding: 0 24px 16px; }
.q-table .table-wrap { background: var(--surface); }
.q-table .r-table .tag { margin-left: 6px; }
@media (max-width: 900px) {
  .q-panel { --plot-h: 170px; }
  .qc-yoy, .qc-x { font-size: 11px; }
}
@media (max-width: 560px) {
  .q-panel { padding: 18px 16px 18px; }
  details.disclose.q-table { margin: 16px -16px 0; }
  .q-table > summary { padding: 13px 16px; }
  .q-table .body { padding: 0 16px 14px; }
  .qc { grid-template-columns: minmax(0, 1fr); }
  .qc-axis, .qc-grids, .qc-tip, .qc-na { display: none !important; }
  .qc-cols { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .qc-col {
    grid-template-rows: none; grid-template-columns: 70px minmax(0, 1fr) 62px 48px; grid-template-areas: "x area val yoy";
    align-items: center; justify-items: stretch; column-gap: 8px; min-height: 28px;
  }
  .qc-area { grid-area: area; height: 14px; }
  .qc-bar { left: var(--base); bottom: 0; top: 0; width: var(--h); height: auto; transform: none; border-radius: 0 3px 3px 0; }
  .qc-bar.neg { left: calc(var(--base) - var(--h)); top: 0; border-radius: 3px 0 0 3px; }
  .qc-x { grid-area: x; margin: 0; text-align: left; font-size: 12px; }
  .qc-x b { display: inline; margin-right: 6px; }
  .qc-val { grid-area: val; display: block; text-align: right; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .qc-col.blank .qc-val { color: var(--text-3); }
  .qc-yoy { grid-area: yoy; margin: 0; min-height: 0; text-align: right; font-size: 12px; }
  .q-stats { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ---- Financial history: the claim and its notes beside the table that proves it ---- */
.r-split { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 20px 40px; align-items: start; }
.r-split-text .sec-lede { margin-bottom: 12px; }
.r-fine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--text-3); }
@media (max-width: 960px) { .r-split { grid-template-columns: minmax(0, 1fr); } }
.r-table.fh > thead > tr > th { font-size: 12.5px; }
.r-table.fh > tbody > tr > td { vertical-align: bottom; padding-top: 11px; padding-bottom: 10px; }
.r-table.fh > tbody > tr > th { vertical-align: top; padding-top: 11px; color: var(--text); }
.fh-v { display: block; font-variant-numeric: tabular-nums; }
.fh-v.down { color: var(--down); }
.fh-bar { position: relative; display: block; width: 100%; height: 34px; margin-top: 6px; }
.fh-zero { position: absolute; left: 0; right: 0; height: 1px; margin-top: -0.5px; background: var(--line-2); }
.fh-fill { position: absolute; right: 0; width: 16px; min-height: 1px; background: var(--text-3); border-radius: 2px 2px 0 0; }
.fh-fill.neg { background: var(--down); border-radius: 0 0 2px 2px; }
.r-table.fh > tbody > tr > td.fh-na { vertical-align: top; }
.r-table.fh > thead > tr > th:not(:first-child), .r-table.fh > tbody > tr > td { min-width: 96px; }
@media (max-width: 640px) {
  .r-table.fh { font-size: 12px; }
  .r-table.fh > thead > tr > th:not(:first-child), .r-table.fh > tbody > tr > td { min-width: 0; padding-left: 2px; padding-right: 8px; }
  .r-table.fh > tbody > tr > th { white-space: normal; width: 64px; padding-right: 4px; line-height: 1.3; }
  .fh-fill { width: 12px; }
}

/* ---- Health check: six groups in one frame, hairline seams between them ---- */
.h-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px 36px; margin-bottom: 18px; }
.h-score { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.h-score b { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.h-of { color: var(--text-3); font-size: 14px; }
.h-score .tag { margin-left: 4px; align-self: center; }
.h-intro { font-size: 14px; color: var(--text-2); max-width: 82ch; }
@media (max-width: 720px) { .h-sum { grid-template-columns: minmax(0, 1fr); } }
.h-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.hg { padding: 18px 20px 6px; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); min-width: 0; }
.hg.is-context { background: var(--bg-raise); }
.hg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hg-head h3 { font-size: 15px; }
.hg-hint { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.hg .r-note { margin: 12px 0 0; font-size: 12.5px; padding: 10px 12px; }
.hb-list { list-style: none; margin: 12px 0 0; padding: 0; }
.hb { padding: 12px 0; border-top: 1px solid var(--line); }
.hb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; font-size: 13.5px; }
.hb-l { font-weight: 600; }
.hb-v { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb.is-none .hb-v { color: var(--text-3); }
.hb .meter-none { font-size: 12.5px; color: var(--text-2); }
.hb-n { margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
@media (max-width: 1100px) { .h-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .h-grid { grid-template-columns: minmax(0, 1fr); }
  .hg { padding: 16px 16px 4px; }
}

/* ---- Insider buying ---- */
.r-table.buyers .who { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.r-table.buyers > tbody > tr > th { white-space: normal; min-width: 220px; max-width: 340px; }
.r-table.buyers .who b { font-weight: 600; }
.r-table.buyers .who span { font-size: 12.5px; color: var(--text-2); }
.r-table.buyers > tbody > tr > td { vertical-align: top; }
.r-table.buyers .doc { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); text-decoration: none; font-size: 13px; }
.r-table.buyers .doc:hover { color: var(--text); }
.r-table.buyers .doc .i { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .r-table.buyers, .r-table.buyers > tbody { display: block; }
  .r-table.buyers > thead { display: none; }
  .r-table.buyers > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .r-table.buyers > tbody > tr:last-child { border-bottom: 0; }
  .r-table.buyers > tbody > tr > th { grid-column: 1 / -1; position: static; padding: 0; border: 0; background: transparent; }
  .r-table.buyers > tbody > tr > td { padding: 0; border: 0; text-align: left; white-space: normal; font-size: 13px; }
  .r-table.buyers > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--text-3); margin-bottom: 1px; }
  .r-table.buyers > tbody > tr > td.c-doc { grid-column: 1 / -1; }
  .r-table.buyers > tbody > tr > th { min-width: 0; max-width: none; }
}

/* ---- News: one row per headline; the whole row opens the story ---- */
.news { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.ni { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); transition: background .15s; }
.ni:first-child { border-top: 0; }
.ni:hover { background: var(--surface-2); }
.ni > .tag { justify-self: start; margin-top: 1px; }
.ni-t { font-weight: 600; font-size: 14.5px; line-height: 1.4; text-decoration: none; }
.ni-t::after { content: ""; position: absolute; inset: 0; }
.ni-t:focus-visible { outline: none; }
.ni:has(.ni-t:focus-visible) { box-shadow: inset 0 0 0 2px var(--text); }
.ni-why { margin-top: 3px; font-size: 13.5px; color: var(--text-2); }
.ni-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font-size: 12.5px; color: var(--text-3); }
@media (max-width: 560px) {
  .ni { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; }
}

/* ---- Sources and notes ---- */
#main .r-notes { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); }
.r-notes h2 { font-size: 14px; line-height: 1.4; letter-spacing: 0; color: var(--text-2); }
.r-notes ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--text-3); max-width: 100ch; }
.r-notes .r-note { margin: 10px 0 4px; }

/* ---- States ---- */
.r-skel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 26px 0 22px; border-bottom: 1px solid var(--line); }
.sk-h1 { width: min(380px, 70vw); height: 34px; }
.sk-line { width: min(260px, 50vw); height: 16px; margin-top: 12px; }
.sk-px { width: 160px; height: 46px; }
.sk-panel { height: 420px; border-radius: var(--r-frame); }
.sk-panel.sk-short { height: 320px; }
@media (max-width: 960px) { .sk-panel.sk-short { display: none; } }
.r-empty { margin-top: 32px; padding: 32px 28px; }
.r-empty h1 { font-size: clamp(22px, 2.2vw, 26px); }
.r-empty h1:focus { outline: none; }
.r-empty p { margin-top: 8px; color: var(--text-2); max-width: 66ch; }
.r-empty .btn { margin-top: 16px; }
@media (max-width: 640px) {
  .r-verdict { padding: 18px 16px 0; }
  .r-verdict.is-none { padding-bottom: 18px; }
  .r-verdict details.v-how { margin: 16px -16px 0; }
  .r-verdict details.v-how > summary { padding: 13px 16px; }
  .r-verdict details.v-how .body { padding: 0 16px 16px; }
  .r-price { padding: 16px 16px 16px; }
  .p-stats div:not(:first-child) { padding-left: 10px; }
  .p-stats dd { font-size: 15px; }
  .r-empty { padding: 24px 18px; }
}

/* On a phone the exchange and the sector take a line each, so no separator starts a wrapped line. */
@media (max-width: 480px) {
  .r-where { flex-direction: column; align-items: flex-start; gap: 2px; }
  .r-where > span + span::before { display: none; }
}

/* ---- Financials as small charts: one card per figure, three to a row, bars in the accent from zero (red below it),
   the latest value and its change on the one before over an axis of round steps. ---- */
.sec-head .fc-toggle { margin-left: auto; }
.fc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1000px) { .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fc-grid { grid-template-columns: minmax(0, 1fr); } }
.fc { margin: 0; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--surface); min-width: 0; --plot-h: 132px; }
.fc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fc-t { font-size: 14px; font-weight: 600; color: var(--text); }
.fc-p { font-size: 12px; color: var(--text-3); text-align: right; }
.fc-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 6px 0 12px; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fc-now b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.fc-now b.down { color: var(--down); }
.fc-chg { margin-left: auto; }
.fc-chg .up { color: var(--up); }
.fc-chg .down { color: var(--down); }
.fc-chart { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
.fc-axis { position: relative; height: var(--plot-h); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fc-axis span { position: absolute; right: 8px; transform: translateY(50%); white-space: nowrap; }
.fc-plot { position: relative; min-width: 0; }
.fc-grids { position: absolute; left: 0; right: 0; top: 0; height: var(--plot-h); pointer-events: none; }
.fc-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.fc-line.zero { background: var(--line-3); }
.fc-cols { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.fc-col { display: grid; grid-template-rows: var(--plot-h) auto; justify-items: center; min-width: 0; }
.fc-area { position: relative; width: 100%; height: 100%; }
.fc-bar {
  position: absolute; left: 18%; right: 18%; bottom: var(--base); height: var(--h); min-height: 1px;
  border-radius: 3px 3px 0 0; background: var(--score); transition: background .15s;
}
.fc-cols[style*="--n:4"] .fc-bar, .fc-cols[style*="--n:3"] .fc-bar, .fc-cols[style*="--n:2"] .fc-bar { left: 26%; right: 26%; }
.fc-bar.neg { bottom: auto; top: calc(100% - var(--base)); border-radius: 0 0 3px 3px; background: var(--down); }
.fc-col.hollow .fc-bar { background: transparent; box-shadow: inset 0 0 0 1px var(--score); }
.fc-col:hover .fc-bar { background: var(--accent-text); }
.fc-col:hover .fc-bar.neg { background: #ec8c87; }
.fc-na { position: absolute; left: 0; right: 0; bottom: calc(var(--base, 0%) + 6px); text-align: center; font-size: 10.5px; color: var(--text-3); }
.fc-x { margin-top: 6px; font-size: 11px; line-height: 1.25; color: var(--text-3); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-x small { display: block; font-size: 10.5px; color: var(--text-3); }
.fc-more { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-3); }
/* Every figure as a table, under the charts' notes: the table runs the frame's width, its hairline on top. */
.fh-details { margin-top: 16px; }
.fh-details .fh-bar { display: none; } /* the charts above draw these figures */
.fh-details .fh-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-frame) var(--r-frame); }

/* The price chart's span, under its heading. */
.p-spans { margin: 10px 0 2px; }
.p-spans .seg-btn:disabled { color: var(--text-3); opacity: .5; cursor: default; }