/* History looks (history-looks.js; Jay, 2026-10-30). Nothing here touches Classic: every rule is under .hl, which
 * only exists when a look is picked. Each look sets its own tokens on .hl-<id>; .hl-light flips them. Dark first. */

.hl { --hl-bg: var(--bg); --hl-card: var(--surface-solid); --hl-ink: var(--ink); --hl-dim: var(--ink-dim); --hl-faint: var(--ink-faint);
      --hl-line: var(--hairline-strong); --hl-accent: var(--accent); --hl-bad: var(--bad); --hl-warn: var(--warn);
      --hl-font: inherit; --hl-radius: 12px; --hl-gap: 10px; --hl-total: 22px;
      color: var(--hl-ink); font-family: var(--hl-font); background: var(--hl-bg); border-radius: var(--hl-radius); padding: 12px; }
.hl.hl-light { --hl-bg: #f4f5f7; --hl-card: #ffffff; --hl-ink: #141822; --hl-dim: #4e5665; --hl-faint: #7a8291; --hl-line: rgba(0,0,0,.12);
               --hl-accent: #1a8f3d; --hl-bad: #c62828; --hl-warn: #a66a00; color-scheme: light; }
.hl-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.hl-picker label { margin: 0; }
.hl-picker select { max-width: 260px; }
.hl-picker .note { flex: 1 1 240px; }

.hl .hl-marks { display: inline-flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.hl .hl-mark { width: 40px; height: 25px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.35); flex: 0 0 auto; }
.hl .hl-pill { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--hl-line); color: var(--hl-dim); vertical-align: middle; }
.hl .hl-pill.hl-bad { color: var(--hl-bad); border-color: var(--hl-bad); }
.hl .hl-pill.hl-warn { color: var(--hl-warn); border-color: var(--hl-warn); }
.hl .hl-bad { color: var(--hl-bad); }
.hl .hl-dim { color: var(--hl-dim); }
.hl .hl-empty { color: var(--hl-dim); margin: 12px 4px; }
.hl .hl-matched { font-size: 12px; color: var(--hl-faint); font-style: italic; }
.hl [data-txn] { cursor: pointer; }
.hl [data-txn]:focus-visible { outline: 2px solid var(--hl-accent); outline-offset: 2px; }

/* lines (Compact, Minimal, Receipt roll, Terminal, Paper, Dashboard, Grouped) */
.hl .hl-lines, .hl .hl-group { display: flex; flex-direction: column; gap: var(--hl-gap); }
.hl .hl-line { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--hl-card); border-radius: var(--hl-radius); border: 1px solid var(--hl-line); }
.hl .hl-line:hover { border-color: var(--hl-accent); }
.hl .hl-line-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hl .hl-line-title { font-weight: 600; }
.hl .hl-line-meta { font-size: 12px; color: var(--hl-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl .hl-line-total { font-size: var(--hl-total); font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.hl .hl-chev { color: var(--hl-faint); font-size: 22px; flex: 0 0 auto; }

/* cards (Cards, Glass, Big numbers, Poster, Kanban) */
.hl .hl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--hl-gap); }
.hl .hl-card { background: var(--hl-card); border: 1px solid var(--hl-line); border-radius: var(--hl-radius); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.hl .hl-card:hover { border-color: var(--hl-accent); }
.hl .hl-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--hl-dim); font-size: 13px; }
.hl .hl-card-total { font-size: calc(var(--hl-total) * 1.3); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hl .hl-card-title { font-weight: 600; }
.hl .hl-card-meta { font-size: 12px; color: var(--hl-dim); }
.hl .hl-card-sm .hl-card-total { font-size: var(--hl-total); }

/* table (Ledger, Split) */
.hl .hl-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hl .hl-table th { text-align: left; font-size: 12px; color: var(--hl-dim); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--hl-line); }
.hl .hl-table td { padding: 9px 10px; border-bottom: 1px solid var(--hl-line); vertical-align: middle; }
.hl .hl-table .hl-num { text-align: right; font-weight: 700; }
.hl .hl-table .hl-td-pay { white-space: nowrap; }
.hl .hl-table .hl-td-pay .hl-marks { margin-right: 8px; vertical-align: middle; }
.hl .hl-table tr[data-txn]:hover td { background: var(--hl-card); }

