/* The customer's report page (r.html): one reading column, a real map on top, prints to A4. */
.rp { max-width: 960px; margin: 0 auto; gap: 56px; padding-top: 0; }
/* The head: a field in the brand's olive with the address set large and the tally beneath it */
.rp-hero { width: 100vw; margin-left: calc(50% - 50vw); background: var(--field); color: var(--field-ink); }
.rp-hero-in { max-width: 960px; margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gut) clamp(32px, 4vw, 56px); display: grid; gap: 20px; }
.rp-hero h1 { font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); color: var(--field-ink); letter-spacing: -0.03em; hyphens: manual; }
/* A long street name (Rinkebysvängen) at 40 px was wider than a 360 px phone and gave the page a sideways scroll:
   smaller on phones, and a name that still doesn't fit breaks instead of pushing the grid out. */
.rp-hero-in { grid-template-columns: minmax(0, 1fr); }
/* The full-bleed hero is 100vw, which counts a classic scrollbar (Windows desktop): clip that overhang instead of scrolling. */
html { overflow-x: clip; }
.rp-hero h1 { overflow-wrap: break-word; }
@media (max-width: 480px) { .rp-hero h1 { font-size: clamp(2rem, 1rem + 5vw, 2.5rem); } }
.rp-hero .lead { max-width: 48ch; color: var(--field-ink); }
.rp-hero .r-facts { color: var(--field-muted); }
.rp-hero .tally { margin-top: 12px; }
.rp-hero .btn { background: var(--field-ink); color: var(--field); justify-self: start; }
.rp .row { background: var(--paper); border-bottom: 0; padding: 18px 20px; }
.rp .rows { gap: 6px; }
.rp .group { gap: 16px; }
.rp .asks { border: 0; background: var(--paper); }
/* "Det här bör du titta närmare på": the yellow points first, each a link down to its card. */
.rp-overview { display: grid; gap: 10px; background: var(--paper); padding: clamp(18px, 3vw, 28px); border-left: 6px solid var(--accent); }
.rp-overview h2 { font-size: var(--step-lead); font-family: var(--text); font-weight: 700; letter-spacing: 0; }
.rp-overview p { font-size: var(--step-lead); line-height: 1.45; max-width: 60ch; }
@media print { .rp-overview { padding: 8px 12px; } .rp-overview p { font-size: 12pt; } }
.rp-top { display: grid; gap: 12px; }
.rp-top h2 { font-size: var(--step-lead); font-family: var(--text); font-weight: 700; letter-spacing: 0; }
.rp-top ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.rp-top a { display: grid; gap: 2px; padding: 12px 16px; background: var(--warn-bg); color: var(--ink); text-decoration: none; border-left: 6px solid var(--warn-mid); }
.rp-top a:hover b { text-decoration: underline; }
.rp-top a span { color: var(--warn); }
@media print { .rp-top a { padding: 6px 10px; } }
.rp .asks-bid { background: var(--field); color: var(--field-ink); border: 0; }
.rp .asks-bid h3 { color: var(--field-ink); }
.rp-legend li { background: var(--paper); }

/* Map */
.rp-mapblock { display: grid; gap: 12px; }
.rp-figure { margin: 0; background: var(--map); }
.rp-map { height: clamp(360px, 62vh, 620px); background: var(--map); position: relative; }
.rp-map-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); }
.rp-key { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px 12px; font-size: var(--step-small); color: var(--muted); }
.rp-key span { display: inline-flex; align-items: center; gap: 8px; }
.rp-key i { display: inline-block; flex: none; width: 16px; height: 16px; }
.k-home { border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); width: 12px !important; height: 12px !important; }
.k-ring { border-radius: 50%; border: 1.5px solid var(--ink); opacity: .7; }
.k-plan { background: color-mix(in srgb, var(--warn-mid) 22%, transparent); border: 2px solid var(--warn-mid); }
.k-approx { border-radius: 50%; border: 2px dashed var(--warn-mid); }
.rp-hint { margin-top: 2px; }

