/* ==========================================================================
   THE LEDGER — Avi's visual system for landing + dashboard, translated from
   the approved mockup. Every rule in this file is scoped under `body.ledger`
   (set by base.html only on "/" and "/dashboard") so it is a complete no-op
   on every other page. Custom-property names deliberately match the ones
   app/static/style.css already defines site-wide (--bg, --ink, --accent,
   etc.) — redefining them here, scoped, means every already-shared class
   (.card, .btn, header, .app-backdrop) automatically repaints in the Ledger
   palette on these two pages without editing style.css or any shared
   selector's rule body. New Ledger-only tokens (--card-2, --serif,
   --radius-panel, --radius-btn, --radius-pill, --ease-drawer, --dur-hover,
   --teal) are additive and unique to this file.
   Source of truth: the approved mockup, Avi's "Ledger — light/dark" blocks.
   ========================================================================== */

body.ledger{
  /* ---- Ledger — light ("paper") ---- */
  --bg:#f7f4ec;
  --bg-elev:#efe9dc;
  --card:#fffefb;
  --card-2:#f3efe3;
  --ink:#1a1712;
  --muted:#6f6a5c;
  --line:#e6dfcd;
  --line-strong:#d8cfb6;

  /* Brand pair — UNCHANGED hex values (base.html's Dawn mark stays
     hardcoded and untouched per its own comment; these tokens exist for
     Ledger's own UI accents, not the logo itself). */
  --gold:#f0a831;
  --gold-ink:#8a5a12;
  --gold-soft:rgba(240,168,49,.14);
  --accent:#5b5bd6;
  --accent-fill:#5b5bd6;
  --accent-ink:#ffffff;
  --accent-soft:rgba(91,91,214,.09);
  --teal:#0d7d72;

  --up:#0a7a48;
  --down:#c9333a;

  --shadow:0 1px 2px rgba(26,23,18,.05), 0 10px 26px -8px rgba(26,23,18,.14);
  --shadow-lg:0 30px 70px -20px rgba(26,23,18,.28);

  --radius:6px;
  --radius-panel:6px;
  --radius-btn:8px;
  --radius-pill:999px;

  --serif:Fraunces,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --dur-hover:160ms;
}

[data-theme="dark"] body.ledger{
  /* ---- Ledger — dark ("obsidian") ---- */
  --bg:#0a0a0d;
  --bg-elev:#131317;
  --card:#17171c;
  --card-2:#1d1d23;
  --ink:#f4f2ea;
  --muted:#96938c;
  --line:#2a2a30;
  --line-strong:#37373f;

  --gold:#f0a831;
  --gold-ink:#f0a831;
  --gold-soft:rgba(240,168,49,.12);
  --accent:#7e7ee8;
  --accent-fill:#5b5bd6;
  --accent-ink:#ffffff;
  --accent-soft:rgba(126,126,232,.16);
  --teal:#2dd4bf;

  --up:#22c07f;
  --down:#ff5c66;

  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.45);
  --shadow-lg:0 34px 80px rgba(0,0,0,.6);
}

/* Component classes (panels, bento grid, ledger table, hero value, etc.)
   are added in Task 2 — this file intentionally ends here for Task 1, which
   is scoping + tokens only. */

/* ==========================================================================
   TASK 2 — Ledger components: panels, bento grid, ledger table, buttons,
   hero-value display, and additive restyles of real shared classes. Every
   rule below is scoped under body.ledger (or [data-theme="dark"] body.ledger
   for genuinely dark-only overrides — there are none needed here beyond
   what Task 1's token redefinition already cascades). Source of truth:
   avi-ledger-mockup.html's <style> block. See the naming-decision note
   above this step for where a real class is restyled instead of a mockup
   synonym being introduced.
   ========================================================================== */

/* ---- Typography helpers ---- */
body.ledger .serif{font-family:var(--serif);}
body.ledger .eyebrow{display:inline-flex; align-items:center; gap:.4rem; background:none;
  padding:0; margin-bottom:0; border-radius:0; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink);}
body.ledger .eyebrow::before{content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex:none;}

/* ---- Accent rule (the gold->indigo "dawn line" atop panels) ---- */
body.ledger .rule-dawn{height:2px; background:linear-gradient(90deg,var(--gold),var(--accent));}

