/* Discovery/SEO pages: server-rendered, no app JavaScript, so this file does
 * not @import or otherwise depend on app.css. The three @font-face rules and
 * the palette values below are copied from app.css (font-face at :123-134;
 * palette derived from internal/style/palette.go's InkPaper basemap, see
 * app.css's own header comment) so a visitor arriving from a search result
 * sees the same brand as the map, not a second, unrelated design.
 */

@font-face {
  font-family: Geist; font-style: normal; font-weight: 400; font-display: swap;
  src: url(Geist-Regular.woff2) format("woff2");
}
@font-face {
  font-family: Geist; font-style: normal; font-weight: 500; font-display: swap;
  src: url(Geist-Medium.woff2) format("woff2");
}
@font-face {
  font-family: Geist; font-style: normal; font-weight: 600; font-display: swap;
  src: url(Geist-SemiBold.woff2) format("woff2");
}

:root {
  color-scheme: light;
  font-family: Geist, "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;

  --paper:   #f4f1e8;
  --surface: #fdfcf8;
  --raise:   #eeeade;
  --line:    #d5cebd;

  --text:   #24201a;
  --text-2: #4a453b;
  --muted:  #6b6459;

  --accent:      #8f530b;
  --accent-line: #c8801d;

  --warn:      #8a5a00;
  --warn-wash: rgba(200, 145, 20, .13);

  --focus: #1d4d33;

  color: var(--text);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .15em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
header, main, footer { max-width: 68rem; margin: auto; padding: 1.5rem clamp(1rem, 5vw, 4rem); }
header { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 750; text-decoration: none; color: var(--text); }
main { padding-top: 3rem; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); line-height: 1.12; font-weight: 650; letter-spacing: -.035em; margin: .5rem 0; overflow-wrap: anywhere; }
h2 { font-size: 1.45rem; line-height: 1.3; margin-top: 2.4rem; }
h3 { font-size: 1.2rem; line-height: 1.3; margin: 1.8rem 0 .5rem; }
p { max-width: 70ch; }
.municipality, .property-id { margin: .4rem 0; }
.beta { border-left: 4px solid var(--warn); padding: .7rem 1rem; background: var(--warn-wash); }
.map-action, button { display: inline-block; background: var(--accent); color: var(--surface); border: 0; border-radius: .35rem; padding: .75rem 1.1rem; font: inherit; cursor: pointer; }
.map-action { margin: .65rem 0 1rem; text-decoration: none; font-weight: 650; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.facts > div { border-top: 1px solid var(--line); padding: 1rem 0; }
dt { color: var(--muted); }
dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.facts dd > span { font-weight: 650; font-size: 1.2rem; }
.caveat { font-size: .92rem; font-weight: normal; margin: .5rem 0; }
.sources { padding-left: 1.2rem; }
.sources li { margin: 1.5rem 0; }
.sources dl { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr); gap: .3rem 1rem; max-width: 40rem; }
.sources dd { margin: 0; }
.sponsor-lane { display: flex; gap: 1rem; align-items: center; padding: 1.2rem; margin-top: 2rem; border-radius: .5rem; background: var(--raise); }
.sponsor-lane small, .sponsor-lane strong, .sponsor-lane span span { display: block; }
.sponsor-lane small { color: var(--muted); }
.sponsor-art { width: .4rem; align-self: stretch; background: var(--accent-line); }
.privacy { margin-top: 2rem; border-top: 1px solid var(--line); font-size: .9rem; }
.privacy button { margin: .25rem 0; }
.property-list { padding-left: 1.2rem; }
.property-list li { margin: 1rem 0; }
.property-list p { margin: 0; }
.property-list a span { display: inline-block; font-size: .9rem; }
/* The municipality hub reuses .property-list for its municipality links, and
 * its count sits OUTSIDE the <a> — so the rule above, which is scoped to the
 * tunnus span inside a property link, does not reach it. Without this the
 * count renders at body size in body colour and reads as part of the name. */
.municipality-list .count { color: var(--muted); font-size: .9rem; white-space: nowrap; }
/* The /osoitteet/ address directory (deploy/cloudflare/app-worker/src/
 * street-directory.ts): prefix links and house numbers are short, so they wrap
 * as rows of tap-sized targets instead of one tall list; the choice page is a
 * three-column table that must not overflow a phone. */
