/* The site's one stylesheet. Order: tokens → base → shared components (buttons, fields, notices, cards: every page uses
   these, no page repaints them) → the pages, in the order a visitor meets them. */

/* ---- Tokens ---- */
:root {
  /* the brand (website_brief.md, "Brand") */
  --verde: #17402f; --escuro: #0d1f18; --cobre: #b5552a; --casca: #d9b27c; --papel: #f5f2ea; --musgo: #dfe4d8; --tinta: #1c1b18; --cinza: #5f5b52;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif; --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  /* roles: what a colour is for. Text on these grounds passes WCAG AA (4.5:1); borders and focus rings 3:1 */
  --cobre-texto: #9e4720;      /* copper as text and links: --cobre is 4.4:1 on papel, this is 5.6:1. The button fill stays --cobre */
  --cobre-escuro: #9a4622;     /* the primary button on hover */
  --erro: #b3261e;
  --superficie: #fbf9f4;       /* cards and boxes on papel */
  --campo: #fff;               /* the inside of a field */
  --linha: #d5d0c4;            /* card borders, table rules */
  --linha-suave: #e3ddcf;      /* hairlines between rows */
  --linha-campo: #8a8478;      /* a field's border: 3.4:1 on papel, so the box is seen */
  --tracejado: #c9c3b5;        /* drop zones */
  --selecionado: #eef1ea;
  --tom-cobre: #f3e4d8; --tom-verde: #e2eadf; --tom-erro: #f6e0dc;
  --placeholder: #77715f;      /* examples in a box: lighter than typed text, still readable (4.6:1) */
  --desligado: #ebe8e1;
  --raio: 3px;                 /* every corner (brand) */
  --controlo: 48px;            /* every button and field: they line up side by side, and a thumb finds them */
  --foco: 2px solid var(--verde);
  --sombra-menu: 0 8px 24px rgba(13, 31, 24, .12);
}

/* ---- Base ---- */
* { box-sizing: border-box; }
/* 17px: the owners are often 50–75 and read on a phone */
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--cobre-texto); text-underline-offset: 2px; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: var(--foco); outline-offset: 2px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Buttons: .btn + one look. Copper .primary is the page's one main action; plain .btn (or .ghost) is the outlined green
   secondary; .light is the outline on the dark green block; .risk is a destructive action. No page repaints a .btn. ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--controlo); padding: 10px 20px;
  border: 1.5px solid var(--verde); border-radius: var(--raio); background: transparent; color: var(--verde); cursor: pointer;
  font: 600 16px/1.25 var(--sans); text-align: center; text-decoration: none; }
.btn:hover { background: var(--selecionado); }
.btn.primary { background: var(--cobre); border-color: var(--cobre); color: #fff; }
.btn.primary:hover { background: var(--cobre-escuro); border-color: var(--cobre-escuro); }
.btn.light { border-color: var(--papel); color: var(--papel); }
.btn.light:hover { background: rgba(245, 242, 234, .12); }
.btn.risk { border-color: var(--cobre); color: var(--cobre-texto); }
.btn.risk:hover { background: var(--tom-cobre); }
.btn.calm { background: var(--verde); border-color: var(--verde); color: var(--papel); }   /* the safe way out of a dialog: it has the focus */
.btn.calm:hover { background: var(--escuro); }
.btn:disabled { opacity: .6; cursor: default; }
/* a button that reads as a link (secondary actions inside a sentence or a card) */
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--cobre-texto); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkish.quiet { color: var(--cinza); font-size: 15px; }

/* ---- Fields: one look for every box on the site. :where() keeps it at zero specificity, so a page only sets widths ---- */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="range"]), select, textarea) {
  min-height: var(--controlo); padding: 0 12px; border: 1.5px solid var(--linha-campo); border-radius: var(--raio);
  background-color: var(--campo); color: var(--tinta); font: inherit; font-size: 17px; }   /* 17px: also keeps iOS from zooming in */
:where(textarea) { padding: 10px 12px; }
:where(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; accent-color: var(--verde); }
:where(input, select, textarea):disabled { background-color: var(--desligado); color: var(--cinza); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); }
/* a field with an error: its box turns red (Django sets aria-invalid; _field.html sets .bad), and the message is under it */
:is(.bad, .field.bad) :is(input, select, textarea), [aria-invalid="true"] { border-color: var(--erro); }
:is(.bad, .field.bad) :is(input, select, textarea):focus-visible, [aria-invalid="true"]:focus-visible { outline-color: var(--erro); }   /* one red frame, not red and green */
.err { color: var(--erro); font-size: 15px; font-weight: 500; }
.err a { color: inherit; }
/* the one field partial (landing/_field.html): label, box, hint, error */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; }
.field > label { font-size: 15px; font-weight: 600; color: var(--verde); }
.field .hint { margin: 0; font-size: 15px; color: var(--cinza); line-height: 1.45; }
.field .err { margin: 0; }
.field :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="file"]) { width: 100%; }

/* ---- File boxes: label.drop is the box to click or drop on. With input.pick inside, the box speaks Portuguese whatever the
   browser's language: the native input is hidden (still focusable), a .btn «Escolher o ficheiro» and the chosen file's name
   stand in for it (site.js fills .file-name). ---- */
label.drop { position: relative; }
label.drop input[type="file"].pick { position: absolute; width: 1px; height: 1px; opacity: 0; }
label.drop:has(input.pick:focus-visible) { outline: var(--foco); outline-offset: 2px; }
label.drop .pick-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
label.drop .file-name { color: var(--tinta); overflow-wrap: anywhere; }

/* ---- Notices: a box that says something about the page (status, warning, error) ---- */
.notice { margin: 16px 0; padding: 14px 18px; border-left: 3px solid var(--verde); border-radius: 0 var(--raio) var(--raio) 0; background: var(--musgo); }
.notice > :last-child { margin-bottom: 0; }
.notice.warn { border-left-color: var(--cobre); background: var(--tom-cobre); }
.notice.error { border-left-color: var(--erro); background: var(--tom-erro); }
.card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 20px; }

/* ---- The landing page (landing/index.html) ---- */
/* --edge: the hero's bar, copy and figures sit near the screen's edges, wider than the sections below (Joao, 2026-10-08:
   the hero lined up with the sections read worse than the full-width hero); but capped at 1600px, centred on the page's
   own paper: on a big screen the copy and the stand drifted to opposite edges with a wide empty gap between (Joao, 2026-10-12) */
.hero { --edge: clamp(16px, 4vw, 48px);
  max-width: 1600px; margin: 0 auto; position: relative; height: min(100svh, 860px); min-height: 560px; background: var(--papel); overflow: hidden; color: var(--verde); }
