/*
 * Site-wide tactile interaction contract.
 *
 * Component styles continue to own colour, typography, radius and size. This
 * final layer owns only the physical behaviour shared by every real control:
 * a stable four-pixel lower edge at rest/hover and an in-place 3px/1px
 * compression while contact or its resulting action is pending. The outer box never
 * moves, so neighbouring controls and modal layouts cannot jump.
 */

/* WebKit paints a translucent blue rectangle around the touched hit-test
   target, including JavaScript-driven cards that are not native controls.
   Remove that browser chrome across the app while keeping the authored
   :focus-visible treatment available to keyboard users. */
html:root,
html:root body,
html:root body :where(*) {
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* Semantic radius hierarchy. Components opt into the role that matches
     their visual weight; circles and intentional pills keep their geometry. */
  --radius-page: 28px;
  --radius-card: 26px;
  --radius-panel: 20px;
  --radius-control: 13px;
  --radius-small: 9px;
  --site-control-neutral-depth: color-mix(in srgb, #ffffff 58%, #64748b 42%);
  --site-control-primary-depth: color-mix(
    in srgb,
    var(--track-primary-dark, #1e54d6) 88%,
    #000000
  );
  --site-control-primary-disabled-depth: color-mix(
    in srgb,
    var(--track-primary-dark, #1e54d6) 68%,
    #ffffff 32%
  );
  --site-control-success-depth: #15803d;
  --site-control-success-disabled-depth: color-mix(
    in srgb,
    #388e3c 68%,
    #ffffff 32%
  );
  --site-control-danger-depth: #b91c1c;
  --site-control-rest-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
  --site-control-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  --site-control-focus-ring: rgba(var(--track-primary-rgb, 47, 107, 255), 0.28);
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-control-neutral-depth: #53647b;
    --site-control-neutral-action-depth: #566983;
    --site-control-neutral-action-depth-hover: #6d84a5;
    --site-control-primary-depth: color-mix(
      in srgb,
      var(--track-primary-dark, #1e54d6) 82%,
      #050b16
    );
    --site-control-primary-disabled-depth: color-mix(
      in srgb,
      var(--track-primary-dark, #1e54d6) 78%,
      #07101f 22%
    );
    --site-control-success-depth: #166534;
    --site-control-success-disabled-depth: color-mix(
      in srgb,
      #388e3c 78%,
      #07101f 22%
    );
    --site-control-danger-depth: #991b1b;
    --site-control-rest-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    --site-control-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    --site-control-focus-ring: rgba(147, 197, 253, 0.48);
  }
}

/* Keep this list structural, not page-specific: native buttons, button-like
   inputs and the link patterns used as buttons throughout the application. */
html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"],
  a[href].stats-link,
  a[href].nav-link,
  a[href].mobile-nav-item,
  a[href].filter-btn,
  a[href].tab-btn
):not([data-tactile="off"]):not(.password-toggle):not(.icon-eye):not(.delete-account-password-toggle) {
  --site-control-depth: var(
    --pg-btn-depth,
    var(
      --public-button-local-depth,
      var(--pg-cta-depth-color, var(--site-control-neutral-depth))
    )
  );
  -webkit-tap-highlight-color: transparent !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  box-sizing: border-box !important;
  border-top-width: 0 !important;
  border-bottom-width: 4px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--site-control-depth) !important;
  box-shadow: var(--site-control-rest-shadow) !important;
  cursor: pointer !important;
  filter: none !important;
  touch-action: manipulation !important;
  transform: none !important;
  translate: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease !important;
  will-change: auto !important;
}

/* Semantic fallbacks are used only where a component has not already exposed
   one of the existing --pg/--public depth variables. */
html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"]
):is(
  .active,
  .is-active,
  [aria-pressed="true"],
  [aria-selected="true"],
  [class*="primary"],
  [class*="next"],
  [class*="cta"],
  [class*="submit"]
) {
  --site-control-depth: var(
    --pg-btn-depth,
    var(
      --public-button-local-depth,
      var(--pg-cta-depth-color, var(--site-control-primary-depth))
    )
  );
  /* Disabled primary controls keep a muted edge from their Exam Track.
     Falling back to the neutral rail made blue/green/orange faces appear to
     sit on an unrelated grey extrusion, especially in quiz navigation. */
  --site-control-disabled-depth: var(--site-control-primary-disabled-depth);
}

/* A latched/selected control remains visibly actionable: it keeps the full
   lower depth in its selected colour and only compresses during :active. */
html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"]
):is(.active, .is-active, [aria-pressed="true"], [aria-selected="true"]) {
  --site-control-depth: var(
    --pg-btn-depth,
    var(
      --public-button-local-depth,
      var(--pg-cta-depth-color, var(--site-control-primary-depth))
    )
  );
}

