/* ==========================================================================
   Madeira Atlantic Property — the interactive and editorial layer.
   Loaded after styles.css. Same tokens, same six anti-pattern rules:
   contrast, heading rhythm, line length, transform-only transitions,
   never-cramped padding, never-skipped headings.
   ========================================================================== */

/* ==========================================================================
   1. THE RELIEF MAP
   ========================================================================== */
.island {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
  gap: var(--s6);
  align-items: start;
}
@media (max-width: 980px) { .island { grid-template-columns: 1fr; } }

.island-stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #12191F;
  border: 1px solid #2A3239;
}
.island-stage canvas {
  display: block;
  inline-size: 100%;
  block-size: clamp(340px, 46vw, 560px);
  touch-action: none;
  cursor: grab;
}
.island-stage canvas:active { cursor: grabbing; }

.island-views {
  position: absolute; inset-block-start: var(--s4); inset-inline-start: var(--s4);
  display: flex; flex-wrap: wrap; gap: var(--s2);
  background: rgba(18,25,31,.72);
  backdrop-filter: blur(8px);
  padding: var(--s2);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
}
.island-views button {
  font: inherit; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em;
  padding: .5em 1em;
  background: transparent; color: #DCD4C8;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.island-views button:hover { background: rgba(255,255,255,.10); color: #fff; }
.island-views button[aria-pressed="true"] { background: #F0CD96; color: #2A2119; }

.island-hint {
  position: absolute; inset-block-end: var(--s4); inset-inline-start: var(--s4);
  font-size: .82rem; color: #B9B1A6;
  background: rgba(18,25,31,.7); backdrop-filter: blur(8px);
  padding: var(--s2) var(--s3); border-radius: var(--radius);
  margin: 0; max-width: 32ch; line-height: 1.5;
}

.island-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  background: var(--paper-alt);
  min-block-size: 260px;
}
.island-panel h3 { margin-block: var(--s2) var(--s3); font-size: var(--t-h3); }
.map-hint { color: var(--muted); font-size: .95rem; }
.map-dl { display: grid; gap: var(--s2); margin-block: var(--s4); }
.map-dl > div { display: flex; justify-content: space-between; gap: var(--s4); padding-block-end: var(--s2); border-block-end: 1px solid var(--rule-soft); }
.map-dl dt { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.map-dl dd { margin: 0; font-weight: 600; text-align: end; }

.island-select { margin-block-end: var(--s4); }
.island-select label { display: block; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-block-end: var(--s2); }

.island-legend { display: flex; flex-wrap: wrap; gap: var(--s4); margin-block-start: var(--s5); font-size: .88rem; color: var(--ink-soft); }
.island-legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.island-legend i { inline-size: 14px; block-size: 14px; border-radius: 2px; display: inline-block; }

.island-caption {
  margin-block-start: var(--s4);
  font-size: .88rem; line-height: 1.6; color: var(--muted);
  max-width: 76ch;
}
.island-caption strong { color: var(--ink-soft); }

.island-townlist { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s1); }
.island-townlist a {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s3);
  text-decoration: none; color: var(--ink);
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.island-townlist a:hover, .island-townlist a:focus-visible { background: var(--sand); border-color: var(--rule); }
.island-townlist .t-coast { font-size: .84rem; color: var(--muted); }

/* ==========================================================================
   2. THE QUIZ
   ========================================================================== */
.quiz-shell { max-width: 800px; margin-inline: auto; }

.quiz-progress { margin-block-end: var(--s6); }
.quiz-progress-track { block-size: 4px; background: var(--sand-deep); border-radius: 2px; overflow: hidden; }
.quiz-progress-fill {
  block-size: 100%; background: var(--bronze); border-radius: 2px;
  transition: inline-size .4s var(--ease);
}
.quiz-progress-label {
  display: flex; justify-content: space-between; gap: var(--s4);
  margin-block-start: var(--s2); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700;
}

.quiz-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--paper);
}
.quiz-q { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-block: 0 var(--s3); max-width: 26ch; }
.quiz-help { color: var(--ink-soft); max-width: 60ch; margin-block-end: var(--s5); font-size: .98rem; }
.quiz-intro .lede { margin-block-end: var(--s5); }
.quiz-meta { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s3); }
.quiz-meta li { padding-inline-start: var(--s5); position: relative; color: var(--ink-soft); font-size: .98rem; max-width: 62ch; }
.quiz-meta li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; inline-size: 10px; block-size: 2px; background: var(--bronze); }

