/* ==========================================================================
   Succession Radar — shared components
   Loaded after /css/tokens.css on every page.

   Every value here is a token. No colour, font size or font family is written
   down in this file — if a component needs one that does not exist, it goes
   into tokens.css first (tests/test_brand_rules.py enforces it). Layout that
   belongs to one page stays in that page's own <style> block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

b, strong { font-weight: var(--weight-semibold); }

/* Form controls do not inherit type by default; left alone they would render
   in the operating system's face, which is a third typeface. So would code:
   the two-typeface rule has no monospace exception. */
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd, pre, samp { font-family: var(--font-body); font-size: inherit; }

table { border-collapse: collapse; }
th { font-weight: var(--weight-medium); text-align: left; }

/* --------------------------------------------------------------------------
   2. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 28px;
}
.container--text { max-width: 820px; }
.container--form { max-width: 520px; }
.container--wide { max-width: 1400px; }

/* The page frame: header, main, footer. A page shorter than the window keeps
   its footer at the foot of the window rather than floating halfway up. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
/* A content page: room between its last line and the footer. */
.page { padding-bottom: var(--space-8); }

.section { border-bottom: var(--border-width) solid var(--border-default); }
.section--raised { background: var(--surface-raised); }
.section--last { border-bottom: none; }
/* Vertical padding only: .section__inner sits on the same element as
   .container, whose side padding it must not reset. */
.section__inner { padding-top: 88px; padding-bottom: 88px; }

@media (max-width: 640px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .page { padding-bottom: var(--space-7); }
  .section__inner { padding-top: 56px; padding-bottom: 56px; }
}

/* --------------------------------------------------------------------------
   3. Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-title {
  font-size: var(--size-h1);
  line-height: var(--leading-tight);
  margin: var(--space-7) 0 var(--space-4);
  text-wrap: pretty;
}

.section-title {
  font-size: var(--size-h2);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  max-width: 24ch;
  text-wrap: pretty;
}

.lead {
  font-size: var(--size-lead);
  line-height: var(--leading-lead);
  color: var(--text-body);
  max-width: 60ch;
  text-wrap: pretty;
}

.muted { color: var(--text-muted); }
.text-error { color: var(--text-error); }
.text-success { color: var(--text-success); }
.nowrap { white-space: nowrap; }

/* Long-form pages: terms, privacy, about, funding. Running text at 16px on a
   68ch measure, with headings spaced from what came before them. */
.prose { color: var(--text-body); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--size-h4); line-height: 1.3; margin-top: var(--space-7); }
.prose h3 { font-size: var(--size-lead); line-height: 1.35; margin-top: var(--space-6); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: var(--space-5); max-width: var(--measure); }
.prose li + li { margin-top: var(--space-2); }
/* A boxed aside in running text needs more air than a paragraph gap, and a
   bottom margin rather than a rule on what follows, so a heading after it
   keeps its own larger space. */
.prose > .callout, .prose > .card, .prose > .status { margin-top: var(--space-5); margin-bottom: var(--space-5); }

/* --------------------------------------------------------------------------
   4. The logo lockup
   The radar mark: two open range rings, a swept sector, a contact and a
   signal blip. BRAND.md §5 still describes the mark it replaced, Concept C,
   "Cohort Bars". The mark is inline SVG so it takes its colour from the
   lockup. Primary 800 on light; .lockup--inverted for Paper on Navy 700 or
   darker. The blip alone has a colour of its own. Never on amber, never
   outlined.
   -------------------------------------------------------------------------- */

.lockup {
  display: inline-flex;
  align-items: flex-end;
  gap: 11px;
  flex: 0 0 auto;
  color: var(--logo-color);
  text-decoration: none;
}
.lockup:hover { color: var(--logo-color); }
.lockup__mark {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: currentColor;
}
.lockup__wordmark {
  font-family: var(--font-heading);
  font-size: var(--size-wordmark);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wordmark);
  line-height: 0.78;
  white-space: nowrap;
}
.lockup--sm { gap: 9px; }
.lockup--sm .lockup__mark { width: 18px; height: 18px; }
.lockup--sm .lockup__wordmark { font-size: var(--size-wordmark-sm); }
.lockup--inverted,
.lockup--inverted:hover { color: var(--logo-color-inverted); }
.lockup__blip { fill: var(--logo-signal); }
.lockup--inverted .lockup__blip { fill: var(--logo-signal-inverted); }

