/* =====================================================================
   ANTAEUS — shared site layer: doc pages (privacy, terms, support, 404),
   the Build Log and changelog (functions/_lib/render.js), and the tools.
   Depends on tokens-11.css. The homepage adds home-1.css on top.

   The record pages keep a narrow margin for their marks (privacy §4 and
   terms §5 are cited BY NUMBER from CLAUDE.md and SITE_README, and the
   number lives in the mark). Everything else is Slate: sentence case,
   hairlines, one green.
   ===================================================================== */

main { position: relative; z-index: 1; }

.ledger-page {
  --mgn: 64px;
  --mgn-pad: 20px;
  position: relative;
  padding-left: calc(var(--mgn) + var(--mgn-pad));
}
.ledger-page::before {
  content: '';
  position: absolute;
  left: var(--mgn);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}

/* A margin mark: right-aligned against the spine. SPARSE BY LAW. */
.mark {
  position: absolute;
  left: calc(-1 * (var(--mgn) + var(--mgn-pad)));
  width: var(--mgn);
  padding-right: var(--s-md);
  text-align: right;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--t3);
  font-variant-numeric: tabular-nums;
}
.mark.earned { color: var(--accent); }

/* Marks fade in as their entry arrives, opacity only.
   ⚠️ GATED ON `.marks-anim`, WHICH ONLY marks-1.js SETS (and only after
   it knows it can reveal). A blocked or failed script leaves every mark
   visible. siteIntegrity.test.mjs §4 pins this shape. */
@media (prefers-reduced-motion: no-preference) {
  .marks-anim .mark {
    opacity: 0;
    transition: opacity 150ms ease;
  }
  .marks-anim .mark.in {
    opacity: 1;
  }
}

/* The section head: label on a hairline, optional caption right. */
.rulehead {
  display: flex;
  align-items: flex-end;
  gap: var(--s-sm);
  padding-bottom: var(--s-sm);
  border-bottom: 1px solid var(--hairline);
  margin: 0 0 var(--s-lg);
}
.rulehead > .mono:first-child { color: var(--t1); }
h2.rulehead, h3.rulehead { font-size: inherit; font-weight: inherit; }
.rulehead .rulehead-cap { margin-left: auto; text-align: right; font-size: 14px; line-height: 20px; color: var(--t3); flex-shrink: 1; }
@media (max-width: 760px) {
  .rulehead { flex-wrap: wrap; }
  .rulehead .rulehead-cap { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* The band: value vs your own baseline, centre tick. */
.band { position: relative; display: block; height: 14px; width: 100%; max-width: 180px; margin-top: var(--s-sm); }
.band i { position: absolute; display: block; }
.band .band-line { top: 50%; left: 0; right: 0; height: 1px; background: var(--tick); }
.band .band-centre { top: 3px; bottom: 3px; left: 50%; width: 1px; background: var(--ghost-outline); }
.band .band-now { top: 50%; left: var(--band-pos, 50%); width: 7px; height: 7px; border-radius: 50%; background: var(--t1); transform: translate(-50%, -50%); }

/* Tool results: the coach's lines inside the result column. */
.ledger { position: relative; max-width: 460px; }
.ledger .callout + .callout,
.tool-out .callout + .callout {
  margin-top: var(--s-lg);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--hairline);
}
.ledger .callout p em { font-style: normal; font-weight: 400; color: var(--t3); }
.ledger .callout + .callout::before,
.tool-out .callout + .callout::before { top: calc(var(--s-lg) + 6px); }

/* --- label/value rows ------------------------------------------------ */
.spec { max-width: 680px; }
.spec .lrow { border-top: 1px solid var(--hairline); padding: var(--s-md) 0; }
.spec .lrow:first-child { border-top: 0; }
.spec .lrow > .mono:first-child { width: 148px; }
.spec .lrow p { margin: 0; font-size: 15px; line-height: 22px; color: var(--t1); }

/* --- forms on the record pages -------------------------------------- */
.signup { display: flex; gap: var(--s-md); max-width: 520px; margin-top: var(--s-lg); flex-wrap: wrap; }
.signup .field { flex: 1 1 260px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { margin-top: var(--s-md); font-size: 14px; line-height: 20px; color: var(--t3); }
.note.err { color: var(--danger); }
.note.ok { color: var(--t1); }
#success { display: none; }
#success.on { display: block; }

/* --- doc pages ------------------------------------------------------- */
.doc { max-width: 720px; padding: var(--s-huge) 0; }
.doc h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: var(--s-sm) 0 var(--s-sm);
}
.doc .meta { font-size: 14px; color: var(--t3); }
.doc h2 {
  position: relative;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  margin: var(--s-xxxl) 0 var(--s-md);
  padding-bottom: var(--s-sm);
  border-bottom: 1px solid var(--hairline);
}
.doc h2 .mark { top: 4px; }
.doc p, .doc li { color: var(--t2); font-size: 16px; line-height: 26px; }
.doc ul { margin: var(--s-md) 0; padding-left: var(--s-xl); }
.doc li { margin: var(--s-sm) 0; }
.doc strong { color: var(--t1); }
.doc table { width: 100%; border-collapse: collapse; margin: var(--s-lg) 0; font-size: 15px; }
.doc th, .doc td {
  text-align: left;
  padding: var(--s-sm) var(--s-md) var(--s-sm) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--t2);
  vertical-align: top;
  line-height: 22px;
}
.doc th { font-size: 13px; font-weight: 600; color: var(--t3); }

/* --- changelog: a record, so its kinds are margin marks -------------- */
.release { position: relative; padding: var(--s-xxl) 0; border-top: 1px solid var(--hairline); }
.release-head { display: flex; align-items: baseline; gap: var(--s-md); margin-bottom: var(--s-md); }
.release-head h2 { font-family: var(--f-display); font-weight: 600; font-size: 28px; margin: 0; }
.change { position: relative; padding: var(--s-sm) 0; }
.change p { margin: 0; font-size: 15px; line-height: 22px; color: var(--t1); }
.change .from {
  display: inline-block;
  margin-top: var(--s-xxs);
  font-size: 13px;
  font-weight: 600;
  color: var(--t3);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.change .from:hover { color: var(--t1); }

/* --- a quiet feedback line ------------------------------------------- */
.nudge {
  margin-top: var(--s-huge);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-lg);
  align-items: baseline;
}
.nudge a { font-size: 14px; font-weight: 600; color: var(--t2); text-decoration: none; }
.nudge a:hover { color: var(--t1); }

@media (max-width: 560px) {
  .ledger-page { --mgn: 34px; --mgn-pad: 12px; }
  .mark { font-size: 12px; padding-right: var(--s-sm); }
  .lrow > .mono:first-child, .spec .lrow > .mono:first-child { width: 104px; }
  .signup { flex-direction: column; }
  .signup .field { flex: 0 0 auto; width: 100%; }
  .signup .btn { width: 100%; }
}

/* The Build Log renderer puts .ledger-page OUTSIDE .wrap (layout() owns
   the chassis, each route supplies a .wrap body). Without this the spine
   sat at the viewport's left edge, hundreds of pixels from the centred
   content. Move the chassis onto the wrap so the spine and the marks
   hang off the content's own left edge. */
main > .ledger-page { padding-left: 0; }
main > .ledger-page::before { display: none; }
main > .ledger-page > .wrap {
  position: relative;
  padding-left: calc(var(--gutter) + var(--mgn) + var(--mgn-pad));
}
main > .ledger-page > .wrap::before {
  content: '';
  position: absolute;
  left: calc(var(--gutter) + var(--mgn));
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}