/* ============================================================================
   Brrr — thermal design system.
   Ported from mockups/styles.css. Tokens mirror packages/ui/src/tokens.ts and
   brand/BRAND.md. This file is the shared visual layer for every web surface.
   ============================================================================ */

:root {
  /* palette */
  --paper:       #FAF7F0;
  --paper-shade: #F1ECE1;
  --ink:         #1A1817;
  --ink-faded:   #6E6A63;
  --red:         #FF4200;   /* THE accent */
  --green:       #1D7A46;   /* only when you beat CPI */
  --blue:        #56687A;   /* official CPI — deliberately dull */
  --marker:      #FFF06B;   /* share-card highlighter only */

  /* dark "night audit" */
  --dk-bg:       #14120F;
  --dk-surface:  #1E1B17;
  --dk-ink:      #F2EDE4;
  --dk-faded:    #9B958A;

  /* type */
  --mono: 'Space Mono', 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* spacing / shape */
  --gutter: 20px;
  --radius: 14px;
  --tooth: 14px;
  --shadow: 0 18px 44px rgba(26,24,23,.20);
  --shadow-sm: 0 6px 16px rgba(26,24,23,.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--ui);
  color: var(--ink);
  background: var(--paper-shade);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

/* paper texture: faint fractal grain, applied to receipt surfaces */
.paper, .receipt, .device-screen {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ---- typography helpers ---- */
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.caps { text-transform: uppercase; letter-spacing: .12em; }
.faded { color: var(--ink-faded); }
.red-ink { color: var(--red); }
.green-ink { color: var(--green); }
.blue-ink { color: var(--blue); }
.h-title { font-family: var(--mono); font-weight: 700; font-size: 26px; letter-spacing: -.01em; }
.fine { font-family: var(--mono); font-size: 11px; color: var(--ink-faded); }
.strong { font-weight: 700; }

/* ============================================================================
   Receipt surface + torn edges (CSS mask zigzag)
   ============================================================================ */
.receipt {
  position: relative;
  color: var(--ink); font-family: var(--mono);
  padding: 22px var(--gutter);
  box-shadow: var(--shadow-sm);
}
.torn-bottom {
  padding-bottom: calc(var(--tooth) + 8px);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      0 100% / var(--tooth) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--tooth)) no-repeat;
          mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      0 100% / var(--tooth) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--tooth)) no-repeat;
}
.torn-top {
  padding-top: calc(var(--tooth) + 8px);
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg)
      0 0 / var(--tooth) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--tooth)) no-repeat;
          mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg)
      0 0 / var(--tooth) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--tooth)) no-repeat;
}
.torn-both.torn-top.torn-bottom {
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 0 0 / var(--tooth) var(--tooth) repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 0 100% / var(--tooth) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) 0 50% / 100% calc(100% - 2*var(--tooth)) no-repeat;
          mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 0 0 / var(--tooth) var(--tooth) repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 0 100% / var(--tooth) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) 0 50% / 100% calc(100% - 2*var(--tooth)) no-repeat;
}

/* receipt content primitives */
.r-center { text-align: center; }
.r-head { text-align: center; font-weight: 700; font-size: 15px; }
.r-sub  { text-align: center; font-size: 12px; color: var(--ink-faded); }
.divider {
  overflow: hidden; white-space: nowrap; color: var(--ink); font-size: 13px;
  margin: 12px 0; user-select: none; letter-spacing: 0;
}

.r-line {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  font-size: 14px; padding: 3px 0; align-items: baseline;
}
.r-line .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-sub-line { font-size: 12px; color: var(--ink-faded); padding: 0 0 6px; white-space: pre-wrap; }
.r-total { font-size: 14px; }
.delta { font-weight: 700; }
.delta.up { color: var(--red); }
.delta.down { color: var(--green); }
.item-note { font-size: 11px; color: var(--green); padding: 0 0 6px; }
.item-note.faded { color: var(--ink-faded); }
.item-note.shrink { color: var(--red); }

