:root {
  --navy: #0b1f3a;
  --ink: #1d2733;
  --muted: #5b6672;
  --line: #d9dee5;
  --paper: #ffffff;
  --wash: #f3f5f8;
  --amber: #e0851c;
  --amber-ink: #8a4b00;
  --red: #c8102e;
  --tunnel: #2d4f8a;
  --done: #8a94a0;
  --work: #6d6d6d;
  --focus: #1a73e8;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--wash);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
a { color: var(--navy); }
h1, h2 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.25rem; }
h2 { font-size: 0.95rem; color: var(--navy); margin-bottom: 0.4rem; }
p { margin: 0 0 0.6rem; }

.top {
  background: var(--navy);
  color: #fff;
  padding: 0.8rem 1rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top__sub { margin: 0.15rem 0 0; color: #c9d3e2; font-size: 0.9rem; }
.top__status { margin: 0; font-size: 0.8rem; color: #c9d3e2; }
.top__status--warn { color: #ffd38a; }

.layout { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mapwrap { position: relative; height: 52vh; min-height: 320px; }
#map { position: absolute; inset: 0; background: #e7ecf2; }
.panel { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; order: 2; min-width: 0; }
.layout, .panel, .result { overflow-wrap: anywhere; }

.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.field input {
  min-width: 0; width: 100%;
  font: inherit; font-size: 1.05rem; color: var(--ink);
  padding: 0.6rem 0.7rem; border: 1px solid #b9c2cc; border-radius: 8px; background: #fff;
  text-transform: uppercase;
}
#house { text-transform: none; }
.field input:focus { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); border-color: var(--focus); }
.form button {
  grid-column: 1 / -1;
  font: inherit; font-weight: 650; font-size: 1.02rem; color: #fff;
  background: var(--navy); border: 0; border-radius: 8px; padding: 0.75rem 1rem; cursor: pointer;
}
.form button:disabled { opacity: 0.6; cursor: wait; }
.form button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.form__hint { grid-column: 1 / -1; margin: 0; font-size: 0.78rem; color: var(--muted); }

.result { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem; }
.result--error h2 { color: var(--red); }
.result h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.result .big { font-size: 1.6rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.result dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.8rem; margin: 0.4rem 0 0.6rem; font-size: 0.95rem; }
.result dt { color: var(--muted); }
.result dd { margin: 0; }
.result .note { font-size: 0.82rem; color: var(--muted); margin: 0.3rem 0 0; }
.result ul.works { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.result ul.works li { margin-bottom: 0.25rem; }
.result .works-meta { color: var(--muted); font-size: 0.82rem; }

.key ul, .machines ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.sw { display: inline-block; width: 1.1rem; height: 0.9rem; vertical-align: -0.15rem; margin-right: 0.45rem; border-radius: 3px; }
.sw--tbm { background: var(--amber); border-radius: 50%; width: 0.9rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 30%, transparent); }
.sw--done { background: var(--done); border-radius: 50%; width: 0.9rem; }
.sw--active { background: linear-gradient(var(--amber), var(--amber)) center / 100% 5px no-repeat; }
.sw--tunnel { background: linear-gradient(var(--tunnel), var(--tunnel)) center / 100% 4px no-repeat; }
.sw--work { background: var(--work); width: 0.7rem; height: 0.7rem; border-radius: 2px; }
.sw--home { background: var(--red); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); width: 0.85rem; height: 0.85rem; }

.machines li { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.7rem; }
.machines .m-name { font-weight: 650; color: var(--navy); }
.machines .m-meta { color: var(--muted); font-size: 0.84rem; }
.machines button { font: inherit; font-size: 0.82rem; color: var(--navy); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 0.15rem 0.5rem; margin-left: 0.4rem; cursor: pointer; }

.about { font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.8rem; }
.about p { margin-bottom: 0.5rem; }

/* Leaflet markers */
.tbm-icon { position: relative; width: 22px; height: 22px; }
.tbm-icon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--amber); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.tbm-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--amber); opacity: 0.7; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tbm-icon::after { animation: none; } }
.home-icon { width: 18px; height: 18px; background: var(--red); border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.work-icon { width: 9px; height: 9px; background: var(--work); border: 1px solid #fff; border-radius: 2px; opacity: 0.85; }
.leaflet-popup-content { font-size: 0.9rem; line-height: 1.35; }
.leaflet-popup-content b { color: var(--navy); }
.leaflet-container { font-family: inherit; }
.dist-label { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font-size: 0.8rem; font-weight: 650; color: var(--navy); white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

@media (min-width: 900px) {
  .layout { flex-direction: row; }
  .panel { order: 0; width: 420px; flex: 0 0 420px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--wash); }
  .mapwrap { flex: 1; height: auto; min-height: 0; }
}