/* ==========================================================================
   DropPal styles (brand asset pack v1)
   Typeface: Overpass (assets/DropPal-asset-pack/fonts, SIL OFL)
   Palette:  Charcoal #121A22 · Deep Teal #0C8B77 · Primary Teal #00D6B0 · Mint Tint #E6FBF6
   Every colour below comes from a token, so light and dark mode both follow the brand.
   ========================================================================== */

@font-face { font-family: Overpass; src: url('assets/DropPal-asset-pack/fonts/overpass-latin-600-normal.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: Overpass; src: url('assets/DropPal-asset-pack/fonts/overpass-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Overpass; src: url('assets/DropPal-asset-pack/fonts/overpass-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: Overpass; src: url('assets/DropPal-asset-pack/fonts/overpass-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  color-scheme: light;
  --font: Overpass, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Brand constants (same in both themes) */
  --brand-charcoal: #121a22;
  --brand-deep-teal: #0c8b77;
  --brand-teal: #00d6b0;
  --brand-mint: #e6fbf6;
  --parking: #1f5fbf;            /* UK parking-sign blue, keeps parking distinct from stops */

  /* Light theme */
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #121a22;
  --muted: #3d4852;              /* darker than usual so it stays readable in daylight */
  --subtle: #52616b;
  --accent: #0a6f60;             /* text-safe deep teal (6.1:1 on white) */
  --accent-strong: #0c8b77;
  --accent-soft: #e6fbf6;
  --accent-border: #bce9de;
  --road: #c8eee5;
  --road-line: #ffffff;
  --border: #dce6e4;
  --divider: #edf2f1;
  --surface-alt: #f4f7f6;
  --input-bg: #f4f7f6;
  --btn-bg: #121a22;             /* primary action: charcoal on light */
  --btn-ink: #ffffff;
  --btn-icon: #00d6b0;
  --success: #0a6f60;
  --warn: #945000;
  --warn-soft: #fef3c7;
  --danger: #b83248;
  --danger-soft: #fbe9ec;
  --parking-ink: #1f5fbf;
  --parking-soft: #e8f0fc;
  --toast-bg: #121a22;
  --overlay-bg: #121a22;
  --scrim: rgba(18, 26, 34, 0.72);
  --scrim-strong: rgba(18, 26, 34, 0.92);
  --shadow: rgba(18, 26, 34, 0.12);
  --shadow-strong: rgba(18, 26, 34, 0.3);
  --focus: #0c8b77;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121a22;
    --panel: #1b2630;
    --ink: #eef5f3;
    --muted: #b4c3c7;
    --subtle: #95a6ab;
    --accent: #00d6b0;
    --accent-strong: #00d6b0;
    --accent-soft: rgba(0, 214, 176, 0.13);
    --accent-border: rgba(0, 214, 176, 0.35);
    --road: rgba(0, 214, 176, 0.12);
    --road-line: rgba(255, 255, 255, 0.28);
    --border: rgba(255, 255, 255, 0.1);
    --divider: rgba(255, 255, 255, 0.07);
    --surface-alt: #16212a;
    --input-bg: #16212a;
    --btn-bg: #00d6b0;           /* primary action: teal on dark, like the splash */
    --btn-ink: #121a22;
    --btn-icon: #121a22;
    --success: #00d6b0;
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.14);
    --danger: #fb7185;
    --danger-soft: rgba(251, 113, 133, 0.14);
    --parking-ink: #7fb0ff;
    --parking-soft: rgba(127, 176, 255, 0.14);
    --toast-bg: #2a3844;
    --overlay-bg: #0d1318;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.5);
    --focus: #00d6b0;
  }
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* Backs up the viewport meta tag's zoom lock: browsers can still permit a
     double-tap zoom gesture on page content even with user-scalable=no. The map
     itself isn't affected — Leaflet manages its own touch-action for pinch/pan. */
  touch-action: manipulation;
}

h1,
h2,
h3 {
  font-family: var(--font);
}

button,
textarea,
input {
  font: inherit;
  color: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--subtle);
}

.hidden {
  display: none !important;
}

/* Icons (inline SVG, drawn with currentColor) */
.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Buttons ---------- */

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: none;
  border-radius: 14px;
  padding: 10px 16px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease;
}

button:active {
  transform: scale(0.98);
}

button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

button.secondary,
.small-btn {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--border);
}

button.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.small-btn {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 0.88rem;
  border-radius: 12px;
}