/* Dark secondary actions must keep the restrained depth used by the quiz
   Previous control. Component-level light-theme variables otherwise leak a
   pale lower edge into cancel/back buttons and modal secondary actions. */
@media (prefers-color-scheme: dark) {
  html:root body.tw-dashboard:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"],
    a[href][class*="btn"],
    a[href][class*="button"],
    a[href][class*="cta"],
    a[href][class*="action"]
  ):is(
    [class*="secondary"],
    [class*="neutral"],
    [class*="cancel"],
    [class*="prev"],
    /* Match "back" as a class token/segment, never as part of an unrelated
       word such as training-feedback-upsell__cta. */
    [class~="back"],
    [class^="back-"],
    [class*=" back-"],
    [class$="-back"],
    [class*="-back "],
    [class*="-back-"],
    [class*="ghost"]
  ):not(:disabled):not(.disabled):not(.is-disabled) {
    --pg-btn-depth: var(--site-control-neutral-action-depth) !important;
    --public-button-local-depth: var(--site-control-neutral-action-depth) !important;
    --site-control-depth: var(--site-control-neutral-action-depth) !important;
  }

  html:root body.tw-dashboard:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"],
    a[href][class*="btn"],
    a[href][class*="button"],
    a[href][class*="cta"],
    a[href][class*="action"]
  ):is(
    [class*="secondary"],
    [class*="neutral"],
    [class*="cancel"],
    [class*="prev"],
    [class~="back"],
    [class^="back-"],
    [class*=" back-"],
    [class$="-back"],
    [class*="-back "],
    [class*="-back-"],
    [class*="ghost"]
  ):not(:disabled):not(.disabled):not(.is-disabled):is(:hover, :focus-visible) {
    --pg-btn-depth: var(--site-control-neutral-action-depth-hover) !important;
    --public-button-local-depth: var(--site-control-neutral-action-depth-hover) !important;
    --site-control-depth: var(--site-control-neutral-action-depth-hover) !important;
  }
}

html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"]
):is(
  [class*="secondary"],
  [class*="neutral"],
  [class*="cancel"],
  [class*="prev"],
  [class*="back"],
  [class*="ghost"],
  [class*="close"],
  [class*="dismiss"]
) {
  --site-control-depth: var(
    --pg-btn-depth,
    var(--public-button-local-depth, var(--site-control-neutral-depth))
  );
}

html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"]
):is([class*="success"], [class*="complete"], [class*="claim"]):not([class*="incomplete"]) {
  --site-control-depth: var(
    --pg-btn-depth,
    var(--public-button-local-depth, var(--site-control-success-depth))
  );
  --site-control-disabled-depth: var(--site-control-success-disabled-depth);
}

/* The answer confirmation control is intentionally green even though its
   generic class name is also used by blue and red modal actions. Scope the
   semantic disabled depth to the two real quiz confirmation controls instead
   of recolouring every `.confirm-btn` across the application. */
html:root body:is(.tw-quiz-allenamento, .tw-quiz-competitiva:not(.duel-page-body))
  #quizContainer .quiz-controls #confirmBtn.confirm-btn {
  --site-control-disabled-depth: var(--site-control-success-disabled-depth);
}

html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"]
):is([class*="danger"], [class*="delete"], [class*="logout"], [class*="remove"]) {
  --site-control-depth: var(
    --pg-btn-depth,
    var(--public-button-local-depth, var(--site-control-danger-depth))
  );
}

