/* Ledger pages — loaded after styles.css, reuses its :root tokens/resets/.page container.
   Header/hero/footer chrome here is dark (light text on ink background), the inverse of the
   landing page's light header — see admin_handler.go-style comment: this is a deliberate
   deviation from .site-header/.nav-cta, not an oversight, so it gets its own classes instead of
   overriding the shared ones. Ported from design/Prometo Ledger.dc.html, Turn 4. */

:root {
  /* Mirrors .page's own padding-left formula (styles.css) exactly, so the redaction-bar accent
     (positioned in the gutter to the left of body text — see .ledger-footnote/.ledger-redact
     below) can reference the SAME responsive value text position actually depends on, instead of
     a hardcoded px guess that only happened to be correct at one specific viewport width. */
  --page-pad: clamp(20px, 4.4vw, 56px);
  --ink: #171310;
  --ink-2: #201B14;
  --ink-border: rgba(247, 241, 228, 0.12);
  --ink-text: #F7F1E4;
  --ink-muted: rgba(247, 241, 228, 0.62);
  --ink-muted-2: #9E8F73;
  --amount: #F2A25C;
  --ok-bg: #EDF2E7;
  --ok-border: #D8E3CD;
  --ok-text: #4C6B3C;
}

body { background: var(--bg); }

/* ---- Header ---- */
.ledger-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: var(--ink-text);
}

.ledger-header-inner {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-top: 17px;
  padding-bottom: 17px;
}

.ledger-header .brand { color: var(--ink-text); }

.ledger-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-muted);
}

.ledger-nav-links a { color: inherit; text-decoration: none; }
.ledger-nav-links a:hover { color: var(--ink-text); }

.ledger-nav-current {
  color: var(--ink-text);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

.ledger-header .header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Hamburger + dropdown panel — the only way to reach nav on mobile, since .ledger-nav-links and
   .ledger-cta are hidden below 900px (see the media query at the bottom of this file). Hidden by
   default; only shown inside that same breakpoint, so resizing back to desktop with the menu
   left open can never leave it visibly stuck open. */
.ledger-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.ledger-menu-toggle .bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink-text); }

/* display:none here is a hard safety net so this can never show outside the mobile breakpoint
   below, regardless of the .open class or Preact state — the actual open/close visuals (and the
   animation) are handled entirely inside that media query, since `display` itself can't be
   transitioned (there's no in-between frame to interpolate through). */
.ledger-mobile-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ink);
  border-top: 1px solid var(--ink-border);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
  padding: 4px clamp(20px, 4.4vw, 56px) 20px;
}

.ledger-mobile-menu a,
.ledger-mobile-menu .ledger-nav-current {
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-text);
  text-decoration: none;
}

/* display/color are both load-bearing, not decorative:
   - display: the ≤900px media query below sets .ledger-cta { display: none } to hide the desktop
     header's copy, and since this reuses the same class for styling, it needs a
     higher-specificity display value here or the mobile menu's own CTA link vanishes too.
   - color: .ledger-mobile-menu a sets color: var(--ink-text) on every link in the panel (right,
     for the plain nav links) — but .ledger-cta's own color: var(--ink-2) has lower specificity
     than that rule, so without this override the CTA rendered with color == its own background,
     making it fully invisible rather than just hard to read. */
.ledger-mobile-menu .ledger-cta {
  display: block;
  margin-top: 14px;
  text-align: center;
  border-bottom: 0;
  color: var(--ink-2);
}

.ledger-header .lang-toggle { border-color: var(--ink-border); }

