/*
 * The screener (screeners/*): the filter builder — a ruled box of tabs, each
 * a grid of indicators whose values are edited where they stand, with the
 * indicator search at the end of the tab bar and a line about the row under
 * the pointer at the foot — and the panels it opens, then the results grid
 * and its pages.
 *
 * Every open/closed state here is an attribute the markup already has: a
 * panel is `hidden` or not (the `dropdown` and `filter-builder` controllers
 * set it), a period letter is a radio that is `:checked` or not, the current
 * tab is `aria-current`. The tab bar shows the picker is open with `:has()`, so
 * the controller holds no class of its own.
 */
@layer pages {
  .filter-builder {
    margin-block-end: var(--space-md);
  }

  /* The filter grid and the results hang, as the saved screens' strip
     above them does: their text — the tabs, the pills' edges, the table's
     first and last columns — sits on the page's text edge, and their grounds
     and rules reach a bleed past it on both sides (owner, 2026-10-05). */
  .filter-grid,
  .screener-views,
  .screener-results {
    --screener-bleed: var(--space-sm);
  }

  /* The box: an ink frame around the tabs, the rows and the footer, hung by
     the bleed and its own rule. */
  .filter-grid {
    display: block;
    margin-inline: calc(-1 * (var(--screener-bleed) + var(--rule-width)));
    border: var(--rule-width) solid var(--color-rule-strong);
  }

  /* A query the server could not read, under the box. */
  .filter-builder > .flash {
    margin-block-start: var(--space-sm);
  }

  /* The tab bar, and the search at its end. The positioning context of the
     picker, which drops over the rows under it. */
  .filter-grid__head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0 var(--space-lg);
    padding-inline: var(--screener-bleed);
    border-block-end: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-surface-raised);
  }

  .filter-grid__tabs {
    flex: 1 1 auto;
    min-inline-size: 0;
    border-block-end: 0;
  }

  /* Reset (and Show charts), between the tabs and the search. */
  .filter-grid__tools {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-inline-start: auto;
    font-size: var(--text-ui-sm);

    &:empty {
      display: none;
    }
  }

  .filter-grid__count {
    font-weight: var(--weight-medium);
  }

  /* This screen: the screen as it stands, not a set of indicators to filter
     on, so it is set in ink, its count in a filled badge, and ruled off from
     the filter tabs after it. */
  .tabs__tab.filter-grid__screen-tab {
    padding-inline-end: var(--space-lg);
    border-inline-end: var(--rule-hairline);
    color: var(--color-ink);

    &:hover {
      color: var(--color-ink);
    }
  }

  .filter-grid__screen-count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.5rem;
    block-size: 1.25rem;
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-pill);
    background-color: var(--color-ink);
    color: var(--color-ink-inverse);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }

  /* As many cards as fit: two on a phone (owner feedback, 2026-10-19), and
     five or six across a wide screen, read across, a row at a time. The
     positioning context of the sector and industry panels, which open under
     the rows. */
  .filter-grid__rows {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: var(--space-xs);
    padding: var(--space-sm) var(--screener-bleed);

    @media (width >= 768px) {
      grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    }
  }

  /* The Presets tab (screeners/_presets): a card per ready-made screen, as
     many across as fit. */
  .screener-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-xs);
    padding: var(--space-sm) var(--screener-bleed);
  }

  .screener-preset {
    display: grid;
    align-content: start;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
    border: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-surface-raised);
  }

  .screener-preset__description {
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .screener-preset__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    margin-block-start: var(--space-3xs);
  }

  /* The row under the pointer, said in words, and what the period letters
     stand for. */
  .filter-grid__footer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--space-2xs) var(--space-lg);
    padding: var(--space-xs) var(--screener-bleed);
    border-block-start: var(--rule-width) solid var(--color-rule);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  /* Two lines tall whatever it says, a longer meaning cut short. */
  .filter-grid__description {
    display: -webkit-box;
    flex: 1 1 32rem;
    block-size: 2lh;
    max-inline-size: 80ch;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    & > * + * {
      margin-inline-start: var(--space-xs);
    }

    & strong {
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }
  }

  .filter-grid__periods-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-md);
    margin-inline-start: auto;

    & strong {
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }
  }

  /* One indicator, as a small card: its name (and on Active the remove ×),
     its select across the card's width, and under that its period letters. Set apart from the next by the
     grid's gap (owner, 2026-10-05: ruled rows ran together). The name is
     bold once the screen holds the row, and the card green on a green tint
     once it narrows the screen (Screeners::Criterion#filtering?). */
  .filter-row {
    --filter-row-switch: 2.125rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name remove"
      "field field"
      "periods periods";
    align-content: start;
    align-items: center;
    gap: var(--space-3xs) var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs) var(--space-3xs);
    border: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-surface-raised);
    color: var(--color-ink);
    font-size: var(--text-meta);
    line-height: var(--leading-meta);

    & .icon {
      fill: var(--color-ink-subtle);
    }

    @media (pointer: coarse) {
      --filter-row-switch: var(--target-min);
    }
  }

  .filter-row--in-screen {
    & .filter-row__name {
      font-weight: var(--weight-semibold);
    }
  }

  .filter-row--filtering {
    border-color: var(--color-accent-line);
    background-color: var(--color-accent-tint);

    & .icon {
      fill: var(--color-accent-strong);
    }

    & .filter-row__name {
      color: var(--color-accent-strong);
    }
  }

  /* Shortened where it would wrap (Indicators::ShortName), and cut at two
     lines whatever it says, so no card stands taller than its neighbours by
     a name. The full name is the title, and the footer's. */
  .filter-row__name {
    display: -webkit-box;
    grid-area: name;
    min-inline-size: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .filter-row__remove {
    grid-area: remove;
    margin-block: calc(-1 * var(--space-3xs));
  }

  .filter-row__field {
    grid-area: field;
    min-inline-size: 0;
  }

  .filter-row__periods {
    grid-area: periods;
    display: flex;
    gap: var(--space-2xs);
    font-size: var(--text-caps-xs);
  }

  /* A letter or three, the current one carrying the ink underline the tabs
     do; the full name is the label's title. */
  .filter-row__period {
    display: grid;
    place-items: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: var(--space-3xs);
    border-block-end: 2px solid transparent;
    color: var(--color-ink-muted);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    cursor: pointer;

    &:hover {
      color: var(--color-ink);
    }

    &:has(input:checked) {
      border-block-end-color: var(--color-ink);
      color: var(--color-ink);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-offset);
    }

    @media (pointer: coarse) {
      min-inline-size: var(--target-min);
      block-size: var(--target-min);
    }
  }

  /* The ticker list, typed into, and a list's selection drawn as a field:
     "any", "2 of 11", "AAPL, MSFT". As wide as the card. */
  .filter-row__input,
  .filter-row__chip {
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding-inline: var(--space-xs);
    border: var(--rule-width) solid var(--color-rule-control);
    background-color: var(--color-field);
    font-family: var(--font-data);
    font-size: var(--text-input);
    text-align: start;

    &::placeholder {
      color: var(--color-ink-subtle);
    }

    .filter-row--filtering & {
      border-color: var(--color-ink);
    }

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
    }
  }

  .filter-row__chip {
    overflow: hidden;
    color: var(--color-ink-subtle);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;

    .filter-row--filtering & {
      color: var(--color-ink);
    }

    &:hover {
      color: var(--color-ink);
    }
  }

  /* A value row's editor (screeners/criteria/_value): the select of
     choices, then, once Custom is selected, the reader's own range — or,
     without Powerpack, the lock. Which shows is read off the select itself,
     so it works with JavaScript off. */
  .value-field {
    display: grid;
    gap: var(--space-2xs);
  }

  /* The site's select box (components/field.css), at the height of a row
     rather than a form's. */
  .value-field__select,
  .value-field__input {
    min-block-size: 2.25rem;
    padding-block: 0;
    padding-inline-start: var(--space-xs);
    border-color: var(--color-rule-control);
    font-family: var(--font-data);

    .filter-row--filtering & {
      border-color: var(--color-ink);
    }

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
    }
  }

  .value-field__custom,
  .value-field__locked {
    display: none;

    .value-field:has(.value-field__select option[value="custom"]:checked) & {
      display: grid;
    }
  }

  /* From and To side by side, each a caps label over its field. */
  .value-field__custom {
    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
    gap: var(--space-2xs);
  }

  .value-field__bound {
    display: grid;
    gap: var(--space-3xs);
  }

  .value-field__bound-label {
    color: var(--color-ink-muted);
    font-size: var(--text-caps-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  /* A score's scale, a button per value, the picked one in ink. */
  .value-field__pick {
    display: grid;
    place-items: center;
    min-block-size: 2rem;
    border: var(--rule-width) solid var(--color-rule-control);
    background-color: var(--color-field);
    font-family: var(--font-data);
    cursor: pointer;

    &:has(input:checked) {
      border-color: var(--color-ink);
      background-color: var(--color-ink);
      color: var(--color-ink-inverse);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-offset);
    }

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
    }
  }

  .value-field__custom:has(.value-field__pick) {
    grid-template-columns: repeat(5, 1fr);
  }

  .value-field__locked {
    gap: var(--space-3xs);
    justify-items: start;
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  /* A panel a row or the search opens: the lists under the rows, the picker
     over them, each as wide as the box. */
  .criterion-panel,
  .picker {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--rule-width) solid var(--color-rule-strong);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-overlay);
    color: var(--color-ink);
    font-size: var(--text-ui-sm);
    cursor: default;
  }

  .picker {
    block-size: 65vh;
  }

  .criterion-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    border-block-end: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-surface-raised);
    color: var(--color-ink-soft);

    & > :last-child {
      margin-inline-start: auto;
    }
  }

  .criterion-panel__body {
    display: grid;
    gap: var(--space-sm);
    max-block-size: 65vh;
    overflow-y: auto;
    padding: var(--space-md) var(--space-lg);
    line-height: 1.55;
  }

  /* The sector and industry lists. */
  .checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3xs) var(--space-md);

    @media (width >= 768px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    & .checkbox-field {
      min-block-size: 2rem;

      @media (pointer: coarse) {
        min-block-size: var(--target-min);
      }
    }
  }

  /* The search, for every indicator the tabs leave out: a field boxed in
     ink on the field ground, the glass inside it, on the tab bar's line
     while there is room and a line of its own when there is not. It is the
     way to the other three hundred, so it is drawn to be found. */
  .picker-query {
    position: relative;
    display: flex;
    flex: 1 1 18rem;
    align-items: center;
    max-inline-size: 26rem;
    margin-block: var(--space-xs);
  }

  .picker-query__icon {
    position: absolute;
    inset-inline-start: var(--space-sm);
    pointer-events: none;

    &.icon {
      fill: var(--color-ink);
    }
  }

  .picker-query__input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 2.5rem;
    padding-inline: calc(var(--space-sm) + 1.5rem) var(--space-sm);
    border: var(--rule-width) solid var(--color-ink);
    background-color: var(--color-field);
    font-size: var(--text-input);

    &::placeholder {
      color: var(--color-ink-soft);
    }

    &:hover,
    .filter-grid__head:has(.picker:not([hidden])) &,
    &:focus {
      outline: var(--rule-width) solid var(--color-ink);
    }

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
    }
  }

  .picker__frame {
    display: flex;
    flex: 1;
    gap: var(--space-md);
    overflow: hidden;
    padding: var(--space-sm) var(--space-lg);
  }

  .picker__frame > .skeleton {
    flex: 1;
  }

  .picker__groups {
    flex: none;
    display: grid;
    align-content: start;
    inline-size: min(40%, 18rem);
    overflow-y: auto;
    font-size: var(--text-ui-sm);

    & a {
      display: flex;
      align-items: center;
      min-block-size: 2rem;
    }
  }

  .picker__results {
    flex: 1;
    overflow-y: auto;
  }

  /* With the tiers on (M09-D4): the category headings, the "Show all
     indicators" / "Core only" switch under the column (categories then,
     rather than groups), and the periods and one-line meaning under a
     concept's name. */
  .picker__heading {
    margin-block: var(--space-sm) var(--space-2xs);
    padding-inline: var(--space-sm);
    color: var(--color-ink-muted);

    &:first-child {
      margin-block-start: 0;
    }
  }

  .picker__scope {
    margin-block-start: var(--space-sm);
    padding-block-start: var(--space-xs);
    border-block-start: var(--rule-width) solid var(--color-rule);
  }

  .picker__result-meta {
    display: block;
    color: var(--color-ink-subtle);
    font-size: var(--text-meta-xs);
    line-height: var(--leading-meta-xs);
  }

  .picker__result {
    display: block;
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--text-ui);
    text-align: start;
    cursor: pointer;

    &:hover,
    &[aria-selected="true"] {
      background-color: var(--color-row-hover);
    }
  }

  .picker__note {
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  /* Above the grid: the count, and — when a column is a plot — a key to the
     lines drawn on the plot images. The images are gnuplot's, with their
     colours baked in, so the key matches them rather than the tokens' chart
     marks (tasks/11 §9). */
  .results-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-lg);
    margin-block-end: var(--space-sm);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  /* The results' own tabs (Screeners::ResultView), hung by the bleed like
     the table under them, with the switch between the table and the
     snapshots at the bar's end. The bar's hairline is the row's, so it runs
     under the switch too. */
  .screener-views {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 0 var(--space-lg);
    margin-inline: calc(-1 * var(--screener-bleed));
    padding-inline: var(--screener-bleed);
    border-block-end: var(--rule-width) solid var(--color-rule);
  }

  .screener-views__tabs {
    flex: 1 1 auto;
    min-inline-size: 0;
    border-block-end: 0;
  }

  .screener-views__layout {
    align-self: center;
  }

  /* The snapshots (screeners/_snapshots): cards side by side, every one
     under a heavy rule like a section of the page, never in a box. Two
     across a desktop at most (owner, 2026-10-31), and more only where two
     would each be wider than a card has use for: 36rem a card is two from
     a laptop to 1700px, three from about 1900px, four on a 2560px screen,
     so a card is never narrower than 36rem nor much wider than 50. */
  .snapshots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 36rem), 1fr));
    gap: var(--space-xl) var(--space-2xl);
    margin-block: var(--space-md) var(--space-lg);
    padding: 0;
    list-style: none;
  }

  /* A preview (below Powerpack) shows one row of cards, as many as the grid
     above fits across: n columns from n × 36rem plus the (n − 1) 2rem gaps
     between them, so each step here is where the grid gains a column. The
     rest are `display: none`, out of the tab order and the reading. */
  .snapshots-frame {
    container: snapshots / inline-size;
    margin-block-end: var(--space-lg);
  }

  .snapshots-frame--preview .snapshots__item {
    &:nth-child(n + 2) {
      display: none;
    }

    @container snapshots (width >= 74rem) {
      &:nth-child(-n + 2) {
        display: flex;
      }
    }

    @container snapshots (width >= 110rem) {
      &:nth-child(-n + 3) {
        display: flex;
      }
    }

    @container snapshots (width >= 146rem) {
      &:nth-child(-n + 4) {
        display: flex;
      }
    }

    @container snapshots (width >= 182rem) {
      &:nth-child(-n + 5) {
        display: flex;
      }
    }
  }

  .snapshots__item {
    display: flex;
  }

  .snapshot {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-sm);
    min-inline-size: 0;
    padding-block-start: var(--space-xs);
    border-block-start: var(--rule-heavy);
    container: snapshot / inline-size;
  }

  .snapshot__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .snapshot__identity {
    min-inline-size: 0;
  }

  .snapshot__name {
    margin-block-end: var(--space-3xs);
  }

  .snapshot__place {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-xs);
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
  }

  .snapshot__quote {
    display: grid;
    justify-items: end;
    flex-shrink: 0;
    font-size: var(--text-ui-sm);
  }

  .snapshot__change {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
  }

  .snapshot__period {
    color: var(--color-ink-muted);
    font-size: var(--text-meta-xs);
    text-decoration: none;
  }

  .snapshot__chart {
    margin: 0;
  }

  /* The candles above, the volume in the foot of the box. */
  .snapshot__candles {
    inline-size: 100%;
    block-size: 7.5rem;
  }

  .snapshot__range {
    display: flex;
    justify-content: space-between;
    margin-block-start: var(--space-2xs);
    color: var(--color-ink-muted);
    font-size: var(--text-meta-xs);
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* What the company does: its profile's first two sentences, whole. */
  .snapshot__description {
    font-family: var(--font-prose);
    font-size: var(--text-prose-sm);
    line-height: var(--leading-prose-sm);
  }

  /* A dozen figures in two columns of six — the business down the first,
     what it costs down the second — on a phone as well (owner,
     2026-10-31). There the labels wrap rather than the figures. */
  .snapshot__figures {
    grid-template-rows: repeat(6, auto);
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    column-gap: var(--space-lg);

    & .stat-list__value {
      white-space: nowrap;
    }
  }

  .snapshot__insiders {
    display: flex;
    gap: var(--space-2xs);
  }

  /* The history (Screeners::Snapshots::History): revenue, EPS, free cash
     flow and net debt by period, the latest last. A card shows as many periods as
     it has room for, counted from the latest — one on the narrowest
     phone, three on most, four on a card three across a 1440px screen,
     all five from about 460px (the `snapshot` container, on `.snapshot`;
     the widths are the table's own, measured). */
  .snapshot-history {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-ui-sm);
    font-variant-numeric: tabular-nums lining-nums;

    & th,
    & td {
      padding-block: 0.4375rem;
      border-block-end: var(--rule-hairline);
      text-align: end;
      white-space: nowrap;
    }

    & th:first-child {
      color: var(--color-ink-muted);
      font-weight: var(--weight-regular);
      text-align: start;
    }

    & thead th,
    & thead td {
      padding-block-start: 0;
    }

    & thead .snapshot-history__period {
      color: var(--color-ink-muted);
      font-size: var(--text-meta-xs);
      font-weight: var(--weight-medium);
    }

    & tbody .snapshot-history__period {
      font-weight: var(--weight-medium);
    }

    & .trend-bars {
      margin-inline-start: auto;
    }
  }

  .snapshot-history__period {
    padding-inline-start: var(--space-sm);

    &:nth-last-child(n + 2) {
      display: none;
    }

    @container snapshot (width >= 21rem) {
      &:nth-last-child(-n + 3) {
        display: table-cell;
      }
    }

    @container snapshot (width >= 25rem) {
      &:nth-last-child(-n + 4) {
        display: table-cell;
      }
    }

    @container snapshot (width >= 29rem) {
      &:nth-last-child(n + 2) {
        display: table-cell;
      }
    }
  }

  /* The screen's own figures go last, at the card's foot, so the cards in a
     row end together whatever is above them. */
  .snapshot__screen {
    margin-block-start: auto;
  }

  /* The line a screen cut to the reader's tier says it with (M04-D6), set
     in the summary's own muted text, with its locks after it. */
  .results-summary__limit {
    max-inline-size: 72ch;
    line-height: 1.5;

    & .lock {
      margin-inline-start: var(--space-3xs);
    }
  }

  /* The offer under the summary (screeners/_offer, `powerpack_offers`): its
     cards side by side from 768px, the free account's first; one card alone
     keeps a pair's width rather than stretching across the grid. */
  .screener-offer {
    display: grid;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);

    @media (width >= 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .plot-key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);

    &::before {
      content: "";
      inline-size: 1.25rem;
      border-block-start: 2px solid currentColor;
    }
  }

  .plot-key--median::before { border-block-start-style: dashed; border-block-start-color: var(--color-loss); }
  .plot-key--thirds::before { border-block-start: 1px dotted var(--color-ink-muted); }

  /* The results grid. Header cells are sort buttons; the widths are the
     three header kinds' own (ScreenersHelper#screener_header_width). */
  /* Hung by the bleed, its first and last columns set in by as much. */
  .screener-results {
    max-inline-size: none;
    margin-inline: calc(-1 * var(--screener-bleed));
  }

  .screener-table {
    & th {
      padding: 0;
    }

    & th:first-child .sort-button,
    & td:first-child {
      padding-inline-start: var(--screener-bleed);
    }

    & th:last-child .sort-button,
    & td:last-child {
      padding-inline-end: var(--screener-bleed);
    }

    & td {
      vertical-align: middle;
    }
  }

  .screener-table__col--number { inline-size: 3rem; }
  .screener-table__col--ticker { inline-size: 6rem; }
  .screener-table__col--value { max-inline-size: 6.25rem; }
  .screener-table__col--default { inline-size: 11rem; }

  /* The row's place in the screen: a quiet figure, read before the ticker. */
  .screener-table__number {
    color: var(--color-ink-soft);
    font-variant-numeric: tabular-nums;
  }

  .screener-table__company {
    display: block;
    max-inline-size: 16rem;
    overflow: hidden;
    font-size: var(--text-ui);
    text-overflow: ellipsis;
  }

  /* A figure's chart, under "Show charts": small enough that a row stays
     a row on a phone (the old full-size image made one several hundred
     pixels tall), and a little larger where there is room. */
  .screener-table__plot {
    inline-size: 10rem;
    max-inline-size: none;
    block-size: 7.5rem;
    margin-inline-start: auto;

    @media (width >= 1024px) {
      inline-size: 13.75rem;
      block-size: 10.3125rem;
    }
  }

  .empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-3xl);
    color: var(--color-ink-muted);
    text-align: center;
  }

  .empty-state__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-loss);
    font-family: var(--font-prose);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
  }
}