/* Citamark "Quiet Authority" tokens. Light only. One soft surface lit from the top left,
   raised white cards, ink pill buttons, green for labels, links and marks.
   No gradients, glows or textures.
   The palette is the HANDOFF.md list plus the documented extensions in its theme block:
   --warn (a third health state next to green and danger), the secondary and danger hover
   shades, the band eyebrow tint, and the alpha tints below (listed hues at a fixed alpha, for
   rules, hover states, badge and diff backgrounds). Every colour in this file is one of these
   tokens; do not add colours or alphas outside that list. */

:root {
  --surface: #EDEFEC;
  --white: #FFFFFF;
  --ink: #141A17;
  --graphite: #454F4A;
  --slate: #656E69;
  --green: #0B6E4F;
  --green-hover: #0A5F45;
  --forest: #10302A;
  --danger: #8A3A2A;
  --danger-hover: #75301F;
  --warn: #B7791F;
  --surface-hover: #E4E7E3;
  --band-eyebrow: #9CD3BE;
  --shadow-dark: rgba(20, 26, 23, .10);
  --shadow-light: rgba(255, 255, 255, .90);
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Alpha tints of listed hues (documented extensions, see HANDOFF.md). */
  --ink-02: rgba(20, 26, 23, .025);   /* table row hover */
  --ink-04: rgba(20, 26, 23, .04);    /* diff section head */
  --ink-05: rgba(20, 26, 23, .05);    /* nav link hover, diff row rule */
  --ink-06: rgba(20, 26, 23, .06);    /* neutral badge background */
  --ink-07: rgba(20, 26, 23, .07);    /* table, diff column and alert row rules */
  --ink-08: rgba(20, 26, 23, .08);    /* hr, well inset shadow */
  --green-tint: rgba(11, 110, 79, .08);     /* diff added rows, notices */
  --green-tint-strong: rgba(11, 110, 79, .10); /* ok badge */
  --warn-tint: rgba(183, 121, 31, .10);     /* diff changed rows */
  --warn-tint-strong: rgba(183, 121, 31, .12); /* warn badge and notice */
  --danger-tint: rgba(138, 58, 42, .08);    /* diff removed rows, danger notice */
  --danger-tint-strong: rgba(138, 58, 42, .10); /* critical badge */
  --band-text: rgba(255, 255, 255, .82);    /* body text on the forest band */
  --nav-glass: rgba(237, 239, 236, .85);    /* floating pill nav (HANDOFF) */

  --font-heading: 'Instrument Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --card-shadow: 10px 10px 28px var(--shadow-dark), -10px -10px 28px var(--shadow-light);
  --pill-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light);
  --well-shadow: inset 3px 3px 8px var(--ink-08), inset -3px -3px 8px var(--shadow-light);

  --radius-card: 24px;
  --radius-well: 12px;
  --radius-pill: 999px;

  --nav-height: 56px;
  --max-width: 1120px;
  --gutter: 24px;
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
/* Anchor jumps land below the sticky nav pill (nav height plus its top offset and some air). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-height) + 40px); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--ink-08); margin: 24px 0; }
code, pre, kbd, .mono { font-family: var(--font-mono); font-size: .92em; }
pre { white-space: pre-wrap; word-break: break-word; }

/* ---------- typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0 0 12px;
  color: var(--ink);
}
h1 { font-size: 44px; }
h2 { font-size: 30px; }
h3 { font-size: 22px; }
h4 { font-size: 17px; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 19px; color: var(--graphite); }
.muted { color: var(--slate); }
.small { font-size: 14px; }
strong { font-weight: 600; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}

/* ---------- layout ---------- */

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.page { padding-top: 40px; padding-bottom: 64px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-lg { display: flex; flex-direction: column; gap: 32px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.right { text-align: right; }
.center { text-align: center; }
.mt { margin-top: 24px; }
.mb { margin-bottom: 24px; }

.page-header { margin-bottom: 32px; }
.page-header .intro { color: var(--graphite); max-width: 60ch; }

/* ---------- nav (floating pill) ---------- */

.nav-wrap { position: sticky; top: 16px; z-index: 20; padding: 16px var(--gutter) 0; }
.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 12px 0 24px;
  background: var(--nav-glass);
  border-radius: var(--radius-pill);
  box-shadow: var(--pill-shadow);
}
.nav-brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.nav-brand:hover { text-decoration: none; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
/* The signed-in app nav has many links. When they do not fit, the list scrolls sideways inside the
   pill, so the page never does and every link stays reachable. Auto margins centre the list only
   when it fits (they collapse to 0 when it overflows, so nothing is cut off on the left). */
.nav-links:not(.nav-links-public) { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(20,26,23,.18) transparent; }
.nav-links:not(.nav-links-public) > li { flex-shrink: 0; }
.nav-links:not(.nav-links-public) > li:first-child { margin-left: auto; }
.nav-links:not(.nav-links-public) > li:last-child { margin-right: auto; }
/* A scrolling list clips anything outside its box, so its links draw the focus ring inside. */
.nav-links:not(.nav-links-public) a:focus-visible { outline-offset: -2px; }
/* nav.js marks a clipped edge, so the cut-off link fades out and you can tell more links are there. */
.nav-links.clip-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.nav-links.clip-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
.nav-links.clip-start.clip-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.nav-links a {
  display: inline-block;
  padding: 8px 14px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  color: var(--graphite);
  font-weight: 500;
  font-size: 14px;
}
/* Tablet and small laptop: tighter link padding so the app links fit from about 1000px up. */
@media (min-width: 721px) and (max-width: 1100px) { .nav-links a { padding: 8px 10px; } }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--ink-05); text-decoration: none; }
.nav-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--slate); flex-shrink: 0; }
.nav-user form { margin: 0; }