.ledger-lang-pill {
  background: transparent;
  color: var(--ink-muted);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

.ledger-lang-pill.active { background: var(--ink-text); color: var(--ink-2); font-weight: 800; }

.ledger-cta {
  background: var(--ink-text);
  color: var(--ink-2);
  border-radius: 11px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.ledger-cta:hover { background: #fff; }

/* ---- Hero (list page) ---- */
.ledger-hero {
  position: relative;
  background-color: var(--ink);
  background-image: url(../assets/hero-doacoes.png);
  background-size: cover;
  background-position: 72% center;
}

.ledger-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(20, 16, 13, .96) 0 30%, rgba(20, 16, 13, .8) 54%, rgba(20, 16, 13, .46) 100%);
}

.ledger-hero-inner {
  /* padding-top/bottom only, deliberately — this element is class="page ledger-hero-inner", and
     a shorthand `padding: Xpx 0 Ypx` here would zero out .page's own horizontal padding (its
     2nd/4th values), the same bug .ledger-week and .ledger-footnote had.

     min-height lives here (on the .page element itself, box-sizing:border-box per styles.css's
     global reset) rather than on a wrapping flex container on .ledger-hero — a flex wrapper with
     `.page { flex: 1 }` was tried first, but a flex item's stretched width overrides .page's own
     width:min(100%,1280px)+margin:auto centering, so the hero text no longer lined up with every
     other section's shared left edge at viewports wider than 1280px. Keeping .page's box intact
     and just giving it a height floor avoids that. */
  position: relative;
  min-height: 480px;
  padding-top: 62px;
  padding-bottom: 58px;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 56px;
  align-items: end;
  color: var(--ink-text);
}

.ledger-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 2px; color: var(--ink-muted-2); }

.ledger-hero h1 {
  margin: 20px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 66px;
  line-height: 1.02;
  letter-spacing: -.6px;
  max-width: 600px;
  text-wrap: pretty;
}

.ledger-hero-sub { margin: 24px 0 0; font-size: 16px; line-height: 1.7; color: var(--ink-muted); max-width: 530px; text-wrap: pretty; }

.ledger-total-label { font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: var(--ink-muted-2); }
.ledger-total-value { font-family: var(--font-serif); font-size: 96px; line-height: .96; margin-top: 10px; color: var(--amount); }
.ledger-total-note { font-family: var(--font-hand); font-size: 23px; color: var(--ink-muted); margin-top: 12px; }

.ledger-hero-slot {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font: 600 9.5px ui-monospace, Menlo, monospace;
  letter-spacing: 1.2px;
  color: rgba(247, 241, 228, .34);
}

/* ---- Week-continuation two-col block ---- */
.ledger-week {
  /* padding-top only — see .ledger-hero-inner's comment, same class="page ledger-week" trap. */
  padding-top: 48px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
}

.ledger-week h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -.3px; max-width: 620px; text-wrap: pretty; }
.ledger-week p { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 620px; text-wrap: pretty; }

.ledger-week-stat { border-left: 2px solid var(--accent); padding-left: 20px; }
.ledger-week-stat-title { font-family: var(--font-serif); font-size: 26px; line-height: 1.3; color: var(--accent-dark); text-wrap: pretty; }
.ledger-week-stat-body { font-size: 13.5px; line-height: 1.55; color: var(--muted-2); margin-top: 10px; text-wrap: pretty; }

/* ---- Ruled ledger table ---- */
/* Border flush with .page's own edge, matching every other section's outer boundary — a prior
   version bled this 26px wider so the card's own text lined up with plain paragraphs elsewhere,
   but that made the card's visible border/background sit out of line with every other section on
   the page, which reads as more wrong than a normal card-padding text inset does. Boundary
   consistency between sections beats sub-pixel text-baseline matching across different container
   types (card vs. plain prose). */
.ledger-table-card { margin: 44px 0 0; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); overflow: hidden; }

.ledger-table-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--border);
}

.ledger-table-head h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 30px; }
.ledger-table-head span { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted-2); font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }

.ledger-row-cols {
  display: grid;
  grid-template-columns: 104px 96px 1fr 130px 150px 90px;
  gap: 18px;
  align-items: center;
}

.ledger-col-headers {
  padding: 12px 26px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  font: 700 9.5px ui-monospace, Menlo, monospace;
  letter-spacing: 1.1px;
  color: var(--muted-2);
}