/* timeline */
.hl .hl-rail { position: relative; padding-left: 18px; border-left: 2px solid var(--hl-line); display: flex; flex-direction: column; gap: 18px; }
.hl .hl-hour-label { font-size: 12px; color: var(--hl-dim); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 8px; }
.hl .hl-stop { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--hl-radius); margin-bottom: 6px; background: var(--hl-card); border: 1px solid var(--hl-line); }
.hl .hl-stop:hover { border-color: var(--hl-accent); }
.hl .hl-dot { position: absolute; left: -26px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--hl-accent); }
.hl .hl-stop-main { flex: 1 1 auto; min-width: 0; }
.hl .hl-stop-total { font-weight: 700; font-size: var(--hl-total); font-variant-numeric: tabular-nums; }

/* grouped */
.hl .hl-groups { display: flex; flex-direction: column; gap: 16px; }
.hl .hl-group-head { display: flex; gap: 10px; align-items: baseline; padding: 4px 6px; font-weight: 700; }
.hl .hl-group-total { margin-left: auto; font-variant-numeric: tabular-nums; }

/* kanban */
.hl .hl-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.hl .hl-col { background: rgba(127,127,127,.08); border-radius: var(--hl-radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.hl .hl-col-head { display: flex; gap: 8px; align-items: baseline; font-weight: 700; padding: 2px 4px 6px; }
.hl .hl-col-total { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .hl .hl-kanban { grid-template-columns: 1fr; } }

/* dashboard tiles */
.hl .hl-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.hl .hl-tile { background: var(--hl-card); border: 1px solid var(--hl-line); border-radius: var(--hl-radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.hl .hl-tile-k { font-size: 12px; color: var(--hl-dim); }
.hl .hl-tile-v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hl .hl-tile-all { border-color: var(--hl-accent); }
@media (max-width: 640px) { .hl .hl-tiles { grid-template-columns: repeat(2, 1fr); } }

/* detail (in the receipt dialog) */
.hl.hl-detail { margin: 6px 0 10px; }
.hl .hl-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 14px; text-align: center; }
.hl .hl-hero-marks .hl-mark { width: 56px; height: 35px; }
.hl .hl-hero-total { font-size: 44px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hl .hl-hero-sub { color: var(--hl-dim); }
.hl .hl-whowhen { display: flex; gap: 14px; flex-wrap: wrap; color: var(--hl-dim); font-size: 13px; padding: 6px 0; border-top: 1px solid var(--hl-line); border-bottom: 1px solid var(--hl-line); margin: 6px 0; }
.hl .hl-ro-line, .hl .hl-sub, .hl .hl-total, .hl .hl-pay { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-variant-numeric: tabular-nums; }
.hl .hl-ro { font-weight: 600; }
.hl .hl-total { font-size: var(--hl-total); font-weight: 800; border-top: 1px solid var(--hl-line); margin-top: 4px; padding-top: 8px; }
.hl .hl-paid { margin-top: 8px; }
.hl .hl-paid-head { font-size: 13px; color: var(--hl-dim); border-top: 1px dashed var(--hl-line); border-bottom: 1px dashed var(--hl-line); padding: 6px 0; }
.hl .hl-pay { justify-content: flex-start; }
.hl .hl-pay-name { flex: 1 1 auto; }
.hl .hl-pay-amt { font-weight: 600; }
.hl .hl-note { color: var(--hl-dim); font-size: 13px; }

/* ---------------------------------------------------------------- the fifteen */
/* 1 Receipt roll: cream slips, monospace, like the paper concept */
.hl-receipt-roll { --hl-font: "SF Mono", Menlo, Consolas, monospace; --hl-card: #f6f1e4; --hl-ink: #1b1b1b; --hl-dim: #4a4a4a; --hl-faint: #777; --hl-line: #d9d2c0; --hl-radius: 3px; --hl-gap: 8px; --hl-accent: #1b1b1b; }
.hl-receipt-roll.hl-light { --hl-bg: #e8e3d6; }
.hl-receipt-roll .hl-line, .hl-receipt-roll.hl-detail { background: var(--hl-card); color: var(--hl-ink); border: 0; border-top: 1px dashed #9c957f; border-bottom: 1px dashed #9c957f; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.hl-receipt-roll .hl-line-total { font-size: 18px; }
.hl-receipt-roll .hl-chev { display: none; }
.hl-receipt-roll.hl-detail { padding: 14px 18px; --hl-total: 24px; }
.hl-receipt-roll .hl-total span:first-child { font-weight: 800; }
/* 2 Ledger: tight, zebra */
.hl-ledger { --hl-radius: 6px; --hl-card: rgba(127,127,127,.09); }
.hl-ledger .hl-table th, .hl-ledger .hl-table td { padding: 6px 8px; font-size: 13px; }
.hl-ledger .hl-table tbody tr:nth-child(even) td { background: rgba(127,127,127,.06); }
.hl-ledger .hl-table .hl-mark { width: 32px; height: 20px; }
/* 3 Cards */
.hl-cards { --hl-radius: 16px; --hl-gap: 12px; --hl-total: 24px; }
.hl-cards .hl-card { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.hl-cards.hl-light .hl-card { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
/* 4 Timeline */
.hl-timeline { --hl-radius: 10px; --hl-total: 18px; }
/* 5 Compact: iOS settings list */
.hl-compact { --hl-radius: 0; --hl-gap: 0; --hl-total: 17px; --hl-card: transparent; }
.hl-compact .hl-lines { background: var(--hl-card); border-radius: 12px; overflow: hidden; }
.hl-compact .hl-line { border: 0; border-bottom: 1px solid var(--hl-line); padding: 9px 12px; }
.hl-compact .hl-line:last-child { border-bottom: 0; }
.hl-compact .hl-mark { width: 32px; height: 20px; }
/* 6 Split: a wide, airy table; lines on a phone */
.hl-split { --hl-radius: 10px; }
.hl-split .hl-table th, .hl-split .hl-table td { padding: 14px 12px; }
.hl-split .hl-table .hl-num { font-size: 18px; }
@media (max-width: 760px) {
  .hl-split .hl-table, .hl-split .hl-table tbody { display: block; }
  .hl-split .hl-table thead { display: none; }
  .hl-split .hl-table tr { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 6px; border-bottom: 1px solid var(--hl-line); }
  .hl-split .hl-table td { display: inline; padding: 0; border: 0; }
  .hl-split .hl-table .hl-num { margin-left: auto; }
}
/* 7 Terminal */
.hl-terminal { --hl-font: "SF Mono", Menlo, Consolas, monospace; --hl-bg: #050805; --hl-card: #0a120a; --hl-ink: #7CFF9B; --hl-dim: #4faa64; --hl-faint: #3a7a4a; --hl-line: #1e4a28; --hl-accent: #7CFF9B; --hl-bad: #ff7b7b; --hl-radius: 2px; --hl-gap: 4px; --hl-total: 16px; }
.hl-terminal.hl-light { --hl-bg: #eef5ee; --hl-card: #ffffff; --hl-ink: #0b3d1a; --hl-dim: #2f6b43; --hl-faint: #5a8a68; --hl-line: #bcd8c4; --hl-accent: #0b3d1a; }
.hl-terminal .hl-line { padding: 6px 10px; }
.hl-terminal .hl-mark { width: 30px; height: 19px; filter: saturate(.6); }
.hl-terminal .hl-chev::before { content: '$ '; }
.hl-terminal .hl-chev { font-size: 13px; }
/* 8 Glass */
.hl-glass { --hl-radius: 18px; --hl-card: rgba(60,70,85,.35); --hl-line: rgba(255,255,255,.14); --hl-total: 24px; }
.hl-glass .hl-card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--glass-edge), 0 10px 30px rgba(0,0,0,.3); }
.hl-glass.hl-light { --hl-card: rgba(255,255,255,.65); --hl-line: rgba(0,0,0,.08); --hl-bg: #e9edf3; }
/* 9 Paper: light first */
.hl-paper { --hl-bg: #fbfaf6; --hl-card: #fbfaf6; --hl-ink: #1c1a16; --hl-dim: #5c574d; --hl-faint: #8a847a; --hl-line: #d8d3c8; --hl-accent: #8a4b00; --hl-radius: 0; --hl-gap: 0; color-scheme: light; --hl-total: 19px; }
.hl-paper.hl-light { --hl-bg: #fbfaf6; }
.hl-paper:not(.hl-light) { --hl-bg: #15130f; --hl-card: #15130f; --hl-ink: #efe9dc; --hl-dim: #b3ab9b; --hl-faint: #857d6e; --hl-line: #3a352c; --hl-accent: #e0a35a; color-scheme: dark; }
.hl-paper .hl-line { border: 0; border-bottom: 1px solid var(--hl-line); padding: 12px 6px; }
.hl-paper .hl-chev { display: none; }
.hl-paper .hl-line-title { font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
/* 10 Big numbers */
.hl-big-numbers { --hl-total: 34px; --hl-radius: 14px; }
.hl-big-numbers .hl-card-total { font-size: 46px; line-height: 1; }
.hl-big-numbers .hl-card-title, .hl-big-numbers .hl-card-meta, .hl-big-numbers .hl-card-top { font-size: 12px; }
.hl-big-numbers .hl-mark { width: 30px; height: 19px; }
/* 11 Grouped by RO */
.hl-grouped { --hl-radius: 10px; --hl-gap: 6px; --hl-total: 17px; }
.hl-grouped .hl-group { background: rgba(127,127,127,.07); border-radius: 12px; padding: 8px; }
.hl-grouped .hl-chev { display: none; }
/* 12 By payment (kanban) */
.hl-kanban { --hl-radius: 10px; --hl-total: 20px; }
/* 13 Minimal lines */
.hl-minimal { --hl-card: transparent; --hl-radius: 0; --hl-gap: 0; --hl-total: 20px; --hl-line: var(--hairline); }
.hl-minimal .hl-line { border: 0; border-bottom: 1px solid var(--hl-line); padding: 16px 4px; gap: 18px; }
.hl-minimal .hl-line:hover { background: rgba(127,127,127,.06); }
.hl-minimal .hl-chev { display: none; }
.hl-minimal .hl-mark { box-shadow: none; }
.hl-minimal .hl-line-title { font-weight: 500; letter-spacing: .01em; }
/* 14 Poster: two-tone, a brand's colour across its card */
.hl-poster { --hl-radius: 8px; --hl-gap: 10px; --hl-total: 30px; --hl-card: #1d2230; }
.hl-poster.hl-light { --hl-card: #ffffff; }
.hl-poster .hl-card { border-left: 8px solid var(--hl-line); text-transform: uppercase; letter-spacing: .04em; }
.hl-poster .hl-card-total { text-transform: none; letter-spacing: -.02em; font-size: 36px; }
.hl-poster .hl-card:has(.hl-mark-visa) { border-left-color: #1a1f71; }
.hl-poster .hl-card:has(.hl-mark-mastercard) { border-left-color: #eb001b; }
.hl-poster .hl-card:has(.hl-mark-amex) { border-left-color: #2e77bb; }
.hl-poster .hl-card:has(.hl-mark-discover) { border-left-color: #f68121; }
.hl-poster .hl-card:has(.hl-mark-cash) { border-left-color: #1f7a3a; }
.hl-poster .hl-card:has(.hl-mark-check) { border-left-color: #5b6472; }
.hl-poster .hl-card:has(.hl-mark-credit) { border-left-color: #7b4dd6; }
/* 15 Dashboard */
.hl-dashboard { --hl-radius: 10px; --hl-gap: 6px; --hl-total: 17px; }
.hl-dashboard .hl-mark { width: 32px; height: 20px; }

/* the dialog's detail keeps to the dialog's width */
#modal .hl.hl-detail { max-width: 520px; }