.small-btn.warning {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}

/* ---------- App shell & header ---------- */

.app-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom));
}

.hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0 18px;
}

.hero h1 {
  margin: 0;
  line-height: 1;
}

button.brand-refresh {
  display: block;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  background: none;
}

.brand-header {
  display: block;
  width: 210px;
  height: 49px;
  object-fit: contain;
  object-position: left;
}

.hero-tagline {
  display: none;
}

.menu-toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
}

.sync-indicator {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--subtle);
}

.sync-indicator.offline,
.sync-indicator.error {
  color: var(--danger);
}

.sync-indicator.syncing {
  color: var(--warn);
  animation: sync-pulse 1s ease-in-out infinite;
}

.sync-indicator.synced {
  color: var(--success);
}

@keyframes sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- Side drawer ---------- */

.side-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--scrim);
}

.side-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1101;
  width: min(300px, 82vw);
  background: var(--panel);
  box-shadow: 4px 0 24px var(--shadow-strong);
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  transform: translateX(0);
  transition: transform 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.side-drawer.hidden {
  display: flex !important;
  transform: translateX(-100%);
  pointer-events: none;
}

.side-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.side-drawer-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}

.side-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.side-drawer-actions button {
  justify-content: flex-start;
  text-align: left;
  min-height: 48px;
}

.side-drawer-actions button .icon {
  color: var(--accent);
}


/* ---------- Home overview ---------- */

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent);
}

h1 {
  margin: 0 0 6px;
  font-size: 1.8rem;
}

h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.subtitle {
  margin: 0;
  line-height: 1.5;
  color: var(--muted);
}

.home-overview {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}

.home-overview h2 {
  margin: 4px 0 0;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.home-intro {
  margin: 2px 0 20px;
  color: var(--muted);
  font-weight: 600;
}

.round-summary {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--accent-border);
  border-radius: 24px;
  padding: 22px;
  background: var(--accent-soft);
}

/* A road running through the corner, like the one in the logo's "l": the brand's
   one decorative flourish in the app. Layers, top first: the two edge lines, the
   dashed centre line (a 5px strip down the middle), then the road surface. */
.round-summary::after {
  content: '';
  pointer-events: none;
  position: absolute;
  top: -70px;
  right: 6%;
  width: 92px;
  height: 170%;
  transform: rotate(-30deg);
  background:
    linear-gradient(90deg, var(--road-line) 0 3px, transparent 3px calc(100% - 3px), var(--road-line) calc(100% - 3px)),
    repeating-linear-gradient(0deg, transparent 0 16px, var(--road-line) 16px 36px) center / 5px 100% no-repeat,
    var(--road);
  opacity: 0.8;
}

.round-summary > * {
  position: relative;
  z-index: 1;
}

.round-summary h3 {
  margin: 0;
  font-size: 48px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.round-summary p:not(.eyebrow) {
  margin: 2px 0 18px;
  color: var(--muted);
  font-weight: 600;
}

#startRoundButton {
  width: 100%;
  min-height: 58px;
  border-radius: 17px;
  font-size: 1.2rem;
  font-weight: 800;
}

#startRoundButton[data-mode='start']::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--btn-icon);
}

.round-facts {
  display: grid;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}

.round-facts span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  font-weight: 600;
}

.round-facts span + span {
  border-top: 1px solid var(--divider);
}

.round-facts strong {
  font-weight: 800;
}

/* ---------- Panels & content ---------- */

.content {
  display: grid;
  gap: 12px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.panel-heading-toggle {
  width: 100%;
  min-height: 0;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font: inherit;
  text-align: left;
}

.panel-heading-toggle:active {
  transform: none;
}

.panel-toggle-chevron {
  flex: 0 0 auto;
  color: var(--subtle);
  transition: transform 150ms ease;
}

.panel.collapsed .panel-heading {
  margin-bottom: 0;
}

.panel.collapsed .panel-toggle-chevron {
  transform: rotate(-90deg);
}

.panel.collapsed .panel-body {
  display: none;
}

.pill {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 6px 10px;
}

.pill:empty {
  display: none;
}

.next-stop-banner {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  text-align: left;
}

.next-stop-label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--btn-icon);
}

.next-stop-text {
  font-weight: 800;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.actions > button {
  flex: 1 1 auto;
}

.planned-stops-actions {
  justify-content: space-between;
}

.planned-stops-actions > button {
  flex: 0 1 auto;
}

.field-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}