.hero canvas { display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .6s ease; }   /* decorative: no interaction, the page scrolls over it */
.hero canvas.on { opacity: 1; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* wide screen: the still whole, below the top bar, and right of the copy (its stand fills the right 60% of the picture, so
   the box starts under the copy and only the empty part of the picture sits behind it) */
@media (min-width: 761px) {
  .hero .poster { top: 72px; left: calc(var(--edge) + 200px); width: auto; height: calc(100% - 72px); }
  .hero .poster img { object-fit: contain; object-position: right center; }
}
.loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--papel); transition: opacity .5s ease; }
[hidden] { display: none !important; }   /* the attribute wins over any display rule (a .find is a grid, a .door a grid…) */
.loader svg { width: 120px; height: 120px; }
.loader .g { stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader .t { opacity: 0; transition: opacity .3s; }
.loader div { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); }
.hero .top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--edge); z-index: 2; }
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--verde); }
.lockup svg { width: 34px; height: 34px; }
.lockup span { font-family: var(--serif); font-size: 22px; }
.nav { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; }
.nav a { color: var(--verde); text-decoration: none; }
.nav { font-size: 16px; }
.nav .btn { min-height: 44px; padding: 8px 18px; font-size: 15px; white-space: nowrap; }
.nav .acct.topnav { display: flex; }
.hero .copy { position: absolute; left: var(--edge); top: 50%; transform: translateY(-50%); max-width: 520px; display: flex; flex-direction: column; gap: 16px; z-index: 2; padding-right: 16px; }
.hero .copy::before { content: ""; position: absolute; inset: -60px -40px -60px -80px; background: radial-gradient(60% 70% at 30% 50%, rgba(245,242,234,.92), rgba(245,242,234,0)); z-index: -1; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.08; margin: 0; text-wrap: balance; }
.hero .lede { margin: 0; font-size: 18px; color: var(--tinta); max-width: 44ch; }
.cta { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; }
.cta .textlink { color: var(--verde); font-size: 17px; font-weight: 500; text-underline-offset: 3px; }   /* one button for owners; watching the stand is the quieter way in */
.hero .panel { position: absolute; right: var(--edge); bottom: clamp(18px, 4vh, 40px); width: 400px; padding: 16px 20px 14px; background: rgba(245,242,234,.86); backdrop-filter: blur(6px); border: 1px solid var(--linha-suave); border-radius: var(--raio); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; z-index: 2; opacity: 0; transition: opacity .5s ease; }
.hero .panel.on { opacity: 1; }
.hero .panel header { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--verde); padding-bottom: 8px; border-bottom: 1px solid var(--cobre); }
.hero .row { display: flex; flex-direction: column; gap: 1px; opacity: 0; }
.hero .row.on { opacity: 1; }
.hero .row small { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); }
.hero .row.wide { grid-column: 1 / -1; }   /* «Pronto para corte» on one line */
.hero .row b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--verde); font-variant-numeric: tabular-nums; min-height: 25px; }
main { background: var(--papel); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.strip { background: var(--musgo); color: var(--verde); padding: 36px 0 32px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tile b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; color: var(--verde); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.tile small { display: block; font-size: 15px; line-height: 1.4; color: var(--cinza); }
.sec { padding: clamp(40px, 6vw, 64px) 0; }
.sec.alt { background: var(--musgo); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.two.wide { grid-template-columns: 1.4fr 1fr; }
main h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; margin: 0 0 12px; color: var(--verde); text-wrap: balance; }
main p { margin: 0 0 10px; color: var(--tinta); max-width: 60ch; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 8px; }
.steps > div { border-top: 3px solid var(--verde); padding-top: 18px; }
.steps .ico { width: 84px; height: 84px; display: block; margin-bottom: 16px; }
.steps b.n { display: inline-block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; color: var(--cobre); margin-right: 10px; vertical-align: -1px; }
.steps strong { display: block; font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.steps p { font-size: 16px; }
.steps-note { margin-top: 24px; font-weight: 500; color: var(--verde); }
.register { display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center; border-radius: var(--raio); padding: clamp(20px, 3vw, 36px); background: var(--verde); color: var(--papel); }
.register-cta { margin: 0; }
.register h2 { color: var(--papel); }
.register p { color: var(--musgo); }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.form label { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; font-size: 15px; font-weight: 600; color: var(--verde); }
.form label > :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { width: 100%; }   /* a box fills its column; a tick box keeps its size */
.form .check { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 12px; padding: 4px 0; font-weight: 400; color: var(--tinta); cursor: pointer; }   /* the whole line is the tap area */
.form .check input { flex: none; margin-top: 2px; }
.form > .btn { grid-column: 1 / -1; justify-self: start; }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.faq div { font-size: 16px; line-height: 1.55; }
.faq b { display: block; font-weight: 600; margin-bottom: 2px; }
.cta-end { margin-top: 28px; }
/* the footer of every page (landing/_footer.html) */
.foot { background: var(--musgo); border-top: 1px solid var(--linha-suave); padding: 28px 0 40px; font-size: 15px; color: var(--cinza); text-align: center; }   /* centred: left-aligned it read as stray lines (Joao, 2026-10-12) */
.legal { margin: 14px 0 6px; line-height: 1.6; }
.legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; line-height: 1.6; }
.buyers { background: var(--papel); border-top: 1px solid var(--linha-suave); padding: 22px 0; font-size: 17px; color: var(--tinta); }
.buyers p { margin: 0; max-width: none; }
.foot-id { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--serif); font-size: 18px; color: var(--verde); }
@media (max-width: 760px) {
  /* phone: top bar, copy, the image in its own band, then the figures, all in flow; nothing sits behind text */
  /* a grid: the loader sits in the picture's band only, so the headline and the buttons show at once on slow data (phone
     QA 2026-09-30: 24–90 s of «A carregar» on 3G) */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "copy" "img" "panel"; height: auto; min-height: 0; }
  .hero canvas, .poster, .loader { grid-area: img; }
  .hero canvas, .poster { position: static; width: 100%; height: min(52vh, 420px); }
  .poster { height: auto; aspect-ratio: 4 / 3; }
  .poster img { aspect-ratio: 4 / 3; height: auto; }
  .hero .top { grid-area: top; position: static; }
  .hero .copy { grid-area: copy; }
  .hero .panel { grid-area: panel; }
  .loader { position: relative; inset: auto; z-index: 3; }
  .nav > :not(.acct) { display: none; }   /* the hero's two buttons are right below; only «Entrar» / «Os meus terrenos» stays in the bar */
  .nav .acct { padding: 10px 4px; }
  .cta .btn, .cta-end .btn { width: 100%; }
  .hero .copy { position: relative; left: auto; top: auto; transform: none; max-width: none; padding: 20px 16px 22px; }
  .hero .copy::before { display: none; }
  .hero h1 { font-size: 30px; }
  .hero .panel { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: 14px 16px 18px; padding: 12px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
  .hero .row b { font-size: 17px; min-height: 20px; }
  .hero .row.hide-m { display: none; }
  /* the figures at once, under the picture: on slow phone data they are the first proof that this is real (hero.js types them only on a wide screen) */
  .hero .panel, .hero .row { opacity: 1; }
  .tiles, .two, .two.wide, .steps, .register, .faq, .form { grid-template-columns: 1fr; }
  .legal-links { flex-direction: column; gap: 0; }
  .legal-links a { display: inline-block; padding: 8px 0; }   /* a thumb-sized target each */
  .tiles { text-align: center; gap: 22px; }   /* stacked, the big numbers centre: display figures, not reading text */
  .form .check, .form > .btn { grid-column: auto; }
  .form > .btn, .form .actions .btn { width: 100%; }   /* a form's buttons as wide as its boxes on a phone */
}

.form .err { grid-column: 1 / -1; margin: -6px 0 0; }   /* right under the box it is about */
.page { max-width: 720px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 48px) 80px; }
.page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 44px); line-height: 1.08; color: var(--verde); margin: 0 0 12px; text-wrap: balance; }
.page .lede { font-size: 18px; color: var(--tinta); margin: 0 0 28px; max-width: 60ch; }
/* a page's section headings: always smaller than its h1, and well apart from the text above */
.page h2 { font-size: clamp(23px, 2.4vw, 28px); }
.page :is(p, ul, ol, dl, form, table, .lines, .notice, .card) + h2 { margin-top: 36px; }
/* the letter's code (owners/_codigo_carta.html): spaced capitals, so it reads like the code on the paper and each character is checked */
.page .form.one + .fine { margin-top: 20px; }   /* «Não recebeu carta?»: apart from the button, not its caption */
/* /privacidade (landing/privacidade.html): the contents under the lede, one link per section */
.toc { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); font-size: 16px; }
.toc a { padding: 4px 0; }
.page .toc + h2 { margin-top: 36px; }
.page h2[id] { scroll-margin-top: 16px; }
.page ul.plain li:last-child { margin-bottom: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px clamp(16px, 4vw, 48px); }

/* /terreno/: find your territory (owners/templates/owners/terreno.html) */
.page.wide { max-width: 1120px; }