.quiz-opts { display: grid; gap: var(--s3); margin-block: var(--s5); }
.quiz-opt {
  display: flex; align-items: flex-start; gap: var(--s4);
  inline-size: 100%; text-align: start;
  font: inherit; color: var(--ink);
  padding: var(--s4) var(--s5);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.quiz-opt:hover { border-color: var(--bronze); background: var(--paper-alt); transform: translateY(-1px); }
.quiz-opt.is-on { border-color: var(--ink); background: var(--sand); }
.quiz-opt-key {
  flex: 0 0 auto;
  inline-size: 26px; block-size: 26px; border-radius: 3px;
  display: grid; place-items: center;
  background: var(--sand-deep); color: var(--ink-soft);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.quiz-opt.is-on .quiz-opt-key { background: var(--ink); color: #fff; }
.quiz-opt-body { display: grid; gap: var(--s1); }
.quiz-opt-label { font-weight: 600; line-height: 1.45; }
.quiz-opt-note { font-size: .89rem; color: var(--muted); line-height: 1.55; }

.quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-block-start: var(--s6); flex-wrap: wrap; }
.quiz-nav-hint { font-size: .88rem; color: var(--muted); }
.quiz-skip { margin-block-start: var(--s5); text-align: center; }
.linkish { background: none; border: 0; font: inherit; font-size: .9rem; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; padding: var(--s2); }
.linkish:hover { color: var(--ink); }

.quiz-form, .enquire-form { display: grid; gap: var(--s4); }
/* :not([hidden]) — the enquire-form's honeypot field carries the `hidden`
   attribute, and a bare author `display` declaration beats the browser's
   own [hidden] { display: none }. See 9b below for the same bug and the
   same fix on .chat-panel. This guard must survive the rule being moved or
   copied into another stylesheet — do not drop it. */
.field:not([hidden]) { display: grid; gap: var(--s2); }
.field label { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.field input, .field select, .field textarea, .island-select select, .calc-field input, .calc-field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: .78em .9em;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); inline-size: 100%;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--bronze-dk); outline-offset: 1px; }
.field-error { color: #8A2E1F; font-size: .92rem; margin: 0; }
.quiz-consent { font-size: .86rem; color: var(--muted); line-height: 1.6; max-width: 58ch; }

/* result */
.quiz-result { display: grid; gap: var(--s7); }
.result-head { border-block-end: 1px solid var(--rule); padding-block-end: var(--s5); }
.result-head h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); margin-block: 0 var(--s4); max-width: 20ch; }
.result-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 860px) { .result-grid { grid-template-columns: 1fr; } }
.result-main > p { max-width: var(--measure); }
.result-main h3 { margin-block: var(--s6) var(--s3); }
.result-main h3:first-child { margin-block-start: 0; }
.result-note { border-inline-start: 2px solid var(--bronze); padding-inline-start: var(--s5); margin-block: var(--s5); }
.result-note h3 { font-size: 1.12rem; margin-block: 0 var(--s2); }
.result-note p { color: var(--ink-soft); max-width: var(--measure); }
.result-box { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s5); background: var(--paper-alt); }
.result-box + .result-box { margin-block-start: var(--s4); }
.result-box h3 { font-size: 1.05rem; margin-block: 0 var(--s3); }
.result-towns { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.result-towns a { text-decoration: none; color: var(--ink); font-size: .95rem; line-height: 1.55; display: block; }
.result-towns a:hover strong { color: var(--bronze-dk); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); counter-reset: s; }
.steps li { display: flex; gap: var(--s4); align-items: flex-start; }
.step-n {
  flex: 0 0 auto; inline-size: 32px; block-size: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff;
  font-size: .88rem; font-weight: 700;
}
.steps p { color: var(--ink-soft); margin-block: var(--s1) var(--s2); max-width: var(--measure); }

