/* #region zone:map.style.login — หน้าล็อกอินแบบแบ่งสอง ปุ่มยืนยัน และการปรับตามจอ */
/* Full-page split shell (2026-09-26 login redesign, expanded to full-viewport 2026-09-28): the
   2-column grid and the brand panel now live in the shared login-shell.css (.login-shell/
   .login-shell-card/.login-shell-brand/.login-shell-form) — .login-shell-card fills .gate
   edge-to-edge (no padding, no card shadow), same full-page treatment as Desk/Monitor. .gate keeps
   its own position:fixed backdrop (the map sits behind it, and its own background shows only for
   an instant before login-shell.css's opaque card paints over it) and overflow-y:auto for a login
   flow taller than the viewport. .gate-card keeps only what's specific to Map: the entrance
   animation and the (now nested, still matching via descendant selectors) h1/p/form styling below. */
.gate {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: var(--u-page);
}
.gate-card {
  animation: pop var(--t-med) var(--ease-out);
}
.gate-card h1 {
  font-size: var(--fs-2xl);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.gate-card .login-shell-form p {
  color: var(--muted);
}
.gate-lang {
  position: absolute;
  z-index: 2; /* it comes before .gate-card in the DOM, so without this the brand panel paints over it */
  top: 16px;
  right: 16px;
}
.gate-form {
  width: 100%;
  display: grid;
  gap: var(--u-space-3);
  text-align: start;
  margin-top: var(--u-space-1);
}
.gate-field {
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}
.gate-field input {
  height: 46px;
  padding: 0 14px;
  border-radius: var(--r-control);
  background: var(--glass-strong);
  border: 1px solid var(--card-line);
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--text);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.gate-field input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.gate-card .gate-error {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--r-control);
  padding: var(--u-space-2) var(--u-space-3);
  font-size: var(--fs-sm);
  animation: pop var(--t-med) var(--ease-out);
}
.gate-form .button {
  width: 100%;
}
.gate-form .button[aria-busy='true'] {
  opacity: 0.7;
}
/* Pill shape for the sign-in submit button only, to match the shared login-shell.css pill
   inputs — .button.primary elsewhere (route search) keeps its normal --r-control shape. */
.login-shell-form .button.primary {
  border-radius: var(--u-radius-pill);
}
.gate-or {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--u-space-3);
  color: var(--faint);
  font-size: var(--fs-xs);
}
.gate-or::before,
.gate-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--card-line);
}
.gate-card .gate-line-title {
  font-size: var(--fs-md);
  font-weight: 650;
}
.gate-card #gate-text {
  font-size: var(--fs-sm);
}
.signout {
  align-self: center;
}
@media (max-width: 600px) {
  .gate-lang {
    top: 12px;
    right: 12px;
    height: 44px;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

@media (max-width: 820px) {
  .topbar {
    right: 80px;
    width: auto;
    left: 12px;
    top: 12px;
  }
  .brand {
    height: 48px;
    padding: 0 9px;
  }
  .brand-name,
  .brand-sub {
    display: none;
  }
  /* The map stops above the sheet so Google's logo and attribution stay visible (Maps ToS). */
  .map {
    bottom: 168px;
  }
  .app:has(.sheet[data-state='half']) .map {
    bottom: 56dvh;
  }
  .search {
    min-width: 0;
  }
  .lang {
    width: 48px;
    padding: 0;
    justify-content: center;
    font-size: var(--fs-xs);
  }
  .lang .icon {
    display: none;
  }
  .hazard {
    height: 48px;
    padding: 0 var(--u-space-3);
    font-size: var(--fs-xs);
  }
  #status {
    order: 0;
  }
  #route-out {
    order: 1;
  }
  #place-out {
    order: 2;
  }
  .directions {
    order: 3;
  }
  .quota {
    order: 4;
  }
  .signout {
    order: 5;
  }
  .search {
    height: 48px;
  }
  .lang {
    height: 48px;
    padding: 0 10px;
  }
  .search-results {
    left: 12px;
    right: 12px;
    width: auto;
    top: 68px;
  }
  .fab-stack {
    top: 12px;
    right: 12px;
  }
  .fab {
    width: 48px;
    height: 48px;
  }
  .close3d {
    top: 68px;
    left: 12px;
    width: 48px;
    height: 48px;
  }
  .map-state {
    padding: 80px 72px 50vh var(--u-space-4);
    align-items: start;
  }
  /* Phone: sits above the peeking sheet; collapsed to one 44px pill by default. z-index above the sheet (also 4)
     so the toggle stays reachable once the half/full sheet's own glass panel would otherwise paint over it.
     `bottom` tracks the sheet's own top edge (below) so it can never sit on the sheet's content. */
  .legend {
    right: 64px;
    bottom: 180px;
    width: min(304px, calc(100% - 76px));
    max-height: min(320px, 45dvh);
    z-index: 6;
    transition: bottom var(--t-med) var(--ease-out);
  }
  .legend[data-open='false'] {
    width: auto;
  }
  /* Half: the sheet's top edge sits at 56dvh from the bottom (see .sheet[data-state="half"] below) — dock the
     key just above it, still over open map, moving with the sheet as it slides. */
  .app:has(.sheet[data-state='half']) .legend {
    bottom: calc(56dvh + 12px);
    max-height: min(220px, 30dvh);
  }
  /* Full: the sheet covers almost the whole screen (top edge right under the topbar), so there is no safe map
     area left to dock on — hide the key, same treatment as .fab-stack/.close3d in map-extras.css. */
  .app:has(.sheet[data-state='full']) .legend {
    display: none;
  }
  /* One fixed-height sheet that slides (transform only): peek shows its top 168px, half 56dvh, full everything. */
  .sheet {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    height: calc(100dvh - 76px);
    border-bottom: 0;
    transform: translateY(calc(100% - 168px));
    transition: transform var(--t-med) var(--ease-out);
  }
  .sheet[data-state='half'] {
    transform: translateY(calc(100% - 56dvh));
  }
  .sheet[data-state='full'] {
    transform: none;
  }
  .sheet-handle {
    display: grid;
    place-items: center;
    height: 26px;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex: none;
  }
  .grip {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--faint);
    opacity: 0.5;
  }
  .sheet-body {
    padding: var(--u-space-1) var(--u-space-3) calc(var(--u-space-4) + env(safe-area-inset-bottom));
  }
}
/* Narrow phones: the Hazard pill collapses to an icon-only square the same size as its neighbours
   (.brand/.lang are already 48px squares below 820px) — the aria-label set by data-i18n-label carries
   the accessible name, so hiding the visible text here never removes it. */
@media (max-width: 600px) {
  .hazard {
    width: 48px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .hazard-label {
    display: none;
  }
}
@media (max-width: 420px) {
  .topbar {
    right: 12px;
  }
  .fab-stack {
    top: 76px;
  }
  .search input {
    font-size: var(--fs-md);
  }
  /* The logo only links back to this page; its room goes to the search box so the placeholder is not cut. */
  .brand {
    display: none;
  }
  .search {
    padding-left: var(--u-space-3);
    gap: var(--u-space-2);
  }
}
/* #region zone:map.style.login.touch-controls — ช่องค้นหาและปุ่มไอคอนแตะได้บนจอสัมผัสทุกแนว */
@media (max-width: 767px), (pointer: coarse) {
  :root {
    --fs-md: var(--u-text-reading, 16px);
  }
}
@media (pointer: coarse) {
  .search input,
  .route-field input {
    height: 44px;
  }
  .icon-button,
  .swap,
  .mode-option {
    min-width: 44px;
    min-height: 44px;
  }
}
/* #endregion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
/* #endregion */