/* Your Eyes in Sardinia: un solo foglio di stile per tutte le pagine (ingresso, Buy, Rent, Land, stima, privacy, 404).
   Ordine: variabili, base, impaginazione, testata, pulsanti, poi le sezioni nell'ordine della pagina, poi le pagine a parte.
   Caratteri: Newsreader per i testi, Martian Mono per numeri, prezzi ed etichette, Architects Daughter negli schizzi.
   Colori: --pen è il colore della parte (Buy rosso qui; Rent e Land in tema-2.css e tema-3.css); il nero solo per testo e disegni.
   29 ottobre: riordinato, le correzioni aggiunte in fondo nei giorni prima sono state fuse con le regole originali. */

:root {
  /* Movimento (skill animate-hairline §4): curve e tempi comuni a pagina e disegni */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* entrate e uscite dell'interfaccia */
  --ease-lift: cubic-bezier(0.32, 0.72, 0, 1);  /* la curva delle tessere Hairline */
  --t-press: 140ms;
  --t-ui: 200ms;
  --t-lift: 700ms;
  --t-reveal: 800ms;                             /* comparse delle sezioni, una volta per visita */
  --stagger: 70ms;                               /* tra le parti di una sezione */
  --paper: #fcfbf8;
  --paper-2: #f4f1ea;
  --ink: #1d1d1b;
  --ink-2: #57564f;
  --line: #c9c5ba;
  --pen: #c8102e;
  --map-mark: var(--pen); /* segni sulla mappa: Cagliari, Gennargentu, traghetti, posto cercato */
  --on-pen: #ffffff;
  --sheet: #ffffff;
  --highlight: #fff3c4;
  --garden: #e6e1d4;
  /* Dal colore della parte: righe chiare, tinta al passaggio, bande delle sezioni, titoli */
  --rule: color-mix(in srgb, var(--pen) 28%, var(--line));
  --pen-tint: color-mix(in srgb, var(--pen) 10%, var(--paper));
  --band: color-mix(in srgb, var(--pen) 9%, var(--paper));
  --pen-deep: color-mix(in srgb, var(--pen) 75%, #000);
  /* Fasce di viaggio sulla mappa: toni dell'inchiostro, dal più chiaro al più scuro */
  --free: #f0d3cf; /* zona senza costo di viaggio attorno a Cagliari: solo nella stima privata */
  --b1: #cdc8bc;
  --b2: #a29d92;
  --b3: #6c6961;
  --b4: #3b3a36;
  /* Segnaposto delle foto nei campioni */
  --hatch-1: #efebe4;
  --hatch-2: #f8f6f1;
  /* Disegni: coni delle foto, schizzi a matita su carta a quadretti */
  --cone: rgba(29,29,27,.12);
  --pencil: #3d3d39;
  --grid: #c9d6e6;
  --sketch-hatch: #8a8a83;

  --serif: "Newsreader", Georgia, serif;
  --mono: "Martian Mono", ui-monospace, monospace;

  /* Gerarchia dei testi, dal più grande al più piccolo (vale in tutto il sito):
     1 categoria (Reports) · 2 opzione (Snapshot, Standard) · 3 insieme (Notes, Destination)
     4 sottotitolo (Strength) · 5 spiegazione · 6 appunti in grigio. */
  --t-opt: 22px;
  --t-set: 18px;
  --t-sub: 16px;
  --t-text: 16px;
  --t-text-sheet: 15px;
  --t-note: 14px;
  --t-note-sheet: 13px;

  --wide: 1100px;
  --text: 680px;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Martian Mono è molto largo: al 87,5 % della sua larghezza (asse wdth). Newsreader non ha l'asse e resta com'è. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.55 var(--serif);
  font-stretch: 87.5%;
}
@media (max-width: 600px) { body { font-size: 17px; } }

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration-color: var(--pen); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pen); }
input:focus, select:focus, a:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 16px; }
h1 { font-size: clamp(36px, 5.5vw, 60px); letter-spacing: -0.015em; }
h2 { font-size: clamp(26px, 3.2vw, 34px); }
h3 { font-size: 20px; }
main h2 { color: var(--pen-deep); }   /* titoli delle sezioni nel colore scuro della parte */
p { margin: 0 0 16px; }

/* A capo più puliti: niente parole isolate */
h1, h2 { text-wrap: balance; }
.lead { text-wrap: pretty; }

/* Piccole classi di servizio */
.lead { font-size: 21px; line-height: 1.5; }
.small { font-size: var(--t-note); color: var(--ink-2); }
.muted { color: var(--ink-2); }
.pen { color: var(--pen); }
.nowrap { white-space: nowrap; }
.placeholder { background: var(--highlight); color: var(--ink); padding: 0 4px; font-family: var(--mono); font-size: 0.9em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Impaginazione ---------- */

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
@media (max-width: 420px) { .wrap { padding: 0 18px; } }
.text { max-width: var(--text); }
.wrap.text { max-width: var(--wide); }
.wrap.text > * { max-width: var(--text); margin-left: auto; margin-right: auto; }

/* Sezioni: dispari sulla tinta chiarissima della parte, pari bianche */
section { padding: 64px 0; }
main > section:nth-of-type(odd) { background: var(--band); }
@media (max-width: 600px) { section { padding: 52px 0; } }

/* Le sezioni arrivano a filo del menu; --header-h la misura site.js */
section[id] { scroll-margin-top: calc(var(--header-h, 66px) - 1px); }
@media (max-width: 860px) { section[id] { scroll-margin-top: calc(var(--header-h, 92px) - 1px); } }

/* Titoli di sezione e introduzioni centrati, su righe di lunghezza uguale */
.wrap > h2 { text-align: center; }
.wrap > h2 + .text, .wrap > h2 + p { max-width: 52rem; margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; }

/* ---------- Barra della bozza, testata e menu ---------- */

.draft-bar {
  background: var(--pen);
  color: var(--on-pen);
  font: 500 13px/1 var(--mono);
  text-align: center;
  padding: 8px 12px;
}

.site-header { border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 10; background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; flex-wrap: wrap; }

.wordmark { font: 600 21px/1 var(--serif); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.wordmark svg { width: 26px; height: 26px; }
.wordmark-dot { fill: var(--pen); }
.wordmark-eyes { color: var(--pen); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; font: 500 15px var(--mono); flex-wrap: wrap; }
.site-nav a { text-decoration: none; }
.site-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 2px; }

/* Strumenti a destra: telefono, WhatsApp, email, impostazioni */
.header-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn { display: inline-flex; align-items: center; gap: 4px; height: 42px; min-width: 42px; padding: 0 8px; justify-content: center;
  border: 1.5px solid var(--pen); background: transparent; color: var(--pen); cursor: pointer; text-decoration: none; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--pen); border-color: var(--pen); color: var(--on-pen); }
