/* Grantee · Field: phone-first field mode (#field, #field/:ppn).
   One column at phone width; on a desk-width screen the same column sits beside the route map.
   Sunlight and night use: body text 15 px, ink on surface, 44 px+ targets everywhere. */

body.is-field .top, body.is-field .viewas { display: none; }
body.is-field.is-field #page { top: 0; background: var(--canvas); }

.fmode { min-height: 100%; font-size: 15px; line-height: 1.45; color: var(--ink); }
.fmode h1, .fmode h2 { margin: 0; }
.fmode p { margin: 0; }
.fmode [hidden] { display: none !important; }
.fmode .row-lbl { display: block; font-size: 12.5px; color: var(--graphite); letter-spacing: .01em; }

/* ── the simplified field bar ── */
.f-top {
  position: sticky; top: 0; z-index: 6; height: 56px; display: flex; align-items: center; gap: 6px;
  padding: 0 8px 0 10px; background: var(--surface); border-bottom: 1px solid var(--rule);
}
.f-mark { width: 44px; height: 44px; justify-content: center; border-radius: 8px; }
.f-mark .m-sm { display: block; }
.f-day { display: flex; align-items: baseline; gap: 0; font-size: 15px; white-space: nowrap; min-width: 0; }
.f-day b { font-weight: 600; font-size: 15px; }
.f-day span { color: var(--graphite); }
.f-day .f-dot { margin: 0 6px; }
.f-me { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.f-me .ini { width: 30px; height: 30px; }
.f-top .iconbtn { width: 44px; height: 44px; }
.f-desk {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--rule-strong); text-decoration: none; font-weight: 600; font-size: 13.5px; color: var(--ink);
}
.f-desk:hover { background: var(--hover); }

/* ── body: one column, the map beside it at desk width ── */
.f-body { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); min-height: calc(100vh - 56px); }
.f-col { min-width: 0; padding: 20px 20px 56px; background: var(--canvas); border-right: 1px solid var(--rule); }
.f-map {
  position: sticky; top: 56px; height: calc(100vh - 56px); overflow: hidden;
  background: var(--canvas); isolation: isolate; user-select: none;
}

/* ── the map ── */
.fm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fm-p { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fm-p.on { fill: color-mix(in srgb, var(--ink) 10%, var(--surface)); stroke: var(--ink); stroke-width: 1.5; }
.fm-p.is-act { fill: color-mix(in srgb, var(--ink) 24%, var(--surface)); stroke-width: 2.5; }
.fm-st { fill: var(--graphite); font-family: var(--sans); font-weight: 600; letter-spacing: .08em; font-stretch: 75%; paint-order: stroke; stroke: var(--canvas); stroke-width: .6px; }
.fm-route { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; vector-effect: none; opacity: .75; }
/* route pins: the 18 px clipped-corner frame. Current stop ink, visited green, the rest outlined */
.pin { position: relative; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; }
.pin svg { position: absolute; inset: 0; overflow: visible; }
.pin path { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.pin b { position: relative; font: 500 10px/1 var(--mono); color: var(--ink); }
.pin.is-current path { fill: var(--ink); }
.pin.is-current b { color: var(--on-ink); }
.pin.is-visited path { fill: var(--green); stroke: var(--green); }
.pin.is-visited b { color: var(--on-ink); }
.fm-mk {
  position: absolute; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center;
  text-decoration: none; border-radius: 8px;
}
.fm-mk .pin { transform: scale(1.22); transition: transform 160ms var(--ease); }
.fm-mk .pin svg { filter: drop-shadow(0 1px 1.5px rgba(22,24,29,.25)); }
.fm-mk.is-act .pin { transform: scale(1.5); }
.fm-mk:hover .pin { transform: scale(1.36); }
.fm-mk.is-act:hover .pin { transform: scale(1.5); }
.fm-mk:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.fm-here { position: absolute; z-index: 1; width: 0; height: 0; }
.fm-here i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--surface), 0 0 0 12px color-mix(in srgb, var(--ink) 12%, transparent); }
.fm-cap {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; padding: 4px 7px; border-radius: 3px;
  background: var(--ink); color: var(--on-ink); font: 500 11px/1.2 var(--mono);
}

