/* =====================================================================
   41-classes-touch.css — fix lane fix-6b. Team CLASSES owns 40-classes.css
   and this lane does not touch it; this file loads immediately after it
   (same folder, next filename) and only ever targets 40-classes.css's own
   selectors, so it wins on load order at equal specificity without editing
   a file outside this lane's brief.

   Three findings, all on /classes/ at phone widths:

     T7-019  .rhcl-arrow is 40x40 and the studio filter chips are 38-40px
             tall — under the 44px touch-target minimum — and the arrows
             show no hover change at 1440.
     T7-014  .rhcl-chips (the JS-drawn phone agenda list) is `display:grid`
             with no grid-template-columns, so its one implicit column is
             "auto"-sized rather than filling the container - every
             .rhcl-chip-h row shrink-wraps to its own text width and
             centres in the leftover space, so rows start at a different
             left edge (measured live at 74-139px from the edge, widths
             113-227px). Reproduced against the live site in the JS-built
             .rhcl-chips list that drawAgenda() in 40-classes.js renders on
             a narrow screen.

             Two things are needed, proven live against the deployed site
             by trying each alone before combining them:
               1. grid-template-columns: minmax(0, 1fr) below, so there is
                  one explicit column sized to the container instead of an
                  auto track sized to content.
               2. An explicit width on .rhcl-chip-h itself. style.css's
                  phone reset sets inline-size: auto on every li under
                  main#riverhouse-public-main (search "margin-left: auto"
                  near the top of its 599px block) at (1 id, 0 class, 1
                  type) - more specific than a plain .rhcl-chip-h rule (0,
                  1, 0), so it wins even though this file loads later.
                  Matching main#riverhouse-public-main .rhcl-chip-h here
                  (1, 1, 0) beats it the same way main#riverhouse-public-main
                  .rhcl-arrow already does lower in 40-classes.css, with no
                  !important needed.
   ===================================================================== */

/* ---------- T7-014: the phone agenda list stretches to one full column ---------- */

.rhcl-chips {
  grid-template-columns: minmax(0, 1fr);
}

main#riverhouse-public-main .rhcl-chip-h {
  inline-size: 100%;
}

/* ---------- T7-019: 44px minimum touch targets, phone and tablet ---------- */

@media (max-width: 900px) {
  .rhcl-move {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .rhcl-arrow,
  main#riverhouse-public-main .rhcl-arrow {
    inline-size: 44px;
    block-size: 44px;
    flex: 0 0 44px;
  }

  .rhcl .rhc-fopt.rhcl-type {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- T7-019: a real hover state on the window arrows ----------
   The existing :hover only changed the border and glyph colour, which read
   as "no change" in the sweep. A background swap is unmistakable and
   matches the darken-on-hover the rust button and .tlink links already
   use elsewhere on this page. */

.rhcl-arrow:hover:not([disabled]) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}