/* Hit areas: 44px on the core controls, 24px on the link lists.

   Its own file for the reason share.css and bar.css give: a great many agents
   edit site.css at once. Loaded last in web/templates/base.html, after bar.css,
   so it needs no extra specificity to win ties.

   Added 23 October 2026 from the pre-launch design audit
   (design-audit-2026-10/). Every control here already cleared WCAG 2.5.8
   (24px); the audit measured them against the 44px guidance (2.5.5, and the
   size platform guidelines ask of a thumb) and found the bar's own controls
   at 25 to 40px. The rule for the whole file: the page must not look
   different. Nothing below changes a visible edge, a gap or a line height.

   TWO TOOLS, CHOSEN BY WHAT THE CONTROL IS

   A bordered or filled control (the Menu and Search buttons, Light / dark,
   Copy, Find) cannot take padding without growing the box you can see. It
   gets an empty ::after, centered on it, at least 44px each way. The box is
   absolutely positioned inside a `position:relative` host, so it adds no
   layout, and a browser hit-tests it as part of the control. Its width is
   max(100% + 2px, 44px): never smaller than the visible control (the 2px is
   the border the percentage leaves out), never smaller than a thumb.

   A link in a list takes vertical padding. On an inline link the padding adds
   no height to the line (vertical padding on an inline box is outside the
   line's layout) and does extend the area the browser hit-tests, so rows keep
   the height they had and the link is a 24px target or more. This is the
   convention e3564bd set for the ledger rows; where a link is already an
   inline-block there (`.runs`, `.company`) that rule stands.

   WHERE 44 IS NOT REACHED, AND WHY
   Rows closer together than 44px cannot each have a 44px target without
   overlapping their neighbors, and a mis-tap on the wrong row is worse than a
   short target. The decade chips on a theatre page sit 31px apart on a phone,
   so each was as tall as its own row and no taller. 23 October 2026, second
   round: the rows are now 44px apart so the chips can be 44px (section 4). The
   ledger tables on the year and decade pages (`.runs`) stay at 24px: they are
   rows of a table, not controls.

   A native <select> cannot take a pseudo-element, so the one visible change in
   this file is there: the filter selects and their Apply button are 44px high
   where they were 37 and 38.5. */

/* ── 1. Pseudo-element hit areas ────────────────────────────────────────── */
.barbtn,
.brand,
.strip-all,
.share-url,
.share-copy,
.share-feed,
.hunt button,
.recut button,
.results a.t,
.result-lead .t a,
.signup button{
  position:relative;
}
/* The skip link is absolutely positioned already and off screen until it has
   focus. Its focused box is 44px itself (section 5), not a pseudo-element: a
   keyboard user sees the box, so the box is what has to be the size. */

/* The nav row above 720: the links and the Light / dark button. Below 720 the
   links are rows of a panel, already taller than this, and the button is a
   full-width row. */
@media (min-width:721px){
  .bar nav a,
  .bar nav .mode{position:relative}
}

.barbtn::after,
.brand::after,
.strip-all::after,
.share-url::after,
.share-copy::after,
.share-feed::after,
.hunt button::after,
.recut button::after,
.results a.t::after,
.result-lead .t a::after,
.signup button::after{
  content:""; position:absolute; left:50%; top:50%; --hit:1;
  width:max(calc(100% + 2px), 44px); height:max(calc(100% + 2px), 44px);
  transform:translate(-50%,-50%);
}
@media (min-width:721px){
  .bar nav a::after,
  .bar nav .mode::after{
    content:""; position:absolute; left:50%; top:50%; --hit:1;
    width:max(calc(100% + 2px), 44px); height:max(calc(100% + 2px), 44px);
    transform:translate(-50%,-50%);
  }
}

/* A result title can wrap to two lines. A pseudo-element on an inline box that
   breaks across lines sits on the first fragment only, so the title becomes an
   inline-block; its lines wrap inside it exactly as they did. */
.results a.t{display:inline-block}

/* ── 2. Selects ─────────────────────────────────────────────────────────── */
.recut select,
.recut button{min-height:44px; box-sizing:border-box}

/* ── 3. Link lists: padding on the link, not on the row ─────────────────── */
/* Credit lists on production, show, venue, person and album pages: the
   director line, the creative team, the venue name in the facts. */
.stats dd a:not([class]),
.show-facts dd a:not([class]),
.obj-meta a:not([class]),
.meta a:not([class]){padding-block:4px}

/* The home band headings that became links: large inline text, so the same
   padding takes the target from the text's 27px on a phone to 45. */
.strip-head h2 .head-link{padding-block:9px}

/* The decade chips on a theatre page (section 4 below sets their height). */
.bars a.k{display:inline-block}

/* The co-stars list on a person page (`.tight-index`): names 22px tall, 15px
   apart. Same inline padding as the credit lists above. */
.tight-index li > a:not([class]){padding-block:4px}

/* ── 4. Decade chips: 44px, in rows that are 44px apart ─────────────────── */
/* The chart on a theatre page was eleven rows 31px apart, so a chip could be
   no taller than its row. Each row is now 44px with 2px between rows, and the
   chip fills it: no two chips overlap, and the bars keep their order and
   their widths. The chart is about 140px taller; that is the price of a
   target a thumb can hit on purpose. Applied at every width, because the
   audit measures desktop too and a mouse user with a tremor is no different. */
.bars{display:grid; row-gap:2px}
.bars li{padding:0; min-height:44px}
/* The bar's own name is also the name of the nav bar (`.bar`, site.css:407),
   which gives it 16px of padding and a rule under it. The track was 33px tall
   with a 1px content box, so the fill (`i`, height 100%) had no height and the
   chart showed eleven empty tracks. The track is 14px, as site.css:1688 says. */
.bars .bar{padding:0; border:0; box-sizing:border-box}
.bars a.k,
.bars span.k{display:inline-flex; align-items:center; min-height:44px;
  box-sizing:border-box}

/* ── 5. Text inputs and the focused skip link: 44px ─────────────────────── */
/* The nav search field was 38.5px. The other fields (the big search on /shows
   and /find, the account and list forms) already clear 44 on a phone; the
   floor is stated once here so a smaller font or padding cannot take them
   under it. Borderless fields (`.hunt`, `.find`) sit on a rule, so their
   visible edge does not move. */
input[type=search],
input[type=text],
input[type=email]{min-height:44px; box-sizing:border-box}

/* Focused, the skip link is 50px high already (24px padding, 4px border, one
   22px line). The floor is stated so a change to that padding cannot take it
   under 44. Measured while focused: design-audit-2026-10/scripts. */
.skip-link:focus{box-sizing:border-box; min-height:44px; min-width:44px}