/* /comprador/: what a buyer gains, then the e-mail (buyers/templates/buyers/inicio.html) */
.buyer-in { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .buyer-in { grid-template-columns: 1.35fr 1fr; gap: 64px; } }
.buyer-in .gains { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.buyer-in .gains li { padding-left: 18px; border-left: 2px solid var(--casca); line-height: 1.5; }
.buyer-in .gains b { color: var(--verde); display: block; }
.buyer-in .signup { background: var(--superficie); border: 1px solid var(--linha-suave); border-radius: var(--raio); padding: 24px; }
@media (min-width: 900px) { .buyer-in .signup { position: sticky; top: 24px; } }
.buyer-in .signup h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--verde); margin: 0 0 8px; }
.buyer-in .signup .small { font-size: 15px; color: var(--cinza); margin: 12px 0 0; }
.buyer-in .footnote { grid-column: 1 / -1; font-size: 15px; color: var(--cinza); margin: 0; }
.buyer-in .footnote a { color: var(--verde); }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }   /* the two ways in: the caderneta, or the map */
.door { text-align: left; padding: 14px 16px; border: 1.5px solid var(--linha); border-radius: var(--raio); background: var(--superficie); font: inherit; cursor: pointer; display: grid; gap: 4px; }
/* a round mark before each door's title, filled on the chosen one: it reads as «choose one» (design review 2026-10-08) */
.door b { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--verde); }
.door b::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linha-campo); background: var(--campo); }
.door small { padding-left: 30px; font-size: 15px; color: var(--cinza); line-height: 1.4; }
.door[aria-selected="true"] { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); background: var(--selecionado); }
.door[aria-selected="true"] b::before { border-color: var(--verde); background: var(--verde); box-shadow: inset 0 0 0 4px var(--campo); }
@media (max-width: 640px) { .doors { grid-template-columns: 1fr; } }
.finder { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; margin-bottom: 18px; }
.find.caderneta { grid-template-columns: minmax(0, 640px); }
.find.caderneta .hint { font-size: 15px; font-weight: 400; color: var(--cinza); }
.find { position: relative; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px 12px; align-items: end; }
.find.artigo { grid-template-columns: 1.2fr 1.4fr 1fr auto; }
.find.lugar { grid-template-columns: minmax(0, 480px) auto; justify-content: start; }
.find .lugar-box { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page .find-h { margin: 26px 0 10px; font: 600 18px/1.3 var(--sans); color: var(--verde); }   /* .page: over the page h2 size: a label for the search under it, not a section */
.page .find-h:first-child { margin-top: 4px; }
label.drop .drop-title { font-weight: 600; color: var(--verde); }
.find label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; color: var(--verde); }
.find input, .find select { min-width: 0; }
.find .msg { grid-column: 1 / -1; margin: 0; font-size: 16px; color: var(--verde); min-height: 1.4em; }
.hits { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; list-style: none; margin: 0; padding: 4px 0; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-menu); max-height: 280px; overflow: auto; }
.hits button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 14px; font: inherit; cursor: pointer; }
.hits button:hover, .hits button:focus-visible { background: var(--musgo); outline: none; }
.hits small { color: var(--cinza); margin-left: 6px; }
.mapwrap { position: relative; }
#map { height: min(76vh, 960px); min-height: 480px; border-radius: var(--raio); background: var(--musgo); }
.mapwrap > .hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(245,242,234,.94); color: var(--verde); padding: 8px 14px; border-radius: var(--raio); font-size: 16px; font-weight: 500; z-index: 3; }
.panel-sel { position: absolute; right: 14px; top: 14px; width: 340px; max-height: calc(100% - 28px); overflow: auto; background: rgba(245,242,234,.96); border: 1px solid var(--linha-suave); border-radius: var(--raio); padding: 14px 16px 16px; z-index: 4; }
.panel-sel header { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--verde); padding-bottom: 8px; border-bottom: 1px solid var(--cobre); margin-bottom: 8px; }
.panel-sel .sel { list-style: none; margin: 0; padding: 0; }
.panel-sel .sel li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; padding: 2px 0; }
.panel-sel .sel button { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--cobre-texto); font-size: 24px; line-height: 1; cursor: pointer; }   /* «×»: a thumb-sized target */
.panel-sel .tot { margin: 6px 0 2px; font-size: 16px; color: var(--cinza); }
.panel-sel .tot b { color: var(--verde); font-family: var(--serif); font-weight: 400; font-size: 20px; margin-left: 6px; }
.panel-sel .more { font-size: 15px; color: var(--cinza); margin: 0 0 8px; }
.panel-sel .q { font-family: var(--serif); font-size: 22px; color: var(--verde); margin: 6px 0 10px; }
.panel-sel .form { grid-template-columns: 1fr; gap: 10px; }
.panel-sel .form small { color: var(--cinza); font-size: 15px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.under { margin: 14px 0 0; font-size: 16px; }
.block { margin-top: 28px; padding: clamp(18px, 3vw, 28px); background: var(--musgo); border-radius: var(--raio); }
.block h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--verde); margin: 0 0 10px; }
.block p { max-width: 70ch; margin: 0 0 16px; }
.block .form { max-width: 720px; }
.maplibregl-ctrl-attrib { font-size: 11px; }
@media (max-width: 760px) {
  .finder, .find, .find.lugar, .find.artigo { grid-template-columns: minmax(0, 1fr); }
  #map { height: 60vh; min-height: 400px; }
  .panel-sel { position: static; width: auto; max-height: none; margin-top: 12px; }
}

/* Phase 1: the territory page (/t/<token>), login, os meus terrenos */
.topnav { display: flex; align-items: center; gap: 18px; }
.topnav > a { color: var(--verde); text-decoration: none; font-weight: 500; font-size: 16px; }   /* not .nav: the landing hides plain nav links on phones */
.flash { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
/* as wide as the page under it, so the message sits on the page's own column (design review, 2026-10-08) */
.flash:has(+ main.page:not(.wide)) { max-width: 720px; }
.flash:has(+ main.page.narrow) { max-width: 520px; }
.flash p { margin: 0 0 8px; padding: 12px 16px; border-left: 3px solid var(--verde); border-radius: 0 var(--raio) var(--raio) 0; background: var(--musgo); color: var(--verde); font-weight: 500; }
.flash p.warning { border-left-color: var(--cobre); background: var(--tom-cobre); color: var(--tinta); }   /* a warning or an error never looks like a success */
.flash p.error { border-left-color: var(--erro); background: var(--tom-erro); color: var(--erro); }
.page.narrow { max-width: 520px; }
.page .eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.page .fine { font-size: 15px; color: var(--cinza); margin: 6px 0 0; }
.report h1 { font-size: clamp(30px, 3.6vw, 40px); }
.mapimg { margin: 22px 0; }
.mapimg img { display: block; width: 100%; height: auto; border-radius: var(--raio); border: 1px solid var(--linha); }
.lines { display: grid; grid-template-columns: 1fr; gap: 0; margin: 20px 0 0; border-top: 1px solid var(--linha); }
.lines div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); align-items: baseline; }
.lines dt { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.lines dd { margin: 0; font-size: 17px; color: var(--tinta); }
.lines dd small { display: block; font-size: 15px; color: var(--cinza); }
.proj { margin-top: 26px; }
.proj h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--verde); margin: 0 0 8px; }
.proj ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.proj li { background: var(--musgo); border-radius: var(--raio); padding: 10px 8px; text-align: center; }
.proj li b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--cinza); }
.proj li span { font-family: var(--serif); font-size: 18px; color: var(--verde); }
.next { margin: 22px 0 0; font-size: 17px; }
.next b { color: var(--verde); }
/* the green box with the page's one action, box-wide (/t/<token> and /vender/) */
.action { margin-top: 30px; padding: clamp(18px, 3vw, 28px); background: var(--musgo); border-radius: var(--raio); }
.action p { margin: 0 0 14px; }
.action .form.one { max-width: none; }
.action .form > .btn, .action > .btn, .action form > .btn { justify-self: stretch; width: 100%; }
.action .form small { grid-column: 1 / -1; color: var(--cinza); font-size: 15px; }
.action .fine { margin: 12px 0 0; }
/* the terreno page (owners/t.html): the key number under the title with a way down to the action; a terreno in a request has its
   status in the green box right under the title instead (design review 2026-10-08) */
.report .keyline { margin: 16px 0 0; font-size: 18px; }
.report .keyline b { color: var(--verde); font-weight: 600; }
.report .keyline a { white-space: nowrap; font-weight: 500; }
.action.status { margin-top: 20px; border-left: 4px solid var(--verde); }
.action .status-head { margin: 0 0 6px; font: 400 26px/1.2 var(--serif); color: var(--verde); }
.action .code-actions { margin: 14px 0 0; }
.form.one { grid-template-columns: minmax(0, 1fr); max-width: 420px; }   /* minmax: a file field never pushes it past a phone (QA 2026-09-30) */
.inline { margin-top: 18px; font-size: 16px; color: var(--cinza); }
/* /entrar/: the ways in for whoever has no account yet, under the form */
.other-ways { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--linha-suave); font-size: 16px; }
/* the owner forms' e-mail and consent (owners/_email_consent.html): one block; the tick box's error right under it, the privacy
   line last */