.icon-btn:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .ico { width: 24px; height: 24px; }

/* Pannello delle impostazioni: unità, terreni, valuta, lingua */
.settings { position: relative; }
.settings-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 300px; padding: 14px 16px;
  background: var(--sheet); border: 1.5px solid var(--pen); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.settings-panel[hidden] { display: none; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.set-row:first-child { border-top: 0; }
.set-label { font: 500 13px var(--mono); color: var(--ink-2); }
.seg { display: inline-flex; border: 1.5px solid var(--pen); }
.seg button { font: 500 13px var(--mono); padding: 5px 8px; border: 0; background: transparent; color: var(--pen); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--pen); }
.seg button:hover:not(:disabled) { color: var(--pen); }
.seg button[aria-pressed="true"] { background: var(--pen); color: var(--on-pen); }
.seg button:disabled { color: var(--ink-2); cursor: default; text-decoration: line-through; text-decoration-color: var(--line); }

/* Finestrelle di telefono, WhatsApp ed email: come il pannello delle impostazioni, più strette */
.contact-pop { position: relative; }
.pop-panel { width: auto; min-width: 220px; white-space: nowrap; }
.pop-value { margin: 0 0 10px; font: 500 16px var(--mono); }
.pop-panel .btn[hidden] { display: none; }   /* il pulsante compare solo quando numero o email ci sono */

@media (max-width: 1100px) { /* menu su due righe: nome e strumenti sopra, voci sotto */
  .site-header .wrap { min-height: 0; padding-top: 10px; gap: 8px 12px; }
  .site-nav { order: 3; width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding: 2px 0 10px; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
}
/* Telefono: le cinque voci stanno su una riga (Martian Mono più stretto); nome e quattro pulsanti su una riga fino a 360 px */
@media (max-width: 600px) {
  .site-header .wrap { min-height: 52px; gap: 6px 12px; }
  .site-nav { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; overflow: visible; padding: 0 0 8px; font-stretch: 75%; }
  .icon-btn { height: 38px; min-width: 38px; padding: 0 6px; }
  .icon-btn .ico { width: 22px; height: 22px; }
  .header-tools { gap: 4px; }
}
@media (max-width: 420px) {
  .wordmark { font-size: 16px; gap: 6px; }
  .wordmark svg { width: 20px; height: 20px; }
  .site-header .wrap { gap: 6px 8px; }
  .site-header .header-tools { gap: 3px; }
  .site-header .icon-btn { height: 33px; min-width: 33px; padding: 0 3px; }
  .site-header .icon-btn .ico { width: 21px; height: 21px; }
}
@media (max-width: 370px) {
  .site-header .icon-btn { height: 30px; min-width: 30px; padding: 0 2px; }
  .site-header .icon-btn .ico { width: 20px; height: 20px; }
}

/* ---------- Barra delle tre parti, in cima alla pagina: Buy · Rent · Land ---------- */

.sec-buy { --sec: #c8102e; }
.sec-rent { --sec: #1f4e9c; }
.sec-land { --sec: #2f6b35; }
.sections { border-bottom: 1px solid var(--line); background: var(--paper); }
.sections .wrap { display: flex; justify-content: center; gap: 4px; }
.sections a { padding: 13px 18px 10px; font: 600 16px/1 var(--serif); color: var(--ink-2); text-decoration: none;
  border-bottom: 3px solid transparent; transition: color .2s ease, border-color .2s ease; }
.sections a[aria-current] { color: var(--ink); border-bottom-color: var(--sec); }
@media (hover: hover) and (pointer: fine) { .sections a:not([aria-current]):hover { color: var(--sec); } }
@media (max-width: 420px) { .sections a { padding-left: 12px; padding-right: 12px; } }

/* ---------- Pulsanti ----------
   "D1" (scelta dell'autore, 28 ottobre): pieni del colore della parte, angoli di 8 px, sotto uno spessore dello stesso
   colore trasparente; premuto si abbassa di 3 px. Gli altri bottoni cedono un poco al clic (scale). */

.btn {
  display: inline-block;
  font: 600 16px/1 var(--serif);
  padding: 16px 23px;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  background: var(--pen);
  color: var(--on-pen);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--pen) 40%, transparent);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out);
}
.btn:hover { background: color-mix(in srgb, var(--pen) 90%, #000); color: var(--on-pen); border-color: transparent; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--pen) 40%, transparent); }
.btn:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }
.btn-small { padding: 11px 15px; font-size: 14px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* le tre parti, pieni del loro colore (pagina d'ingresso e schermata YES) */
.sec-btn { min-width: 7.2em; text-align: center; font-size: 18px; transition: transform .14s cubic-bezier(.23,1,.32,1), filter .2s ease; }
.btn.sec-btn { background: var(--sec); box-shadow: 0 4px 0 color-mix(in srgb, var(--sec) 40%, transparent); }
.btn.sec-btn:hover { background: color-mix(in srgb, var(--sec) 90%, #000); filter: none; }
.btn.sec-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--sec) 40%, transparent); }
@media (max-width: 420px) { .sec-btn { min-width: 0; flex: 1 1 0; } }

.icon-btn, .tier-tab, .prop-add, .prop-remove, .settings-panel button { transition: transform var(--t-press) var(--ease-out); }
:is(.icon-btn, .tier-tab, .prop-add, .prop-remove, .settings-panel button):active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  :is(.btn, .icon-btn, .tier-tab, .prop-add, .prop-remove, .settings-panel button):active { transform: none; }
}

/* "Book your meeting": pulsante e tre scelte stanno nello stesso posto; al tocco il pulsante si ritira (140 ms)
   e le scelte salgono una dopo l'altra (45 ms tra l'una e l'altra) */
.book { display: grid; justify-items: center; }
.book > .book-btn, .book > .book-choices { grid-area: 1 / 1; }
.book > .book-btn { align-self: center; transition: opacity var(--t-press) var(--ease-out), transform var(--t-ui) var(--ease-out); }
.book.is-open > .book-btn { opacity: 0; transform: scale(0.92); pointer-events: none; }
.book-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.book > .book-choices { pointer-events: none; }
.book.is-open > .book-choices { pointer-events: auto; }
.book > .book-choices .btn { opacity: 0; transform: translateY(8px) scale(0.94); visibility: hidden;
  transition: opacity 220ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s linear 280ms; }
.book.is-open > .book-choices .btn { opacity: 1; transform: none; visibility: visible;
  transition-delay: calc(60ms + var(--i, 0) * 45ms), calc(60ms + var(--i, 0) * 45ms), 0s; }
.book.is-open > .book-choices .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--pen) 40%, transparent); }
@media (prefers-reduced-motion: reduce) { .book > .book-btn, .book > .book-choices .btn { transition: none; transform: none; } }
.book-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.book-choices .btn .ico { width: 21px; height: 21px; }

