/* =================================================================
   Daycare Pickup — cartographic warmth
   Late-afternoon paper, deep evening teal, terracotta active state.
   Two-font system: Fraunces (variable) + JetBrains Mono.
   ================================================================= */

:root {
  /* Paper & ink */
  --paper:        #f4ecdc;
  --paper-deep:   #ebe1cd;
  --card:         #fbf6ec;
  --card-deep:    #f5ecd8;
  --ink:          #1d2225;
  --ink-soft:     #5d5b53;
  --ink-faint:    #8b8676;
  --rule:         #d6c8af;
  --rule-soft:    #e6dbc4;

  /* Accents */
  --ocean:        #1d4e62;   /* deep evening blue (primary) */
  --ocean-deep:   #11323f;
  --ocean-tint:   #c9dde3;
  --terra:        #b3431a;   /* terracotta (armed / warning) */
  --terra-soft:   #d68a5e;
  --terra-tint:   #f1d8c5;
  --moss:         #5d7747;   /* moss (sent / success) */
  --moss-tint:    #d8e1c8;
  --gold:         #b88a3c;   /* gold accent */

  /* Type */
  --display:      'Fraunces', 'Iowan Old Style', Cambria, Georgia, serif;
  --mono:         'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Layout */
  --col-max:      460px;
  --gutter:       18px;
}

/* ----- Reset ----- */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, blockquote {
  margin: 0; padding: 0;
}
ul { list-style: none; }
button, input { font: inherit; color: inherit; }

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  font-variation-settings: "opsz" 14, "SOFT" 30;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "kern";
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Paper-grain + warm radial vignette so the background isn't flat */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 18% 12%, rgba(184,138,60,0.08), transparent 60%),
    radial-gradient(ellipse 90% 70% at 82% 92%, rgba(29,78,98,0.07), transparent 65%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.34 0 0 0 0 0.21 0 0 0 0.55 0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.35'/></svg>");
}

#app {
  position: relative;
  z-index: 1;
  max-width: var(--col-max);
  margin: 0 auto;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.hidden { display: none !important; }


/* =====================================================================
   LOGIN
   ===================================================================== */

.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  gap: 0;
}

.compass-mark {
  width: 64px; height: 64px;
  color: var(--ocean);
  margin-bottom: 36px;
  animation: drift-in 0.9s 0.05s ease-out backwards;
}
.compass-svg { width: 100%; height: 100%; }

.brandmark {
  font-family: var(--display);
  font-size: clamp(54px, 14vw, 72px);
  font-weight: 380;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  letter-spacing: -0.025em;
  line-height: 0.92;
  color: var(--ink);
  animation: drift-in 0.9s 0.15s ease-out backwards;
}
.brand-mark { color: var(--terra); }

.brand-meta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  margin-top: 14px;
  margin-bottom: 56px;
  animation: drift-in 0.9s 0.25s ease-out backwards;
}
.dot-sep { margin: 0 10px; opacity: 0.5; }

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: drift-in 0.9s 0.35s ease-out backwards;
}

/* Inputs styled as ledger lines */
.field { display: block; position: relative; }
.field-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 10px;
}
.field input {
  width: 100%;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  font-variation-settings: "opsz" 14;
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 4px 0 12px;
  outline: none;
  letter-spacing: -0.005em;
}
.field-rule {
  display: block;
  height: 1px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.field-rule::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ocean);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.field input:focus ~ .field-rule::before { transform: scaleX(1); }

/* Primary action: stamped, confident */
.primary-action {
  margin-top: 12px;
  background: var(--ocean);
  color: var(--paper);
  border: none;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 420;
  font-variation-settings: "opsz" 14, "SOFT" 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 20px 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: background 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.primary-action::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid var(--ocean);
  pointer-events: none;
}
.primary-action:hover { background: var(--ocean-deep); }
.primary-action:active { transform: translateY(1px); }
.primary-action:disabled { opacity: 0.45; cursor: not-allowed; }

