/* THE ENTRY TICKET - the professor's login pass. The same object as the sign-in email (a one-time
   boarding pass in the KOHVEA logo's colours); on arrival its logo chip becomes the sidebar's mark and
   its band folds into the sidebar (ui/ticketArrival.js). Colours are tokens, defined once here. */
:root {
  --ticket-room: #0f1115;
  --ticket-room-lift: #17202b;
  --ticket-glow-blue: #1d5fa8;
  --ticket-glow-teal: #0f8a7f;
  --ticket-glow-gold: #9a7a2c;
  --ticket-band-from: #14508f;
  --ticket-band-mid: #155f86;
  --ticket-band-to: #0f8a7f;
  --ticket-gold: #f0d38c;
  --ticket-gold-ink: #a8822f;
  --ticket-paper: #ffffff;
  --ticket-stub: #f5f9f7;
  --ticket-ink: #0f1d19;
  --ticket-soft: #56675f;
  --ticket-faint: #8a9a93;
  --ticket-line: #d6e0db;
  --ticket-cta-to: #14a08f;
  --ticket-org: #e4eef6;
  --ticket-tag: #d6e6f2;
  --ticket-refused: #b4232f;
  /* the ticket's own depth and light, named once */
  --ticket-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  --ticket-chip-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  --ticket-cta-shadow: 0 12px 26px rgba(15, 118, 110, .38);
  --ticket-cta-shadow-hover: 0 16px 30px rgba(15, 118, 110, .45);
  --ticket-dot-grid: rgba(255, 255, 255, .06);
  --ticket-sheen: rgba(255, 255, 255, .14);
  --ticket-muted-on-band: rgba(255, 255, 255, .55);
  --ticket-glow: rgba(24, 184, 150, .8);
  --ticket-pulse-ring: rgba(24, 184, 150, .5);
  --ticket-ease: cubic-bezier(.22, 1, .36, 1);
  --ticket-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* the entry is the ticket alone: no top bar, no card frame, the whole window is the room */
.app-shell:has(#authView.view.is-active) .topbar { display: none; }
.app-shell:has(#authView.view.is-active) .workspace { width: 100%; max-width: none; padding: 0; }
#authView.ticket-entry { position: relative; min-height: 100vh; min-height: 100dvh; }

.ticket-room { position: fixed; inset: 0; z-index: var(--z-base); overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, var(--ticket-room-lift) 0%, var(--ticket-room) 62%); }
.ticket-room i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: ticket-drift 22s ease-in-out infinite alternate; }
.ticket-room i:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -10vmax; background: var(--ticket-glow-blue); }
.ticket-room i:nth-child(2) { width: 38vmax; height: 38vmax; right: -10vmax; top: 10vmax; background: var(--ticket-glow-teal); animation-delay: -7s; }
.ticket-room i:nth-child(3) { width: 30vmax; height: 30vmax; left: 30vmax; bottom: -16vmax; background: var(--ticket-glow-gold); opacity: .35; animation-delay: -13s; }
.ticket-room::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--ticket-dot-grid) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(70% 60% at 50% 40%, black, transparent); }
@keyframes ticket-drift { to { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); } }

.ticket-stage { position: relative; z-index: var(--z-raised); min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-9) var(--space-4); perspective: 1100px; }
.ticket { position: relative; width: min(440px, 100%); border-radius: var(--radius-5); box-shadow: var(--ticket-shadow); animation: ticket-rise .9s var(--ticket-spring) both; font-family: var(--font-body); }
@keyframes ticket-rise { from { opacity: 0; transform: translateY(40px) rotateX(14deg) scale(.96); } }

