/* ==========================================================================
   site.css — rules shared by the ledger pages
   ==========================================================================

   Linked from all three pages: index.html (home), money/index.html and
   corrections/index.html — after the Google Fonts link and before each
   page's own <style> block, so page rules win on equal specificity.

   Home overrides several shared values in its own block, deliberately: it
   is a landing page rather than a ledger, so .wrap is 920px instead of
   1080px, the masthead is taller, h1 is larger, and footer gains a top
   margin. Home also uses .card-chev for its card affordance — a different
   component from the .chev disclosure control below, renamed so the two
   could stop colliding.

   ── Rule of thumb for adding to this file ─────────────────────────────────
   A rule belongs here when a second page actually needs it, not when one
   might. That discipline is what keeps a shared stylesheet from becoming a
   dumping ground.

   ── Cascade warning, learned the hard way ─────────────────────────────────
   Media queries add NO specificity. A rule set here inside @media can be
   silently overridden by a page rule of equal specificity set outside one,
   because the page's <style> block loads later.

   So: anything a page overrides per-breakpoint must be owned entirely by
   that page — both the base rule and the breakpoint rule. Grid placement of
   summary children is the case that bit us; it now lives on each page.

   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  color-scheme: light only;

  --bg:    #F3F4F0;   /* page background            */
  --ink:   #1A211C;   /* body text, pressed states  */
  --muted: #5B675F;   /* secondary text, metadata   */
  --line:  #E2E5DC;   /* hairlines, card borders    */
  --card:  #FFFFFF;   /* card and header surfaces   */

  --tred:  #B3282D;   /* Trump orbit; also page titles and focus rings */
  --bblue: #1E4E8C;   /* Biden orbit                */
  --pine:  #3E5C50;   /* links                      */

  --r: 14px;          /* card corner radius         */
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: hidden;
  width: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--pine);
}

/* The measure. Home uses 920px instead — it's a landing page, not a ledger. */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}


/* ==========================================================================
   3. HEADER
   ========================================================================== */

header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.masthead {
  padding-top: 22px;
  padding-bottom: 14px;
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  font-family: 'Archivo', sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(34px, 6vw, 62px);
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: .2em 0 .25em;
}

.page-title {
  font-family: 'Archivo', sans-serif;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(19px, 3vw, 26px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tred);
  margin: 2px 0 14px;
}

.page-title .sep {
  color: #B8C0B6;
  font-weight: 800;
  padding: 0 8px;
}

.page-title .desc {
  color: var(--muted);
  font-weight: 800;
}


/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

/* --- back link: topnav, sticky bar, footer --- */

.topnav {
  margin-bottom: 16px;
}

.backlink {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pine);
  text-decoration: none;
  border-bottom: 1.5px solid #B9CCC0;
  padding-bottom: 3px;
}

.backlink:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Inline SVG arrow, drawn rather than typed: U+2190 sits outside the Google
   Fonts latin subset, so the character would fall back to a system font. */
.iarrow {
  width: .7em;
  height: .7em;
  vertical-align: -.07em;
}

/* --- masthead wordmark, which links home --- */

.brandlink {
  color: inherit;
  text-decoration: none;
}

.brandlink:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

/* --- sticky bar, revealed by IntersectionObserver once the header scrolls
       out of view. Fixed rather than sticky: html/body have overflow-x
       hidden, which breaks position:sticky for descendants. --- */

.stickynav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  transform: translateY(-101%);
  visibility: hidden;   /* keeps the link out of the tab order when hidden */
}

.stickynav.show {
  transform: none;
  visibility: visible;
}

.stickynav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.stickynav .backlink {
  font-size: 12px;
  border-bottom-width: 1px;
  padding-bottom: 2px;
}

.sticky-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==========================================================================
   5. DISCLOSURE CARDS
   ==========================================================================

   The <details>/<summary> pattern used for ledger entries and for the
   corrections log.

   ⚠ Grid placement is NOT here. Each page declares its own
     grid-template-columns and its own > .orb / > .main / > .side / > .chev
     placement, at every breakpoint it cares about. Money has four columns
     because it carries the subject orb; corrections has three.

     Putting any of that here caused a real bug: the mobile placement was
     overridden by each page's desktop rule, so cards never reflowed on
     phones. See the cascade warning at the top of this file.
   ========================================================================== */

.entry {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin: 14px 0;
  box-shadow: 0 3px 12px rgba(26, 33, 28, .06);
  overflow: hidden;
}

.entry:hover {
  border-color: #C8CDC2;
  box-shadow: 0 5px 18px rgba(26, 33, 28, .10);
}

.entry summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: grid;
  gap: 8px 16px;
  align-items: start;
}

.entry summary::-webkit-details-marker {
  display: none;
}

.entry h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  margin-top: 6px;
}

.meta .when {
  color: #3B463F;
}

.body p {
  margin: 13px 0;
  font-size: 16px;
  max-width: 75ch;
}

/* --- the chevron: a control, not a glyph. Circular and bordered so it reads
       as pressable; fills solid ink on hover and when open. --- */

.chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid #C8CDC2;
  border-radius: 50%;
  background: #F1F3EE;
  color: #3B463F;
  margin-top: 1px;
}

.entry:hover .chev {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.entry[open] .chev {
  transform: rotate(90deg);
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Touch devices have no hover, so the resting state must carry the whole
   signal. Filled ink at rest is unmistakably a button. */
@media (hover: none) {
  .chev {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}

@media (max-width: 580px) {
  .chev {
    width: 38px;
    height: 38px;
  }
}


/* ==========================================================================
   6. EVIDENCE LABELS
   ==========================================================================

   Square corners, deliberately. The pill shape is reserved for things you
   can press; these are static labels. Colours must stay identical across
   every ledger — the project's "one standard for both" claim is undermined
   if Documented green drifts between pages.
   ========================================================================== */

.pill {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  white-space: nowrap;
}

.pill.documented { background: #DEEAE2; color: #2C5344; }
.pill.reported   { background: #F1E7C8; color: #6d5410; }
.pill.litigation { background: #F3DCDD; color: #8f2226; }


/* ==========================================================================
   7. FOCUS
   ==========================================================================

   Page-specific focus targets — .chip, .viewbtn, .clearbtn, form inputs,
   .submit — repeat these declarations in each page's own block.
   ========================================================================== */

.backlink:focus-visible,
.brandlink:focus-visible,
.entry summary:focus-visible {
  outline: 3px solid var(--tred);
  outline-offset: 2px;
}


/* ==========================================================================
   8. FOOTER
   ==========================================================================
   Home adds margin-top:36px — its main ends with the principle box, the
   ledger pages end flush.
   ========================================================================== */

footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 24px 0 46px;
  font-size: 14px;
  color: var(--muted);
}


/* ==========================================================================
   9. MOTION
   ==========================================================================
   Hover feedback that does not depend on motion lives with each component
   above — border and background changes — so reduced-motion users still get
   a response. Only the movement itself is gated here.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .stickynav {
    transition: transform .2s ease;
  }

  .entry {
    transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
  }

  .entry:hover {
    transform: translateY(-1px);
  }

  .chev {
    transition: transform .18s ease, color .15s ease,
                background .15s ease, border-color .15s ease;
  }

}