.search-input,
textarea,
.note-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  background: var(--input-bg);
  color: var(--ink);
}

.search-input:focus,
textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.search-input {
  margin-bottom: 8px;
  min-height: 46px;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

.note-input {
  min-height: 70px;
  padding: 10px 12px;
  resize: vertical;
}

.status-message {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ---------- Postcode suggestions ---------- */

.suggestions-list {
  margin: 0 0 10px;
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.suggestion-item-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.suggestion-item {
  flex: 1 1 auto;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.92rem;
  font-weight: 600;
}

.suggestion-postcode {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.suggestion-item-row-matched .suggestion-item {
  border: 2px solid var(--accent-strong);
  background: var(--accent-soft);
  font-weight: 700;
}

.suggestion-item-row-matched .suggestion-item::before {
  content: '✓ Best match · ';
  color: var(--accent);
  white-space: pre;
}

.suggestion-item-extra {
  flex: 0 0 auto;
  border: 1px dashed var(--border);
  background: var(--surface-alt);
  color: var(--muted);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.extra-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
}

.parking-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--parking-ink);
  background: var(--parking-soft);
  border: 1px solid transparent;
}

.parking-badge::before {
  content: 'P';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--parking);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
}

/* ---------- Stop list ---------- */

.delivery-list {
  position: relative;
  display: grid;
  gap: 10px;
}

.delivery-item {
  border: 1px solid var(--border);
  border-left: 4px solid var(--stop-stripe, var(--border));
  border-radius: 16px;
  padding: 12px 12px 12px 14px;
  background: var(--panel);
}

.delivery-item.status-planned { --stop-stripe: var(--ink); }
.delivery-item.status-delivered { --stop-stripe: var(--accent-strong); }
.delivery-item.status-not-delivered { --stop-stripe: var(--warn); }
.delivery-item.status-skipped { --stop-stripe: var(--danger); }

.delivery-item.dragging {
  z-index: 20;
  box-shadow: 0 12px 24px var(--shadow-strong);
  cursor: grabbing;
}

.drag-placeholder {
  border: 2px dashed var(--border);
  border-radius: 16px;
  background: var(--accent-soft);
  padding: 0;
}

.delivery-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.drag-handle {
  font-size: 1.1rem;
  color: var(--subtle);
  cursor: grab;
  touch-action: none;
  padding: 6px;
  /* The handle is text (⋮⋮); a press-and-hold mustn't select it or pop up the
     iOS callout menu. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* While a drop is being dragged, nothing on the page can be selected. */
body.reordering,
body.reordering * {
  -webkit-user-select: none;
  user-select: none;
}

.delivery-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.delivery-meta {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.status-row,
.note-row,
.action-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.status-chip {
  min-height: 40px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.86rem;
}

.status-chip.active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
}

.status-chip.active::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status-chip.delivered.active {
  background: var(--accent-soft);
  color: var(--success);
  border-color: var(--accent-border);
}

.status-chip.not-delivered.active {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: transparent;
}

.status-chip.skipped.active {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}

/* ---------- Maps & markers ---------- */

#map {
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  isolation: isolate;
}

.stop-marker,
.current-location-marker,
.store-marker,
.parking-marker {
  background: transparent;
  border: none;
}

.current-location-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  border: 3px solid white;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.25), 0 2px 6px var(--shadow-strong);
}

.parking-marker-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--parking);
  border: 2px solid white;
  box-shadow: 0 2px 5px var(--shadow-strong);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 900;
  color: white;
}

.store-marker-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--brand-charcoal);
  color: var(--brand-teal);
  border: 2px solid white;
  box-shadow: 0 3px 6px var(--shadow-strong);
}

.store-marker-pin svg {
  width: 17px;
  height: 17px;
}

/* ---------- Full-screen overlays ---------- */

.map-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--overlay-bg);
  display: flex;
  flex-direction: column;
}

.map-fullscreen-map-host {
  flex: 1 1 auto;
  min-height: 0;
  isolation: isolate;
}

.map-fullscreen-map-host #map,
.map-fullscreen-map-host #shiftHistoryMap,
.map-fullscreen-map-host #allTimeMap {
  height: 100%;
  border-radius: 0;
  border: none;
  cursor: default;
}

