/* ============================================================================
   TerraMap — components
   Navbar, buttons, links, badges, cards, lists, code, map chrome, footer.
   ========================================================================= */

/* ── Navbar ─────────────────────────────────────────────────────────────── */

.tm-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--tm-z-navbar);
  block-size: var(--tm-navbar-height);
  background: var(--tm-surface);
  border-block-end: 1px solid var(--tm-border);
  transition: box-shadow var(--tm-duration-base) var(--tm-ease);
}

.tm-nav[data-scrolled="true"] { box-shadow: var(--tm-shadow-sm); }

.tm-nav__inner {
  block-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--tm-space-6);
}

/* Wordmark. No graphic logo is approved yet, so this is typographic by design:
   the two halves are differentiated by weight, not by colour or a device. */
.tm-wordmark {
  font-size: 1.0625rem;
  letter-spacing: -0.017em;
  font-weight: var(--tm-weight-semibold);
  white-space: nowrap;
  color: var(--tm-text);
}
.tm-wordmark span { font-weight: var(--tm-weight-regular); color: var(--tm-text-muted); }

.tm-nav__links {
  display: flex;
  align-items: center;
  gap: var(--tm-space-5);
  margin-inline-end: auto;
}

.tm-nav__link {
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-medium);
  color: var(--tm-text-muted);
  padding-block: var(--tm-space-2);
  transition: var(--tm-transition-color);
}
.tm-nav__link:hover { color: var(--tm-text); }
.tm-nav__link[aria-current="page"] { color: var(--tm-text); }

.tm-nav__actions { display: flex; align-items: center; gap: var(--tm-space-3); }

/* ── Theme toggle ───────────────────────────────────────────────────────── */

.tm-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-2);
  block-size: 34px;
  padding-inline: var(--tm-space-3);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-md);
  background: var(--tm-surface);
  color: var(--tm-text-muted);
  font-size: var(--tm-text-caption);
  font-weight: var(--tm-weight-medium);
  letter-spacing: 0.02em;
  transition: var(--tm-transition-color);
}
.tm-theme-toggle:hover { color: var(--tm-text); border-color: var(--tm-border-strong); }
.tm-theme-toggle__icon { inline-size: 15px; block-size: 15px; flex: none; }
.tm-theme-toggle__label { min-inline-size: 3.1em; text-align: start; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tm-space-2);
  padding: 0.75rem 1.25rem;
  border-radius: var(--tm-radius-md);
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: var(--tm-transition-color);
}

.tm-btn--primary {
  background: var(--tm-primary);
  color: var(--tm-primary-contrast);
}
.tm-btn--primary:hover { background: var(--tm-primary-hover); }
.tm-btn--primary:active { background: var(--tm-primary-active); }

.tm-btn--secondary {
  background: transparent;
  color: var(--tm-text);
  border-color: var(--tm-border-strong);
}
.tm-btn--secondary:hover { background: var(--tm-surface-sunken); }

/* Compact variant for the navbar, where 44px would crowd a 64px bar. */
.tm-btn--sm { padding: 0.5rem 0.9rem; }

.tm-btn--block { inline-size: 100%; }

.tm-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-space-3);
  align-items: center;
}

/* ── Text link ──────────────────────────────────────────────────────────── */

.tm-link {
  color: var(--tm-primary);
  font-weight: var(--tm-weight-medium);
  transition: var(--tm-transition-color);
}
.tm-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.tm-link--arrow { display: inline-flex; align-items: center; gap: 0.4em; }
.tm-link--arrow::after { content: "→"; transition: transform var(--tm-duration-fast) var(--tm-ease); }
.tm-link--arrow:hover::after { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .tm-link--arrow:hover::after { transform: none; }
}

/* ── Badge — the only pill in the system ────────────────────────────────── */

