/* TICKETS (founder 2026-10-17: "ticket style ones" + "not cards but instead like edge to edge border"; PKT:wf-tickets).
   Design board A "Ticket stubs". ONE shared layer, scoped under :root.tickets (flag ticketUi, default OFF; the class is toggled by
   src/app/tickets.js, so removing the class puts every pill back exactly as it was). Replaces the wristband layer.
   Single controls = one ticket stub (notched corners via clip-path: text upright, box never wider). GROUPS of small controls are ONE
   continuous strip edge to edge of the container: segments butt, dashed perforation seams, notches only on the two ends (section 9).
   Colour roles are the sites' own: this layer sets SHAPE only and never a background-colour (a few gradient badges state theirs).
   Fields: flat with a coloured bottom bar. Big cards/panels/round icon buttons keep their corners. No animation added.
   Specificity: `:not(#tk)` lifts the scope above every site rule (incl. :root.hud-v2 and #id ones). */

:root.tickets {
  --tk-n: 7px;                          /* corner notch, in px */
  --tk-padx: 9px;                       /* label padding inside the notched ends (added to --tk-n) */
  --tk-notch: polygon(var(--tk-n) 0, calc(100% - var(--tk-n)) 0, 100% var(--tk-n), 100% calc(100% - var(--tk-n)),
                      calc(100% - var(--tk-n)) 100%, var(--tk-n) 100%, 0 calc(100% - var(--tk-n)), 0 var(--tk-n));
  --tk-fabric: none;
  --tk-seam: #1a2346;                   /* strip colour = what shows between segments */
  --tk-perf: 2px dashed #0b1024;        /* the perforation */
  --tk-bar: #7b2cff;                    /* the field's coloured bottom bar */
}

