/* ============ THE LEDGER ============
         The Reel keeps the cinema/paper identity. The Ledger is a data surface:
         dark cards on the same ink ground, tabular numbers, one green accent,
         and nothing decorative competing with the figures. */

      body[data-page="ledger"] {
        --surface: #191512;
        --surface-2: #1f1a15;
        --edge: rgba(255, 255, 255, 0.08);
        --edge-2: rgba(255, 255, 255, 0.14);
      }

      .grid.ledger-mode {
        display: block;
      }

      /* ---------- summary bar ---------- */
      /* flex, not grid: an auto-repeat track can't legally sit beside an
         indefinite `auto` one, which silently voids the whole declaration */
      .summary {
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        background: var(--edge);
        border: 1px solid var(--edge);
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 22px;
      }
      .stat {
        flex: 1 1 150px;
        background: var(--surface);
        padding: 13px 15px 12px;
        min-width: 0;
      }
      .stat-k {
        font-family: var(--font-mono);
        font-size: 9.5px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .stat-v {
        font-family: var(--font-mono);
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--cream);
        margin-top: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .stat-s {
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* ---------- cards ---------- */
      .led-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 12px;
      }
      .lc-wrap {
        min-width: 0;
      }
      .lcard {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 9px;
        width: 100%;
        text-align: left;
        font: inherit;
        color: var(--cream);
        background: var(--surface);
        border: 1px solid var(--edge);
        border-left: 3px solid var(--accent-money);
        border-radius: 9px;
        padding: 14px 15px;
        cursor: pointer;
        transition:
          background 0.15s ease,
          border-color 0.15s ease;
      }
      .lcard:hover {
        background: var(--surface-2);
        border-color: var(--edge-2);
        border-left-color: var(--accent-money);
      }
      .lcard.sel {
        border-color: var(--accent-money);
      }
      .lcard.spend {
        border-left-color: var(--gold);
      }
      .lcard.off {
        border-left-color: var(--muted);
        opacity: 0.55;
      }
      .lcard.budget.near {
        border-left-color: var(--gold);
      }
      .lcard.budget.over {
        border-left-color: var(--red);
      }
      .lcard.goal.done {
        border-left-color: var(--gold);
      }
      .lcard .card-check {
        display: none;
      }
      .lcard.sel .card-check {
        display: block;
        position: absolute;
        top: 10px;
        right: 11px;
        width: 15px;
        height: 15px;
        color: var(--accent-money);
      }
      /* the tick lands in the same corner as the amount, so a selected card
         gives the amount room instead of stacking the two on top of each
         other */
      .lcard.sel .lc-head {
        padding-right: 20px;
      }
      .lc-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
      }
      .lc-name {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .lc-amt {
        flex: 0 0 auto;
        font-family: var(--font-mono);
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.02em;
        white-space: nowrap;
      }
      .lc-amt.credit {
        color: var(--accent-money);
      }
      .lc-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
      }
      .lc-meta.small {
        font-size: 10px;
        margin-top: -4px;
      }
      .lc-tag {
        color: var(--cream);
        background: rgba(255, 255, 255, 0.07);
        border-radius: 4px;
        padding: 3px 7px;
        letter-spacing: 0.04em;
      }
      .lc-eq,
      .lc-due,
      .lc-dim {
        color: var(--muted);
      }
      .lc-due.soon {
        color: var(--gold);
      }
      .lc-strong {
        color: var(--cream);
        font-weight: 700;
      }
      .lc-right {
        margin-left: auto;
        color: var(--muted);
      }
      .lc-right.bad {
        color: #e8907f;
      }
      .lc-flag {
        color: var(--muted);
        border: 1px solid var(--edge-2);
        border-radius: 4px;
        padding: 2px 6px;
        font-size: 9.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .lc-flag.good {
        color: var(--accent-money);
        border-color: rgba(95, 168, 120, 0.4);
      }
      .lc-cats {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
      }
      .lc-cat {
        font-family: var(--font-mono);
        font-size: 9.5px;
        letter-spacing: 0.08em;
        color: var(--accent-money);
        border: 1px solid rgba(95, 168, 120, 0.32);
        border-radius: 4px;
        padding: 2px 6px;
      }
      .lc-cat.none {
        color: var(--muted);
        border-color: var(--edge);
      }

      .md-meter {
        margin: -6px 0 18px;
      }
      .md-meter .meter {
        height: 6px;
      }

      /* shared meter */
      .meter {
        display: block;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.09);
        overflow: hidden;
      }
      .meter-fill {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--accent-money);
        transition: width 0.35s ease;
      }
      .near .meter-fill,
      .meter.done .meter-fill,
      .done .meter-fill {
        background: var(--gold);
      }
      .over .meter-fill {
        background: var(--red);
      }

      /* ---------- dashboard ---------- */
      .dash {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
        gap: 12px;
        align-items: start;
      }
      .dp {
        background: var(--surface);
        border: 1px solid var(--edge);
        border-radius: 10px;
        padding: 15px 16px 12px;
        min-width: 0;
      }
      .dp.wide {
        grid-column: 1 / -1;
      }
      .dp-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 9px;
        border-bottom: 1px solid var(--edge);
      }
      .dp-title {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--cream);
      }
      .dp-sub {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--muted);
        text-align: right;
        white-space: nowrap;
      }
      .dp-list {
        list-style: none;
      }
      .dp-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 9px;
        width: 100%;
        text-align: left;
        font: inherit;
        color: var(--cream);
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--edge);
        padding: 9px 0;
        cursor: pointer;
      }
      .dp-row.wrap {
        row-gap: 7px;
      }
      .dp-row.static {
        cursor: default;
      }
      .dp-list li:last-child .dp-row {
        border-bottom: none;
      }
      .dp-row:not(.static):hover {
        color: var(--accent-money);
      }
      .dp-when {
        flex: 0 0 auto;
        font-family: var(--font-mono);
        font-size: 10.5px;
        color: var(--muted);
        min-width: 44px;
      }
      .dp-when.soon {
        color: var(--gold);
      }
      .dp-name {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dp-amt {
        flex: 0 0 auto;
        font-family: var(--font-mono);
        font-size: 12.5px;
        font-weight: 700;
        white-space: nowrap;
      }
      .dp-amt.credit {
        color: var(--accent-money);
      }
      .dp-of {
        font-weight: 400;
        color: var(--muted);
      }
      .dp-row .meter {
        flex: 1 1 100%;
      }
      .dp-none {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        padding: 12px 0 6px;
      }

      /* ---------- empty state ---------- */
      .blank {
        text-align: center;
        max-width: 420px;
        margin: 56px auto;
        padding: 34px 26px;
        border: 1px dashed var(--edge-2);
        border-radius: 12px;
      }
      .blank p {
        font-size: 14px;
        line-height: 1.55;
        color: var(--muted);
        margin-bottom: 18px;
      }

      /* ---------- the unreachable state ---------- */
      .led-alert {
        max-width: 400px;
        margin: 48px auto;
        text-align: center;
        padding: 36px 30px 30px;
        background: var(--surface);
        border: 1px solid var(--edge);
        border-radius: 12px;
      }
      .led-alert-ico {
        width: 34px;
        height: 34px;
        margin: 0 auto 14px;
        /* the one screen that means something went wrong, so it wears the
           warning colour rather than the page's green */
        color: var(--red);
      }
      .led-alert-ico svg {
        width: 100%;
        height: 100%;
      }
      .led-alert-title {
        font-family: var(--font-display);
        font-size: 26px;
        line-height: 1.05;
        text-transform: uppercase;
        color: var(--cream);
      }
      .led-alert-copy {
        font-size: 13.5px;
        color: var(--muted);
        margin: 10px auto 0;
        max-width: 34ch;
        line-height: 1.55;
      }

      /* ---------- the detail sheet (dark, matching the page) ---------- */
      .panel.money {
        --accent: var(--accent-money);
        background: var(--surface);
        color: var(--cream);
      }
      .money-detail {
        position: relative;
        padding: 26px 26px 24px;
      }
      .md-kicker {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent-money);
        margin-bottom: 7px;
      }
      .money-detail .sheet-title {
        font-family: var(--font-display);
        font-size: clamp(24px, 4.5vw, 32px);
        line-height: 1.05;
        text-transform: uppercase;
        color: var(--cream);
        margin-bottom: 12px;
        overflow-wrap: anywhere;
      }
      .md-big {
        font-family: var(--font-mono);
        font-size: clamp(28px, 6vw, 36px);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1;
        color: var(--cream);
        margin-bottom: 18px;
      }
      .md-big.dead {
        color: var(--muted);
        text-decoration: line-through;
      }
      .md-big.over {
        color: #e8907f;
      }
      .md-big.credit {
        color: var(--accent-money);
      }
      .md-per {
        font-size: 14px;
        font-weight: 400;
        color: var(--muted);
        margin-left: 8px;
        letter-spacing: 0;
      }
      .md-rows {
        border-top: 1px solid var(--edge);
      }
      .md-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 10px 0;
        border-bottom: 1px solid var(--edge);
        font-size: 13.5px;
      }
      .md-k {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        white-space: nowrap;
      }
      .md-v {
        text-align: right;
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--cream);
      }
      .md-v .d-tags {
        justify-content: flex-end;
      }
      .money-detail .pill {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        color: var(--accent-money);
        background: transparent;
        border: 1px solid rgba(95, 168, 120, 0.32);
        border-radius: 4px;
        padding: 3px 7px;
      }
      .md-row.over .md-v {
        color: #e8907f;
        font-weight: 700;
      }
      .md-row.good .md-v {
        color: var(--accent-money);
        font-weight: 700;
      }
      .md-live {
        color: var(--accent-money);
      }
      .md-dead {
        color: var(--muted);
      }
      .md-notes {
        margin-top: 18px;
      }
      .md-notes p {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--muted);
        margin-top: 5px;
      }
      .md-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 20px;
      }
      .md-list {
        margin-top: 20px;
      }
      .md-li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid var(--edge);
        font-size: 13px;
      }
      .md-li > span:first-child {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .md-li-d {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--muted);
        white-space: nowrap;
      }
      .md-li b {
        font-family: var(--font-mono);
        white-space: nowrap;
      }
      .md-none {
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 5px;
      }
      .mc-del {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        line-height: 1;
        font-size: 13px;
        color: var(--muted);
        background: transparent;
        border: 1px solid var(--edge-2);
        border-radius: 5px;
        cursor: pointer;
      }
      .mc-del:hover {
        color: #e8907f;
        border-color: #e8907f;
      }
      .md-contrib {
        margin-top: 20px;
      }
      .mc-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
      }
      .mc-row .amt-input {
        flex: 1 1 130px;
      }
      .mc-row input[type="date"] {
        flex: 1 1 130px;
        min-width: 0;
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--cream);
        background: var(--ink-2);
        border: 1px solid var(--edge-2);
        border-radius: 8px;
        padding: 9px 11px;
        color-scheme: dark;
      }
      .money-detail .sec-label {
        color: var(--muted);
      }

      /* ---------- money form (dark to match the sheet) ---------- */
      .panel.money .field label {
        color: var(--muted);
      }
      .panel.money .field input[type="text"],
      .panel.money .field input[type="date"],
      .panel.money .field textarea {
        color: var(--cream);
        background: var(--ink-2);
        border-color: var(--edge-2);
        color-scheme: dark;
      }
      .panel.money .field input:focus,
      .panel.money .field textarea:focus {
        outline: none;
        border-color: var(--accent-money);
      }
      .amt-input {
        display: flex;
        align-items: center;
        background: var(--ink-2);
        border: 1px solid var(--edge-2);
        border-radius: 8px;
        overflow: hidden;
      }
      .amt-input:focus-within {
        border-color: var(--accent-money);
      }
      .amt-cur {
        flex: 0 0 auto;
        font-family: var(--font-mono);
        font-size: 14px;
        font-weight: 700;
        color: var(--accent-money);
        padding: 0 4px 0 13px;
      }
      .amt-input input {
        flex: 1 1 auto;
        min-width: 0;
        color: var(--cream) !important;
        font-family: var(--font-mono) !important;
        font-size: 16px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 11px 12px 11px 5px !important;
      }
      .amt-input input:focus {
        outline: none;
      }
      .amt-input.small input {
        font-size: 13.5px !important;
        padding: 9px 10px 9px 4px !important;
      }
      .cad-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .cad-btn {
        font-family: var(--font-mono);
        font-size: 11.5px;
        color: var(--muted);
        background: var(--ink-2);
        border: 1px solid var(--edge-2);
        border-radius: 999px;
        padding: 8px 14px;
        cursor: pointer;
        transition: 0.15s;
      }
      .cad-btn:hover {
        color: var(--cream);
      }
      .cad-btn.on {
        background: var(--accent-money);
        border-color: var(--accent-money);
        color: #0d1f15;
        font-weight: 700;
      }
      .fld-note {
        margin-top: 6px;
        font-size: 11.5px;
        color: var(--muted);
        line-height: 1.45;
      }
      .panel.money .wt-btn {
        color: var(--muted);
        background: var(--ink-2);
      }
      .panel.money .watch-toggle {
        border-color: var(--edge-2);
      }
      .panel.money .wt-btn.on {
        background: var(--accent-money);
        color: #0d1f15;
      }
      .panel.money .wt-btn + .wt-btn {
        border-left-color: var(--edge-2);
      }
      #moneyForm textarea {
        min-height: 60px;
      }

      /* category chip input */
      .chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 7px 8px;
        background: var(--ink-2);
        border: 1px solid var(--edge-2);
        border-radius: 8px;
        cursor: text;
      }
      .chips:focus-within {
        border-color: var(--accent-money);
      }
      .chip {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--accent-money);
        border: 1px solid rgba(95, 168, 120, 0.35);
        border-radius: 4px;
        padding: 3px 3px 3px 7px;
      }
      .chip-x {
        font: inherit;
        font-size: 13px;
        line-height: 1;
        color: inherit;
        background: transparent;
        border: none;
        border-radius: 3px;
        padding: 0 3px;
        cursor: pointer;
        opacity: 0.6;
      }
      .chip-x:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.12);
      }
      .chips input {
        flex: 1 1 90px;
        min-width: 90px;
        font-family: var(--font-body) !important;
        font-size: 13.5px !important;
        color: var(--cream) !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 4px 2px !important;
      }
      .chips input:focus {
        outline: none;
      }

      /* ---------- the six-way segmented control ---------- */
      .seg.seg-ledger {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .seg.seg-ledger::-webkit-scrollbar {
        display: none;
      }
      .seg.seg-ledger button {
        white-space: nowrap;
      }
      @media (max-width: 620px) {
        .seg.seg-ledger button {
          font-size: 11.5px;
          padding: 7px 11px;
        }
      }

      /* ---------- open animation ----------
         No printer housing — the sheet itself feeds down from the top edge,
         revealed a line at a time, and the modal takes over where it lands. */
      .openfx[hidden] {
        display: none;
      }
      .openfx {
        position: fixed;
        inset: 0;
        z-index: 55;
        pointer-events: none;
        background: rgba(6, 4, 2, 0.82);
        backdrop-filter: blur(3px);
        animation: lfxDim 0.12s ease both;
      }
      .openfx.fading {
        animation: lfxUndim 0.34s ease forwards;
      }
      @keyframes lfxDim {
        from {
          opacity: 0;
        }
      }
      @keyframes lfxUndim {
        to {
          opacity: 0;
        }
      }
      .lfx-card {
        position: fixed;
        transform-origin: 50% 0;
      }
      .lfx-go .lfx-card {
        animation: lfxLift 0.34s ease forwards;
      }
      @keyframes lfxLift {
        to {
          transform: translateY(8px);
          opacity: 0;
        }
      }
      .lfx-rig {
        position: fixed;
      }
      .lfx-out {
        height: var(--ph);
      }
      .lfx-paper {
        position: relative;
        height: var(--ph);
        color: var(--cream);
        background: var(--surface);
        border: 1px solid var(--edge);
        border-left: 6px solid var(--accent-money);
        border-radius: 12px;
        box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.9);
        clip-path: inset(0 0 100% 0);
      }
      .lfx-go .lfx-paper {
        animation: lfxFeed 0.42s steps(12, end) both;
      }
      @keyframes lfxFeed {
        to {
          clip-path: inset(0 0 0 0);
        }
      }
      /* the leading edge of the paper as it comes down */
      .lfx-edge {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
        background: var(--accent-money);
        box-shadow: 0 0 12px 1px rgba(95, 168, 120, 0.8);
        opacity: 0;
      }
      .lfx-go .lfx-edge {
        animation: lfxEdge 0.42s steps(12, end) both;
      }
      @keyframes lfxEdge {
        0% {
          top: 0;
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        100% {
          top: 100%;
          opacity: 0;
        }
      }
      .lfx-print .edit-icon-btn,
      .lfx-print .mc-del,
      .lfx-print .md-actions {
        visibility: hidden;
      }
      .panel.printin {
        animation: lfxPanelIn 0.24s ease;
      }
      @keyframes lfxPanelIn {
        from {
          opacity: 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .lfx-card,
        .lfx-paper,
        .lfx-edge,
        .panel.printin {
          animation: none;
        }
      }

      /* ---------- sheets built from The Reel's chrome ----------
         The money form and the settings sheet reuse the shared classes in
         modal.css and settings.css, which were written for the Reel's cream
         panel. This page's panel is dark, so every one of them that paints in
         paper ink has to be repainted or it lands black on black. */
      .panel.money .sheet-title {
        color: var(--cream);
      }
      .panel.money .kicker {
        color: var(--accent-money);
      }
      .panel.money .settings-section-title {
        color: var(--muted);
        border-bottom-color: var(--edge);
      }
      .panel.money .settings-desc {
        color: var(--muted);
      }
      .panel.money .settings-row .btn {
        background: var(--surface-2);
        border-color: var(--edge-2);
        color: var(--cream);
      }
      .panel.money .settings-row .btn:hover {
        background: var(--ink-2);
        border-color: var(--accent-money);
        color: var(--accent-money);
      }
      .panel.money .key-panel {
        background: var(--surface-2);
        border-color: var(--edge-2);
      }
      .panel.money .key-panel p {
        color: var(--muted);
      }
      .panel.money .key-panel strong {
        color: var(--cream);
      }
      .panel.money .key-row input {
        background: var(--ink-2);
        border-color: var(--edge-2);
        color: var(--cream);
      }
      .panel.money .key-row input:focus {
        outline: none;
        border-color: var(--accent-money);
      }

      /* the field focus ring in forms.css is the Reel's gold, hardcoded down
         to the rgba glow, so the money sheets repaint it in their own green */
      .panel.money .field input:focus,
      .panel.money .field textarea:focus,
      .panel.money .field select:focus {
        border-color: var(--accent-money);
        box-shadow: 0 0 0 3px rgba(95, 168, 120, 0.24);
      }

      /* the delete confirmation is shared chrome and paints on the Reel's
         cream paper, which lands as a bright card in the middle of a dark
         page. Same dialog, this page's surface. */
      body[data-page="ledger"] .confirm-panel {
        background: var(--surface);
        color: var(--cream);
      }
      body[data-page="ledger"] .confirm-title {
        color: var(--cream);
      }
      body[data-page="ledger"] .confirm-msg {
        color: var(--muted);
      }
      body[data-page="ledger"] .confirm-msg b {
        color: var(--cream);
      }
      body[data-page="ledger"] .confirm-actions #confirmCancel {
        background: var(--surface-2);
        border-color: var(--edge-2);
        color: var(--cream);
      }
      body[data-page="ledger"] .confirm-actions #confirmCancel:hover {
        border-color: var(--accent-money);
        color: var(--accent-money);
      }

      /* the page keeps --accent gold for the shared chrome, so the search
         ring is repainted in the money green like the rest of this page */
      body[data-page="ledger"] .search input:focus-visible {
        outline-color: var(--accent-money);
      }
      /* the dashboard is the whole picture on purpose and ignores both
         filters, so it hides them rather than leaving controls that look
         live and do nothing */
      body.led-dash .rail-row:not(.spread) {
        display: none;
      }