/* Public catalogue (WP4.1): hub, roster list and profile, packages. Tokens only (light and dark stay in parity), logical
   properties, 44 px targets from 320 px, state never by colour alone (every state carries its word). */
.catalog .lead { font-size: 1.125rem; max-inline-size: 48rem; }
.catalog .pre { white-space: pre-wrap; }
.catalog .price { font-weight: 700; margin-block: .25rem; }
.kicker { margin: 0; font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
:lang(th) .kicker, :lang(hi) .kicker, :lang(zh) .kicker { text-transform: none; }
.hub-hero { padding-block: .5rem 1rem; border-block-end: 4px solid var(--accent); }
.offer-grid, .artist-grid, .package-grid, .phone-list, .slot-lines, .avail-strip, .card-actions, .catalog ul.cluster, .catalog ul.actions { list-style: none; padding: 0; margin: 0; }
.offer h3, .artist-card h3, .package-card h3 { margin: 0; }
.how-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.phone-list li { min-block-size: 2.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }

/* artist cards: round portrait focused on the face (self-hosted, never upscaled), initials when there is no photo */
.artist-card { display: flex; gap: .75rem; align-items: flex-start; }
.photo { flex: none; display: block; }
.photo img { display: block; background: var(--surface-2); }
.photo-thumb img { inline-size: 5rem; block-size: 5rem; border-radius: 50%; object-fit: cover; object-position: top; }
.photo-profile { max-inline-size: 100%; }
.photo-profile img { max-inline-size: 100%; block-size: auto; border-radius: var(--radius); }
.artist-card .avatar { inline-size: 5rem; block-size: 5rem; }
.artist-body { flex: 1; min-inline-size: 0; --gap: .5rem; }
.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; font: 400 1.5rem/1 var(--font-display); letter-spacing: .04em; }
.avatar-lg { inline-size: 6rem; block-size: 6rem; font-size: 2.5rem; }
.avatar-1 { background: var(--btn-bg); color: var(--btn-fg); }
.avatar-2 { background: var(--accent); color: var(--on-accent); }
.avatar-3 { background: var(--chrome-2); color: var(--on-chrome); border: 2px solid var(--border); }
.avatar-4 { background: var(--info-bg); color: var(--info); border: 2px solid var(--info); }
.card-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* style badges: brand colour families, AA text in both themes (the badge pairs of tests/Http/Catalog/Fixtures/style-badge-pairs.json);
   the word is always written, colour only decorates */
.style-badges { display: flex; flex-wrap: wrap; gap: .375rem; list-style: none; padding: 0; margin: 0; }
.style-badge { display: inline-flex; align-items: center; min-block-size: 1.75rem; padding-inline: .625rem; border: 2px solid transparent; border-radius: 999px; font-size: .8125rem; font-weight: 700; line-height: 1.2; }
.style-yellow { background: var(--dt-yellow); color: var(--dt-dark); }
.style-indigo { background: var(--dt-indigo); color: var(--on-chrome); }
.style-red { background: var(--dt-red); color: var(--dt-black); }
.style-dark { border-color: currentColor; color: var(--text); }
.style-neutral { border-style: dashed; border-color: var(--border); color: var(--text-muted); }
.card-actions .btn { min-block-size: 2.75rem; }

/* roster filters: a <details> panel, a column of its own on wide screens */
.roster-layout { display: grid; gap: 1.5rem; }
@media (min-width: 62em) { .roster-layout { grid-template-columns: 17rem 1fr; align-items: start; } }
.filters > summary { min-block-size: 2.75rem; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.filter-form { margin-block-start: .75rem; }
.filter-form .field { margin: 0; }
.chip-radios { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.chip-radios legend { inline-size: 100%; margin-block-end: .25rem; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-radio label { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: .875rem; border: 2px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font-weight: 400; margin: 0; }
.chip-radio input:checked + label { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); font-weight: 700; }
.chip-radio input:checked + label::before { content: "\2713\00a0"; }
.chip-radio input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.result-count { font-weight: 700; margin: 0; }
[data-roster-results][aria-busy="true"] { opacity: .6; }
.empty { border-style: dashed; }

/* profile */
.profile-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.profile-head > .stack { flex: 1 1 16rem; --gap: .5rem; }
.profile-head h1 { margin: 0; }
.profile-about { margin-block-start: 1rem; --gap: .75rem; }
.profile-about h2 { margin: 0; }
.profile-docs { margin-block-start: 1rem; --gap: .5rem; }
.profile-docs h2 { margin: 0; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.doc { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.doc-name { font-weight: 600; }
/* booking terms page */
.terms-toc ol { margin: 0; padding-inline-start: 1.25rem; columns: 2 16rem; }
.terms-body { max-inline-size: 52rem; }
.terms-body h2 { margin-block: 2rem .5rem; }
.terms-body .t { margin: .4rem 0; }
.terms-body .t-mark { display: inline-block; min-inline-size: 2rem; font-weight: 600; }
.terms-body .lvl-2 { margin-inline-start: 2rem; }
.terms-body .lvl-3 { margin-inline-start: 4rem; }
.terms-body .lvl-4 { margin-inline-start: 6rem; }
@media (max-width: 40em) { .terms-body .lvl-2 { margin-inline-start: 1rem; } .terms-body .lvl-3 { margin-inline-start: 2rem; } .terms-body .lvl-4 { margin-inline-start: 3rem; } }
.terms-body .t-title { font-weight: 700; }
.profile-bio { --gap: .75rem; max-inline-size: 48rem; }
.profile-bio p { margin: 0; white-space: pre-line; }
.profile-bio p + p { margin-block-start: var(--gap); }
.cta-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; z-index: 2; }
.cta-bar .hint { margin: 0; flex: 1 1 14rem; }
.avail-strip { display: grid; gap: .25rem; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.avail { display: flex; flex-direction: column; padding: .25rem .375rem; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg); font-size: .8125rem; line-height: 1.3; }
.avail-date { font-weight: 700; }
.avail-available { border-color: var(--success); background: var(--success-bg); }
.avail-on-request { border-style: dashed; border-color: var(--warn); background: var(--warn-bg); }
.avail-unavailable { border-style: dotted; color: var(--text-muted); background: repeating-linear-gradient(135deg, transparent 0 .3rem, var(--divider) .3rem .35rem); }

/* upcoming concerts (follow-up 2026-10-10): a plain list, one concert per item, wraps at 320 px */
.concert-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; max-inline-size: 48rem; }
.concert { padding-inline-start: .75rem; border-inline-start: 3px solid var(--accent); }
.concert-line { margin: 0; overflow-wrap: anywhere; }
.concert-when, .concert-event { font-weight: 700; }
.concert-note { margin: .25rem 0 0; }

/* packages */
.slot-lines { display: grid; gap: .5rem; }
.slot-line { padding-inline-start: 1rem; border-inline-start: 3px solid var(--accent); }
.slot-line .badge { margin-inline-start: .25rem; }
.choices { display: block; font-size: .9375rem; }
.package-card h4 { margin-block-end: 0; }

@media (forced-colors: active) {
  .chip-radio label, .avail, .avatar, .style-badge { border: 2px solid ButtonText; }
  .chip-radio input:checked + label { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}