.result-actions { display: flex; flex-wrap: wrap; gap: var(--s3); padding-block-start: var(--s5); border-block-start: 1px solid var(--rule); }
.result-foot { font-size: .88rem; color: var(--muted); line-height: 1.6; max-width: 72ch; }

/* ==========================================================================
   3. CALCULATORS
   ========================================================================== */
.calc {
  display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--s6);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, .9rem + 1.6vw, 2rem);
  background: var(--paper-alt);
  align-items: start;
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }
.calc-inputs { display: grid; gap: var(--s4); }
.calc-field { display: grid; gap: var(--s2); }
.calc-field label { font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.calc-field .hint { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.calc-out { min-inline-size: 0; }
.calc-total { border-block-end: 1px solid var(--rule); padding-block-end: var(--s4); margin-block-end: var(--s5); }
.calc-big { font-family: var(--display); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); font-weight: 600; line-height: 1; margin-block: var(--s2); }
.calc-note { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.calc-good { color: #2E5B3E; }
.calc-bad  { color: #8A2E1F; }
.calc-table { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
.calc-table th, .calc-table td { text-align: start; padding: var(--s3) var(--s3); border-block-end: 1px solid var(--rule-soft); vertical-align: top; }
.calc-table thead th { font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.calc-table td { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.calc-table tbody th { font-weight: 600; }
.calc-src { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); line-height: 1.5; margin-block-start: var(--s1); }
.cite a { color: var(--bronze-dk); }
.cite-none { color: #8A2E1F; }
.calc-caveat { font-size: .88rem; color: var(--muted); line-height: 1.62; margin-block-start: var(--s5); max-width: 72ch; }

.visa-grid { display: grid; gap: var(--s4); }
.visa-card { border: 1px solid var(--rule); border-inline-start-width: 2px; border-radius: var(--radius); padding: var(--s5); background: var(--paper); }
.visa-card.is-ok { border-inline-start-color: #2E5B3E; }
.visa-card.is-short { border-inline-start-color: var(--amber); }
.visa-card h4 { margin-block: 0 var(--s2); font-size: 1.1rem; font-family: var(--display); font-weight: 600; }
.visa-need { font-size: .95rem; margin-block-end: var(--s2); }
.visa-verdict { font-weight: 600; margin-block-end: var(--s2); }
.visa-what { font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }

/* ==========================================================================
   4. EDITORIAL — guides, towns, experiences
   ========================================================================== */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: var(--s8); align-items: start; }
@media (max-width: 940px) { .article-grid { grid-template-columns: 1fr; } }

.toc { position: sticky; top: 92px; border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s5); }
.toc h2 { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; font-family: var(--body); color: var(--muted); margin-block: 0 var(--s3); font-weight: 700; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); counter-reset: toc; }
.toc a { font-size: .9rem; text-decoration: none; color: var(--ink-soft); line-height: 1.5; display: block; }
.toc a:hover { color: var(--bronze-dk); }
.toc a[aria-current="true"] { color: var(--ink); font-weight: 700; }
@media (max-width: 940px) { .toc { position: static; border-inline-start: 0; border-block-start: 1px solid var(--rule); padding: var(--s5) 0 0; } }

.keynums { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); margin-block: var(--s6); }
.keynum { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s5); background: var(--paper-alt); }
.keynum-label { font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.keynum-value { font-family: var(--display); font-size: 1.9rem; font-weight: 600; line-height: 1.1; margin-block: var(--s2) var(--s2); }
.keynum-note { font-size: .86rem; color: var(--ink-soft); line-height: 1.55; }
.keynum-src { font-size: .78rem; color: var(--muted); margin-block-start: var(--s3); display: block; line-height: 1.5; }

.faq { margin-block-start: var(--s8); }
.faq-item { border-block-end: 1px solid var(--rule); }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: var(--s5) var(--s5) var(--s5) 0;
  font-family: var(--display); font-size: 1.14rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--body); font-weight: 400; font-size: 1.4rem; color: var(--bronze-dk); line-height: 1; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item .faq-a { padding-block-end: var(--s5); color: var(--ink-soft); max-width: var(--measure); }

.sources { margin-block-start: var(--s8); border-block-start: 1px solid var(--rule); padding-block-start: var(--s5); }
.sources h2 { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; font-family: var(--body); color: var(--muted); font-weight: 700; margin-block: 0 var(--s4); }
.sources ol { display: grid; gap: var(--s3); padding-inline-start: var(--s5); }
.sources li { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; max-width: 76ch; }
.sources .retrieved { color: var(--muted); }

.freshness {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-soft); background: var(--sand); border: 1px solid var(--sand-deep);
  padding: var(--s2) var(--s3); border-radius: var(--radius);
}
.freshness i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #2E5B3E; display: inline-block; }
.freshness.is-stale i { background: var(--amber); }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s5); }
.hub-card {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--s6); background: var(--paper);
  display: flex; flex-direction: column; gap: var(--s3);
  text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.hub-card:hover { border-color: var(--bronze); transform: translateY(-2px); }