.form .email-consent { grid-column: 1 / -1; display: grid; gap: 14px; min-width: 0; }
.email-consent .field { margin: 0; }
.email-consent > .hint { margin: 0; font-size: 15px; color: var(--cinza); }
.field.consent .err { margin: 0 0 0 32px; }   /* under the sentence, beside the box's column */
.field.consent input[aria-invalid="true"] { outline: 2px solid var(--erro); outline-offset: 2px; }   /* a tick box has no border to turn red */
.field:has(> .picker-list) { position: relative; }   /* picker.js's list under a box of the field partial */
/* a code reads as a code: the login's 6 digits and the letter's 8 characters, big, spaced, centred */
.field.code input, .code-box input[type="text"] { max-width: 100%; font-size: 26px; font-weight: 600; letter-spacing: .3em; text-align: center; text-transform: uppercase; font-variant-numeric: tabular-nums; }   /* a code reads as a code: big, spaced, capitals (the login code, the letter code) */
.field.code input::placeholder, .code-box input::placeholder { letter-spacing: .1em; }
/* «Os meus terrenos» (Joao, 2026-09-30, variant C): the numbers, then the plots grouped by what is left to do */
.terrenos .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 14px 0 30px; }
.terrenos .stat { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.terrenos .stat .k { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); font-weight: 600; }
.terrenos .stat .v { font: 28px/1.15 var(--serif); color: var(--verde); margin-top: 4px; }
.terrenos .group { margin: 0 0 30px; }
.terrenos .group h2 { font: 24px/1.2 var(--serif); color: var(--verde); margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.terrenos .group h2 .count { font: 600 14px var(--sans); color: #fff; background: var(--cobre-texto); border-radius: 999px; padding: 1px 10px; }
.terrenos .group h2 .count.calm { background: var(--cinza); }
.terrenos .group > p { color: var(--cinza); margin: 0 0 12px; font-size: 16px; }
.plots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.plot { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.plot.hot { border-color: var(--cobre); box-shadow: inset 4px 0 0 var(--cobre); }
.plotlink { text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; gap: 4px; }
.plot .line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.plot .ref { font: 400 22px/1.2 var(--serif); color: var(--verde); }
.plot .ref small { font: 15px var(--sans); color: var(--cinza); white-space: nowrap; }
.plot .tag { flex: none; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--raio); background: var(--desligado); color: var(--cinza); }
.plot .tag.todo { background: var(--tom-cobre); color: var(--cobre-texto); }
.plot .tag.venda { background: var(--tom-verde); color: var(--verde); }
.plot .tag.curso { background: var(--tom-verde); color: #2f6b3f; }
.plot .tag.cresce { background: #f3ead9; color: #8a6424; }
.plot .where { font-size: 15px; color: var(--cinza); }
.plot .todo { font-size: 16px; font-weight: 600; color: var(--cobre-texto); }
.plot .detail { font-size: 16px; }
.plot .btn { align-self: flex-start; max-width: 100%; }
.plot-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; }
.add-plot { display: inline-flex; align-items: center; gap: 10px; border: 2px dashed var(--tracejado); border-radius: var(--raio); padding: 14px 18px; color: var(--verde); text-decoration: none; font-weight: 600; }
/* the account menu, top right (base.html) */
.account { position: relative; }
.account summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; border: 1px solid var(--linha); border-radius: 999px; padding: 4px 14px 4px 6px; font-size: 15px; color: var(--tinta); }
.account summary::-webkit-details-marker { display: none; }
.account summary::after { content: "▾"; color: var(--cinza); }
.account .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; }
.account .menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-menu); min-width: 260px; padding: 6px; z-index: 30; }
.account .menu > * { display: block; width: 100%; text-align: left; padding: 12px 12px; border-radius: var(--raio); font-size: 16px; }
.account .menu span { color: var(--cinza); font-size: 14px; overflow-wrap: anywhere; }
.account .menu .quiet { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--linha-suave); border-radius: 0; color: var(--cinza); font-size: 15px; }   /* «Apagar a minha conta»: last, apart from «Sair» */
.account .menu a, .account .menu button { color: var(--tinta); text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; }
.account .menu form { padding: 0; }
.account .menu button { width: 100%; text-align: left; padding: 12px 12px; border-radius: var(--raio); }
.account .menu a:hover, .account .menu button:hover { background: var(--musgo); }
@media (max-width: 600px) { .account .email { display: none; } }
/* a phone's bar holds the name, «Os meus terrenos» and the avatar on one line (390px wide) */
.lockup span, .topnav > a, .nav .acct > a { white-space: nowrap; }
@media (max-width: 440px) {
  .lockup { gap: 8px; }
  .lockup svg { width: 30px; height: 30px; }
  .lockup span { font-size: 19px; }
  .topnav { gap: 10px; }
  .topnav > a, .nav .acct > a { font-size: 15px; }
  .account summary { padding: 4px; }
  .account summary::after { display: none; }
}
.cta-row { margin: 18px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.steps-list { margin: 22px 0 0; padding-left: 22px; display: grid; gap: 14px; font-size: 17px; }
.steps-list b { color: var(--verde); }
.page .eyebrow a { color: inherit; text-decoration: none; }
.page .eyebrow a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .lines div { grid-template-columns: 1fr; gap: 2px; }
  /* the five years as a list, year then value on each line: 3 + 2 boxes read as two rows of something (design review 2026-10-08) */
  .proj ol { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--linha); }
  .proj li { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 2px; background: none; border-radius: 0; border-bottom: 1px solid var(--linha); text-align: left; }
  .proj li b { font-size: 15px; letter-spacing: .06em; }
}

/* Phase 2: the auction request (owners/templates/owners/mandato/) */
.page .contact { margin-top: 32px; }   /* "Tem dúvidas? Escreva-nos", under every page of the request */
.form fieldset { grid-column: 1 / -1; }
.form input:read-only:not([type="file"], [type="checkbox"], [type="radio"]) { background-color: var(--musgo); color: var(--cinza); }   /* "sou eu": the caderneta's name and NIF, not to be edited */
/* step 2, the "ficha" (Joao, 2026-09-20; its own class names, since .top, .cards and .card belong to the hero and the terrenos list): the titulares as cards with a three-way switch, then one boxed field per line, the
   width of the box for the length of the answer; the name and NIF locked and tagged when they come from the caderneta */
.form.ficha { display: block; max-width: 640px; }
.form.ficha h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; margin: 28px 0 10px; color: var(--verde); }
.form.ficha .sub { margin: 0 0 16px; color: var(--cinza); max-width: 60ch; }
.form.ficha .field textarea { min-height: 96px; resize: vertical; }
.form.ficha .field.nif input { max-width: 240px; }
.form.ficha .field.civil_id input { max-width: 220px; }
.form.ficha .field.phone input { max-width: 260px; }
.form.ficha .pair { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; }   /* the postal code and the locality on one line */
@media (max-width: 480px) { .form.ficha .pair { grid-template-columns: 1fr; gap: 0; } }
.form.ficha .couple { border-left: 3px solid var(--casca); padding-left: 16px; margin: -6px 0 18px; }
.form.ficha .field.hidden, .form.ficha .couple.hidden, .form.ficha .part.hidden, .form.ficha button.hidden { display: none; }
.form.ficha .titulares { display: grid; gap: 10px; }
.form.ficha .titular { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 12px; }
.form.ficha .titular.is-me { border-color: var(--verde); background: var(--selecionado); }
.form.ficha .titular .titular-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.form.ficha .titular .titular-top b { font-size: 17px; }
.form.ficha .titular .acts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }   /* «Sou eu» a toggle, «Convidar» a link beside it */
.form.ficha .titular .titular-top small { display: block; color: var(--cinza); font-size: 15px; }
.form.ficha .titular .meta { margin: 0; font-size: 15px; color: var(--cinza); }
.form.ficha .titular .field { margin: 0; }
.form.ficha .titular.estate { background: transparent; border-style: dashed; }   /* an estate: one head, its heirs nested inside; a usufruct: the usufructuary and the bare owners */
.form.ficha .titulares.nested { padding-left: 12px; border-left: 3px solid var(--casca); }
.form.ficha .titular.estate .titular-top { align-items: flex-start; }
/* the panel above the cards (pedido.html, views_mandate._where): where the signatures (or the sale) stand in bold, the rule
   still missing, then the visitor's own step; green when all is well, a copper edge when the visitor has something to do */
