/* Cafe receipt theme: cream paper, ink typography, blue accents. Colours come from the theme tokens
   (inline :root block); this file only adds the receipt composition on top of the shared stylesheet. */
:root { --receipt-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; }
body { background-color: var(--c-bg); color: var(--c-text); }
h1, h2, h3, h4 { color: var(--c-text); }

/* header: printed receipt top with a perforated edge */
.site-header { background: var(--c-surface); border-block-end: 2px dashed var(--c-border); }
.brand { color: var(--c-text); letter-spacing: .02em; }
.brand::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 10px;
  border-radius: 50%; background: var(--c-accent); vertical-align: middle; }
.site-nav a { color: var(--c-text); }
.site-nav a:hover, .site-nav a[aria-current] { border-block-end-color: var(--c-accent); color: var(--c-accent); }

/* hero: the receipt slip itself */
.hero { position: relative; padding: var(--s4); background: var(--c-surface); border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-accent); border-bottom: 2px dashed var(--c-border);
  border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 12px 24px -20px rgb(31 36 51 / .45); }
.hero h1 { margin: 0; color: var(--c-text); font-family: var(--font-heading); overflow-wrap: anywhere; }
.hero .lead { margin: var(--s2) 0 0; color: var(--c-muted); font-family: var(--receipt-mono); font-size: 1rem; }
@media (max-width: 719px) { .hero { padding: var(--s3); } }

/* cards and lists keep the paper look */
.card, .faq-item, .toc, .empty-state { background: var(--c-surface); border: 1px solid var(--c-border); }
.empty-state { border-style: dashed; }
.button { border-radius: var(--radius); }
.price, .pagination a, .pagination span { font-family: var(--receipt-mono); font-variant-numeric: tabular-nums; }
.prose table { font-variant-numeric: tabular-nums; }
.prose th { background: var(--c-bg); }

/* tool sidebar: a little wider on desktop so the expense table stays legible; one column below 1024px */
@media (min-width: 1024px) {
  .site-module-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: var(--s5); }
}
.site-module-sidebar { min-width: 0; }

.site-footer { background: var(--c-surface); border-block-start: 2px dashed var(--c-border); }
.footer-name { font-family: var(--receipt-mono); letter-spacing: .04em; text-transform: uppercase; }