/* Round floating map controls: close, add, fit */
.map-fullscreen-close,
.map-fullscreen-add,
.map-fullscreen-fit {
  position: absolute;
  right: 14px;
  z-index: 1100;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--brand-charcoal);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(18, 26, 34, 0.3);
  font-size: 1.3rem;
  line-height: 1;
}

.map-fullscreen-close { top: max(14px, env(safe-area-inset-top)); }
.map-fullscreen-add { top: calc(max(14px, env(safe-area-inset-top)) + 56px); font-size: 1.5rem; }
.map-fullscreen-fit { top: calc(max(14px, env(safe-area-inset-top)) + 112px); }
.shift-history-map-fit { top: calc(max(14px, env(safe-area-inset-top)) + 56px); }

.map-fullscreen-add .icon {
  transition: transform 150ms ease;
}

/* Open state: the plus turns into a cross */
.map-fullscreen-add.open {
  background: var(--brand-teal);
  color: var(--brand-charcoal);
}

.map-fullscreen-add.open .icon {
  transform: rotate(45deg);
}

/* Close buttons sit inside light/dark panels in headers, so use panel colours there */
.side-drawer-header .map-fullscreen-close,
.shift-history-header .map-fullscreen-close {
  position: static;
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
}

.map-fullscreen-search {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin: 0 14px max(14px, env(safe-area-inset-bottom));
  padding: 16px;
  background: var(--panel);
  border-radius: 24px;
  box-shadow: 0 -5px 24px var(--shadow);
}

.map-fullscreen-search .suggestions-list {
  max-height: 240px;
  margin-bottom: 0;
}

.map-fullscreen-cards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  padding: 0 14px max(14px, env(safe-area-inset-bottom));
  background: transparent;
  -webkit-overflow-scrolling: touch;
}

/* The stop card: the "bottom sheet" from the round screen */
.map-fullscreen-card {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  background: var(--panel);
  border: none;
  border-radius: 26px;
  padding: 26px 18px 18px;
  touch-action: pan-x;
  box-shadow: 0 -5px 24px var(--shadow);
}

.map-fullscreen-card::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  transform: translateX(-50%);
}

.map-fullscreen-card-number {
  position: absolute;
  top: 20px;
  right: 18px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
}

.map-fullscreen-card .delivery-title {
  padding-right: 64px;
  font-size: 1.6rem;
  line-height: 1.15;
}

.map-fullscreen-card .note-row {
  background: var(--accent-soft);
  border-radius: 16px;
  padding: 12px;
  transition: opacity 150ms ease, transform 150ms ease;
}

/* "Complete drop" is the action drivers tap all day: make it the big primary button */
.map-fullscreen-card .status-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.map-fullscreen-card .status-chip {
  border-radius: 14px;
  min-height: 46px;
}

.map-fullscreen-card .status-chip.delivered {
  grid-column: 1 / -1;
  order: -1;
  min-height: 58px;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 1.15rem;
  font-weight: 800;
}

.map-fullscreen-card .status-chip.delivered.active {
  background: var(--accent-soft);
  color: var(--accent);
  border: 2px solid var(--accent-strong);
}

.map-fullscreen-card .status-chip.delivered.active::before {
  display: none;
}

.map-fullscreen-card .action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.map-fullscreen-store-card {
  background: var(--panel);
  border-left: 4px solid var(--brand-teal);
}

.map-fullscreen-store-card .delivery-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.clock-overlay {
  align-items: center;
  justify-content: center;
  background: var(--brand-charcoal) radial-gradient(circle at 50% 35%, rgba(0, 214, 176, 0.16), transparent 60%);
}

.clock-face {
  text-align: center;
}

.clock-time {
  margin: 0;
  font-family: var(--font);
  font-weight: 900;
  font-size: clamp(3rem, 15vw, 5.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #f2f5f9;
}

.clock-date {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: #a9b8bd;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---------- History, notes ---------- */

.shift-history-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.shift-history-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.shift-history-header h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}

.shift-history-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shift-history-summary {
  flex: 0 0 auto;
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.shift-end-summary-stats {
  border-bottom: none;
  background: none;
  padding: 0;
  margin: 0 0 20px;
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
}

.shift-history-summary-stat {
  flex: 1 0 auto;
  min-width: 72px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}

.shift-history-summary-stat strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--ink);
}

.shift-history-summary-stat span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Account and Settings: full-screen pages like Notes, laid out as cards. */
.settings-page {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  display: grid;
  gap: 14px;
  align-content: start;
}