.mandato .placar { margin: 0 0 14px; padding: 14px 18px; border-left: 4px solid var(--verde); border-radius: 0 var(--raio) var(--raio) 0; background: var(--musgo); }
.mandato .placar p { margin: 0; }
.mandato .placar p + p { margin-top: 6px; }
.mandato .placar .head { font-size: 18px; font-weight: 600; color: var(--verde); line-height: 1.4; }
.mandato .placar .more, .mandato .placar .step { font-size: 16px; color: var(--tinta); }
.mandato .placar .step { margin-top: 10px; }
.mandato .placar.todo { border-color: var(--cobre); background: var(--tom-cobre); }
.mandato .placar.todo .head { color: var(--tinta); }   /* the copper edge and ground say «your turn»; the words stay calm ink (blind judge: bold copper text was heavy) */
/* the steps of the request (pedido.html): done (a tick), now (bold, green), to come (grey); a phone shows only the step now */
.mandato .progress { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: -8px 0 4px; padding: 0; font-size: 16px; color: var(--cinza); }
.mandato .progress li { display: flex; align-items: center; gap: 10px; }
.mandato .progress .n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--linha-campo); font-size: 15px; font-weight: 600; }
.mandato .progress .done { color: var(--verde); }
.mandato .progress .done .n { background: var(--tom-verde); border-color: var(--verde); }
.mandato .progress .now { color: var(--verde); font-weight: 600; }
.mandato .progress .now .n { background: var(--verde); border-color: var(--verde); color: var(--papel); }
.mandato .progress .of { display: none; }
/* a step that can be opened is a link to its section (views_mandate._where); one that cannot start yet stays grey text */
.mandato .progress a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.mandato .progress a .label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }   /* the words, not the tick */
.mandato .progress a:hover .label { text-decoration-thickness: 2px; }
.mandato .progress .plain { display: flex; align-items: center; gap: 10px; min-height: 44px; }
@media (max-width: 560px) {
  .mandato .progress li:not(.now) { display: none; }
  .mandato .progress .of { display: inline; font-weight: 400; color: var(--cinza); }
}
/* «Assinou o seu mandato ✓»: the success, its download a button (pedido.html) */
.mandato .signed-box { padding: 16px 20px; border: 1.5px solid var(--verde); border-left-width: 4px; border-radius: var(--raio); background: var(--superficie); display: grid; gap: 10px; justify-items: start; }
.mandato .signed-box p { margin: 0; }
.mandato .signed-box .now { font-size: 19px; font-weight: 600; color: var(--verde); }
.mandato .summary-line { margin: 0; color: var(--tinta); }
.mandato .signed-box + form { margin-top: 10px; }   /* «Cancelar o meu mandato»: apart from the box */
/* small type for older eyes (design review, 2026-10-08): the title bigger than the sections on a phone too, the terreno in
   normal case under it, the fine print at 15px (.page .fine) */
.mandato h1 { font-size: clamp(32px, 4vw, 40px); }
.mandato .where { margin: -4px 0 8px; font-size: 17px; font-weight: 600; color: var(--verde); }
.form.ficha .titular.is-me .field.email, .form.ficha .titular.no-contact .field.email { display: none; }
.form.ficha .titular[data-role="rep"]:not(.is-me):not(.no-contact) .field.email { display: flex; }   /* a company or public body: the box for its representative's e-mail; no switch on the caderneta page, a switch on the registry page (the classes then hide it) */
.form.ficha .seg { display: inline-flex; border: 1.5px solid var(--verde); border-radius: var(--raio); overflow: hidden; }
.form.ficha .seg label { display: block; position: relative; cursor: pointer; border-left: 1.5px solid var(--verde); }
.form.ficha .seg label:first-child { border-left: 0; }
.form.ficha .seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.form.ficha .seg span { display: block; padding: 10px 16px; font-size: 15px; font-weight: 600; color: var(--verde); white-space: nowrap; }
.form.ficha .seg label:has(input:checked) span { background: var(--verde); color: var(--papel); }
.form.ficha .seg input:focus-visible + span { outline: 2px solid var(--cobre); outline-offset: -2px; }
.form.ficha .err.live { margin: 10px 0 0; }
.form.ficha .warn { margin: 20px 0 6px; }
.form.ficha .btn[type="submit"] { margin-top: 8px; }
.form fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 14px; margin: 0; }
.form fieldset legend { font-size: 15px; font-weight: 600; color: var(--verde); padding: 0 4px; }
.form fieldset ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.form small.ok { color: var(--verde); font-weight: 400; }
.page .warn { margin: 14px 0; padding: 12px 16px; border-left: 3px solid var(--cobre); border-radius: 0 var(--raio) var(--raio) 0; background: var(--tom-cobre); font-size: 16px; }
.page .warn form { display: inline; }
.page .warn.refused p { margin: 0 0 6px; }   /* a refused caderneta: what to do, in the box */
.page .warn.refused .fine { margin: 8px 0 0; }
.form .warn { margin: 0; }   /* inside the form grid the gap spaces it */
label.drop.has-doc { border-style: solid; border-color: var(--verde); }   /* a caderneta already in: the box reads as done, the input is for a swap */
.page ul.plain { padding-left: 20px; font-size: 17px; }
.page ul.plain li { margin: 0 0 8px; }
.signers { margin: 8px 0 24px; padding-left: 20px; font-size: 17px; }
.steps-list .form { margin-top: 10px; }

/* the registry request on one page (owners/mandato/pedido.html): the sections fold into a line once done */
.mandato .fold.folded .body { display: none; }
.mandato .fold .summary { display: none; margin: 0; color: var(--cinza); }
.mandato .fold.folded .summary { display: block; }
.mandato .fold .summary.scope { margin-top: 4px; font-size: 16px; }   /* whose contract a change reaches (Joao, 2026-10-08) */
.mandato .signers .hist { display: block; font-size: 15px; color: var(--cinza); }   /* a price's changes, under it (views_mandate._floor_items) */
.mandato .fold:not(.folded) .unfold { display: none; }
/* a section's heading with its «Alterar» on the right: a button, not a small link (GOV.UK «Change»; design review, 2026-10-08) */
.mandato .fold-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.mandato .fold-head h2 { margin: 0; }
.mandato .fold.folded { padding-bottom: 16px; border-bottom: 1px solid var(--linha); }   /* a done section: one line and its «Alterar» */
.mandato .invite.hidden { display: none; }
.mandato .invite { display: grid; gap: 8px; }
.mandato .invite input.copy { width: 100%; max-width: 340px; }
.invite-status:empty { display: none; }
.mandato .tag { font-size: 15px; color: var(--cinza); }
.mandato .tag.ok { color: var(--verde); font-weight: 600; }
.mandato .tag.mine { padding: 3px 10px; border-radius: var(--raio); background: var(--tom-verde); color: var(--verde); font-weight: 600; }   /* «O seu nome» */
.mandato .seg.hidden { display: none; }
/* «Primeiro, carregue em «Sou eu»…» goes as soon as a name is picked: it was said by the server before the click */
.mandato:has(input[name="me"]:checked) .claim-hint { display: none; }
.mandato .caderneta { margin: 14px 0 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; }
.mandato .caderneta > *, .mandato .caderneta input[type="file"] { min-width: 0; max-width: 100%; }
.mandato .caderneta form, .mandato .caderneta input[type="file"] { width: 100%; }   /* shrink-to-fit would take the file field's own width */
.mandato .fine.box { padding: 12px 16px; background: var(--musgo); }
.mandato .part { margin-top: 48px; }   /* the sections of the request's page, well apart */
.mandato .form label .hint { font-size: 15px; font-weight: 400; color: var(--cinza); }
.mandato .form .lot { margin: 10px 0 0; }
/* the prices (_price_fields.html): a box as wide as a price, the € inside it on the right */
.mandato .field.price .money { position: relative; width: 220px; max-width: 100%; }
.mandato .field.price .money input { padding-right: 38px; font-variant-numeric: tabular-nums; }
.mandato .field.price .money span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--cinza); pointer-events: none; }
.mandato .field.price .hint .linkish { font-size: 15px; white-space: nowrap; }
.mandato details.how { margin: -6px 0 8px; font-size: 16px; }
.mandato details.how summary { cursor: pointer; color: var(--verde); font-weight: 600; }
.mandato details.how p { margin: 8px 0 0; }
.mandato .form .group { margin: 20px 0 0; font-size: 19px; color: var(--verde); }
.mandato .form h2 { margin: 28px 0 0; }
.mandato .form.one .field { margin: 0; }   /* the form's grid gap spaces the fields */
.mandato .form .field.iban input { max-width: 380px; }
/* a tick box an older hand can hit: 22px, its text 16px */
.mandato .form .check { font-size: 16px; }
.mandato .form .check input { width: 22px; height: 22px; }
.mandato .form .check.bad input { outline: 2px solid var(--erro); outline-offset: 1px; }
.mandato .back { margin: 0 0 10px; font-size: 16px; }
.mandato .back a { color: var(--verde); }
/* the certification of a terreno (_condicoes.html): Sim / Não / Não sei as the ficha's switch; the code's box only after «Sim» */
.mandato .form .cert .q { margin: 0 0 8px; color: var(--cinza); }
.mandato .form .cert .q .hint { display: block; }
.mandato .form .seg { display: inline-flex; border: 1.5px solid var(--verde); border-radius: 4px; overflow: hidden; }
.mandato .form .seg label { display: block; position: relative; cursor: pointer; border-left: 1.5px solid var(--verde); }
.mandato .form .seg label:first-child { border-left: 0; }
.mandato .form .seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.mandato .form .seg span { display: block; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--verde); white-space: nowrap; }
.mandato .form .seg label:has(input:checked) span { background: var(--verde); color: var(--papel); }
.mandato .form .seg input:focus-visible + span { outline: 2px solid var(--cobre); outline-offset: -2px; }
.mandato .form .cert { display: grid; gap: 8px; justify-items: start; }
.mandato .form .cert label.certwho { justify-self: stretch; }
.mandato .form .cert:not(:has(input[value="sim"]:checked)) label.certwho { display: none; }
.mandato .steps-list .step-cta { margin: 10px 0 0; text-align: center; }
.mandato .part.hidden { display: none; }
.mandato details.caderneta summary { cursor: pointer; font-weight: 600; color: var(--verde); }
.mandato details.caderneta[open] summary { margin-bottom: 8px; }
.mandato details.caderneta { display: block; }
.mandato details.caderneta > * + * { margin-top: 10px; }
/* the three steps to sign one's own mandate (_passos_assinar.html): a card each, its number in a circle, the action under the text */
.sign-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.sign-steps > li { position: relative; padding: 18px 20px 20px 66px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.sign-steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: 20px; top: 17px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--verde); color: var(--papel); font-weight: 600; font-size: 15px; display: grid; place-items: center; }
.sign-steps h3 { margin: 3px 0 8px; font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--verde); }
.sign-steps p { margin: 0 0 12px; font-size: 17px; line-height: 1.5; }
.sign-steps p.note { font-size: 15px; color: var(--cinza); }
.sign-steps p.aside { margin: 14px 0 0; }
.sign-steps p.aside + p.note { margin-top: 12px; }
.sign-steps form { display: grid; gap: 12px; justify-items: start; }
.sign-steps .drop { width: 100%; }
label.drop.bad { border-color: var(--erro); border-style: solid; }   /* an upload refused: the box itself says so, not only the line under it */
@media (max-width: 560px) {
  .sign-steps > li { padding: 16px 16px 18px 56px; }
  .sign-steps > li::before { left: 14px; }
  .sign-steps .btn { width: 100%; }
}
.sign-steps, .sign-steps > li, .sign-steps form { min-width: 0; max-width: 100%; }
.sign-steps .btn { max-width: 100%; }
.mandato fieldset.choice { border: 0; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.mandato .form .q { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--verde); }
.mandato .form .q .hint { display: block; font-size: 15px; font-weight: 400; color: var(--cinza); }
/* the request pages: text and forms as wide as the list of owners above them (Joao, QA 2026-09-28); the 720px column keeps lines readable */
.mandato p, .mandato .form.one, .mandato .form.ficha, .mandato .form.ficha .sub, .mandato .block p, .mandato .block .form { max-width: none; }
/* while a form is being sent (htmx puts .htmx-request on it): the button gives way to a progress line */
/* a file field never wider than its box (QA 2026-09-30: 16px past a phone's screen) */
input[type="file"] { max-width: 100%; min-width: 0; }
form .saving { display: none; align-items: center; gap: 10px; margin: 0; color: var(--cinza); }
form.htmx-request .saving { display: flex; }
form.htmx-request button[type="submit"] { display: none; }
form .saving::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--musgo); border-top-color: var(--verde); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* the map's caderneta door (terreno.js): the same circle beside its message while the Finanças check runs */
.msg.busy { display: flex; align-items: center; gap: 10px; }
.msg.busy::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--musgo); border-top-color: var(--verde); animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { form .saving::before, .msg.busy::before { animation: none; } }
/* a request htmx could not complete (base.html): said under the form, never silent */
.htmx-failed { color: var(--erro); }
/* "Os seus dados": the couple's questions only when the marital status asks them, by :has() (they survive a swap, and work
   without JavaScript). Only hiding rules, so the page's own .hidden (a row that is not asked the marital status) still wins */