.ledger-row {
  /* display:block is load-bearing, not decorative: the LOTE 012 row is an <a> (the other 5 are
     <div>s), and an <a> defaults to display:inline in every browser's UA stylesheet. Left
     implicit, its border-bottom only wrapped its inline content instead of spanning the row
     (looked like "some rows have no border"), and its grid child sized against an inline
     formatting context instead of the row's full width (looked like columns not lining up with
     the header row above it) — both were the same one missing property, not two separate bugs. */
  display: block;
  width: 100%;
  padding: 20px 26px;
  border-bottom: 1px solid #EFE6D2;
  text-decoration: none;
  color: inherit;
}

a.ledger-row { cursor: pointer; transition: background .14s; }
a.ledger-row:hover { background: #FBF4E6; }
.ledger-row--static { opacity: .82; }

.ledger-row-date { font-size: 12px; font-weight: 600; color: var(--muted-2); }
.ledger-row-id { font: 700 10.5px ui-monospace, Menlo, monospace; letter-spacing: 1px; color: var(--muted-2); }
.ledger-row-org { font-size: 16px; font-weight: 700; }
.ledger-row-impact { font-size: 12.5px; color: var(--muted-2); margin-top: 3px; }
.ledger-row-impact b { color: var(--muted-2); font-weight: 400; }
.ledger-row-impact em { color: #B08243; font-style: normal; }
.ledger-row-weeks { font-size: 12.5px; color: var(--muted-2); }
.ledger-row-amount { font-family: var(--font-serif); font-size: 28px; line-height: 1; text-align: right; }
.ledger-row-proof { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ledger-row-doccount { font: 700 10px ui-monospace, Menlo, monospace; letter-spacing: .6px; color: var(--ok-text); }
.ledger-row-see { font-size: 12px; font-weight: 700; color: var(--accent-dark); }
.ledger-row--static .ledger-row-see { color: var(--muted-2); font-weight: 500; }

.ledger-impact-note { padding: 16px 26px; font-size: 11.5px; line-height: 1.6; color: var(--muted-2); }

/* ---- Day-one empty state (design/Prometo Ledger.dc.html, Turn 4, Screen 3) ---- */
/* No hero photo, and no gradient meant to sit over one — plain ink background instead. */
.ledger-hero--empty { background-image: none; }
.ledger-hero--empty::before { content: none; }

.ledger-total-value--ghost { color: rgba(242, 162, 92, .28); }

.ledger-empty-row { height: 56px; border-bottom: 1px solid var(--border-strong); }
.ledger-empty-row:last-child { border-bottom: none; }
.ledger-empty-row--note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hand);
  font-size: 24px;
  color: #B8A98C;
  text-align: center;
  padding: 0 26px;
}

.ledger-empty-steps { padding-top: 32px; }
.ledger-empty-steps-label { font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: var(--muted-2); }
.ledger-empty-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 22px; }
.ledger-empty-step { border-top: 2px solid var(--border); padding-top: 14px; }
.ledger-empty-step-n { font-family: var(--font-serif); font-size: 26px; color: var(--accent-dark); line-height: 1; }
.ledger-empty-step-t { font-size: 14px; line-height: 1.55; margin-top: 8px; color: #4A4235; }

/* ---- Founder quote block ---- */
/* Border flush with .page's own edge — see .ledger-table-card's comment. */
.ledger-founder {
  margin: 30px 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: center;
}

.ledger-founder blockquote { margin: 0; font-family: var(--font-serif); font-size: 24px; line-height: 1.45; text-wrap: pretty; }
.ledger-founder-sig { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; }
.ledger-founder-sig .hand { font-family: var(--font-hand); font-size: 26px; color: var(--accent-dark); }
.ledger-founder-sig .who { font-size: 11.5px; font-weight: 700; letter-spacing: .8px; color: var(--muted-2); text-transform: uppercase; }

.ledger-value { border-left: 1px dashed var(--border-strong); padding-left: 28px; }
.ledger-value-label { font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: var(--muted-2); }
.ledger-value-title { font-family: var(--font-serif); font-size: 24px; line-height: 1.3; margin-top: 10px; text-wrap: pretty; }
.ledger-value-body { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-top: 8px; text-wrap: pretty; }

/* ---- Privacy footnote ---- */
/* The redaction-bar accent sits in the gutter to the left of the text (absolute, negative offset)
   rather than as a flex sibling with a gap — a flex gap would otherwise push the paragraph text
   34px+12px right of the page's shared text edge, the same misalignment class as the cards above.
   The paragraph itself starts at the same x as every other full-bleed paragraph on the page. */
/* margin-top only — `margin: 28px 0 0` would zero the 2nd/4th (left/right) values, which for
   this element means overwriting .page's own `margin: 0 auto` centering with `0`, not `auto`. */
/* max-width lives on the <p>, not this element — this element is class="page ledger-footnote",
   and .page's own margin:0 auto centers it. Putting max-width:760px HERE as well would cap this
   box's width below .page's natural min(100%,1280px), and since both margins are still auto, the
   browser re-centers the now-narrower box within the viewport instead of leaving it flush at
   .page's shared left edge — the text would end up nowhere near where the rest of the page's
   copy starts. Capping the <p> instead keeps the outer box at .page's normal width/position and
   only limits the actual reading measure, which was the real goal of max-width here. */
.ledger-footnote { position: relative; margin-top: 28px; padding-bottom: 44px; }
/* left is calc(--page-pad - gap - own width), not a hardcoded px value — a fixed -46px only
   matched the text's actual position at one specific viewport width (this element's own left
   edge, which `left` is measured from, moves independently of the text as --page-pad's clamp()
   changes with viewport width). Referencing the same variable the text's own inset comes from
   keeps the two in sync at every width instead of just one. */
.ledger-footnote .bar { position: absolute; left: calc(var(--page-pad) - 12px - 34px); top: 5px; width: 34px; height: 11px; border-radius: 2px; background: var(--text); }
.ledger-footnote p { margin: 0; max-width: 760px; font-size: 13px; line-height: 1.66; color: var(--muted); }

/* ---- Dark footer CTA band ---- */
.ledger-cta-band {
  background: var(--ink);
  color: var(--ink-text);
  padding: 36px 0;
}

.ledger-cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.ledger-cta-band h3 { margin: 0; font-family: var(--font-serif); font-size: 32px; line-height: 1.15; font-weight: 400; }
.ledger-cta-band p { font-size: 14px; line-height: 1.6; color: var(--ink-muted); margin-top: 8px; max-width: 520px; }
.ledger-cta-band .ledger-cta { flex: none; background: var(--accent); color: #1B1611; font-weight: 800; padding: 14px 24px; }
.ledger-cta-band .ledger-cta:hover { background: var(--amount); }

/* ================= Detail page ================= */

.ledger-detail-hero { background: var(--ink); color: var(--ink-text); }

/* padding-top/bottom only — this element is class="page ledger-detail-hero-inner", and a
   horizontal value in this shorthand would zero out .page's own --page-pad, the same trap
   .ledger-hero-inner/.ledger-week/.ledger-footnote's own comments already warn about. No
   max-width here (unlike the rest of the detail page below styles.css's .page already caps this
   at 1280px — same grid the list page uses, so both pages' content lines up on the same edge. */
.ledger-detail-hero-inner { padding-top: 30px; padding-bottom: 48px; }

.ledger-back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); text-decoration: none; }
.ledger-back:hover { color: var(--ink-text); }

