/* Global corner radius: nothing on the site is square. Every rule here is wrapped in :where() so it has zero
   specificity: any stylesheet that sets its own border-radius (pills, circles, 0 on purpose) still wins, and
   everything that never mentioned a radius picks these up. Loaded from _Layout after site.css. */
:root{--r-xs:4px;--r:7px;--r-lg:12px;--r-xl:16px}

/* controls */
:where(button,.btn,.stepper,.linkbtn,.fchip,.sh-btn,.bp-close,.bp-foot .btn,.name-suggestions button,.tri button,.chip,.tag,.badge,.pill,
  input,select,textarea,.input,.textarea,.select,.select-inline,.input-inline,.sm-select,.sm-input,.qty,.qty button,.dj .btn,.dr .btn)
{border-radius:var(--r)}
:where(.tri button:first-child){border-top-right-radius:0;border-bottom-right-radius:0}
:where(.tri button:not(:first-child):not(:last-child)){border-radius:0}
:where(.tri button:last-child){border-top-left-radius:0;border-bottom-left-radius:0}
:where(.tag,.chip-cloud .chip,.bp-step,.beat,.counter){border-radius:var(--r-xs)}

/* containers */
:where(.panel,.card,.mix-edit,.export-grid,.groove-grid>.card,.notice,.buy-box,.price-card,.cost-table,.cost-table th:first-child,.cost-table td:first-child,
  .crate-row,.crate-empty,.take,.takes,.result-main,.wave,.cover,.cover-img,.lyrics-foot,.gen-dock,.dialog,dialog,.bp,.bp-log,.bp-bar,.bp-viz i,
  .ad .card,.sh-card,.cr-card,.dj-card,.dr-card,.content-card,.article,.toc,.faq,details,summary,blockquote,pre,code,kbd,table,.table,
  .hero,.feature,.step,.studio-card,.tile,.stat,.sm-card,.sm-sheet,.sm-panel,.sm-result,.mix-timeline .seg,.mode-tabs,.mode-tabs a,.topbar-link,.credits,.btn-topup,
  img,video,canvas,audio,iframe,.img,.thumb,.avatar,.wave-canvas,#wave-canvas,.blend-slot,.genre-pop,.pop-foot,.fam-tabs button,.wd-chips .chip,.loud-ctl,.error,.ok,.bad)
{border-radius:var(--r)}
:where(.panel,.bp,.dialog,dialog,.hero,.sh-card,.cr-card,.buy-box,.price-card,.sm-sheet,.ad .card){border-radius:var(--r-lg)}
:where(.notice,.error[role=alert],.bp-log){border-radius:var(--r)}

/* progress and meters */
:where(progress,.progress,.meter,.bar,.bp-bar,.bp-bar i,.bp-viz i,.wave-lbl,.scrub,.seek){border-radius:var(--r-xs)}
:where(input[type=range]){border-radius:999px}

/* checkboxes: native boxes cannot be rounded, so draw them. Size comes from the page's own rule. */
:where(input[type=checkbox]){appearance:none;-webkit-appearance:none;border:1px solid var(--border2,#2A323B);background:var(--bg,#0B0D10);border-radius:var(--r-xs);display:inline-block;vertical-align:middle;position:relative;flex:0 0 auto;transition:background .12s,border-color .12s}
:where(input[type=checkbox]:hover){border-color:var(--accent,#FF2B40)}
:where(input[type=checkbox]:checked){background:var(--accent,#FF2B40) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D10' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/72% no-repeat;border-color:var(--accent,#FF2B40)}
:where(input[type=checkbox]:disabled){opacity:.45;cursor:not-allowed}
:where(input[type=checkbox]:focus-visible){outline:2px solid var(--accent,#FF2B40);outline-offset:2px}
:where(input[type=radio]){border-radius:50%}

/* groups that should read as one rounded unit */
:where(.row-3 .btn:not(:only-child),.btn-group .btn){border-radius:var(--r)}
:where(.dr-tabs,.dj-tabs,.fam-tabs){border-radius:var(--r)}