/* ── route header ── */
.f-hd { margin-bottom: 16px; }
.f-hd h1 { font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -.015em; }
.f-hd p { color: var(--graphite); font-size: 13.5px; margin-top: 4px; }
.f-prog { display: flex; align-items: center; gap: 10px; margin-top: 10px !important; color: var(--ink) !important; font-weight: 600; font-size: 13.5px !important; }
/* one tick per stop, echoing the AFN tick strip on the mark */
.f-ticks { display: inline-flex; gap: 4px; }
.f-ticks i { width: 2px; height: 14px; background: var(--rule-strong); }
.f-ticks i.on { background: var(--ink); }

/* ── stop cards ── */
.stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stop { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 14px 14px; }
.stop.next { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.stop.done { background: color-mix(in srgb, var(--surface) 70%, var(--canvas)); }
.s-hd { display: flex; align-items: flex-start; gap: 12px; }
.s-n { margin: 2px 5px 0; }
.s-ad { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.s-open { font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; text-decoration: none; color: var(--ink); }
.s-open::after { content: ""; position: absolute; inset: 0; border-radius: 10px; z-index: 0; }
.s-open:focus-visible { outline: none; }
.s-open:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 2px; }
.s-dist { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--graphite); font-size: 12.5px; }
.s-dist b { color: var(--ink); font-weight: 600; }
.s-st { flex: none; margin-top: 3px; }
.s-st .st, .f-meta .st { font-size: 12.5px; }
.f-unres { width: 10px; height: 10px; flex: none; border: 1.5px dashed var(--graphite); }
.st-unresolved { display: inline-flex; align-items: center; gap: 6px; color: var(--graphite); font-weight: 500; white-space: nowrap; }
.s-title { margin: 12px 0 0 40px; font-size: 13.5px; line-height: 1.5; }
.s-name { font-weight: 600; font-size: 15px; margin-right: 4px; }
.s-name.mono { font-weight: 500; font-size: 13.5px; }
.stop .prov, .stop .f-tel, .stop a.prov { position: relative; z-index: 1; }
.stop .f-verdict { margin: 12px 0 0 40px; }
.stop .f-call, .stop .f-nocall { margin-left: 40px; }
.s-log { margin: 10px 0 0 40px !important; font-size: 12.5px; color: var(--graphite); }
.s-log b { color: var(--ink); font-weight: 600; }

/* ── can I knock? ── */
.f-verdict { display: flex; align-items: flex-start; gap: 12px; }
.f-tag {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: 3px;
  font: 700 13.5px/1 var(--sans); font-stretch: 75%; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  border: 1.5px solid var(--ink); color: var(--ink); background: var(--surface);
}
.t-ok .f-tag { background: var(--ink); color: var(--on-ink); }
.t-tenant .f-tag { position: relative; overflow: hidden; }
.t-estate .f-tag { border-style: dashed; }
.f-verdict p { min-width: 0; font-size: 13.5px; line-height: 1.4; padding-top: 4px; }
.f-verdict p b { display: block; font-weight: 600; }
.f-verdict p span { display: block; color: var(--graphite); margin-top: 2px; }
.f-verdict.compact { flex-direction: column; gap: 6px; }
.f-verdict.compact p { padding-top: 0; }

/* ── the released owner number ── */
.f-call { margin-top: 12px; }
.f-tel {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 8px;
  background: var(--ink); color: var(--on-ink); text-decoration: none; font-family: var(--sans); text-transform: none; letter-spacing: 0;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}
