/* 3Music TV — shared corner system (global authority)
   ---------------------------------------------------------------------------
   Every public page loads this file LAST, so it is the final word on corner
   radius. Its job is to make one rounded language cover the whole site:

     --tm-radius-sm       8px    micro surfaces: small thumbs, inline chips
     --tm-radius-control  12px   controls: buttons, inputs, selects, tabs
     --tm-radius-card     20px   cards, tiles, posters, media wraps
     --tm-radius-banner   28px   heroes, billboards, banners, panels
     --tm-radius-pill     999px  pills, tags, badges, bars, dots

   Tokens live in main.css (:root). Nothing here re-declares them.

   Ordering note: page and family stylesheets already speak this scale. This
   file only (a) maps the Tailwind radius utilities onto the scale for EVERY
   page — including the homepage, which is not a .tm-site-page — (b) sets a
   baseline for controls and media wraps that no other rule rounds, and
   (c) closes the remaining square-corner gaps by name. */

/* ── 1. Tailwind radius utilities → shared scale ──────────────────────────── */
/* The prebuilt tailwind.min.css ships its own 2–24px ladder. Remap it so a
   `rounded-xl` means the same thing on the homepage as it does on /news. */

.rounded-none { border-radius: 0 !important; }

.rounded,
.rounded-sm { border-radius: var(--tm-radius-sm) !important; }

.rounded-md,
.rounded-lg { border-radius: var(--tm-radius-control) !important; }

.rounded-xl,
.rounded-2xl { border-radius: var(--tm-radius-card) !important; }

.rounded-3xl { border-radius: var(--tm-radius-banner) !important; }

.rounded-full { border-radius: var(--tm-radius-pill) !important; }