.action-arrow {
  font-family: var(--mono);
  font-size: 22px;
  transition: transform 0.25s ease;
}
.primary-action:hover .action-arrow { transform: translateX(4px); }

.auth-error {
  color: var(--terra);
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  min-height: 1.2em;
  letter-spacing: 0.02em;
}
.auth-error:not(:empty)::before {
  content: '⚠ '; font-weight: 600;
}

.login-footer {
  margin-top: auto;
  padding-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  animation: drift-in 0.9s 0.6s ease-out backwards;
}
.coord-mark {
  color: var(--terra);
  font-size: 14px;
  line-height: 1;
}


/* =====================================================================
   MAIN
   ===================================================================== */

.main-screen {
  padding: 18px var(--gutter) 80px;
}

/* Stagger the page entry */
.main-screen > * { animation: rise-in 0.6s ease-out backwards; }
.main-screen > *:nth-child(1) { animation-delay: 0s; }
.main-screen > *:nth-child(2) { animation-delay: 0.06s; }
.main-screen > *:nth-child(3) { animation-delay: 0.12s; }
.main-screen > *:nth-child(4) { animation-delay: 0.18s; }
.main-screen > *:nth-child(5) { animation-delay: 0.24s; }
.main-screen > *:nth-child(6) { animation-delay: 0.30s; }
.main-screen > *:nth-child(7) { animation-delay: 0.36s; }


/* Header / identity ledger */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 4px 22px;
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 22px;
}
.ident {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.ident-row { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ident dt {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
  width: 76px;
  flex-shrink: 0;
}
.ident dd {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 460;
  font-variation-settings: "opsz" 14;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}

.ghost {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 6px 10px;
  cursor: pointer;
  border: 0.5px solid var(--rule);
  transition: color 0.15s, border-color 0.15s;
}
.ghost:hover { color: var(--terra); border-color: var(--terra); }


/* ===== Card primitive ===== */
.card {
  background: var(--card);
  border: 0.5px solid var(--rule);
  padding: 18px 20px;
  margin-bottom: 14px;
  position: relative;
}

.card-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.eyebrow-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
}
.eyebrow-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  font-style: italic;
}
.card-prose {
  font-family: var(--display);
  font-size: 13.5px;
  font-style: italic;
  font-variation-settings: "opsz" 14, "SOFT" 70;
  color: var(--ink-soft);
  margin-top: 12px;
  line-height: 1.5;
}
.card-prose em { color: var(--ink); font-style: normal; font-weight: 600; }


