/* Responsive layout rules shared by every MVC page and standalone account entry. */
.mobile-account-nav { display: none; }
.letsgo-logo { flex-shrink: 0; }
.letsgo-logo > span:first-child { flex-shrink: 0; }
:where(.form-grid, .filter-grid, .location-grid, .place-grid, .social-layout, .place-layout, .trip-workspace, .local-account-panel) > * { min-width: 0; }
:where(fieldset, details, .focus-panel, .region-directory, .location-search-panel) { min-width: 0; }
.breadcrumb, .results-heading { flex-wrap: wrap; gap: 12px; }
.breadcrumb { overflow-wrap: anywhere; }
:where(.table-scroll, .place-gallery, .focus-tabs, .social-tabs, .trip-day-tabs) { max-width: 100%; }
:where(input, select, textarea, button, .btn) { max-width: 100%; }
:where(input, select, textarea) { min-width: 0; }
:where(input, select, textarea, button):focus { scroll-margin-block: 110px; }
.account-visual { position: relative; isolation: isolate; margin: 0; min-width: 0; min-height: 100%; background: #1b2a4a; overflow: hidden; }
.account-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.account-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #14253d05 25%, #14253dd9); z-index: 1; }
.account-visual figcaption { position: absolute; inset: auto 32px 36px; z-index: 2; color: #fff; }
.account-visual figcaption span { display: block; font-size: .65rem; font-weight: 750; letter-spacing: .12em; color: #ffdc8a; }
.account-visual figcaption strong { display: block; max-width: 14ch; margin-top: 12px; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.1; letter-spacing: -.04em; }
.local-account-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.local-account-panel h1 { margin-block: 12px 16px; }
.local-account-panel .scout-guide--account { margin-top: 22px; }
.local-account-panel form > .btn { width: 100%; }

@media (max-width: 1100px) {
  .letsgo-nav { gap: 14px; }
  .letsgo-user-actions { gap: 10px; }
}

@media (max-width: 900px) {
  .local-account-screen { max-width: 600px; }
  .local-account-panel { grid-template-columns: minmax(0, 1fr); }
  .local-account-panel > .account-visual { grid-row: 1; min-height: 0; height: clamp(120px, 22vw, 180px); }
  .account-visual figcaption { inset: auto 22px 20px; }
  .account-visual figcaption strong { max-width: none; margin-top: 8px; font-size: clamp(1.4rem, 4vw, 1.8rem); }
  .account-body { padding-bottom: env(safe-area-inset-bottom); }
  .account-body .account-stage { display: flex; flex-direction: column; min-height: 100svh; }
  .account-body .account-scene { display: block; flex: 0 0 auto; height: 190px; min-height: 0; }
  .account-body .scene-brand { margin: 14px 24px; font-size: 1.35rem; }
  .account-body .scene-copy { inset: auto 24px 22px; }
  .account-body .scene-copy h1 { font-size: 1.8rem; line-height: 1.12; margin: 6px 0 0; }
  .account-body .scene-copy h1 br { display: none; }
  .account-body .scene-copy h1 em { display: block; }
  .account-body .scene-copy .product-kicker { font-size: .6rem; }
  .account-body :is(.scene-copy p, .journey-note, .scene-caption) { display: none; }
  .account-body .account-content { flex: 1; padding: 20px max(20px, env(safe-area-inset-right)) 24px max(20px, env(safe-area-inset-left)); }
  .account-body .account-top { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .account-body .account-inner { max-width: 520px; margin: 20px auto; padding: 24px; }
  .account-body .account-inner h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin-block: 12px 16px; }
  .account-body .account-intro { margin-bottom: 20px; }
  .account-body .account-bottom { flex-wrap: wrap; }
}

@media (max-width: 850px) {
  .letsgo-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding-block: 10px; }
  .letsgo-user-actions { order: 1; flex-wrap: nowrap; margin-left: 0; }
  .letsgo-user-actions .nav-login { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: .8rem; }
  .menu-toggle { order: 2; min-height: 44px; }
  .letsgo-user-actions :is(.nav-staff, form, .quick-open) { display: none; }
  .letsgo-user-actions .profile-link { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: .85rem; }
  #letsgo-navigation { grid-column: 1 / -1; order: 3; min-width: 0; max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }
  #letsgo-navigation.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  #letsgo-navigation > a, .mobile-account-nav > a { padding: 10px 12px; min-height: 44px; }
  .mobile-account-nav { display: grid; gap: 4px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--ui-line); }
  .mobile-account-nav > a { display: flex; align-items: center; }
  .mobile-account-nav form { display: block; margin: 0; }
  .mobile-account-nav .nav-signout { width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; border: 1px solid var(--ui-line); border-radius: 10px; background: #fff4e7; }
  /* 16px inputs avoid automatic form zoom on iOS without disabling user zoom. */
  body main :is(input:not([type=checkbox]):not([type=radio]), select, textarea), .account-content :is(input, select, textarea) { font-size: 16px; }
  main button:not(.chart-bar):not(.leaflet-interactive) { min-height: 44px; }
  .table-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .account-page { padding-bottom: env(safe-area-inset-bottom); }
  .account-page :is(.inspiration-rail, .mobile-dock) { display: none; }
  .account-page .site-footer { margin-top: 20px; }
  .account-page .local-account-screen { padding-block: 16px 24px; }
}

@media (max-width: 600px) {
  .shell { width: calc(100% - 28px); }
  body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .site-header { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .letsgo-logo { font-size: 1.3rem; gap: 7px; }
  .letsgo-nav { gap: 8px; }
  .menu-toggle { padding-inline: 9px; }
  .local-account-panel { border-radius: 20px; }
  .local-account-panel > div { padding: 22px 20px; }
  .local-account-panel h1 { font-size: clamp(1.65rem, 7vw, 2rem); line-height: 1.12; margin-block: 10px 12px; }
  .local-account-panel > div > p { font-size: .9rem; line-height: 1.55; margin-block: 12px; }
  .local-account-panel form label { margin-block: 14px; }
  .local-account-panel .account-session-note { color: var(--ui-muted); font-size: .8rem; }
  .local-account-panel .scout-guide--account { margin-bottom: 0; padding: 12px; }
  .local-account-panel .scout-guide--account .scout-art { flex-basis: 44px; width: 44px; }
  .account-visual figcaption span { font-size: .56rem; letter-spacing: .09em; }
  .account-body .account-scene { height: 170px; }
  .account-body .scene-copy { inset-inline: 20px; bottom: 18px; }
  .account-body .scene-copy h1 { font-size: 1.6rem; }
  .account-body .account-inner { padding: 22px 18px; border-radius: 18px; }
  .account-body .account-top { font-size: .8rem; }
  .account-body .account-top a { display: inline-flex; align-items: center; min-height: 36px; }
  .account-body .account-submit { width: 100%; white-space: normal; }
  .account-page .site-footer { display: none; }
  .form-grid, .filter-grid { grid-template-columns: minmax(0, 1fr); }
  .results-heading { align-items: flex-start; }
  .results-heading h1 { min-width: 0; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stats-grid article { padding: 18px 14px; }
  .stats-grid strong { font-size: clamp(1.6rem, 6vw, 2.25rem); overflow-wrap: anywhere; }
  .contribute-shell { padding-inline: 12px; }
  .contribute-heading { margin-block: 16px; }
  .contribute-heading h1 { font-size: 1.85rem; }
  .guided-editor { padding: 16px 12px; }
  .guided-editor h2 { font-size: 1.5rem; }
  .guided-editor details { padding: 12px; }
  .location-step-heading, .location-map-heading, .map-toolbar { flex-wrap: wrap; }
  .editor-navigation { flex-wrap: wrap; bottom: calc(86px + env(safe-area-inset-bottom)); gap: 8px; padding: 10px; }
  .editor-navigation .btn { flex: 1 1 110px; }
  .rating-picker { gap: 5px; }
  .rating-picker label { flex: 1; min-width: 0; }
  .rating-picker span { width: 100%; min-width: 36px; }
  .review-overview { grid-template-columns: minmax(64px, .7fr) minmax(0, 1fr); gap: 12px; padding: 16px; }
  .share-dialog, .quick-navigation, .confirm-action { width: calc(100% - 24px); max-width: 560px; padding: 20px; max-height: calc(100dvh - 32px); }
  .share-networks { grid-template-columns: minmax(0, 1fr); }
  .mobile-dock { inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); padding: 5px; }
  .mobile-dock a { min-height: 54px; }
}

@media (max-width: 380px) {
  .letsgo-logo { font-size: 1.15rem; }
  .letsgo-logo > span:first-child { width: 26px; height: 26px; }
  .letsgo-user-actions .profile-link { font-size: .78rem; }
  .nav-join { padding-inline: 10px; }
  .account-body .account-content { padding-inline: 14px; }
  .local-account-panel > div { padding-inline: 16px; }
  .my-travel-summary { gap: 6px; }
  .my-travel-summary a { padding: 12px 8px; }
}

@media (max-width: 760px) {
  #letsgo-navigation { max-height: calc(100dvh - 164px - env(safe-area-inset-bottom)); }
  .account-page #letsgo-navigation { max-height: calc(100dvh - 90px); }
  .editor-navigation { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .site-header { position: static; }
  .mobile-dock { position: static; margin: 16px 12px; }
  .editor-navigation { position: static; }
  .account-body .account-scene { height: 140px; }
  .local-account-panel > .account-visual { height: 110px; }
}

/* Keep account changes visible without discarding a form in progress. */
.session-change-notice:not([hidden]) { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-block:1rem; padding:1rem; border:2px solid #946000; border-radius:1rem; background:#fff6df; color:#453000; }
.session-change-notice p { flex:1 1 24rem; margin:0; }
body[data-session-stale="true"] .letsgo-account,
body[data-session-stale="true"] .mobile-account-nav { opacity:.6; }