.rp-legend { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px; }
.rp-legend li { background: var(--surface); padding: 8px 12px 10px; display: grid; gap: 2px; align-content: start; }
.rp-legend a { color: var(--muted); justify-self: start; padding-left: 26px; }
.rp-plan-btn { all: unset; cursor: pointer; display: flex; gap: 10px; align-items: baseline; font-size: 1rem; line-height: 1.35; min-height: 28px; }
.rp-plan-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.rp-plan-btn:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rp-plan-btn[disabled] { cursor: default; }
.rp-swatch { flex: none; width: 14px; height: 14px; transform: translateY(2px); background: color-mix(in srgb, var(--warn-mid) 22%, transparent); border: 2px solid var(--warn-mid); }
.rp-plan-btn.approx .rp-swatch { border-style: dashed; border-radius: 50%; }

/* Leaflet in the house style */
.leaflet-container { font: 400 0.9375rem/1.4 var(--text); background: var(--map); }
.leaflet-container a { color: var(--accent); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--paper); color: var(--ink); border-color: var(--surface-2); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--paper) 85%, transparent) !important; color: var(--muted); }
.leaflet-control-attribution a { color: var(--ink); }
.rp-tip, .rp-home-tip { background: var(--paper); color: var(--ink); border: 0; border-radius: 0; box-shadow: 0 2px 10px rgb(0 0 0 / .18); font-size: .9375rem; padding: 6px 10px; }
.rp-tip { max-width: 260px; white-space: normal; }
.rp-home-tip { font-weight: 600; }
.leaflet-tooltip-top.rp-tip::before { border-top-color: var(--paper); }
.leaflet-tooltip-right.rp-home-tip::before { border-right-color: var(--paper); }
.rp-popup .leaflet-popup-content-wrapper, .rp-popup .leaflet-popup-tip { background: var(--paper); color: var(--ink); border-radius: 0; }
.rp-popup .leaflet-popup-content { margin: 14px 16px; }
.rp-pop { display: grid; gap: 6px; font-size: 1rem; line-height: 1.35; }
.rp-pop .btn { margin-top: 4px; }
.rp-home span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 4px solid var(--paper); box-shadow: 0 1px 6px rgb(0 0 0 / .35); }
.rp-ring-label { background: var(--paper); color: var(--ink); font: 600 .8125rem/1 var(--text); padding: 3px 6px; white-space: nowrap; transform: translate(-50%, -50%); }
.rp-plan { cursor: pointer; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.5); }
}

/* Jump from the map */
.row { scroll-margin-top: 20px; }
.row:focus { outline: none; }
.row.hl { box-shadow: 0 0 0 3px var(--warn-mid); animation: rpPulse 1.2s var(--ease) 2; }
.src a.hl { background: var(--warn-bg); color: var(--warn); padding: 0 3px; }
@keyframes rpPulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--warn-mid) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .row.hl { animation: none; } }

.rp-legal { max-width: 68ch; }
.src a { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .rp { padding-top: 12px; gap: 32px; }
  .rp-map { height: 420px; }
  .rp-legend a { padding-left: 24px; }
}