/* ===== Hours card ===== */
.hours-window-wrap {
  text-align: center;
  padding: 8px 0 12px;
}
.hours-window {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 380;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.hours-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 0.5px dashed var(--rule);
}
.hours-foot-label, .hours-foot-value {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.hours-foot-label {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  font-size: 9.5px;
}
.hours-foot-dots {
  flex: 1;
  height: 1px;
  background-image: linear-gradient(to right, var(--rule) 0 1px, transparent 1px 4px);
  background-size: 4px 1px;
}
.hours-foot-value { color: var(--ocean); font-weight: 500; }

/* Pill (open / closed) */
.pill {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 5px 11px;
  border: 0.5px solid currentColor;
  display: inline-block;
  background: transparent;
  white-space: nowrap;
  position: relative;
}
.pill:empty { display: none; }
.pill-open {
  color: var(--moss);
  background: var(--moss-tint);
}
.pill-open::before {
  content: '●';
  margin-right: 5px;
  font-size: 8px;
  vertical-align: middle;
  animation: blink-soft 2s ease-in-out infinite;
}
.pill-closed {
  color: var(--ink-faint);
  background: var(--paper-deep);
  border-color: var(--rule);
}


/* ===== HERO: distance + state ===== */
.hero {
  background: var(--card);
  border: 0.5px solid var(--rule);
  padding: 22px 20px 24px;
  margin-bottom: 14px;
  position: relative;
}
/* Cartographic register marks at corners */
.corner {
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  color: var(--ocean);
  opacity: 0.6;
}
.corner::before, .corner::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.corner::before { width: 14px; height: 1px; }
.corner::after  { width: 1px; height: 14px; }
.corner-tl { top: -1px; left: -1px; }
.corner-tl::before { top: 0; left: 0; }
.corner-tl::after  { top: 0; left: 0; }
.corner-tr { top: -1px; right: -1px; }
.corner-tr::before { top: 0; right: 0; }
.corner-tr::after  { top: 0; right: 0; }
.corner-bl { bottom: -1px; left: -1px; }
.corner-bl::before { bottom: 0; left: 0; }
.corner-bl::after  { bottom: 0; left: 0; }
.corner-br { bottom: -1px; right: -1px; }
.corner-br::before { bottom: 0; right: 0; }
.corner-br::after  { bottom: 0; right: 0; }

.state-strip {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 0.5px dashed var(--rule);
  margin-bottom: 26px;
}
.state-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.state-rule {
  width: 0.5px;
  background: var(--rule);
  align-self: stretch;
}
.state-label {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
}

/* Stamp-style state badges */
.badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 7px 12px;
  border: 1px solid currentColor;
  background: transparent;
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.badge-off {
  color: var(--ink-faint);
  border-color: var(--rule);
  background: var(--paper-deep);
}
.badge-armed {
  color: var(--terra);
  background: var(--terra-tint);
  border-color: var(--terra);
  animation: pulse-armed 2.4s ease-in-out infinite;
}
.badge-armed::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px dashed var(--terra);
  opacity: 0.5;
  pointer-events: none;
}
.badge-sent {
  color: var(--moss);
  background: var(--moss-tint);
  border-color: var(--moss);
}
.badge-sent::before {
  content: '✓ ';
  font-weight: 700;
}

/* Distance — the hero */
.distance {
  text-align: center;
  padding: 12px 0 24px;
}
.distance-prefix {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.distance-value {
  font-family: var(--display);
  font-size: clamp(78px, 23vw, 110px);
  font-weight: 360;
  font-variation-settings: "opsz" 144, "SOFT" 25, "WONK" 0;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-bottom: 12px;
  font-feature-settings: "ss01", "tnum";
}
.distance-accuracy {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.acc-symbol { color: var(--gold); margin-right: 3px; }

/* Arm button — full-width primary, slightly different from login */
.arm-action {
  width: 100%;
  font-size: 19px;
  letter-spacing: 0.22em;
  padding: 22px 24px;
  justify-content: center;
}
.arm-action::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-top: 0.5px solid rgba(244,236,220,0.18);
  border-bottom: 0.5px solid rgba(244,236,220,0.18);
  pointer-events: none;
}
.arm-action:disabled {
  background: var(--paper-deep);
  color: var(--ink-faint);
}
.arm-action:disabled::before { border-color: var(--rule); }


/* ===== Radius / contour slider ===== */
.radius-readout {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 380;
  font-variation-settings: "opsz" 144;
  color: var(--terra);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}

.contour-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  margin: 8px 0 4px;
  outline: none;
}
.contour-slider::-webkit-slider-runnable-track {
  height: 18px;
  background: linear-gradient(
    to bottom,
    transparent 8px,
    var(--rule) 8px,
    var(--rule) 9px,
    transparent 9px
  );
  background-size: 100% 18px;
  position: relative;
}
.contour-slider::-moz-range-track {
  height: 18px;
  background: linear-gradient(
    to bottom,
    transparent 8px,
    var(--rule) 8px,
    var(--rule) 9px,
    transparent 9px
  );
}
.contour-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--terra);
  box-shadow:
    inset 0 0 0 4px var(--terra),
    inset 0 0 0 5px var(--card);
  cursor: pointer;
  margin-top: -4px;
  transition: transform 0.15s ease;
}
.contour-slider::-webkit-slider-thumb:hover { transform: scale(1.08); }
.contour-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--terra);
  box-shadow:
    inset 0 0 0 4px var(--terra),
    inset 0 0 0 5px var(--card);
  cursor: pointer;
}

