.pwa-card{margin:16px 18px;padding:17px;border:1px solid #29474d;background:#0d202b;border-radius:14px}
.pwa-card h2{font-size:15px;margin:0 0 10px}
.pwa-card p,.pwa-help{font-size:12px;line-height:1.85;color:var(--muted);margin:8px 0}
.pwa-actions{display:flex;gap:9px;flex-wrap:wrap}
.pwa-btn{min-height:44px;padding:10px 13px;border-radius:10px;background:#61f8da16;border:1px solid #61f8da42;color:var(--cyan);font-size:13px}
.pwa-btn.gold{background:#f6c66e16;border-color:#f6c66e55;color:var(--gold)}
.pwa-btn.danger{color:#ffadad;border-color:#ffadad44}
.pwa-state{font-size:11px;color:var(--cyan);line-height:1.8}
.pwa-state.warn{color:var(--gold)}
.pwa-field{display:block;margin:13px 0;font-size:12px;color:#b2cbd6}
.pwa-field input,.pwa-field select,.pwa-field textarea{display:block;width:100%;margin-top:6px;border:1px solid #355363;background:#071422;color:var(--text);border-radius:9px;padding:12px;font-size:16px;min-height:48px}
.pwa-field textarea{min-height:135px;resize:vertical}
.pwa-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.pwa-error{font-size:12px;line-height:1.7;color:#ffc2ae;white-space:pre-wrap}
.pwa-small{font-size:11px;color:var(--muted)}
.ticket[data-edit-id]{cursor:pointer}
.empty{padding:35px 20px}
.pwa-toolbar{display:flex;justify-content:space-between;align-items:center;margin:8px 18px;gap:8px}
.pwa-toolbar .pwa-btn{font-size:12px}
.mapwrap #footprint-map-svg{touch-action:none}
.pwa-file{font-size:12px;color:var(--muted);max-width:100%}
.pwa-badge{font-size:10px;color:var(--cyan);border:1px solid #61f8da33;padding:4px 8px;border-radius:18px}
.pwa-card a{word-break:break-word}
.pwa-install-steps{font-size:13px;line-height:1.9;padding-left:20px}
.pwa-topnotice{position:relative;margin:10px 18px;color:var(--gold);font-size:12px}
.pwa-search-results{max-height:170px;overflow:auto;border:1px solid #294451;border-radius:8px}
.pwa-search-results button{display:block;width:100%;min-height:44px;text-align:left;padding:10px 12px;border-bottom:1px solid #294451;font-size:12px}
.pwa-check{display:flex;gap:10px;align-items:center;font-size:13px;margin:12px 0}
.pwa-check input{width:20px;height:20px}
.pwa-footer{padding:10px 20px 28px;color:var(--muted);font-size:11px;line-height:1.9}
.pwa-empty-map{margin:12px 18px}
.pwa-sub{display:block;font-size:10px;color:var(--muted);margin-top:4px}

/* Pin the app shell to all four viewport edges. On iOS home-screen apps,
   100dvh can be shorter than the containing viewport after status-bar changes.
   The grid reserves the navigation once; only its buttons avoid the home area. */
:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
}
html, body { height:100%; width:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:var(--bg); }
[hidden] { display:none !important; }
.layout { position:fixed; inset:0; display:block; width:100%; max-width:800px; height:auto; min-height:0; padding:0; margin:0 auto; background:var(--bg); }
.phone-shell { width:100%; height:100%; max-width:none; max-height:none; min-width:0; margin:0; }
.phone {
  width:100%; height:100%; min-height:0; border:0; border-radius:0; box-shadow:none;
  display:grid; grid-template-rows:minmax(0,1fr) auto;
  padding:var(--app-safe-top) var(--app-safe-right) 0 var(--app-safe-left);
}
.page { grid-area:1 / 1; min-width:0; min-height:0; height:auto; padding-top:0; padding-bottom:12px; overflow-x:hidden; overflow-y:auto; }
.nav {
  grid-area:2 / 1; position:relative; inset:auto; height:auto; min-height:0;
  background:var(--bg);
  padding:6px 10px max(6px, var(--app-safe-bottom));
}
.nav:after { display:none; }
.nav button { min-width:0; min-height:48px; }
/* iOS standalone may report a dynamic/fixed viewport 62px shorter than the
   drawable screen. Its large viewport includes that area; Safari keeps the
   edge-constrained shell above browser controls. Never add a fixed pixel gap. */
@media (display-mode:standalone) {
  html, body { height:100vh; height:100lvh; overflow:visible; }
  .layout { bottom:auto; height:100vh; height:100lvh; }
}
/* The map receives the space left after controls and complete statistic labels. */
.page[data-screen="map"] { display:flex; flex-direction:column; padding-bottom:0; }
.page[data-screen="map"] > * { flex-shrink:0; min-width:0; }
.page[data-screen="map"] > .mapwrap { flex:1 0 220px; height:auto; min-height:220px; max-height:none; }
.page[data-screen="map"] > .stats { padding:16px 0; }
.stats > div { min-width:0; }
.statlabel { overflow-wrap:anywhere; }

/* Dialogs are outside the app grid: they cover the tab bar and fit the visible
   viewport when the on-screen keyboard reduces the available height. */
#modal-root {
  position:fixed; z-index:50; top:var(--dialog-top, 0px); left:50%; transform:translateX(-50%);
  width:100%; max-width:800px; height:var(--dialog-height, 100dvh); min-width:0;
  padding:var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left);
  background:var(--bg); overflow:hidden;
}
#modal-root:empty { display:none; }
.modal {
  position:relative; inset:auto; width:100%; height:100%; min-width:0; max-width:100%;
  max-height:none; padding:12px 18px 24px; background:var(--bg);
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  scroll-padding-block:80px 24px; -webkit-overflow-scrolling:touch;
}
.modal > * { min-width:0; max-width:100%; flex-shrink:0; }
.modalhead {
  position:sticky; top:0; z-index:3; min-width:0; flex-shrink:0;
  background:var(--bg); box-shadow:0 -16px 0 var(--bg); padding:8px 0 12px; margin-bottom:12px;
}
.modalhead > span { min-width:0; overflow-wrap:anywhere; }
.modalhead .close { flex:0 0 44px; width:44px; height:44px; }
.modal .countrylist { min-height:0; flex:1 1 auto; overflow-x:hidden; overflow-y:auto; }
#journey-form, #journey-form fieldset, #journey-form details,
.pwa-field, .pwa-form-grid > * { min-inline-size:0; max-inline-size:100%; }
#journey-form, #journey-form fieldset { inline-size:100%; }
#journey-form fieldset { margin-inline:0; padding:12px; }
#journey-form legend { max-width:100%; overflow-wrap:anywhere; }
.pwa-field input, .pwa-field select, .pwa-field textarea, .modal .search {
  min-inline-size:0; inline-size:100%; max-inline-size:100%; font-size:16px;
}
.pwa-field input[type="datetime-local"] { appearance:none; -webkit-appearance:none; }
.pwa-field input[type="datetime-local"]::-webkit-date-and-time-value { text-align:left; min-height:1.2em; }
.pwa-check input { flex:0 0 20px; }
.pwa-small, .pwa-sub, .pwa-error, .pwa-search-results button { overflow-wrap:anywhere; }
.pwa-toolbar > * { min-width:0; }
.pwa-toolbar .pwa-btn { flex-shrink:0; }
.pwa-toolbar .pwa-small { text-align:right; }
.toast {
  position:fixed; z-index:60; left:50%; right:auto; transform:translateX(-50%);
  width:calc(100% - 34px); max-width:766px; bottom:calc(78px + var(--app-safe-bottom));
}
#modal-root:not(:empty) + .toast { top:calc(var(--dialog-top, 0px) + var(--app-safe-top) + 76px); bottom:auto; }

.page[data-screen="journey"][data-presentation="map"] > .pwa-toolbar { position:relative; z-index:2; margin-top:0; margin-bottom:10px; }
.page[data-screen="journey"][data-presentation="map"] .route-controls { top:275px; }
.page[data-screen="journey"][data-presentation="map"] > .trip-stats { bottom:8px; }
.page[data-screen="journey"][data-presentation="map"] > .pwa-toolbar .pwa-small { display:none; }
@media (min-width:801px) { .layout { border-inline:1px solid #20384a; } }
@media (max-width:360px) {
  .pwa-form-grid { grid-template-columns:minmax(0,1fr); }
  .top { padding-inline:14px; }
  .pwa-card { margin-inline:12px; }
  .modal { padding-inline:14px; }
}
@media (max-height:560px) and (min-width:601px) {
  .nav { padding-top:4px; padding-bottom:max(4px, var(--app-safe-bottom)); }
  .nav button { min-height:46px; }
  .pwa-toolbar { position:relative; }
  .page[data-screen="journey"][data-presentation="map"] > .pwa-toolbar { width:280px; }
  .page[data-screen="journey"][data-presentation="map"] .route-controls { top:12px; }
}

/* Footprint labels live outside the camera transform, in screen-sized units. */
#footprint-map-svg { overflow:hidden; }
#footprint-map-svg .region, #footprint-map-svg .gridline { vector-effect:non-scaling-stroke; }
#footprint-map-svg .region { stroke-width:.8px; }
#footprint-map-svg .region.visited { stroke-width:1.1px; }
#footprint-map-svg .region.chosen { stroke-width:1.8px; }
#footprint-map-labels { pointer-events:none; }
#footprint-map-labels .maplabel { fill:#c3dfe5; stroke-width:var(--map-label-stroke, 3px); stroke-linejoin:round; }
.map-selection { position:absolute; z-index:3; left:12px; right:12px; bottom:36px; display:flex; align-items:center; gap:10px; padding:10px 8px 10px 14px; border:1px solid #4a787b; border-radius:13px; background:#0d202bf2; box-shadow:0 5px 22px #0005; }
.map-selection-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; }
.map-selection-copy strong { font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.map-selection-copy span { font-size:11px; line-height:1.5; color:var(--muted); }
.map-selection .mark { padding:9px 10px; }
.map-selection-close { width:44px; height:44px; flex:0 0 44px; border-radius:8px; font-size:24px; color:var(--muted); }
@media(max-width:360px) { .map-selection { left:8px; right:8px; gap:6px; padding-left:10px; } .map-selection-copy strong { font-size:13px; } .map-selection .mark { font-size:12px; padding-inline:8px; } }