.f-tel > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.f-tel b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-tel .mono { font-size: 15px; letter-spacing: 0; }
.f-tel:hover { background: color-mix(in srgb, var(--ink) 86%, var(--surface)); }
.f-tel:active { transform: translateY(1px); }
.f-tel:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.f-call.big .f-tel { min-height: 60px; }
.f-call.big .f-tel .mono { font-size: 15px; font-weight: 500; }
.f-gate { margin-top: 6px !important; font-size: 12.5px; color: var(--graphite); }
.f-nocall { margin-top: 10px !important; font-size: 13.5px; color: var(--graphite); }

/* ── the field card ── */
.f-card-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -6px 0 10px; }
.f-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 8px; margin-left: -8px; border-radius: 8px; font-weight: 600; text-decoration: none; color: var(--ink); }
.f-back:hover { background: var(--hover); }
.f-card-nav .quiet { font-size: 13.5px; color: var(--graphite); }
.f-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.f-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--canvas); overflow: hidden; }
.f-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-photo .cap { position: absolute; left: 12px; bottom: 10px; padding: 3px 6px; border-radius: 3px; background: var(--ink); color: var(--on-ink); font: 500 11px/1.2 var(--mono); }
.f-photo.plate { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--rule); }
.f-photo.plate svg { width: 100%; height: 100%; display: block; }
.f-photo .pl-n { fill: none; stroke: var(--rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.f-photo .pl-s { fill: color-mix(in srgb, var(--ink) 9%, transparent); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.f-photo .north { position: absolute; right: 14px; bottom: 10px; font: 500 11px/1 var(--mono); color: var(--graphite); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.f-photo .north::before { content: ""; width: 1.5px; height: 14px; background: var(--graphite); }
.f-head { padding: 16px 16px 4px; }
.f-head h1 { font-size: 24px; line-height: 1.12; font-weight: 600; letter-spacing: -.015em; }
.f-city { color: var(--graphite); margin-top: 3px !important; font-size: 13.5px; }
.f-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px !important; }

.f-sec { margin: 12px 16px 0; padding: 16px 0 4px; border-top: 1px solid var(--rule); }
.f-sec h2 { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.f-sec .muted { font-size: 13.5px; }

.f-occ { padding-bottom: 10px; }
.f-occ-n { display: block; margin-top: 2px; }
.f-occ .name { font-size: 15px; font-weight: 500; color: var(--graphite); text-decoration-thickness: 1.5px; }
.f-occ.struck .name { text-decoration: line-through; }
.f-src { display: flex; margin-top: 2px; }
.f-gr { padding: 10px 0 14px; border-top: 1px dashed var(--rule-strong); }
.f-occ + .f-gr { margin-top: 0; }
.f-who > h2 + .f-gr { border-top: 0; padding-top: 0; }
.f-gr-n { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }
.f-gr-n.mono { font-size: 15px; font-weight: 500; }
.f-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.f-roll { display: block; margin-top: 8px; font-size: 13.5px; color: var(--graphite); }
.f-who .f-verdict { padding: 14px 0 2px; border-top: 1px solid var(--rule); flex-direction: column; gap: 8px; }
.f-who .f-verdict p { padding-top: 0; font-size: 15px; }
.f-who .f-verdict .f-tag { height: 34px; font-size: 15px; }
.f-rel { position: relative; }
.f-imp { margin: 14px 0 4px; }
.f-imp .impression b { font-size: 15px; }

/* outcome + reason chips: native radios, big targets */
.f-outs { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.f-outs legend.field-lbl { padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.f-chip { position: relative; display: inline-flex; }
.f-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--rule-strong); background: var(--surface); font-weight: 500; font-size: 13.5px; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.f-chip span:hover { background: var(--hover); }
.f-chip input:checked + span { background: var(--ink); color: var(--on-ink); border-color: var(--ink); font-weight: 600; }
.f-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.fmode .field-lbl { font-size: 12.5px; margin-top: 2px; }
.fmode .input { font-size: 16px; /* 16 keeps iOS from zooming the field */ min-height: 48px; padding: 10px 12px; border-radius: 8px; }
.fmode textarea.input { resize: vertical; line-height: 1.4; }
.fmode .input::placeholder { color: var(--quiet); }
.f-note { margin-bottom: 12px; }

.f-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.f-photos:empty { display: none; }
.f-photos { margin-bottom: 12px; }
.f-pv { position: relative; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); }
.f-pv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-pv button { position: absolute; top: 0; right: 0; width: 32px; height: 32px; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); border-bottom-left-radius: 8px; }
.f-log-act { display: flex; gap: 10px; flex-wrap: wrap; }
.f-log-act .btn { height: 50px; font-size: 15px; padding: 0 18px; flex: 1 1 140px; }
.f-add { position: relative; overflow: hidden; cursor: pointer; }
.f-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.f-add:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.f-err { margin-top: 10px !important; color: var(--needs); font-size: 13.5px; font-weight: 600; }
.f-saved { display: flex; align-items: center; gap: 7px; margin-top: 12px !important; font-size: 12.5px; color: var(--graphite); }
.f-saved[hidden] { display: none; }
.f-col > .f-saved { margin-top: 16px !important; justify-content: center; }

/* condition: a ruled list of clipped-square checkboxes */
.f-togs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.f-togs li { border-bottom: 1px solid var(--rule); }
.f-tog {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 100%;
  min-height: 48px; padding: 0 4px; text-align: left; color: var(--ink); transition: background-color 160ms var(--ease);
}
.f-tog:hover { background: var(--hover); }
.f-tog:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.f-tog .t { font-weight: 500; font-size: 15px; }
.f-tog .s { font-size: 12.5px; color: var(--graphite); text-align: right; }
.f-box { display: block; overflow: visible; }
.f-box .b { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1.5; transition: fill 160ms var(--ease), stroke 160ms var(--ease); }
.f-box .t { fill: none; stroke: var(--on-ink); stroke-width: 1.5; stroke-linecap: square; stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset 160ms var(--ease); }
.f-tog[aria-checked="true"] .b { fill: var(--ink); stroke: var(--ink); }
.f-tog[aria-checked="true"] .t { stroke-dashoffset: 0; }
.f-tog[aria-checked="true"] .s { color: var(--ink); font-weight: 500; }

/* outcome: one row of five stamp-face toggles (the KNOCK face): condensed caps in a 1 px clipped ink frame */
.f-knock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.f-k { position: relative; display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.f-k input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-k span {
  --c: 4px; position: relative; isolation: isolate; flex: 1; display: grid; place-items: center; height: 36px; padding: 0 2px;
  font: 600 11px/1 var(--sans); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-align: center;
  color: var(--ink); background: var(--ink);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.f-k span::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--surface); transition: background-color 160ms var(--ease);
  clip-path: polygon(3.6px 0, calc(100% - 3.6px) 0, 100% 3.6px, 100% calc(100% - 3.6px), calc(100% - 3.6px) 100%, 3.6px 100%, 0 calc(100% - 3.6px), 0 3.6px);
}
.f-k:hover span::before { background: var(--hover); }
.f-k input:checked + span { color: var(--on-ink); }
.f-k input:checked + span::before { background: var(--ink); }
.f-k input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; clip-path: none; }

/* VISITED: an ink impression, done by us */
.f-visited { margin: -2px 0 14px; scroll-margin-top: 72px; }
.f-vimp { scroll-margin-top: 72px; }
.f-vimp {
  --c: 4px; position: relative; display: inline-block; padding: 5px 9px 4px; color: var(--ink); opacity: .92;
  font: 700 13.5px/1 var(--sans); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-1.5deg); transform-origin: 20% 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) top / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) bottom / 100% 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left / 1.5px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) right / 1.5px 100% no-repeat;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.f-vimp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .9px), var(--ink) calc(50% - .9px), var(--ink) calc(50% + .9px), transparent calc(50% + .9px)) top left / var(--c) var(--c) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - .9px), var(--ink) calc(50% - .9px), var(--ink) calc(50% + .9px), transparent calc(50% + .9px)) top right / var(--c) var(--c) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - .9px), var(--ink) calc(50% - .9px), var(--ink) calc(50% + .9px), transparent calc(50% + .9px)) bottom left / var(--c) var(--c) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .9px), var(--ink) calc(50% - .9px), var(--ink) calc(50% + .9px), transparent calc(50% + .9px)) bottom right / var(--c) var(--c) no-repeat;
}
.f-vimp.land { animation: f-imp 220ms cubic-bezier(.34, 1.4, .64, 1) both, f-ink 160ms linear both; }
@keyframes f-imp { from { transform: scale(1.12) rotate(-3deg); } to { transform: rotate(-1.5deg); } }
@keyframes f-ink { from { opacity: 0; } to { opacity: .92; } }
@media (prefers-reduced-motion: reduce) {
  .f-vimp.land { animation: f-ink 150ms linear both; }
  .f-box .t, .fm-mk .pin { transition: none; }
}