/* ---- 1. STUB: interactive controls (buttons, tabs, chips, toggles). >= 32px tall, 44 on touch. ---- */
:root.tickets:not(#tk) :is(
  .custbtn, .authbtn, .nights-chip, .chat-filter button, .sayrow button, .main-item, .interact-pill, .pslot-btn,
  .chill-shop .merch-tab, .chill-shop .donate-go, .flag-toggle, .item-toggle, .ach-filter,
  .fr-go, .fr-ghost, .if-btn, .if-more, .if-menu-item, .inspect-trade, .inspect-actions .if-btn, .inspect-actions .if-more,
  .qp-vote, .qp-chip, .cn-skip, .kandi-view .kandi-tab, .my-wook .mw-account-btn,
  .interact-prompt[data-kind="trinket-gift"] .interact-buttons button,
  .hv-menubtn, .hv-menu-close, .np .vbtn, .queue-vote, #suggestgo, .hv-moves-panel #gifts .ap-tab,
  .hv-stage, #closed-pill, .my-wook .mm .fb, .my-wook .mm .chipb, .activity-panel .ap-tab,
  .kandi-view .kandi-wear, .inventory-view .inv-pick, .mw-look-worn .inv-pick, .my-wook .mw-takeoff, .controls-menu .cm-view, .controls-menu .cm-trip
) {
  border-radius: 0;
  clip-path: var(--tk-notch);
  box-shadow: var(--tk-fabric);
  min-height: 32px;
  padding-inline: calc(var(--tk-padx) + var(--tk-n));
  font-family: var(--mono, monospace);
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* outfit slot buttons are small numbered chips: keep them compact */
:root.tickets:not(#tk) .my-wook .mm .fb { padding-inline: calc(var(--tk-n) + 3px); min-width: 44px; }
/* the stage pill is a container (select + live count): same band, its own inner padding */
:root.tickets:not(#tk) .hv-stage { padding-inline: calc(4px + var(--tk-n)) calc(10px + var(--tk-n)); }
/* tab strips: the capsule around the gift tabs goes, the tabs are bands on the line (classic HUD + hud-v2) */
:root.tickets:not(#tk) :is(.hv-moves-panel #gifts .ap-tabs) { border-radius: 0; clip-path: var(--tk-notch); }
:root.tickets:not(#tk) .activity-panel .ap-tabs { border-radius: 0; border-width: 0 0 1px 0; padding: 0; gap: 2px; background: transparent; }

/* ---- 2. STATIC stubs: hints, prompts, captions, chips that are shown, not pressed (no min-height rule) ---- */
:root.tickets:not(#tk) :is(
  .move-hint, .chill-prompt, .mg-pill, .pslot-card, .pslot-pill, .friends-boost, .gr-kicker, .qd-name, .qc-pill, .chill-shop .bracelet,
  .inspect-pill, .inspect-v2 .inspect-kind, .inspect-v2 .inspect-supporter, .activity-panel .ap-mosh-count,
  .ach-toast-tier, .tbadge, .fbadge, .pov-hint, .drone-hint, .qc-newclue,
  .kandi-view .kandi-worn, .shop-badge
) {
  border-radius: 0;
  clip-path: var(--tk-notch);
  box-shadow: var(--tk-fabric);
  padding-inline: calc(var(--tk-padx) + var(--tk-n));
  font-family: var(--mono, monospace);
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* small ones: a tighter notch + padding */
:root.tickets:not(#tk) :is(.tbadge, .fbadge, .ach-toast-tier, .activity-panel .ap-mosh-count, .inspect-v2 .inspect-kind, .qd-name) {
  --tk-n: 4px;
  --tk-padx: 5px;
}
/* dense rows (music dock, hints, tab strips, chips): tighter label padding so nothing wraps or collides */
:root.tickets:not(#tk) :is(.custbtn, .authbtn, .nights-chip, .np .vbtn, .queue-vote, #suggestgo, .move-hint, .main-item, .chat-filter button,
  .qp-vote, .qp-chip, .ach-filter, .activity-panel .ap-tab, .inspect-actions .if-btn, .inspect-actions .if-more, .my-wook .mm .chipb, .pov-hint, .drone-hint,
  .kandi-view .kandi-wear, .kandi-view .kandi-worn, .inventory-view .inv-pick, .mw-look-worn .inv-pick, .my-wook .mw-takeoff) {
  --tk-padx: 4px;
  letter-spacing: .05em;
}
/* the header row is the tightest: smaller notch + tracking so six buttons + the stats fit */
:root.tickets:not(#tk) :is(.custbtn, .authbtn, .nights-chip) { --tk-n: 5px; letter-spacing: .04em; }
/* the progress track is a band too */
:root.tickets:not(#tk) .ach-bar { border-radius: 0; clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px); }
:root.tickets:not(#tk) .ach-bar span { border-radius: 0; }

/* ---- 3. FIELDS: flat, coloured bottom bar, no capsule ---- */
:root.tickets:not(#tk) :is(.sayrow input, .track-search-wrap, .stagepick select) {
  border-radius: 0;
  border-width: 0 0 3px 0;
  border-style: solid;
  border-bottom-color: var(--tk-bar);
  background-clip: padding-box;
}
:root.tickets:not(#tk) .hv-stage .stagepick select { border-bottom-width: 0; }      /* inside the stage band already */

/* ---- 4. SWITCH: notched track, round bead ---- */
:root.tickets:not(#tk) .controls-menu .cm-switch { width: 40px; border-radius: 0; clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); }
:root.tickets:not(#tk) .controls-menu .cm-switch::before { left: 7px; }
:root.tickets:not(#tk) .controls-menu .cm-switch:checked::before { transform: translateX(12px); }

/* ---- 6. hover, focus (outline stays INSIDE the clip so it is visible), touch ---- */
:root.tickets:not(#tk) :is(.custbtn, .authbtn, .nights-chip, .chat-filter button, .sayrow button, .main-item, .interact-pill, .pslot-btn,
  .chill-shop .merch-tab, .chill-shop .donate-go, .flag-toggle, .item-toggle, .ach-filter, .fr-go, .fr-ghost, .if-btn, .if-more,
  .if-menu-item, .inspect-trade, .qp-vote, .qp-chip, .cn-skip, .kandi-view .kandi-tab, .my-wook .mw-account-btn,
  .hv-menubtn, .hv-menu-close, .np .vbtn, .queue-vote, #suggestgo, .hv-moves-panel #gifts .ap-tab,
  .my-wook .mm .fb, .my-wook .mm .chipb, .activity-panel .ap-tab,
  .kandi-view .kandi-wear, .inventory-view .inv-pick, .mw-look-worn .inv-pick, .my-wook .mw-takeoff, .controls-menu .cm-view, .controls-menu .cm-trip):focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
:root.tickets:not(#tk) :is(.sayrow input, .track-search-wrap input, .stagepick select):focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (pointer: coarse) {
  :root.tickets:not(#tk) :is(.custbtn, .authbtn, .nights-chip, .chat-filter button, .sayrow button, .main-item, .interact-pill, .pslot-btn,
    .chill-shop .merch-tab, .chill-shop .donate-go, .flag-toggle, .item-toggle, .ach-filter, .fr-go, .fr-ghost, .if-btn, .if-more,
    .if-menu-item, .inspect-trade, .qp-vote, .qp-chip, .cn-skip, .kandi-view .kandi-tab, .my-wook .mw-account-btn,
    .hv-menubtn, .hv-menu-close, .np .vbtn, .queue-vote, #suggestgo, .hv-moves-panel #gifts .ap-tab,
    .my-wook .mm .fb, .my-wook .mm .chipb, .activity-panel .ap-tab,
    .kandi-view .kandi-wear, .inventory-view .inv-pick, .mw-look-worn .inv-pick, .my-wook .mw-takeoff, .controls-menu .cm-view, .controls-menu .cm-trip) {
    min-height: 44px;
  }
}

/* ---- 7. role colours the layer has to state itself (gradient fills the site used) + contrast fixes ---- */
:root.tickets:not(#tk) .tbadge { background-color: #ffd54a; background-image: none; color: #0b1024; border: 0; text-shadow: none; }
:root.tickets:not(#tk) .tbadge--artist { background-color: #5be3ea; color: #0b1024; }
:root.tickets:not(#tk) .tbadge--supporter, :root.tickets:not(#tk) .raver-tag .rtitle.tbadge--supporter {
  background-color: var(--supporter-blue, #6fc3ff); color: #0a1f33; padding-inline: calc(5px + 4px);
}
:root.tickets:not(#tk) :is(.flag-toggle.off, .item-toggle.off) { color: #aebbe0; }   /* 7.9:1 on #10172d (was 3.4:1) */
:root.tickets:not(#tk) .fbadge { color: #b3c0e4; }

/* ---- 8. phone: the notch costs no width (clip-path), so nothing overflows; tighten the paddings a little ---- */
@media (max-width: 520px) {
  :root.tickets { --tk-padx: 9px; }
  /* the new HUD's top strip must still fit logo + stage band + Menu in 390px */
  :root.tickets:not(#tk) .hv-stage { --tk-n: 5px; padding-inline: calc(2px + var(--tk-n)) calc(6px + var(--tk-n)); min-width: 0; }
  :root.tickets:not(#tk) .hv-menubtn { --tk-n: 5px; padding-inline: calc(8px + var(--tk-n)); min-width: 0; }
  /* narrow screens: the "N live" label drops to a dot (kept for screen readers) so the whole stage name fits */
  :root.tickets:not(#tk) .hv-stage .stagepick select { max-width: 158px; text-overflow: ellipsis; }
  :root.tickets:not(#tk) .hv-stage { gap: 4px; }
  :root.tickets:not(#tk) .hv-stage .hv-live { padding-left: 6px; }
  :root.tickets:not(#tk) .hv-stage .hv-live > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- 9. STRIPS: a group of small controls is one edge-to-edge ticket (overrides the stubs above for its segments) ---- */
/* ---- strips: edge to edge, segments butt, perforated seams, notches only at the two ends ---- */
:root.tickets:not(#tk) :is(.chat-filter, .np .vote, .inspect-actions, .inspect-pills, .hv-moves-panel #gifts .ap-tabs, .activity-panel .ap-tabs) {
  display: flex; flex-wrap: nowrap; gap: 0; align-items: stretch;
  width: 100%; box-sizing: border-box; margin: 0; padding: 0; list-style: none;
  border: 0; border-radius: 0; background: var(--tk-seam);
  clip-path: var(--tk-notch);
}
:root.tickets:not(#tk) .chat-filter { width: auto; flex: 0 1 190px; margin-left: 14px; }
:root.tickets:not(#tk) .chat-head { white-space: nowrap; }
:root.tickets:not(#tk) .inspect-pills { flex-wrap: wrap; }
/* segments */
:root.tickets:not(#tk) :is(.chat-filter > button, .np .vote > .vbtn, .inspect-actions > *, .inspect-pills > li,
  .hv-moves-panel #gifts .ap-tabs > .ap-tab, .activity-panel .ap-tabs > .ap-tab) {
  flex: 1 1 0; min-width: 0; min-height: 32px; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; clip-path: none;
  padding-inline: 12px; text-align: center; justify-content: center;
  font-family: var(--mono, monospace); text-transform: uppercase; letter-spacing: .08em;
}
:root.tickets:not(#tk) :is(.chat-filter > button, .np .vote > .vbtn, .inspect-actions > *, .inspect-pills > li,
  .hv-moves-panel #gifts .ap-tabs > .ap-tab, .activity-panel .ap-tabs > .ap-tab):not(:first-child) { border-left: var(--tk-perf); }
/* the volume slider is a segment too, no seam colour of its own */
:root.tickets:not(#tk) .np .vote > .vbtn { padding-inline: 6px; letter-spacing: .03em; white-space: nowrap; }
:root.tickets:not(#tk) .np .vote > .volctl { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; border-left: var(--tk-perf); }
:root.tickets:not(#tk) .inspect-pills > li { flex: 1 1 auto; border-bottom: var(--tk-perf); font-size: 12px; }
:root.tickets:not(#tk) :is(.chat-filter > button[aria-pressed="true"], .hv-moves-panel #gifts .ap-tab[aria-selected="true"]) { text-shadow: none; }

/* focus stays inside the clip */
:root.tickets:not(#tk) :is(button, .vbtn):focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* stage pill + live label stay readable and never push the Menu stub off (desktop hint beside it, phone) */
:root.tickets:not(#tk) .hv-stage { text-transform: none; letter-spacing: 0; padding-inline: 12px; min-width: 0; }
:root.tickets:not(#tk) .hv-stage .hv-live { text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 520px) {
  :root.tickets:not(#tk) .hv-stage { padding-inline: 8px; gap: 4px; }
  :root.tickets:not(#tk) .hv-stage .stagepick select { max-width: 150px; text-overflow: ellipsis; }
  :root.tickets:not(#tk) .hv-stage .hv-live > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :root.tickets:not(#tk) .hv-menubtn { padding-inline: 10px; }
  :root.tickets:not(#tk) .np .vote > .vbtn { padding-inline: 6px; letter-spacing: .02em; font-size: 11px; white-space: nowrap; }
  :root.tickets:not(#tk) .np .vote > .volctl { flex: 1 1 0; }
  :root.tickets:not(#tk) .np .vote > .volctl input { width: 100%; min-width: 0; }
}
:root.tickets:not(#tk) .np .vote > .skipbtn { flex: 1.5 1 0; }
:root.tickets:not(#tk) .np .vote > .skipbtn { letter-spacing: 0; padding-inline: 4px; font-size: 10px; }
:root.tickets:not(#tk) .np .vote > .volctl > span { display: none; }

/* the prompt slot's buttons: same stub, a touch tighter so "Pay respects · F" never wraps (PKT:wf-prompt-slot-martinex) */
:root.tickets:not(#tk) .pslot-btn { letter-spacing: .04em; font-size: 12px; padding-inline: calc(8px + var(--tk-n)); }