.street-list .count, .prefix-list .count, .address-list .count { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.prefix-list a { display: inline-block; padding: .2rem .3rem; }
.number-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.number-list a { display: inline-block; min-width: 2.75rem; padding: .35rem .5rem; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
/* Full address links retain street and municipality when read independently
 * of the heading. Let long names wrap instead of forcing number-sized chips. */
.number-list.address-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .5rem; }
.number-list.address-links a { display: flex; align-items: center; width: 100%; min-height: 44px; height: 100%; padding: .55rem .7rem; text-align: left; overflow-wrap: anywhere; }
.address-list li { margin: .6rem 0; }
.address-municipalities { padding-left: 1.2rem; margin-top: .3rem; }
.address-municipalities li { margin: .3rem 0; }
table.choice { border-collapse: collapse; width: 100%; font-size: .95rem; }
table.choice th, table.choice td { text-align: left; padding: .4rem .5rem .4rem 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
footer { border-top: 1px solid var(--line); margin-top: 2rem; }
.skip-link { position: absolute; top: -5rem; left: 1rem; padding: .5rem; background: var(--surface); }
.skip-link:focus { top: 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--raise); padding: 1rem; }
/* Tap targets: header, footer and breadcrumb links keep their text size but
 * get a 44 px hit area from vertical padding (WCAG 2.5.5). */
header { align-items: center; padding-block: .75rem; }
header nav, footer nav { row-gap: 0; }
.brand, header nav a, footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
footer nav { align-items: center; }
/* The static pages (info-pages.ts, guides.ts): breadcrumb, contents list,
 * prev/next, and the one-line beta notice that closes the page. */
.breadcrumb { display: block; color: var(--muted); font-size: .92rem; }
/* Inline padding widens the hit area without moving the wrapped trail. */
.breadcrumb a { padding-block: .7rem; }
.breadcrumb [aria-current] { color: var(--text-2); }
h2[id] { scroll-margin-top: 1.5rem; }
.guide-contents { margin: 1.5rem 0 2rem; padding: .9rem 1.2rem; border-left: 3px solid var(--accent-line); background: var(--surface); max-width: 70ch; }
.guide-contents p { margin: 0 0 .3rem; font-weight: 600; }
.guide-contents ol { margin: 0; padding-left: 1.3rem; }
.guide-contents li { padding: .3rem 0; }
.guide-topics { display: block; max-width: 70ch; }
.guide-topics ul { margin: .4rem 0 1.5rem; padding-left: 1.3rem; }
.guide-topics a { display: inline-flex; align-items: center; min-height: 44px; padding-block: .35rem; }
.guide-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.4rem 0 0; max-width: 70ch; }
.guide-pager a { display: block; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--surface); text-decoration: none; }
.guide-pager a span { display: block; color: var(--muted); font-size: .85rem; }
.guide-pager .guide-next { text-align: right; grid-column: 2; }
.beta-line { margin: 2rem 0 0; padding: .4rem .8rem; font-size: .88rem; max-width: none; }
@media (max-width: 36rem) { header { flex-direction: column; align-items: flex-start; gap: 0; } main { padding-top: 1.5rem; } .facts { grid-template-columns: 1fr; } .sources dl { grid-template-columns: 1fr; } .sources dd { margin-bottom: .5rem; } .guide-pager { grid-template-columns: 1fr; } .guide-pager .guide-next { grid-column: auto; text-align: left; } }
@media print { nav, .map-action, .sponsor-lane, .privacy, .skip-link { display: none; } body { background: white; } }

/* Property-context components share the map folio palette. */
/* A small source-derived map and a readable ledger, within the address folio. */
.discovery-parcel-preview { margin: 24px 0; color: var(--accent); }
.discovery-parcel-preview svg { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--line); }
.discovery-parcel-preview-map { display: block; }
.discovery-parcel-preview a, .discovery-context a, .discovery-navigation a { color: var(--accent); text-underline-offset: 3px; }
.discovery-parcel-preview-map:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.discovery-parcel-preview figcaption { color: var(--text-2); font-size: 12px; line-height: 1.5; margin-top: 10px; }
.discovery-parcel-preview figcaption p { margin: 6px 0; }
.parcel-preview-north { font-size: 13px; font-weight: 600; }
.discovery-context { margin: 28px 0 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.discovery-context h2 { margin: 0 0 18px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.discovery-context h3 { margin: 20px 0 10px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.discovery-context p { font-size: 13px; line-height: 1.6; margin: 10px 0; }
.discovery-context-records { list-style: none; padding: 0; margin: 0; }
.discovery-context-records > li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.discovery-context-records > li > a { display: inline-block; padding-block: 4px; }
.discovery-context-type { display: block; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.discovery-context .discovery-context-area { margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.discovery-context-sources ul { padding-left: 18px; }
.discovery-context-sources li { margin-bottom: 12px; }
.discovery-context-sources small { display: block; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.discovery-context-action a { display: inline-flex; align-items: center; min-height: 44px; }
.discovery-navigation { display: block; margin: 28px 0 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.discovery-navigation h2 { margin: 0 0 18px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.discovery-navigation h3 { margin: 20px 0 10px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.discovery-navigation ul { list-style: none; margin: 0; padding: 0; }
.discovery-navigation li { margin: 0; padding-block: 6px; }
.discovery-navigation li > a { display: inline-flex; align-items: center; min-height: 44px; }
.discovery-nearby-detail { display: block; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.discovery-navigation .discovery-navigation-note { font-size: 12px; line-height: 1.6; color: var(--text-2); margin: 14px 0; }