/* ---------- Apertura ---------- */

.hero { padding: 88px 0 72px; border-top: 6px solid var(--pen); }
.hero .wrap { text-align: center; }
.hero h1 { max-width: 13em; margin-left: auto; margin-right: auto; color: var(--pen-deep); }
.hero .lead { max-width: 52rem; margin-left: auto; margin-right: auto; text-wrap: balance; }
.hero .actions, .contact .actions { justify-content: center; }
@media (max-width: 600px) { .hero { padding: 56px 0 48px; } }
/* Telefono: sulla colonna stretta i paragrafi centrati si leggevano male; titoli e introduzioni a sinistra */
@media (max-width: 600px) {
  .hero .wrap, .wrap > h2, .wrap > h2 + .text, .wrap > h2 + p { text-align: left; }
  .hero h1, .hero .lead, .wrap > h2 + .text, .wrap > h2 + p { margin-left: 0; }
  .hero .lead, .wrap > h2 + .text, .wrap > h2 + p { text-wrap: pretty; }   /* "balance" accorciava le righe */
  .contact .actions { justify-content: flex-start; }
}

/* ---------- Listino (Costs, legenda e note della mappa) ---------- */

.pricelist { margin: 0; padding: 0; list-style: none; max-width: 760px; }
.pricelist li { padding: 12px 0; }
.pricelist .row { display: flex; align-items: baseline; gap: 10px; }
.pricelist .name { font: 600 18px var(--serif); }
.pricelist .leader { flex: 1; border-bottom: 1.5px dotted var(--ink-2); transform: translateY(-5px); min-width: 24px; }
.pricelist .amount { font: 500 17px var(--mono); white-space: nowrap; }
.pricelist .desc { color: var(--ink-2); font-size: var(--t-text); margin: 4px 0 0; max-width: 34em; }
.pricelist .desc a { white-space: nowrap; }

/* ---------- How it Works: linea temporale verticale; tratteggio grigio = attesa ---------- */

.timeline { list-style: none; margin: 28px auto 0; padding: 0; position: relative; max-width: 620px; }
.timeline::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; border-left: 2px solid color-mix(in srgb, var(--pen) 45%, var(--paper)); }
.timeline li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 18px; padding: 12px 0; }
.timeline h3 { font-size: 18px; letter-spacing: 0; margin: 3px 0 4px; }
.timeline p { margin: 0; color: var(--ink-2); font-size: var(--t-text); }
.tl-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font: 500 14px var(--mono); }
.tl-gap .tl-time { color: var(--ink-2); font: 500 14px/1.5 var(--mono); }
.tl-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 2px solid var(--pen); display: grid; place-items: center; font: 500 13px var(--mono); position: relative; z-index: 1; }
.tl-end .tl-dot { background: var(--pen); }
/* Dopo l'ultimo passo la linea si ferma; nelle attese il tratto è grigio e tratteggiato */
.tl-end::after { content: ""; position: absolute; left: 11px; top: 40px; bottom: 0; width: 6px; background: var(--paper); }
.tl-gap { padding: 4px 0; }
.tl-gap::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 6px; background: var(--paper); }
.tl-gap::after { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; border-left: 2px dashed var(--ink-2); }
/* nelle sezioni tinte le maschere della linea prendono la tinta */
main > section:nth-of-type(odd) .tl-gap::before, main > section:nth-of-type(odd) .tl-end::after { background: var(--band); }
main > section:nth-of-type(odd) .tl-dot { background: var(--band); }
main > section:nth-of-type(odd) .tl-end .tl-dot { background: var(--pen); }

/* ---------- How can I help you? ---------- */

.helps { list-style: none; padding: 0; margin: 24px auto 0; max-width: var(--text); }
.helps li { font-size: 17px; padding: 12px 0 12px 28px; border-top: 1px solid var(--rule); position: relative; }
.helps li:last-child { border-bottom: 1px solid var(--rule); }
.helps li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 10px; height: 10px; background: var(--pen); }

/* ---------- Reports: livelli, tavola, campione ---------- */

.tiers { margin-top: 28px; }
/* livelli e tempi: la barra resta sotto il menu mentre si scorre il campione */
.tier-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--pen);
  position: sticky; top: calc(var(--header-h, 66px) - 1px); z-index: 5; background: var(--paper); padding-top: 10px; }