/* A4: Arkiv → Skriv ut → Spara som PDF */
@page { size: A4; margin: 14mm 14mm 16mm; }
@media print {
  :root, :root:not([data-theme="light"]) {
    --bg: #fff; --surface: #f1f0eb; --surface-2: #e2e0d9; --paper: #fff;
    --ink: #2f3a0c; --muted: #535d34; --accent: #38450f; --accent-ink: #f3f2ec;
    --warn: #7a4600; --warn-bg: #f1dc9f; --warn-mid: #d29a1e; --info: #2b4e6c; --info-bg: #d5dee3; --info-mid: #5f84a3;
    --ok: #3a5f22; --ok-bg: #d3dcc0; --ok-mid: #6f9150; --na: #57574d; --na-bg: #d9d7cf; --na-mid: #c4c1b6; --map: #e6e4dc;
    color-scheme: light;
  }
  html { font-size: 10pt; }
  body { background: #fff; font-size: 10pt; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-hero { width: auto; margin: 0; background: none; color: var(--ink); }
  .rp-hero-in { padding: 0; }
  .rp-hero h1, .rp-hero .lead { color: var(--ink); }
  .bar, .foot, .rp-actions, .rp-hint, .leaflet-control-zoom, .leaflet-popup, .leaflet-tooltip:not(.rp-home-tip) { display: none !important; }
  .leaflet-tile-pane { filter: none !important; }
  .rp { max-width: none; padding: 0; gap: 7mm; }
  .rp-head h1 { font-size: 24pt; }
  .lead { font-size: 13pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 12.5pt; }
  .rp-map { height: 110mm; }
  .rp-figure { margin: 0; break-inside: avoid; }
  .rp-legend { grid-template-columns: 1fr 1fr; }
  .rp-legend li { padding: 4px 8px; break-inside: avoid; }
  .rp-plan-btn { font-size: 9pt; min-height: 0; }
  .rp-legend a { font-size: 8.5pt; }
  .tally p { padding: 8px 10px; }
  .tally .n { font-size: 18pt; }
  .row { padding: 8px 10px; break-inside: avoid; }
  .row.hl { box-shadow: none; animation: none; }
  .group h3, .prose h2 { break-after: avoid; }
  .asks { padding: 12px 14px; break-inside: avoid; }
  a { text-decoration: none; }
}

/* "Var rapporten till hjälp?" under a visitor's own report. */
.rp-feedback { display: grid; gap: 12px; max-width: 62ch; margin: 40px 0 8px; padding: 20px; background: var(--paper); }
.rp-feedback h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.fb-btns { display: flex; gap: 8px; }
.fb-btns .btn[aria-pressed="false"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.fb-more { display: grid; gap: 8px; justify-items: start; }
.fb-more label { font-weight: 600; }
.fb-more textarea { width: 100%; font: inherit; padding: 10px 12px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); resize: vertical; }
@media print { .rp-feedback { display: none; } }

/* Visningsläget (site/assets/visit.js): the questions as a checklist, full screen on a phone. */
.visit-open { justify-self: start; margin-top: 4px; }
.visit { width: min(640px, 100vw); max-width: 100vw; max-height: 100dvh; margin: auto; padding: 0; border: 0; background: var(--bg); color: var(--ink); }
.visit::backdrop { background: rgb(20 24 16 / .6); }
.visit-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 20px 20px 12px; background: var(--field); color: var(--field-ink); }
.visit-head h2 { color: var(--field-ink); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem); }
.visit-kicker { font-size: var(--step-small); color: var(--field-muted); }
.visit-close { font: 600 1rem var(--text); background: var(--field-ink); color: var(--field); border: 0; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.visit-progress { padding: 14px 20px 0; font-weight: 600; }
.visit-list { list-style: none; margin: 0; padding: 12px 20px; display: grid; gap: 12px; }
.visit-list li { background: var(--paper); padding: 14px 16px; display: grid; gap: 10px; border-left: 6px solid var(--surface-2); }
.visit-list li.done { border-left-color: var(--ok-mid); }
.visit-q { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 1.1875rem; line-height: 1.4; cursor: pointer; }
.visit-q input { width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--ok); }
.visit-list li.done .visit-q span { color: var(--muted); }
.visit textarea { width: 100%; min-height: 3.2em; font: 400 1.0625rem/1.4 var(--text); padding: 10px 12px; border: 2px solid var(--surface-2); background: var(--bg); color: var(--ink); resize: vertical; border-radius: 0; }
.visit textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.visit-more { margin: 4px 20px 0; padding: 14px 16px; background: var(--surface); display: grid; gap: 8px; }
.visit-more h3 { font-size: var(--step-body); }
.visit-more ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.visit-note { padding: 14px 20px 28px; color: var(--muted); }
@media (max-width: 640px) { .visit { width: 100vw; height: 100dvh; max-height: none; } }
@media print { .visit-open, .visit { display: none !important; } }

/* Bevaka adressen (site/assets/watch.js), on personal reports only: a field like the sign-up for Veckans planer. */
.rp-watch { background: var(--field); color: var(--field-ink); padding: clamp(20px, 3vw, 32px); display: grid; gap: 12px; }
.rp-watch h2 { color: var(--field-ink); font-size: var(--step-head); }
.rp-watch p { max-width: 60ch; color: var(--field-muted); }
.rp-watch .watch-form { display: grid; gap: 12px; }
.rp-watch input[type="email"] { border-color: var(--field-ink); }
.rp-watch .btn { background: var(--field-ink); color: var(--field); }
.rp-watch .watch-msg { color: var(--field-ink); font-weight: 600; }
.rp-watch .watch-msg:empty { display: none; }
@media print { .rp-watch { display: none; } }

.rp-compare { font-weight: 600; }
@media print { .rp-compare { display: none; } }