/* report a mismatch */
.f-mis > .muted { margin-bottom: 12px !important; }
.f-mis-open { width: 100%; height: auto !important; min-height: 52px; white-space: normal; text-align: left; justify-content: flex-start; padding: 10px 14px; font-size: 15px; }
.f-mis-form { display: grid; gap: 6px; }
.f-mis-form .input { margin-bottom: 8px; }
.f-mis.sent { }
.f-mis.sent p { margin-top: 4px; font-size: 13.5px; }
.f-mis.sent p b { font-weight: 600; }
.f-mis.sent h2 { display: flex; align-items: center; gap: 8px; }
.f-mis.sent h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--needs); flex: none; }
.f-mis.sent .st { font-size: 12.5px; }

/* on this phone */
.f-hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.f-hist li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; font-size: 13.5px; align-items: start; }
.f-hist li > .mono { color: var(--graphite); font-size: 12.5px; padding-top: 1px; }
.f-hist li b { font-weight: 600; display: block; }
.f-hist li div span { display: block; color: var(--graphite); }
.f-hist .quiet { font-size: 12.5px; color: var(--graphite); }
.f-th { display: flex !important; gap: 6px; margin-top: 6px; }
.f-th img { width: 64px; height: 48px; object-fit: cover; border-radius: 3px; border: 1px solid var(--rule); }