.hub-card :is(h2, h3) { margin-block: 0; font-size: 1.28rem; }
.hub-card p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0; }
.hub-count { font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-block-start: auto; padding-block-start: var(--s3); }

.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.guide-list li { border-block-end: 1px solid var(--rule-soft); }
.guide-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: baseline;
  padding: var(--s5) var(--s3);
  text-decoration: none; color: var(--ink);
  transition: background-color .18s var(--ease);
}
.guide-list a:hover { background: var(--sand); }
.guide-list :is(h2, h3) { font-size: 1.12rem; margin: 0 0 var(--s2); }
.guide-list p { font-size: .92rem; color: var(--ink-soft); margin: 0; max-width: 70ch; }
.guide-list .meta { font-size: var(--t-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; }

/* experiences + itinerary */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); }
.exp-card { border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: transform .2s var(--ease), border-color .2s var(--ease); }
.exp-card:hover { transform: translateY(-2px); border-color: var(--bronze); }
.exp-card .exp-body { padding: var(--s5); display: grid; gap: var(--s2); }
.exp-card :is(h2, h3) { font-size: 1.14rem; margin: 0; }
.exp-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s2); }
.exp-tag { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); background: var(--sand); border: 1px solid var(--sand-deep); padding: .25em .6em; border-radius: 2px; }
.exp-caveat { font-size: .88rem; color: var(--muted); line-height: 1.55; }

.day { border-inline-start: 2px solid var(--rule); padding-inline-start: var(--s6); padding-block-end: var(--s7); position: relative; }
.day::before { content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: 6px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--bronze); border: 2px solid var(--paper); }
.day:last-child { border-inline-start-color: transparent; }
.day-n { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-dk); font-weight: 700; }
.day :is(h2, h3) { margin-block: var(--s2) var(--s3); font-size: 1.35rem; }
.day-stops { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; gap: var(--s3); }
.day-stops li { padding-inline-start: var(--s5); position: relative; color: var(--ink-soft); max-width: var(--measure); }
.day-stops li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .68em; inline-size: 8px; block-size: 1px; background: var(--bronze); }
.day-wet { font-size: .9rem; color: var(--ink-soft); background: var(--paper-alt); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s3) var(--s4); max-width: var(--measure); }

