/* One press changes the paper and the stamp together. */
.login-head-actions { display: flex; align-items: center; gap: 9px; }
:is(.brand,.login-brand) .brand-name { white-space: nowrap; }
.head-inner .brand { flex: none; }
.head-actions #account-toggle { max-width: min(100%,24vw,175px); }
.theme-picker {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  appearance: none;
  border: 1px solid #c6c8bf;
  border-radius: 50%;
  background: transparent;
  color: #434a44;
  cursor: pointer;
}
.theme-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.theme-icon > * { transform-box: view-box; transform-origin: 50% 50%; }
.theme-light, html[data-theme="dark"] .theme-dark { opacity: 1; transform: none; }
.theme-dark { opacity: 0; transform: rotate(-50deg) scale(.92); }
html[data-theme="dark"] .theme-light { opacity: 0; transform: rotate(50deg) scale(.92); }
.theme-picker:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .theme-picker:hover { color: var(--blue); border-color: #a0aed7; background-color: #e8ecfa; }
}
@media (prefers-reduced-motion: no-preference) {
  .theme-picker { transition: background-color 150ms, border-color 150ms, color 150ms; }
  .theme-icon { transition: transform 140ms var(--ease-out); }
  .theme-picker:active .theme-icon { transform: scale(.94); }
  html[data-theme-switching] .theme-icon > * {
    transition: transform 260ms var(--ease-out), opacity 200ms ease;
  }
}