.form.ficha:not(:has(select[name="marital"] option:is([value="adquiridos"], [value="geral"]):checked)) .couple { display: none; }
.form.ficha:not(:has(select[name="marital"] option[value="adquiridos"]:checked)) .field.couple_land { display: none; }
.form.ficha:not(:has(select[name="marital"] option[value="geral"]:checked)):not(:has(select[name="marital"] option[value="adquiridos"]:checked):has(select[name="couple_land"] option[value="couple"]:checked)) :is(.field.spouse_name, .field.spouse_email) { display: none; }
/* «Guardar» and «Cancelar» side by side (Joao, 2026-09-28); «Cancelar» on a folded section only once «alterar» opened it */
.form .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form .btn.refold { display: none; }   /* a first fill has nothing to cancel */
.fold.editing .form .btn.refold { display: inline-flex; }
.form.htmx-request .actions .btn { display: none; }
/* the dialog before a change that voids a mandate someone has (base.html) */
dialog.confirm { max-width: min(480px, calc(100vw - 32px)); border: 0; border-radius: var(--raio); padding: 0; background: var(--papel); color: var(--tinta); box-shadow: 0 12px 40px rgba(13, 31, 24, .25); }
dialog.confirm .inner { padding: 24px; }   /* not on the <dialog>: a click on it is then only the backdrop (base.html) */
dialog.confirm::backdrop { background: rgba(13, 31, 24, .45); }
dialog.confirm p { margin: 0 0 20px; font-size: 17px; line-height: 1.5; }
dialog.confirm .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* picker.js: the list under the concelho and freguesia boxes; the top one marked, Enter or Tab takes it (Joao, 2026-09-30) */
label:has(> .picker-list) { position: relative; }
.picker-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 4px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-menu); max-height: 300px; overflow-y: auto; font-size: 17px; color: var(--tinta); text-transform: none; letter-spacing: 0; font-weight: 400; }
.picker-list li { padding: 10px 14px; cursor: pointer; }
.picker-list li[aria-selected="true"] { background: var(--musgo); }
.picker-list li:hover { background: var(--selecionado); }

/* the footer of every page (base.html): the privacy page and the contact, quiet */

/* Phase 6: the buyer's account page (buyers/templates/buyers/conta.html): where the sign-up stands, then the data */
.buyer .buyer-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 22px; padding: 0; counter-reset: bstep; font-size: 16px; color: var(--cinza); }
.buyer .buyer-steps li { white-space: nowrap; }   /* «4. Pronto» never splits from its number */
.buyer .buyer-steps li::before { counter-increment: bstep; content: counter(bstep) ". "; }
.buyer .buyer-steps li.done { color: var(--verde); }
.buyer .buyer-steps li.done::after { content: " ✓"; }
.buyer .buyer-steps li.now { color: var(--cobre-texto); font-weight: 600; }
.buyer .buyer-data { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 16px; margin: 8px 0 16px; font-size: 17px; }
.buyer .buyer-data dt { font-weight: 600; color: var(--verde); }
.buyer .buyer-data dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .buyer .buyer-data { grid-template-columns: 1fr; gap: 2px; } .buyer .buyer-data dd { margin-bottom: 8px; } }
.buyer h2.buyer-h { margin: 32px 0 8px; }
.buyer .form.ficha label.check { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; font-size: 17px; }
.buyer .form.ficha label.check input { flex: none; margin-top: 3px; }
/* /regras (buyers/templates/buyers/regras.html): the buyer agreement as a page, the summary first */
.regras .regras-text { max-width: 70ch; font-size: 17px; line-height: 1.6; }
.regras .regras-text h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--verde); margin: 36px 0 10px; }
.regras .regras-text h3 { font-size: 18px; color: var(--verde); margin: 26px 0 8px; }
.regras .regras-text ol, .regras .regras-text ul { padding-left: 22px; }
.regras .regras-text li { margin: 0 0 8px; }
.regras .regras-text > ul:first-of-type { background: var(--musgo); border-left: 3px solid var(--verde); padding: 14px 18px 14px 36px; border-radius: 0 var(--raio) var(--raio) 0; }
.regras .regras-text hr { border: 0; border-top: 1px solid var(--linha); margin: 32px 0; }
.regras .regras-text table { border-collapse: collapse; width: 100%; font-size: 16px; }
.buyer .form.ficha .signer.hidden { display: none; }
.buyer .form.ficha .signer + .signer { border-top: 1px dashed var(--linha); padding-top: 14px; }
.buyer .form.ficha .add-signer { margin: -4px 0 18px; }
.buyer .form.ficha.sole .company-only, .buyer .form.ficha.sole .signer.extra { display: none; }   /* a sole trader: no role, nobody else */
.buyer .form.ficha .field.kind { flex-direction: row; gap: 0; flex-wrap: wrap; border: 1.5px solid var(--verde); border-radius: var(--raio); overflow: hidden; width: fit-content; max-width: 100%; }
.buyer .form.ficha .field.kind label.seg { position: relative; margin: 0; padding: 12px 18px; cursor: pointer; color: var(--verde); font-weight: 600; background: #fff; }
.buyer .form.ficha .field.kind label.seg + label.seg { border-left: 1.5px solid var(--verde); }
/* the radio itself is hidden: the label is the switch */
.buyer .form.ficha .field.kind label.seg input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.buyer .form.ficha .field.kind label.seg span { padding: 0; font-size: 16px; color: inherit; }   /* the label's colour, so the chosen one reads white on green */
.buyer .form.ficha .field.kind label.seg:has(input:checked) { background: var(--verde); color: var(--papel); }
.buyer .form.ficha .field.kind:has(input:focus-visible) { outline: var(--foco); outline-offset: 2px; }
.buyer .form.ficha:not(.sole) .sole-only { display: none; }   /* the headings say «a empresa» or «a sua atividade» with the toggle */
.buyer .resend { display: inline; }
.buyer .signers-status { list-style: none; padding: 0; margin: 0 0 12px; }
.buyer .signers-status li.done { color: var(--verde); }
.buyer .signers-status li.todo { color: var(--cobre-texto); font-weight: 600; }
.regras .regras-text th, .regras .regras-text td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linha); }
/* phones (QA 2026-09-30): the small links get a thumb-sized tap area (padding, not bigger text); «Arraste o ficheiro» is for a mouse */
@media (hover: none) {
  .drag-hint { display: none; }
}
@media (max-width: 760px) {
  .topnav > a, .form.ficha .titular .acts .linkish, .code-actions a, .code-actions button, .page .fine a, .linkish.quiet { display: inline-block; padding: 10px 2px; }
}
/* «Cancelar este pedido»: well apart from the page's main button, and a tap area of its own */
/* an IBAN reads in capitals as it is typed */
input.iban { text-transform: uppercase; }
input.iban::placeholder { text-transform: none; }
/* the privacy line under a form's tick box: quiet, its link in the site's colour */
.form > small.hint { grid-column: 1 / -1; font-size: 15px; color: var(--cinza); }