/* ============================================================================
   Match-tier badges
   ============================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 10px var(--mono); letter-spacing: .06em;
  padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px;
  vertical-align: middle; white-space: nowrap;
}
.dots { letter-spacing: -1px; }
.badge.exact,    .badge.exact_store   { color: var(--ink); }
.badge.chain,    .badge.same_chain    { color: var(--ink); }
.badge.twin,     .badge.equivalent    { color: var(--ink-faded); }
.badge.ballpark, .badge.category_est  { color: var(--ink-faded); }
.badge.drift,    .badge.cpi_drift     { color: var(--ink-faded); }
.badge.unpriced  { color: var(--ink-faded); border-style: dashed; }

/* ============================================================================
   The Stamp (YOUR BRRR RATE)
   ============================================================================ */
.stamp {
  display: inline-block; transform: rotate(-3deg);
  border: 3px double var(--red); color: var(--red);
  padding: 10px 20px; margin: 8px 0; text-align: center;
  border-radius: 4px;
}
.stamp.win { border-color: var(--green); color: var(--green); }
.stamp .label { font: 700 12px var(--mono); letter-spacing: .12em; }
.stamp .value { font: 700 46px var(--mono); line-height: 1.05; }

/* the official number, always shown next to yours */
.official { color: var(--blue); font: 700 14px var(--mono); }
.official.unavailable { font-size: 12px; opacity: .85; }
.gap-line { font: 700 13px var(--mono); margin-top: 4px; }

/* ============================================================================
   Buttons / chips
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px var(--ui); padding: 14px 20px; border-radius: 12px;
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer; text-decoration: none; width: 100%; transition: transform .08s;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.sm { font-size: 13px; padding: 10px 14px; width: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--mono);
  padding: 5px 10px; border-radius: 999px; background: var(--paper-shade); color: var(--ink);
  letter-spacing: .04em;
}
.chip.red { background: var(--red); color: #fff; }
.chip.up { color: var(--red); } .chip.down { color: var(--green); }

/* ============================================================================
   Ticker / cards
   ============================================================================ */
.section-label { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--ink-faded);
  text-transform: uppercase; margin: 20px var(--gutter) 8px; }
.masthead { padding: 20px var(--gutter) 14px; }
.masthead .rate { font: 700 58px var(--mono); line-height: 1; letter-spacing: -.02em; }
.masthead .rate.win { color: var(--green); } .masthead .rate.up { color: var(--red); }
.masthead .rate-label { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--ink-faded); }

.tick-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 12px var(--gutter); border-bottom: 1px solid var(--paper-shade);
}
.tick-row .lead { border-left: 3px solid transparent; padding-left: 10px; margin-left: -10px; }
.tick-row.mv-up .lead { border-color: var(--red); }
.tick-row.mv-down .lead { border-color: var(--green); }
.tick-row .nm { font: 700 13px var(--mono); }
.tick-row .meta { font: 11px var(--mono); color: var(--ink-faded); }
.tick-row .px { font: 700 14px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.tick-row .mv { font: 700 12px var(--mono); text-align: right; }
.tick-row .mv.up { color: var(--red); } .tick-row .mv.down { color: var(--green); }

.cat-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 10px var(--gutter); font-family: var(--mono);
}

.spark { display: block; }

/* ============================================================================
   Print animation (the Reveal)
   ============================================================================ */
.print-line { opacity: 0; transform: translateY(-6px); animation: printin .28s ease-out forwards; }
@keyframes printin { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .print-line { animation-duration: .01ms !important; opacity: 1; transform: none; }
}

/* ============================================================================
   Web (landing / share pages) — desktop chrome
   ============================================================================ */
.web { background: var(--paper-shade); }
.web-nav {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center;
  justify-content: space-between; padding: 16px 32px; background: rgba(250,247,240,.9);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--paper-shade);
}
.web-nav .links { display: flex; gap: 24px; align-items: center; font: 600 14px var(--ui); }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.hero { text-align: center; padding: 72px 24px 40px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--paper); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }

@media (max-width: 720px) { .grid-3 { grid-template-columns: 1fr; } .web-nav .links { display: none; } }

/* utility */
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.center { text-align: center; }
.pad { padding: var(--gutter); }
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.hidden { display: none !important; }
.sc-url { font: 700 11px var(--mono); letter-spacing: .05em; margin-top: 6px; }