.ledger-detail-meta { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.ledger-detail-id { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; background: var(--ink-border); padding: 5px 9px; border-radius: 6px; }
.ledger-detail-date { font-size: 12.5px; font-weight: 600; color: var(--ink-muted-2); }

.ledger-detail-amount-row { display: flex; align-items: flex-end; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.ledger-detail-amount { font-family: var(--font-serif); font-size: 82px; line-height: 1; color: var(--amount); }
.ledger-detail-sentto { font-size: 20px; font-weight: 600; padding-bottom: 12px; }

.ledger-detail-composition { margin: 18px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-muted); text-wrap: pretty; }

/* This and every other block down to .ledger-found-issue are now plain children of the
   <section class="page"> detail-app.js wraps them in — same 1280px grid + --page-pad the list
   page's own .ledger-table-card/.ledger-founder use, instead of each one running its own
   max-width:900px + margin:auto centering (which put the whole detail page on a visibly
   narrower, differently-aligned column than the list page). Just margin-top for vertical
   rhythm; width/centering/edge-padding all come from the parent .page now. */
.ledger-impact-panel {
  margin-top: 32px;
  background: var(--surface-alt);
  border: 1px solid #F0DCBE;
  border-radius: 20px;
  padding: 24px 28px;
}

.ledger-impact-panel .label { font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: #B08243; }
.ledger-impact-panel .value { font-family: var(--font-serif); font-size: 28px; line-height: 1.3; margin-top: 10px; text-wrap: pretty; }
.ledger-impact-panel .src { font-size: 12px; color: var(--muted-2); margin-top: 10px; }

.ledger-org-card {
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}

.ledger-org-avatar {
  width: 48px; height: 48px; border-radius: 14px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 18px; letter-spacing: .5px;
}

.ledger-org-name { font-size: 16px; font-weight: 700; }
.ledger-org-cnpj { font-size: 11.5px; color: var(--muted-2); font-weight: 600; }
.ledger-org-desc { font-size: 13.5px; line-height: 1.62; color: var(--muted); margin-top: 7px; }

.ledger-verify { border-top: 1px solid #EFE6D2; margin-top: 16px; padding-top: 14px; }
.ledger-verify-title { font-size: 13px; font-weight: 700; }
.ledger-verify-body { font-size: 12.5px; line-height: 1.6; color: var(--muted-2); margin-top: 6px; }
.ledger-contacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ledger-contact { display: inline-flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; }
.ledger-contact .k { font-size: 10px; font-weight: 800; letter-spacing: .7px; color: var(--muted-2); text-transform: uppercase; }
.ledger-contact .v { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); }

.ledger-docs-head {
  margin-top: 40px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--border);
  padding-top: 26px;
}

.ledger-docs-head h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 30px; }
.ledger-docs-head span { font-size: 12.5px; color: var(--muted-2); max-width: 420px; text-align: right; line-height: 1.5; }