/* the round (rounds/templates/rounds, owners/templates/owners/mandato/_ronda.html; letter_flow.md Phase 7) */
/* the lots' filters: five boxes in a row, then the two tick boxes and «Filtrar»; on a phone two per row, the tick box on a row of its own */
.lot-filters { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 8px; }
.lot-filters label { min-width: 0; }
.lot-filters :is(input:not([type="checkbox"]), select) { width: 100%; }
.lot-filters .check-filter { grid-column: span 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: var(--controlo); font-weight: 500; color: var(--tinta); cursor: pointer; }
.lot-filters .check-filter input { flex: none; width: 20px; height: 20px; }
.lot-filters .btn { grid-column: 5; }
@media (max-width: 900px) { .lot-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lot-filters :is(.sort, .check-filter, .btn) { grid-column: 1 / -1; } }
.round-lot { padding: 10px 0; border-bottom: 1px solid var(--linha); }
.round-lot p { margin: 4px 0; }
.inline-form { display: inline; }

/* the backoffice (backoffice/templates/backoffice) */
.backoffice .bo-card { margin: 0 0 24px; padding: 20px 22px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.backoffice .bo-card.urgent { border-left: 3px solid var(--cobre); }
.backoffice .bo-card h2 { font-family: var(--serif); font-weight: 400; color: var(--verde); font-size: 24px; margin: 0 0 8px; }
.backoffice .bo-card h3 { font-size: 17px; margin: 18px 0 6px; }
.backoffice .bo-table { width: 100%; border-collapse: collapse; margin: 10px 0 0; }
.backoffice .bo-table td { padding: 10px 8px 10px 0; border-top: 1px solid var(--linha-suave); vertical-align: top; font-size: 15px; }
.backoffice .bo-table small { display: block; color: var(--cinza); font-size: 14px; }
.backoffice .bo-actions { text-align: right; white-space: nowrap; }
.backoffice .bo-actions form, .backoffice .bo-actions details { display: inline-block; margin-left: 6px; }
.backoffice .bo-actions textarea { display: block; width: 260px; margin: 6px 0; font: inherit; }
.backoffice .bo-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.backoffice .bo-form label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; color: var(--verde); }
.backoffice .bo-results .ok { color: var(--verde); }
.backoffice .bo-results .bad { color: var(--erro); }
@media (max-width: 700px) { .backoffice .bo-table td { display: block; border-top: 0; padding: 4px 0; } .backoffice .bo-table tr { display: block; border-top: 1px solid var(--linha-suave); padding: 8px 0; } .backoffice .bo-actions { text-align: left; } }
/* the round's lots, one per row (Joao, 2026-10-06) */
.lot-table { width: 100%; border-collapse: collapse; margin: 16px 0 32px; font-size: 16px; }
.lot-table th { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); padding: 8px 10px; border-bottom: 1.5px solid var(--verde); white-space: nowrap; }
.lot-table td { padding: 12px 10px; border-bottom: 1px solid var(--linha-suave); vertical-align: top; }
/* a row is one link: the lot number's link covers it (a stretched link: no onclick, and the keyboard stops once per row) */
.lot-table tbody tr { position: relative; cursor: pointer; }
.lot-table .row-link::after { content: ""; position: absolute; inset: 0; }
.lot-table .row-link:focus-visible { outline: none; }
.lot-table tbody tr:has(.row-link:focus-visible) { outline: var(--foco); outline-offset: -2px; }
.lot-table .go { text-align: right; white-space: nowrap; color: var(--verde); font-weight: 600; }
.lot-table td.todo { color: var(--cobre-texto); font-weight: 600; }   /* «O que falta»: the buyer's to-do */
.lot-table tbody tr:hover { background: var(--superficie); }
.lot-table .num { text-align: right; white-space: nowrap; }
.lot-table td small { display: block; color: var(--cinza); font-size: 14px; }
.lot-table td:first-child { white-space: nowrap; }   /* a lot number never breaks at its hyphen */
.lot-table a { color: var(--verde); font-weight: 600; text-decoration: none; }
.lot-table .mine { color: var(--cobre-texto); }
@media (max-width: 760px) {
  .lot-table thead { display: none; }
  .lot-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--linha-suave); }
  .lot-table td, .lot-table td.num { border: 0; padding: 0; text-align: left; }
  .lot-table td:nth-child(2) { grid-column: 1 / -1; }
  .lot-table td[data-label]::before { content: attr(data-label) ": "; color: var(--cinza); font-size: 14px; }
  .lot-table td:nth-last-child(2), .lot-table .sold-note, .lot-table tr.empty td { grid-column: 1 / -1; }
  .lot-table .go { display: none; }   /* the whole card is the link */
}