html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"],
  a[href].stats-link,
  a[href].nav-link,
  a[href].mobile-nav-item,
  a[href].filter-btn,
  a[href].tab-btn
):not([data-tactile="off"]):not(.password-toggle):not(.icon-eye):not(.delete-account-password-toggle):not(:disabled):not(.disabled):not(.is-disabled):is(:hover, :focus-visible) {
  border-top-width: 0 !important;
  border-bottom-width: 4px !important;
  border-bottom-color: var(--site-control-depth) !important;
  box-shadow: var(--site-control-hover-shadow) !important;
  filter: brightness(1.03) saturate(1.02) !important;
  transform: none !important;
  translate: none !important;
}

html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"],
  a[href].stats-link,
  a[href].nav-link,
  a[href].mobile-nav-item,
  a[href].filter-btn,
  a[href].tab-btn
):not([data-tactile="off"]):not(.password-toggle):not(.icon-eye):not(.delete-account-password-toggle):not(:disabled):not(.disabled):not(.is-disabled):focus-visible {
  outline: 3px solid var(--site-control-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Held press: preserve four total vertical border pixels (0/4 -> 3/1), paint
   every edge beneath the face, and remove every residual ridge/glow. Native
   and explicit touch presses need identical specificity so a retained touch
   :hover cannot override the next press. */
html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"],
  a[href].stats-link,
  a[href].nav-link,
  a[href].mobile-nav-item,
  a[href].filter-btn,
  a[href].tab-btn
):not([data-tactile="off"]):not(.password-toggle):not(.icon-eye):not(.delete-account-password-toggle):not(:disabled):not(.disabled):not(.is-disabled):active:not(:where([data-platform-palette-option])),
html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"],
  a[href].stats-link,
  a[href].nav-link,
  a[href].mobile-nav-item,
  a[href].filter-btn,
  a[href].tab-btn
):not([data-tactile="off"]):not(.password-toggle):not(.icon-eye):not(.delete-account-password-toggle):not(:disabled):not(.disabled):not(.is-disabled).is-site-tactile-pressed {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  border-top: 3px solid transparent !important;
  border-right-color: transparent !important;
  border-bottom: 1px solid transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  transform: none !important;
  translate: none !important;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease !important;
}

/* Palette radios use the explicit contact class above: touch browsers can
   retain native :active after the selection has already committed. */

/* Border geometry, its inset top edge and press filter are deliberately
   discrete across the raised-control contract: an edge belongs either to
   the held face or to the resting face.
   Never interpolate individual edge colours, because WebKit can otherwise
   expose a hybrid frame with a lower ridge but transparent side/top edges.
   Every tactile control also suppresses the remaining cosmetic transitions
   during its explicit release frame. One extra ID specificity unit makes
   this rule win over the base/hover/pressed selectors and their exclusions;
   equal ID weight let those rules animate the top edge back from none. */
html:root body:not(#sitewide-release#sitewide-release#sitewide-release#sitewide-release#sitewide-release#sitewide-release#sitewide-release) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"],
  a[href].stats-link,
  a[href].nav-link,
  a[href].mobile-nav-item,
  a[href].filter-btn,
  a[href].tab-btn
).is-site-tactile-releasing {
  transition: none !important;
  will-change: auto !important;
}

/* Flat and geometry-special controls deliberately opt out of the raised 0/4
   border contract, but a fast touch must still produce an immediate frame.
   Use an optical press that cannot move icons, planets, question-map cells or
   embedded password controls. A component can explicitly suppress even this
   feedback with data-instant-press="off". Training help cards already compress
   their native coloured face; an additional brightness filter would introduce
   a third paint/compositor state during their open/close action. */
html:root body:not(#sitewide-instant-press#sitewide-instant-press#sitewide-instant-press#sitewide-instant-press#sitewide-instant-press#sitewide-instant-press) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"],
  a[href].stats-link,
  a[href].nav-link,
  a[href].mobile-nav-item,
  a[href].filter-btn,
  a[href].tab-btn
):is(
  [data-tactile="off"],
  .password-toggle,
  .icon-eye,
  .delete-account-password-toggle
).is-site-tactile-pressed:not([data-instant-press="off"]):not(:where(body.tw-quiz-allenamento .help-icon-card)) {
  filter: brightness(.9) saturate(.96) !important;
  transition: none !important;
}

