/* Distanziometro — app smartphone */

html, body { height: 100%; }
body { font-size: 16px; overscroll-behavior-y: contain; }
.app { min-height: 100%; display: flex; flex-direction: column; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.top {
  position: sticky; top: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--sheet); border-bottom: 1px solid var(--rule);
}
.top .t { display: flex; gap: 10px; align-items: center; font-weight: 850; font-size: 17px; }
.top img { width: 28px; height: 28px; }
.top .st { font-size: 12.5px; color: var(--graphite); text-align: right; line-height: 1.2; }
.view { padding: 14px 16px 24px; flex: 1; }
.view h1 { font-size: 22px; }
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--sheet); border-top: 1px solid var(--rule-strong);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 9px;
  color: var(--graphite); text-decoration: none; font-size: 12px; font-weight: 700;
}
.tabs a svg { width: 22px; height: 22px; }
.tabs a.on { color: var(--catasto); box-shadow: inset 0 3px 0 var(--catasto); }
.mmap { height: 42vh; min-height: 240px; border-bottom: 1px solid var(--rule-strong); margin: -14px -16px 12px; }
.bigbtn { width: 100%; justify-content: center; min-height: 48px; font-size: 16px; }
.btnrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.results button.res { width: 100%; text-align: left; justify-content: space-between; margin-top: 6px; font-weight: 500; }
.results .prec { font-size: 12px; color: var(--graphite); white-space: nowrap; }
.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.card .meta { font-size: 13px; color: var(--graphite); }
.photos { display: flex; gap: 8px; flex-wrap: wrap; }
.photos img { width: 92px; height: 70px; object-fit: cover; border-radius: 2px; border: 1px solid var(--rule); }
.center { text-align: center; }
.pairbox { max-width: 460px; margin: 6vh auto 0; }
.pairbox h1 { font-size: 24px; }
.modal { max-height: 88vh; overflow: auto; }
.modal-back { padding: 3vh 10px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 14.5px; }
.kv dt { color: var(--graphite); font-weight: 600; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.scanner video { width: 100%; border-radius: var(--radius); background: #000; }

.pairbox details { margin-bottom: 14px; }