.lot-table tr.sold td { color: var(--cinza); }
.lot-table tr.sold { cursor: default; }
/* the buyer area's three parts (buyers/_tabs.html) */
.buyer-tabs { display: flex; gap: 6px; margin: 4px 0 28px; border-bottom: 1px solid var(--linha); }
.buyer-tabs a { padding: 12px 16px; font-weight: 600; font-size: 16px; color: var(--cinza); text-decoration: none; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.buyer-tabs a[aria-current="page"] { color: var(--verde); border-bottom-color: var(--verde); }
.buyer-tabs a:hover { color: var(--verde); }
/* every page with the buyer tabs is as wide as the lots' list, so the tabs never move; the reading text stays a column */
.buyer-area > *:not(.buyer-tabs):not(.eyebrow) { max-width: 760px; }

/* Shared by every page (Joao, QA 2026-10-06: «we had solved this before»): one dropdown arrow, one file picker.
   The dropdown: our arrow with room on its right. No rule may set `background` in full on a select (it would wipe the arrow):
   fields set background-color. */
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 40px; background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f5b52' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* The file picker: the browser's button in our ghost-button style; a `label.drop` around it is the box to click or drop on
   (the owners' signed mandate, the cadernetas, the buyer's proofs, the gerente's batch). */
input[type="file"] { font: inherit; font-size: 15px; color: var(--cinza); }
input[type="file"]::file-selector-button { font: inherit; font-size: 16px; font-weight: 600; color: var(--verde); background: transparent; border: 1.5px solid var(--verde);
  border-radius: var(--raio); min-height: 44px; padding: 8px 16px; margin-right: 12px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--musgo); }
label.drop { display: grid; justify-content: stretch; gap: 8px; padding: 14px; border: 1.5px dashed var(--tracejado); border-radius: var(--raio); background: var(--superficie); font-size: 16px; font-weight: 400; color: var(--cinza); cursor: pointer; }   /* stretch: inside a .form a label is justify-content: flex-end, which pushed the grid to the right */
label.drop.over { border-color: var(--cobre); background: var(--musgo); }   /* a file dragged over it */
label.drop .hint { font-size: 15px; font-weight: 400; color: var(--cinza); }
label.drop input[type="file"] { width: 100%; min-width: 0; }

/* ---- The lot page (rounds/lote.html; design review, 2026-10-08): the figures under the title, then on a desktop the lot sheet
   on the left and the decision panel on the right, held in view while the sheet scrolls; on a phone the panel comes first.
   The offer is the page's one copper button; «Comprar agora», which makes the contract, is outlined under it. ---- */
.lot-page .back { margin: 0 0 14px; font-size: 16px; }
.lot-page .back a { color: var(--verde); text-decoration: none; }
.lot-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin: 20px 0 8px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.lot-figures div { padding: 12px 16px; border-left: 1px solid var(--linha-suave); }
.lot-figures div:first-child { border-left: 0; }
.lot-figures dt { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }
.lot-figures dd { margin: 2px 0 0; font: 400 22px/1.2 var(--serif); color: var(--verde); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lot-page.buyer-area > :is(.lot-grid, .lot-figures, #pagamentos) { max-width: none; }   /* the page's full width (the reading column is .buyer-area's 760px) */
.lot-grid { margin-top: 28px; }
.lot-grid.with-panel { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "facts panel"; gap: 48px; align-items: start; }
.lot-grid.with-panel > .lot-figures { grid-column: 1 / -1; }
.lot-panel { grid-area: panel; position: sticky; top: 20px; display: grid; gap: 14px; }
.lot-facts { grid-area: facts; min-width: 0; }
.lot-facts > h2:first-child { margin-top: 0; }
.lot-page .lot-map { display: block; width: 100%; height: auto; border-radius: var(--raio); margin: 8px 0 6px; }
.lot-page .terms-link { margin: 22px 0 0; }
.lot-panel h2 { font-size: 24px; margin: 0 0 8px; }
.lot-panel p { font-size: 16px; }
.offer-box, .buy-box { padding: 18px 20px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.offer-box { border-top: 3px solid var(--cobre); }
.offer-box .fine, .buy-box .fine { margin-top: 10px; }
.offer-form { margin: 14px 0 0; }
.offer-form .field { margin: 0; }
.offer-row { display: flex; gap: 10px; flex-wrap: wrap; }
.offer-row input { flex: 1 1 9em; min-width: 0; font-variant-numeric: tabular-nums; }
.offer-row .btn { flex: 1 0 auto; }
.offer-form .buy-now-note { color: var(--tinta); }   /* it changes what the box does: read, not fine print */
.offer-form > .linkish { margin-top: 10px; }
.buy-box form { margin: 12px 0 0; display: grid; gap: 8px; }
.buy-box .btn { width: 100%; }
@media (max-width: 900px) {
  .lot-grid.with-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "panel" "facts"; gap: 32px; }
  .lot-panel { position: static; }
}
@media (max-width: 480px) {
  .lot-figures { grid-template-columns: 1fr 1fr; }
  .lot-figures div { border-left: 0; border-top: 1px solid var(--linha-suave); }
  .lot-figures div:nth-child(-n+2) { border-top: 0; }
  .lot-figures div:nth-child(even) { border-left: 1px solid var(--linha-suave); }
  .lot-figures div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lot-figures dd { font-size: 20px; }
  .offer-row .btn { width: 100%; }
}

/* the winner's payments, one card each in the order they fall due: green border = done, copper = the next one to pay */
.lot-page #pagamentos { margin: 28px 0 0; }
.payments { list-style: none; padding: 0; display: grid; gap: 12px; margin: 14px 0 12px; }
.payment p { margin: 0 0 6px; }
.payments > div.payment { padding: 2px 0 2px 14px; }   /* the owner's lines (_ronda.html): the text off the green or copper bar (QA ANA-19); the buyer's are cards */
.payment.done { border-left: 4px solid var(--verde); }
.payment.next { border-left: 4px solid var(--cobre); }
.payment .pay-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.payment h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--verde); }
.payment .pay-tag { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cobre-texto); }
.payment .pay-tag.ok { color: var(--verde); }
.payment .pay-amount { margin: 2px 0 6px; font: 400 26px/1.2 var(--serif); color: var(--verde); font-variant-numeric: tabular-nums; }
.payment .pay-to small { display: block; font-size: 15px; color: var(--cinza); }
.payment .iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; overflow-wrap: anywhere; }
.payment .copy { margin-left: 6px; font-size: 15px; }
.payment .pay-status { color: var(--cinza); font-size: 16px; }
.payment .bad { color: var(--erro); font-weight: 600; }
.payment .upload { display: grid; gap: 10px; justify-items: start; margin: 12px 0 0; }
.payment .upload label.drop { width: 100%; }
.payment.optional summary { cursor: pointer; color: var(--verde); }
.payment.optional[open] summary { margin-bottom: 6px; }
.lot-page .contact-h { margin: 28px 0 0; font-size: 17px; color: var(--verde); }
.lot-page .contact-lines { margin-top: 8px; }
@media (max-width: 760px) {
  .payment .copy { display: inline-block; padding: 8px 2px; }   /* a thumb-sized tap */
}

/* ---- The buyer's account and the confirmation screen (design review, 2026-10-08) ---- */
/* «Empresa / Empresário em nome individual» on a phone: the two options stacked at full width, not wrapped into a ragged box */
@media (max-width: 480px) {
  .buyer .form.ficha .field.kind { width: 100%; flex-direction: column; }
  .buyer .form.ficha .field.kind label.seg + label.seg { border-left: 0; border-top: 1.5px solid var(--verde); }
}
/* «Tem o ficheiro já assinado por…?»: a quiet way in, apart from the button above it */
.buyer details.aside { margin: 16px 0 0; }
.buyer details.aside > summary { cursor: pointer; font-weight: 600; color: var(--verde); }
.buyer details.aside > summary::marker { color: var(--verde); }
.buyer details.aside[open] > summary { margin-bottom: 12px; }
/* the offer's code: a short box, the button under it */
.confirm-code { display: grid; gap: 14px; justify-items: start; margin: 24px 0 0; }
.confirm-code .field { width: 100%; margin: 0; }
.confirm-code .field input { max-width: 12em; font-size: 22px; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .confirm-code .btn { width: 100%; } }

/* ---- The long texts, /comprador/termos/ and the full /regras (buyers/agreement.py; design review, 2026-10-08): a contents
   list, section titles that read as titles, each clause numbered as the text cites it («4.2»), and the clause a
   reference leads to marked when it opens there ---- */
.toc { margin: 24px 0 8px; padding: 16px 20px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.toc .toc-h { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.toc ol, .regras-text .toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.toc li { break-inside: avoid; }
.toc a { display: inline-block; padding: 4px 0; color: var(--verde); font-weight: 500; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 600px) { .toc ol { columns: 1; } }
:is(.terms, .regras-text) h3.section-h, :is(.terms, .regras-text) h2.section-h { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--verde); margin: 40px 0 12px; }
.clauses, :is(.terms, .regras-text) ol.clauses { list-style: none; margin: 0; padding: 0; }   /* the clause number is the indent */
.clauses > li { position: relative; margin: 0 0 12px; padding-left: 3em; }
.clauses > li > .n { position: absolute; left: 0; top: 0; font-weight: 600; color: var(--verde); font-variant-numeric: tabular-nums; }
:is(.clauses > li, .section-h, [id^="a"]):target { scroll-margin-top: 16px; }
.clauses > li:target, .terms p[id]:target, .regras-text p[id]:target { background: var(--tom-cobre); box-shadow: 0 0 0 8px var(--tom-cobre); border-radius: var(--raio); }
.terms { margin: 8px 0 0; }
.terms p, .terms li { font-size: 17px; line-height: 1.6; }
.terms-page.buyer-area > .terms { max-width: 70ch; }

/* the backoffice's signing page: its steps are the page's sections (h2), set like the steps' h3 elsewhere */
.backoffice .sign-steps > li > h2 { margin: 3px 0 8px; font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--verde); }
.backoffice .sign-steps form { display: grid; gap: 12px; justify-items: start; }
.backoffice .sign-steps label.drop { width: 100%; }
.backoffice .bo-queue-h { margin-top: 36px; }
/* «Recusar»: the reason's box under its label, then the button */
.backoffice .bo-actions details form { display: grid; gap: 6px; justify-items: start; margin: 6px 0 0; text-align: left; white-space: normal; }
.backoffice .bo-actions details label { font-size: 15px; font-weight: 600; color: var(--verde); }
.backoffice .bo-actions details textarea { margin: 0; }