.tier-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tier-tab {
  font: 500 18px var(--mono);
  padding: 8px 12px;
  border: 1.5px solid var(--pen);
  background: transparent;
  color: var(--pen);
  cursor: pointer;
}
.tier-tab:hover { border-color: var(--pen); color: var(--pen); background: var(--pen-tint); }
.tier-tab[aria-current="true"], .tier-tab[aria-current="true"]:hover { background: var(--pen); border-color: var(--pen); color: var(--on-pen); }
.tier-tab:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
/* tempo sul posto e chiamata del livello scelto */
.tier-meta { display: flex; gap: 4px 24px; flex-wrap: wrap; margin: 0; font: 400 14px var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.tier-meta b { font-weight: 500; color: var(--ink); margin-left: 6px; }
@media (max-width: 600px) { .tier-tab { font-size: 16px; padding: 8px 10px; } .tier-meta { font-size: 13px; } }

/* Tavola dei contenuti: il disegno lo fa assets/report-plate.js; rosso solo per la casa, la tessera indicata e "Upgraded" */
.rp { margin-top: 24px; background: var(--sheet); border: 1.5px solid var(--rule); }
.rp-sheet { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 28px; padding: 18px 24px 20px; align-items: center; }
.rp-figure { margin: 0; }
/* grigi ricavati dall'inchiostro, non dalle fasce della mappa */
.rp-fig { --hairline-plate: var(--sheet); --hairline-hi: var(--ink); --hairline-edge: color-mix(in srgb, var(--ink) 42%, var(--sheet)); --hairline-mid: color-mix(in srgb, var(--ink) 26%, var(--sheet)); --hairline-lo: color-mix(in srgb, var(--ink) 13%, var(--sheet)); width: 100%; }
.rp-fig > svg { overflow: visible; }   /* le tessere arrivano dall'alto: non tagliarle */
.rp-fig .prop { --hl-hi: var(--pen); --hl-edge: var(--pen); }
.rp-fig g[class^="cell-"] > path.dash { display: none; }   /* niente caselle vuote */
/* simbolo della valuta sui disegni: solo quello scelto (assets/money.js) */
.rp-fig .sym-eur, .rp-fig .sym-usd, .rp-fig .sym-gbp { display: none; }
html[data-cur="eur"] .rp-fig .sym-eur, html[data-cur="usd"] .rp-fig .sym-usd, html[data-cur="gbp"] .rp-fig .sym-gbp { display: inline; }
.rp-fig .acc > g:first-of-type > .sil { stroke: var(--pen); }

.rp-items { list-style: none; margin: 0; padding: 0; }
.rp-items li { border-top: 1px solid var(--line); }
.rp-items li:first-child { border-top: 0; }
.rp-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 1px 12px; padding: 8px 6px; align-items: start; color: var(--ink); text-decoration: none; transition: background-color var(--t-ui) ease; }
button.rp-row { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }   /* voci: bottoni senza aspetto da bottone */
.rp-row[aria-pressed="true"] { background: var(--paper-2); }
.rp-row:hover, .rp-row:focus { color: var(--ink); }
.rp-row:focus-visible { outline: 2px solid var(--pen); outline-offset: -2px; }
.rp-mini { grid-row: span 2; width: 46px; height: 24px; margin-top: 3px; }
.rp-mini .c { fill: none; stroke: var(--line); stroke-width: 1; }
.rp-mini .c.h { stroke: var(--ink-2); }
.rp-mini .c.f { fill: var(--pen); stroke: var(--pen); }
.rp-mini .c.d { fill: none; stroke: var(--ink-2); stroke-dasharray: 1.5 1.5; }
.rp-th { font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rp-tag { grid-row: 1; grid-column: 3; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 0 7px; line-height: 17px; }
.rp-tag.new { color: var(--ink); }
.rp-tag.up { color: var(--pen); }
.rp-tx { grid-column: 2 / 4; font-size: var(--t-text-sheet); line-height: 1.4; }
.rp-op { grid-column: 2 / 4; font-size: var(--t-note-sheet); line-height: 1.4; font-style: italic; color: var(--ink-2); }
.rp-items li.off .rp-tx { color: var(--ink-2); }
.rp-items li.is-optional .rp-tx { font-style: italic; }
.rp-items li.lit .rp-row { background: var(--paper-2); }
.rp-items li.lit .rp-th { color: var(--ink); }
@media (max-width: 820px) { .rp-sheet { grid-template-columns: 1fr; padding: 12px 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .rp-row { transition: none; } }

/* Campione: un livello alla volta (tiers.js nasconde gli altri), in una cornice larga al massimo 920 px */
.sample-box { margin-top: 24px; border: 1.5px solid var(--rule); }
.tier-track { padding-top: 20px; }
.sample-box > .tier-track { padding: 4px 20px 20px; max-width: 920px; margin: 0 auto; }
@media (max-width: 600px) { .sample-box > .tier-track { padding: 4px 14px 14px; } }
.tier[hidden] { display: none; }
/* immagini a sinistra, note a destra; i fogli finiscono alla stessa altezza */
.tier-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 14px; }
@media (max-width: 900px) { .tier-body { grid-template-columns: 1fr; } }

.sheet { background: var(--sheet); border: 1px solid var(--line); padding: 18px; position: relative; margin: 0; }
.sample-tag { position: absolute; top: 10px; right: 12px; font: 500 14px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pen); border: 1px solid var(--pen); padding: 2px 6px; background: var(--sheet); z-index: 1; }

.rep-sheet { font-size: 14px; line-height: 1.45; padding: 14px 16px; }
.rep-sheet p { margin: 0 0 10px; }
.rep-sheet svg { width: 100%; height: auto; display: block; max-width: 440px; margin: 0 auto 10px; }
.rep-sheet .kind { display: block; font: 500 var(--t-sub) var(--mono); color: var(--pen); margin-bottom: 2px; }
/* titoletti sempre su una riga; a destra resta posto per l'etichetta "Sample" */
.rep-h { font: 500 15px var(--mono); margin: 0 90px 10px 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); white-space: nowrap; scroll-margin-top: calc(var(--header-h, 66px) + 16px); }
.rep-sheet .rep-h ~ .rep-h { margin-top: 16px; margin-right: 0; }
.rep-h:focus { outline: none; }
.rep-h:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
/* telefono: l'etichetta "Sample" sta sopra il primo titoletto */
@media (max-width: 600px) { .rep-h { margin-right: 0; } .rep-sheet { padding-top: 36px; } }
.rep-town { margin-top: 12px !important; }
.rep-area { margin: 0; }
/* Conteggio foto accanto al titoletto: quelle mostrate sono una selezione */
.rep-count { font-weight: 400; font-size: var(--t-note); color: var(--ink-2); margin-left: 6px; }

/* Foto: segnaposti a righe con numero; il nome va a capo tra le parole ma non viene mai tagliato */
.rep-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.ph {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, var(--hatch-1) 0 6px, var(--hatch-2) 6px 12px);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 3px;
  padding: 4px 5px;
  font: 11px/1.15 var(--mono);
  color: var(--ink-2);
  min-width: 0;
}
.ph .n { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-2); color: var(--paper); font-size: 11px; }
.ph .n.is-note { background: var(--pen); }
@media (max-width: 520px) { .ph { aspect-ratio: auto; min-height: 64px; } }