.contour-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-top: 4px;
}
.contour-scale .tick {
  flex: 1;
  height: 4px;
  border-left: 0.5px solid var(--rule);
  margin-left: 0;
}
.contour-scale .tick:last-child { border-right: 0.5px solid var(--rule); }


/* ===== Message input ===== */
.field-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg-input {
  width: 100%;
  font-family: var(--display);
  font-size: 17px;
  font-variation-settings: "opsz" 14;
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 4px 0 8px;
  outline: none;
}
.msg-input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  font-variation-settings: "opsz" 14, "SOFT" 80;
}
.msg .field-rule { background: var(--rule); }
.msg .field-rule::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ocean);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.msg .msg-input:focus ~ .field-rule::before { transform: scaleX(1); }


/* ===== Safety / send ===== */
.enable-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.enable-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--rule);
  background: var(--paper);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.enable-row input[type="checkbox"]:checked {
  background: var(--terra);
  border-color: var(--terra);
}
.enable-row input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  color: var(--paper);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.enable-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.enable-title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  font-variation-settings: "opsz" 14;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.enable-help {
  font-family: var(--display);
  font-size: 13px;
  font-style: italic;
  font-variation-settings: "opsz" 14, "SOFT" 70;
  color: var(--ink-soft);
  line-height: 1.45;
}

.warning-action {
  width: 100%;
  background: transparent;
  color: var(--terra);
  border: 1px solid var(--terra);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 420;
  font-variation-settings: "opsz" 14;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: background 0.18s, color 0.18s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.warning-action::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 0.5px dashed var(--terra);
  pointer-events: none;
  opacity: 0.45;
  transition: opacity 0.18s;
}
.warning-action:hover:not(:disabled) {
  background: var(--terra);
  color: var(--paper);
}
.warning-action:hover:not(:disabled)::before {
  border-color: var(--paper);
  opacity: 0.4;
}
.warning-action:active:not(:disabled) { transform: translateY(1px); }
.warning-action:disabled {
  color: var(--ink-faint);
  border-color: var(--rule);
  cursor: not-allowed;
}
.warning-action:disabled::before { border-color: var(--rule); }


/* ===== Activity log ===== */
.log-list {
  max-height: 240px;
  overflow-y: auto;
  font-feature-settings: "tnum";
}
.log-list li {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  padding: 6px 0;
  border-bottom: 0.5px dashed var(--rule);
  color: var(--ink-soft);
  letter-spacing: 0.005em;
  word-break: break-word;
  animation: log-in 0.4s ease-out backwards;
}
.log-list li:last-child { border-bottom: none; }
.log-list li.log-ok  { color: var(--moss); }
.log-list li.log-err { color: var(--terra); }
.log-list li.log-err::before { content: '⚠ '; }
.log-list li.log-ok::before  { content: '✓ '; }


/* ===== Animations ===== */

@keyframes drift-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes log-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-armed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 67, 26, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(179, 67, 26, 0.13); }
}

@keyframes blink-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ===== Accessibility / touch ===== */

button:focus-visible, input:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--ocean);
  outline-offset: 3px;
}
.contour-slider:focus-visible {
  outline: 2px solid var(--ocean);
  outline-offset: 4px;
}

/* Larger phones / iPad portrait — stay in column but let cards breathe */
@media (min-width: 520px) {
  .main-screen { padding: 24px 28px 100px; }
  .login-screen { padding: 48px 32px; }
  .distance-value { font-size: clamp(96px, 18vw, 124px); }
}

/* Wide screens — the design stays mobile-shape but recede content */
@media (min-width: 900px) {
  body {
    background:
      linear-gradient(to bottom, var(--paper-deep), var(--paper) 30%, var(--paper) 70%, var(--paper-deep));
  }
  #app { box-shadow: 0 0 60px rgba(40,30,15,0.06); }
}