@import url("mobile-games.css");
@import url("uat-round-2.css");

:root {
  --app-shell-rail-width: 236px;
  --app-shell-mobile-breakpoint: 760px;
  --app-shell-navy: #061d35;
  --app-shell-navy-deep: #04182b;
  --app-shell-gold: #e8d4b4;
  --app-shell-paper: #fff9ef;
  --app-mobile-label: clamp(0.94rem, 2.5vw, 1rem);
  --app-mobile-helper: clamp(0.875rem, 2.3vw, 0.95rem);
}

/* Paint the canvas before shell initialization, including Easy Read and overscroll. */
html, body {
  background-color: #061d35;
  background-color: var(--app-shell-navy, #061d35);
}

.app-shell-account {
  display: block;
  min-height: 44px;
  padding: 12px 8px;
  color: var(--app-shell-paper);
  font: 600 14px/1.4 Arial, sans-serif;
  text-underline-offset: 4px;
}
.app-shell-nav-list { overflow-y: auto; }
.app-shell-account:focus-visible {
  outline: 2px solid var(--app-shell-gold);
  outline-offset: -2px;
}

body.app-shell-enabled,
body[data-app-shell] {
  box-sizing: border-box;
  min-height: 100vh;
  padding-left: var(--app-shell-rail-width);
}

body.app-shell-enabled,
body[data-app-shell] {
  min-height: 100dvh;
  background: var(--app-shell-navy, #061d35);
}

html:not(.easy-read) body.app-shell-enabled .travel-map-widget,
html:not(.easy-read) body.app-shell-enabled .compass-club-app,
html:not(.easy-read) body[data-app-shell] .travel-map-widget,
html:not(.easy-read) body[data-app-shell] .compass-club-app {
  min-height: var(--app-shell-content-height, 100dvh);
  background: transparent;
}

html:not(.easy-read) body.app-shell-enabled .map-intro .eyebrow,
html:not(.easy-read) body[data-app-shell] .map-intro .eyebrow {
  color: var(--red);
  text-shadow: 0 1px 0 rgba(255, 249, 239, 0.24);
}

html:not(.easy-read) body.app-shell-enabled .map-intro h1,
html:not(.easy-read) body[data-app-shell] .map-intro h1 {
  color: var(--paper);
}

html:not(.easy-read) body.app-shell-enabled .map-intro p:not(.eyebrow),
html:not(.easy-read) body[data-app-shell] .map-intro p:not(.eyebrow) {
  color: rgba(255, 249, 239, 0.86);
}

body.app-shell-enabled *,
body.app-shell-enabled *::before,
body.app-shell-enabled *::after,
body[data-app-shell] *,
body[data-app-shell] *::before,
body[data-app-shell] *::after {
  box-sizing: border-box;
}

.app-shell-rail {
  position: fixed;
  z-index: 900;
  top: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  width: var(--app-shell-rail-width);
  height: 100dvh;
  padding: 12px 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 32, 57, 0.97), rgba(4, 24, 43, 0.99)),
    var(--app-shell-navy);
  color: var(--app-shell-paper);
  box-shadow: 10px 0 24px rgba(0, 0, 0, 0.24);
}

.app-shell-logo {
  display: block;
  padding: 0 6px 8px;
  border-bottom: 1px solid rgba(232, 212, 180, 0.16);
}

.app-shell-logo img {
  display: block;
  width: min(100%, 154px);
  margin: 0 auto;
}

.app-shell-nav-list {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 0;
}

.app-shell-nav-link {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px 7px;
  border-top: 1px solid rgba(232, 212, 180, 0.14);
  color: var(--app-shell-paper);
  text-decoration: none;
}

.app-shell-nav-icon,
.app-shell-nav-lock,
.app-shell-easy-read-icon {
  display: inline-grid;
  place-items: center;
}

.app-shell-nav-icon svg,
.app-shell-nav-lock svg,
.app-shell-easy-read-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.app-shell-nav-icon {
  width: 24px;
  height: 24px;
  color: rgba(255, 249, 239, 0.9);
}

.app-shell-nav-lock {
  width: 16px;
  height: 16px;
  color: var(--app-shell-gold);
}

.app-shell-nav-link strong {
  display: block;
  color: var(--app-shell-paper);
  font-size: 0.88rem;
  line-height: 1.12;
}

.app-shell-nav-copy > span {
  display: block;
  color: rgba(255, 249, 239, 0.74);
  font-size: 0.7rem;
  line-height: 1.22;
}

.app-shell-nav-link:hover,
.app-shell-nav-link:focus-visible,
.app-shell-nav-link[aria-current="page"] {
  background: rgba(255, 249, 239, 0.1);
  outline: none;
}

