/**
 * FMC corner radius scale (the app uses the same numbers) and the default rounding for the website.
 *
 * Defined ONCE here, on :root, as CSS custom properties. Every other stylesheet and inline <style> block uses them WITH a fallback,
 * for example `border-radius: var(--fmc-r-md, 14px)`, so a page that does not have this file still renders with the same corners.
 *
 *   xs   6 px  tiny tags, badges, inline code
 *   sm  10 px  small chips and buttons, thumbnails, small tiles
 *   md  14 px  buttons, text inputs, textareas, selects, notices
 *   lg  20 px  cards, panels, list rows, modals, dropdown menus
 *   xl  28 px  bottom sheets (top corners), chat-composer style fields
 *   pill 999 px  filter chips, toggles, round floating buttons, progress bars
 *
 * Loaded early on every front-end page (FMC_Radius::enqueue_front, wp_enqueue_scripts priority 0, so the theme's style.css and every
 * plugin stylesheet come after it), on the login screen, and on every wp-admin FMC screen (body.fmc-admin; FMC_Radius::enqueue_admin).
 *
 * Part 1 are the variables. Part 2 is the default for form controls. Part 3 is the table of FMC classes that never had a corner of
 * their own. Parts 2 and 3 are written with :where(), which has ZERO specificity: any stylesheet that gives the same element its own
 * `border-radius` (circles, avatars, the Connect phone look, the Ask Olivia button, Editorial Home) always wins, whatever the load order.
 * Part 4 is where the squares that stay on purpose are explained (none are left as rules in this file). docs/design/RADIUS.md explains all of it.
 * Only the corner changes here: no colour, spacing, font or behaviour.
 */

/* ---- 1. The scale ---------------------------------------------------------------------------------------------------------- */
:root {
	--fmc-r-xs: 6px;
	--fmc-r-sm: 10px;
	--fmc-r-md: 14px;
	--fmc-r-lg: 20px;
	--fmc-r-xl: 28px;
	--fmc-r-pill: 999px;
}

