/*
 * The screener (screeners/*): the filter builder — a box of criterion pills,
 * the indicator picker after them and the panels they open — 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 toggle is a checkbox that is `:checked` or not. The box shows the
 * picker is open with `:has()`, so the controller holds no class of its own.
 */
@layer pages {
  /* The positioning context every panel below is drawn against, wrapping the
     Apply row too, so a panel opens below the button rather than over it. */
  .filter-builder {
    position: relative;
    margin-block-end: var(--space-md);
  }

  .filter-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: 3.5rem;
    padding: var(--space-xs);
    border: var(--rule-width) solid var(--color-rule-control);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    cursor: text;
    transition: border-color var(--duration-fast);

    &:has(.picker:not([hidden])),
    &:focus-within {
      border-color: var(--color-accent);
    }
  }

  /* One criterion. Plain while it is only a column; the accent tint once it
     narrows the screen (Screeners::Criterion#filtering?). */
  /* One line per pill: on a narrow screen the name wraps inside it rather
     than the remove button dropping below. */
  .criterion {
    display: flex;
    align-items: center;
    max-inline-size: 100%;
    gap: var(--space-3xs);
    min-block-size: 2.625rem;
    padding: var(--space-3xs) var(--space-2xs) var(--space-3xs) var(--space-xs);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-ui-sm);
    cursor: default;

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

    @media (pointer: coarse) {
      min-block-size: 3.375rem;
    }
  }

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

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

  .criterion__name {
    min-inline-size: 0;
    padding-inline: var(--space-2xs);
    font-weight: var(--weight-medium);
  }

  /* The editor's current setting, drawn as a chip: "(All)", "(1 / 2)", a
     query, a unit. */
  .criterion__chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-xs);
    background-color: var(--color-surface-raised);
    color: var(--color-ink-muted);

    .criterion--filtering & {
      background-color: var(--color-accent-tint-2);
      color: var(--color-accent-strong);
    }

    &:is(button) {
      cursor: pointer;

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

  .criterion__input {
    inline-size: 5.5rem;
    min-block-size: 1.75rem;
    padding-inline: var(--space-2xs);
    border: var(--rule-width) solid var(--color-rule-control);
    border-radius: var(--radius-xs);
    background-color: var(--color-surface);
    font-family: var(--font-data);
    font-size: var(--text-input);
    text-align: center;
  }

  .criterion__unit {
    padding-inline: var(--space-2xs);
    color: var(--color-ink-muted);
  }

  /*
   * A pill's switches — shown as a column, drawn as a plot, the flag's tick
   * box. Each is a visually hidden checkbox inside its label with two glyphs,
   * one per state; the label is the 34px (44px on touch) target and draws the
   * focus ring its checkbox cannot.
   */
  .toggle {
    display: inline-grid;
    place-items: center;
    inline-size: 2.125rem;
    block-size: 2.125rem;
    border-radius: var(--radius-md);
    cursor: pointer;

    &:hover {
      background-color: color-mix(in srgb, var(--color-ink) 6%, transparent);
    }

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

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

  .toggle__on {
    display: none;
  }

  .toggle:has(input:checked) {
    & .toggle__on {
      display: block;
    }

    & .toggle__off {
      display: none;
    }
  }

  /* A panel a pill or the picker opens, under the whole box. */
  .criterion-panel,
  .picker {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 100%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    margin-block-start: var(--space-xs);
    overflow: hidden;
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-lg);
    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__separator {
    color: var(--color-ink-subtle);
  }

  .criterion-panel__apply {
    color: var(--color-accent-strong);
    font-weight: var(--weight-medium);
  }

  .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 value editor's two columns: the indicator, then the query syntax. */
  .criterion-panel__columns {
    display: grid;
    gap: var(--space-lg);

    @media (width >= 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .criterion-panel__description {
    color: var(--color-ink-muted);
  }

  .query-examples {
    display: grid;
    gap: var(--space-2xs);
  }

  /* A piece of query syntax, set as something to type. */
  .query-code {
    padding: 0 var(--space-2xs);
    border: var(--rule-width) solid var(--color-warn-line);
    border-radius: var(--radius-xs);
    background-color: var(--color-warn-tint);
    font-family: var(--font-data);
    white-space: nowrap;
  }

  /* 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 ticker editor's current list, each ticker with its own way out. */
  .ticker-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .ticker-list__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding-inline-start: var(--space-xs);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.03em;
  }

  /* The picker: the input after the last pill, and the panel of groups and
     indicators it searches. */
  .picker-query {
    flex: 1;
    min-inline-size: 10rem;
  }

  .picker-query__input {
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-md);
    background: transparent;
    font-size: var(--text-input);
  }

  .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;
  }

  .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);
  }

  /* Apply, and the line that says what it does. */
  .filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-lg);
    margin-block-start: 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);
  }

  .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--mean::before { border-block-start-color: var(--color-link); }
  .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). */
  .screener-table {
    & th {
      padding: 0;
    }

    & td {
      vertical-align: middle;
    }
  }

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

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

  .screener-table__plot {
    inline-size: 280px;
    max-inline-size: none;
    block-size: 210px;
    margin-inline-start: auto;
  }

  .sort-button {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding: var(--space-xs);
    color: var(--color-ink-muted);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-align: start;
    cursor: pointer;

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

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

  .sort-button--value {
    justify-content: flex-end;
    text-align: end;
  }

  .sort-button__label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    margin-block-start: var(--space-lg);
    font-size: var(--text-ui);

    & > * {
      display: inline-grid;
      place-items: center;
      min-inline-size: 2.5rem;
      min-block-size: 2.5rem;
      padding-inline: var(--space-xs);
      border-radius: var(--radius-md);
    }

    & > a:hover {
      background-color: var(--color-surface-raised);
    }
  }

  .pagination__current {
    background-color: var(--color-accent-tint);
    color: var(--color-accent-strong);
    font-weight: var(--weight-semibold);
  }

  .pagination__disabled {
    color: var(--color-ink-subtle);
  }

  .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);
  }
}