.settings-section {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
}

.settings-section h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.settings-section p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.settings-section p.settings-value {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 800;
}

.settings-section button {
  width: 100%;
  min-height: 48px;
}

.settings-section button .icon {
  color: inherit;
}

.settings-about p {
  margin: 0;
  padding-top: 2px;
  font-size: 0.82rem;
  color: var(--subtle);
  text-align: center;
}

.shift-history-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.shift-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background: var(--panel);
}

.shift-card .action-row {
  align-items: center;
  justify-content: space-between;
}

.shift-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.shift-card-header strong {
  font-size: 1.02rem;
  font-weight: 800;
}

.shift-card-header span {
  color: var(--muted);
  font-size: 0.86rem;
}

.shift-card-stopcount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.shift-card-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.84rem;
}

.shift-card-miles {
  color: var(--muted);
  font-size: 0.8rem;
}

.shift-stat {
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
}

.shift-stat.delivered { background: var(--accent-soft); color: var(--success); }
.shift-stat.not-delivered { background: var(--warn-soft); color: var(--warn); }
.shift-stat.skipped { background: var(--danger-soft); color: var(--danger); }

.shift-history-map-caption {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  right: 70px;
  z-index: 1050;
  margin: 0;
  padding: 10px 14px;
  color: white;
  background: var(--brand-charcoal);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
}

.notes-page-textarea {
  min-height: 90px;
  margin-bottom: 8px;
}

.notes-page-timestamp {
  margin: 0;
}

/* ---------- Live scan ---------- */

.live-scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--scrim-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
}

.live-scan-frame {
  position: relative;
  width: min(96vw, 640px);
  /* Roughly the shape of a 4-5 line address block; whatever is visible here is what gets scanned. */
  aspect-ratio: 2 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--brand-teal);
  background: black;
}

.live-scan-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-scan-frame-label {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--brand-charcoal);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  pointer-events: none;
}

.live-scan-actions {
  display: flex;
  gap: 12px;
}

.live-scan-actions button {
  min-width: 160px;
}

.live-scan-status {
  color: white;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  max-width: 480px;
}

/* ---------- Modals ---------- */

.prior-visit-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--scrim-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.prior-visit-modal-panel {
  background: var(--panel);
  border-radius: 24px;
  padding: 24px;
  width: 100%;
  text-align: center;
}

.prior-visit-modal-panel {
  max-width: 360px;
}

.prior-visit-modal-panel h2 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  font-weight: 800;
}

.prior-visit-modal-panel p {
  margin: 0 0 20px;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-line;
  text-align: left;
  max-height: 55vh;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.prior-visit-modal-panel .secondary,
.prior-visit-modal-panel > button {
  width: 100%;
}

.prior-visit-modal-actions {
  display: flex;
  gap: 10px;
}

.prior-visit-modal-actions button {
  flex: 1 1 0;
  width: auto;
}

.nav-app-modal-actions {
  flex-direction: column;
}

/* ---------- Toast ---------- */

.status-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  z-index: 1200;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--toast-bg);
  color: white;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 10px 24px var(--shadow-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.status-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.status-toast.success {
  background: var(--brand-deep-teal);
}

.status-toast.warning {
  background: #8a4b00;
}

/* ---------- Bottom navigation ---------- */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 12px max(8px, env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.bottom-nav button {
  display: grid;
  gap: 3px;
  justify-items: center;
  min-height: 52px;
  padding: 6px 4px;
  background: none;
  color: var(--subtle);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
}

.bottom-nav button .icon {
  width: 24px;
  height: 24px;
}

.bottom-nav button[aria-current='page'] {
  color: var(--accent);
  font-weight: 800;
}

.bottom-nav button[aria-current='page'] .icon {
  stroke-width: 2.4;
}

/* ---------- PIN gate / splash (always dark, matches the store splash) ---------- */

.pin-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--brand-charcoal);
  color: #fff;
  overflow-y: auto;
}

.pin-gate-panel {
  width: 100%;
  max-width: 400px;
  padding: 24px 12px;
  text-align: center;
}

.brand-splash {
  display: block;
  width: 78%;
  max-height: 220px;
  object-fit: contain;
  margin: 12px auto 32px;
}

.splash-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #1d2a34;
  text-align: left;
}

.splash-feature .icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--brand-teal);
}

.splash-feature strong,
.splash-feature span {
  display: block;
}