/* ---------- band (one flat forest band per page) ---------- */

.band {
  background: var(--forest);
  color: var(--white);
  padding: 72px 0 64px;
  margin: 24px 0 40px;
}
.band h1, .band h2, .band h3 { color: var(--white); }
.band .eyebrow { color: var(--band-eyebrow); }
.band p { color: var(--band-text); }
.band a { color: var(--white); }
.band-tight { padding: 40px 0 36px; }

/* ---------- cards ---------- */

.card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  padding: 28px;
}
.card-tight { padding: 20px; }
.card h3 { margin-top: 0; }
.card-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-footer { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--pill-shadow);
  transition: transform .25s var(--ease), background .25s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: #1F2723; color: var(--white); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--surface); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-hover); color: var(--ink); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-sm { min-height: 36px; padding: 6px 16px; font-size: 14px; }
.btn-link { background: none; box-shadow: none; color: var(--green); padding: 0; min-height: 0; font-weight: 500; }
.btn-link:hover { background: none; color: var(--green-hover); transform: none; text-decoration: underline; }

/* ---------- wells (inset) ---------- */

.well {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--well-shadow);
  padding: 16px 18px;
}
.well-sm { padding: 10px 14px; border-radius: var(--radius-well); }

/* ---------- forms ---------- */

label { display: block; font-size: 14px; font-weight: 500; color: var(--graphite); margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.field .hint { font-size: 13px; color: var(--slate); margin-top: 6px; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-well);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--well-shadow);
}
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--slate); opacity: .8; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--green); }
.check { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--ink); }
.form-inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-inline .field { margin: 0; flex: 1 1 220px; }
.form-error { color: var(--danger); font-size: 14px; }

/* ---------- tables ---------- */

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ink-07); vertical-align: middle; }
.table th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--ink-02); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* ---------- badges + health dots ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--ink-06);
  color: var(--graphite);
  white-space: nowrap;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--slate); }
.badge-ok { color: var(--green); background: var(--green-tint-strong); }
.badge-ok::before { background: var(--green); }
/* Warn text is ink: --warn on its tint is about 3.2:1, under AA for small text. The warn dot and
   tint still carry the state. */
.badge-warn { color: var(--ink); background: var(--warn-tint-strong); }
.badge-warn::before { background: var(--warn); }
.badge-critical { color: var(--danger); background: var(--danger-tint-strong); }
.badge-critical::before { background: var(--danger); }
.badge-info { color: var(--graphite); }
.badge-plain::before { display: none; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--slate); vertical-align: middle; }
.dot-ok { background: var(--green); }
.dot-warn { background: var(--warn); }
.dot-critical { background: var(--danger); }

/* ---------- diff ---------- */