html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="cta"],
  a[href][class*="action"],
  a[href].stats-link,
  a[href].nav-link,
  a[href].mobile-nav-item,
  a[href].filter-btn,
  a[href].tab-btn
):not([data-tactile="off"]):not(.password-toggle):not(.icon-eye):not(.delete-account-password-toggle):is(:disabled, .disabled, .is-disabled) {
  border-top-width: 0 !important;
  border-bottom-width: 4px !important;
  border-bottom-color: var(
    --site-control-disabled-depth,
    var(--site-control-neutral-depth)
  ) !important;
  box-shadow: var(--site-control-rest-shadow) !important;
  cursor: not-allowed !important;
  filter: none !important;
  transform: none !important;
  translate: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:root body :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"],
    a[href][class*="btn"],
    a[href][class*="button"],
    a[href][class*="cta"],
    a[href][class*="action"]
  ) {
    transition: none !important;
  }
}

/* Embedded visibility controls are part of the input field, not raised CTAs.
   The site-wide native-button contract otherwise gives them a 4px lower edge
   (and a 3px upper press spacer), producing stray lines around the eye icon. */
html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(button):is(
  .password-toggle,
  .icon-eye,
  .delete-account-password-toggle
),
html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(button):is(
  .password-toggle,
  .icon-eye,
  .delete-account-password-toggle
):is(:hover, :focus, :focus-visible, :active, [aria-pressed="true"]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: transparent !important;
  background-image: none !important;
  background-clip: padding-box !important;
  background-origin: padding-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  translate: none !important;
}

/* These two variants are absolutely centred; restore their component-owned
   placement after the shared tactile layer deliberately neutralises motion. */
html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(button):is(
  .icon-eye,
  .delete-account-password-toggle
),
html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(button):is(
  .icon-eye,
  .delete-account-password-toggle
):is(:hover, :focus, :focus-visible, :active, [aria-pressed="true"]) {
  transform: translateY(-50%) !important;
}

/* Light-mode reference parity for controls that already own a complete
   physical treatment. The shared tactile contract must not replace their
   semantic lower edge with the active Exam Track colour. Dark mode keeps its
   existing cascade byte-for-byte. */
@media (prefers-color-scheme: light) {
  html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :where(
    button.dashboard-sidebar-user
  ):not([data-tactile="off"]):not(.password-toggle):not(.icon-eye):not(.delete-account-password-toggle) {
    --pg-btn-depth: var(--dashboard-sidebar-user-depth);
    --site-control-depth: var(--dashboard-sidebar-user-depth);
    border-top-width: 0 !important;
    border-bottom-width: 4px !important;
    border-bottom-color: var(--dashboard-sidebar-user-depth) !important;
    box-shadow: none !important;
  }

  /* Subject tabs already calculate their own lower edge from the selected
     Exam Track. Preserve that component token instead of replacing it with
     the generic neutral button depth in the site-wide tactile layer. */
  html:root body.tw-dashboard.tw-quiz-allenamento
    .section-tabs-wrapper
    button.section-tab.active,
  html:root body.tw-dashboard.tw-quiz-competitiva:not(.duel-page-body)
    .sections-tabs
    button.section-tab.current-section {
    --pg-btn-depth: var(--pg-subject-tab-depth) !important;
    --site-control-depth: var(--pg-subject-tab-depth) !important;
    border-bottom-color: var(--pg-subject-tab-depth) !important;
  }

  html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) #examTrackModal .exam-track-modal__close {
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
    border-bottom-color: #e2e8f0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) #examTrackModal .exam-track-modal__close:focus-visible {
    outline: 3px solid rgba(var(--exam-track-primary-rgb), .18) !important;
    outline-offset: 2px !important;
  }

  html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) #examTrackModal .exam-track-option:not(.is-selected) {
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
    border-bottom-color: color-mix(in srgb, #dbe5f3 76%, var(--exam-track-option-primary) 24%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78) !important;
    filter: none !important;
  }

  html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) #examTrackModal .exam-track-option.is-selected {
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
    border-color: var(--exam-track-option-selected-border) !important;
    box-shadow:
      -1px 2px 0 var(--exam-track-option-selected-depth),
      inset 0 1px 0 rgba(255, 255, 255, .72) !important;
    filter: none !important;
  }

  html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) #examTrackModal .exam-track-option:focus-visible {
    outline: 3px solid rgba(var(--exam-track-option-primary-rgb), .18) !important;
    outline-offset: 2px !important;
  }
}

