/* The public entry screen has its own layout; authenticated workflows keep
   their existing modal and form styles. All directions use logical geometry. */
html:root .auth-gate,
html:root .modal.auth-dialog {
  --auth-ink: #142d49;
  --auth-muted: #52647a;
  --auth-surface: #f8fbff;
  --auth-line: #bbc9d8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  place-items: stretch;
  background: var(--auth-surface);
  color: var(--auth-ink);
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: start;
}
html:root .auth-gate[hidden] { display: none; }
html:root .auth-gate { overflow: auto; }
html:root .auth-dialog-back { padding: 0; background: #f8fbff; place-items: stretch; animation: none; opacity: 1; }
html:root .modal.auth-dialog {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  overflow: auto;
  animation: none;
}
.auth-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 650px;
  padding: clamp(28px, 4vw, 64px);
  color: #fff;
  background: radial-gradient(ellipse at 90% 0, #456687 0, #244564 48%, #16314d 100%);
}
.auth-brand { position: relative; z-index: 1; font-size: 28px; font-weight: 750; letter-spacing: -.6px; }
.auth-scene-copy { position: relative; z-index: 1; margin-top: clamp(56px, 8vh, 100px); max-width: 520px; }
html:root .auth-scene-copy h2 { color: #fff; margin: 0; font-size: clamp(38px, 4.7vw, 68px); line-height: 1.05; letter-spacing: -.03em; font-weight: 750; }
html:root .auth-scene-copy p { margin: 20px 0 0; color: #d6e5f4; font-size: clamp(19px, 2vw, 26px); line-height: 1.4; }
.auth-scene-art { position: absolute; z-index: -1; inset-inline: 0; bottom: 0; height: 66%; background: url('assets/field-territory.webp') center bottom / cover no-repeat; opacity: .95; mask-image: linear-gradient(to bottom, transparent, #000 26%); }
.auth-scene-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 82%, #16314d 100%); }
html:root .auth-scene-caption { position: absolute; z-index: 1; bottom: 34px; margin: 0; color: #dae6f3; font-size: 14px; }
.auth-scene-caption::before { content: ''; display: block; width: 36px; height: 2px; background: #acc8e1; margin-bottom: 16px; }
.auth-panel { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-width: 0; padding: 112px clamp(28px, 6vw, 100px) 32px; }
.auth-dialog::before { display: none!important; }
.auth-preferences { position: absolute; inset-block-start: 28px; inset-inline-end: 40px; display: flex; align-items: center; gap: 20px; }
.auth-language,.auth-themes { display: flex; align-items: center; gap: 4px; }
.auth-language > span { color: var(--auth-line); }
html:root .auth-preferences button { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--auth-muted); padding: 8px; border-radius: 22px; font: inherit; font-size: 14px; cursor: pointer; }
html:root .auth-language button[aria-pressed=true] { color: var(--auth-ink); font-weight: 750; }
.auth-themes { border: 1px solid var(--auth-line); border-radius: 26px; padding: 3px; gap: 4px; }
html:root .auth-themes button { min-width: 44px; min-height: 44px; font-size: 26px; line-height: 1; }
.auth-themes button > span { display: flex; align-items: center; justify-content: center; }
.auth-themes svg { width: 22px; height: 22px; display: block; }
html:root .auth-themes button[aria-pressed=true] { background: #c2e0fa; color: #173d62; }
html:root .auth-gate-card { width: 100%; max-width: 460px; margin: auto; padding: 0; text-align: start; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.auth-form-content { width: 100%; max-width: 460px; margin: auto; }
html:root .auth-gate-card h1,
html:root .auth-dialog #modal-title { color: var(--auth-ink); font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -.03em; line-height: 1.15; font-weight: 750; margin: 0 0 8px; padding: 0; }
html:root .auth-gate-card p,
html:root .auth-dialog .auth-subtitle { color: var(--auth-muted); margin: 0 0 32px; font-size: clamp(18px, 2vw, 24px); line-height: 1.4; }
html:root .auth-gate-card small { font-size: 14px; line-height: 1.6; color: var(--auth-muted); margin-top: 24px; }
html:root .auth-dialog .field { margin: 0 0 22px; }
html:root .auth-dialog .field label { display: block; color: var(--auth-ink); font-size: 16px; font-weight: 600; margin-bottom: 8px; }
html:root .auth-dialog .field input { width: 100%; min-height: 54px; padding: 13px 16px; font-size: 16px; line-height: 1.5; border: 1px solid var(--auth-line); border-radius: 10px; background: transparent; color: var(--auth-ink); box-shadow: none; }
html:root .auth-dialog .field input::placeholder { color: var(--auth-muted); opacity: 1; }
.auth-password { position: relative; }
html:root .auth-password input { padding-inline-end: 54px!important; }
html:root .auth-password button { position: absolute; inset-inline-end: 5px; inset-block-start: 5px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--auth-ink); cursor: pointer; }
.auth-form-options { display: flex; flex-direction: column; gap: 10px; margin-top: -14px; }
html:root .auth-form-options .text-button { align-self: flex-end; color: var(--auth-ink); font-size: 14px; min-height: 44px; margin: 0; padding: 8px 0; }
.auth-remember { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--auth-muted); font-size: 14px; line-height: 1.5; cursor: pointer; }
.auth-remember input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #244e7a; }
html:root .auth-dialog #pilot-auth-message { color: var(--auth-muted); font-size: 14px; line-height: 1.5; margin: 10px 0; overflow-wrap: anywhere; }
.auth-dialog #pilot-auth-message:empty { display: none; }
html:root .auth-gate-button,
html:root .auth-dialog #pilot-auth-submit { width: 100%; display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 58px; margin-top: 16px; padding: 14px 20px; background: #1d3d60; border: 1px solid #1d3d60; border-radius: 11px; color: #fff; font-size: 18px; font-weight: 650; box-shadow: 0 2px 3px #16314d12; }
html:root .auth-gate-button:hover,
html:root .auth-dialog #pilot-auth-submit:hover { background: #294f78; }
html:root .auth-dialog #pilot-auth-submit:disabled { opacity: .7; cursor: wait; }
.auth-submit-arrow { font-size: 24px; }
[dir=rtl] .auth-submit-arrow { transform: scaleX(-1); }
.auth-access-note { margin-top: 26px; text-align: center; }
html:root .auth-access-note p { color: var(--auth-muted); margin: 6px 0; font-size: 14px; line-height: 1.5; }
html:root .auth-privacy { align-self: center; color: var(--auth-muted); font-size: 14px; min-height: 44px; margin-top: 38px; padding: 10px 20px; }
html:root .auth-dialog .modal-close { position: absolute; z-index: 3; inset-block-start: 28px; inset-inline-end: 12px; width: 44px; height: 44px; color: var(--auth-muted); background: transparent; }
.auth-dialog .auth-preferences { inset-inline-end: 72px; }
.auth-gate :is(button,input):focus-visible,
.auth-dialog :is(button,input):focus-visible { outline: 3px solid #3275b8; outline-offset: 3px; }
html.dark:root .auth-gate,
html.dark:root .modal.auth-dialog { --auth-ink: #f0f5fb; --auth-muted: #b3c3d7; --auth-surface: #102236; --auth-line: #667b93; }
html.dark:root .auth-dialog .field input { background: #142b43; }
html.dark:root .auth-dialog #pilot-auth-submit,
html.dark:root .auth-gate-button { background: #add3f5; border-color: #add3f5; color: #102d49; }
html.dark:root .auth-dialog #pilot-auth-submit:hover,
html.dark:root .auth-gate-button:hover { background: #c3e0fa; }
[dir=rtl] .auth-scene-copy h2 { letter-spacing: 0; line-height: 1.35; }
[dir=rtl] .auth-dialog #modal-title,[dir=rtl] .auth-gate-card h1 { letter-spacing: 0; line-height: 1.35; }
@media (min-width: 761px) and (max-height: 760px) {
  .auth-panel { padding-top: 100px; padding-bottom: 26px; }
  html:root .auth-dialog .auth-subtitle { margin-bottom: 22px; }
  html:root .auth-dialog .field { margin-bottom: 16px; }
  .auth-access-note { margin-top: 18px; }
  html:root .auth-privacy { margin-top: 20px; }
}
@media (max-width: 760px) {
  html:root .auth-gate,html:root .modal.auth-dialog { display: block; }
  .auth-gate > .auth-scene,.auth-dialog > .auth-scene { display: none; }
  .auth-panel { min-height: 100dvh; padding: 110px 24px 24px; }
  .auth-panel::before { content: 'Routko'; position: absolute; inset-block-start: 32px; inset-inline-start: 24px; font-size: 19px; font-weight: 750; letter-spacing: -.4px; }
  .auth-preferences { inset-block-start: 20px; inset-inline-end: 16px; gap: 8px; }
  .auth-dialog .auth-preferences { inset-inline-end: 52px; }
  .auth-language { gap: 0; }
  html:root .auth-preferences button { font-size: 13px; padding: 6px; }
  html:root .auth-themes button { font-size: 23px; min-width: 44px; }
  .auth-themes { padding: 1px; gap: 0; }
  html:root .auth-dialog .modal-close { inset-block-start: 22px; inset-inline-end: 5px; }
  html:root .auth-dialog #modal-title,html:root .auth-gate-card h1 { font-size: 34px; }
  .auth-form-content,.auth-gate-card { margin-block: auto; }
  html:root .auth-privacy { margin-top: 28px; }
}
@media (max-width: 480px) {
  .auth-panel { padding-top: 148px; }
  .auth-preferences,.auth-dialog .auth-preferences { inset-block-start: 68px; inset-inline-end: 20px; inset-inline-start: 20px; justify-content: space-between; }
  html:root .auth-themes button { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-gate *, .auth-dialog * { animation: none!important; transition: none!important; }
}