.diff { font-family: var(--font-mono); font-size: 13px; border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--well-shadow); }
.diff-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); padding: 6px 14px; border-bottom: 1px solid var(--ink-05); }
.diff-row:last-child { border-bottom: 0; }
.diff-row .diff-sign { color: var(--slate); }
.diff-added { background: var(--green-tint); }
.diff-added .diff-sign { color: var(--green); }
.diff-removed { background: var(--danger-tint); }
.diff-removed .diff-sign { color: var(--danger); }
.diff-changed { background: var(--warn-tint); }
/* The "~" sign is text, so it is graphite: --warn on the warn tint is about 3.3:1, under AA. The
   row tint still carries the state. */
.diff-changed .diff-sign { color: var(--graphite); }
.diff-head { font-family: var(--font-body); font-weight: 600; padding: 10px 14px; background: var(--ink-04); }
.diff-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.diff-cols > div + div { border-left: 1px solid var(--ink-07); }

/* ---------- alerts + empty ---------- */

.alert-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--ink-07); }
.alert-row:last-child { border-bottom: 0; }
.alert-row .alert-title { font-weight: 600; }
.alert-row .alert-meta { font-size: 13px; color: var(--slate); }
.alert-row time { font-size: 13px; color: var(--slate); white-space: nowrap; }

.empty { text-align: center; padding: 48px 24px; color: var(--graphite); }
.empty h3 { margin-bottom: 8px; }
.empty h1 { font-size: 30px; margin-bottom: 8px; }
.empty p { max-width: 46ch; margin: 0 auto 20px; }
/* Links inside running text are underlined, so colour is not the only cue (WCAG 1.4.1). */
.empty p a, .legal p a, .legal li a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

.notice { padding: 12px 16px; border-radius: var(--radius-well); background: var(--green-tint); color: var(--green); font-size: 14px; }
.notice-danger { background: var(--danger-tint); color: var(--danger); }
.notice-warn { background: var(--warn-tint-strong); color: var(--ink); }

/* ---------- footer ---------- */

.footer { padding: 32px 0 48px; font-size: 13px; color: var(--slate); }
.footer .row-between { align-items: flex-start; }
.footer a { color: var(--slate); }
.footer a:hover { color: var(--green); }
.footer-links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }

/* ---------- hero (public) ---------- */

.hero { padding: 40px 0 8px; max-width: 720px; }
.hero h1 { font-size: 56px; }
.hero .lead { margin: 16px 0 28px; }
.signin { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.legal { max-width: 72ch; }
.legal h2 { font-size: 24px; margin-top: 32px; }
.legal ul { padding-left: 20px; }

/* ---------- key/value lists ---------- */

.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; font-size: 14px; }
.kv dt { color: var(--slate); font-weight: 500; margin: 0; }
.kv dd { margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  h1, .hero h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  .grid-2, .grid-3, .diff-cols { grid-template-columns: 1fr; }
  .nav-wrap { top: 8px; padding-top: 8px; }
  .nav { padding: 0 8px 0 18px; gap: 8px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 6px 8px; font-size: 13px; }
  .band { padding: 48px 0 40px; }
  .card { padding: 20px; }
  /* The side note goes under its heading instead of into a thin column beside it. */
  .card-title { flex-direction: column; align-items: flex-start; gap: 4px; }
  .alert-row { grid-template-columns: auto minmax(0, 1fr); }
  .alert-row time { grid-column: 2; }
}

/* The signed-in nav has many links, and even at the widest pill they and the email do not fit
   together, so the email stays out of the nav (Settings shows who is signed in). */
.nav-user span.email { display: none; }

/* Phones: the pill tightens so the public nav keeps brand, "How it works", "Safety" and Sign in
   in one row at 360px. Every page renders the nav from the shared Layout, so this lives here. */
@media (max-width: 400px) {
  .nav { padding: 0 4px 0 12px; gap: 4px; }
  .nav-brand { font-size: 16px; }
  .nav-links a { padding: 6px 7px; }
  /* Inside the link, so the ring on "Safety" never runs into the Sign in button. */
  .nav-links-public a:focus-visible { outline-offset: -2px; }
  .nav-user .btn-sm { padding: 6px 10px; font-size: 13px; }
}

@media print {
  .nav-wrap, .footer, .btn { display: none; }
  .card { box-shadow: none; border: 1px solid var(--shadow-dark); }
}