/* Keep the artwork live. Only the dark ink behind each surface fades in. */
:root { --night-print: linear-gradient(112deg,#293143 1%,#263248 48%,#34435a); }
.ticket-top, #pinned-bar { isolation: isolate; }
#pinned-bar { position: relative; }
:is(.ticket-top,.login-sheet,.login-art,#pinned-bar)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
}
.ticket-top::after {
  background: radial-gradient(ellipse 46% 87% at 73% 43%,#60749393,transparent 95%), var(--night-print);
}
.login-sheet::after { background: var(--night-print); }
.login-art::after { background: radial-gradient(ellipse at 49% 57%,#52637b,#354357 67%,#2d394c); }
#pinned-bar::after { background: linear-gradient(105deg,#28354b,#1f2939); }
html[data-theme="dark"] :is(.ticket-top,.login-sheet,.login-art,#pinned-bar)::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  html[data-theme-switching] :is(.ticket-top,.login-sheet,.login-art,#pinned-bar)::after {
    transition: opacity 260ms ease;
  }
  html[data-theme-switching] :where(
    body, .masthead, .login-masthead, .ticket, .ticket-top, .ticket-stub, .login-sheet,
    .login-art, .blue-title, .hero-intro, .ticket-rule, .ticket-rule p, .brand-name,
    .brand-pass, .annotation, .login-intro, .login-wordmark, .login-status, .login-preview,
    .input-shell, #verification-url, .paste, .submit, .login-button,
    .help-link, .login-home, .announcement-bell, .account-link, #account-toggle, #pinned-bar,
    #reader-detail, .message, #cancel-verification
  ) {
    /* Change ink as the stock passes midtone so letters keep their contrast. */
    transition: background-color 260ms ease, color 85ms step-end, border-color 260ms ease,
      box-shadow 260ms ease, transform 150ms var(--ease-out);
  }
  html[data-theme-switching] .submit::before,
  html[data-theme-switching] .perforation::before,
  html[data-theme-switching] .perforation::after {
    transition: background-color 260ms ease, border-color 260ms ease;
  }
}
@media (max-width: 620px) {
  .theme-picker { width: 36px; height: 36px; }
  .login-head-actions { gap: 6px; }
}
@media (max-width: 470px) {
  .head-inner:has(> .head-actions) { column-gap: 6px; }
  .head-actions .help-link { min-width: 36px; padding-inline: 8px; }
  .head-actions .help-link span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
}
@media (max-width: 420px) {
  .head-inner .brand, .login-brand { gap: 6px; }
  :is(.head-inner,.login-nav) .brand-name { font-size: 20px; letter-spacing: -1.15px; }
  :is(.head-inner,.login-nav) .brand-sculpture { width: 27px; height: 27px; }
  .head-actions #account-toggle { padding-inline: 7px; }
}
@media (max-width: 365px) {
  .login-brand, .head-inner .brand, .head-inner:has(.announcement-bell:not([hidden])) .brand { gap: 4px; }
  .login-nav .brand-name, .head-inner .brand-name, .head-inner:has(.announcement-bell:not([hidden])) .brand-name {
    font-size: 18px;
  }
  :is(.head-inner,.login-nav) .brand-sculpture { width: 23px; height: 23px; }
  .head-actions, .head-actions:has(.announcement-bell:not([hidden])) { gap: 3px; }
  .head-actions :is(.theme-picker, .announcement-bell) { width: 33px; height: 36px; }
  .head-actions .theme-picker { border-radius: 18px; }
  .head-actions .help-link { min-width: 33px; padding-inline: 7px; }
}
@media (max-width: 350px) {
  .head-actions .account-link .icon { display: none; }
}

/* Warm letterpress ink on midnight stock. The colored artworks stay in full color. */
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #10151e;
  --paper: #293346;
  --ink: #f1ede4;
  --muted: #b9c2d1;
  --blue: #acc0ff;
  --orange: #ff9361;
  --stroke: #354052;
  --rule: #53627a;
  --panel: #1c2533;
  --well: #141c28;
  --rim: #4a5970;
  --control: #293546;
  --control-hover: #36455b;
  --action: #455fc6;
  --action-hover: #506acb;
  --action-edge: #637bda;
  --good: #a4dab7;
  --good-stock: #243b34;
  --error: #ffad96;
  --error-stock: #452c2e;
  --flight-stock: #2e3c54;
  --sheet-shadow: 0 3px 0 #263041, 0 16px 29px -18px #03060dbf;
  --ink-stock: var(--night-print);
  --note-paper: linear-gradient(111deg,#303b4e,#293548 65%,#2c394c);
}
html[data-theme="dark"] {
  &::selection, ::selection { background: #aebeea; color: #182034; }
  :is(.brand,.login-brand) .brand-name { color: var(--ink); }
  .brand-pass, .pin-glyph { color: var(--blue); }
  :is(.theme-picker,.help-link,.login-home) { color: var(--ink); border-color: var(--rim); }
  .announcement-bell, .pinned-arrow { color: var(--muted); }
  .login-masthead { border-color: var(--stroke); }

  /* The spot of softer blue sits behind the textile so its dark seams remain visible. */
  .ticket, .login-sheet { border-color: var(--rim); box-shadow: var(--sheet-shadow); }
  .ticket { background: var(--panel); }
  :is(.ticket-face,.login-sheet)::before { mix-blend-mode: soft-light; opacity: .14; }
  .paper-light { background: radial-gradient(ellipse,#9fb5f32b,transparent 68%); }
  .halftone { background-image: radial-gradient(circle,#a9bad5 1px,transparent 1.25px); opacity: .44; }
  .spark-b { background: #b6c4ff; }
  .orbit::before { border-color: #b9c8ea88; }
  .annotation { color: #c4d2ff; }
  .ticket-stub { background: #273245; border-color: #78839a; color: #d3d8ee; }
  .ticket-stub::before { background: var(--action); }
  .barcode {
    background: repeating-linear-gradient(to bottom,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,
      transparent 5px 8px,currentColor 8px 12px,transparent 12px 14px,currentColor 14px 16px,
      transparent 16px 20px,currentColor 20px 23px,transparent 23px 25px);
  }
  .desk[data-link-state="ready"] .barcode { filter: none; mix-blend-mode: normal; color: #f4ecd8; }
  .perforation { background: repeating-linear-gradient(to right,#758099 0 6px,transparent 6px 12px); }
  .perforation::before, .perforation::after { border-color: var(--rim); }
  .ticket-rule, .pass-guide-foot, #slow-notice, .login-action { border-color: var(--rule); }

  .hero-intro, .ticket-rule p, .message, #reader-detail, .login-intro, .login-status,
  .guide-instruction p, #announcement-date, #announcement-body { color: var(--muted); }
  .input-shell { background: var(--well); border-color: #636f83; }
  .input-shell:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #8ca7ff26; }
  .input-shell:has(input[aria-invalid="true"]) { border-color: var(--error); box-shadow: 0 0 0 3px #ffad961a; }
  input { color: var(--ink); }
  input::placeholder, .input-icon { color: #aab5c7; }
  .desk[data-link-state="ready"] .input-shell { --ink-line: var(--good); }
  .desk[data-link-state="error"] .input-shell { --ink-line: var(--error); }
  .ready-stamp, .paste[data-paste-state="done"] { color: var(--good); background: var(--good-stock); }
  .paste[data-paste-state="done"] { border-color: #668a74; }
  .desk[data-link-state="ready"] .input-icon, .message[data-tone="ready"] { color: var(--good); }
  .paste[data-paste-state="error"] { color: var(--error); background: var(--error-stock); border-color: #a66b64; }
  .message[data-tone="error"], #reader-panel[data-phase="failed"] #reader-title { color: var(--error); }
  .paste, #cancel-verification, #announcement-snooze {
    color: #e2dfd7; background-color: var(--control); border-color: var(--rim);
  }
  .submit { background: #273975; border-color: var(--action-edge); box-shadow: 0 2px 0 #0b1223; }
  .submit::before, .account-link, .login-button, .guide-start, .guide-book { background-color: var(--action); }
  .submit::after { background-image: linear-gradient(112deg,#364caa 42%,#4b63c4 74%,#7388d9 92%,transparent 93%); }
  .login-button, .guide-start, .guide-book { border-color: var(--action-edge); }
  .login-button, .guide-start { box-shadow: 0 2px 0 #141e40; }
  .press-mark { border-color: #b5c4ffa8; }
  #slow-copy, #account-feedback { color: #e8c399; }
  .notice-rule { background: var(--orange); }
  .preview-tools a { color: var(--muted); }
  .preview-tools a[aria-current] { color: var(--blue); }
  .charm-stage::before { background-image: radial-gradient(circle,#9caac4 .8px,transparent 1px); }
  .charm-stage:not([data-reader-mark])::after { background: radial-gradient(ellipse,#050a12aa,transparent 68%); }

  #account-toggle { color: #c6e2ce; background: var(--good-stock); border-color: #496957; }
  #account-toggle::before { background: var(--good); }
  #account-panel, .pass-guide { border-color: var(--rim); background: var(--panel); box-shadow: var(--sheet-shadow); }
  #pinned-bar { color: #d9e0f0; border-color: var(--rim); }
  .announcement-scrim, .pass-guide::backdrop { background: #060910ab; }
  .announcement-paper-shell { --note-edge: #657187; --note-stock: var(--note-paper); }
  .announcement-meta::after { background-image: repeating-linear-gradient(90deg,#788397 0 3px,transparent 3px 7px); }
  .announcement-dismiss, .guide-instruction strong { color: var(--ink); }
  #announcement-title { color: #c1cefa; }
  .announcement-content { scrollbar-color: #6c7a90 transparent; }
  .pass-guide-head { background: var(--ink-stock); border-color: var(--rule); }
  .guide-step + .guide-step { border-color: var(--stroke); }
  .guide-instruction a { text-decoration-color: #8393c0; }
  .copy-tip[open] p { border-color: #738685; }
  .guide-art { border-color: #626879; background-color: #433e38; }
  .art-copy { background-color: #303e55; }
  .art-paste { background-color: #303f3b; }
  .guide-no { color: #d6d9d1; }
  .demo-flare { color: #435bc2; }
  .demo-button { background: #435bc2; }

  .login-art { border-color: #768297; }
  .print-track, .print-track::before, .print-track::after { border-color: #a3b7d067; }
  .login-preview { color: #ffc692; background: #45372e; border-color: #78604c; }
  &[data-auth-stage="error"] .login-status { color: var(--error); }

  /* The CSS bridge on the next document must match the flying coupon exactly. */
  .pass-coupon, &:is([data-pass-entry],[data-pass-return])::after {
    border-color: #76859c;
    color: #ccdaff;
    box-shadow: 1px 2px 0 #708099, 2px 4px 0 #485870, 4px 8px 0 -3px #344359, 5px 18px 30px -12px #04081199;
    background:
      radial-gradient(circle,var(--orange) 0 66%,transparent 70%) 10% 21% / 3.3% 6.3% no-repeat,
      repeating-linear-gradient(0deg,#c2cde2 0 2px,transparent 2px 4px,#c2cde2 4px 5px,transparent 5px 7px,#c2cde2 7px 10px,transparent 10px 13px) 93% 73% / 6% 31% no-repeat,
      repeating-linear-gradient(0deg,#9aa6bb 0 3px,transparent 3px 8px) 83% 0 / 1px 100% no-repeat,
      linear-gradient(90deg,transparent 0 82.9%,#303c50 83%),
      linear-gradient(90deg,#364259,#424f68 34%,#2d384d 42%,#4e5d77 42.5%,#3c4a63 55%,#344157 83%),
      var(--flight-stock);
  }

  @media (hover: hover) and (pointer: fine) {
    :is(.theme-picker,.help-link,.login-home,.announcement-bell,.announcement-dismiss,.guide-dismiss):hover {
      background: var(--control-hover); color: var(--ink); border-color: #6c7e97; box-shadow: none;
    }
    .paste:not([data-paste-state="done"],[data-paste-state="error"]):hover,
    #announcement-snooze:hover, #cancel-verification:hover,
    #account-logout:enabled:not([aria-disabled="true"]):hover { background: var(--control-hover); color: var(--ink); }
    .account-link:hover, .login-button:hover:not(:disabled,[aria-disabled="true"]), .guide-start:hover {
      background: var(--action-hover);
    }
    #account-toggle:hover { background: #314a3d; }
  }
}