/* One doorway, not a second visual identity. Loaded by the page finalizer. */
:root {
  --fd-transition-ready: 1;
}
/*
 * The shared controller focuses the destination heading so assistive
 * technology announces the new page. Headings are not interactive controls,
 * so the browser's default focus ring is visual noise rather than a useful
 * keyboard affordance. Keep real control focus indicators untouched.
 */
:where(h1, h2, h3)[tabindex="-1"]:focus {
  outline: none;
}
/*
 * Static cover behind the outgoing wipe-in only. The panel itself is what
 * animates (clip-path), so without an opaque layer behind it the live page
 * shows through the still-clipped portion for the duration of that wipe.
 * Never used for the incoming wipe-out, which is supposed to reveal the
 * real destination page underneath.
 */
.fd-transition-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--cobalt);
}
.fd-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: var(--cobalt);
  color: var(--ink);
  isolation: isolate;
  padding: clamp(24px, 4.5vw, 80px);
  display: flex;
  flex-direction: column;
}
.fd-transition__logo {
  width: clamp(170px, 15vw, 220px);
  height: auto;
}
.fd-transition__copy {
  position: relative;
  z-index: 1;
  margin-block: auto;
  padding-block: 36px;
  max-width: 900px;
}
.fd-transition__meta,
.fd-transition__foot {
  font: var(--meta-weight) 12px/var(--meta-leading) var(--meta-font);
  letter-spacing: var(--meta-track);
  text-transform: uppercase;
}
.fd-transition__title {
  display: block;
  max-width: 9em;
  margin-top: 24px;
  font: var(--display-weight) clamp(54px, 8vw, 124px)/var(--display-leading)
    var(--display-font);
  letter-spacing: var(--display-track);
  text-wrap: balance;
  position: relative;
  width: fit-content;
  background: var(--cobalt);
  box-shadow:
    12px 0 0 var(--cobalt),
    -12px 0 0 var(--cobalt);
}
.fd-transition__foot {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.fd-transition__frame {
  position: absolute;
  inset: 15% -3% 15% 53%;
  pointer-events: none;
}
.fd-transition__frame span {
  position: absolute;
  display: block;
  background: var(--paper);
}
.fd-transition__frame span:nth-child(1) {
  inset: 0 0 auto 0;
  height: 8px;
  transform-origin: right;
}
.fd-transition__frame span:nth-child(2) {
  inset: 0 auto 0 0;
  width: 8px;
  transform-origin: top;
}
.fd-transition__frame span:nth-child(3) {
  inset: auto 0 0 0;
  height: 8px;
  transform-origin: left;
}
.fd-transition__arrow {
  position: absolute;
  width: clamp(80px, 12vw, 190px);
  height: auto;
  right: 9%;
  bottom: 21%;
}
.fd-transition-status {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Real pending feedback is in the form. This never asserts successful access. */
form[data-busy="true"] button[type="submit"] {
  cursor: progress;
}
.workspace-loading {
  padding: clamp(32px, 5vw, 76px) 0;
  min-height: 45vh;
  display: grid;
  align-content: center;
  gap: 22px;
}
.workspace-loading__frame {
  width: 100px;
  height: 88px;
  border: 5px solid var(--cobalt);
  border-right: 0;
}
.workspace-loading__title {
  display: block;
  max-width: 9em;
  font: var(--display-weight) clamp(42px, 5vw, 72px)/var(--display-leading)
    var(--display-font);
  letter-spacing: var(--display-track);
}
.workspace-loading__note {
  color: var(--quiet);
  font: var(--body-weight) 15px/var(--body-leading) var(--body-font);
}
@media (max-width: 600px) {
  .fd-transition__meta,
  .fd-transition__foot {
    font-size: 10px;
  }
  .fd-transition__meta {
    display: block;
    max-width: 17em;
  }
  .fd-transition__frame {
    inset: 20% -35% 22% 62%;
  }
  .fd-transition__title {
    font-size: clamp(46px, 12vw, 72px);
    max-width: 6.7em;
  }
  .fd-transition__arrow {
    bottom: 15%;
    right: 8%;
    width: 72px;
  }
}
@media (prefers-reduced-motion: reduce), print {
  .fd-transition,
  .fd-transition-backdrop {
    display: none;
  }
}