.splash-feature strong {
  font-weight: 800;
}

.splash-feature span {
  margin-top: 3px;
  color: #c4d5d2;
  font-size: 0.9rem;
  line-height: 1.45;
}

.pin-gate-panel .field-label {
  margin-top: 24px;
  color: #d4e5e1;
  text-align: left;
}

.pin-gate-panel .search-input {
  min-height: 54px;
  background: #1d2a34;
  color: #fff;
  border-color: #3d505c;
  text-align: center;
  letter-spacing: 0.3em;
  font-size: 1.25rem;
}

.pin-gate-panel .search-input.pin-gate-username {
  letter-spacing: normal;
}

button.pin-gate-mode-toggle {
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  background: none;
  color: var(--brand-teal);
  font-weight: 700;
}

button.pin-gate-submit {
  width: 100%;
  min-height: 56px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--brand-teal);
  color: var(--brand-charcoal);
  font-size: 1.1rem;
  font-weight: 800;
}

.pin-gate-error {
  margin: 12px 0 0;
  color: #fb7185;
  font-weight: 700;
  font-size: 0.9rem;
}

/* ---------- Wider screens ---------- */

@media (min-width: 700px) {
  .bottom-nav {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 960px;
    transform: translateX(-50%);
  }

  .round-facts {
    grid-template-columns: 1fr 1fr;
  }

  .round-facts span + span {
    border-top: 0;
    border-left: 1px solid var(--divider);
  }
}

@media (min-width: 760px) {
  .content {
    grid-template-columns: 1fr 1fr;
  }

  .panel:last-child {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Round screen (full-screen map): header bar + next-drop sheet
   ========================================================================== */

.map-round-header {
  position: relative;
  z-index: 1100;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px 8px;
  background: var(--panel);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}

button.map-round-back {
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 50%;
  background: none;
  color: var(--ink);
}

button.map-round-back .icon {
  width: 24px;
  height: 24px;
}

.map-round-title {
  flex: 1 1 auto;
  min-width: 0;
}

.map-round-title h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.map-round-title p {
  margin: 1px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}

.map-round-sync {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
  background: var(--accent-soft);
  color: var(--accent);
}

.map-round-sync.synced::before {
  content: '✓';
}

.map-round-sync.offline,
.map-round-sync.syncing {
  background: var(--warn-soft);
  color: var(--warn);
}

.map-round-sync.error {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Floating map controls sit below the header on the round screen */
#mapFullscreenOverlay .map-fullscreen-add {
  top: calc(max(10px, env(safe-area-inset-top)) + 78px);
}

#mapFullscreenOverlay .map-fullscreen-fit {
  top: calc(max(10px, env(safe-area-inset-top)) + 134px);
}

/* The sheet */
#mapFullscreenCards .map-fullscreen-card {
  padding: 24px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 72vh;
  overflow-y: auto;
}

#mapFullscreenCards .map-fullscreen-card > * {
  margin: 0;
}

#mapFullscreenCards .delivery-title {
  padding-right: 0;
  font-size: 1.75rem;
  line-height: 1.1;
}

#mapFullscreenCards .delivery-meta {
  margin-top: -6px;
  font-size: 0.95rem;
  color: var(--muted);
}

.drop-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.drop-count {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}

.drop-status {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  background: var(--surface-alt);
  color: var(--muted);
}

.drop-status-planned { background: var(--accent-soft); color: var(--accent); }
.drop-status-delivered { background: var(--surface-alt); color: var(--muted); }
.drop-status-not-delivered { background: var(--warn-soft); color: var(--warn); }
.drop-status-skipped { background: var(--danger-soft); color: var(--danger); }

.drop-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-alt);
}

.drop-note .icon {
  margin-top: 1px;
  color: var(--accent);
}

.drop-note-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.drop-note-sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.drop-note-parking {
  background: var(--parking-soft);
}

.drop-parking-p {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--parking);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
}

/* Complete drop: the one big button */
button.drop-complete {
  width: 100%;
  min-height: 58px;
  margin-top: 4px;
  border-radius: 18px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 1.2rem;
  font-weight: 800;
}

button.drop-complete .icon {
  width: 24px;
  height: 24px;
  stroke-width: 3;
  color: var(--btn-icon);
}

button.drop-complete.is-done {
  background: var(--accent-soft);
  color: var(--accent);
  border: 2px solid var(--accent-strong);
  font-size: 1.05rem;
}

