/* Subs: a till receipt. The totals print large at the top, each subscription is a line with a dotted leader,
   and the ones renewing this week get a plum tag. Lavender-grey page, one plum for actions. */
:root { --page: #f4f1f7; --card: #ffffff; --ink: #1d1724; --soft: #5f5769; --line: #dcd5e3; --field: #efebf3; --act: #6b2e8f; --on-act: #ffffff; --stop: #b3261e; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #151219; --card: #1e1a24; --ink: #efeaf4; --soft: #aaa1b5; --line: #342d3c; --field: #151219; --act: #cf9bef; --on-act: #22102f; --stop: #ff8a80; color-scheme: dark; }
}
.totals { grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.totals div { display: grid; gap: 2px; min-width: 0; }
.totals .big { font-size: clamp(30px, 8vw, 46px); overflow-wrap: anywhere; }
.totals p { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 12px; }
.subs { list-style: none; margin: 0; padding: 0; display: grid; }
.subs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.line b { overflow-wrap: anywhere; }
.line::after { content: ""; flex: 1; border-bottom: 2px dotted var(--line); min-width: 12px; order: 1; }
.line .price { order: 2; font-weight: 700; white-space: nowrap; }
.when { grid-column: 1; font-size: 15px; color: var(--soft); }
.tag { display: inline-block; background: var(--act); color: var(--on-act); border-radius: 999px; padding: 0 8px; font-size: 13px; font-weight: 700; margin-right: 6px; }
.acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: center; }
@media (max-width: 480px) { .acts { grid-column: 1 / -1; grid-row: auto; } #add .row button { flex: 1; } }