/* Club search (club-search.js): typeset, full-width, flush with the page. */
.club-search { position: relative; width: 100%; container-type: inline-size; container-name: club-search; --cs-ink: var(--ink, #14211f); --cs-paper: var(--paper, #f4f0e7); --cs-line: var(--line, #c9c0af); --cs-muted: var(--muted, #6f756f); --cs-accent: var(--brand, var(--rust, #b54f36)); }
.cs-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-field { display: flex; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--cs-ink); padding: 6px 0 8px; }
.cs-input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; color: var(--cs-ink); font: 400 clamp(22px, 2.4vw, 30px)/1.2 var(--serif, Georgia, serif); outline: none; }
.cs-input::placeholder { color: var(--cs-muted); opacity: .75; }
.club-search.is-open .cs-field, .cs-input:focus-visible { border-bottom-color: var(--cs-accent); }
.cs-count { flex: none; color: var(--cs-muted); font: 700 11px/1 var(--sans, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.cs-panel { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; background: var(--cs-paper); border-bottom: 2px solid var(--cs-ink); max-height: min(62vh, 560px); overflow-y: auto; }
.cs-list { list-style: none; margin: 0; padding: 0; }
/* don't inherit a host label's caps (the phone options sheet sets uppercase on .mobile-option-field) */
.cs-panel { text-transform: none; letter-spacing: normal; }
.cs-group { padding: 14px 0 6px; border-bottom: 1px solid var(--cs-line); color: var(--cs-accent); font: 800 10.5px/1 var(--sans, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.cs-option { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 32px; grid-template-areas: "sw name facts act"; align-items: baseline; column-gap: 14px; row-gap: 2px; padding: 10px 4px; border-bottom: 1px solid var(--cs-line); cursor: pointer; }
.cs-option[aria-selected="true"], .cs-option:hover { background: rgba(20, 33, 31, .05); }
/* colour key only; no empty box on unhighlighted rows (D-019) */
.cs-swatch { grid-area: sw; width: 10px; height: 10px; align-self: start; margin-top: .45em; background: transparent; }
.cs-swatch.has-color { background: var(--sw); }
/* full names: wrap, never truncate (T-054) */
.cs-name { grid-area: name; min-width: 0; font: 400 19px/1.22 var(--serif, Georgia, serif); color: var(--cs-ink); overflow-wrap: anywhere; text-wrap: pretty; }
.cs-name b { font-weight: 700; }
.cs-meta { display: block; margin-top: 2px; color: var(--cs-muted); font: 500 12px/1.3 var(--sans, system-ui, sans-serif); }
.cs-facts { grid-area: facts; text-align: right; color: var(--cs-ink); font: 500 12.5px/1.3 var(--sans, system-ui, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-action { grid-area: act; align-self: center; justify-self: end; display: grid; place-items: center; width: 32px; height: 32px; color: var(--cs-muted); font: 500 18px/1 var(--sans, system-ui, sans-serif); }
.cs-option.is-on .cs-action { color: var(--cs-accent); }
.cs-option:hover .cs-action, .cs-option[aria-selected="true"] .cs-action { color: var(--cs-ink); }
.cs-foot { margin: 0; padding: 10px 4px 12px; color: var(--cs-muted); font: 500 11px/1 var(--sans, system-ui, sans-serif); letter-spacing: .04em; }
.cs-note { margin: 0; padding: 10px 4px; color: var(--cs-muted); border-top: 1px solid var(--cs-line); font: 500 11px/1.35 var(--sans, system-ui, sans-serif); }
.cs-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Narrow panel (toolbar, phones): facts drop under the name; judged by the panel, not the viewport */
@container club-search (max-width: 520px) {
  .cs-option { grid-template-columns: 10px minmax(0, 1fr) 32px; grid-template-areas: "sw name act" ". facts act"; column-gap: 12px; }
  .cs-name { font-size: 18px; }
  .cs-facts { text-align: left; color: var(--cs-muted); font-size: 12px; }
}
@media (max-width: 680px) { .cs-foot { display: none; } .cs-panel { max-height: 70vh; } }

/* Tie lists (createClubList): the search panel's rows, opened from a summary fact */
.club-list { margin-top: 0; }
.cs-panel-static { position: static; max-height: min(62vh, 520px); border-top: 2px solid var(--cs-ink); }
.cl-head { display: flex; align-items: center; gap: 12px; padding: 12px 4px 10px; border-bottom: 1px solid var(--cs-line); }
.cl-title { flex: 1; margin: 0; color: var(--cs-muted); font: 600 11px/1.3 var(--sans, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.cl-title b { color: var(--cs-accent); }
.cl-all { border: 1px solid var(--cs-ink); background: transparent; color: var(--cs-ink); padding: 6px 10px; font: 700 10.5px/1 var(--sans, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cl-all:disabled { border-color: var(--cs-line); color: var(--cs-muted); cursor: default; }
.cl-close { border: 0; background: none; color: var(--cs-muted); font: 400 22px/1 var(--sans, system-ui, sans-serif); cursor: pointer; padding: 0 4px; }
.cs-list:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
/* summary facts that open a tie list look like buttons */
.fact-button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 14px 16px; cursor: pointer; border-bottom: 3px solid transparent; }
.fact-button:hover, .fact-button[aria-expanded="true"] { background: rgba(20, 33, 31, .05); border-bottom-color: var(--cs-accent); }
.fact-button:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
.fact-button .fv { font: 400 clamp(20px, 2vw, 28px)/1.15 var(--serif, Georgia, serif); color: var(--cs-ink); }
.fact-button .fv::after { content: " ▾"; font-size: .6em; color: var(--cs-muted); }
.fact-button[aria-expanded="true"] .fv::after { content: " ▴"; }