.ticket-band { position: relative; overflow: hidden; border-radius: var(--radius-5) var(--radius-5) 0 0; padding: var(--space-6) var(--space-7) var(--space-7); color: var(--ticket-paper); background: linear-gradient(118deg, var(--ticket-band-from) 0%, var(--ticket-band-mid) 48%, var(--ticket-band-to) 100%); }
.ticket-band::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 180%; background: linear-gradient(100deg, transparent 40%, var(--ticket-sheen) 50%, transparent 60%); transform: translateX(-140%); animation: ticket-sheen 6.5s 1.6s ease-in-out infinite; }
@keyframes ticket-sheen { 0%, 62% { transform: translateX(-140%); } 80%, 100% { transform: translateX(140%); } }
.ticket-brand { display: flex; align-items: center; gap: var(--space-3); }
.ticket-chip, .ticket-chip-fly { width: 52px; height: 52px; border-radius: var(--radius-4); background: var(--ticket-paper); display: grid; place-items: center; box-shadow: var(--ticket-chip-shadow); flex: none; }
.ticket-chip img, .ticket-chip-fly img { width: 44px; height: 44px; border-radius: var(--radius-3); display: block; }
.ticket-chip-fly { position: fixed; z-index: var(--z-overlay); pointer-events: none; transform-origin: 0 0; }
.ticket-brand-text { display: grid; gap: var(--space-0-5); }
.ticket-eyebrow, .ticket-lab { font-size: var(--font-size-00); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-label); color: var(--ticket-gold); }
.ticket-org { font-size: var(--font-size-1); font-weight: var(--weight-medium); color: var(--ticket-org); }
.ticket-mark { margin: var(--space-6) 0 var(--space-2); font-size: var(--font-size-7); line-height: var(--line-none); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-display); color: var(--ticket-paper); }
.ticket-tag { margin: 0; font-size: var(--font-size-2); color: var(--ticket-tag); }
.ticket-rows { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
.ticket-rows > div { display: grid; gap: var(--space-1-5); min-width: 0; }
.ticket-boarding { text-align: right; }
.ticket-val { min-height: 24px; font-size: var(--font-size-4); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.ticket-boarding .ticket-val { font-size: var(--font-size-3); font-weight: var(--weight-bold); }
.ticket-val.is-muted { color: var(--ticket-muted-on-band); font-size: var(--font-size-2); font-weight: var(--weight-medium); }

.ticket-body { background: var(--ticket-paper); padding: var(--space-6) var(--space-7) var(--space-6); color: var(--ticket-ink); }
.ticket-body .ticket-lab, .ticket-stub .ticket-lab { color: var(--ticket-gold-ink); }
.ticket-field { display: grid; gap: var(--space-2); margin: 0 0 var(--space-1); }
.ticket-input { position: relative; display: block; }
.ticket-input input { width: 100%; border: 0; border-bottom: var(--border-strong) solid var(--ticket-line); border-radius: 0; background: transparent; padding: var(--space-2) var(--space-0-5) var(--space-3); font: var(--weight-medium) var(--font-size-4)/1.3 var(--font-body); color: var(--ticket-ink); outline: none; min-height: 0; box-shadow: none; }
.ticket-input input::placeholder { color: var(--ticket-faint); font-weight: var(--weight-medium); }
.ticket-ink { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--ticket-band-from), var(--ticket-cta-to)); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-glide) var(--ticket-ease); }
.ticket-input input:focus + .ticket-ink { transform: scaleX(1); }
.ticket-department { margin-top: var(--space-4); }
/* every screen of the ticket opens with its own title and one line of what to do */
.ticket-step { margin: 0 0 var(--space-5); display: grid; gap: var(--space-1-5); }
.ticket-step h3 { margin: 0; font: var(--weight-heavy) var(--font-size-5) var(--font-body); color: var(--ticket-ink); }
.ticket-step p { margin: 0; font-size: var(--font-size-1); line-height: var(--line-body); color: var(--ticket-soft); }
.ticket-hint:empty { display: none; }
/* WHICH WAY IN: one ticket, its fields shown by data-ticket-mode (password by default, the pass, a new password, the lookup) */
.ticket-password, .ticket-newpass, .ticket-find, .ticket-confirm { margin-top: var(--space-4); }
.ticket-confirm { display: none; }
#authView[data-ticket-mode="signup"] .ticket-confirm { display: grid; }
/* the eye: inside the field, on the right; struck through while the password is hidden */
.ticket-input { position: relative; }
.ticket-eye { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--ticket-faint); cursor: pointer; border-radius: var(--radius-3); }
.ticket-eye:hover, .ticket-eye:focus-visible { color: var(--ticket-ink); }
.ticket-eye[aria-pressed="true"] .ticket-eye-slash { display: none; }
.ticket-input input#authPassword, .ticket-input input#authPasswordConfirm, .ticket-input input#authNewPassword, .ticket-input input#authNewPasswordAgain { padding-right: var(--space-9); }
.ticket-newpass, .ticket-find { display: none; gap: var(--space-4); }
.ticket-find select { width: 100%; border: 1px solid var(--ticket-line); border-radius: var(--radius-4); padding: var(--space-3); font: var(--weight-medium) var(--font-size-2) var(--font-body); color: var(--ticket-ink); background: var(--ticket-stub); }
.ticket-find-result { list-style: none; margin: 0; padding: var(--space-4); display: grid; gap: var(--space-2); border-radius: var(--radius-4); background: var(--ticket-stub); border-left: var(--border-accent) solid var(--ticket-cta-to); font: var(--weight-heavy) var(--font-size-3) var(--font-body); color: var(--ticket-ink); font-variant-numeric: tabular-nums; }
.ticket-find-result .ticket-find-head { font: var(--weight-heavy) var(--font-size-00) var(--font-body); letter-spacing: var(--tracking-label); color: var(--ticket-gold-ink); }
.ticket-find-result:empty { display: none; }
#authView[data-ticket-mode="pass"] .ticket-password,
#authView[data-ticket-mode="setpass"] .ticket-password,
#authView[data-ticket-mode="find"] .ticket-password,
/* checking the session on arrival: the ticket without any fields (no log-in drawn before the answer) */
#authView[data-ticket-mode="checking"] .ticket-step,
#authView[data-ticket-mode="checking"] .ticket-field,
#authView[data-ticket-mode="checking"] .ticket-cta,
#authView[data-ticket-mode="checking"] .ticket-links,
#authView[data-ticket-mode="find"] .ticket-field[for="authEmail"],
#authView[data-ticket-mode^="board"] .ticket-field[for="authEmail"],
#authView[data-ticket-mode^="board"] .ticket-password { display: none; }
#authView[data-ticket-mode="setpass"] .ticket-newpass,
#authView[data-ticket-mode="find"] .ticket-find { display: grid; }
.ticket-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); }
.ticket-link { border: 0; background: none; padding: var(--space-1); color: var(--ticket-soft); font: var(--weight-medium) var(--font-size-0) var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ticket-link:hover { color: var(--ticket-ink); }
#authView:not([data-ticket-mode]) .ticket-link[data-ticket-mode="password"],
#authView[data-ticket-mode="password"] .ticket-link[data-ticket-mode="password"],
#authView[data-ticket-mode="pass"] .ticket-link[data-ticket-mode="pass"],
#authView[data-ticket-mode="signup"] .ticket-link[data-ticket-mode="signup"],
#authView[data-ticket-mode="find"] .ticket-link[data-ticket-mode="find"],
#authView[data-ticket-mode="setpass"] .ticket-links,
#authView[data-ticket-mode^="board"] .ticket-links,
#authView.is-arriving .ticket-links { display: none; }
.ticket-department select { width: 100%; border: 1px solid var(--ticket-line); border-radius: var(--radius-4); padding: var(--space-3); font: var(--weight-medium) var(--font-size-3) var(--font-body); color: var(--ticket-ink); background: var(--ticket-stub); }
/* fixed by the roster (one school, one department): read as a value, not a control */
.ticket-department select:disabled { opacity: 1; color: var(--ticket-ink); background: transparent; border-style: dashed; appearance: none; cursor: default; }
.ticket-hint { margin: var(--space-2) 0 0; min-height: 18px; font-size: var(--font-size-0); color: var(--ticket-faint); }
.ticket-hint.is-refused { color: var(--ticket-refused); font-weight: var(--weight-medium); }
.ticket-cta.primary-action { margin-top: var(--space-5); width: 100%; min-height: 56px; border: 0; border-radius: var(--radius-4); display: flex; align-items: center; justify-content: center; gap: var(--space-2); font: var(--weight-heavy) var(--font-size-3) var(--font-body); letter-spacing: var(--tracking-wide); color: var(--ticket-paper); background: linear-gradient(90deg, var(--color-brand), var(--ticket-cta-to)); box-shadow: var(--ticket-cta-shadow); transition: transform var(--motion-fast), box-shadow var(--motion-normal), filter var(--motion-normal); }
.ticket-cta.primary-action:hover { filter: brightness(1.05); box-shadow: var(--ticket-cta-shadow-hover); }
.ticket-cta.primary-action:active { transform: translateY(1px) scale(.995); }
.ticket-cta[aria-busy="true"] { filter: saturate(.7); cursor: progress; }
.ticket-arrow { transition: transform var(--motion-normal) var(--ticket-ease); }
.ticket-cta:hover .ticket-arrow { transform: translateX(4px); }

/* the perforation: notches cut out of the paper, a dashed tear line */
.ticket-perf { position: relative; height: 30px; background: var(--ticket-paper);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 14px, black 14.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 14px, black 14.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 14px, black 14.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 14px, black 14.5px) right / 51% 100% no-repeat; }
.ticket-perf span { position: absolute; left: 22px; right: 22px; top: 14px; border-top: var(--border-strong) dashed var(--ticket-line); transform-origin: left; animation: ticket-draw .8s .75s var(--ticket-ease) both; transition: border-color var(--motion-slow); }
@keyframes ticket-draw { from { transform: scaleX(0); } }
.ticket-stub { border-radius: 0 0 var(--radius-5) var(--radius-5); background: var(--ticket-stub); padding: var(--space-4) var(--space-7) var(--space-5); color: var(--ticket-ink); transform-origin: 22px 0; }
.ticket-facts { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-2); }
.ticket-facts > div:last-child b { white-space: nowrap; font-size: var(--font-size-0); }
.ticket-facts > div { display: grid; gap: var(--space-1); min-width: 0; }
.ticket-facts .ticket-lab { font-size: var(--font-size-00); }
.ticket-facts b { font-size: var(--font-size-1); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }

/* arrival: stamped, the tear line lights, the stub tears off (ui/ticketArrival.js drives the classes) */
.ticket-stamp { position: absolute; right: 26px; top: 62px; padding: var(--space-1-5) var(--space-3); border: var(--border-accent) solid var(--ticket-gold); border-radius: var(--radius-3); color: var(--ticket-gold); font: var(--weight-heavy) var(--font-size-3) var(--font-body); letter-spacing: var(--tracking-label); opacity: 0; transform: rotate(-12deg) scale(2.2); pointer-events: none; }
.ticket-arriving { display: none; align-items: center; gap: var(--space-3); min-height: 118px; font-size: var(--font-size-3); line-height: var(--line-body); color: var(--ticket-soft); }
.ticket-arriving b { display: block; color: var(--ticket-ink); font-size: var(--font-size-4); font-weight: var(--weight-heavy); }
.ticket-pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--ticket-cta-to); box-shadow: 0 0 0 0 var(--ticket-pulse-ring); animation: ticket-pulse 1.2s ease-out infinite; flex: none; }
@keyframes ticket-pulse { to { box-shadow: 0 0 0 14px rgba(24, 184, 150, 0); } }
/* the mail went out: a toast pinned just above the ticket it speaks for, gone in four seconds */
.ticket-toast { position: absolute; z-index: var(--z-toast); bottom: calc(100% + var(--space-3)); left: 50%; margin: 0; white-space: nowrap; padding: var(--space-3) var(--space-5); border-radius: var(--radius-4); background: var(--ticket-paper); color: var(--ticket-ink); font: var(--weight-heavy) var(--font-size-1) var(--font-body); box-shadow: var(--ticket-shadow); border-left: var(--border-accent) solid var(--ticket-cta-to); opacity: 0; transform: translate(-50%, -12px); pointer-events: none; transition: opacity var(--motion-normal), transform var(--motion-normal); }
.ticket-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
/* a refusal after the mail (too many, the mail service down) is still said - never a button that seems to do nothing */
#authView.is-arriving .ticket-field, #authView.is-arriving .ticket-hint, #authView.is-arriving .ticket-cta { display: none; }
#authView.is-arriving .ticket-arriving { display: flex; }
#authView.is-arriving .ticket-stamp { animation: ticket-stamp .5s .25s var(--ticket-spring) forwards; }
@keyframes ticket-stamp { to { opacity: .95; transform: rotate(-12deg) scale(1); } }
#authView.is-glowing .ticket-perf span { border-color: var(--ticket-cta-to); filter: drop-shadow(0 0 var(--space-1-5) var(--ticket-glow)); }
#authView.is-tearing .ticket-stub { animation: ticket-tear .9s var(--ticket-ease) forwards; }
#authView.is-tearing .ticket-perf span { border-color: transparent; }
@keyframes ticket-tear { 0% { transform: none; } 18% { transform: rotate(-3deg); } 100% { transform: translate(60px, 260px) rotate(-26deg); opacity: 0; } }

@media (max-width: 480px) {
  .ticket-band, .ticket-body, .ticket-stub { padding-left: var(--space-5); padding-right: var(--space-5); }
  .ticket-mark { font-size: var(--font-size-7); }
}
@media (prefers-reduced-motion: reduce) {
  .ticket, .ticket-room i, .ticket-band::before, .ticket-perf span, .ticket-pulse { animation: none; }
}