/* Per-side variants */
.rounded-t-none { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.rounded-r-none { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rounded-b-none { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.rounded-l-none { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.rounded-t,
.rounded-t-sm { border-top-left-radius: var(--tm-radius-sm) !important; border-top-right-radius: var(--tm-radius-sm) !important; }
.rounded-r,
.rounded-r-sm { border-top-right-radius: var(--tm-radius-sm) !important; border-bottom-right-radius: var(--tm-radius-sm) !important; }
.rounded-b,
.rounded-b-sm { border-bottom-right-radius: var(--tm-radius-sm) !important; border-bottom-left-radius: var(--tm-radius-sm) !important; }
.rounded-l,
.rounded-l-sm { border-top-left-radius: var(--tm-radius-sm) !important; border-bottom-left-radius: var(--tm-radius-sm) !important; }

.rounded-t-md,
.rounded-t-lg { border-top-left-radius: var(--tm-radius-control) !important; border-top-right-radius: var(--tm-radius-control) !important; }
.rounded-r-md,
.rounded-r-lg { border-top-right-radius: var(--tm-radius-control) !important; border-bottom-right-radius: var(--tm-radius-control) !important; }
.rounded-b-md,
.rounded-b-lg { border-bottom-right-radius: var(--tm-radius-control) !important; border-bottom-left-radius: var(--tm-radius-control) !important; }
.rounded-l-md,
.rounded-l-lg { border-top-left-radius: var(--tm-radius-control) !important; border-bottom-left-radius: var(--tm-radius-control) !important; }

.rounded-t-xl,
.rounded-t-2xl { border-top-left-radius: var(--tm-radius-card) !important; border-top-right-radius: var(--tm-radius-card) !important; }
.rounded-r-xl,
.rounded-r-2xl { border-top-right-radius: var(--tm-radius-card) !important; border-bottom-right-radius: var(--tm-radius-card) !important; }
.rounded-b-xl,
.rounded-b-2xl { border-bottom-right-radius: var(--tm-radius-card) !important; border-bottom-left-radius: var(--tm-radius-card) !important; }
.rounded-l-xl,
.rounded-l-2xl { border-top-left-radius: var(--tm-radius-card) !important; border-bottom-left-radius: var(--tm-radius-card) !important; }

.rounded-t-3xl { border-top-left-radius: var(--tm-radius-banner) !important; border-top-right-radius: var(--tm-radius-banner) !important; }
.rounded-r-3xl { border-top-right-radius: var(--tm-radius-banner) !important; border-bottom-right-radius: var(--tm-radius-banner) !important; }
.rounded-b-3xl { border-bottom-right-radius: var(--tm-radius-banner) !important; border-bottom-left-radius: var(--tm-radius-banner) !important; }
.rounded-l-3xl { border-top-left-radius: var(--tm-radius-banner) !important; border-bottom-left-radius: var(--tm-radius-banner) !important; }

.rounded-t-full { border-top-left-radius: var(--tm-radius-pill) !important; border-top-right-radius: var(--tm-radius-pill) !important; }
.rounded-r-full { border-top-right-radius: var(--tm-radius-pill) !important; border-bottom-right-radius: var(--tm-radius-pill) !important; }
.rounded-b-full { border-bottom-right-radius: var(--tm-radius-pill) !important; border-bottom-left-radius: var(--tm-radius-pill) !important; }
.rounded-l-full { border-top-left-radius: var(--tm-radius-pill) !important; border-bottom-left-radius: var(--tm-radius-pill) !important; }

/* Per-corner variants */
.rounded-tl-none { border-top-left-radius: 0 !important; }
.rounded-tr-none { border-top-right-radius: 0 !important; }
.rounded-br-none { border-bottom-right-radius: 0 !important; }
.rounded-bl-none { border-bottom-left-radius: 0 !important; }

.rounded-tl, .rounded-tl-sm { border-top-left-radius: var(--tm-radius-sm) !important; }
.rounded-tr, .rounded-tr-sm { border-top-right-radius: var(--tm-radius-sm) !important; }
.rounded-br, .rounded-br-sm { border-bottom-right-radius: var(--tm-radius-sm) !important; }
.rounded-bl, .rounded-bl-sm { border-bottom-left-radius: var(--tm-radius-sm) !important; }

.rounded-tl-md, .rounded-tl-lg { border-top-left-radius: var(--tm-radius-control) !important; }
.rounded-tr-md, .rounded-tr-lg { border-top-right-radius: var(--tm-radius-control) !important; }
.rounded-br-md, .rounded-br-lg { border-bottom-right-radius: var(--tm-radius-control) !important; }
.rounded-bl-md, .rounded-bl-lg { border-bottom-left-radius: var(--tm-radius-control) !important; }

.rounded-tl-xl, .rounded-tl-2xl { border-top-left-radius: var(--tm-radius-card) !important; }
.rounded-tr-xl, .rounded-tr-2xl { border-top-right-radius: var(--tm-radius-card) !important; }
.rounded-br-xl, .rounded-br-2xl { border-bottom-right-radius: var(--tm-radius-card) !important; }
.rounded-bl-xl, .rounded-bl-2xl { border-bottom-left-radius: var(--tm-radius-card) !important; }

.rounded-tl-3xl { border-top-left-radius: var(--tm-radius-banner) !important; }
.rounded-tr-3xl { border-top-right-radius: var(--tm-radius-banner) !important; }
.rounded-br-3xl { border-bottom-right-radius: var(--tm-radius-banner) !important; }
.rounded-bl-3xl { border-bottom-left-radius: var(--tm-radius-banner) !important; }

.rounded-tl-full { border-top-left-radius: var(--tm-radius-pill) !important; }
.rounded-tr-full { border-top-right-radius: var(--tm-radius-pill) !important; }
.rounded-br-full { border-bottom-right-radius: var(--tm-radius-pill) !important; }
.rounded-bl-full { border-bottom-left-radius: var(--tm-radius-pill) !important; }

/* ── 2. Control baseline ──────────────────────────────────────────────────── */
/* Element-level (specificity 0,0,1) so any named rule still wins. This only
   catches controls that nothing else rounds — e.g. one-off page buttons. */

button,
[role="button"],
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea,
.tm-input {
    border-radius: var(--tm-radius-control);
}

/* ── 3. Media wrappers ────────────────────────────────────────────────────── */
/* Ratio boxes and card image wraps clip their contents, so rounding the wrap
   rounds the artwork with it. */

.tm-card-img-wrap,
.tm-card-img,
.tm-hero-mini-img,
.tm-ratio-16x9,
.tm-ratio-4x3,
.tm-ratio-1x1,
.tm-ratio-3x2 {
    border-radius: var(--tm-radius-card);
}

/* ── 3a. Content bands ───────────────────────────────────────────────────── */
/* A full-bleed band has no visible corners, so a page built from bands reads as
   square however round its cards are. Every content band therefore sits in the
   same 1328px column as the cards it holds, and carries the banner corner.
   The navbar and the site category bar stay full-bleed: they are the app frame,
   not page content, and a floating rounded navbar would read worse. */

.tm-band,
.tm-home-root .tm-home-section,
.tm-home-root .tm-nominees-bar {
    width: min(100% - 48px, 1328px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    border-radius: var(--tm-radius-banner) !important;
}

@media (max-width: 640px) {
    .tm-band,
    .tm-home-root .tm-home-section,
    .tm-home-root .tm-nominees-bar {
        width: calc(100% - 24px) !important;
    }
}

/* Bands that sit flush against each other read better with a little air. */
.tm-band + .tm-band {
    margin-top: 20px !important;
}

/* Page mastheads used to be full-bleed with only their bottom corners rounded,
   while the newsroom and homepage heroes were inset rounded panels. Bring them
   all onto the inset panel so a masthead reads the same on every route.
   Selectors are scoped to .tm-site-page to outrank the family stylesheets that
   set the old bottom-only radius; this file loads after them. */

.tm-band--hero,
.tm-site-page .tm-about-hero,
.tm-site-page .tm-contact-hero,
.tm-site-page .tm-policy-hero,
.tm-site-page .tm-search-hero,
.tm-site-page .tm-tickets-hero,
.tm-site-page .tm-checkout-hero,
.tm-site-page .tm-events-page-head,
.tm-site-page .tm-event-hero,
.tm-site-page .tm-media-masthead,
.tm-site-page .tm-live-page-header,
.tm-site-page .aw-hero,
.tm-site-page .awnom-hero,
.tm-site-page .awvote-hero,
.tm-site-page .awwin-hero,
.tm-site-page .awabout-hero {
    width: min(100% - 48px, 1328px) !important;
    margin-top: 16px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    /* The hard bottom rule existed to divide a full-bleed band from the content
       below it; an inset panel separates itself. */
    border-bottom: 0 !important;
    border-radius: var(--tm-radius-banner) !important;
}

/* Article hero — the family rule carries an id, so match it. */
.tm-editorial-article #tm-article-app > [x-show*="article"] > .relative[style*="82vh"],
.tm-editorial-article #tm-article-app > .animate-pulse > .bg-gray-300 {
    width: min(100% - 48px, 1328px) !important;
    margin-top: 16px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    border-radius: var(--tm-radius-banner) !important;
}

/* Their inner column was centred on the viewport; centre it on the panel. */
.tm-site-page .tm-about-hero {
    padding-right: max(24px, calc((100% - 1280px) / 2)) !important;
    padding-left: max(24px, calc((100% - 1280px) / 2)) !important;
}

.tm-site-page .tm-policy-hero {
    padding-right: max(24px, calc((100% - 960px) / 2)) !important;
    padding-left: max(24px, calc((100% - 960px) / 2)) !important;
}

@media (max-width: 640px) {
    .tm-band--hero,
    .tm-site-page .tm-about-hero,
    .tm-site-page .tm-contact-hero,
    .tm-site-page .tm-policy-hero,
    .tm-site-page .tm-search-hero,
    .tm-site-page .tm-tickets-hero,
    .tm-site-page .tm-checkout-hero,
    .tm-site-page .tm-events-page-head,
    .tm-site-page .tm-event-hero,
    .tm-site-page .tm-media-masthead,
    .tm-site-page .tm-live-page-header,
    .tm-site-page .aw-hero,
    .tm-site-page .awnom-hero,
    .tm-site-page .awvote-hero,
    .tm-site-page .awwin-hero,
    .tm-site-page .awabout-hero,
    .tm-editorial-article #tm-article-app > [x-show*="article"] > .relative[style*="82vh"] {
        width: calc(100% - 24px) !important;
    }
}

/* Sticky filter bars — same inset panel, so a pinned bar reads as a rounded
   pill rail rather than a hard rule across the page. The navbar and the site
   category bar stay full-bleed: they are the app frame, not page content. */

.tm-site-page .aw-tab-wrap,
.tm-site-page .awnom-year-bar,
.tm-site-page .awnom-tabs,
.tm-site-page .awwin-year-bar,
.tm-site-page .tm-music-genre-bar,
.tm-site-page .tm-tab-bar {
    width: min(100% - 48px, 1328px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    border-bottom: 0 !important;
    border-radius: var(--tm-radius-pill) !important;
}

@media (max-width: 640px) {
    .tm-site-page .aw-tab-wrap,
    .tm-site-page .awnom-year-bar,
    .tm-site-page .awnom-tabs,
    .tm-site-page .awwin-year-bar,
    .tm-site-page .tm-music-genre-bar,
    .tm-site-page .tm-tab-bar {
        width: calc(100% - 24px) !important;
    }
}

/* ── 3b. Ad slots ─────────────────────────────────────────────────────────── */
/* Every ad container carries .tm-ad-slot (plus --wide for leaderboards), so the
   creative is rounded wherever it lands: page bands, sidebars, article bodies.
   The anchor clips so the image follows the corner even when the ad markup
   sets its own inline sizing. */

.tm-ad-slot > template + a,
.tm-ad-slot > template + span,
.tm-ad-slot > a,
.tm-ad-slot > div,
.tm-ad-slot img,
.tm-ad-slot iframe,
.tm-ad-slot video {
    border-radius: var(--tm-radius-card) !important;
}

.tm-ad-slot--wide > template + a,
.tm-ad-slot--wide > template + span,
.tm-ad-slot--wide > a,
.tm-ad-slot--wide > div,
.tm-ad-slot--wide img,
.tm-ad-slot--wide iframe,
.tm-ad-slot--wide video {
    border-radius: var(--tm-radius-banner) !important;
}

/* Non-home page refresh rules use more specific card-radius selectors for ad
   slots. Keep wide creatives, their links, and their outer slot on the banner
   radius even inside those page families. */
.tm-site-page .tm-ad-slot.tm-ad-slot--wide,
.tm-site-page .tm-ad-slot.tm-ad-slot--wide > :is(a, div, span),
.tm-site-page .tm-ad-slot.tm-ad-slot--wide :is(img, iframe, video) {
    /* border-radius: var(--tm-radius-banner) !important; */
}

.tm-site-page .tm-ad-slot.tm-ad-slot--wide {
    overflow: hidden;
}

.tm-ad-slot > a,
.tm-ad-slot > div {
    overflow: hidden;
}

/* Circle ad creatives keep their shape */
.tm-ad-banner--circle > div,
.tm-ad-banner--circle img {
    border-radius: 50% !important;
}

/* ── 4. Remaining square-corner gaps ─────────────────────────────────────── */
/* Named, deliberately narrow. Each of these had no radius from any stylesheet. */

/* Shared components */
.tm-tag,
.tm-page-btn,
.tm-search-btn,
.tm-btn-ghost,
.tm-btn-outline {
    border-radius: var(--tm-radius-pill);
}

.tm-dropdown-item {
    border-radius: var(--tm-radius-sm);
}

/* Checkout — quantity stepper */
.tm-qty-btn {
    border-radius: var(--tm-radius-control) !important;
}

/* Ticket validation — scan button */
.tm-val-scan-btn {
    border-radius: var(--tm-radius-control) !important;
}

/* Event detail — related-event thumbnails and their date strip */
.tm-related-event-thumb {
    border-radius: var(--tm-radius-sm) !important;
}

.tm-related-event-date-badge {
    border-radius: 0 0 var(--tm-radius-sm) var(--tm-radius-sm) !important;
}

/* Livestream — related video cards */
.tm-rv-card,
.tm-rv-thumb {
    border-radius: var(--tm-radius-card) !important;
}

.tm-rv-card {
    overflow: hidden;
}

/* Music — video card ratio box (card clips it, but keep the box honest) */
.tm-mv-card-ratio {
    border-radius: var(--tm-radius-card) var(--tm-radius-card) 0 0;
}

/* Transient surfaces — skeletons, empty states, alerts and hover highlights.
   A computed-style audit never sees these (they are absent, invisible or
   un-hovered at audit time), so they are the last place square corners hide. */

/* Loading skeletons */
.tm-skel,
.tm-skel-dark,
.tm-bb-skel,
.tm-ticket-skel {
    border-radius: var(--tm-radius-sm) !important;
}

/* Empty states */
.tm-chart-empty {
    border-radius: var(--tm-radius-card) !important;
}

/* Inline alerts (a left accent bar reads square without one) */
.tm-alert-error,
.awvote-alert-error {
    border-radius: var(--tm-radius-control) !important;
}

/* List rows whose hover or active state paints a block behind the row */
.tm-suggestion-item,
.tm-sw-match,
.tm-music-more-item {
    border-radius: var(--tm-radius-sm) !important;
}

/* ── 5. Intentional circles stay circles ─────────────────────────────────── */
/* Re-asserted last so nothing above can flatten a dot, avatar or play button. */

.tm-avatar,
.tm-dot,
.tm-live-dot,
.tm-play-btn,
.tm-video-play-btn,
.tm-vid-hero-play-btn,
.tm-mv-card-play-circle,
.tm-dash-status-spinner,
.tm-payment-spinner,
.nc-mp-play-btn {
    border-radius: 50% !important;
}