/* Sign-in. Calm two-panel layout in the TDR family: illustration left, form right.
   Both columns share the same top line (88px) and bottom line (footer). */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); background: var(--panel); }

.login-art { background: #EEF3F7; padding: 40px 48px 32px; display: flex; flex-direction: column; }
.lg-brand { display: flex; align-items: center; gap: 12px; height: 48px; }
.lg-brand b { display: block; font: 700 20px/1.1 var(--disp); color: #1B2B33; }
.lg-brand small { font-size: 13px; color: #4F6068; font-weight: 600; }
.lg-copy { margin-top: 64px; }
.lg-copy h2 { font: 750 40px/1.1 var(--disp); letter-spacing: -.035em; color: #172638; }
.lg-copy p { margin-top: 12px; font-size: 16px; color: #41525A; }
/* Ferris mark: the wheel draws in while the name arrives, cabins pop on; then it turns one notch every 6 s and rests. */
.pd-mark { width: 50px; height: 50px; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pd-leg, .pd-rim { stroke: #22566A; stroke-width: 2.8; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pd-leg { animation: pd-draw .6s cubic-bezier(.3,.7,.3,1) forwards; }
.pd-rim { animation: pd-draw .9s cubic-bezier(.3,.7,.3,1) .15s forwards; }
.pd-spoke { stroke: #22566A; stroke-width: 1.9; opacity: 0; animation: pd-fade .4s ease .5s forwards; }
.pd-hub { fill: #22566A; }
.pd-w { display: inline-block; opacity: 0; transform: translateY(6px); animation: pd-arrive .7s cubic-bezier(.2,.8,.2,1) .15s forwards; }
.pd-w2 { color: #2F7E93; animation-delay: .27s; }
.lg-brand b { font-size: 22px; }
.lg-brand small.pd-by { opacity: 0; animation: pd-fade .6s ease .5s forwards; }
@keyframes pd-draw { to { stroke-dashoffset: 0; } }
@keyframes pd-fade { to { opacity: 1; } }
@keyframes pd-pop { to { transform: scale(1); } }
@keyframes pd-arrive { to { opacity: 1; transform: none; } }
@keyframes pd-notch6 { 0%, 35% { transform: rotate(0); } 75%, 100% { transform: rotate(60deg); } }
@keyframes pd-notch8 { 0%, 35% { transform: rotate(0); } 75%, 100% { transform: rotate(45deg); } }

/* Park plan: a blueprint that traces itself, fills in with soft park colour, then lives on calm loops. */
.lg-scene { flex: 1; min-height: 340px; margin-top: 24px; display: flex; align-items: center; justify-content: center; }
.plan { width: 100%; height: 100%; max-height: 600px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plan .tr { stroke: #2F6E80; stroke-width: 1.9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pd-draw 1.5s cubic-bezier(.4,.6,.3,1) forwards; }
.plan .wall { stroke-width: 2.6; }
.plan .d2 .tr { animation-delay: .25s; } .plan .d3 .tr { animation-delay: .5s; } .plan .d4 .tr { animation-delay: .75s; }
.plan .grass { fill: #E4EFDF; }
.plan .walk { stroke: #F1E4C6; stroke-width: 16; }
.plan .ties { stroke: #2F6E80; stroke-width: 3.6; stroke-dasharray: 1.6 9; }
.plan .rail { stroke-width: 7.5; }
.plan .rail-in { stroke: #E4EFDF; stroke-width: 3.6; }
.plan .chute { stroke: #CDE7EE; stroke-width: 9; }
.plan .fl, .plan .flow { opacity: 0; animation: pd-fade .7s ease 1.6s forwards; }
.plan .tr.fl-water, .plan .tr.fl-leaf, .plan .tr.fl-kiosk, .plan .tr.fl-table, .plan .tr.fl-hub,
.plan .tr.fl-sand, .plan .tr.fl-bed, .plan .tr.fl-tent, .plan .tr.fl-deck, .plan .tr.cab {
  fill-opacity: 0; animation: pd-draw 1.5s cubic-bezier(.4,.6,.3,1) forwards, pd-fill .7s ease 1.6s forwards; }
.plan .fl-water { fill: #C9E5EE; } .plan .fl-leaf { fill: #C7DFBF; } .plan .fl-sand { fill: #F1E4C6; }
.plan .fl-bed { fill: #D3E6C9; } .plan .fl-tent { fill: #F7DCC9; } .plan .fl-deck { fill: #F7F1E3; }
.plan .tree .tr { stroke: #5E8F6B; } .plan .fl-bed { stroke: #5E8F6B; }
.plan .fl-kiosk { fill: #D8E9EE; } .plan .fl-table { fill: #F3D9A8; } .plan .fl-hub { fill: #2F6E80; }
.plan .cab { fill: #F2BFA9; }
.plan .waves path { stroke: #7DB9CB; stroke-width: 1.6; }
.plan .waves { animation: pd-fade .7s ease 1.6s forwards, pd-wave 6s linear 1.6s infinite; }
.plan .spin { transform-box: view-box; transform-origin: 150px 140px; animation: pd-notch8 6s ease-in-out 2.4s infinite; }
.plan .spin2 { transform-box: view-box; transform-origin: 232px 408px; animation: pd-notch6 6s ease-in-out 3.4s infinite; }
@keyframes pd-fill { to { fill-opacity: 1; } }
@keyframes pd-wave { to { transform: translateX(-40px); } }

@media (prefers-reduced-motion: reduce) {
  .pd-mark *:not(.pd-wheel):not(.pd-cab), .pd-w, .pd-by, .plan * { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; fill-opacity: 1 !important; transform: none !important; }
  .plan .flow, .pd-car { display: none; }
}

.lg-note { margin-top: 16px; font-size: 13px; color: #4F6068; font-weight: 600; }

.login-form { display: flex; flex-direction: column; align-items: flex-start; padding: 40px clamp(32px, 7vw, 104px) 32px; }
.lf-inner { width: 100%; max-width: 600px; margin: auto 0; }
.login-form h1 { font: 750 36px/1.1 var(--disp); letter-spacing: -.035em; color: var(--ink); }
.lf-sub { margin-top: 8px; font-size: 16px; color: var(--ink-2); }
.login-form form { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.lf-field { display: flex; flex-direction: column; gap: 8px; }
.lf-field label { font-weight: 600; font-size: 14px; color: var(--ink); }
.lf-hint { font-size: 13px; color: var(--ink-3); }
.login-form .input { height: 48px; font-size: 16px; border-radius: 10px; padding: 0 16px; }
.code-input { text-transform: uppercase; letter-spacing: .04em; }
.lf-chip { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 16px; border-radius: 10px; background: var(--tint); }
.lf-chip b { font: 700 18px var(--disp); letter-spacing: .04em; color: var(--ink); }
.lf-link { margin-left: auto; height: 36px; padding: 0 12px; border-radius: 8px; border: 0; background: transparent; color: var(--brand); font: 600 14px var(--font); cursor: pointer; }
.lf-link:hover { background: var(--panel); }
.lf-link:focus-visible { box-shadow: var(--focus); }
.pw { position: relative; }
.pw .input { padding-right: 52px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.pw-eye:hover { background: var(--tint); color: var(--ink); }
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye[aria-pressed="true"] { color: var(--brand); }
.lf-caps { font-size: 13px; font-weight: 600; color: var(--warn); }
.lf-remember { font-weight: 500; color: var(--ink-2); }
.lf-submit { height: 52px; font: 700 17px var(--disp); border-radius: 10px; width: 100%; }
.lf-submit[aria-busy="true"] { opacity: .8; cursor: progress; }
.lf-error { align-items: center; }
.lf-error ul { margin: 0; padding: 0; list-style: none; }
.lf-error::before { content: "!"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bad); color: #fff; display: grid; place-items: center; font: 700 14px var(--disp); }
.lf-help { margin-top: 24px; color: var(--ink-3); font-size: 14px; line-height: 1.6; }
.lf-help a { color: var(--brand, #22566A); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lf-foot { width: 100%; max-width: 600px; color: var(--ink-3); font-size: 13px; }
/* One-time link pages: the sign-in facts the owner will need, side by side. */
.lf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.lf-facts .lf-chip { padding-right: 16px; min-width: 0; }
.lf-facts .lf-chip b { overflow-wrap: anywhere; }
.lf-facts + .lf-hint { margin-top: -12px; }

@media (max-width: 960px) {
  .login { grid-template-columns: 1fr; }
  .login-art { padding: 24px; }
  .lg-copy, .lg-scene, .lg-note { display: none; }
  .login-form { padding: 24px 24px 32px; }
  .lf-inner { margin-top: 24px; }
}

/* Fit the screen, never scroll: the page is exactly one viewport tall (dvh follows mobile browser bars) and
   vertical rhythm scales with height. The illustration absorbs the slack and shrinks first. */
.login { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.login-art { min-height: 0; padding-top: clamp(16px, 4.5vh, 40px); padding-bottom: clamp(14px, 3.5vh, 32px); }
.lg-copy { margin-top: clamp(16px, 7vh, 64px); }
.lg-copy h2 { font-size: clamp(26px, 4.4vh, 40px); }
.lg-scene { min-height: 0; margin-top: clamp(8px, 2.5vh, 24px); }
.login-form { min-height: 0; overflow-y: auto; padding-top: clamp(16px, 4.5vh, 40px); padding-bottom: clamp(14px, 3.5vh, 32px); }
.login-form h1 { font-size: clamp(26px, 4vh, 36px); }
.login-form form { margin-top: clamp(14px, 3.5vh, 32px); gap: clamp(10px, 2.1vh, 20px); }
.login-form .input, .lf-chip { height: clamp(40px, 5.4vh, 48px); }
.lf-submit { height: clamp(42px, 5.8vh, 52px); }
.lf-help { margin-top: clamp(10px, 2.6vh, 24px); }
@media (max-height: 640px) {
  .lg-copy p, .lg-note, .lf-hint { display: none; }
}
@media (max-height: 520px) {
  .lg-scene { display: none; }
}
@media (max-width: 960px) {
  .login { grid-template-rows: auto minmax(0, 1fr); }
  .login-art { padding: clamp(12px, 2.5vh, 24px) 24px; }
  .login-form { padding: clamp(12px, 2.5vh, 24px) 24px; }
  .lf-inner { margin-top: clamp(8px, 2vh, 24px); }
}
/* Small Ferris tile above "Welcome back", left-aligned with the W. */
.lf-badge { display: block; width: clamp(40px, 6vh, 48px); height: auto; border-radius: 12px; margin-bottom: clamp(12px, 2.4vh, 20px); box-shadow: 0 6px 16px rgb(34 86 106 / 18%); }
/* What Ferris does, in three plain lines under the headline. */
.lg-copy h2 { max-width: 16ch; font-size: clamp(24px, 3.9vh, 34px); line-height: 1.15; }
.lg-points { list-style: none; margin: clamp(12px, 2.4vh, 20px) 0 0; padding: 0; display: grid; gap: clamp(6px, 1.2vh, 10px); }
.lg-points li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: #33454E; }
.lg-points svg { width: 16px; height: 16px; flex: none; color: #22566A; }
@media (max-height: 640px) { .lg-points { display: none; } }
@media (max-width: 960px) { .lf-badge { display: none; } }
/* The art column is only as wide as the park drawing needs at this screen height (the drawing is ~1:1 and
   height-limited), so no empty strip sits beside it; the form takes the rest. */
@media (min-width: 961px) {
  .login { grid-template-columns: clamp(380px, 56vh, 42vw) minmax(0, 1fr); }
  .lg-scene { justify-content: flex-start; }
}
@media (min-width: 961px) {
  .login-form { align-items: center; }
  .lf-inner, .lf-foot { max-width: 520px; }
}