/* Responsive: the mobile courtesy layout and reduced-motion overrides. */
/* ---- mobile (courtesy layout) ---------------------------------------- */
@media (max-width: 760px) {
  /* One normal page scroll, with the chart sticky: the header and toolbar scroll
       away, the chart docks to the top of the viewport, the table's column headers
       (and the group subheadings stacked under them) stick just beneath it, and the
       glyph key and disclaimer flow at the end of the document instead of pinning
       to the viewport. The chart still never leaves the screen; the table needs no
       fixed height for that. --chart-h keeps the chart's height and every sticky
       offset that builds on it in step. */
  :root {
    --chart-h: min(100vw, 55dvh);
  }
  body {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  /* Toolbar above the chart, so border below (not above). The theme toggle has moved
       to the header (theme.js), leaving the interval switch and the tail control; the
       tail control absorbs the remaining width (its slider shrinks first, never below a
       usable minimum) so the row cannot overflow the viewport. The interval hint is
       dropped to make room. */
  .toolbar {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 4px 12px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
  .toolbar .spacer {
    display: none;
  }
  .toolbar .tailctl {
    flex: 1 1 auto;
    min-width: 0;
  }
  .toolbar input[type="range"] {
    max-width: 220px;
    height: 26px;
  }
  .toolbar .hint {
    display: none;
  }
  /* Comfortable tap height for the interval buttons (width unchanged, so the pair
       still fits beside the tail control on narrow phones). */
  .ivl-btn {
    padding: 8px 10px;
  }
  /* The plot is always square (render uses min(width,height)). Full width fills
       the canvas as a full-width square on tall phones; on shorter/wider screens the
       height caps at 55dvh so the table below keeps meaningful room. Sticky with an
       opaque background: rows scroll beneath it, never through it. */
  .canvas-wrap {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 4; /* above the sticky column headers (3) and group subheadings (2) */
    width: 100%;
    height: var(--chart-h);
    background: var(--bg);
  }
  /* The rail no longer scrolls internally: the document scrolls instead, so the
       key and the view notes are reached by scrolling past the table. */
  .rail {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .rail-table {
    flex: none;
    overflow: visible;
  }
  .nav-legend {
    min-height: 0;
    padding: 7px 14px;
  } /* compact glyph key, flowing after the table */
  /* Column headers dock under the sticky chart; group subheadings stack under
       them (27px is the header row's height, matching the desktop offset). */
  thead th {
    top: var(--chart-h);
  }
  .grouphead th {
    top: calc(var(--chart-h) + 27px);
  }

  /* The code, hidden on desktop, leads the name here (STP  Cons. Staples). Its
       mono treatment already sets it apart, so no separator glyph is needed. A
       fixed min-width lines the names up into a column, and the code and marker
       align to the line middle so they sit level with the name. */
  td.name .code {
    display: inline-block;
    min-width: 2.5em;
    margin-right: 6px;
    vertical-align: middle;
    color: var(--muted);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.82em;
  }
  td.name .marker {
    vertical-align: middle;
  }

  /* Touch-target sizing: roomier rows, buttons, ticker links and a full-width
       slider so every interactive element clears a comfortable tap area. Cell
       padding trimmed a little to hand the reclaimed width back to the name. */
  tbody td {
    padding: 9px 6px;
  }
  .disccol,
  td.disc {
    padding-right: 4px;
  }
  .ghost {
    padding: 9px 12px;
    min-height: 40px;
  }
  td.name .ext {
    padding: 8px;
  }
  td.disc .disclose {
    padding: 8px;
  }

  /* The view nav, toolbar and legend all stay visible in the page; only the
       header's info + Methodology hide behind the menu. Bigger tap targets. */
  .view-select {
    padding: 12px 32px 12px 10px;
    min-height: 40px;
  }
  .tab-btn {
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}