/* Shared across docs/*.html — design tokens + the top bar every page uses.
 * Included by: index.html, editor.html, bounties.html, bounty.html.
 * NOT used by cellbank.html, which predates this system and has its own
 * distinct visual theme (see docs/README.md).
 *
 * Adding a new page? Link this file, add `<header id="siteHeader"></header>`
 * where the top bar goes, then call EncapCommon.mountHeader(...) from
 * common.js — see docs/README.md for the two-line pattern.
 */
:root {
  --paper: #F6F8F7;
  --card: #FFFFFF;
  --ink: #14201E;
  --ink-soft: #566662;
  --ink-faint: #8A9895;
  --line: #E1E7E4;
  --brand: #00AD99;        /* Encapsulate primary teal (brand guide) — decorative use only */
  --accent: #00776A;       /* brand teal darkened for AA contrast on white / as text */
  --accent-deep: #005349;
  --accent-wash: #E6F8F5;  /* tint of brand secondary #88E2D3 */
  --danger: #B4402F;
  --danger-wash: #FBEAE7;
  --warn-wash: #FCF3E6;
  --warn-ink: #8A5A12;
  --gold: #B8860B;
  --gold-wash: #FBF3DF;
  --radius: 12px;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
a.plain { color: inherit; text-decoration: none; } /* for pages whose base `a` color isn't inherit */

/* ---- Top bar (filled in by EncapCommon.mountHeader) ---- */
header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem; padding: 1.05rem clamp(1.25rem, 5vw, 3rem); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand svg { display: block; flex-shrink: 0; }
.brand img { display: block; flex-shrink: 0; width: 28px; height: 28px; object-fit: contain; }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.wordmark span { color: var(--ink-faint); font-weight: 400; }
.who {
  display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--ink-soft);
  opacity: 0; transition: opacity 0.4s ease;
}
.who.ready { opacity: 1; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-deep);
  display: grid; place-items: center; font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase;
}
.who .email { display: none; }
@media (min-width: 640px) { .who .email { display: inline; } }
.signout {
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint);
  padding-left: 0.6rem; border-left: 1px solid var(--line); transition: color 0.2s;
}
.signout:hover, .signout:focus-visible { color: var(--accent); }