/* Dark-mode parity for the Exam Track cards above. The shared tactile button
   layer normally resolves its depth from the active page track; these cards
   instead own independent palettes, so every lower edge must resolve from the
   option's inline Exam Track variables. Keep the light-mode geometry intact
   while blending those semantic colours into the dark modal surfaces. */
@media (prefers-color-scheme: dark) {
  html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) #examTrackModal .exam-track-modal__close {
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
    border-bottom-color: var(--modal-dark-border-strong, rgba(174, 194, 224, .3)) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) #examTrackModal .exam-track-option:not(.is-selected) {
    --exam-track-option-dark-depth: color-mix(
      in srgb,
      var(--modal-dark-soft, #1d2c44) 68%,
      var(--exam-track-option-primary) 32%
    );
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
    border-bottom-color: var(--exam-track-option-dark-depth) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    filter: none !important;
  }

  html:root body:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) #examTrackModal .exam-track-option.is-selected {
    --exam-track-option-selected-border: color-mix(
      in srgb,
      var(--modal-dark-border-strong, #465875) 42%,
      var(--exam-track-option-primary) 58%
    );
    --exam-track-option-selected-depth: color-mix(
      in srgb,
      var(--modal-dark-canvas, #0a1222) 34%,
      var(--exam-track-option-primary-dark) 66%
    );
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
    border-color: var(--exam-track-option-selected-border) !important;
    box-shadow:
      -1px 2px 0 var(--exam-track-option-selected-depth),
      inset 0 1px 0 rgba(255, 255, 255, .065) !important;
    filter: none !important;
  }

  /* The base Exam Track selector intentionally uses a white empty radio in
     light mode. On dark surfaces that becomes the brightest element in the
     dialog, so keep the same 24px geometry while giving every option-owned
     radio a restrained dark fill and a subtle semantic border. */
  html:root body.tw-dashboard #examTrackModal .exam-track-option:not(.is-selected) .exam-track-option__check {
    color: transparent !important;
    background: color-mix(
      in srgb,
      var(--modal-dark-soft, #1d2c44) 90%,
      var(--exam-track-option-primary) 10%
    ) !important;
    border-color: color-mix(
      in srgb,
      var(--modal-dark-border-strong, #465875) 72%,
      var(--exam-track-option-primary) 28%
    ) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28) !important;
  }

  html:root body.tw-dashboard #examTrackModal .exam-track-option:not(.is-selected):focus-visible .exam-track-option__check {
    background: color-mix(
      in srgb,
      var(--modal-dark-soft, #1d2c44) 84%,
      var(--exam-track-option-primary) 16%
    ) !important;
    border-color: color-mix(
      in srgb,
      var(--modal-dark-border-strong, #465875) 58%,
      var(--exam-track-option-primary) 42%
    ) !important;
  }

  html:root body.tw-dashboard #examTrackModal .exam-track-option.is-selected .exam-track-option__check {
    color: #ffffff !important;
    background: var(--exam-track-option-primary-dark) !important;
    border-color: color-mix(in srgb, var(--exam-track-option-primary) 76%, #ffffff 24%) !important;
    box-shadow: 0 0 0 3px rgba(var(--exam-track-option-primary-rgb), .12) !important;
  }
}

/* Keep the mobile quiz footer silhouette invariant while pressed. Transparent
   side borders expose triangular seams between the tightly spaced controls. */
html:root body:is(.tw-quiz-allenamento, .tw-quiz-competitiva:not(.duel-page-body))
  #quizContainer .quiz-controls .action-btn:not(:disabled):active {
  border-top-width: 0 !important;
  border-right-width: 0 !important;
  border-bottom-width: 4px !important;
  border-bottom-color: var(--site-control-depth) !important;
  border-left-width: 0 !important;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.14) !important;
  filter: brightness(0.985) saturate(1.01) !important;
}

/* Semantic radius contract -------------------------------------------------
   This final shared layer is loaded after page CSS. Radius therefore remains
   identical through every interactive state instead of reverting to an older
   component value on touch, keyboard focus, selection or disabled states. */

/* Primary Lobby cards retain one silhouette on both faces and in every flip,
   hover, focus and pressed state. Their coloured headers are clipped by the
   same visible surface, so no square corner can appear behind the card. */