.ledger-docs { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }

.ledger-doc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }

.ledger-doc-head { padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #EFE6D2; }
.ledger-doc-head-left { display: flex; align-items: center; gap: 11px; }
.ledger-doc-title { font-size: 14.5px; font-weight: 700; }
.ledger-doc-sub { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.ledger-doc-dl { font-size: 12.5px; font-weight: 700; color: var(--accent-dark); text-decoration: none; }

.ledger-ok-badge {
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}

.ledger-doc-preview { padding: 26px; background: #F1EDE3; }
.ledger-doc-preview.center { display: flex; justify-content: center; }

/* No fixed width/cap here on purpose — a payment-proof screenshot can be uploaded by any admin
   for any organization, at any resolution, so there's no single "right" px number for it. No
   `width` set at all means the browser uses the image's own intrinsic size by default;
   max-width:100% only steps in to shrink it if that intrinsic size is wider than the card, and
   never stretches a small image up past its real resolution (which would just look blurry). */
.ledger-doc-preview img { max-width: 100%; border-radius: 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, .1); display: block; cursor: zoom-in; }
.ledger-doc-preview iframe { width: 100%; height: 480px; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .1); }

/* Tap-to-enlarge overlay for .ledger-doc-preview img — see ImageLightbox in detail-app.js. Plain
   position:fixed + no zoom-blocking anywhere on the page, so the browser's own pinch-zoom just
   works on the enlarged image; no custom zoom/pan JS needed. */
.ledger-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 8, 5, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}

.ledger-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; cursor: default; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }

.ledger-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ledger-lightbox-close:hover { background: rgba(255, 255, 255, .22); }

/* Awaiting-document placeholder — distinct from the design's "not issued" pattern (a charity
   that structurally can't produce a document) since this means "we haven't uploaded it yet". */
