/* Tool pages: the screener and the insider buying page. */

/* ---- A tool page's head: its title, what it does and where its figures come from and when, the day's figures on the
   right (value above, name below, one frame split by hairline seams). The screener runs wider than the other pages,
   its filters in a sidebar beside the list. ---- */
.wide-page { --wrap: 1520px; }
.tool-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px; padding: 28px 0 22px; }
.tool-title .lede { margin-top: 8px; font-size: 15px; max-width: 92ch; }
@media (max-width: 960px) { .tool-head { grid-template-columns: minmax(0, 1fr); padding: 22px 0 18px; } }
.stat-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 1px; margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--line);
}
.stat-strip > div { display: flex; flex-direction: column; gap: 3px; padding: 11px 16px 12px; background: var(--surface); min-width: 0; }
.stat-strip dt { order: 2; font-size: 12.5px; color: var(--text-3); line-height: 1.3; }
.stat-strip dd { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-strip dd .of { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
@media (max-width: 960px) { .stat-strip { justify-self: stretch; grid-auto-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .stat-strip dd { font-size: 17px; } .stat-strip > div { padding: 10px 12px; } }

/* ---- Quick screens: ready-made sets of filters as pills with their counts, the chosen one's question under them. ---- */
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.presets .presets-label { font-size: 13px; font-weight: 400; color: var(--text-3); font-stretch: 100%; letter-spacing: 0; }
.presets-row { gap: 6px; }
.preset-note { flex-basis: 100%; font-size: 12.5px; color: var(--text-3); }
@media (max-width: 720px) {
  .presets { display: grid; gap: 8px; }
  .presets-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
  .presets-row::-webkit-scrollbar { display: none; }
  .presets-row .pill { flex: none; }
}

/* ---- The screener's two columns: the filters in a sidebar that stays in view (scrolling inside itself when taller
   than the screen), the results beside it. Under 1440px, where the list needs the width, the sidebar folds into a panel over it. ---- */
.screen-app { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.filters-side {
  position: sticky; top: calc(var(--nav-h) + 12px); max-height: calc(100vh - var(--nav-h) - 24px); overflow-y: auto;
  scrollbar-width: thin; display: grid; gap: 12px; align-content: start; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--surface);
}
.side-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.side-head h2 { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-stretch: 100%; letter-spacing: -0.01em; }
.side-head .reset { height: 28px; padding: 0 10px; }
.side-toggle { display: none; height: 28px; padding: 0 10px; }
/* How many filters are in use: a small solid count in the accent, absent while none is. */
.side-head h2 .count, .fgroup h3 .count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-tag);
  background: var(--accent); color: #ffffff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.side-head h2 .count:empty, .fgroup h3 .count:empty { display: none; }
.table-search { position: relative; min-width: 0; }
.table-search .input { height: 36px; }
.table-search .input::-webkit-search-cancel-button { filter: invert(0.6); cursor: pointer; }
.side-body { display: grid; gap: 14px; }
.fgroup { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.fgroup h3 { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.ff { display: grid; gap: 4px; min-width: 0; }
.ff label { font-size: 12px; line-height: 1.25; color: var(--text-3); }
.ff .select { width: 100%; height: 32px; min-width: 0; font-size: 12.5px; text-overflow: ellipsis; background-color: var(--bg-raise); }
.ff.on label { color: var(--text); }
.ff.on .select { border-color: var(--accent-text); background-color: var(--accent-dim); }
@media (max-width: 1439px) {
  .screen-app { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .filters-side { position: static; max-height: none; overflow: visible; }
  .side-toggle { display: inline-flex; }
  .filters-side:not(.open) .side-body { display: none; }
  .side-body { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; }
}
@media (max-width: 900px) { .side-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .side-body { grid-template-columns: minmax(0, 1fr); } }

/* ---- The results: the count, the column views and the sort over the filters in use as chips, then one frame
   holding the flags' key, the table and a status line saying what its figures are. ---- */
.results { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 34px; }
.results-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.result-count { color: var(--text-2); font-size: 14px; }
.result-count b { color: var(--text); font-weight: 600; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 7px 4px 10px; text-align: left; border: 1px solid var(--accent-line);
  border-radius: var(--r-ctl); background: var(--accent-dim); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.chip-k { color: var(--accent-text); }
.chip .i { font-size: 14px; color: var(--text-2); transition: color .15s; }
.chip:hover { border-color: var(--accent-text); }
.chip:hover .i { color: var(--text); }
/* The frame clips its corners without being a scroll box, so the table's names still stay under the site's header. */
.grid-card { border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--surface); overflow: clip; }
.grid-card > .result-meta { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.result-meta .flag-legend { margin: 0; }
.grid-card .table-wrap { border: 0; border-radius: 0; background: transparent; }
.grid-card table.data > thead > tr > th { border-radius: 0; }
.grid-empty { padding: 32px 20px; }
.empty-act { margin-top: 14px !important; }
.grid-status { list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); background: var(--bg-raise); }
.grid-status li {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-tag);
  background: var(--surface-3); color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .results-tools { width: 100%; }
  .results-tools .seg { display: flex; flex-wrap: wrap; width: 100%; }
  .results-tools .seg-btn { flex: 1 0 auto; }
}
/* The insider page's segmented controls stretch across a phone in equal columns, letting their labels wrap. */
@media (max-width: 720px) {
  .seg-field { width: 100%; flex-direction: column; align-items: flex-start; gap: 6px; }
  .seg-field .seg { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .seg-field .seg-btn { min-width: 0; height: auto; min-height: 34px; padding: 4px 6px; white-space: normal; line-height: 1.2; }
}

.flag-legend { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--text-3); }
.flag-legend li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.flag-legend .flag { width: 18px; height: 18px; }
.flag-legend .flag .i { width: 12px; height: 12px; }

/* Where the price sits in its 52-week range: the low and the high either side of a short track, a dot at the price. */
.range { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); }
.r-track { position: relative; width: 44px; height: 4px; border-radius: 2px; background: var(--tape-track); }
.r-dot { position: absolute; top: 50%; left: calc(var(--f, 0) * 100%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 2px var(--surface); }
.ind { display: inline-block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--text-2); }

/* ---- The ranked table: rows 35px tall, a seam between column names, the ticker as a chip beside its name. ---- */
.screen-table > thead > tr > th { border-right: 1px solid var(--line); }
.screen-table > thead > tr > th:last-child, .screen-table > thead > tr > th.c-rank { border-right: 0; }
/* Cells 8px apart and 6px tall-padded, the rank and the report link a little further from the frame. Above the phone
   layout only, which sets its own; table.data's own padding (app.css) is what these replace. */
@media (min-width: 721px) {
  table.data.screen-table > thead > tr > th, table.data.screen-table > tbody > tr.row > td { padding-left: 8px; padding-right: 8px; }
  table.data.screen-table > thead > tr > th { padding-top: 9px; padding-bottom: 9px; }
  table.data.screen-table > tbody > tr.row > td { padding-top: 6px; padding-bottom: 6px; }
  table.data.screen-table > tbody > tr.row > td.c-co { padding: 0; }
  table.data.screen-table > thead > tr > th.c-rank, table.data.screen-table > tbody > tr.row > td.c-rank { padding-left: 12px; }
  table.data.screen-table > thead > tr > th.c-go, table.data.screen-table > tbody > tr.row > td.c-go { padding-right: 10px; }
}
.screen-table > thead > tr > th:not(.txt) { white-space: nowrap; }
/* The score's parts are named in full, on two lines. */
.screen-table > thead > tr > th.part { white-space: normal; min-width: 72px; max-width: 110px; }
/* The Score view shows each part's points, so the score is its number alone there and the name gives way to the parts. */
.view-score .score .tape { display: none; }
.screen-table.view-score td.c-score { min-width: 0; }
.view-score .co .nm { max-width: 140px; }
.screen-table .th-sub { display: block; font-size: 11px; color: var(--text-3); }
.screen-table td.ink { color: var(--ink); }
.screen-table td .of { color: var(--text-3); font-size: 12px; }
.screen-table td.zero, .screen-table td.zero b { color: var(--text-3); font-weight: 400; }
.screen-table td b { font-weight: 600; }
.screen-table > thead > tr > th { vertical-align: bottom; }
.screen-table .c-rank { width: 36px; min-width: 36px; padding-left: 12px; color: var(--text-3); text-align: left; }
.screen-table th.c-rank { color: var(--text-3); }
.screen-table td.c-co { padding: 0; }
.screen-table .c-flags .flag { width: 20px; height: 20px; }
.screen-table .c-flags .flag-set { height: 20px; gap: 3px; }
.screen-table .c-go { width: 40px; padding-right: 8px; }
.row-toggle {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  padding: 5px 8px; cursor: pointer;
}
.row-toggle .co { line-height: 1.3; }
.screen-table .co { flex-direction: row; align-items: center; gap: 8px; }
.screen-table .co .sym {
  flex: none; display: inline-grid; place-items: center; min-width: 46px; height: 21px; padding: 0 6px; border-radius: var(--r-tag);
  background: var(--ink-dim); color: var(--ink); font-size: 12px; box-shadow: inset 0 0 0 1px var(--ink-line);
}
.screen-table .co .nm { color: var(--text); font-size: 13px; }
/* A quote over the counter, not on an exchange: a small neutral tag after the name. */
.co .otc { flex: none; padding: 0 5px; border-radius: var(--r-tag); border: 1px solid var(--line-3); color: var(--text-2); font-size: 10.5px; font-weight: 600; line-height: 16px; }
.row-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; border-radius: 4px; }
.row-toggle .caret { font-size: 14px; color: var(--text-3); transition: transform .2s var(--ease), color .15s; }
.row-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); color: var(--text); }
.screen-table .co { max-width: 250px; }
.screen-table .co .nm { max-width: 150px; }
.screen-table .score .tape { width: 72px; }
.screen-table td.c-score { min-width: 140px; }
.go { display: inline-grid; place-items: center; width: 26px; height: 26px; vertical-align: middle; border-radius: var(--r-ctl); color: var(--text-3); }
.go:hover { color: var(--text); background: var(--surface-4); }
.screen-table tbody tr.row > td { background: var(--surface); transition: background .12s; }
.screen-table tbody tr.row { cursor: pointer; }
.screen-table tbody tr.row:hover > td,
.screen-table tbody tr.row:has(.row-toggle[aria-expanded="true"]) > td { background: var(--surface-2); }
.screen-table tbody tr.row:has(.row-toggle[aria-expanded="true"]) .sym { font-weight: 600; }
.screen-table > tbody > tr:last-child > td { border-bottom: 0; }