.app-shell-nav-link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--app-shell-gold);
}

.app-shell-nav-link[aria-current="page"] {
  border-left: 3px solid var(--app-shell-gold);
  background: rgba(255, 249, 239, 0.12);
  padding-left: 4px;
}

.app-shell-nav-link.is-locked,
.app-shell-nav-link.is-unavailable {
  color: rgba(255, 249, 239, 0.78);
}

.app-shell-footer {
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(232, 212, 180, 0.55);
  padding-top: 14px;
  margin-top: auto;
}

.app-shell-issue-report { width: min(460px, calc(100vw - 32px)); max-height: 90dvh; overflow-y: auto; padding: 22px; border: 2px solid #c9a35e; border-radius: 8px; background: #fff9ef; color: #0a3161; }
.app-shell-issue-report::backdrop { background: rgba(4,18,36,.75); }
.app-shell-issue-report label { display: grid; gap: 8px; }
.app-shell-issue-report textarea { width: 100%; box-sizing: border-box; font: inherit; }
.app-shell-issue-report button { margin: 12px 6px 0 0; padding: 10px 14px; min-height: 44px; }
.app-shell-issue-report form { display: inline; }
.app-shell-issue-report a[href^="mailto:"] { display: inline-block; padding: 12px 16px; border-radius: 4px; background: #bf0d3e; color: #fff9ef; font-weight: 700; }
.app-shell-issue-report summary { padding: 12px 0; cursor: pointer; }

.app-shell-easy-read {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  color: var(--app-shell-paper);
  cursor: pointer;
}

.app-shell-easy-read input {
  width: 18px;
  height: 18px;
  accent-color: var(--app-shell-gold);
}

.app-shell-easy-read-icon {
  width: 24px;
  height: 24px;
  color: var(--app-shell-gold);
}

.app-shell-easy-read strong {
  display: block;
  font-size: 0.86rem;
  line-height: 1.1;
}

.app-shell-menu-button {
  position: fixed;
  z-index: 920;
  top: 12px;
  left: 12px;
  display: none;
  min-height: 44px;
  border: 2px solid var(--app-shell-gold);
  border-radius: 8px;
  background: var(--app-shell-navy);
  color: var(--app-shell-paper);
  font: inherit;
  font-weight: 900;
  padding: 8px 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.app-shell-menu-icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.app-shell-menu-label {
  display: inline-block;
}

.app-shell-drawer-backdrop,
.app-shell-access-panel {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: rgba(4, 24, 43, 0.52);
}

.app-shell-drawer-backdrop[hidden],
.app-shell-access-panel[hidden] {
  display: none;
}

.app-shell-access-panel {
  z-index: 960;
  display: grid;
  place-items: center;
  padding: 18px;
}

.app-shell-access-card {
  width: min(420px, 100%);
  border: 2px solid var(--app-shell-navy);
  border-radius: 8px;
  background: var(--app-shell-paper);
  color: #142033;
  padding: 20px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.app-shell-access-card h2 {
  margin: 0 0 8px;
  color: var(--app-shell-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
}

.app-shell-access-card p {
  margin: 0 0 16px;
  color: #6b5c4b;
  line-height: 1.45;
}

.app-shell-access-card button {
  min-height: 42px;
  border: 2px solid var(--app-shell-navy);
  border-radius: 6px;
  background: var(--app-shell-navy);
  color: #fff;
  font: inherit;
  font-weight: 900;
  padding: 8px 13px;
  cursor: pointer;
}

body.app-shell-enabled .club-menu,
body.app-shell-enabled .plate-clubhouse-nav,
body[data-app-shell] .club-menu,
body[data-app-shell] .plate-clubhouse-nav {
  display: none;
}

body.app-shell-enabled .plate-clubhouse,
body[data-app-shell] .plate-clubhouse {
  display: block;
  grid-template-columns: minmax(0, 1fr);
}

body.app-shell-enabled .plate-room,
body[data-app-shell] .plate-room {
  min-height: var(--app-shell-content-height, 100vh);
}

@media (min-width: 761px) {
  body.app-shell-enabled .travel-map-widget,
  body.app-shell-enabled .compass-club-app,
  body[data-app-shell] .travel-map-widget,
  body[data-app-shell] .compass-club-app {
    width: min(1220px, calc(100% - 24px));
  }

  body.app-shell-enabled .plate-clubhouse,
  body[data-app-shell] .plate-clubhouse {
    width: 100%;
  }
}

@media (max-width: 760px), (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  html:has(body[data-app-shell]),
  html:has(body.app-shell-enabled) {
    scroll-padding-top: calc(68px + env(safe-area-inset-top, 0px));
  }

  body.app-shell-enabled,
  body[data-app-shell] {
    --app-shell-mobile-safe-top: calc(68px + env(safe-area-inset-top, 0px));
    --app-shell-content-height: calc(100dvh - var(--app-shell-mobile-safe-top));
    padding-left: 0;
    padding-top: var(--app-shell-mobile-safe-top);
  }

  body[data-app-shell] > main,
  body.app-shell-enabled > main {
    min-height: var(--app-shell-content-height);
  }

  .app-shell-menu-button {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-width: 1px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 249, 239, 0.1), rgba(6, 39, 68, 0.92) 68%), var(--app-shell-navy);
    color: var(--app-shell-gold);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  }

  .app-shell-menu-icon {
    width: 25px;
    height: 25px;
  }

  .app-shell-menu-button:hover,
  .app-shell-menu-button:focus-visible {
    outline: 2px solid var(--app-shell-gold);
    outline-offset: 3px;
  }

  .app-shell-rail {
    width: min(86vw, 320px);
    overflow-y: auto;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 180ms ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }

  .app-shell-rail > * { flex: 0 0 auto; }
  .app-shell-nav-list { overflow: visible; }
  .app-shell-logo img { width: 112px; }
  .app-shell-footer { gap: 0; }
  .app-shell-account, .app-shell-easy-read { min-height: 44px; padding: 8px; }
  .app-shell-nav-link strong { font-size: var(--app-mobile-label); line-height: 1.2; }
  .app-shell-nav-copy > span { font-size: 0.8rem; line-height: 1.3; }
  .app-shell-menu-button { z-index: 890; }
  body.app-shell-drawer-open .app-shell-menu-button { z-index: 920; left: auto; right: 12px; }
  .app-shell-game-toolbar { display: flex; }
  .app-shell-game-back-original { display: none !important; }
  body[data-app-shell] .map-intro { grid-template-columns: minmax(0, 1fr); padding: 8px 4px 12px; gap: 12px; }
  body[data-app-shell] .game-action-button,
  body[data-app-shell] .play-mode-panel select { min-height: 44px; font-size: var(--app-mobile-label); }
  body[data-app-shell] .play-mode-panel label { font-size: var(--app-mobile-label); }
  body[data-app-shell] .play-mode-panel p,
  body[data-app-shell] .theme-helper span { font-size: var(--app-mobile-helper); line-height: 1.4; }
  body[data-app-shell] .play-mode-panel select { max-width: 100%; min-width: 0; }
  body[data-app-shell] .games-page { min-width: 0; }
  body[data-app-shell] .compass-title { overflow-wrap: anywhere; }
  .app-shell-game-toolbar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 4px;
    color: var(--app-shell-paper);
    font-size: var(--app-mobile-label);
    text-underline-offset: 4px;
  }
  .app-shell-game-toolbar a:focus-visible {
    outline: 2px solid var(--app-shell-gold);
    outline-offset: 2px;
  }

  body.app-shell-drawer-open .app-shell-rail {
    transform: translateX(0);
    visibility: visible;
  }

  body.app-shell-drawer-open {
    overflow: hidden;
  }

  body.app-shell-enabled .travel-map-widget,
  body.app-shell-enabled .compass-club-app,
  body[data-app-shell] .travel-map-widget,
  body[data-app-shell] .compass-club-app {
    width: min(100% - 16px, 1220px);
    padding-top: 12px;
  }
}

@media (min-width: 761px) and (min-height: 601px), (min-width: 1025px) {
  .app-shell-game-toolbar { display: none; }
}

/* Easy Read changes type and controls, never the light-on-navy shell contract. */
body[data-app-shell] .map-intro h1 { color: var(--app-shell-paper); }
body[data-app-shell] .map-intro p:not(.eyebrow) { color: var(--app-shell-paper); }

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  body.app-shell-game-page {
    --app-shell-mobile-safe-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-top: var(--app-shell-mobile-safe-top);
  }
  .app-shell-game-toolbar { padding-left: 60px; }
  body[data-app-shell] .sojourner-page .map-intro { padding-block: 2px; margin-bottom: 4px; }
  .sojourner-page .map-intro .eyebrow,
  .sojourner-page .sojourner-table-wrap > .theme-helper { display: none; }
  .sojourner-page .map-intro h1 { font-size: 1.5rem; margin-bottom: 6px; }
  .sojourner-page .title-lines { display: flex; gap: 0.3em; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell-rail {
    transition: none;
  }
}

/* Tablet UAT: drawer presentation only; existing phone and desktop rules remain. */
.app-shell-footer [data-report-issue] {
  color: var(--app-shell-gold);
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
  text-decoration: underline;
}
@media (min-width: 761px) and (max-width: 1280px) and (min-height: 601px), (min-width: 761px) and (max-width: 1400px) and (pointer: coarse) {
  body.app-shell-enabled, body[data-app-shell] {
    --app-shell-mobile-safe-top: calc(68px + env(safe-area-inset-top, 0px));
    --app-shell-content-height: calc(100dvh - var(--app-shell-mobile-safe-top));
    padding-left: 0;
    padding-top: var(--app-shell-mobile-safe-top);
  }
  body[data-app-shell] > main,
  body.app-shell-enabled > main,
  html:not(.easy-read) body[data-app-shell] .travel-map-widget,
  html:not(.easy-read) body[data-app-shell] .compass-club-app,
  html:not(.easy-read) body.app-shell-enabled .travel-map-widget,
  html:not(.easy-read) body.app-shell-enabled .compass-club-app {
    min-height: var(--app-shell-content-height);
  }
  .app-shell-menu-button {
    display: inline-grid;
    place-items: center;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    width: 44px; height: 44px; min-width: 44px;
    padding: 0;
    z-index: 890;
  }
  .app-shell-menu-button:focus-visible { outline: 2px solid var(--app-shell-gold); outline-offset: 3px; }
  .app-shell-rail {
    width: min(86vw, 320px);
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto;
    transform: translateX(-105%); visibility: hidden;
    transition: transform 180ms ease;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
  .app-shell-rail > * { flex: 0 0 auto; }
  .app-shell-nav-list { overflow: visible; }
  .app-shell-logo img { width: 112px; }
  .app-shell-footer { gap: 0; padding-top: 8px; }
  .app-shell-footer .app-shell-account { min-height: 32px; padding: 6px 8px; line-height: 1.25; }
  .app-shell-footer .app-shell-easy-read { min-height: 34px; padding: 4px 8px; }
  body.app-shell-drawer-open .app-shell-rail { transform: translateX(0); visibility: visible; }
  body.app-shell-drawer-open .app-shell-menu-button { z-index: 920; left: auto; right: 12px; }
  body.app-shell-drawer-open { overflow: hidden; }

  /* The outer page owns the viewport minimum; do not add a second full viewport. */
  body[data-app-shell] .miles-travel-bureau { min-height: 0; }
  body[data-app-shell] .plate-room { min-height: var(--app-shell-content-height); }
  body[data-app-shell] .plate-room-scene {
    width: min(100%, 1536px, calc((var(--app-shell-content-height) - var(--clubhouse-top-space)) * 1.5));
  }
}
@media (min-width: 761px) and (max-width: 1280px) and (min-height: 601px) and (orientation: landscape) {
  .app-shell-nav-link[data-nav-key="miles-to-go-planner"] + .app-shell-nav-link[data-nav-key="field-notes"] { margin-top: 10px; }
}
@media (min-width: 761px) and (max-width: 1280px) and (min-height: 601px) and (prefers-reduced-motion: reduce) {
  .app-shell-rail { transition: none; }
}

/* Utility controls keep their existing actions, outside primary navigation. */
.app-shell-settings {
  box-sizing: border-box; width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow-y: auto; margin: auto;
  padding: 20px; border: 1px solid var(--app-shell-gold); border-radius: 8px;
  background: var(--app-shell-navy); color: var(--app-shell-paper);
}
.app-shell-settings:not([open]) { display: none; }
.app-shell-settings::backdrop { background: rgba(4,18,36,.8); }
.app-shell-settings h2 { margin: 0 0 12px; color: var(--app-shell-gold); font: bold 1.5rem Georgia,serif; }
.app-shell-settings .app-shell-footer { display: grid; gap: 8px; margin: 0 0 16px; }
.app-shell-settings .app-shell-account, .app-shell-settings .app-shell-easy-read { min-height: 44px; padding: 8px; }
.app-shell-settings button[type="submit"] { min-height: 44px; padding: 8px 14px; }
.mile-marker-page .theme-helper :is(.mile-marker-desktop-instruction,.mile-marker-mobile-instruction) { text-transform: none; }
@media (min-width: 761px) and (max-width: 1280px) and (orientation: portrait) {
  body[data-current-feature-id="travel-map"] .builder-right-rail { display: contents; }
  body[data-current-feature-id="travel-map"] .builder-state-title { order: -1; grid-column: 1 / -1; grid-row: 1; margin: 8px 0 4px; }
}

@media (min-width: 761px) and (max-width: 1280px) {
  #license-plate-collection .plate-room-status { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; flex: 0 0 auto; }
  #license-plate-collection :is(.plate-count-sign,.plate-clear-button) { flex: 0 0 auto; white-space: nowrap; }
}