/*
 * 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.
 */

/* Focus never adds an outer contour, including programmatic focus restored
   after a modal closes. Keep borders, tactile shadows and focus behaviour.
   Important declarations in the first layer also win over palette rules and
   legacy page selectors, regardless of their specificity or loading order. */
@layer site-focus-policy, site-close-motion, platform-palette-colours;
@layer site-focus-policy {
  :where(:focus, :focus-visible, :focus-within),
  :where(:focus, :focus-visible, :focus-within)::before,
  :where(:focus, :focus-visible, :focus-within)::after,
  :where(:focus, :focus-visible) + * {
    outline: none !important;
    outline-offset: 0 !important;
  }
}

/* Close controls keep their hit target fixed, including those opting out of
   tactile styling. Layered important rules also cover late modal styles and
   generic button hover effects without changing colour or keyboard feedback. */
@layer site-close-motion {
  :where(button, [role="button"], a):is([class*="close"], [aria-label^="Chiudi" i]) {
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    transition-property: background-color, color, border-color, box-shadow, opacity, filter !important;
  }
}

/* Suppress WebKit's native tap highlight on touch targets as well. */
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: var(--track-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);
}

@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: var(--track-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);
  }
}

/* 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. */
/* Native settings actions share a neutral solid face. The injected outline
   used currentColor on the sides while the generic lower edge inherited the
   selected palette, leaving a white/purple mixed rim on both actions. */
body.tw-settings button.sapiverse-native-button {
  --pg-btn-depth: var(--site-control-neutral-depth);
  --site-control-rest-shadow: none;
  --site-control-hover-shadow: none;
  background: #eef1f6 !important;
  color: #475569 !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

@media (prefers-color-scheme: dark) {
  body.tw-settings button.sapiverse-native-button {
    background: #17243a !important;
    color: #dbe4f2 !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(
  .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"],
    /* Only boxed Back actions share neutral depth; icon-only arrows keep
       the surface and feedback authored by their own component. */
    .back-button, .subject-back-button, .difficulty-back-button, .billing-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"],
    .back-button, .subject-back-button, .difficulty-back-button, .billing-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):not(:where([data-platform-palette-option])):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;
}


/* 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, #examTrackModal .universe-option, .path-subject-option, .path-empty-creator__button)) {
  filter: var(--site-control-optical-press, 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: var(--site-control-disabled-cursor, not-allowed) !important;
  filter: none !important;
  transform: none !important;
  translate: none !important;
}

/* Waiting to select an answer is a normal step. Keep the
   native disabled gate, but show the ordinary cursor rather than a ban sign. */
body.tw-quiz-competitiva #quizContainer #confirmBtn {
  --site-control-disabled-cursor: default;
}

@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: var(--site-control-optical-press, brightness(.9) saturate(.96)) !important;
  transition: none !important;
}

/* Result navigation holds the physical press after contact ends. Some result
   actions own their depth (data-tactile="off"), so the generic busy fallback
   above added an optical filter and restored a coloured lower rim while the
   navigation helper kept a transparent upper spacer. Keep contact's clean
   border-box paint; initial result saving is deliberately outside this rule. */
html:root body:not(#site-action#site-action#site-action#site-action#site-action#site-action#site-action#site-action)
  :is(#finalOverlay, .theory-result-overlay)
  :is(button, a[href], [role="button"]):is([data-path-action-busy="true"], .is-site-action-pending):not([data-instant-press="off"]) {
  background-clip: border-box !important;
  background-origin: border-box !important;
  border-bottom-color: transparent !important;
  filter: 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;
}

/* Pale surfaces must not acquire a grey overlay on contact or while an action
   is pending. Apply the light-theme default at the shared boundary, including
   controls outside dialogs. Native compression and selected faces stay owned
   by their components; the dark optical fallback remains unchanged. */
@media (prefers-color-scheme: light) {
  html:root body {
    --site-control-optical-press: none;
  }

  /* Secondary actions share a solid face, like primary actions. Legacy
     outlined components kept their side borders after the tactile layer
     removed the top border, leaving an open, uneven rim around No/Back.
     Native-depth controls can retain a top border too (data-tactile="off").
     Clear its colour as well, keeping the existing border widths so neither
     the hit area nor text moves.
     The shared press rules still own the 4px -> 3px/1px compression.
     Back actions are listed explicitly: a class containing "back" can also
     belong to an unboxed arrow or a component with its own surface. */
  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"],
    .prev-btn, .previous-btn, .prev-button, .previous-button, .btn-prev,
    .back-button, .subject-back-button, .difficulty-back-button, .billing-back,
    [class*="ghost"]
  ):not(:disabled):not(.disabled):not(.is-disabled) {
    --pg-btn-depth: #bcc5d2 !important;
    --public-button-local-depth: #bcc5d2 !important;
    --site-control-depth: #bcc5d2 !important;
    background: #eef1f6 !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    color: #475569 !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* These neutral actions also had their own hover/active tint, independent
     of the shared filter. Keep the authored resting surface throughout. */
  html body .universe-community :is(.universe-community__icon, .universe-community__action, .universe-community__switch):is(
    :hover, :focus, :active, .is-site-tactile-pressed, .is-site-action-pending, [aria-busy="true"]
  ) {
    background: var(--uc-raised) !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;
}