/* Where the table fits its box, the column names stay under the page's header while the list scrolls past. */
.table-wrap:not(.scrolls) .screen-table thead th { position: sticky; top: var(--nav-h); z-index: 2; }
/* A row's controls reached by keyboard from above stop clear of those names (52px), not under them. A phone hides them. */
@media (min-width: 721px) { .table-wrap:not(.scrolls) .screen-table tbody :is(a, button) { scroll-margin-top: 56px; } }
/* Where it doesn't, the rank and company stay in view while the figures scroll sideways, the right edge fading. */
.table-wrap.scrolls .screen-table .c-rank { position: sticky; left: 0; z-index: 1; }
.table-wrap.scrolls .screen-table .c-co { position: sticky; left: 36px; z-index: 1; border-right: 1px solid var(--line); }
.table-wrap.scrolls .screen-table thead .c-rank, .table-wrap.scrolls .screen-table thead .c-co { background: var(--bg-raise); }
.table-wrap.more-right { -webkit-mask-image: linear-gradient(to left, transparent, #000 36px); mask-image: linear-gradient(to left, transparent, #000 36px); }
/* An opened row's ledger doesn't scroll, so its words stop short of that fade, wherever the table is scrolled to. */
.table-wrap.scrolls .screen-table .ledger { padding-right: 36px; }
.table-note { font-size: 12.5px; color: var(--text-3); margin-top: 10px; }

/* An opened row: its ledger (app.css) on the raised ground, kept to the box's width while the table scrolls sideways,
   unfolding as it opens: the page's one authored motion. */
.screen-table .ledger { position: sticky; left: 0; }
@media (prefers-reduced-motion: no-preference) {
  .screen-table .ledger { animation: unfold .42s var(--ease) both; }
  @keyframes unfold { from { clip-path: inset(0 0 100% 0); opacity: 0.35; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
}
.screen-table > tbody > tr.detail > td { padding: 0; background: var(--bg-raise); border-bottom: 1px solid var(--line); white-space: normal; text-align: left; }

/* ---- On a phone each company is a block: rank, company and score, its flags, then the view's figures, labelled, four
   to a row. ---- */
@media (max-width: 720px) {
  /* Only the table's own sections: an opened row's ledger tables keep their table layout and their hidden headers. */
  .screen-table, .screen-table > tbody { display: block; }
  .screen-table > thead { display: none; }
  .screen-table tr.row {
    position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 10px; row-gap: 10px;
    padding: 12px 12px 14px 40px; border-bottom: 1px solid var(--line); background: var(--surface);
  }
  .screen-table tbody tr.row:last-child { border-bottom: 0; }
  .screen-table tr.row > td { display: block; padding: 0; border: 0; text-align: left; background: transparent !important; min-width: 0; }
  .screen-table tbody tr.row:hover, .screen-table tbody tr.row:has(.row-toggle[aria-expanded="true"]) { background: var(--surface-2); }
  .screen-table td.c-rank { position: absolute; left: 12px; top: 13px; width: auto; min-width: 0; padding: 0; }
  .screen-table td.c-co { grid-column: 1 / span 2; grid-row: 1; }
  .screen-table .row-toggle { padding: 0; }
  .screen-table .row-toggle .caret { display: none; }
  .screen-table .co { flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; }
  .screen-table .co .nm { max-width: 100%; }
  .screen-table td.c-score { grid-column: 3 / span 2; grid-row: 1; justify-self: end; min-width: 0; }
  .screen-table .score .tape { width: 90px; }
  .screen-table td.c-flags { grid-column: 1 / -1; grid-row: 2; }
  .screen-table tr.row > td.c-flags:not(:has(.flag-set)) { display: none; }
  .screen-table td[data-label] { font-size: 13px; }
  .screen-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; line-height: 1.3; color: var(--text-3); margin-bottom: 2px; white-space: normal; }
  .screen-table tr.row > td.c-go { display: none; }
  .screen-table td.c-range { grid-column: span 2; }
  .screen-table td .tag { height: 19px; padding: 0 5px; font-size: 11.5px; }
  .screen-table tr.detail, .screen-table tr.detail > td { display: block; }
}

/* ---- The rail of links to the lists under the ranked one ---- */
.index-rail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 4px; margin-top: 28px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--bg-raise);
}
.index-label { font-size: 12.5px; color: var(--text-3); margin: 0 8px 0 4px; }
.index-rail a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: var(--r-ctl); font-size: 13px; color: var(--text-2); text-decoration: none; }
.index-rail a:hover { color: var(--text); background: var(--surface-2); }
.index-rail .count { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---- How the list is made: what must pass, what earns points, what is only worth knowing. ---- */
/* How the list is made: four disclosures, each titled with what it explains and a line on what it says. */
.method-stack { display: grid; gap: 8px; }
.method-part > summary .sum-t { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.method-part > summary .sum-note { font-weight: 400; font-size: 12.5px; color: var(--text-3); }
details.method-part .body { padding: 2px 18px 18px 44px; }
/* Each list in two columns on a wide screen, every item under a seam, so a line stays readable at the frame's width. */
.method-part .rule-list li, .method-part .rule-list li:first-child { border-top: 1px solid var(--line); }
@media (min-width: 861px) { .method-part .rule-list, .method-part .points-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.method-lede { font-size: 13px; color: var(--text-3); margin: 3px 0 12px; }
.method-foot { font-size: 12.5px; color: var(--text-3); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.method-foot a { color: var(--text-2); }
.method .rule-list.sources li > .i { color: var(--text-3); } /* sources, not passed rules: no check-mark green */
@media (max-width: 720px) { details.method-part .body { padding: 2px 14px 16px; } }
.method .rule-list li { font-size: 13px; }
.method .rule-list li > .i { color: var(--up); }
.method .rule-list b { font-size: 13.5px; }
.flag-rules li { grid-template-columns: 22px minmax(0, 1fr); }
.tape-key { margin: 0 0 4px; }
.points-list { list-style: none; margin: 8px 0 0; padding: 0; }
.points-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.points-list .pk { font-weight: 600; font-size: 13.5px; }
.points-list .pmax { font-variant-numeric: tabular-nums; font-weight: 600; }
.points-list .pdesc { grid-column: 1 / -1; color: var(--text-2); }

/* ---- The lists under the ranked one ---- */
details.list-rules { margin-bottom: 14px; }
.table-wrap.list-wrap { overflow-x: auto; }
table.data.list td.txt:not(.co-cell):not(.ind-cell) { color: var(--text-2); }
table.data.list th:first-child, table.data.list td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
table.data.list thead th:first-child { background: var(--bg-raise); }
table.data.list td.co-cell { min-width: 210px; }
table.data.list .co .nm { max-width: 240px; }
.ind-cell b { display: block; font-weight: 600; white-space: normal; }
table.data.list td.ind-cell { min-width: 200px; max-width: 300px; white-space: normal; }
.ind-cell span { display: block; color: var(--text-3); font-size: 12px; }
.cell-sub { display: block; font-size: 11.5px; color: var(--text-3); }
/* A small label over a figure may wrap, so a list fits its box where it can (the giants' sales period at 768px). On a
   phone the lists scroll sideways anyway, and a wrapped label would only make tall rows. */
@media (min-width: 721px) { table.data.list .cell-sub { white-space: normal; } }
/* "Show all" puts keyboard focus on the first row it reveals. Its ring is drawn on the row's own cells, inside them, so
   neither the scrolling box nor the pinned first cell can cover it. */
table.data.list tr[data-extra]:focus-visible { outline: none; }
table.data.list tr[data-extra]:focus-visible > td { box-shadow: inset 0 2px 0 var(--text), inset 0 -2px 0 var(--text); }
table.data.list tr[data-extra]:focus-visible > td:first-child { box-shadow: inset 2px 0 0 var(--text), inset 0 2px 0 var(--text), inset 0 -2px 0 var(--text); }
table.data.list tr[data-extra]:focus-visible > td:last-child { box-shadow: inset -2px 0 0 var(--text), inset 0 2px 0 var(--text), inset 0 -2px 0 var(--text); }
.list-more { margin-top: 10px; }
.list-note { font-size: 12.5px; color: var(--text-3); margin-top: 10px; max-width: 96ch; }
.notice.unverified { margin-top: 12px; }
.notice.unverified p + p { margin-top: 6px; }
@media (max-width: 640px) {
  table.data.list td.co-cell { min-width: 150px; }
  table.data.list .co .nm { max-width: 150px; }
  table.data.list td.ind-cell { min-width: 150px; max-width: 170px; }
}