/* weather table */
.weather-table { inline-size: 100%; border-collapse: collapse; font-size: .93rem; }
.weather-table th, .weather-table td { padding: var(--s3); border-block-end: 1px solid var(--rule-soft); text-align: end; font-variant-numeric: tabular-nums; }
.weather-table th[scope="row"] { text-align: start; font-weight: 600; }
.weather-table thead th { font-size: var(--t-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.weather-bar { display: block; block-size: 4px; border-radius: 2px; background: var(--bronze); margin-block-start: var(--s1); }

/* ==========================================================================
   5. PRINT — the quiz result has to survive "Save as PDF"
   ========================================================================== */
@media print {
  .nav, .footer, .island-views, .island-hint, .result-actions, .quiz-progress, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .quiz-result { gap: 1.2rem; }
  .result-grid { grid-template-columns: 1fr; }
  a { color: #000; text-decoration: underline; }
  a[href^="/"]::after { content: " (madeiraatlanticproperty.com" attr(href) ")"; font-size: 9pt; color: #444; }
  .disclosure, .result-box { border: 1px solid #999; }
  h2, h3 { break-after: avoid; }
  .result-note, .steps li { break-inside: avoid; }
}

/* ==========================================================================
   6. LATE ADDITIONS — sourced figures inline, nav CTA, footer at five columns
   ========================================================================== */

/* An inline figure is a link to the thing that published it. The asterisk is
   the affordance: it says "this number came from somewhere" without dropping a
   footnote number into the middle of a sentence. */
.figure {
  color: var(--ink);
  text-decoration: none;
  border-block-end: 1px dotted var(--bronze);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.figure:hover { color: var(--bronze-dk); border-block-end-style: solid; }
.figure-mark { color: var(--bronze); font-size: .8em; vertical-align: super; line-height: 0; margin-inline-start: 1px; }

.nav-cta {
  display: inline-flex; align-items: center;
  font-size: .88rem; font-weight: 600;
  padding: .62em 1.15em;
  background: var(--ink); color: #fff;
  border-radius: var(--radius); text-decoration: none;
  white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.nav-cta:hover { background: #241D16; color: #fff; transform: translateY(-1px); }
@media (max-width: 1100px) { .nav-cta { display: none; } }

.band-alt-inner { background: var(--paper-alt); }

/* the footer went from three columns to five */
.footer-grid { grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr)); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }

/* a route whose threshold is not traceable to a published instrument */
.visa-card.is-unknown { border-inline-start-color: var(--muted); }
.visa-card.is-unknown .visa-need { font-weight: 600; }

/* ==========================================================================
   7. NAV CTA — the fix for a real bug
   The quiz was reachable from the header only through this button, and it was
   hidden below 1100px. On a laptop, a tablet and every phone, the flagship
   interactive thing on the site had no route from the header at all.
   It now shrinks rather than disappearing, and it is also a nav-list item so
   it survives inside the mobile menu.
   ========================================================================== */
@media (max-width: 1100px) {
  .nav-cta { display: inline-flex; font-size: .8rem; padding: .55em .9em; }
  /* below this the logo, the toggle and the button have to share one row */
  .nav-cta .nav-cta-long { display: none; }
}
@media (min-width: 1101px) { .nav-cta .nav-cta-short { display: none; } }
@media (max-width: 460px) {
  .nav-cta { font-size: .74rem; padding: .5em .7em; }
  .nav-logo-sub { display: none; }
}

/* ==========================================================================
   8. ASK — the on-site assistant
   Retrieval over published answers. Styled to look like what it is: a search
   over this site's own sentences, not a chat window pretending to think.
   ========================================================================== */
.ask { max-width: 780px; }
.ask-label {
  display: block; font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--muted);
  margin-block-end: var(--s3);
}
.ask-row { display: flex; gap: var(--s3); }
.ask-row input {
  flex: 1 1 auto; min-inline-size: 0;
  font: inherit; font-size: 1.05rem; color: var(--ink);
  padding: .85em 1em;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper);
}
.ask-row input:focus-visible { outline: 2px solid var(--bronze-dk); outline-offset: 1px; }
.ask-row .btn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .ask-row { flex-direction: column; }
  .ask-row .btn { inline-size: 100%; }
}
.ask-note { font-size: .86rem; color: var(--muted); line-height: 1.6; margin-block-start: var(--s3); max-width: 62ch; }

.ask-examples { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s4); }
.ask-eg {
  font: inherit; font-size: .84rem; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--rule);
  padding: .45em .85em; border-radius: 100px; cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.ask-eg:hover { border-color: var(--bronze); background: var(--paper-alt); color: var(--ink); }

.ask-out { margin-block-start: var(--s5); display: grid; gap: var(--s4); }
.ask-out:empty { margin-block-start: 0; }
.ask-status { font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 0; }

.ask-answer {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s5); background: var(--paper);
}
.ask-answer.is-primary { border-inline-start: 2px solid var(--bronze); background: var(--paper-alt); }
.ask-answer.ask-none { border-inline-start: 2px solid var(--muted); }
.ask-kind { font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--bronze-dk); margin-block-end: var(--s2); }
.ask-answer h3 { font-size: 1.14rem; margin-block: 0 var(--s3); }
.ask-answer p { color: var(--ink-soft); max-width: var(--measure); }
.ask-src, .ask-from { font-size: .84rem; color: var(--muted); margin-block-start: var(--s3); }
.ask-foot { font-size: .84rem; color: var(--muted); line-height: 1.6; max-width: 70ch; margin-block-start: var(--s2); }