.tm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--tm-radius-pill);
  background: var(--tm-primary-subtle);
  color: var(--tm-primary);
  font-size: var(--tm-text-caption);
  font-weight: var(--tm-weight-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tm-badge--neutral { background: var(--tm-surface-sunken); color: var(--tm-text-muted); }

/* A small dot, not a warning triangle: the Austria scope is a fact about the
   preview, not a problem with it. */
.tm-badge__dot {
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: var(--tm-success);
  flex: none;
}

/* ── Card. Used sparingly — see design-system §6. ───────────────────────── */

.tm-card {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-lg);
  padding: var(--tm-space-5);
  box-shadow: var(--tm-shadow-sm);
}

/* ── Structured lists — the capability treatment ────────────────────────── */

.tm-group__title {
  font-size: var(--tm-text-caption);
  font-weight: var(--tm-weight-semibold);
  letter-spacing: var(--tm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tm-text);
  padding-block-end: var(--tm-space-3);
  border-block-end: 1px solid var(--tm-border-strong);
}

.tm-group__list { margin-block-start: var(--tm-space-1); }

.tm-group__item {
  padding-block: var(--tm-space-3);
  border-block-end: 1px solid var(--tm-divider);
  font-size: var(--tm-text-sm);
  color: var(--tm-text);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tm-space-3);
}
.tm-group__item:last-child { border-block-end: 0; }
.tm-group__note { color: var(--tm-text-muted); font-size: var(--tm-text-caption); }

/* ── Code ───────────────────────────────────────────────────────────────── */

.tm-code {
  background: var(--tm-surface-sunken);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-lg);
  overflow: hidden;
}

.tm-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-space-3);
  padding: var(--tm-space-3) var(--tm-space-4);
  border-block-end: 1px solid var(--tm-border);
  background: var(--tm-surface);
}

.tm-code__label {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-text-caption);
  color: var(--tm-text-muted);
  letter-spacing: 0.02em;
}

.tm-code__copy {
  font-size: var(--tm-text-caption);
  font-weight: var(--tm-weight-medium);
  color: var(--tm-text-muted);
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-surface);
  transition: var(--tm-transition-color);
}
.tm-code__copy:hover { color: var(--tm-text); border-color: var(--tm-border-strong); }
.tm-code__copy[data-copied="true"] { color: var(--tm-success); border-color: var(--tm-success); }

.tm-code pre {
  margin: 0;
  padding: var(--tm-space-4);
  overflow-x: auto;            /* the block scrolls, never the page */
  font-size: var(--tm-text-code);
  line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}

.tm-code code { white-space: pre; }

/* Syntax colours come from the token set so code reads as brand material. */
.tok-key { color: var(--tm-primary); }
.tok-str { color: var(--tm-accent-text); }
.tok-com { color: var(--tm-text-muted); font-style: italic; }
.tok-num { color: var(--tm-success); }
.tok-fn  { color: var(--tm-text); font-weight: var(--tm-weight-medium); }

:root:not([data-theme="light"]) .tok-str { color: var(--tm-accent); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tok-str { color: var(--tm-accent-text); }
}

code.tm-inline {
  font-size: 0.92em;
  padding: 0.12em 0.38em;
  border-radius: var(--tm-radius-xs);
  background: var(--tm-surface-sunken);
  border: 1px solid var(--tm-border);
}

/* ── Map ────────────────────────────────────────────────────────────────── */

.tm-map {
  position: relative;
  background: var(--tm-surface-sunken);
  isolation: isolate;
}

.tm-map__canvas { position: absolute; inset: 0; }

.tm-map--framed {
  border: 1px solid var(--tm-map-frame);
  border-radius: var(--tm-radius-xl);
  overflow: hidden;
  box-shadow: var(--tm-shadow-map);
}