/* ---- Panel system: three new textures alongside the real, untouched .card ---- */
body.ledger .panel-hero{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-panel); box-shadow:var(--shadow-lg); overflow:hidden;}
body.ledger .panel-hero > .pin{padding:1.7rem 1.85rem;}

body.ledger .panel-read{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-panel); overflow:hidden; box-shadow:var(--shadow);
  text-decoration:none; color:var(--ink); display:block;}
body.ledger .panel-read > .pin{padding:1.35rem 1.45rem;}
body.ledger a.panel-read{transition:border-color var(--dur-hover) ease,
  transform var(--dur-hover) var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  body.ledger a.panel-read:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
    transform:translateY(-2px);}
}
body.ledger a.panel-read:active{transform:translateY(0) scale(.997);}

body.ledger .panel-stat{background:var(--card-2); border:1px solid var(--line);
  border-radius:var(--radius-panel); padding:.85rem 1rem;}
body.ledger .panel-stat .st-label{font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); font-weight:600;}
body.ledger .panel-stat .st-val{font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin-top:.25rem;}
body.ledger .panel-stat .st-sub{font-size:.82rem; font-weight:600; margin-top:.15rem;}

/* ---- Bento grid ---- */
body.ledger .bento{display:grid; gap:1rem;}
body.ledger .bento.hero-row{grid-template-columns:1.65fr 1fr; align-items:stretch;}
body.ledger .bento.pair{grid-template-columns:1fr 1fr; align-items:start;}
body.ledger .bento.stats-4{grid-template-columns:repeat(4,1fr);}
body.ledger .bento.stats-2{grid-template-columns:repeat(2,1fr);}
body.ledger .bento .span-2{grid-column:span 2;}

/* ---- Ledger data table — applied via `class="holdings ledger"` in Task 4,
   not a rename: `.holdings` (real, untested) stays. ---- */
body.ledger table.ledger{width:100%; border-collapse:collapse;}
body.ledger table.ledger th{text-align:left; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); font-weight:700; padding:.5rem 1rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line-strong);
  background:var(--bg-elev);}
body.ledger table.ledger th.num, body.ledger table.ledger td.num{text-align:right;}
body.ledger table.ledger th:first-child, body.ledger table.ledger td:first-child{padding-left:1.2rem;}
body.ledger table.ledger th:last-child, body.ledger table.ledger td:last-child{padding-right:1.2rem;}
body.ledger table.ledger th.sortable:hover{color:var(--ink);}
body.ledger table.ledger th.sortable.sorted{color:var(--accent);}
body.ledger table.ledger td{padding:.55rem 1rem; border-bottom:1px solid var(--line); font-size:.9rem;
  vertical-align:middle;}
body.ledger table.ledger tbody tr:last-child td{border-bottom:none;}
body.ledger table.ledger tbody tr:hover{background:var(--bg-elev);}
body.ledger .ledger-wrap{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-panel); overflow:hidden;}
body.ledger .ledger-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; padding:1.1rem 1.3rem .8rem;}
body.ledger .ledger-head h2{font-size:1.02rem; margin:0;}

body.ledger .ledger-wrap table.ledger tbody tr {
  animation: ledger-row-in var(--dur-settle) var(--ease-out);
}
@keyframes ledger-row-in {
  from { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  body.ledger .ledger-wrap table.ledger tbody tr { animation: none; }
}

/* ---- Buttons: a new modifier, never touching .btn/.btn.primary/.btn.ghost ---- */
body.ledger .btn.gold{background:var(--gold); color:#17171b; border-color:transparent;}
body.ledger .btn.gold:hover{filter:brightness(1.06);}

/* ---- Dashboard hero-value display (Task 4 wires totals.market_value etc. in) ---- */
body.ledger .hero-panel-label{font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--muted);}
body.ledger .hero-value-row{display:flex; align-items:flex-end; gap:1.1rem; flex-wrap:wrap; margin:.4rem 0 1.2rem;}
body.ledger .hero-value{font-family:var(--mono); font-size:3rem; font-weight:700; letter-spacing:-.03em; line-height:1;}
body.ledger .hero-delta{display:inline-flex; align-items:center; gap:.35rem; font-family:var(--mono);
  font-weight:700; font-size:1.05rem; padding:.3rem .65rem; border-radius:var(--radius-pill);}
body.ledger .hero-delta svg{width:12px; height:12px;}
body.ledger .hero-delta.up{color:var(--up); background:color-mix(in srgb, var(--up) 14%, transparent);}
body.ledger .hero-delta.down{color:var(--down); background:color-mix(in srgb, var(--down) 14%, transparent);}
@keyframes ledger-value-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--up) 45%, transparent);}
  100%{box-shadow:0 0 0 9px transparent;}
}
body.ledger .pulse-once{display:inline-block; border-radius:4px; animation:ledger-value-pulse 900ms var(--ease-out) 1;}
@media (prefers-reduced-motion:reduce){ body.ledger .pulse-once{animation:none;} }

