/* =============================================================================
   extra.css — styling for the added controls.

   Every colour is a var() with a fallback, which is what lets this ship onto a
   page in either edition without knowing which one it is (the same reason
   search.css travels). Nothing here restyles a control the page already had.
   ============================================================================ */

.ctx {
    display: flex; flex-direction: column; gap: .6rem;
    margin: 1rem 0 0; padding: .9rem 0 0;
    border-top: 1px solid var(--line, rgba(30, 38, 43, .14));
}
.ctx__row {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: nowrap; overflow-x: auto;      /* one unwrappable row must not widen the page */
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.ctx__row--wrap { flex-wrap: wrap; overflow: visible; }

.ctx__lbl {
    font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--dim, #6a747c); flex: 0 0 auto; font-weight: 600;
}
.ctx__and { font-size: .8rem; color: var(--dim, #6a747c); flex: 0 0 auto; }

.ctx__date, .ctx__city {
    font: inherit; font-size: 16px;            /* under 16px iOS zooms the page */
    padding: .38rem .55rem;
    border: 1px solid var(--line, rgba(30, 38, 43, .18));
    border-radius: 9px; background: var(--paper, #fff); color: var(--ink, #1e262b);
    flex: 0 0 auto; min-width: 0;
}
.ctx__city { flex: 1 1 14rem; max-width: 22rem; }
.ctx__date:focus-visible, .ctx__city:focus-visible,
.ctx__b:focus-visible, .ctx__chip:focus-visible {
    outline: 2px solid var(--accent, #c8443c); outline-offset: 2px;
}

.ctx__b, .ctx__chip {
    font: inherit; font-size: .78rem; line-height: 1;
    padding: .45rem .7rem; cursor: pointer; flex: 0 0 auto;
    border: 1px solid var(--line, rgba(30, 38, 43, .18));
    border-radius: 999px;
    background: transparent; color: var(--ink, #1e262b);
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.ctx__b:hover, .ctx__chip:hover { border-color: var(--ink, #1e262b); }
.ctx__b[aria-pressed="true"], .ctx__chip[aria-pressed="true"] {
    background: var(--ink, #1e262b); color: var(--paper, #fff); border-color: var(--ink, #1e262b);
}
.ctx__chip i { font-style: normal; opacity: .55; margin-left: .25rem; font-variant-numeric: tabular-nums; }

.ctx__watch { margin-left: auto; font-size: .78rem; color: var(--dim, #6a747c); flex: 0 0 auto; }
.ctx__watch b { color: var(--ink, #1e262b); font-variant-numeric: tabular-nums; }
.ctx__hint { font-size: .74rem; color: var(--dim, #6a747c); flex: 0 0 auto; font-variant-numeric: tabular-nums; }

.ctx__note {
    margin: .8rem 0 0; font-size: .8rem; color: var(--dim, #6a747c);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- PRINT --
   The paper edition earns a printed bill: chrome off, cards unbroken, and the
   ticket link spelled out because paper cannot be clicked. */
@media print {
    .nav, .menu, .ctx, .band--tint > .wrap > .seg, #ct-map, #ct-canvas,
    .hero__cta, .foot, #ct-sync, .toast, .ask, .search { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .game, .card, [data-id] { break-inside: avoid; page-break-inside: avoid; }
    [data-id] a[href]::after { content: " (" attr(href) ")"; font-size: .7em; word-break: break-all; }
    a { text-decoration: none; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
    .ctx__b, .ctx__chip { transition: none; }
}