/* Dither's house: a riso print on cream stock. Words in Kevin Serif and Kevin Sans (from kevintngo.com).
   No rounded corners and no gradients: tints are dithers, like everything in the house. */
@font-face { font-family: 'Kevin Serif'; src: url(fonts/KevinSerif-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Kevin Serif'; src: url(fonts/KevinSerif-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Kevin Sans'; src: url(fonts/KevinSans-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Kevin Sans'; src: url(fonts/KevinSans-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --paper: #f3ebdd;
  --card: #fbf6ec;       /* a sheet a shade lighter, for cards */
  --ink: #344a80;        /* the key plate: 7.3:1 on the paper */
  --ink-2: #56628a;      /* quieter words: 5.2:1 */
  --line: rgba(52, 74, 128, 0.28);
  --coral: #ee6852;
  --coral-ink: #a8402d;  /* coral you can read: 5.1:1 */
  --sun: #ffd428;
  --teal: #008c8a;
  --black: #242226;
  --panel: clamp(420px, 34vw, 560px);
  --dither-coral: none;  /* set by app.js: the same 8x8 screen the house is printed with */
  --dither-sun: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 16px/1.5 'Kevin Sans', ui-sans-serif, system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration-color: var(--coral); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--coral-ink); }
:focus-visible { outline: 2px solid var(--coral-ink); outline-offset: 2px; }
button { font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0; cursor: pointer; }
button:hover { background: var(--sun); }
svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* desktop: the house on the left; the title, money and feed in a column on the right that scrolls by itself */
.app { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "view top" "view panel"; height: 100vh; height: 100dvh; }
.top { grid-area: top; padding: 22px 26px 14px; border-left: 1.5px solid var(--ink); }
.view { grid-area: view; }
.panel { grid-area: panel; overflow-y: auto; padding: 4px 26px 32px; border-left: 1.5px solid var(--ink); }
.title { margin: 0; font: 400 2.3rem/1.02 'Kevin Serif'; letter-spacing: -0.01em; }
.lede { margin: 6px 0 0; color: var(--ink-2); max-width: 34em; }

/* ---- the house ---- */
.view { position: relative; overflow: hidden; background: var(--paper); }
#stage { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#stage.is-drag { cursor: grabbing; }
#stage.is-point { cursor: pointer; }
.loading[hidden], .hint[hidden] { display: none; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-family: 'Kevin Serif'; font-size: 1.3rem; color: var(--ink-2); pointer-events: none; }
.hint { position: absolute; left: 12px; bottom: 14px; max-width: calc(100% - 190px); margin: 0; padding: 5px 9px; font-size: 0.85rem; line-height: 1.3; background: var(--card); border: 1.5px solid var(--ink); pointer-events: none; transition: opacity 0.6s; }
.hint.is-gone { opacity: 0; }
.zoom { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.zoom button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: 1.35rem; line-height: 1; background: var(--card); box-shadow: 2px 2px 0 var(--ink); }
.zoom svg { width: 18px; height: 18px; stroke-width: 1.8; }
.zoom button:active { transform: translate(2px, 2px); box-shadow: none; }

.receipt { position: absolute; left: 12px; top: 12px; width: min(320px, calc(100% - 24px)); padding: 12px 14px 12px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.receipt[hidden] { display: none; }
.receipt-x { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; padding: 0; border: 0; font-size: 1.5rem; line-height: 1; background: transparent; }
.receipt-kind { margin: 0; font-size: 0.85rem; color: var(--ink-2); }
.receipt-name { margin: 2px 34px 6px 0; font: 400 1.3rem/1.15 'Kevin Serif'; overflow-wrap: anywhere; }
.receipt-price, .receipt-by, .receipt-when { margin: 4px 0 0; font-size: 0.95rem; }
.receipt-when { color: var(--ink-2); font-size: 0.86rem; }

/* ---- money ---- */
.wallet { margin: 6px 0 0; padding: 16px 16px 14px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.wallet-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.balance { margin: 0; }
.balance-n { font: 400 2.7rem/1 'Kevin Serif'; font-variant-numeric: tabular-nums; }
.balance-w { color: var(--ink-2); }
.balance.is-up .balance-n { color: var(--coral-ink); }
.trip { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 0.85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trip-dot { width: 8px; height: 8px; background: var(--teal); }
.trip.is-now .trip-dot { background: var(--coral); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.sums { margin: 6px 0 14px; font-size: 0.92rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rates { margin: 0 0 16px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rates li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); background: var(--paper); }
.rates svg { grid-row: 1 / 3; width: 20px; height: 20px; color: var(--coral-ink); }
.rate-top, .rate-x { grid-column: 2; }
.rate-n { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rate-x { font-size: 0.82rem; color: var(--ink-2); }
.goal-what { margin: 0 0 6px; font-size: 0.95rem; }
.goal-name { font-weight: 700; }
.bar { height: 14px; border: 1.5px solid var(--ink); background: var(--paper); }
.bar-fill { display: block; height: 100%; width: 0; background-color: var(--coral); background-image: var(--dither-coral); background-size: 8px 8px; image-rendering: pixelated; transition: width 0.8s; }
.goal-n { margin: 5px 0 0; font-size: 0.85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---- how to help ---- */
.help { margin: 18px 0 0; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; font-size: 1.08rem; text-decoration: none; color: var(--paper); background: var(--ink); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--coral); }
.cta:hover { color: var(--paper); background: var(--coral-ink); border-color: var(--coral-ink); box-shadow: 4px 4px 0 var(--ink); }
.cta:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--coral); }
.cta-sub { margin: 10px 0 0; font-size: 0.92rem; color: var(--ink-2); }
.ideas { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 3px 9px; font-size: 0.85rem; border: 1px solid var(--line); background: var(--card); }
.ideas:empty { display: none; }
.ideas svg { width: 16px; height: 16px; color: var(--coral-ink); }

/* ---- what it's been doing: a few short entries per visit to the shops ---- */
.log { margin: 30px 0 0; }
.log h2 { margin: 0 0 4px; font: 400 1.45rem/1.1 'Kevin Serif'; }
.feed, .grp-l { margin: 0; padding: 0; list-style: none; }
.grp { padding: 14px 0 4px; border-top: 1.5px dashed var(--line); }
.grp:first-child { border-top: 0; }
.grp-t { margin: 0 0 8px; font-size: 0.82rem; color: var(--ink-2); }
.en { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 10px; margin: 0 0 10px; overflow-wrap: anywhere; }
.en > svg { width: 20px; height: 20px; margin-top: 1px; color: var(--ink-2); }
.en p { margin: 0; }
.en .muted { color: var(--ink-2); }
.en-earn > svg { color: var(--coral-ink); }
.amt { font-weight: 700; color: var(--coral-ink); font-variant-numeric: tabular-nums; }
.en-think p { font-style: italic; }
.en-build p { font-weight: 700; }
.en.is-now, .card.is-now { background-image: var(--dither-sun); background-size: 8px 8px; }

/* a purchase: what it went looking for, what it bought, its thought, where it went, what it passed on */
.card { margin: 2px 0 12px; padding: 12px 14px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); overflow-wrap: anywhere; }
.card-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 4px; font-size: 0.85rem; color: var(--ink-2); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; font-size: 0.8rem; color: var(--ink); border: 1px solid var(--line); background: var(--paper); }
.tag svg { width: 14px; height: 14px; color: var(--coral-ink); }
.card-title { margin: 0; font: 700 1.05rem/1.3 'Kevin Sans', sans-serif; }
.card-title .card-sub { font-weight: 400; font-size: 0.92rem; color: var(--ink-2); }
.card-meta { margin: 6px 0 0; font-size: 0.95rem; }
.price { display: inline-block; padding: 0 7px; margin-right: 4px; font-weight: 700; color: var(--paper); background: var(--coral-ink); font-variant-numeric: tabular-nums; }
.card-quote { margin: 10px 0 0; padding-left: 10px; border-left: 3px solid var(--sun); font: italic 400 1rem/1.4 'Kevin Serif'; }
.card-note { margin: 8px 0 0; font-size: 0.88rem; color: var(--ink-2); }
button.it { padding: 3px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
button.it:hover { color: var(--coral-ink); background: none; }
.more { display: block; width: 100%; margin: 6px 0 0; padding: 10px 12px; font-size: 0.95rem; background: var(--card); box-shadow: 2px 2px 0 var(--ink); }

.foot { margin: 30px 0 0; padding-top: 14px; border-top: 1.5px dashed var(--line); font-size: 0.86rem; color: var(--ink-2); }

/* phones and small tablets: one column that the page scrolls through: title, the house, money, the feed */
@media (max-width: 820px) {
  .app { display: block; height: auto; }
  .top { padding: 16px 16px 12px; border-left: 0; }
  .title { font-size: 1.95rem; }
  .lede { font-size: 0.95rem; }
  .view { height: 52vh; height: 52svh; min-height: 300px; max-height: 560px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
  .panel { overflow: visible; padding: 18px 16px 32px; border-left: 0; }
  .wallet { margin-top: 0; }
  .balance-n { font-size: 2.4rem; }
  .receipt { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; }
  .hint { max-width: calc(100% - 190px); }
}
/* fingers: bigger things to tap */
@media (pointer: coarse) {
  .zoom { gap: 10px; }
  .zoom button { width: 46px; height: 46px; }
  .hint { max-width: calc(100% - 200px); }
}
@media (max-width: 360px) { .rates { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bar-fill, .hint { transition: none; } .trip.is-now .trip-dot { animation: none; } }