/* ==========================================================================
   9. THE CHAT WIDGET
   Floating, on every page, because the question arrives while somebody is
   reading a property page — not while they are hunting for a search box.
   ========================================================================== */
.chat { position: fixed; inset-block-end: var(--s5); inset-inline-end: var(--s5); z-index: 80; }

.chat-launch {
  display: inline-flex; align-items: center; gap: var(--s3);
  font: inherit; font-size: .93rem; font-weight: 600;
  padding: .8em 1.3em;
  background: var(--ink); color: #fff;
  border: 0; border-radius: 100px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(28,22,16,.28);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.chat-launch:hover { background: #241D16; transform: translateY(-2px); }
.chat-launch-icon { display: inline-flex; }
.chat.is-open .chat-launch { display: none; }

.chat-panel {
  display: flex; flex-direction: column;
  inline-size: min(92vw, 400px);
  block-size: min(78vh, 620px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(28,22,16,.24);
  overflow: hidden;
}
.chat-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--ink); color: #fff;
}
.chat-title { font-family: var(--display); font-size: 1.05rem; font-weight: 600; margin: 0; color: #fff; }
.chat-sub { font-size: .78rem; color: #C9C0B4; margin: 2px 0 0; line-height: 1.45; }
.chat-close { background: none; border: 0; color: #C9C0B4; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 var(--s2); }
.chat-close:hover { color: #fff; }

.chat-log { flex: 1 1 auto; overflow-y: auto; padding: var(--s5); display: grid; gap: var(--s4); align-content: start; }

.chat-msg { font-size: .93rem; line-height: 1.6; }
.chat-msg p { margin: 0 0 var(--s2); }
.chat-msg p:last-child { margin-block-end: 0; }
.chat-msg.is-you {
  justify-self: end; max-inline-size: 85%;
  background: var(--ink); color: #fff;
  padding: var(--s3) var(--s4); border-radius: var(--radius-lg) var(--radius-lg) 3px var(--radius-lg);
}
.chat-msg.is-bot {
  justify-self: start; max-inline-size: 94%;
  background: var(--paper-alt); color: var(--ink);
  border: 1px solid var(--rule); border-inline-start: 2px solid var(--bronze);
  padding: var(--s4); border-radius: 3px var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.chat-msg.is-bot.is-none { border-inline-start-color: var(--muted); }
.chat-note { font-size: .8rem; color: var(--muted); line-height: 1.55; margin-block-start: var(--s3); }

.chat-msg.is-thinking { display: flex; gap: 5px; padding: var(--s4) var(--s5); }
.chat-msg.is-thinking span {
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--bronze);
  animation: chatdot 1.1s infinite ease-in-out;
}
.chat-msg.is-thinking span:nth-child(2) { animation-delay: .16s; }
.chat-msg.is-thinking span:nth-child(3) { animation-delay: .32s; }
@keyframes chatdot { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-msg.is-thinking span { animation: none; opacity: .6; } }

.chat-src { margin-block-start: var(--s3); border-block-start: 1px solid var(--rule); padding-block-start: var(--s3); }
.chat-src summary { cursor: pointer; font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--bronze-dk); }
.chat-src ul { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s3); }
.chat-src li { font-size: .82rem; line-height: 1.5; }
.chat-src li span { display: block; color: var(--muted); margin-block-start: 2px; }

.chat-sugg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chat-eg {
  font: inherit; font-size: .8rem; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--rule);
  padding: .4em .8em; border-radius: 100px; cursor: pointer; text-align: start;
}
.chat-eg:hover { border-color: var(--bronze); background: var(--sand); }

.chat-gate { display: grid; gap: var(--s2); }
.chat-gate label { font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.chat-gate input {
  font: inherit; font-size: .95rem; padding: .7em .8em;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.chat-gate input:focus-visible { outline: 2px solid var(--bronze-dk); outline-offset: 1px; }
.chat-gate .chat-send { margin-block-start: var(--s2); }
.chat-err { color: #8A2E1F; font-size: .84rem; margin: 0; }

.chat-form { display: flex; gap: var(--s2); padding: var(--s4); border-block-start: 1px solid var(--rule); background: var(--paper); }
.chat-form[hidden] { display: none; }
.chat-form input {
  flex: 1 1 auto; min-inline-size: 0;
  font: inherit; font-size: .95rem; padding: .7em .85em;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.chat-form input:focus-visible { outline: 2px solid var(--bronze-dk); outline-offset: 1px; }
.chat-send {
  font: inherit; font-size: .88rem; font-weight: 600;
  padding: .7em 1.1em; background: var(--ink); color: #fff;
  border: 0; border-radius: var(--radius); cursor: pointer;
}
.chat-send:hover { background: #241D16; }
.chat-foot { font-size: .74rem; color: var(--muted); line-height: 1.5; margin: 0; padding: 0 var(--s4) var(--s4); background: var(--paper); }

@media (max-width: 520px) {
  .chat { inset-inline: var(--s4); inset-block-end: var(--s4); }
  .chat-panel { inline-size: 100%; block-size: min(84vh, 600px); }
  .chat-launch { inline-size: 100%; justify-content: center; }
}
@media print { .chat { display: none; } }

/* ==========================================================================
   9b. THE HIDDEN-ATTRIBUTE BUG, AND THE LAYOUT THAT DEPENDS ON IT
   `.chat-panel` sets `display: flex`, and an author display declaration beats
   the user-agent stylesheet's `[hidden] { display: none }`. So the panel
   ignored its own `hidden` attribute and shipped permanently open, with the
   launcher still sitting on top of it. This is the fix, and it is why every
   [hidden] rule below carries the same guard.
   ========================================================================== */
.chat-panel[hidden] { display: none !important; }

/* Stack the container so the panel sits above the launcher and both hug the
   corner, instead of the panel growing the box and pushing the button out. */
.chat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s3);
  pointer-events: none;              /* the gap between them is not a target */
}
.chat > * { pointer-events: auto; }

/* Belt and braces: the launcher is hidden while the panel is open, both by
   class and by sibling state, so a missed class cannot resurrect it. */
.chat.is-open .chat-launch,
.chat:has(.chat-panel:not([hidden])) .chat-launch { display: none; }

/* A quiet close affordance in the corner of the panel head, big enough to hit */
.chat-close { min-inline-size: 32px; min-block-size: 32px; border-radius: 4px; }
.chat-close:hover { background: rgba(255,255,255,.12); }

/* ==========================================================================
   9c. THE WIDGET IS NOT A PAGE SECTION
   The panel is a <section>, so it inherited the site's global
   `section { padding-block: var(--s9) }` — 96px top and bottom, 194px of a
   620px panel spent on nothing. That is the white band above the header and
   the reason the email field looked clipped.

   Reset the page-level rules that have no business inside a fixed widget,
   rather than fighting them property by property.
   ========================================================================== */
.chat section,
.chat-panel { padding-block: 0; }
.chat h1, .chat h2, .chat h3, .chat h4 { margin-block: 0; }
.chat p { margin-block: 0 var(--s2); }
.chat p:last-child { margin-block-end: 0; }
.chat ul, .chat ol { margin-block: 0; }

/* with the space back, the gate fits without scrolling */
.chat-log { scrollbar-width: thin; }

/* The relief data credit. Small, permanent, and factual — the terrain on this
   map is sourced exactly like every number on the site, so it says where from
   and when, in the same way a figure carries its source. */
.island-credit {
  font-size: var(--t-micro);
  color: var(--muted);
  margin-block: var(--s2) 0;
}