.ledger-doc-card--awaiting {
  background: rgba(255, 252, 245, .5);
  border: 1px dashed #DCCFB4;
  border-radius: 18px;
  padding: 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ledger-awaiting-badge {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  border: 1.5px dashed #C9B893; color: #C3B69E;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
}

.ledger-doc-card--awaiting .ledger-doc-title { color: #9A8C73; }
.ledger-doc-card--awaiting .ledger-doc-sub { font-size: 13px; line-height: 1.62; color: var(--muted-2); margin-top: 6px; max-width: 620px; }

.ledger-redact { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; }
.ledger-redact .bar { flex: none; display: inline-block; width: 34px; height: 12px; border-radius: 2px; background: var(--text); margin-top: 4px; }
.ledger-redact p { margin: 0; font-size: 13px; line-height: 1.66; color: #7A6B52; }

.ledger-found-issue { margin-top: 32px; padding-bottom: 44px; }
.ledger-found-issue-inner { border-top: 1px solid var(--border); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ledger-found-issue-inner p { margin: 0; font-size: 14px; color: var(--muted); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  /* Matches styles.css's own .nav-links, .nav-cta { display: none } at this same breakpoint —
     the ledger header only ever hid .ledger-nav-links, never .ledger-cta, so the PT copy
     ("Quero acesso antecipado", longer than the EN "Get early access") overflowed the header
     well above the old 560px-only breakpoint (confirmed overflowing down to ~600px). */
  .ledger-nav-links, .ledger-cta { display: none; }
  .ledger-menu-toggle { display: flex; }

  /* Same animated-open technique as .mobile-menu in styles.css — see that rule's own comment for
     why display has to stay unconditionally flex here, with opacity/transform/visibility (not
     display) doing the actual open/close animation. */
  .ledger-mobile-menu {
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .ledger-mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
  }
  .ledger-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .ledger-total-value { font-size: 64px; }
  .ledger-hero h1 { font-size: 42px; }
  .ledger-week { grid-template-columns: 1fr; gap: 24px; }
  .ledger-founder { grid-template-columns: 1fr; gap: 24px; }
  .ledger-value { border-left: none; padding-left: 0; border-top: 1px dashed var(--border-strong); padding-top: 20px; }
  .ledger-row-cols { grid-template-columns: 1fr; gap: 6px; }
  .ledger-row-proof { align-items: flex-start; flex-direction: row; justify-content: space-between; }
  .ledger-cta-band-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ledger-detail-amount { font-size: 52px; }
  .ledger-empty-steps-grid { grid-template-columns: 1fr 1fr; }

  /* .ledger-table-head, .ledger-docs-head, .ledger-found-issue-inner share one bug: a flex row
     with `justify-content: space-between` and no explicit child widths, so flexbox's default
     shrink behavior squeezes the heading/paragraph down to fit next to its sibling instead of
     wrapping the row — on a phone-width screen .ledger-docs-head's "Documents" heading was
     getting crushed into an ~80px column, 3-4 lines tall, next to its own description text.
     Stacked instead, same treatment .ledger-cta-band-inner already gets above. */
  .ledger-table-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ledger-docs-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ledger-docs-head span { max-width: none; text-align: left; }
  .ledger-found-issue-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 560px) {
  .ledger-hero h1 { font-size: 34px; }
  .ledger-total-value { font-size: 44px; }
  /* Below this width, --page-pad clamps to its 20px floor — too narrow to fit the bar (34px)
     plus its gap (12px) in the gutter to the left of the text, so it would render partly off the
     left edge. Hiding it here is cleaner than a clipped sliver; the text reads fine without it. */
  .ledger-footnote .bar { display: none; }

  /* Tighter card padding buys back real width for the doc previews below — .ledger-doc-preview's
     own padding directly sets how much room the payment-proof <img>/receipt <iframe> gets, and
     ScaledEmailFrame's scale factor is (card content width / 600), so a few less px of padding
     here makes the email preview measurably less tiny too, not just the image/PDF. */
  .ledger-doc-head { padding: 14px 16px; }
  .ledger-doc-preview { padding: 14px; }
  .ledger-doc-card--awaiting { padding: 16px; }
}