/*
  site.css — chrome shared across every page: announcement bar, header/nav,
  footer, consent banner, and the legal-page article layout. Loaded on
  every page alongside (or instead of, on legal pages) style.css.

  Uses the same color tokens as style.css so the tool and the site frame
  read as one product, not a tool bolted onto a generic template.
*/

:root {
  --ink: #e6e8eb;
  --ink-dim: #9aa3ad;
  --bg: #101317;
  --bg-panel: #161a20;
  --bg-field: #0c0f13;
  --line: #262c34;
  --public: #6fb3c8;
  --private: #d9a441;
  --danger: #e06c5c;
  --success: #7bbf8a;
  --mono: "IBM Plex Mono", "SF Mono", Consolas, "Roboto Mono", monospace;
  --sans: "IBM Plex Sans", -apple-system, Segoe UI, sans-serif;
  --radius: 3px;
  --touch: 44px;
  --content-max: 760px;
  --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.5; }

a { color: var(--public); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Announcement bar ─────────────────────────────────────────────── */
.announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 10px var(--gutter);
  text-align: center;
  min-height: var(--touch);
}
.announcement__dismiss {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  min-height: var(--touch);
  min-width: var(--touch);
}
.announcement__dismiss:hover { color: var(--ink); }

/* ── Header / nav ──────────────────────────────────────────────────── */
.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.site-header__brand {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin-right: auto;
}
.site-header__brand:hover { text-decoration: none; color: var(--public); }

.site-nav__toggle {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 8px 14px;
  min-height: var(--touch);
  cursor: pointer;
}

.site-nav {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: 2px;
}
.site-nav--open { display: flex; }

.site-nav__link {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink-dim);
  padding: 12px 4px;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.site-nav__link:hover { color: var(--ink); text-decoration: none; }
.site-nav__link--active { color: var(--public); }

/* Tablet and up: nav becomes an inline row, hamburger toggle hides */
@media (min-width: 640px) {
  .site-nav__toggle { display: none; }
  .site-nav {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    gap: 4px 18px;
  }
  .site-nav__link { border-bottom: none; padding: 8px 0; min-height: auto; }
}

/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px var(--gutter) 60px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.site-footer__tagline { color: var(--ink-dim); font-size: 13px; margin: 0 0 10px; max-width: 60ch; }
.site-footer__copyright { color: var(--ink-dim); font-size: 12px; margin: 0 0 14px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer__links a { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); }
.site-footer__links a:hover { color: var(--public); }

/* ── Consent banner ────────────────────────────────────────────────── */
#consent-banner-mount { position: sticky; bottom: 0; z-index: 40; }
.consent-banner {
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  padding: 18px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.consent-banner__body { max-width: var(--content-max); margin: 0 auto; width: 100%; }
.consent-banner__heading { font-family: var(--mono); font-size: 14px; margin: 0 0 6px; color: var(--ink); }
.consent-banner__message { font-size: 13px; color: var(--ink-dim); margin: 0; line-height: 1.6; }
.consent-banner__actions {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.consent-accept {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--public);
  color: #0c0f13;
  border: none;
  border-radius: var(--radius);
  padding: 12px 18px;
  min-height: var(--touch);
  cursor: pointer;
}
.consent-banner .btn-secondary {
  font-family: var(--mono);
  font-size: 12.5px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-height: var(--touch);
  cursor: pointer;
}

@media (min-width: 640px) {
  .consent-banner { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; }
  .consent-banner__body { flex: 1 1 420px; }
  .consent-banner__actions { flex-direction: row; width: auto; flex: 0 0 auto; }
}

/* ── Legal / static content pages ─────────────────────────────────── */
.legal-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(24px, 6vw, 40px) var(--gutter) 40px;
}
.legal-page h1 { font-family: var(--mono); font-size: clamp(19px, 4vw, 23px); margin: 0 0 6px; }
.legal-page .legal-page__updated { color: var(--ink-dim); font-size: 12.5px; font-family: var(--mono); margin: 0 0 28px; }
.legal-page h2 { font-size: 16px; margin: 32px 0 10px; }
.legal-page h3 { font-size: 14px; margin: 20px 0 8px; color: var(--ink); }
.legal-page p, .legal-page li { font-size: 14.5px; color: var(--ink-dim); line-height: 1.7; }
.legal-page ul, .legal-page ol { padding-left: 22px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.legal-page th, .legal-page td { text-align: left; padding: 8px 10px; border: 1px solid var(--line); vertical-align: top; }
.legal-page th { color: var(--ink); font-family: var(--mono); font-weight: 600; background: var(--bg-panel); }
.legal-page td { color: var(--ink-dim); }
.legal-page .legal-disclaimer {
  font-size: 12.5px;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 28px;
  background: var(--bg-panel);
}

/* ── Cookie preferences page controls ─────────────────────────────── */
.consent-category {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.consent-category__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.consent-category__label { font-family: var(--mono); font-size: 13.5px; color: var(--ink); margin: 0 0 6px; }
.consent-category__desc { font-size: 13px; color: var(--ink-dim); margin: 0; line-height: 1.6; }
.consent-toggle {
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  margin-top: 2px;
}
.consent-status {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  margin: 18px 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.consent-page-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
@media (min-width: 640px) {
  .consent-page-actions { flex-direction: row; flex-wrap: wrap; }
}