/* --------------------------------------------------------------------------
   5. Site header (BRAND.md §6)
   64px, Paper, a 1px Rule border and no shadow. Sticky; the border is the
   only state. One CTA — "Start free" signed out, "Dashboard" signed in.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--border-default);
}
.site-header--static { position: static; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-height);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 0 1 auto;
}
.site-nav__link {
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--text-heading);
  border-bottom-color: var(--border-strong);
}

.nav-burger {
  display: none;
  order: 2;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  background: transparent;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav-burger:hover { border-color: var(--border-strong); }
.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-heading);
}

.mobile-menu {
  border-top: var(--border-width) solid var(--border-default);
  background: var(--surface-page);
}
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-2);
  padding-bottom: var(--space-3);
}
.mobile-menu__link {
  display: block;
  width: 100%;
  padding: var(--space-3) 0;
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: var(--border-width) solid var(--border-default);
  cursor: pointer;
}
.mobile-menu__link:last-child { border-bottom: 0; }
.mobile-menu__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (min-width: 1001px) {
  .mobile-menu { display: none !important; }
}
@media (max-width: 1000px) {
  .site-nav .site-nav__link { display: none; }
  .nav-burger { display: inline-flex; }
  /* On a phone the CTA persists as a text link, not a button. */
  .site-nav .site-nav__cta {
    background: transparent;
    color: var(--text-heading);
    border-color: transparent;
    padding: var(--space-2) 0;
  }
}
@media (max-width: 640px) {
  .site-header__inner { min-height: var(--header-height-mobile); gap: var(--space-4); }
  .site-nav { gap: var(--space-4); }
}

/* The product header: the lockup and the account's controls, wrapping on a
   narrow window rather than squashing every label onto two lines. */
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  min-height: var(--header-height);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.app-bar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   6. Buttons
   Primary: solid Primary 800, hover Primary 600. Secondary: a 1px Rule border
   that darkens on hover. Both 4px radius, both the same outer size.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  padding: 11px 20px;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
}
.btn-primary:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-text); }
.btn-primary:active { background: var(--action-primary-bg-active); }
.btn-secondary {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-text);
  border-color: var(--border-default);
}
.btn-secondary:hover { border-color: var(--border-strong); color: var(--action-secondary-text); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--action-disabled-bg);
  color: var(--action-disabled-text);
  border-color: transparent;
  cursor: not-allowed;
}
.btn-sm { padding: 5px 12px; }
.btn-block { display: flex; width: 100%; }

/* A button that reads as a link: row actions, "Close", "Forgot password". */
.btn-link {
  display: inline;
  padding: 0;
  font: inherit;
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}
.btn-link:hover { color: var(--text-link-hover); }
.btn-link:disabled { color: var(--text-muted); cursor: not-allowed; }

/* --------------------------------------------------------------------------
   7. Forms
   Zero-specificity element rules, so any page can override them.
   -------------------------------------------------------------------------- */

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),
:where(select),
:where(textarea) {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--size-body);
  line-height: var(--leading-caption);
  color: var(--text-body);
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
}
:where(textarea) { line-height: var(--leading-body); resize: vertical; }
:where(input, select, textarea):focus {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: 0;
  border-color: var(--border-focus);
}
:where(input, select, textarea):disabled {
  background: var(--surface-raised);
  color: var(--text-muted);
}
::placeholder { color: var(--text-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--action-primary-bg); }

.field { margin-bottom: var(--space-5); }
.label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
  color: var(--text-body);
}
.field-hint {
  margin-top: var(--space-2);
  font-size: var(--size-body);
  line-height: var(--leading-lead);
  color: var(--text-muted);
}

/* A checkbox with its sentence beside it: consent lines, the terms tick. */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--size-body);
  line-height: var(--leading-lead);
  color: var(--text-body);
}
.check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; cursor: pointer; }
.check label { cursor: pointer; }