/* ---- 2. Form controls: every button, text field, textarea and select that has no corner of its own -------------------------- */
/* Checkboxes, radios, ranges, colour pickers, file and image inputs keep the browser's own shape. The WordPress admin bar is left alone. */
:where(button:not(#wpadminbar *), input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="image"]):not(#wpadminbar *), select:not(#wpadminbar *), textarea:not(#wpadminbar *)) {
	border-radius: var(--fmc-r-md, 14px);
}

/* 2b. The Gallery and the member events page used to reset their controls to square; the corner is now given here at zero strength, so their own chips, pills and round buttons keep their step. */
:where(
	.fmc-gl button, .fmc-gl input, .fmc-gl textarea, .fmc-gl select, .fmc-gl-modal-back button, .fmc-gl-modal-back input, .fmc-gl-modal-back textarea,
	.fmc-gl-modal-back select, .fmc-gl-light button, .fmc-gl-light input, .fmc-gl-light textarea, .fmc-me button, .fmc-me input, .fmc-me textarea
) {
	border-radius: var(--fmc-r-md, 14px);
}

/* ---- 3. FMC classes that were square ---------------------------------------------------------------------------------------- */

/* pill: filter chips, status pills, tab chips, toggles */
:where(
	.fmc-cat, .fmc-tab, .fmc-camp .pill, .fmc-deal .pill, .fmc-job-pills .pill, .fmc-mobnav-strip a, .fmc-dlrow .dl-proof,
	.fmc-co-pill, .fmc-ce-pill, .fmc-cn-pill, .fmc-gl-pill, .fmc-vd-pill, .fmc-nd-pill, .fmc-me-chip, .fmc-sh-chip, .fmc-sc-chip,
	.fmc-evm-chip, .fmc-gl-chip, .fmc-locpick-chip, .fmc-fav-switch, .fmc-fav-switch-save, .fmc-acc-chip, .fmc360-chip, .fmc-sc-seg-0, .fmc-sc-seg-1, .fmc-sc-seg-2, .fmc-sc-seg-3,
	.fmc360-filters a, .fmc-gl-vchip, .fmc-gl-htchip, .fmc-ab-badges li, .fmc-ab-toc a, .fmc-ab-soon
) {
	border-radius: var(--fmc-r-pill, 999px);
}

/* xs: tiny tags and badges */
:where(
	.fmc-ag-st, .fmc-tag, .fmc-dash .tag, .fmc-dash .band, .fmc-rv-tag-checked, .fmc-lk-tag, .fmc-rw-badge, .fmc-gl-badge, .fmc-me-badge,
	.fmc-deal-card__badge, .fmc-deal-tag, .fmc-venue-card__badge, .fmc-ai-label, .dl-note, .dl-ai-badge, .fmc-acc .badge,
	.fmc-acc-tax .badge, .fmc-mail-msg .dir, .fmc-call-label, body.fmc-admin .wrap code, body.fmc-admin .wrap kbd,
	body.fmc-admin .wp-list-table code, body.fmc-admin table.widefat code, .fmc-gl-vtag, .fmc-gl-playbadge
) {
	border-radius: var(--fmc-r-xs, 6px);
}

/* sm: small buttons, thumbnails, small tiles */
:where(
	.fmc-delivs .stp button, .fmc-nav-hint, .fmc-match, .fmc-status, .fmc-gallery-item, .fmc-cn-pv-item, .fmc-gl-tile, .fmc-gl-ptile
) {
	border-radius: var(--fmc-r-sm, 10px);
}

/* md: buttons, fields, notices */
:where(
	.fmc-btn, .fmc-btn-ghost, .fmc-act, .fmc-opp-state, .fmc-job-applied, .fmc-send, .fmc-attach, .fmc-filterbar input, .fmc-filterbar select,
	.fmc-nd-btn, .fmc-ai-btn, .fmc-ai-form select, .fmc-me-btn, .fmc-me-btn--primary, .fmc-me-search, .fmc-locpick-btn, .fmc-ab-btn,
	.fmc-call-btn, .fmc-cx-cta, .fmc-submit, .fmc-lk-btn, .fmc-rw-btn, .fmc-rw-chat .quick button, .fmc-get-app-btn, .fmc-wallet-btn, .fmc-gl-btn, .fmc-gl-input,
	.fmc-cn-toast-btn, .fmc-mail-bulk-btn, .fmc-draft-tone-btn, .fmc-wallet-btn-apple, .fmc-wallet-btn-google, .fmc-eh .fmc-eh-more, .fmc-rw-chat .b, .fmc-rw-chat .banner,
	.fmc-gl .fmc-gl-flag, .fmc-gl-act, .fmc-gl-vfilter, .fmc-gl-waitline, .fmc-gl-why, .fmc-gl-reason, .fmc-alert, .fmc-me-fail,
	.fmc-pr-copy, .fmc-cookie-actions button, .fmc-cookie-panel-actions button,
	body.fmc-admin .notice, body.fmc-admin .updated, body.fmc-admin .update-nag, body.fmc-admin .button-link-delete,
	body.fmc-admin .media-toolbar .button, body.fmc-admin .media-toolbar select
) {
	border-radius: var(--fmc-r-md, 14px);
}

/* lg: cards, panels, list rows, modals, dropdown menus */
:where(
	.fmc-gl-album, .fmc-gl-composer, .fmc-gl-rights, .fmc-gl-vlist, .fmc-ab-feature, .fmc-call-dock, .fmc-fav-deal, .fmc-me-camp,
	.fmc-newapp, .fmc-pr-link, .fmc-rw details, .fmc-camp, .fmc-opp, .fmc-ac, .fmc-tcard, .fmc-nudge, .fmc-scaffold, .fmc-main .fmc-payout, .fmc-main .fmc-notice, .fmc-main .fmc-empty,
	.fmc-bell-menu, .fmc-deal, .fmc-job-side, .fmc-rates .r, .fmc-review-row2, .fmc-msg-wrap, .fmc-menu-link, .fmc-rw-card, .fmc-rw-note,
	.fmc-rw-empty, .fmc-rw-opt, .fmc-rw-class, .fmc-rw-chat .thread, .fmc-rw-errsum, .fmc-rw-wait, .fmc-rw-redo, .fmc-rw-plate,
	.fmc-ag-card, .fmc-adm-box, .fmc-adm-act, .fmc-adm-level, .fmc-co-box, .fmc-co-card, .fmc-co-sub, .fmc-co-warn, .fmc-co-ok,
	.fmc-ce-card, .fmc-ce-box, .fmc-ce-warn, .fmc-ce-frame, .fmc-cn-box, .fmc-cn-cell, .fmc-cn-warn, .fmc-cn-ok, .fmc-cn-snap,
	.fmc-cn-emoji-card, .fmc-cn-add-selected, .fmc-cn-pick, .fmc-gl-strip, .fmc-gl-box, .fmc-gl-cell, .fmc-gl-warn, .fmc-gl-ok, .fmc-gl-card,
	.fmc-gl-report, .fmc-gl-side, .fmc-gl-pcard, .fmc-vd-box, .fmc-vd-errors, .fmc-vd fieldset, .fmc-lk-note, .fmc-lk-banner.inline,
	.fmc-lk-switchlink, .fmc-eh-notice, .fmc-eh-reminder, .fmc-eh-empty, .fmc-eh-flash, .fmc-eh-choose,
	.fmc-nd-box, .fmc-nd-flash, .fmc-nd-aud, .fmc-ai-box, .fmc-ai-empty, .fmc-ai-fact, .fmc-ai-flash, .fmc-fav-note, .fmc-fav-card,
	.fmc-evm__block, .fmc-me-card, .fmc-me-note, .fmc-sh-card, .fmc-sh-box, .fmc-sh-empty, .fmc-sh-row, .fmc-locpick-list, .fmc-locpick-hint,
	.fmc-sc-pop, .fmc-editor-modal, .fmc-zoom-err, .fmc-mp-card, .fmc-mp-addr-list, .fmc-get-app-card, .fmc-cn-info-media,
	.fmc-cn-empty, .fmc-cn-toast, .fmc-call-banner, .fmc-gl-empty, .fmc-gl-upcoming-item, .fmc-gl-drop, .fmc-gl-toast, .fmc-gl-flash,
	.fmc-gl-modal, .fmc-vm-panel, .fmc-vm-form, .fmc-vm-hint, .fmc-vm-flash, .fmc-deals__empty, .fmc-deal-card__google,
	.fmc-acc-card, .fmc-acc-tile, .fmc-acc .box, .fmc-acc-tax .box, .fmc-acc-rep .filters, .fmc-acc-rep .checks, .fmc-cd-panel,
	.fmc360-tile, .fmc360-box, .fmc360-attn, .fmc-rv-note, .fmc-rv-warn, .fmc-ap-warn, .fmcd-modal, .fmcd-drawer, .fmcd-result, .fmcd-drop,
	#fmc-drive .fmcd-modal, #fmc-drive .fmcd-drawer, #fmc-drive .fmcd-result, #fmc-drive .fmcd-drop,
	body.fmc-admin .fmc-form, body.fmc-admin .fmc-acc-card, body.fmc-admin .fmc-acc-tile, body.fmc-admin .fmc-cd-panel
) {
	border-radius: var(--fmc-r-lg, 20px);
}

/* A rounded card must clip a picture or a column that touches its edge (this changes nothing when nothing touches the edge). */
:where(.fmc-camp, .fmc-opp, .fmc-msg-wrap, .fmc-get-app-card, .fmc-gl-pcard) {
	overflow: hidden;
}

/* the date picker pop-up of the forms (flatpickr gives it a 5 px corner with a one-class rule, so this one is a little stronger) */
.flatpickr-calendar.fmc-fp-dark {
	border-radius: var(--fmc-r-lg, 20px);
}

/* top corners only: file-tab style tab buttons that sit on a panel's top edge */
:where(body.fmc-admin .wrap .nav-tab, .fmc360-tabs a) {
	border-radius: var(--fmc-r-md, 14px) var(--fmc-r-md, 14px) 0 0;
}

/* boxed (outlined) tab chips of the ride pages */
:where(.fmc-rw-tabs a) {
	border-radius: var(--fmc-r-md, 14px);
}

/* ---- 4. Squares that stay square on purpose (each one is also listed in docs/design/RADIUS.md and checked by tests/radius_scale.php) ---- */

/* The underline-only fields (.fmc-form, .fmc-apply, the sign-in / reset / swpm forms, .fmc-msg-input, .dl-link) were the one group that stayed
 * square here. Since 27/10/2026 (owner: "match the app") they are rounded outlined boxes with the md corner, set in their own stylesheet
 * (fmc-forms.css and the dashboard <style> block), so there is no rule left in this part; the squares that remain live in their own stylesheets (see the table in the docs). */