html:root body.tw-dashboard.lobby-force-scroll #modeSelection .lobby-choice-card,
html:root body.tw-dashboard.lobby-force-scroll #modeSelection .lobby-choice-card:is(
  :hover,
  :focus,
  :focus-visible,
  :focus-within,
  :active,
  .is-flipped
) {
  --lobby-mode-card-radius: var(--radius-card) !important;
  border-radius: var(--radius-card) !important;
}

html:root body.tw-dashboard.lobby-force-scroll #modeSelection :is(
  .lobby-choice-card-inner,
  .lobby-choice-face,
  .mode-card-preview
),
html:root body.tw-dashboard.lobby-force-scroll #modeSelection
  .lobby-choice-card:is(:hover, :focus, :focus-visible, :focus-within, :active, .is-flipped)
  :is(.lobby-choice-card-inner, .lobby-choice-face, .mode-card-preview) {
  border-radius: var(--radius-card) !important;
}

/* Full-page quiz shells use the largest radius only while they are framed.
   A true fullscreen surface must continue to meet the viewport edges. */
html:root body.tw-dashboard.tw-quiz-allenamento:not(.quiz-fullscreen-active)
  #quizContainer.quiz-container:not(.fullscreen-mode):not(.is-mobile-fullscreen),
html:root body.tw-dashboard.tw-quiz-competitiva:not(.duel-page-body):not(.quiz-fullscreen-active)
  #quizContainer.quiz-container:not(.fullscreen-mode):not(.is-mobile-fullscreen),
html:root body.tw-dashboard.duel-page-body
  #duelQuizContainer.quiz-container:not(.fullscreen-mode):not(.is-mobile-fullscreen) {
  border-radius: var(--radius-page) !important;
}

html:root body.tw-dashboard:is(.tw-quiz-allenamento, .tw-quiz-competitiva)
  #quizContainer.quiz-container:is(.fullscreen-mode, .is-mobile-fullscreen),
html:root body.tw-dashboard.duel-page-body
  #duelQuizContainer.quiz-container:is(.fullscreen-mode, .is-mobile-fullscreen) {
  border-radius: 0 !important;
}

/* Panels and account surfaces. The Help header intentionally stays square:
   the panel is the single clipping owner, avoiding antialiased corner seams. */
html:root body.tw-dashboard.tw-quiz-allenamento #quizContainer.quiz-container .help-panel,
html:root body.tw-dashboard.tw-quiz-allenamento #quizContainer.quiz-container .help-panel:is(
  :hover,
  :focus,
  :focus-visible,
  :focus-within,
  :active
),
html:root body.tw-dashboard :is(.confirmation-modal, .dashboard-sidebar-user),
html:root body.tw-dashboard :is(.confirmation-modal, .dashboard-sidebar-user):is(
  :hover,
  :focus,
  :focus-visible,
  :focus-within,
  :active,
  :disabled,
  [aria-disabled="true"],
  [aria-expanded="true"]
) {
  border-radius: var(--radius-panel) !important;
}

/* Quiz answers keep the same contour before selection, while selected, after
   confirmation and in semantic correct/incorrect states. */
html:root body.tw-dashboard:is(.tw-quiz-allenamento, .tw-quiz-competitiva:not(.duel-page-body))
  #quizContainer.quiz-container .option,
html:root body.tw-dashboard:is(.tw-quiz-allenamento, .tw-quiz-competitiva:not(.duel-page-body))
  #quizContainer.quiz-container .option:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .selected,
    .confirmed,
    .correct,
    .incorrect
  ),
html:root body.tw-dashboard.duel-page-body #duelQuizContainer.quiz-container .option,
html:root body.tw-dashboard.duel-page-body #duelQuizContainer.quiz-container .option:is(
  :hover,
  :focus,
  :focus-visible,
  :active,
  .selected,
  .confirmed,
  .is-selected-self,
  .correct,
  .incorrect
) {
  border-radius: var(--radius-control) !important;
}

/* Pending actions retain the same physical press after pointer/key release,
   including controls temporarily disabled by their request handler. Busy is
   owned by the component; the runtime owns only navigation/transition holds.
   Keep this above component-specific and disabled contour overrides.
   Path training reuses Next for the destination question before layout settles:
   its disabled state belongs to that new unanswered question and must win over
   the outgoing click's hold. A committed confirmation likewise owns its final
   disabled paint, even while persistence/feedback is finishing. Other busy
   controls retain the complete contact face, including native appearance.
   Result overlays may save/validate on entry: busy alone is not a user press.
   Their controls acquire the held face only after an actual action starts. */