/* Sparkline draw-in transition — applied to whatever element carries
   .spark-draw; see Task 4/5 for why the shipped dashboard has no
   fabricated aggregate hero-chart line and what .spark-draw applies to
   instead. Kept here so the mechanism is ready either way. */
body.ledger .spark-draw{transition:stroke-dashoffset 1100ms var(--ease-out);}
@media (prefers-reduced-motion:reduce){ body.ledger .spark-draw{transition:none !important;} }

body.ledger .hero-sub-row{display:flex; gap:1.6rem; flex-wrap:wrap; padding-top:1rem; border-top:1px solid var(--line);}
body.ledger .hero-sub-row .hs{display:flex; flex-direction:column; gap:.15rem;}
body.ledger .hero-sub-row .hs-label{font-family:var(--mono); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);}
body.ledger .hero-sub-row .hs-val{font-family:var(--mono); font-weight:700; font-size:.98rem;}

/* ---- Digest teaser: layered ONTO the real .digest-preview/.block-indigo/
   .clickable/.just-generated classes in Task 4, additive, never replacing
   them (just-generated's conditional presence is a test-asserted literal —
   see Global Constraints). ---- */
body.ledger .digest-teaser{display:block; height:100%;}
body.ledger .digest-teaser .pin{display:flex; flex-direction:column; height:100%;}
body.ledger .digest-teaser .badge-daily{align-self:flex-start; font-family:var(--mono); font-size:.65rem;
  text-transform:uppercase; letter-spacing:.06em; background:rgba(255,255,255,.2); padding:.2rem .55rem;
  border-radius:var(--radius-pill); margin-bottom:.7rem; color:inherit;}
body.ledger .digest-teaser .dt-title{font-family:var(--serif); font-weight:600; font-size:1.2rem;
  line-height:1.28; margin:0 0 .6rem;}
body.ledger .digest-teaser .dt-bullet{font-size:.86rem; line-height:1.55; margin:0 0 1rem;}
body.ledger .digest-teaser .dt-cta{margin-top:auto; display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.86rem;}
body.ledger .digest-teaser .dt-cta svg{width:13px; height:13px; transition:transform var(--dur-hover) var(--ease-out);}
body.ledger a.digest-teaser:hover .dt-cta svg{transform:translateX(3px);}

/* ---- Sector allocation (real Chart.js canvas + legend — restyled, not replaced) ---- */
body.ledger .sector-legend li{font-size:.86rem;}
body.ledger .sl-swatch{border-radius:3px;}
body.ledger .sc-total{font-family:var(--mono); font-weight:700;}

