/* Legal: the /terms, /privacy and /disclaimer pages, the first-visit notice and the
   short line in the status bar. Loaded by index.html and by the legal pages. */

/* ---- Legal pages (standalone, no style.css) --------------------------- */
.legal-body {
  --bg: #05080C;
  --panel: hsl(213, 36%, 6%);
  --rule: hsl(211, 28%, 12%);
  --rule-strong: hsl(210, 24%, 22%);
  --text: #CFEAFF;
  --text-2: hsl(206, 45%, 76%);
  --dim: hsl(208, 24%, 58%);
  --accent: #6CCBFF;
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}
.legal-body *, .legal-body *::before, .legal-body *::after { box-sizing: border-box; }
.legal-body a { color: var(--accent); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
.legal-body a:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.legal-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule-strong);
}
.legal-mark { font-weight: 800; letter-spacing: .2em; color: var(--text) !important; }
.legal-nav { display: flex; gap: 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.legal-nav a[aria-current="page"] { color: var(--text); border-bottom: 1px solid var(--accent); }

.legal { max-width: 72ch; margin: 0 auto; padding: 24px 16px 32px; }
.legal-cmd { margin: 0 0 8px; color: var(--accent); font-size: 12px; letter-spacing: .06em; }
.legal h1 { margin: 0; color: var(--text); font-size: 24px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.legal-meta { margin: 6px 0 24px; color: var(--dim); font-size: 12px; }
.legal h2 { margin: 32px 0 8px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.legal h3 { margin: 20px 0 6px; color: var(--text); font-size: 14px; font-weight: 600; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 12px; padding-left: 2.2ch; }
.legal li { margin: 0 0 6px; }
.legal li::marker { color: var(--dim); }
.legal strong { color: var(--text); font-weight: 600; }

.legal-foot {
  max-width: 72ch; margin: 0 auto; padding: 16px 16px 40px;
  border-top: 1px solid var(--rule-strong);
  color: var(--dim); font-size: 12px;
}
.legal-foot p { margin: 0 0 4px; }

@media (max-width: 639px) {
  .legal-body { font-size: 13px; }
  .legal h1 { font-size: 20px; }
}

/* ---- Status bar: the always-visible short line ------------------------- */
/* The legal line never shrinks: the status message on the left gives way (ellipsis). */
.status-legal { display: flex; flex: 0 0 auto; gap: 12px; color: var(--faint, #4a5a6b); }
.status-legal .legal-line { color: var(--dim, #7f93a8); }
.status-legal a { color: var(--accent, #6CCBFF); }
.status-legal a:hover { color: var(--text, #CFEAFF); text-decoration: none; }
.legal-line-short { display: none; }
@media (max-width: 639px) {
  .status-legal .legal-line-long { display: none; }
  .status-legal .legal-line-short { display: inline; }
  .status-legal .legal-legend { display: none; }
}

/* ---- First-visit notice ----------------------------------------------- */
.consent {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: hsla(213, 43%, 3%, .78);
}
.consent-box {
  width: 100%; max-width: 60ch;
  padding: 18px 20px 16px;
  background: var(--panel, #0a1017);
  border: 1px solid var(--accent, #6CCBFF);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  color: var(--text-2, #b6d3ea);
  font-size: 13px; line-height: 1.6;
}
.consent-k { margin: 0 0 10px; color: var(--accent, #6CCBFF); font-size: 11px; font-weight: 600; letter-spacing: .2em; }
.consent-lead { margin: 0 0 8px; color: var(--text, #CFEAFF); font-size: 15px; font-weight: 600; line-height: 1.5; }
.consent-body { margin: 0 0 16px; }
.consent-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.consent-accept {
  padding: 6px 14px;
  border: 1px solid var(--accent, #6CCBFF);
  background: var(--accent, #6CCBFF);
  color: var(--ink, #030609);
  font: inherit; font-weight: 800; letter-spacing: .08em;
  cursor: pointer;
}
.consent-accept:hover { filter: brightness(1.1); }
.consent-accept:focus-visible { outline: 2px solid var(--text, #CFEAFF); outline-offset: 2px; }
.consent-links { display: flex; gap: 14px; font-size: 12px; }
.consent-links a { color: var(--accent, #6CCBFF); }
@media (max-width: 639px) {
  .status-note.status-legal { display: flex; flex: 0 0 auto; gap: 8px; }
}

/* ---- Tables (privacy: who receives data, how long we keep it) ---------------- */
.legal-table { margin: 0 0 16px; overflow-x: auto; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule, #1b2531); text-align: left; vertical-align: top; }
.legal-table thead th { color: var(--dim, #7f93a8); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.legal-table tbody th { color: var(--text, #CFEAFF); font-weight: 600; white-space: nowrap; }
.legal-table td { color: var(--text-2, #b6d3ea); }
@media (max-width: 639px) { .legal-table tbody th { white-space: normal; } }