html:root body:not(#site-action#site-action#site-action#site-action#site-action#site-action#site-action#site-action) :where(
  button, input[type="button"], input[type="submit"], input[type="reset"],
  [role="button"], a[href][class*="btn"], a[href][class*="button"],
  a[href][class*="cta"], a[href][class*="action"], a[href].stats-link,
  a[href].nav-link, a[href].mobile-nav-item, a[href].filter-btn, a[href].tab-btn
):is([aria-busy="true"], .is-site-action-pending, .is-loading, .is-preparing, .is-saving):not([data-instant-press="off"]):not([data-tactile="off"]):not(.password-toggle):not(.icon-eye):not(.delete-account-password-toggle):not(:where(
  body.tw-quiz-allenamento[data-training-launch-context="learning-path"] #nextQuestionBtn:disabled,
  body.tw-quiz-allenamento #confirmBtn.is-resolved:disabled,
  body.tw-quiz-competitiva #confirmBtn.is-confirmed:disabled,
  :is(#finalOverlay, #finishScreen, .theory-result-overlay) :not(.is-site-action-pending):not([data-path-action-busy="true"])
)) {
  appearance: none !important;
  -webkit-appearance: none !important;
  border-top: 3px solid transparent !important;
  border-right-color: transparent !important;
  border-bottom: 1px solid transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}

html:root body:not(#site-action#site-action#site-action#site-action#site-action#site-action#site-action#site-action) :where(
  button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], a[href]
):is([aria-busy="true"], .is-site-action-pending, .is-loading, .is-preparing, .is-saving):is([data-tactile="off"], .password-toggle, .icon-eye, .delete-account-password-toggle):not([data-instant-press="off"]):not(:where(body.tw-quiz-allenamento .help-icon-card, :is(#finalOverlay, #finishScreen, .theory-result-overlay) :not(.is-site-action-pending):not([data-path-action-busy="true"]))) {
  filter: brightness(.9) saturate(.96) !important;
  transition: none !important;
}

html:root body.tw-dashboard:is(.tw-quiz-allenamento, .tw-quiz-competitiva:not(.duel-page-body))
  #quizContainer.quiz-container .option::after,
html:root body.tw-dashboard.duel-page-body #duelQuizContainer.quiz-container .option::after {
  border-radius: inherit !important;
}

/* Navigation, confirmation and learning-tool controls use one radius in every
   state. This explicitly includes the dynamically enabled Confirm button. */
html:root body.tw-dashboard:is(.tw-quiz-allenamento, .tw-quiz-competitiva:not(.duel-page-body))
  #quizContainer.quiz-container .quiz-controls .action-btn,
html:root body.tw-dashboard:is(.tw-quiz-allenamento, .tw-quiz-competitiva:not(.duel-page-body))
  #quizContainer.quiz-container .quiz-controls .action-btn:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    :disabled,
    .active,
    .disabled,
    [aria-disabled="true"],
    [aria-pressed="true"]
  ),
html:root body.tw-dashboard.tw-quiz-allenamento #quizContainer.quiz-container :is(
  #hintAction.help-icon-card,
  #theoryHelpAction.help-icon-card,
  #explanationHelpAction.help-icon-card
),
html:root body.tw-dashboard.tw-quiz-allenamento #quizContainer.quiz-container :is(
  #hintAction.help-icon-card,
  #theoryHelpAction.help-icon-card,
  #explanationHelpAction.help-icon-card
):is(
  :hover,
  :focus,
  :focus-visible,
  :active,
  :disabled,
  .active,
  .disabled,
  .is-unavailable,
  [aria-disabled="true"],
  [aria-pressed="true"]
),
html:root body.tw-dashboard.lobby-force-scroll #modeSelection .mode-button,
html:root body.tw-dashboard.lobby-force-scroll #modeSelection .mode-button:is(
  :hover,
  :focus,
  :focus-visible,
  :active,
  :disabled,
  .active,
  .disabled,
  [aria-disabled="true"],
  [aria-pressed="true"]
) {
  border-radius: var(--radius-control) !important;
}