/* Honeypot: hidden from people, filled by bots. Kept out of the tab order
   and hidden from screen readers so it never reaches a real user. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   8. Surfaces: cards, callouts, status messages
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 28px;
}
.card--raised { background: var(--surface-raised); }
.card__title {
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text-heading);
}

/* Information set apart from the flow: Primary 100 with Ink on top (13.2:1).
   Links inside take the heading navy, because the link blue is 4.3:1 on this
   fill and fails AA. */
.callout {
  background: var(--surface-selected);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5) 28px;
  color: var(--text-body);
  max-width: 74ch;
}
.callout > * + * { margin-top: var(--space-3); }
.callout:not(.callout--quiet) a { color: var(--text-heading); }
.callout__title {
  font-family: var(--font-heading);
  font-size: var(--size-lead);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--text-heading);
}
/* Mist instead of Primary 100: a quieter aside, where the link blue clears AA
   again (4.9:1). */
.callout--quiet { background: var(--surface-raised); }
/* A caution the reader must not skim past: the same fill, a strong border. */
.callout--strong { border-color: var(--border-strong); }

/* System feedback only — a failed request, a saved change. Never a data
   state: a company's figures are never red or green (BRAND.md §3). The text
   says what happened; the colour only repeats it. */
.status {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--size-body);
  line-height: var(--leading-lead);
  color: var(--text-body);
}
.status--error { border-left-color: var(--border-error); color: var(--text-error); }
.status--success { border-left-color: var(--border-success); color: var(--text-success); }

/* --------------------------------------------------------------------------
   9. Badges
   Caption size on a pill. Only .badge--signal is amber, and only for an
   elevated succession signal; it always carries its text label.
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
  color: var(--text-body);
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge--signal {
  color: var(--text-inverted);
  background: var(--surface-signal);
  border-color: var(--border-signal);
}
.badge--signal::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.badge--strong { color: var(--text-heading); border-color: var(--border-strong); }
.badge--inverted {
  color: var(--text-inverted);
  background: var(--surface-inverted);
  border-color: var(--surface-inverted);
}
.badge--selected { background: var(--surface-selected); }
.badge--muted { color: var(--text-muted); }
.badge--dashed { border-style: dashed; }

/* --------------------------------------------------------------------------
   10. Tables
   1px horizontal rules only; Mist header row; Primary 50 on hover.
   -------------------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; background: var(--surface-page); }
.table th {
  padding: 10px 12px;
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--text-muted);
  background: var(--surface-raised);
  border-bottom: var(--border-width) solid var(--border-default);
}
.table td {
  padding: 12px;
  vertical-align: top;
  border-bottom: var(--border-width) solid var(--border-default);
}
.table tbody tr:hover > td { background: var(--surface-hover); }
.table .num { text-align: right; }
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   11. Dialogs
   A 1px border and a scrim. No shadow.
   -------------------------------------------------------------------------- */

dialog {
  width: calc(100% - 40px);
  max-width: 720px;
  padding: 0;
  color: var(--text-body);
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
}
dialog::backdrop { background: var(--surface-scrim); }
.dialog__body { padding: var(--space-6); }
.dialog__title {
  font-size: var(--size-h4);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

/* --------------------------------------------------------------------------
   12. Site footer
   Carries the statutory attribution line and the data-controller line, in
   BRAND.md §2's exact wording, on every public page.
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-page);
  border-top: var(--border-width) solid var(--border-default);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5) var(--space-6);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 20px;
  font-size: var(--size-body);
}
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 80ch;
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-default);
}
.site-footer__legal p {
  max-width: none;
  font-size: var(--size-caption);
  line-height: var(--leading-lead);
  color: var(--text-muted);
}
/* The product pages' footer: the two statutory lines and nothing else, so
   no rule is needed above them. */
.site-footer__legal--solo { padding-top: 0; border-top: 0; }

/* --------------------------------------------------------------------------
   13. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .site-header, .mobile-menu, .site-footer__links, .nav-burger { display: none !important; }
  .callout, .card, .status { background: transparent; }
}