/* A real, honest failure state. Never a screenshot standing in for the map. */
.tm-map__fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tm-space-3);
  padding: var(--tm-space-6);
  text-align: center;
  background: var(--tm-surface-sunken);
  color: var(--tm-text-muted);
  font-size: var(--tm-text-sm);
}
.tm-map[data-state="error"] .tm-map__fallback { display: flex; }
.tm-map__fallback code { font-size: var(--tm-text-code-sm); color: var(--tm-text); }

/* Map controls. MapLibre's own chrome is restyled rather than replaced — its
   keyboard and ARIA behaviour is already correct and worth keeping. */
.tm-map .maplibregl-ctrl-group {
  background: var(--tm-map-control-bg);
  border: 1px solid var(--tm-map-control-border);
  border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-sm);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.tm-map .maplibregl-ctrl-group button { inline-size: 32px; block-size: 32px; }
.tm-map .maplibregl-ctrl-group button + button { border-block-start: 1px solid var(--tm-map-control-border); }

.tm-map .maplibregl-ctrl-attrib {
  background: var(--tm-map-control-bg);
  font-size: 11px;
  border-start-start-radius: var(--tm-radius-sm);
}
.tm-map .maplibregl-ctrl-attrib a { color: var(--tm-text-muted); }

.tm-map .maplibregl-ctrl-scale {
  background: var(--tm-map-control-bg);
  border-color: var(--tm-text-subtle);
  color: var(--tm-text-muted);
  font-size: 11px;
  border-radius: var(--tm-radius-xs);
}

/* MapLibre ships black control glyphs; invert them on the night theme. */
[data-theme="dark"] .tm-map .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tm-map .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
}

@media (max-width: 767px) {
  .tm-map .maplibregl-ctrl-group button { inline-size: 40px; block-size: 40px; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.tm-footer {
  background: var(--tm-surface-sunken);
  border-block-start: 1px solid var(--tm-border);
  padding-block: var(--tm-space-8) var(--tm-space-6);
  margin-block-start: auto;
}

.tm-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--tm-space-6);
}

.tm-footer__brand { max-inline-size: 30ch; }
.tm-footer__tagline {
  margin-block-start: var(--tm-space-3);
  font-size: var(--tm-text-sm);
  color: var(--tm-text-muted);
}

.tm-footer__title {
  font-size: var(--tm-text-caption);
  font-weight: var(--tm-weight-semibold);
  letter-spacing: var(--tm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tm-text);
  margin-block-end: var(--tm-space-4);
}

.tm-footer__list { display: grid; gap: var(--tm-space-3); }
.tm-footer__list a { font-size: var(--tm-text-sm); color: var(--tm-text-muted); transition: var(--tm-transition-color); }
.tm-footer__list a:hover { color: var(--tm-text); }

/* Pages that do not exist yet are plain text, not links that go nowhere. */
.tm-footer__list span {
  font-size: var(--tm-text-sm);
  color: var(--tm-text-muted);
  cursor: default;
}

.tm-footer__base {
  margin-block-start: var(--tm-space-7);
  padding-block-start: var(--tm-space-5);
  border-block-start: 1px solid var(--tm-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-space-4);
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--tm-text-caption);
  color: var(--tm-text-muted);
}
.tm-footer__base a { color: var(--tm-text-muted); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1023px) {
  .tm-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--tm-space-6); }
  .tm-footer__brand { grid-column: 1 / -1; max-inline-size: 46ch; }
}

/* ── Mobile navigation ──────────────────────────────────────────────────── */

.tm-nav__menu-btn { display: none; }

.tm-nav-sheet {
  position: fixed;
  inset: var(--tm-navbar-height) 0 0 0;
  z-index: var(--tm-z-overlay);
  background: var(--tm-bg);
  padding: var(--tm-space-5) var(--tm-gutter) var(--tm-space-8);
  overflow-y: auto;
  display: none;
}
.tm-nav-sheet[data-open="true"] { display: block; }

