/* sites/companion/src/assets/artifact-fixes.css
 *
 * DELIBERATE, ENUMERATED corrections to the owner's verbatim companion site.
 *
 * Why this file exists at all, and why it is not chrome.css:
 * chrome.css carries the lead-capture block and is held to "every selector
 * starts with .sl-chrome, nothing touches html/body/:root", asserted by
 * append-chrome.test.mjs. That rule is correct and stays — it is what stops
 * OUR design from bleeding into THEIRS. The rules below are the opposite
 * category: they intentionally target the artifact's own elements to correct
 * two usability faults the owner found on a real Android device. So they get
 * their own file and their own, stricter contract:
 *
 *   artifact-fixes.test.mjs asserts that EVERY selector below appears in an
 *   allowlist declared inside that test. Adding one rule here without
 *   deliberately editing that list fails the suite. This file cannot quietly
 *   grow into a restyle.
 *
 * The artifact's own custom properties (--coral, --teal) are used for colour.
 * No brand tokens: these pages are outside the token system by standing
 * ruling, and token discipline is what destroyed the design the first time.
 *
 * Nothing under docs/materials/source/longevity-v2-site/ is modified. These
 * rules are served from /_sl/ and layered on top.
 */

/* ------------------------------------------------------------- finding 2
 * The reader's table of contents did not read as links.
 *
 * Delivered: `.reader-toc a{...;text-decoration:none;color:var(--ink-soft)}`
 * with the ONLY affordance on `:hover`/`.active`. A hover-only affordance does
 * not exist on a touchscreen, which is most of the room.
 *
 * The correction is two conventional, always-visible link signals drawn from
 * the artifact's own vocabulary — an underline in the accent coral, and the
 * same --teal the artifact already uses for its `.source-chips a` links.
 * Contrast improves rather than regresses: --teal #345f5a on --paper #f4efe5
 * is ~6.4:1, against ~5.6:1 for the delivered --ink-soft #52615f.
 *
 * The delivered hover and .active states are untouched — they still invert to
 * an --ink background with --white text. Only the underline colour follows,
 * so it stays legible once the background is dark.
 */
.reader-toc a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.reader-toc a:hover {
  text-decoration-color: currentColor;
}

.reader-toc a.active {
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------- finding 3
 * Anchor jumps did not put the target's heading near the top of the screen.
 *
 * MEASURED, not assumed. Chromium, dist build, clicking the hero's #coins
 * button on entropy-lab-deep-dive.html:
 *
 *   390x844 phone : sticky chrome ends at  97px, heading landed at 332px
 *   1440x900      : sticky chrome ends at  79px, heading landed at 350px
 *
 * So the brief's stated cause — scroll-padding-top too small for the sticky
 * bars — is not what is happening. That page already sets
 * `html{scroll-padding-top:7rem}` (7.2rem under 980px), which is ALREADY
 * larger than its 79-97px of fixed chrome. The heading lands far too LOW, and
 * two things put it there:
 *
 *   1. `.lecture-section{scroll-margin-top:5rem}` pushes the landing down a
 *      further 80px, and
 *   2. `.lecture-section{padding-top:clamp(6.5rem,11vw,10rem)}` (8.5rem under
 *      980px) means the section's own top edge is 104-160px above the first
 *      word of its heading.
 *
 * No value of scroll-padding-top alone can fix that, because the offset that
 * has to be cancelled is the TARGET's internal padding, which differs per
 * element. So the rule is split: this file owns the two declarations, and
 * artifact-fixes.js owns the two measurements that feed them.
 *
 *   --sl-fix-sticky : the real combined bottom edge of every full-width
 *                     fixed/sticky bar at the top of THIS page, measured from
 *                     live geometry, plus 1.25rem of breathing room.
 *   --sl-fix-inset  : per target, that target's own computed padding-top,
 *                     cancelled out so the heading rather than the padding
 *                     lands at the top.
 *
 * Net effect: the target's first line of text lands 1.25rem below the sticky
 * chrome. Not centred — the controller ruled explicitly against centring.
 *
 * Both rules are gated on `html[data-sl-fix]`, an attribute artifact-fixes.js
 * sets only AFTER it has written both custom properties. With scripting off,
 * or before the measurement runs, neither rule matches and the page behaves
 * exactly as delivered. There is no eyeballed constant anywhere in this file.
 */
html[data-sl-fix] {
  scroll-padding-top: var(--sl-fix-sticky, 6.5rem);
}

html[data-sl-fix] [data-sl-fix-target] {
  scroll-margin-top: calc(0px - var(--sl-fix-inset, 0px));
}