/* ============================================================================
   TerraMap — service-host shell.

   Self-contained on purpose. These pages live on api., tiles., console.,
   docs. and status.terramap.at, which are separate IIS sites with their own
   certificates. Pulling CSS from terramap.at would make every one of them
   depend on another host's certificate and cache to render at all — for a
   page that is a few hundred bytes of text.

   Token VALUES are copied from docs/design-tokens.css. Only the handful this
   shell uses; it is not a second design system.
   ========================================================================= */

:root {
  color-scheme: light;
  --tm-primary:        #0A5578;
  --tm-bg:             #F6F8FA;
  --tm-surface:        #FFFFFF;
  --tm-surface-sunken: #EEF1F5;
  --tm-text:           #101820;
  --tm-text-muted:     #59636E;
  --tm-text-subtle:    #7A838D;
  --tm-border:         #DFE4EA;
  --tm-divider:        #EAEEF2;
  --tm-ok:             #1F7A4D;
  --tm-warn:           #8A5A00;
  --tm-bad:            #A32B2B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tm-primary:        #3FA9D6;
    --tm-bg:             #070A0E;
    --tm-surface:        #111721;
    --tm-surface-sunken: #0C1119;
    --tm-text:           #E7ECF2;
    --tm-text-muted:     #93A0AE;
    --tm-text-subtle:    #6D7987;
    --tm-border:         #232C38;
    --tm-divider:        #1B2330;
    --tm-ok:             #55C489;
    --tm-warn:           #D6A94A;
    --tm-bad:            #E27070;
  }
}

/* An EXPLICIT choice, from any TerraMap host, wins over the operating system.
   Without this block these hosts followed prefers-color-scheme only: someone
   who chose Night on terramap.at or in the console still got a Day-mode status
   page, because the attribute theme-init.js sets matched no rule here. The
   values are the same as above; CSS has no way to share them, so the pair must
   be edited together. */
[data-theme="dark"] {
  color-scheme: dark;
  --tm-primary:    #3FA9D6;
  --tm-bg:       #070A0E;
  --tm-surface:    #111721;
  --tm-surface-sunken: #0C1119;
  --tm-text:       #E7ECF2;
  --tm-text-muted:   #93A0AE;
  --tm-text-subtle:  #6D7987;
  --tm-border:     #232C38;
  --tm-divider:    #1B2330;
  --tm-ok:       #55C489;
  --tm-warn:       #D6A94A;
  --tm-bad:      #E27070;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tm-bg);
  color: var(--tm-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--tm-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--tm-primary); outline-offset: 3px; border-radius: 3px; }

code, pre {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-ligatures: none;   /* keys and URLs stay literal */
}

.tm-head {
  border-block-end: 1px solid var(--tm-divider);
  background: var(--tm-surface);
}

.tm-head__inner,
.tm-main,
.tm-foot__inner {
  inline-size: 100%;
  max-inline-size: 46rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.tm-head__inner {
  block-size: 60px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tm-wordmark {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.017em;
  color: var(--tm-text);
}
.tm-wordmark span { font-weight: 400; color: var(--tm-text-muted); }

.tm-host {
  font-size: 0.75rem;
  color: var(--tm-text-subtle);
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--tm-border);
  border-radius: 999px;
}

.tm-main { flex: 1; padding-block: clamp(3rem, 9vw, 6rem) 4rem; }

.tm-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-text-muted);
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.tm-lead {
  font-size: 1.0625rem;
  color: var(--tm-text-muted);
  margin: 0 0 2.5rem;
  max-inline-size: 40rem;
}

h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tm-text-muted);
  margin: 2.5rem 0 0.75rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-block-end: 0; }

.tm-card {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}

.tm-code {
  display: block;
  background: var(--tm-surface-sunken);
  border: 1px solid var(--tm-border);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  overflow-x: auto;          /* a long URL must not scroll the page */
  white-space: pre;
}

.tm-defs { margin: 0; }
.tm-defs > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding-block: 0.6rem;
  border-block-start: 1px solid var(--tm-divider);
}
.tm-defs > div:first-child { border-block-start: 0; padding-block-start: 0; }
.tm-defs dt {
  flex: 0 0 9rem;
  font-size: 0.875rem;
  color: var(--tm-text-muted);
}
.tm-defs dd {
  flex: 1 1 16rem;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  word-break: break-word;
}

.tm-note {
  font-size: 0.875rem;
  color: var(--tm-text-muted);
  margin-block-start: 2rem;
}

.tm-foot {
  border-block-start: 1px solid var(--tm-divider);
  padding-block: 1.5rem;
  font-size: 0.8125rem;
  color: var(--tm-text-subtle);
}
.tm-foot__inner { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; }
.tm-foot a { color: var(--tm-text-muted); }

/* ── Status ─────────────────────────────────────────────────────────────── */

.tm-status { display: flex; align-items: center; gap: 0.75rem; }

.tm-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--tm-text-subtle);
  flex: none;
}
.tm-dot[data-state="ok"]      { background: var(--tm-ok); }
.tm-dot[data-state="degraded"]{ background: var(--tm-warn); }
.tm-dot[data-state="down"]    { background: var(--tm-bad); }

.tm-status__label { font-weight: 500; }
.tm-status__detail { font-size: 0.875rem; color: var(--tm-text-muted); }