/*
    Corner smoothing (squircles) for every rounded corner on the site.

    border-radius alone draws a circular quarter-arc, which meets the straight edge at a visible
    curvature break. corner-shape: squircle draws a superellipse instead, so the curve blends into
    the edge — the same thing Figma calls "corner smoothing 100%" and what iOS uses for app icons.

    Per the CSS spec the keyword scale is: round = superellipse(1), squircle = superellipse(2),
    square = superellipse(infinity). So `squircle` is the maximum-smoothing convex corner, not an
    arbitrary number.

    BROWSER SUPPORT: Chromium 139+ only (~67% of users as of mid-2026); Safari and Firefox do not
    implement it yet. It degrades silently — an engine that does not know the property ignores it
    and renders the ordinary border-radius arc. So this is pure progressive enhancement and is
    safe to ship, but the effect is invisible in Safari/Firefox.
*/

*,
*::before,
*::after {
    corner-shape: squircle;
}

/*
    Circles and pills must keep a true arc. A superellipse inscribed in a 50% radius is a rounded
    square, not a circle, so avatars, status dots, spinners and badges would visibly deform.
    These are every selector in the app that draws a full-round shape, plus the framework classes
    (Bootstrap / Metronic) that do the same.
*/
/*
    Buttons are excluded as a group. The marketing .btn is a 97px pill, whose ends are meant to
    read as true semicircles — a superellipse flattens them into a lozenge. The portal's smaller
    8/10/12px buttons follow the same rule so one control does not change shape between the two
    surfaces.
*/
.btn,

/*
    Round by clamping, not by declaration: these set a px radius LARGER than half their short
    side (.img-span 50px on 58px, the owl arrows 30px on 45px), so the browser clamps them to a
    full arc. A grep for `50%` / `9999px` cannot see that — they were found by measuring the
    rendered radius against the element's own size.
*/
.img-span,
.owl-prev,
.owl-next,

/*
    Metronic's radio control. Its dial and selected dot are both true circles (border-radius:50%
    / 100%), so a superellipse renders them as rounded squares and the control reads as a
    checkbox — the one shape difference that tells a user "pick one" from "pick any". Listed as
    the framework class rather than a page selector so every radio on the site stays a circle.
*/
.radio > span,
.radio > span::after,

.rounded-circle,
.rounded-pill,
.symbol.symbol-circle .symbol-label,
.spinner::before,

/*
    Loading spinners. Every one is a 50%-radius ring spun by a rotate animation, so a superellipse
    shows up as a wobbling rounded square instead of a circle. Portal button spinners (the ::after
    rings), the confirm-modal / OTP / support-form spinners, and Bootstrap's own .spinner-* classes.
*/
.btn.wp-loading::after,
.btn.wp-loading-inline::after,
.wp-cf-btn.wp-loading::after,
.wp-md__spinner,
.otp-continue__spinner,
.wp-support__send-spinner,
.spinner-border,
.spinner-grow,

/* Meetings page dots (legend + live pulse) and the today disc on the calendar. */
.wp-meet-legend__dot,
.wp-live-dot,
.wp-meet .fc .fc-day-today .fc-daygrid-day-number,
.btn-large .btn-icon-wrapper,
.btn-medium .btn-icon-wrapper,
.what-qualifies li::before,
.info-need-list li::before,
.deal-close-icon-container,
.partner-journey-node,
.sidebar-close,
.testimonial-showcase-avatar,
.wp-empty__symbol,
.wp-topbar__dot,
.apply-option__badge,
.auth-submit__spinner,
.ld-ba__avatar,
.ld-feed__tile,
.ld-gate__tick,
.wp-step .timeline-badge,
.wp-step__dot,
.wp-legend__dot,
.wp-legend__dot::before,
.wpa-seg__cell::before,
.wp-ms__node,
.wp-proj__legend-dot,
.wp-recent-empty__ic,
.reg-success__mark {
    corner-shape: round;
}