/* Visitor pages share one frosted material. Keep form controls on solid surfaces. */
@media screen {
  :where([data-web-frame]:not(.cabinet-page)) {
    --frame-top: #dfebf8;
    --frame-side: #e0efed;
    --frame-surface: rgb(255 255 255 / .84);
    --frame-edge: rgb(255 255 255 / .92);
    --frame-shadow: 0 1px 2px rgb(25 54 87 / .06), 0 16px 44px rgb(38 66 105 / .10);
    --frame-choice: #e8f2ff;
    --frame-action-hover: #004da9;
    min-height: 100vh;
    background:
      radial-gradient(ellipse 58rem 31rem at 12% 0, var(--frame-top), transparent),
      radial-gradient(ellipse 40rem 25rem at 98% 18rem, var(--frame-side), transparent),
      var(--paper);
  }

  [data-theme="dark"] :where([data-web-frame]:not(.cabinet-page)) {
    --frame-top: #182c48;
    --frame-side: #142c35;
    --frame-surface: rgb(23 35 54 / .90);
    --frame-edge: rgb(167 194 235 / .22);
    --frame-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 16px 44px rgb(0 0 0 / .24);
    --frame-choice: #223b5b;
    --frame-action-hover: #004da9;
  }

  :where([data-web-frame]:not(.cabinet-page)) > .top {
    max-width: 1160px;
    margin: calc(16px + env(safe-area-inset-top, 0px)) auto 0;
    padding: 0;
    border: 1px solid var(--frame-edge);
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--frame-shadow);
  }

  :where([data-web-frame]:not(.cabinet-page)) > .top .top__in { max-width: none; padding: 12px 20px; gap: 12px 20px; }
  :where([data-web-frame]:not(.cabinet-page)) > .top .navlink,
  :where([data-web-frame]:not(.cabinet-page)) > .top .langs a { min-height: 44px; }

  :where([data-web-frame]:not(.cabinet-page)) > .page > .form,
  :where([data-web-frame]:not(.cabinet-page)) .universities-filter {
    background: var(--card);
    box-shadow: var(--frame-shadow);
  }

  @supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
    :where([data-web-frame]:not(.cabinet-page)) > .top,
    :where([data-web-frame]:not(.cabinet-page)) > .page > .form,
    :where([data-web-frame]:not(.cabinet-page)) .universities-filter {
      background: var(--frame-surface);
      -webkit-backdrop-filter: blur(16px) saturate(125%);
      backdrop-filter: blur(16px) saturate(125%);
    }
  }

  :where([data-web-frame]:not(.cabinet-page)) #reg-form > fieldset:first-of-type { margin-top: 0; }
  .registration-page #reg-form .event-guide { margin-top: 12px; }

  :where([data-web-frame]:not(.cabinet-page)) #reg-form .choice--city label { padding-inline-end: 34px; }
  :where([data-web-frame]:not(.cabinet-page)) #reg-form .choice--city label::after {
    content: "";
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    border: 1px solid var(--ink-soft);
    border-radius: 50%;
  }
  :where([data-web-frame]:not(.cabinet-page)) #reg-form .choice--city input:checked + label {
    background: var(--frame-choice);
    border-color: var(--teal);
    color: var(--deep);
  }
  :where([data-web-frame]:not(.cabinet-page)) #reg-form .choice--city input:checked + label .choice__sub { color: var(--ink-soft); }
  :where([data-web-frame]:not(.cabinet-page)) #reg-form .choice--city input:checked + label::after {
    border: 4px solid var(--teal);
    background: var(--card);
  }

  @media (max-width: 1192px) {
    :where([data-web-frame]:not(.cabinet-page)) > .top { margin-inline: 16px; }
  }
  @media (max-width: 640px) {
    :where([data-web-frame]:not(.cabinet-page)) > .top {
      margin: calc(8px + env(safe-area-inset-top, 0px)) 12px 0;
      border-radius: 18px;
    }
    :where([data-web-frame]:not(.cabinet-page)) > .top .top__in { padding: 6px 10px; gap: 4px 8px; }
  }

  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    :where([data-web-frame]:not(.cabinet-page)) { background: var(--paper); }
    :where([data-web-frame]:not(.cabinet-page)) > .top,
    :where([data-web-frame]:not(.cabinet-page)) > .page > .form,
    :where([data-web-frame]:not(.cabinet-page)) .universities-filter {
      background: var(--card);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (forced-colors: active) {
    .registration-page #reg-form .choice--city input:checked + label::after { border-color: Highlight; }
  }

  /* The registration toolbar and both panes belong to one window. */
  :is(.registration-page, .visitor-account-page) {
    --window-base: #092454;
    --window-backdrop: linear-gradient(128deg, #092454 0%, #1258a7 48%, #62d7eb 100%);
    --window-glass: rgb(233 243 255 / .78);
    --window-rim: rgb(255 255 255 / .64);
    --window-toolbar: linear-gradient(180deg, #fff, #e7eef8);
    --window-toolbar-glass: linear-gradient(180deg, rgb(255 255 255 / .94), rgb(235 242 253 / .82));
    --window-pane: linear-gradient(145deg, #fff, #f2f7fe);
    --window-shadow: 0 30px 84px rgb(4 26 66 / .35), 0 4px 16px rgb(4 26 66 / .18);
    --window-intro: linear-gradient(143deg, #071f52, #0b3d8e 60%, #0055a3);
    --window-intro-copy: #e7f3ff;
    --window-intro-button: #17477f;
    --window-intro-button-hover: #215790;
    --window-button: linear-gradient(145deg, #0756be, #006690);
    background:
      linear-gradient(transparent 42rem, var(--window-base) 66rem),
      var(--window-backdrop) top center / 100% 66rem no-repeat,
      var(--window-base);
    padding: calc(24px + env(safe-area-inset-top, 0px)) 24px 40px;
  }

  [data-theme="dark"] :is(.registration-page, .visitor-account-page) {
    --window-base: #061021;
    --window-backdrop: linear-gradient(128deg, #061021 0%, #143a78 52%, #216b83 100%);
    --window-glass: rgb(13 26 45 / .85);
    --window-rim: rgb(183 219 255 / .28);
    --window-toolbar: linear-gradient(180deg, #24344b, #17263b);
    --window-toolbar-glass: linear-gradient(180deg, rgb(37 53 76 / .95), rgb(21 35 55 / .86));
    --window-pane: linear-gradient(145deg, #18263c, #121e31);
    --window-shadow: 0 30px 84px rgb(0 5 18 / .56), 0 4px 16px rgb(0 5 18 / .28);
  }

  .visitor-window {
    max-width: 1104px;
    margin-inline: auto;
    border: 1px solid var(--window-rim);
    border-radius: 28px;
    background: var(--paper);
    box-shadow: var(--window-shadow);
  }

  .visitor-window > .top {
    padding: 0;
    border-radius: 27px 27px 0 0;
    background: var(--window-toolbar);
    box-shadow: inset 0 1px 0 var(--window-rim);
  }

  .visitor-window .top__in {
    flex-wrap: nowrap;
    gap: 12px 16px;
    padding: 8px 20px;
  }


  .visitor-window .top__logo {
    width: 116px;
    padding: 3px 4px;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
  }

  .visitor-window .top__brand { flex: 0 1 auto; min-height: 44px; }
  .visitor-window .top__right { flex-wrap: nowrap; gap: 8px; }
  .visitor-window :is(.navlink, .langs a) { min-height: 44px; }
  .visitor-window .navlink {
    padding-inline: 10px;
    border-color: transparent;
    background: transparent;
  }
  .registration-account-link svg { display: none; }
  .visitor-window .navlink:hover { background: var(--sand); }
  .visitor-window .langs { border-color: var(--line); }
  .visitor-window .theme-toggle { background: transparent; }
  .visitor-window .theme-toggle:hover { background: var(--sand); }

  .registration-window > .page {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.44fr);
    align-items: start;
    gap: 20px;
    padding: 20px;
  }

  .registration-window .registration-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 480px;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid rgb(192 235 255 / .32);
    border-radius: 20px;
    background: var(--window-intro);
    box-shadow: 0 14px 32px rgb(6 31 80 / .17), inset 0 1px 0 rgb(204 237 255 / .16);
  }

  /* A soft MY FAIR ribbon sits below the intro copy. */
  .registration-intro::before,
  .registration-intro::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: 144%;
    height: 230px;
    inset-inline-start: -20%;
    bottom: -95px;
    border: 1px solid rgb(218 249 255 / .58);
    border-radius: 50%;
    background: linear-gradient(145deg, rgb(39 210 242 / .08), rgb(39 210 242 / .54));
    transform: rotate(-24deg);
  }

  .registration-intro::after {
    inset-inline-start: 6%;
    bottom: -140px;
    background: linear-gradient(145deg, rgb(134 234 255 / .30), rgb(39 210 242 / .04));
  }

  .registration-intro .registration-intro__edition {
    margin: 0 0 8px;
    color: var(--window-intro-copy);
    font-size: 13px;
    font-weight: 700;
  }

  .registration-window .registration-intro .h1 {
    color: #fff;
    font-size: clamp(24px, 2.3vw, 31px);
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .registration-window .registration-intro .lead {
    max-width: 48ch;
    color: var(--window-intro-copy);
    line-height: 1.5;
  }

  .registration-window .registration-intro .btn {
    display: inline-flex;
    width: auto;
    min-height: 44px;
    max-width: 100%;
    margin-top: 20px;
    padding: 8px 12px;
    border-color: #90c9f0;
    border-radius: 12px;
    background: var(--window-intro-button);
    color: #fff;
    font-size: 14px;
    text-align: start;
  }

  .registration-window .registration-intro .btn:hover { background: var(--window-intro-button-hover); }
  .registration-window .registration-intro .btn:focus-visible { outline-color: #fff; }
  .registration-content { min-width: 0; }
  .registration-content > :first-child { margin-top: 0; }
  .registration-content > * + #reg-form { margin-top: 16px; }

  .registration-window #reg-form {
    position: relative;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--window-pane);
    box-shadow: inset 0 1px 0 var(--window-rim), 0 12px 28px rgb(16 49 86 / .09);
  }

  .registration-window #reg-form .btn--primary { background: var(--window-button); }
  .registration-window #reg-form .btn--primary:hover { background: var(--frame-action-hover); }

  @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    .visitor-window {
      background: var(--window-glass);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      backdrop-filter: blur(20px) saturate(140%);
    }
    .visitor-window > .top { background: var(--window-toolbar-glass); }
  }

  @media (min-width: 841px) and (min-height: 620px) {
    .registration-window .registration-intro { position: sticky; top: 20px; }
  }

  @media (max-width: 840px) {
    .registration-window > .page {
      grid-template-columns: minmax(0, 1fr);
      max-width: 664px;
    }
    .registration-window .registration-intro { min-height: 0; }
    .registration-intro::before, .registration-intro::after {
      width: 90%;
      height: 155px;
      inset-inline-start: 48%;
      bottom: -96px;
      opacity: .42;
    }
    .registration-intro::after { bottom: -120px; }
  }

  @media (max-width: 640px) {
    :is(.registration-page, .visitor-account-page) { padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 20px; }
    .visitor-window { border-radius: 20px; }
    .visitor-window > .top { border-radius: 19px 19px 0 0; }
    .visitor-window .top__in { flex-wrap: wrap; padding: 6px 10px; gap: 4px 8px; }
    .visitor-window .top__logo { width: 88px; }
    .visitor-window .top__right { flex: 0 1 auto; flex-wrap: wrap; margin-inline-start: auto; }
    .registration-window :is(.top__right, .top__preferences) { gap: 6px; }
    .registration-window .registration-account-link { min-width: 44px; padding-inline: 0; }
    .registration-account-link svg { display: block; }
    .registration-account-link span { display: none; }
    .registration-window > .page { padding: 10px; gap: 12px; }
    .registration-window .registration-intro { padding: 20px 16px; border-radius: 14px; }
    .registration-window .registration-intro .h1 { font-size: clamp(21px, 6.2vw, 25px); }
    .registration-window .registration-intro .btn { margin-top: 12px; }
    .registration-window #reg-form { padding: 16px 12px; border-radius: 14px; }
  }

  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    :is(.registration-page, .visitor-account-page) { background: var(--paper); }
    .visitor-window {
      background: var(--paper);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .visitor-window > .top { background: var(--window-toolbar); }
  }

  @media (forced-colors: active) {
    .registration-intro::before,
    .registration-intro::after { display: none; }
  }


  @media (max-width: 374px) {
    .registration-window .top__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .registration-window .top__right { display: contents; }
    .registration-window .top__preferences { grid-column: 1 / -1; justify-self: end; }
  }

  .account-window { max-width: 888px; }
  .account-window > .page {
    max-width: 800px;
    padding: clamp(16px, 3vw, 28px);
  }

  .account-window .who {
    padding: clamp(16px, 3vw, 28px);
    border: 1px solid rgb(192 235 255 / .32);
    border-radius: 18px;
    background: var(--window-intro);
    color: #fff;
  }
  .account-window .who .h1 { color: inherit; }
  .account-window .who__sub { color: var(--window-intro-copy); }
  .account-window .who .linkbtn {
    min-height: 44px;
    padding-inline: 10px;
    color: inherit;
  }
  .account-window .who .linkbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .account-window > .page > .panel {
    padding: clamp(16px, 3vw, 24px);
    background: var(--window-pane);
  }
  .account-window .my-ticket__actions a { min-height: 44px; }

  @media (max-width: 640px) {
    .account-window > .page { padding: 12px; }
  }
}