.f-next {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px;
  margin: 16px 16px 0; padding: 12px 14px; min-height: 60px; border-radius: 10px; border: 1px solid var(--rule-strong); text-decoration: none; color: var(--ink);
}
.f-next .quiet { font-size: 12.5px; color: var(--graphite); }
.f-next b { font-weight: 600; font-size: 15px; grid-row: 2; }
.f-next svg { grid-row: 1 / span 2; grid-column: 2; }
.f-next:hover { background: var(--hover); }
.f-desk-link { margin: 8px 16px 16px !important; }
.f-empty { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; display: grid; gap: 10px; justify-items: start; }
.f-empty h1 { font-size: 21px; font-weight: 600; }

/* ── phone: one column, the map is a strip at the top of the route ── */
@media (max-width: 960px) {
  .f-body { display: flex; flex-direction: column; min-height: 0; }
  .f-col { padding: 16px 16px 48px; border-right: 0; }
  .f-map { position: relative; top: auto; order: -1; height: 188px; border-bottom: 1px solid var(--rule); }
  .fmode[data-view="stop"] .f-map { display: none; }
  .fm-cap { display: none; }
  .f-map { height: 208px; }
  .f-col { width: 100%; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .f-day, .f-day b { font-size: 13.5px; }
  .f-me .f-me-n { display: none; }
  .f-desk { padding: 0 10px; }
  .f-hd h1 { font-size: 21px; }
  .f-sec { margin: 10px 14px 0; }
  .f-head { padding: 14px 14px 2px; }
  .f-head h1 { font-size: 21px; }
  .f-next { margin: 14px 14px 0; }
  .f-desk-link { margin: 6px 14px 14px !important; }
}
@media (max-width: 380px) {
  .s-title, .stop .f-verdict, .stop .f-call, .stop .f-nocall, .s-log { margin-left: 0 !important; }
}