.tm-nav-sheet__list { display: grid; gap: var(--tm-space-1); margin-block-end: var(--tm-space-6); }
.tm-nav-sheet__list a {
  display: block;
  padding: var(--tm-space-4) 0;
  font-size: 1.0625rem;
  font-weight: var(--tm-weight-medium);
  border-block-end: 1px solid var(--tm-divider);
}

@media (max-width: 899px) {
  .tm-nav__links { display: none; }
  .tm-nav__signin { display: none; }
  .tm-nav__actions .tm-btn--primary { display: none; }
  .tm-nav__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px; block-size: 40px;
    margin-inline-end: -8px;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-md);
    color: var(--tm-text);
  }
  .tm-nav__inner { gap: var(--tm-space-3); }
  .tm-wordmark { margin-inline-end: auto; }
}

@media (min-width: 900px) {
  .tm-nav-sheet { display: none !important; }   /* never leaks onto desktop */
}

/* Body scroll lock while the sheet is open. */
body[data-nav-open="true"] { overflow: hidden; }

/* ============================================================================
   Dialog — the API response viewer.

   A native <dialog>, so focus trapping, Escape and the backdrop come from the
   browser rather than from a script that would get one of them wrong.
   ========================================================================= */

.tm-dialog {
  inline-size: min(46rem, calc(100vw - var(--tm-space-6)));
  max-block-size: min(80dvh, 44rem);
  padding: 0;
  color: var(--tm-text);
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-lg);
  box-shadow: var(--tm-shadow-lg);
}

.tm-dialog::backdrop { background: rgb(0 0 0 / 0.44); }

.tm-dialog__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--tm-space-4);
  padding: var(--tm-space-5) var(--tm-space-5) var(--tm-space-4);
  border-block-end: 1px solid var(--tm-border);
}

.tm-dialog__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.tm-dialog__body {
  display: grid;
  gap: var(--tm-space-3);
  padding: var(--tm-space-5);
  overflow-y: auto;
}

.tm-dialog__request {
  margin: 0;
  font-size: var(--tm-text-caption);
  color: var(--tm-text-muted);
  overflow-wrap: anywhere;
}

.tm-dialog__request code {
  font-family: var(--tm-font-mono);
  color: var(--tm-text);
}

/* A response is as long as it is; it scrolls inside its own box so the page
   never scrolls sideways. */
.tm-code--scroll pre {
  max-block-size: 46dvh;
  overflow: auto;
}

/* ============================================================================
   Prose pages — About, Contact, Terms, Privacy.

   A single readable column. These pages are read, not scanned, so the measure
   is narrower than the rest of the site.
   ========================================================================= */

.tm-container--prose { max-inline-size: 46rem; }

.tm-prose-section { padding-block-start: var(--tm-space-8); }

.tm-prose { margin-block-start: var(--tm-space-7); }

.tm-prose h2 {
  margin-block: var(--tm-space-7) var(--tm-space-3);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.tm-prose h2:first-child { margin-block-start: 0; }

.tm-prose p {
  margin-block: 0 var(--tm-space-4);
  color: var(--tm-text-muted);
  line-height: 1.65;
}

.tm-prose strong { color: var(--tm-text); font-weight: 600; }

.tm-prose code {
  padding: 0.1em 0.35em;
  font-family: var(--tm-font-mono);
  font-size: 0.9em;
  color: var(--tm-text);
  background: var(--tm-surface-sunken);
  border-radius: var(--tm-radius-xs);
}

/* A draft notice, and a placeholder awaiting real content, are both meant to
   be impossible to miss on the way to launch. */
.tm-note--draft,
.tm-placeholder {
  padding: var(--tm-space-3) var(--tm-space-4);
  border-inline-start: 3px solid var(--tm-accent, var(--tm-primary));
  border-radius: var(--tm-radius-xs);
  background: var(--tm-surface-sunken);
  color: var(--tm-text-muted);
  font-size: var(--tm-text-sm);
}

.tm-placeholder { font-style: italic; }