/* ---- Heatmap: all 7 real color-scale classes ---- */
body.ledger .hm-tile{border-radius:6px; transition:filter var(--dur-hover) ease;}
body.ledger .hm-tile:hover{filter:brightness(1.07);}
body.ledger .hm-up-3{background:var(--up); color:#fff;}
body.ledger .hm-up-2{background:color-mix(in srgb, var(--up) 62%, var(--card)); color:#fff;}
body.ledger .hm-up-1{background:color-mix(in srgb, var(--up) 30%, var(--card)); color:var(--ink);}
body.ledger .hm-flat{background:var(--bg-elev); color:var(--muted);}
body.ledger .hm-nodata{background:var(--bg-elev); color:var(--muted); border:1px dashed var(--line);}
body.ledger .hm-down-1{background:color-mix(in srgb, var(--down) 26%, var(--card)); color:var(--ink);}
body.ledger .hm-down-2{background:color-mix(in srgb, var(--down) 55%, var(--card)); color:#fff;}
body.ledger .hm-down-3{background:var(--down); color:#fff;}

/* ---- Sidebar list panels: Market / Upcoming earnings (real .side-card) ---- */
body.ledger .side-card{background:var(--card); border-radius:var(--radius-panel);}
body.ledger .side-title{font-size:1.02rem;}
body.ledger .mkt-row{font-size:.88rem;}

/* ---- "Today's reads" (_reads.html — untouched, restyled in place; see the
   naming-decision note above this step for why .front-page/.panel-read
   aren't introduced here) ---- */
body.ledger .read-title{font-family:var(--serif); font-weight:600; line-height:1.28;}
body.ledger .read-kicker{font-family:var(--mono); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);}
body.ledger .read-by{font-family:var(--mono); font-size:.68rem; color:var(--muted);}

/* ==========================================================================
   LANDING — reuses the real landing.html class names and restyles them;
   nothing here is a bare, unscoped selector.
   ========================================================================== */
body.ledger .landing-hero{padding:3rem 0 1.5rem; align-items:center;}
body.ledger .landing-hero h1{font-family:var(--serif); font-weight:600; font-size:3.1rem;
  line-height:1.06; letter-spacing:-.02em;}
body.ledger .landing-hero h1 em{font-style:italic; background:none; -webkit-background-clip:initial;
  background-clip:initial; color:var(--gold-ink);}
body.ledger .lede{font-size:1.08rem; max-width:34rem;}
body.ledger .start-linkbtn{font-weight:700; color:var(--ink);}

body.ledger .brief{border-radius:var(--radius-panel); box-shadow:var(--shadow-lg);}
body.ledger .brief-top{height:2px;}
body.ledger .brief-k{display:flex; align-items:center; gap:.4rem; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-ink);}
body.ledger .brief-title{font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.22;
  letter-spacing:-.01em;}
body.ledger .tkpill{font-family:var(--mono); font-size:.78rem; padding:.28rem .6rem; border-radius:6px;
  background:var(--bg-elev); border:1px solid var(--line);}

body.ledger .proof{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
body.ledger .proof .n{font-family:var(--mono); font-size:1.7rem; font-weight:800; letter-spacing:-.02em;}

body.ledger .landing-steps{border:1px solid var(--line); border-radius:var(--radius-panel);
  overflow:hidden; background:var(--card); display:flex; gap:0;}
body.ledger .landing-steps .step{flex:1; padding:1.1rem 1.3rem; border-left:1px solid var(--line);
  background:none; border-top:none; border-right:none; border-bottom:none;}
body.ledger .landing-steps .step:first-child{border-left:none;}
body.ledger .step-num{font-family:var(--mono); font-size:.72rem; color:var(--gold-ink); font-weight:700;
  letter-spacing:.05em; display:block; width:auto; height:auto; background:none; border-radius:0;
  margin-bottom:.3rem;}

body.ledger .feat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-panel);}
body.ledger .feat .ic{background:var(--bg-elev); color:var(--accent); border-radius:8px;}
body.ledger .feat.block-indigo .ic{background:rgba(255,255,255,.16);}
body.ledger .feat.block-indigo p{color:rgba(255,255,255,.92);}

body.ledger .trust-band{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
body.ledger .trust-band .item svg{color:var(--gold-ink);}

body.ledger .tape{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-elev);}
body.ledger .tape-track .tk{font-family:var(--mono); font-size:.76rem;}

body.ledger .landing-footer{border-top:1px solid var(--line); padding-top:1.5rem;}

/* ==========================================================================
   DASHBOARD header
   ========================================================================== */
body.ledger .ph-title{font-family:var(--serif); font-weight:600; font-size:1.9rem; letter-spacing:-.015em;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  body.ledger .bento.hero-row{grid-template-columns:1fr;}
}
@media (max-width:768px){
  body.ledger .landing-hero{padding-top:2rem;}
  body.ledger .landing-hero h1{font-size:2.3rem;}
  body.ledger .bento.stats-4{grid-template-columns:repeat(2,1fr);}
  body.ledger .bento.pair{grid-template-columns:1fr;}
  body.ledger .landing-steps{flex-direction:column;}
  body.ledger .landing-steps .step{border-left:none; border-top:1px solid var(--line);}
  body.ledger .landing-steps .step:first-child{border-top:none;}
}
@media (max-width:600px){
  body.ledger .hero-value{font-size:2.3rem;}
}