/* Property Plan (shares the Land Finder's colors and base styles) */
.top-actions { display: flex; gap: 8px; }
.mobile-only { display: none; }
.panel { width: 420px; }
.mapwrap { position: relative; flex: 1; min-height: 300px; }
.mapwrap .map { position: absolute; inset: 0; height: auto; }

.addr { display: grid; grid-template-columns: 1fr 70px auto; gap: 6px; margin-bottom: 14px; }
.addr input, .addr button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--bg); color: var(--text); min-width: 0; }
.addr button { background: var(--accent); color: #fff; border: 0; cursor: pointer; }
.addr #addr-msg { grid-column: 1 / -1; }
.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }

.loading { margin: 14px 0 6px; font-weight: 600; }
.sources { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; color: var(--muted); }
.sources .ok { color: var(--accent); }
.sources .bad, .warn { color: var(--warn); }

section { border-top: 1px solid var(--line); margin-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
td, th { padding: 4px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.summary td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.soils th { font-weight: 600; color: var(--muted); font-size: 0.78rem; }
.soils .swatch { display: inline-block; margin-right: 4px; vertical-align: -2px; }

.item { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; }
.item.warnitem { border-color: var(--warn); }
.item-head { display: flex; align-items: center; gap: 8px; }
.item ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.86rem; line-height: 1.4; }
.item li { margin: 3px 0; }
.src { display: block; color: var(--muted); font-size: 0.74rem; }
.conf { margin: 6px 0 0; font-size: 0.82rem; font-style: italic; }
.tabs { display: flex; gap: 6px; margin: 8px 0; }
.tab { flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.compare { margin-bottom: 10px; }
.compare th, .compare td { text-align: center; }
.compare td:first-child { text-align: left; color: var(--muted); }
.compare .on { background: var(--accent-soft); font-weight: 600; }
.rule { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); }
.explain { background: var(--accent-soft); border-radius: var(--radius); padding: 10px 12px; font-size: 0.88rem; line-height: 1.45; }
.explain p { margin: 6px 0 0; }
.note { background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; font-size: 0.86rem; }
.inline { display: inline-flex; align-items: center; gap: 4px; margin: 6px 10px 0 0; }
.inline input[type=number] { width: 60px; padding: 2px 4px; }
blockquote { margin: 12px 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 0.88rem; line-height: 1.45; }
cite { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--muted); font-style: italic; }
.checks { padding-left: 18px; font-size: 0.86rem; line-height: 1.45; }

.layers summary { font-weight: 600; cursor: pointer; }
.layers { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.94); color: #1f2a1f; border-radius: var(--radius); padding: 8px 10px; font-size: 0.82rem; box-shadow: 0 1px 4px rgba(0,0,0,.2); max-width: 210px; }
.layers label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
.key { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #ddd; font-size: 0.74rem; }
.key span { display: flex; align-items: center; gap: 4px; }
.key i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.key i.dash { background: none; border-top: 2px dotted #c9a24a; height: 0; }
.map-disclaimer { position: absolute; bottom: 30px; right: 10px; background: rgba(26,32,44,.8); color: #fff; font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; }

.trace-bar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; background: var(--panel); color: var(--text); padding: 8px 10px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,.3); font-size: 0.88rem; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 20px); }
.trace-bar[hidden] { display: none; }
.trace-bar button { padding: 8px 12px; border-radius: 8px; font: inherit; cursor: pointer; }
#trace-done { background: var(--accent); color: #fff; border: 0; }
#trace-done:disabled { opacity: .5; }
.tracing .layers, .tracing .maplibregl-ctrl-attrib, .tracing .map-disclaimer { display: none; }
.tracing #map { cursor: crosshair; }

.print-only { display: none; }

@media (max-width: 760px) {
  .mobile-only { display: inline-block; }
  .brand-name { display: none; }
  .brand span { margin-left: 0; }
  .layout { flex-direction: column; }
  .mapwrap { order: -1; height: 52%; flex: none; min-height: 0; }
  .panel { order: 1; width: 100%; height: auto; flex: 1; min-height: 0; border-right: 0; border-top: 1px solid var(--line); }
  .map-big .mapwrap { height: 85%; }
  .layers { max-width: 170px; font-size: 0.78rem; padding: 6px 8px; }
  .map-disclaimer { bottom: 22px; right: 6px; left: 90px; font-size: 0.66rem; }
  .addr { grid-template-columns: 1fr 64px; }
  .addr button { grid-column: 1 / -1; }
}

@media print {
  @page { size: letter; margin: 0.4in; }
  html, body { height: auto; background: #fff; color: #000; }
  .topbar, .addr, .mapwrap, .link, .inline, #sources, .tabs { display: none !important; }
  .layout { display: block; height: auto; }
  .panel { width: auto; height: auto; overflow: visible; border: 0; padding: 0; }
  .print-only { display: block; margin-bottom: 10px; }
  #print-map { display: block; width: 100%; max-height: 6.6in; object-fit: contain; border: 1px solid #999; }
  .print-title { font-size: 16pt; font-weight: 700; margin-bottom: 4px; }
  .print-key { font-size: 8pt; margin-top: 4px; }
  .item, table, blockquote { break-inside: avoid; }
  .disclaimer { color: #000; }
}

/* "check the ground first" pause when a house or barn first appears */
.slowdown { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 1000; padding: 16px; }
.sd-box { background: var(--bg, #fff); color: var(--text, #1d2a1d); max-width: 460px; width: 100%; border-radius: 14px; padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.3); max-height: 90vh; overflow: auto; }
.sd-box h3 { margin: 0 0 8px; } .sd-box ul { padding-left: 18px; margin: 6px 0 10px; } .sd-box li { margin: 4px 0; }
.sd-btns { display: flex; gap: 8px; flex-wrap: wrap; } .sd-go { flex: 1; text-align: center; background: #2f6b3a; color: #fff; padding: 10px; border-radius: 9px; text-decoration: none; font-weight: 700; }
.sd-later { flex: 1; background: none; border: 1px solid #2f6b3a; color: #2f6b3a; padding: 10px; border-radius: 9px; font: inherit; font-weight: 700; cursor: pointer; }