/* Note numerate nel colore della parte, collegate alle foto */
.rep-notes { list-style: none; margin: 0; padding: 0; }
.rep-notes li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.rep-notes li:first-child { border-top: 0; }
.rep-notes .num { width: 24px; height: 24px; border: 1.5px solid var(--pen); border-radius: 50%; color: var(--pen); font: 500 13px/21px var(--mono); text-align: center; }
.rep-notes .num-none { border-color: transparent; color: var(--ink-2); }
.rep-notes .ref { font: var(--t-note-sheet) var(--mono); color: var(--ink-2); white-space: nowrap; }
/* Documenti e regole locali (Land, Detailed) */
.rep-docs { list-style: none; margin: 0; padding: 0; }
.rep-docs li { padding: 7px 0; border-top: 1px solid var(--line); }
.rep-docs li:first-child { border-top: 0; padding-top: 0; }
.rep-docs b { display: block; font: 500 var(--t-sub) var(--mono); color: var(--pen); }

/* Piante d'esempio (Buy, Rent): classi pl-, valgono solo dentro le piante. Detailed: pianta misurata, nitida, con quote. */
.pl-poche { fill: var(--ink); }
.pl-room, .pl-cut { fill: var(--paper); }
.pl-win { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.pl-glass { stroke: var(--ink); stroke-width: 2; }
.pl-door { fill: none; stroke: var(--ink); stroke-width: 2; }
.pl-door-arc { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 6 5; }
.pl-lbl { font: 500 26px var(--mono); fill: var(--ink); letter-spacing: .04em; }
.pl-area { font: 400 22px var(--mono); fill: var(--ink-2); }
.pl-tiny { font: 500 18px var(--mono); fill: var(--ink); }
.pl-redline { fill: none; stroke: var(--pen); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pl-redthin { fill: none; stroke: var(--pen); stroke-width: 2.5; stroke-linecap: round; }
.pl-rednum { font: 500 34px var(--mono); fill: var(--pen); text-anchor: middle; }
.pl-dim { stroke: var(--ink-2); stroke-width: 1.5; fill: none; }
.pl-dimtxt { font: 400 20px var(--mono); fill: var(--ink-2); }
.pl-cone { fill: var(--cone); stroke: var(--ink); stroke-width: 1.5; }
.pl-shot { fill: var(--ink); }
.pl-shotnum { font: 500 20px var(--mono); fill: var(--paper); text-anchor: middle; }

/* Standard: la stessa pianta disegnata a mano, a matita su un foglio a quadretti */
.plan-sketch .pl-area, .plan-sketch .pl-scalebar, .plan-sketch .pl-glass { display: none; }
.plan-sketch .pl-poche { fill: url(#sketch-hatch); }
.plan-sketch .pl-room, .plan-sketch .pl-cut { fill: var(--sheet); }
.plan-sketch .pl-win { fill: var(--sheet); stroke: none; }
.plan-sketch .pl-door { stroke: var(--pencil); }
.plan-sketch .pl-door-arc { stroke: var(--pencil); stroke-dasharray: none; stroke-width: 1.4; }
.plan-sketch .pl-cone { fill: none; stroke: var(--pencil); stroke-width: 2; }
.plan-sketch .pl-shot { fill: var(--pencil); }
.plan-sketch .pl-lbl, .plan-sketch .pl-tiny, .plan-sketch .pl-dimtxt, .plan-sketch .pl-rednum, .plan-sketch .pl-shotnum {
  font-family: "Architects Daughter", var(--mono);
}
.plan-sketch .pl-lbl { font-size: 30px; letter-spacing: .02em; fill: var(--pencil); }
.plan-sketch .pl-dimtxt { font-size: 24px; fill: var(--pencil); }
.plan-sketch .pl-rednum { font-size: 38px; }
.plan-sketch .pl-shotnum { font-size: 22px; }
.plan-sketch .sk-line { fill: none; stroke: var(--pencil); stroke-width: 2.6; stroke-linecap: round; }
.plan-sketch .sk-ghost { stroke-width: 1.3; opacity: .45; }
.plan-sketch .sk-thin { stroke-width: 1.5; }
:is(.plan-sketch, .plot-sketch) .sk-grid { fill: none; stroke: var(--grid); stroke-width: 1; }
:is(.plan-sketch, .plot-sketch) .sk-hatch { stroke: var(--sketch-hatch); stroke-width: 1.6; }

/* Schizzo del terreno visto dall'alto (Land, Standard e Detailed): note e confine catastale nel colore della parte.
   Lo schizzo è largo al massimo 440 px: scritte grandi perché restino leggibili. */
.plot-sketch .ps-p { fill: none; stroke: var(--pencil); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plot-sketch .ps-ground { fill: var(--sheet); }
.plot-sketch .ps-t { fill: none; stroke: var(--pencil); stroke-width: 1.3; stroke-linecap: round; }
.plot-sketch .ps-dot { stroke-dasharray: 2 9; }
.plot-sketch .ps-post, .plot-sketch .ps-shot { fill: var(--pencil); }
.plot-sketch .ps-cone { fill: none; stroke: var(--pencil); stroke-width: 1.8; }
.plot-sketch .ps-pen { fill: none; stroke: var(--pen); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.plot-sketch .ps-pen-dash { fill: none; stroke: var(--pen); stroke-width: 3; stroke-dasharray: 14 10; stroke-linecap: round; }
.plot-sketch .ps-lb, .plot-sketch .ps-lbs, .plot-sketch .ps-rn, .plot-sketch .ps-shotnum { font-family: "Architects Daughter", var(--mono); }
.plot-sketch .ps-lb { font-size: 36px; fill: var(--pencil); }
.plot-sketch .ps-lbs { font-size: 28px; fill: var(--ink-2); }
.plot-sketch .ps-rn { font-size: 44px; fill: var(--pen); text-anchor: middle; }
.plot-sketch .ps-small { font-size: 30px; }
.plot-sketch .ps-shotnum { font-size: 20px; fill: var(--sheet); text-anchor: middle; }

/* ---------- Inspection: barra del luogo e caselle a sinistra, mappa dei tempi a destra ---------- */

.insp { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 24px 48px; align-items: start; margin-top: 28px; }
.insp-prices { max-width: 560px; margin: 48px auto 0; }
.insp-prices .actions { margin-top: 24px; }
.map-find { margin-bottom: 10px; }
.map-find input { width: 100%; }
.map-layers { display: grid; gap: 4px; margin: 14px 0 10px; }
.map-layers .check { display: flex; align-items: center; gap: 10px; font: 17px var(--serif); margin: 0; cursor: pointer; }
.map-layers .check input { width: auto; margin: 0; accent-color: var(--pen); }   /* i campi sono larghi il 100%: la casella no */
.map-layers .check span { white-space: nowrap; }
@media (max-width: 900px) {
  .insp { grid-template-columns: 1fr; }
  .map-layers { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 18px; }
  .insp #travel-map svg { max-height: 64vh; width: auto; max-width: 100%; margin: 0 auto; display: block; }
}

/* Campi (anche nella stima) */
label { display: block; font: 600 var(--t-set) var(--serif); margin-bottom: 6px; }
input, select {
  width: 100%;
  font: var(--t-text) var(--serif);
  padding: 10px 12px;
  border: 1.5px solid var(--pen);
  border-radius: 0;
  background: var(--sheet);
  color: var(--ink);
}

/* Mappa */
.map-wrap { position: relative; }
.map-wrap svg { width: 100%; height: auto; overflow: visible; }
.comune { stroke: var(--paper); stroke-width: 0.6; vector-effect: non-scaling-stroke; cursor: pointer; }
.comune:hover, .comune.active { stroke: var(--ink); stroke-width: 1.5; }
.mountain-edge { fill: none; stroke: var(--map-mark); stroke-width: 1.4; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-route { fill: none; stroke: var(--map-mark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-pin-n { font: 500 11px var(--mono); fill: var(--on-pen); pointer-events: none; }
/* nomi in una cornice (travel.js, tag): nera per i paesi, colorata per la partenza e le tappe */
.map-tag { pointer-events: none; }
.map-tag rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-tag text { font-family: var(--mono); font-weight: 500; fill: var(--ink); }
.map-origin-label rect, .map-pin-label rect { stroke: var(--pen); stroke-width: 1.5; }
.map-note { fill: var(--map-mark); }
.map-town { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; pointer-events: none; }
.map-town-label { fill: var(--ink); pointer-events: none; }
.map-origin { fill: var(--map-mark); stroke: var(--paper); stroke-width: 2; }   /* Cagliari, punto di partenza */
.map-origin-label text { fill: var(--map-mark); }
.map-pin { fill: var(--map-mark); stroke: var(--paper); stroke-width: 2; pointer-events: none; }   /* posto cercato o toccato */
.map-pin-label text { fill: var(--pen); }
.map-airport { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.map-hint { font-size: var(--t-note); color: var(--ink-2); margin: 6px 0 0; }
.map-credit { font-size: 13px; color: var(--ink-2); margin: 4px 0 0; }
.map-credit a { color: inherit; }
/* chiave delle fasce nel mare in alto a sinistra; sul telefono in riga sopra, per non coprire la costa */
.map-key { position: absolute; left: 0; top: 0; list-style: none; margin: 0; padding: 0; font: 500 12px/1 var(--mono); pointer-events: none; }
.map-key li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.map-key .swatch { width: 12px; height: 12px; border: 1px solid var(--line); flex: none; }
@media (max-width: 600px) { .map-key { position: static; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; } }
.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--pen);
  color: var(--on-pen);
  font: 13px/1.4 var(--mono);
  padding: 6px 9px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .1s;
}

/* ---------- Costs ---------- */

.costs { max-width: 560px; margin: 24px auto 0; }
.costs .book { margin-top: 28px; }

/* ---------- About ---------- */

.about { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.photo-slot {
  aspect-ratio: 4 / 5;
  border: 1.5px dashed var(--ink-2);
  display: grid;
  place-items: center;
  font: 14px var(--mono);
  color: var(--ink-2);
  background: var(--paper-2);
}
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about .photo-slot { max-width: 260px; }
}

/* ---------- Questions ---------- */

.faq { max-width: var(--text); }
.faq details { border-top: 1px solid var(--rule); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font: 600 18px/1.3 var(--serif); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--pen); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-top: 12px; font-size: 17px; }
.faq details p:last-child { margin-bottom: 0; }

/* ---------- Contatti e piede ----------
   "Fascia sottile" (scelta dell'autore): tinta chiarissima della parte con un filo pieno sotto, come l'apertura sopra */

.contact { background: var(--band); color: var(--ink); border-bottom: 6px solid var(--pen); }
.contact .wrap { text-align: center; }
.contact a:hover { color: var(--pen); }
.contact .book-open { margin-top: 24px; }

.site-footer { padding: 28px 0 40px; font: 14px var(--mono); color: var(--ink-2); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.site-footer .quick { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-footer a { color: var(--pen); }

/* ---------- Animazioni discrete ----------
   Solo con la classe motion (niente se il telefono chiede meno movimento). Le classi le mette site.js. */

.motion .reveal { transition: opacity calc(var(--t-reveal) * .75) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--d, 0) * var(--stagger)); }
.motion .reveal:not(.is-in) { opacity: 0; transform: translateY(20px); }
/* Le note rosse delle piante si disegnano come a penna */
.motion .pen-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-out); transition-delay: calc(300ms + var(--d, 0) * 120ms); }
.motion .is-in .pen-draw { stroke-dashoffset: 0; }

/* ---------- Pagina d'ingresso e schermata YES (assets/yes-intro.js) ---------- */

/* colori della schermata: sfondo, testo e accento (il resto è nel CSS dentro yes-intro.js) */
html #yes-intro { --yi-bg: var(--paper); --yi-fg: var(--ink); --yi-muted: var(--ink-2); --yi-accent: var(--ink); font-family: var(--serif); }   /* nero fino alla scelta */
html #yes-intro .yi-skip { font: 500 14px var(--mono); }
/* senza schermata (già vista o senza script): la stessa scelta, al centro */
.landing { min-height: calc(100vh - 30px); min-height: calc(100dvh - 30px); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 28px; padding: 24px 16px; position: relative; }
.landing-mark { font-size: clamp(30px, 5vw, 58px); margin: 0; text-align: center; }
.landing-mark i { font-style: normal; }   /* nero come nella schermata, finché non si sceglie */
.landing-pick { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.landing-pick nav { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.landing-q { margin: 0; font: 500 15px/1.3 var(--mono); color: var(--ink-2); text-align: center; }
.landing-lang { position: absolute; top: 16px; right: 16px; font: 500 14px/1 var(--mono); color: var(--ink-2); }
.landing-foot { position: absolute; bottom: 12px; margin: 0; font: 13px var(--mono); }
.landing-foot a { color: var(--ink-2); }
@media (max-width: 420px) { .landing-pick nav { width: 100%; gap: 8px; } }

/* ---------- Stima privata (estimate.html) ---------- */

.hint { font-size: var(--t-note); color: var(--ink-2); margin: -4px 0 6px; }
.calc { border: 1.5px solid var(--rule); padding: 22px; background: var(--sheet); }
.consult-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.consult-row .check { margin: 0; }
.consult-count input { width: 64px; padding: 6px 8px; }
.prop-n { font: 500 14px var(--mono); color: var(--pen); }
.prop-remove { height: 44px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); font: 18px var(--mono); cursor: pointer; }
.prop-remove:hover { border-color: var(--pen); color: var(--pen); }
.prop-remove[hidden] { display: block; visibility: hidden; }
.prop-add { margin-top: 8px; font: 500 14px var(--mono); background: none; border: 0; padding: 4px 0; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--pen); text-underline-offset: 3px; }
.prop-add:hover { color: var(--pen); }
.prop-add:disabled { color: var(--ink-2); cursor: default; text-decoration: none; }
.calc .check { display: flex; gap: 10px; align-items: baseline; margin: 0 0 20px; cursor: pointer; }
.field-title { display: block; font: 600 var(--t-set) var(--serif); letter-spacing: 0; margin: 0 0 6px; }
.cost-title { margin-bottom: 4px; }
.calc .check input { width: auto; accent-color: var(--ink); }
.calc .check:has(input:disabled) { color: var(--ink-2); cursor: default; }
/* Righe del conto, scritte da travel.js */
.calc .lines { font: 15px/1.4 var(--mono); }
.calc .line { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.calc .line .leader { flex: 1; border-bottom: 1px dotted var(--ink-2); transform: translateY(-4px); }
.calc .total { border-top: 2px solid var(--rule); margin-top: 8px; padding-top: 10px; font-weight: 500; font-size: 17px; }
.calc .when, .calc .extra { font: var(--t-note)/1.45 var(--serif); }
.calc .when { color: var(--ink-2); margin-top: 12px; }
.calc .extra { color: var(--ink); margin-top: 8px; }

/* case e conto a sinistra, mappa a destra; sul telefono una colonna, la mappa entra nella casa che si modifica */
.estimator.calc { border: 0; padding: 0; background: none; margin-top: 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px 48px; align-items: start; }
.est-cost { margin-top: 24px; border: 1.5px solid var(--rule); background: var(--sheet); padding: 20px 22px; }
@media (max-width: 900px) { .estimator.calc { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 600px) { .est-cost { padding: 16px 14px; } }
.side-head { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1.5px solid var(--rule); font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.side-head .side-what { color: var(--ink); }
.pcard .est-side { margin: 4px 0 6px; }
@media (max-width: 900px) {
  .pcard .side-head { display: none; }
  .pcard #travel-map svg { max-height: 64vh; width: auto; max-width: 100%; margin: 0 auto; display: block; }
}
.pcard.is-editing .pcard-head h3 { text-decoration: underline; text-decoration-color: var(--pen); text-underline-offset: 4px; }
.pcards { list-style: none; margin: 0; padding: 0; }
.pcard { padding: 14px 0 16px; border-top: 1.5px solid var(--rule); }
.pcard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.pcard-head h3 { margin: 0; font: 600 var(--t-set) var(--serif); }
.pcard-head .prop-n { color: var(--pen); font: 500 var(--t-set) var(--mono); margin-left: 4px; }
.pcard .prop-remove { width: 44px; }
.pcard-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pf-place { grid-column: 1 / -1; }
.pf-label { display: block; font: 500 13px var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.pf-hint { font-size: var(--t-note); color: var(--ink-2); margin: 5px 0 0; min-height: 1.45em; }
.pf-hint.is-error { color: var(--pen); }
.pf-place input[aria-invalid="true"] { border-color: var(--pen); }
/* Barre di scelta: una aperta alla volta, si sceglie e si chiude */
.pf-choice { border: 1.5px solid var(--rule); background: var(--paper); }
.choice-bar { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; background: none; border: 0;
  color: var(--ink); cursor: pointer; text-align: left; font: 500 13px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.choice-val { margin-left: auto; font: 500 17px var(--serif); letter-spacing: 0; text-transform: none; }
.choice-bar::after { content: "+"; font: 400 18px/1 var(--mono); width: 14px; text-align: center; }
.pf-choice.is-open .choice-bar::after { content: "\2212"; }
.choice-bar:disabled { cursor: default; }
.choice-bar:disabled::after { content: ""; }
.choice-bar:disabled .choice-val { color: var(--ink-2); }
.choice-bar:focus-visible, .choice-opt:focus-visible { outline: 2px solid var(--pen); outline-offset: -2px; }
.choice-opts { display: grid; border-top: 1px solid var(--rule); }
.choice-opts[hidden] { display: none; }
.choice-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 46px; padding: 6px 12px;
  background: none; border: 0; border-top: 1px solid var(--line); color: var(--ink); cursor: pointer; text-align: left; font: 17px var(--serif); }
.choice-opt:first-child { border-top: 0; }
.choice-opt[aria-pressed="true"] { background: var(--paper-2); }
.choice-opt[aria-pressed="true"] .opt-name { font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .choice-opt:hover { background: var(--paper-2); } }
.opt-name { grid-column: 2; }
.opt-price { grid-column: 3; font: 500 15px var(--mono); }
.opt-fig { grid-column: 1; width: 108px; height: auto; display: block; }   /* le tre piante, alla stessa scala */
@media (max-height: 700px) { .opt-fig { width: 84px; } }
.est-form .prop-add { margin-top: 4px; }
.est-form .consult-row { border-bottom: 0; margin-bottom: 0; }

/* Elenchi apribili sotto la mappa e listino completo */
details.extras, details.listing { margin-top: 16px; border: 1.5px solid var(--rule); }
details.extras > summary, details.listing > summary { list-style: none; cursor: pointer; padding: 10px 16px; font: 500 14px var(--mono); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; }
details.extras > summary::-webkit-details-marker, details.listing > summary::-webkit-details-marker { display: none; }
details.extras > summary::after, details.listing > summary::after { content: "+"; margin-left: auto; font-size: 18px; line-height: 1; }
details.extras[open] > summary::after, details.listing[open] > summary::after { content: "\2212"; }
details.extras > summary:hover, details.listing > summary:hover { color: var(--pen); }
details.extras > summary:focus-visible, details.listing > summary:focus-visible { outline: 2px solid var(--pen); outline-offset: -2px; }
details.extras { border-width: 1px; }
details.extras > summary { font-size: 13px; padding: 8px 14px; }
details.extras .travel-extras { margin: 0; padding: 0 14px 8px; border-top: 1px solid var(--rule); }
details.listing { grid-column: 1 / -1; margin-top: 0; scroll-margin-top: calc(var(--header-h, 80px) + 16px); }
.listing-body { padding: 4px 20px 20px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: start; }
@media (max-width: 760px) { .listing-body { grid-template-columns: 1fr; padding: 4px 14px 16px; } }

/* Legenda e note: stessa forma del listino, con il quadratino del colore */
.legend { margin: 20px 0; }
.legend li { padding: 8px 0; }
.legend .desc { padding-left: 24px; margin-top: 2px; }
.legend .swatch { width: 14px; height: 14px; flex: none; align-self: center; border: 1px solid var(--line); }
.legend .swatch-mountain { background: var(--b3); border: 1.5px dashed var(--map-mark); }
.travel-extras { padding-top: 8px; }
.travel-extras .row { padding-left: 24px; }
.travel-extras .swatch { margin-left: -24px; }
details.all-towns { margin-top: 20px; font-size: var(--t-note); }
details.all-towns summary { cursor: pointer; font: 500 var(--t-sub) var(--mono); }
details.all-towns table { border-collapse: collapse; width: 100%; margin-top: 12px; }
details.all-towns td, details.all-towns th { text-align: left; padding: 3px 6px 3px 0; border-bottom: 1px solid var(--line); }
details.all-towns th { font: 500 13px var(--mono); }
details.all-towns td.num { font-family: var(--mono); white-space: nowrap; }

/* Listino per superficie: tabella a colonne; misure sempre su una riga */
.listing .fz-table { min-width: 0; margin-top: 8px; }
.listing .fz-table thead th { padding-bottom: 8px; vertical-align: bottom; padding-right: 8px; }
.listing .fz-size { white-space: nowrap; font-size: 14px; }
.fz-unit { font: 400 13px var(--mono); color: var(--ink-2); }
.listing .fz-table thead td { vertical-align: bottom; padding-bottom: 8px; }
.listing .fz-sub { margin: 28px 0 4px; }
.listing-col > .fz-sub:first-child { margin-top: 16px; }
.listing .fz-other { columns: auto; }
.listing .legend { margin: 0; }
.fz-table { width: 100%; border-collapse: collapse; font-size: var(--t-text); min-width: 520px; }
.fz-table thead th { text-align: left; vertical-align: top; padding: 0 12px 12px 0; font-weight: 400; width: 26%; }
.fz-size { display: block; font: 500 var(--t-set) var(--mono); margin-top: 6px; }
.fz-table thead small { display: block; color: var(--ink-2); font-size: var(--t-note); line-height: 1.35; margin-top: 2px; }
.fz-table tbody th { text-align: left; font-weight: 600; padding: 10px 12px 10px 0; }
.fz-table tbody th small { display: block; font-weight: 400; color: var(--ink-2); font-size: var(--t-note); }
.fz-table tbody td { font: 500 var(--t-set) var(--mono); padding: 10px 12px 10px 0; }
.fz-table tbody tr { border-top: 1px solid var(--line); }
.fz-table tbody tr:first-child { border-top: 1.5px solid var(--rule); }
.fz-note { margin: 14px 0 0; max-width: 46rem; color: var(--ink-2); }
.fz-sub { font-size: var(--t-set); margin: 36px 0 4px; }
.fz-other { columns: 2 320px; column-gap: 48px; }
.fz-other li { break-inside: avoid; }
@media (max-width: 600px) {
  .fz-table { min-width: 0; font-size: 15px; }
  .fz-table thead small { display: none; }
  .fz-size { font-size: 14px; }
  .fz-table tbody td { font-size: 15px; }
}
/* piante delle superfici (scripts/size_plans.py) */
.sz-floor { fill: var(--sheet); stroke: none; }
.sz-garden { fill: var(--garden); stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 5 4; }
.sz-terrace { fill: none; stroke: var(--ink-2); stroke-width: .8; stroke-dasharray: 3 3; }
.sz-ow { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: square; }
.sz-iw { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: square; }
.sz-win { stroke: var(--ink); stroke-width: 1; }
.sz-leaf { stroke: var(--ink); stroke-width: 1.1; }
.sz-arc { fill: none; stroke: var(--ink-2); stroke-width: .7; stroke-dasharray: 2 2; }
.sz-stair { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.sz-walk, .sz-walk-tip { fill: none; stroke: var(--ink-2); stroke-width: .8; }
.sz-room { font: 8px var(--mono); fill: var(--ink-2); }
.sz-muted { fill: var(--ink-2); }

/* Tre momenti su una linea (prima, durante, dopo); verticale sul telefono */
.mt { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; position: relative; }
.mt::before { content: ""; position: absolute; left: 0; right: 0; top: 33px; border-top: 1.5px solid var(--pen); }
.mt li { position: relative; }
.mt h3 { font-size: var(--t-set); margin: 0; }
@media (max-width: 760px) {
  .mt { grid-template-columns: 1fr; gap: 22px; padding-left: 24px; }
  .mt::before { left: 5px; right: auto; top: 6px; bottom: 6px; border-top: 0; border-left: 1.5px solid var(--pen); }
}