/* ========================================================================== 
   Civic Ledger — generational population and public-finance laboratory
   ========================================================================== */

.ledger-head h1 small {
    display:inline-block; margin-left:.55rem; color:var(--ink-4);
    font-family:var(--font-mono); font-size:.22em; font-weight:500;
    letter-spacing:.08em; text-transform:uppercase; vertical-align:middle;
}
.ledger-caveat {
    display:grid; grid-template-columns:auto 1fr; gap:.42rem .8rem; align-items:baseline;
    padding:.72rem .85rem; border:1px solid color-mix(in srgb, var(--amber) 34%, var(--line));
    border-radius:var(--radius-sm); background:color-mix(in srgb, var(--amber) 5%, var(--surface));
    color:var(--ink-2); font-size:.77rem; line-height:1.48;
}
.ledger-caveat b { color:var(--ink); white-space:nowrap; }
.ledger-caveat span { color:var(--ink-3); }

.ledger-shell { grid-template-columns:minmax(0, 1fr) 346px; gap:1.25rem; }
.ledger-main { min-width:0; }
.ledger-stage {
    border-color:color-mix(in srgb, var(--amber) 26%, var(--line));
    background:#070b17; box-shadow:0 22px 72px rgba(3,5,13,.24);
}
.ledger-action-dock {
    display:grid; grid-template-columns:minmax(180px, .82fr) minmax(430px, 2fr) auto;
    gap:.7rem; align-items:center; padding:.75rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:radial-gradient(circle at 12% 0, rgba(229,199,110,.13), transparent 38%), #080d1b;
    color:#edf0f8;
}
.ledger-action-intro { min-width:0; }
.ledger-action-intro .eyebrow { color:rgba(230,200,111,.9); font-size:.5rem; }
.ledger-action-intro b { display:block; margin-top:.15rem; font-size:.75rem; line-height:1.35; }
.ledger-actions { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.32rem; }
.ledger-actions button {
    display:grid; grid-template-columns:25px minmax(0, 1fr); gap:.38rem; align-items:center;
    min-width:0; min-height:56px; padding:.42rem .46rem; border:1px solid rgba(255,255,255,.11);
    border-radius:8px; background:rgba(255,255,255,.025); color:rgba(229,233,244,.72);
    cursor:pointer; text-align:left; transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.ledger-actions button:hover { border-color:rgba(228,202,119,.38); background:rgba(228,202,119,.06); color:#f2f3f8; transform:translateY(-1px); }
.ledger-actions button.is-active {
    border-color:rgba(101,221,197,.62); background:linear-gradient(135deg, rgba(101,221,197,.16), rgba(229,199,110,.08));
    color:#fff; box-shadow:0 0 24px rgba(101,221,197,.08), inset 0 0 0 1px rgba(101,221,197,.08);
}
.ledger-actions i {
    display:grid; width:25px; height:25px; place-items:center; border-radius:7px;
    background:rgba(255,255,255,.06); color:#e5c76e; font-family:var(--font-mono); font-size:.8rem; font-style:normal;
}
.ledger-actions button.is-active i { background:rgba(101,221,197,.16); color:#78e2cb; }
.ledger-actions span { min-width:0; font-size:.66rem; font-weight:600; line-height:1.25; }
.ledger-actions small { display:block; overflow:hidden; margin-top:.08rem; color:rgba(214,220,238,.53); font-family:var(--font-mono); font-size:.49rem; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.ledger-undo {
    min-height:36px; padding:.38rem .52rem; border:1px solid rgba(255,255,255,.12); border-radius:7px;
    background:transparent; color:rgba(229,233,244,.68); cursor:pointer; font-family:var(--font-mono); font-size:.52rem; white-space:nowrap;
}
.ledger-undo:hover:not(:disabled) { border-color:rgba(229,199,110,.45); color:#fff; }
.ledger-undo:disabled { opacity:.34; cursor:not-allowed; }

.ledger-field { position:relative; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06); background:#040711; }
.ledger-field::after {
    content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
    background:linear-gradient(90deg, rgba(4,7,17,.52), transparent 8%, transparent 92%, rgba(4,7,17,.52)),
        linear-gradient(180deg, rgba(4,7,17,.25), transparent 18%, transparent 82%, rgba(4,7,17,.32));
    box-shadow:inset 0 0 92px rgba(0,0,0,.5);
}
#ledger-canvas {
    width:100%; height:100%; display:block; image-rendering:auto;
    background:#040711; cursor:pointer; touch-action:manipulation;
}
#ledger-canvas:focus-visible { outline:2px solid var(--amber); outline-offset:-3px; }
.ledger-hud {
    position:absolute; z-index:5; left:.7rem; top:.6rem; right:.7rem;
    display:flex; justify-content:space-between; gap:.6rem; align-items:center;
    color:rgba(224,229,245,.72); font-family:var(--font-mono); font-size:.56rem;
    letter-spacing:.04em; text-shadow:0 1px 8px #000; pointer-events:none;
}
.ledger-hud > span:first-child { display:flex; align-items:center; gap:.36rem; text-transform:uppercase; letter-spacing:.1em; }
.ledger-hud i { width:6px; height:6px; border-radius:1px; background:#e5c76e; box-shadow:0 0 10px rgba(229,199,110,.75); }
.ledger-age-labels { position:absolute; z-index:5; inset:0 auto 0 .5rem; pointer-events:none; }
.ledger-age-labels span {
    position:absolute; left:0; translate:0 -50%; padding:.12rem .24rem;
    border-radius:3px; background:rgba(3,5,12,.62); color:rgba(220,225,240,.55);
    font-family:var(--font-mono); font-size:.52rem; line-height:1;
    text-shadow:0 1px 4px #000;
}
.ledger-tooltip {
    position:absolute; z-index:8; display:none; width:205px; padding:.48rem .58rem;
    border:1px solid rgba(223,197,110,.28); border-radius:7px;
    background:rgba(3,5,13,.92); color:#e5e7f1; box-shadow:0 10px 30px rgba(0,0,0,.35);
    font-family:var(--font-mono); font-size:.57rem; line-height:1.48; pointer-events:none;
}
.ledger-tooltip.is-visible { display:block; }
.ledger-touch-hint {
    position:absolute; z-index:6; left:50%; bottom:2.3rem; translate:-50% 0;
    display:flex; gap:.35rem; align-items:center; padding:.42rem .6rem; border:1px solid rgba(101,221,197,.32);
    border-radius:999px; background:rgba(3,7,16,.78); color:rgba(232,236,246,.62); box-shadow:0 8px 30px rgba(0,0,0,.25);
    font-family:var(--font-mono); font-size:.52rem; pointer-events:none; backdrop-filter:blur(8px);
}
.ledger-touch-hint b { color:#77dfc9; font-weight:600; }
.ledger-touch-hint.is-hidden { opacity:0; translate:-50% 8px; transition:opacity .3s var(--ease), translate .3s var(--ease); }
.ledger-field-key {
    position:absolute; z-index:6; right:.6rem; bottom:.55rem; display:flex; gap:.46rem; align-items:center;
    padding:.25rem .36rem; border-radius:5px; background:rgba(3,6,14,.68); color:rgba(223,228,241,.6);
    font-family:var(--font-mono); font-size:.45rem; pointer-events:none;
}
.ledger-field-key span { white-space:nowrap; }

.ledger-intervention-result {
    display:grid; grid-template-columns:44px minmax(0, 1fr); gap:.7rem; align-items:center;
    min-height:108px; padding:.72rem .86rem; border:1px solid color-mix(in srgb, var(--cyan) 33%, var(--line));
    border-radius:var(--radius-sm); background:radial-gradient(circle at 0 50%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 28%), var(--surface);
    overflow:hidden;
}
.ledger-result-mark {
    display:grid; width:38px; height:38px; place-items:center; border:1px solid color-mix(in srgb, var(--cyan) 34%, var(--line));
    border-radius:50%; color:var(--cyan); background:color-mix(in srgb, var(--cyan) 8%, var(--surface));
    font-family:var(--font-mono); font-size:1rem;
}
.ledger-intervention-result b { display:block; margin:.18rem 0 .12rem; color:var(--ink); font-size:.83rem; }
.ledger-intervention-result p { margin:0; color:var(--ink-3); font-size:.7rem; line-height:1.4; }
.ledger-intervention-result small { display:block; margin-top:.22rem; color:var(--ink-4); font-family:var(--font-mono); font-size:.53rem; line-height:1.4; }
.ledger-intervention-result.is-changed .ledger-result-mark { animation:ledger-result-pop .5s var(--ease); }
@keyframes ledger-result-pop { 0% { transform:scale(.7); } 55% { transform:scale(1.12); } 100% { transform:scale(1); } }

.ledger-bar { gap:.38rem; }
.ledger-lenses {
    display:inline-flex; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--surface);
}
.ledger-lenses button {
    padding:.3rem .48rem; border:0; border-radius:6px; background:transparent;
    color:var(--ink-3); cursor:pointer; font-family:var(--font-mono); font-size:.61rem;
}
.ledger-lenses button:hover { color:var(--ink); background:var(--raised); }
.ledger-lenses button.is-active { color:#171006; background:linear-gradient(135deg, #efd984, #8ee0ce); font-weight:600; }
.ledger-speed-label { align-items:center; gap:.4rem; }
.ledger-speed-label input { width:88px; }

.ledger-now {
    display:grid; grid-template-columns:repeat(6, minmax(0, 1fr));
    border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface);
}
.ledger-now > div { min-width:0; padding:.65rem .65rem .6rem; box-shadow:1px 0 0 var(--line-soft); }
.ledger-now span { display:block; color:var(--ink-4); font-family:var(--font-mono); font-size:.49rem; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.ledger-now b { display:block; overflow:hidden; text-overflow:ellipsis; color:var(--ink); font-family:var(--font-mono); font-size:.84rem; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ledger-now .ledger-standard { grid-column:span 2; display:grid; grid-template-columns:1fr auto; gap:.15rem .6rem; align-items:end; }
.ledger-standard > i { grid-column:1 / -1; display:block; height:3px; border-radius:2px; background:var(--raised); overflow:hidden; }
.ledger-standard > i em { display:block; width:55.56%; height:100%; background:linear-gradient(90deg, #df7798, #dfc66e 50%, #67d8c2); transition:width .25s var(--ease); }

.ledger-forecast {
    display:grid; grid-template-columns:minmax(0, 1fr) repeat(3, auto); gap:.6rem 1.1rem; align-items:center;
    padding:.72rem .82rem; border:1px solid color-mix(in srgb, var(--cyan) 22%, var(--line));
    border-radius:var(--radius-sm); background:linear-gradient(90deg, color-mix(in srgb, var(--cyan) 4%, var(--surface)), var(--surface));
}
.ledger-forecast > div span { display:block; color:var(--ink-2); font-size:.72rem; font-weight:600; }
.ledger-forecast > div small { display:block; color:var(--ink-4); font-size:.58rem; }
.ledger-forecast > b { min-width:68px; color:var(--ink); font-family:var(--font-mono); font-size:.88rem; font-weight:500; text-align:right; }
.ledger-forecast > b span { display:block; }
.ledger-forecast > b small { display:block; color:var(--ink-4); font-size:.47rem; font-weight:400; letter-spacing:.07em; text-transform:uppercase; }

.ledger-charts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.65rem; }
.ledger-chart-card {
    min-width:0; padding:.7rem .75rem .48rem; border:1px solid var(--line);
    border-radius:var(--radius-sm); background:linear-gradient(180deg, color-mix(in srgb, var(--amber) 3%, transparent), transparent), var(--surface);
}
.ledger-chart-card > div { display:flex; justify-content:space-between; gap:.6rem; align-items:flex-start; }
.ledger-chart-card > div b { font-size:.7rem; font-weight:600; }
.ledger-chart-card > div span { color:var(--ink-4); font-family:var(--font-mono); font-size:.48rem; line-height:1.5; text-align:right; }
.ledger-chart-card canvas { display:block; width:100%; height:105px; margin-top:.2rem; }
.ledger-dot { display:inline-block; width:5px; height:5px; margin:0 2px 1px 5px; border-radius:1px; }
.ledger-dot--established { background:#65ddc5; }
.ledger-dot--arrivals { background:#a98ae8; }
.ledger-dot--descendants { background:#e2c56d; }
.ledger-dot--debt { background:#e67c9b; }
.ledger-dot--standard { background:#6bd9c3; }
.ledger-notice { border-color:color-mix(in srgb, var(--amber) 28%, var(--line)); }
.ledger-notice svg { color:var(--amber); }
.ledger-reading {
    min-height:8.7rem; padding:.85rem .92rem; border:1px solid color-mix(in srgb, var(--amber) 25%, var(--line));
    border-radius:var(--radius-sm); background:radial-gradient(circle at 100% 0, color-mix(in srgb, var(--amber) 7%, transparent), transparent 38%), var(--surface);
}
.ledger-reading h3 { margin:.3rem 0 .36rem; font-size:1rem; }
.ledger-reading p { max-width:84ch; margin:0; color:var(--ink-3); font-size:.76rem; line-height:1.52; }

.ledger-panel { overflow-x:hidden; }
.ledger-presets { display:grid; gap:.34rem; }
.ledger-presets button {
    position:relative; display:flex; align-items:center; justify-content:space-between; gap:.55rem;
    width:100%; padding:.56rem .62rem; border:1px solid var(--line); border-radius:8px;
    background:var(--surface); color:var(--ink-2); cursor:pointer; text-align:left;
}
.ledger-presets button:hover { color:var(--ink); border-color:var(--line-strong); }
.ledger-presets button.is-active { border-color:color-mix(in srgb, var(--amber) 55%, var(--line)); background:linear-gradient(90deg, color-mix(in srgb, var(--amber) 9%, var(--surface)), var(--surface)); color:var(--ink); }
.ledger-presets button.is-active::before { content:""; position:absolute; left:-1px; top:20%; bottom:20%; width:2px; background:var(--amber); }
.ledger-presets span { font-size:.73rem; font-weight:600; }
.ledger-presets small { color:var(--ink-4); font-family:var(--font-mono); font-size:.49rem; text-align:right; }

.ledger-control-group { border:1px solid var(--line); border-radius:9px; background:var(--surface); overflow:hidden; }
.ledger-control-group summary {
    display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.65rem .7rem;
    color:var(--ink-2); cursor:pointer; list-style:none; user-select:none;
}
.ledger-control-group summary::-webkit-details-marker { display:none; }
.ledger-control-group summary::after { content:"+"; order:3; color:var(--ink-4); font-family:var(--font-mono); }
.ledger-control-group[open] summary::after { content:"−"; }
.ledger-control-group summary span { font-size:.7rem; font-weight:600; }
.ledger-control-group summary small { margin-left:auto; color:var(--ink-4); font-family:var(--font-mono); font-size:.48rem; }
.ledger-control-group[open] summary { border-bottom:1px solid var(--line-soft); }
.ledger-controls { padding:.58rem .7rem .68rem; }
.ledger-controls label {
    display:grid; grid-template-columns:1fr 58px; gap:.12rem .5rem; align-items:center;
    padding:.35rem 0; color:var(--ink-3); font-size:.64rem;
}
.ledger-controls label > span { min-width:0; white-space:nowrap; }
.ledger-controls output { color:var(--ink-2); font-family:var(--font-mono); font-size:.59rem; font-variant-numeric:tabular-nums; text-align:right; }
.ledger-controls input { grid-column:1 / -1; width:100%; margin:0; }
.ledger-parameter-note { margin:.65rem .15rem 0; color:var(--ink-4); font-size:.61rem; line-height:1.48; }
.ledger-parameter-note b { color:var(--ink-3); }

.ledger-descendant {
    min-height:7.2rem; padding:.72rem .78rem; border:1px solid color-mix(in srgb, var(--amber) 22%, var(--line));
    border-radius:9px; background:color-mix(in srgb, var(--amber) 3%, var(--surface));
}
.ledger-descendant b { display:block; margin:.28rem 0; color:var(--ink-2); font-family:var(--font-mono); font-size:.58rem; font-weight:500; line-height:1.45; }
.ledger-descendant p { margin:0; color:var(--ink-4); font-size:.64rem; line-height:1.42; }
.ledger-ledger { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.35rem; }
.ledger-ledger div { padding:.48rem .55rem; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.ledger-ledger span { display:block; color:var(--ink-4); font-family:var(--font-mono); font-size:.48rem; letter-spacing:.06em; text-transform:uppercase; }
.ledger-ledger b { display:block; color:var(--ink-2); font-family:var(--font-mono); font-size:.7rem; font-weight:500; font-variant-numeric:tabular-nums; }

.ledger-rule-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.65rem; margin:1.3rem 0 2rem; counter-reset:ledger-rule; }
.ledger-rule-grid > div { position:relative; min-height:155px; padding:1rem .9rem; border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; }
.ledger-rule-grid > div > span { color:var(--amber); font-family:var(--font-mono); font-size:.55rem; }
.ledger-rule-grid h3 { margin:.75rem 0 .35rem; font-size:.9rem; }
.ledger-rule-grid p { margin:0; color:var(--ink-3); font-size:.72rem; line-height:1.5; }
.ledger-experiments { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.7rem 1.5rem; padding-left:1.25rem; }
.ledger-experiments li { padding-left:.25rem; color:var(--ink-2); font-size:.84rem; line-height:1.55; }
.ledger-model-boundary { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1px; margin:1.6rem 0 2rem; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--line); }
.ledger-model-boundary > div { padding:1rem; background:var(--surface); }
.ledger-model-boundary p { margin:.35rem 0 0; color:var(--ink-3); font-size:.78rem; line-height:1.5; }
.ledger-fixed { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.65rem; margin:1rem 0 2rem; }
.ledger-fixed p { margin:0; padding:.82rem .88rem; border-left:2px solid color-mix(in srgb, var(--amber) 48%, var(--line)); background:var(--surface); color:var(--ink-3); font-size:.74rem; line-height:1.5; }
.ledger-fixed b { color:var(--ink-2); }

@media (max-width:1080px) {
    .ledger-shell { grid-template-columns:minmax(0, 1fr); }
    .ledger-action-dock { grid-template-columns:minmax(170px, .7fr) minmax(420px, 2fr) auto; }
}
@media (max-width:760px) {
    .ledger-head h1 small { display:block; margin:.4rem 0 0; font-size:.28em; }
    .ledger-caveat { grid-template-columns:1fr; gap:.18rem; }
    .ledger-now { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .ledger-now .ledger-standard { grid-column:span 3; }
    .ledger-forecast { grid-template-columns:1fr repeat(3, auto); gap:.5rem; }
    .ledger-forecast > div { grid-column:1 / -1; }
    .ledger-charts { grid-template-columns:1fr; }
    .ledger-rule-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .ledger-experiments { grid-template-columns:1fr; }
    .ledger-action-dock { grid-template-columns:1fr auto; }
    .ledger-actions { grid-column:1 / -1; grid-row:2; }
    .ledger-undo { grid-column:2; grid-row:1; }
}
@media (max-width:540px) {
    .ledger-hud { font-size:.47rem; }
    .ledger-hud > span:last-child { display:none; }
    .ledger-bar .ledger-lenses { order:10; width:100%; }
    .ledger-lenses button { flex:1; }
    .ledger-speed-label { width:100%; justify-content:flex-end; }
    .ledger-speed-label input { flex:1; max-width:180px; }
    .ledger-now { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .ledger-now .ledger-standard { grid-column:span 2; }
    .ledger-forecast { grid-template-columns:repeat(3, 1fr); }
    .ledger-forecast > b { min-width:0; text-align:left; }
    .ledger-rule-grid { grid-template-columns:1fr; }
    .ledger-model-boundary { grid-template-columns:1fr; }
    .ledger-fixed { grid-template-columns:1fr; }
    .ledger-presets button { min-height:44px; }
    .ledger-action-dock { display:flex; flex-wrap:wrap; gap:.55rem; padding:.62rem; }
    .ledger-action-intro { flex:1 1 210px; }
    .ledger-actions { order:3; flex:1 0 100%; grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .ledger-actions button { min-height:46px; }
    .ledger-touch-hint { bottom:1.85rem; }
    .ledger-field-key { left:.45rem; right:auto; max-width:calc(100% - .9rem); gap:.32rem; font-size:.4rem; }
    .ledger-intervention-result { grid-template-columns:34px minmax(0, 1fr); min-height:118px; padding:.68rem; }
    .ledger-result-mark { width:30px; height:30px; }
}
@media (prefers-reduced-motion:reduce) {
    .ledger-standard > i em { transition:none; }
    .ledger-actions button, .ledger-touch-hint { transition:none; }
    .ledger-intervention-result.is-changed .ledger-result-mark { animation:none; }
}