button.drop-complete.is-done .icon {
  color: var(--accent);
}

.drop-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

button.drop-action {
  min-height: 52px;
  padding: 8px 6px;
  gap: 6px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--border);
  font-size: 0.92rem;
  white-space: nowrap;
}

button.drop-action .icon {
  width: 18px;
  height: 18px;
}

button.drop-action.is-active {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: transparent;
}

#mapFullscreenCards .note-row {
  margin-top: 0;
}

.drop-more {
  border-top: 1px solid var(--divider);
  padding-top: 6px;
}

.drop-more summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  list-style: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
}

.drop-more summary::-webkit-details-marker {
  display: none;
}

.drop-more summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.drop-more[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.drop-more .action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4px;
}

/* "Return to store" card */
#mapFullscreenCards .map-fullscreen-store-card .delivery-title {
  font-size: 1.5rem;
}

/* Each sheet hugs its own content rather than stretching to the tallest card */
#mapFullscreenCards {
  align-items: flex-end;
}

/* ==========================================================================
   Separators and map pins (v3.4.2)
   ========================================================================== */

/* "Reading · RG31 4SQ": a CSS dot with equal space either side. Overpass's own ·
   glyph sits hard against the next character, so it isn't used for separators. */
.meta-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0.5em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.22em;
  opacity: 0.7;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Stop pins: DropPal teardrop, number centred in the round head. */
.stop-marker-pin,
.stop-marker-pin.active-pin {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  transform: none;
}

.stop-marker-pin svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(18, 26, 34, 0.35));
}

.stop-marker-pin svg path {
  stroke: #ffffff;
  stroke-width: 2.2;
}

.stop-marker-pin.custom-pin svg path {
  stroke: #facc15;
  stroke-width: 2.6;
}

.stop-marker-pin.extra-pin svg path {
  stroke-dasharray: 3 2.5;
}

.stop-marker-pin.active-pin {
  z-index: 1000;
}

.stop-marker-pin.active-pin svg {
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 3px 6px rgba(18, 26, 34, 0.45));
}

/* The head is the top 75% of a square the width of the pin (circle centre at 14.6/39) */
.stop-marker-pin-number {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  padding-top: 0.12em;          /* Overpass digits sit a touch high; nudge to optical centre */
  color: #ffffff;
  font-family: var(--font);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stop-marker-pin.digits-2 .stop-marker-pin-number { font-size: 12px; }
.stop-marker-pin.digits-3 .stop-marker-pin-number { font-size: 9.5px; }
.stop-marker-pin.active-pin .stop-marker-pin-number { font-size: 17px; }
.stop-marker-pin.active-pin.digits-2 .stop-marker-pin-number { font-size: 15px; }
.stop-marker-pin.active-pin.digits-3 .stop-marker-pin-number { font-size: 12px; }

/* Inside buttons the flex gap already spaces things out */
button .meta-sep {
  margin: 0;
}

/* ==========================================================================
   Sign-in screen on phones (v3.4.3)
   Safari's visible area is much shorter than the screen once its toolbars show.
   ========================================================================== */

/* Centring a box that's taller than the screen pushes its top off-screen where it
   can't be scrolled to. Let the overlay scroll from the top and centre with auto
   margins instead, so it's centred when it fits and scrollable when it doesn't. */
.pin-gate-overlay {
  align-items: flex-start;
  padding: max(16px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pin-gate-panel {
  margin: auto;
  padding: 8px 4px 16px;
}

.brand-splash {
  width: 70%;
  max-height: 190px;
  margin: 8px auto 24px;
}

/* Username is ordinary text: left-aligned, normal size, no code-style spacing.
   (The PIN keeps its centred, spaced-out look.) */
.pin-gate-panel .search-input.pin-gate-username {
  text-align: left;
  font-size: 1.1rem;
  padding-left: 16px;
}

.pin-gate-panel .field-label {
  margin-top: 16px;
}

/* Shorter screens (Safari with toolbars showing, smaller iPhones):
   tighter logo and one-line feature cards so Sign in stays in view. */
@media (max-height: 820px) {
  .brand-splash {
    max-height: 150px;
    margin: 4px auto 18px;
  }

  .splash-feature {
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
  }

  .splash-feature span {
    display: none;
  }

  .pin-gate-panel .search-input {
    min-height: 50px;
  }
}

@media (max-height: 640px) {
  .splash-feature {
    display: none;
  }
}