/* House Board web kit: /h (house.html) and /b (board.html). Craft-paper look from
   /test2 (docs/revamp/README.md): Plus Jakarta Sans, one ink, warm paper. Tokens
   only; every row follows the one-shrinks rule (one child shrinks, the rest hold). */
:root {
  --bg: #FBF8F2; --card: #FFFFFF; --sunk: #F0EBE1; --line: #E7E1D6; --inline: #EEE9E0; --dashed: #CFC7B8;
  --ink: #16150F; --muted: #5A544A; --dim: #7A7366;
  --butter: #F6E2A6; --butter-ink: #5E4E1E; --sky: #D3E3F8; --sky-ink: #2F5C94;
  --pos: #00963A; --stamp: #2F8A55; --neg: #B42318; --cashtag: #3E6FA8;
  --sans: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  --gutter: 16px; --r-card: 24px; --r-field: 16px;
  --sh: 0 1px 0 var(--line), 0 12px 28px -18px rgba(22,21,15,0.28);
  --f-xs: 0.75rem; --f-sm: 0.8125rem; --f-md: 0.9375rem; --f-lg: 1.0625rem; --f-xl: 1.5rem; --f-xxl: 2.125rem;
  --blush: #F6D6E6; --blush-ink: #6E2A57; --focus: #2F5C94;
  --hand: 'Patrick Hand', 'Segoe Print', 'Bradley Hand', cursive;
  --f-amt: 2.75rem; --f-name: 2.125rem; --f-note: 1.4375rem;
  --r-note: 4px; --sh-note: 0 12px 14px -12px rgba(22,21,15,0.55), 0 1px 0 rgba(22,21,15,0.06);
  /* the desk under the board (house.look); /h keeps the paper */
  --desk: var(--bg); --desk-ink: var(--ink); --desk-soft: var(--muted); --desk-tex: none;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 600; line-height: 1.4; min-height: 100vh; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wrap { max-width: 520px; margin: 0 auto; padding: 0 var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* top bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); font-size: 0.875rem; font-weight: 800; flex-shrink: 0; }
.brand img { width: 22px; height: 22px; }
.barlink { flex-shrink: 0; border: 0; background: none; cursor: pointer; font-size: var(--f-sm); font-weight: 800; color: var(--muted); min-height: 44px; padding: 0 4px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; font-weight: 800; border-radius: 999px; }
.btn.dark { background: var(--ink); color: #FFF; }
.btn.line { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn:disabled { background: var(--sunk); color: var(--dim); cursor: default; box-shadow: none; }
.cta { width: 100%; min-height: 52px; margin-top: 18px; font-size: var(--f-lg); border-radius: 18px; }
.linkb { display: block; margin: 14px auto 0; border: 0; background: none; cursor: pointer; font-size: var(--f-md); font-weight: 800; color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; min-height: 44px; padding: 0 8px; }
.linkb.quiet { color: var(--muted); font-size: var(--f-sm); }

/* faces */
.face { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 999px;
  color: #FFF; font-weight: 800; width: 36px; height: 36px; font-size: 0.9375rem; }
.face.sm { width: 30px; height: 30px; font-size: 0.8125rem; }
.face.lg { width: 52px; height: 52px; font-size: 1.25rem; }
.face.q { background: var(--card); color: var(--dim); }
.face.q::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px dashed var(--dashed); }
.crowd { display: flex; align-items: center; flex-wrap: nowrap; margin-top: 18px; }
.face.more { background: var(--sunk); color: var(--ink); font-size: 1.0625rem; }
.crowd .face + .face { margin-left: -10px; }
.crowd .face { box-shadow: 0 0 0 3px var(--card); }

/* the stack of 4 cards */
.front { padding-top: 8px; }
.slide { background: var(--card); border-radius: 28px; box-shadow: var(--sh); padding: 22px 20px 20px; display: none; min-height: 380px; flex-direction: column; }
.slide.on { display: flex; animation: slidein 0.28s cubic-bezier(.2,.9,.3,1) both; }
@keyframes slidein { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
.caps { font-size: var(--f-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hn { margin: 4px 0 0; font-size: 2.375rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; overflow-wrap: break-word; }
.ttl { margin: 6px 0 0; font-size: var(--f-xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.grow { flex: 1 1 auto; }
.facts { margin-top: 18px; display: flex; flex-direction: column; }
.fact { display: flex; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--inline); }
.fact .fi { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--sunk); display: flex; align-items: center; justify-content: center; }
.fact .ft { flex: 1 1 auto; min-width: 0; font-size: var(--f-md); font-weight: 800; }
.fact .ft small { display: block; font-size: var(--f-sm); font-weight: 600; color: var(--muted); }
.tag { color: var(--cashtag); font-weight: 800; }
.hush { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: var(--f-sm); font-weight: 700; color: var(--dim); }
.hush svg { flex-shrink: 0; }
.navrow { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.dots { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--dashed); transition: width 0.25s ease; }
.dots i.on { width: 22px; background: var(--ink); }
.navrow .btn { flex-shrink: 0; min-height: 50px; padding: 0 26px; font-size: 1rem; }
.navrow .ghost { background: none; color: var(--muted); padding: 0 10px; min-height: 44px; }

/* the ring (shape only, never a digit before approval) */
.goal { display: flex; gap: 16px; align-items: center; margin-top: 18px; }
.ring { position: relative; flex-shrink: 0; width: 116px; height: 116px; }
.ring > svg { width: 116px; height: 116px; }
.ring .in svg { width: 28px; height: 28px; }
.ring .in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.gside { flex: 1 1 auto; min-width: 0; }
.gl { font-size: var(--f-sm); font-weight: 700; color: var(--muted); }
.gv { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 10px; overflow-wrap: break-word; }

/* rows */
.rows { display: flex; flex-direction: column; margin-top: 12px; }
.row { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 0; border-bottom: 1px solid var(--inline); }
.row:last-child { border-bottom: 0; }
.row .main { flex: 1 1 auto; min-width: 0; }
.row .t { font-size: var(--f-md); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { font-size: var(--f-sm); font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.datec { flex-shrink: 0; width: 46px; border-radius: 10px; overflow: hidden; text-align: center; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.datec .m { display: block; background: var(--sunk); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); padding: 2px 0; }
.datec .d { display: block; font-size: 0.9375rem; font-weight: 800; line-height: 1.6; }
.rules { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rules li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--f-md); font-weight: 700; }
.rules li i { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; background: var(--sunk); font-style: normal; font-size: var(--f-xs);
  font-weight: 800; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.rules li span { min-width: 0; overflow-wrap: break-word; }
.fine { margin: 16px 0 0; padding: 14px 16px; border-radius: 18px; border: 2px dashed var(--dashed); font-size: var(--f-sm); font-weight: 700; color: var(--muted); }

/* cards */
.card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh); padding: 18px; margin-top: 14px; }
.kh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kh .caps { flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh .side { flex-shrink: 0; font-size: var(--f-sm); font-weight: 700; color: var(--dim); }
.state { text-align: center; padding: 26px 20px 22px; }
.state h1 { margin: 12px 0 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; overflow-wrap: break-word; }
.state p { margin: 8px 0 0; font-size: var(--f-md); font-weight: 700; color: var(--muted); }
.state .pic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--sunk); margin-top: 4px; }
.stamp { display: inline-block; margin-top: 4px; color: var(--stamp); border: 3px double var(--stamp); border-radius: 8px; padding: 2px 14px;
  font-size: 1.25rem; font-weight: 800; letter-spacing: 0.14em; transform: rotate(-6deg); }
.stamp.wait { color: var(--muted); border-color: var(--muted); }
.note { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--sky); color: var(--sky-ink); font-size: var(--f-sm); font-weight: 700; }
.warn { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; border: 2px dashed var(--dashed); color: var(--muted); font-size: var(--f-sm); font-weight: 700;
  display: flex; align-items: center; gap: 10px; }
.warn > span { flex: 1 1 auto; min-width: 0; }
.warn .btn { flex-shrink: 0; min-height: 36px; padding: 0 14px; font-size: var(--f-sm); }
.skel { background: linear-gradient(90deg, var(--sunk), var(--inline), var(--sunk)); background-size: 200% 100%; border-radius: 10px; animation: shimmer 1.4s linear 4; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* the sheet */
.scrim { position: fixed; inset: 0; z-index: 40; background: #B9B4AB; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.scrim.show { opacity: 0.75; pointer-events: auto; }
.sheet { color: var(--ink); position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; background: var(--bg);
  border-radius: 32px 32px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); transform: translateY(105%);
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1); box-shadow: 0 -10px 40px -10px rgba(22,21,15,0.35); }
.sheet.show { transform: none; }
.sheet:not(.show) { visibility: hidden; transition-property: transform, visibility; transition-delay: 0s, 0.3s; }
@media (min-width: 700px) { .sheet { left: 50%; right: auto; width: 460px; transform: translate(-50%, 105%); } .sheet.show { transform: translate(-50%, 0); } }
.handle { width: 40px; height: 5px; border-radius: 3px; background: var(--dashed); margin: 0 auto 14px; }
.sheet h2 { margin: 0; font-size: var(--f-xl); font-weight: 800; letter-spacing: -0.02em; outline: none; overflow-wrap: break-word; }
.sheet .sub { margin: 4px 0 0; font-size: var(--f-md); font-weight: 700; color: var(--muted); }
.pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.pk { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border: 0; cursor: pointer; border-radius: 20px;
  background: var(--card); box-shadow: var(--sh); min-width: 0; min-height: 44px; }
.pk .n { font-size: var(--f-md); font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk .r { font-size: var(--f-xs); font-weight: 700; color: var(--dim); }
.pk:disabled { cursor: default; opacity: 0.55; }
.field { display: flex; align-items: center; gap: 8px; min-height: 54px; margin-top: 14px; padding: 0 16px; border-radius: var(--r-field); background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line); }
.field:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.field input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--f-lg); font-weight: 700; color: var(--ink); }
.field label { flex-shrink: 0; font-size: var(--f-sm); font-weight: 800; color: var(--muted); }
.dob { display: flex; gap: 8px; margin-top: 14px; }
.dob .field { margin-top: 0; flex: 1 1 0; min-width: 0; padding: 0 12px; }
.dob .field.y { flex: 1.4 1 0; }
.echo { margin: 10px 2px 0; min-height: 20px; font-size: var(--f-md); font-weight: 700; color: var(--muted); }
.echo.ok { color: var(--stamp); }
.echo.bad { color: var(--neg); }
.code { display: flex; gap: 8px; margin-top: 20px; }
.code input { flex: 1 1 0; min-width: 0; max-width: 54px; height: 60px; border: 0; border-radius: 14px; text-align: center; font: inherit;
  font-size: 1.625rem; font-weight: 800; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); }
.code input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ink); }
.ts { margin-top: 14px; min-height: 0; }
.consent { margin: 14px 2px 0; font-size: var(--f-sm); font-weight: 700; color: var(--muted); }
.consent a { color: var(--ink); }
.toast { position: fixed; z-index: 50; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translate(-50%, -160%); transition: transform 0.3s ease;
  background: var(--ink); color: #FFF; border-radius: 22px; padding: 12px 20px; font-size: var(--f-md); font-weight: 800; max-width: calc(100% - 32px);
  text-align: center; width: max-content; }
.toast.show { transform: translate(-50%, 0); }
.toast:not(.show) { visibility: hidden; transition-property: transform, visibility; transition-delay: 0s, 0.3s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ============================================================================
   /b, the member board (docs/HOUSE_BOARD_SPEC.md S3). The desk follows the
   house's look (Fridge, Cork, Chalk, Paper); money cards are white in every
   look. Rows: one child shrinks, the rest hold. Sizes in rem (zoom, Dynamic Type).
   ========================================================================== */
body[data-look] { background-color: var(--desk-base, var(--bg)); background-image: var(--desk-tex), var(--desk); color: var(--desk-ink); }
body[data-look="paper"] { --desk-base: #FBF8F2; --desk: linear-gradient(#FBF8F2, #FBF8F2); --desk-ink: #16150F; --desk-soft: #5A544A;
  --desk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tape: rgba(232,222,198,0.85); }
body[data-look="fridge"] { --desk-base: #EEF1F1; --desk: linear-gradient(165deg, #FFFFFF 0%, #F1F3F3 45%, #E7EBEB 100%); --desk-ink: #1F2A3A; --desk-soft: #4E5868;
  --desk-tex: none; --mag: #E05A47; }
body[data-look="cork"] { --desk-base: #C29A6B; --desk: linear-gradient(#C29A6B, #BC9363); --desk-ink: #16150F; --desk-soft: #2B1F10;
  --desk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .08 0 0 0 1.4 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mag: #C8352B; }
body[data-look="chalk"] { --desk-base: #26332D; --desk: radial-gradient(120% 60% at 30% 10%, #33443B 0%, #26332D 55%, #1E2924 100%); --desk-ink: #F3F0E7; --desk-soft: #C3CCC4;
  --desk-tex: none; --tape: rgba(255,255,255,0.55); --focus: #F6E2A6; }
body[data-look] .brand, body[data-look] .barlink { color: var(--desk-soft); }

/* head: house name + me */
.bhead { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.bname { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--hand); font-weight: 400; -webkit-text-stroke: 0.8px currentColor; font-size: var(--f-name); line-height: 1.08; color: var(--desk-ink);
  overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-look="cork"] .bname { flex: 0 1 auto; background: #FFFFFF; color: #16150F; padding: 6px 12px 2px; transform: rotate(-1.5deg); box-shadow: 0 8px 14px -8px rgba(0,0,0,0.45); font-size: 1.75rem; }
body[data-look="cork"] .bhead .bgap { flex: 1 1 auto; }
.me { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; }
.me .face { width: 40px; height: 40px; font-size: 1rem; box-shadow: 0 0 0 3px rgba(255,255,255,0.85); }
.me .mn { max-width: 72px; font-size: var(--f-xs); font-weight: 800; color: var(--desk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsub { margin: 6px 2px 0; font-size: var(--f-md); font-weight: 700; color: var(--desk-soft); }
.switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.switch button { flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.72); color: #16150F; font-size: var(--f-sm); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1.5px rgba(22,21,15,0.12); }
.switch button[aria-pressed="true"] { background: #16150F; color: #FFFFFF; box-shadow: none; }
body[data-look="chalk"] .switch button { background: rgba(255,255,255,0.12); color: var(--desk-ink); }
body[data-look="chalk"] .switch button[aria-pressed="true"] { background: #F3F0E7; color: #16150F; }

/* section labels on the desk */
.bsec { margin: 26px 2px 10px; font-size: var(--f-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--desk-soft); }

/* money cards: white, ink, identical in every look */
.money { position: relative; margin-top: 14px; background: #FFFFFF; color: #16150F; border-radius: 22px; padding: 16px;
  box-shadow: 0 1px 0 rgba(22,21,15,0.06), 0 14px 26px -16px rgba(22,21,15,0.45); }
.money .caps { color: #5A544A; }
.mtop { display: flex; align-items: flex-start; gap: 12px; }
.mtop .mm { flex: 1 1 auto; min-width: 0; }
.mgoal { margin-top: 2px; font-size: var(--f-md); font-weight: 800; overflow-wrap: break-word; }
.amt { margin-top: 4px; font-size: var(--f-amt); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; white-space: nowrap; }
.dchip { flex-shrink: 0; width: 50px; border-radius: 10px; overflow: hidden; text-align: center; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #16150F; }
.dchip .mo { display: block; background: #16150F; color: #FFFFFF; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; padding: 2px 0; }
.dchip .dy { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.4; }
.prog { position: relative; height: 10px; margin-top: 14px; border-radius: 999px; background: #EEE9E0; overflow: hidden; }
.prog i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #16150F; }
.mline { margin-top: 8px; font-size: var(--f-md); font-weight: 700; color: #5A544A; overflow-wrap: break-word; }
.mline b { color: #16150F; font-weight: 800; }
.paybtn { width: 100%; margin-top: 14px; min-height: 52px; border-radius: 16px; font-size: var(--f-lg); padding: 0 12px; text-align: center; }
.house { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #CFC7B8; }
.house .miniring { flex-shrink: 0; width: 44px; height: 44px; }
.house .miniring svg { width: 44px; height: 44px; display: block; }
.house .ht { flex: 1 1 auto; min-width: 0; font-size: var(--f-sm); font-weight: 700; color: #5A544A; }
.house .ht b { display: block; color: #16150F; font-size: var(--f-md); font-weight: 800; }
.mstamp { position: absolute; right: 16px; top: 18px; pointer-events: none; color: var(--stamp); border: 3px double var(--stamp); border-radius: 8px;
  padding: 1px 10px 0; font-size: 1.375rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.3; transform: rotate(-12deg); background: rgba(255,255,255,0.9); }
.mstamp.wait { color: #5A544A; border-color: #5A544A; }
.mstamp.fresh, .pstamp.fresh { animation: thunk 0.42s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes thunk { 0% { opacity: 0; transform: rotate(-12deg) scale(1.9); } 60% { opacity: 1; transform: rotate(-12deg) scale(0.94); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
.mtext { margin-top: 6px; font-size: var(--f-lg); font-weight: 800; line-height: 1.3; overflow-wrap: break-word; }
.mmeta { margin-top: 4px; font-size: var(--f-sm); font-weight: 700; color: #5A544A; }
.two { display: flex; gap: 8px; margin-top: 14px; }
.two .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 10px; border-radius: 14px; font-size: var(--f-md); text-align: center; line-height: 1.15; }
.doneRow { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.done-line { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--f-md); font-weight: 700; color: #5A544A; }
.mstamp.inl { position: static; flex-shrink: 0; font-size: 1.125rem; transform: rotate(-8deg); }
.door { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 10px; padding: 8px 16px; border: 0; cursor: pointer; text-align: left;
  border-radius: 18px; background: #FFFFFF; color: #16150F; font-size: var(--f-md); font-weight: 800; box-shadow: 0 1px 0 rgba(22,21,15,0.06), 0 10px 22px -16px rgba(22,21,15,0.4);
  text-decoration: none; }
.door .dt { flex: 1 1 auto; min-width: 0; }
.door .dt small { display: block; font-size: var(--f-sm); font-weight: 600; color: #5A544A; }
.door svg { flex-shrink: 0; }

/* white list cards (requests, issues, payments, coming up, info) */
.plain { background: #FFFFFF; color: #16150F; border-radius: 20px; padding: 4px 16px; box-shadow: 0 1px 0 rgba(22,21,15,0.06), 0 12px 24px -18px rgba(22,21,15,0.4); }
.plain + .plain { margin-top: 12px; }
.plain .row { min-height: 56px; }
.plain .row .t { color: #16150F; }
.plain .row .main > .t, .plain .row .main > .s { display: block; }
.row .tr { flex-shrink: 0; font-size: var(--f-md); font-weight: 800; color: #16150F; text-align: right; }
.row .tr small { display: block; font-size: var(--f-xs); font-weight: 700; color: #5A544A; }
.row.tap { cursor: pointer; }
.row .s.full, .row .t.full { white-space: normal; overflow: visible; overflow-wrap: break-word; }
.row .chev { flex-shrink: 0; color: #7A7366; }
.row .sbtn { flex-shrink: 0; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: #16150F; color: #FFFFFF; font-size: var(--f-sm); font-weight: 800; }
.row .sbtn.lt { background: #FFFFFF; color: #16150F; box-shadow: inset 0 0 0 1.5px #16150F; }
.row .ic, .lockline .ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: #F0EBE1; display: flex; align-items: center; justify-content: center; }
.secret { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.keep { display: flex; align-items: center; gap: 12px; min-height: 60px; border-top: 1px solid #EEE9E0; }
.keep .kt { flex: 1 1 auto; min-width: 0; font-size: var(--f-sm); font-weight: 700; color: #5A544A; }
.keep .kt b { display: block; color: #16150F; font-size: var(--f-md); }
.sw2 { flex-shrink: 0; position: relative; width: 52px; height: 32px; border: 0; border-radius: 999px; background: #A39B8C; cursor: pointer; padding: 0; }
.sw2::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 999px; background: #FFFFFF; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.sw2[aria-checked="true"] { background: #16150F; }
.sw2[aria-checked="true"]::after { transform: translateX(20px); }
.lockline { display: flex; align-items: center; gap: 12px; min-height: 68px; }
.lockline .lt { flex: 1 1 auto; min-width: 0; font-size: var(--f-md); font-weight: 800; }
.lockline .lt small { display: block; font-size: var(--f-sm); font-weight: 700; color: #5A544A; }
.lockline .sbtn { flex-shrink: 0; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; background: #16150F; color: #FFFFFF; font-size: var(--f-sm); font-weight: 800; }

/* the house: notes pinned on the desk */
.pins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-top: 8px; }
.pin { position: relative; min-width: 0; min-height: 112px; padding: 16px 12px 12px; color: #16150F; border-radius: var(--r-note); box-shadow: var(--sh-note); display: flex; flex-direction: column; }
.pin.wide { grid-column: 1 / -1; }
.pins > .pin:nth-child(4n+1) { transform: rotate(-1.2deg); }
.pins > .pin:nth-child(4n+2) { transform: rotate(1deg); }
.pins > .pin:nth-child(4n+3) { transform: rotate(0.8deg); }
.pins > .pin:nth-child(4n) { transform: rotate(-0.9deg); }
.pins > .pin.wide { transform: rotate(-0.4deg); }
.pin.butter { background: var(--butter); --ni: var(--butter-ink); }
.pin.sky { background: var(--sky); --ni: var(--sky-ink); }
.pin.blush { background: var(--blush); --ni: var(--blush-ink); }
.pin.white { background: #FFFFFF; --ni: #16150F; }
.pt { display: block; text-wrap: balance; font-family: var(--hand); font-weight: 400; -webkit-text-stroke: 0.6px currentColor; paint-order: stroke fill; font-size: var(--f-note); line-height: 1.08; color: var(--ni); overflow-wrap: break-word; }
.pt.sm { font-size: 1.25rem; }
.pt.xs { font-size: 1.125rem; line-height: 1.12; }
.pb { display: block; margin-top: 6px; font-size: var(--f-sm); font-weight: 700; line-height: 1.3; color: #16150F; overflow-wrap: break-word; }
.pb .you { display: inline-block; background: #16150F; color: #FFFFFF; border-radius: 6px; padding: 0 6px; margin-right: 1px; }
.pgrow { flex: 1 1 auto; }
.pin .pact { margin-top: 10px; width: 100%; min-height: 44px; border: 0; border-radius: 12px; cursor: pointer; background: #16150F; color: #FFFFFF; font-size: var(--f-sm); font-weight: 800; padding: 0 8px; }
.pin .pact.lt { background: rgba(255,255,255,0.85); color: #16150F; box-shadow: inset 0 0 0 1.5px #16150F; }
.pin .plink { margin-top: 6px; align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: #16150F; font-size: var(--f-sm); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.pin .opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* A choice, not an action: every option looks the same until it's yours. */
.pin .opts button { flex: 1 1 calc(50% - 6px); min-width: 0; min-height: 44px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,0.85); color: #16150F;
  box-shadow: inset 0 0 0 1.5px #16150F; font-size: var(--f-sm); font-weight: 800; padding: 4px 10px; overflow-wrap: break-word; line-height: 1.15;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 120ms ease, color 120ms ease, transform 80ms ease; }
.pin .opts button:active { transform: scale(0.97); }
.pin .opts button[aria-pressed="true"] { background: #16150F; color: #FFFFFF; box-shadow: none; }
.pin .plist { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pin .plist li { font-size: var(--f-sm); font-weight: 800; overflow-wrap: break-word; }
.pin .pstamp { position: static; align-self: flex-start; margin-top: 8px; pointer-events: none; color: var(--stamp); border: 3px double var(--stamp); border-radius: 8px; padding: 0 8px; font-size: 1rem; font-weight: 800; letter-spacing: 0.12em;
  transform: rotate(-10deg); background: rgba(255,255,255,0.7); }
.pin.done .pt, .pin.done .pb { opacity: 0.5; }
.fix { position: absolute; left: 50%; top: -8px; width: 46px; height: 16px; transform: translateX(-50%) rotate(-3deg); pointer-events: none; background: var(--tape, rgba(232,222,198,0.85)); box-shadow: 0 1px 1px rgba(0,0,0,0.05); }
body[data-look="fridge"] .fix { top: -9px; width: 20px; height: 20px; border-radius: 999px; transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.75) 0 18%, transparent 40%), var(--mag); box-shadow: 0 4px 6px -2px rgba(0,0,0,0.4); }
body[data-look="cork"] .fix { top: -5px; width: 14px; height: 14px; border-radius: 999px; transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7) 0 20%, transparent 42%), var(--mag); box-shadow: 2px 5px 4px -2px rgba(0,0,0,0.5); }
.broke { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; min-height: 52px; border-radius: 16px; border: 2px dashed currentColor;
  background: transparent; cursor: pointer; color: var(--desk-ink); font-size: var(--f-md); font-weight: 800; padding: 0 12px; }
body[data-look="cork"] .broke { background: rgba(255,255,255,0.65); color: #16150F; border-color: rgba(22,21,15,0.55); }

/* record states (moved out, closed) */
.rec h1 { margin: 0; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: break-word; }
.rec p { margin: 8px 0 0; font-size: var(--f-md); font-weight: 700; color: #5A544A; }

/* the receipt (house money, D12: totals only, never a person) */
.rcpt { padding: 10px 16px; }
.rcpt .rl { display: flex; align-items: baseline; gap: 12px; min-height: 36px; font-size: var(--f-md); font-weight: 700; color: #5A544A; }
.rcpt .rl span:first-child { flex: 1 1 auto; min-width: 0; }
.rcpt .rl span:last-child { flex-shrink: 0; color: #16150F; font-weight: 800; }
.rcpt .rule { border-top: 2px dashed #CFC7B8; margin: 6px 0; }
.rcpt .rl.big span:last-child { font-size: var(--f-xl); letter-spacing: -0.02em; }

/* sheets on the board */
.opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; margin-top: 12px; padding: 12px 16px; border: 0; border-radius: 18px; cursor: pointer; text-align: left;
  background: #FFFFFF; color: #16150F; box-shadow: var(--sh); }
.opt .ot { flex: 1 1 auto; min-width: 0; font-size: var(--f-lg); font-weight: 800; }
.opt .ot small { display: block; margin-top: 2px; font-size: var(--f-sm); font-weight: 700; color: #5A544A; }
.opt svg { flex-shrink: 0; }
.field textarea { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--f-lg); font-weight: 700; color: var(--ink); resize: none; padding: 14px 0; min-height: 96px; }
.field .pre { flex-shrink: 0; font-size: var(--f-xl); font-weight: 800; color: var(--muted); }
.field input.big { font-size: var(--f-xl); font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips button { flex: 1 1 calc(50% - 8px); min-width: 0; min-height: 48px; border: 0; border-radius: 14px; cursor: pointer; background: #FFFFFF; color: #16150F; font-size: var(--f-md); font-weight: 800;
  box-shadow: inset 0 0 0 1.5px var(--line); }
.chips button[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px #16150F; }
.lbl { display: block; margin: 18px 2px 0; font-size: var(--f-sm); font-weight: 800; color: var(--muted); }
.lbl + .field { margin-top: 8px; }
.photo { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.photo img { flex-shrink: 0; width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.photo .pt2 { flex: 1 1 auto; min-width: 0; font-size: var(--f-sm); font-weight: 700; color: var(--muted); }
.photo .sbtn { flex-shrink: 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: #FFFFFF; color: #16150F; box-shadow: inset 0 0 0 1.5px #16150F; font-size: var(--f-sm); font-weight: 800; }
.filebtn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 12px; border-radius: 16px; cursor: pointer;
  background: #FFFFFF; color: #16150F; box-shadow: inset 0 0 0 1.5px #16150F; font-size: var(--f-md); font-weight: 800; overflow: hidden; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.filebtn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.steps { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: flex; align-items: center; gap: 12px; font-size: var(--f-md); font-weight: 700; }
.steps li i { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: #16150F; color: #FFFFFF; font-style: normal; font-size: var(--f-sm); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.steps li span { flex: 1 1 auto; min-width: 0; }
.steps li svg { flex-shrink: 0; }
.empty { text-align: center; padding: 28px 20px; }
.empty .pic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: #F0EBE1; }
.empty h2 { margin: 10px 0 0; font-size: var(--f-xl); font-weight: 800; line-height: 1.2; }
.empty p { margin: 8px 0 0; font-size: var(--f-md); font-weight: 700; color: #5A544A; }
.foot { margin-top: 26px; display: flex; flex-direction: column; align-items: center; }
.foot .linkb { color: var(--desk-ink); }
/* zoomed in (200%) or a very narrow phone: notes stack, buttons get the whole line */
@media (max-width: 330px) {
  .pins { grid-template-columns: minmax(0, 1fr); }
  .two { flex-direction: column; }
  .mtop { flex-wrap: wrap; }
  .lockline, .keep { flex-wrap: wrap; padding: 8px 0; }
  .door .dt small { overflow-wrap: break-word; }
}
.skel.dk { background: linear-gradient(90deg, rgba(255,255,255,0.45), rgba(255,255,255,0.75), rgba(255,255,255,0.45)); background-size: 200% 100%; }
/* ============================================================================
   /b paying (S4, board-pay.js): one sheet. Amount, who pays the fee, Stripe's
   Payment Element (wallets + card), one Pay button, the plain legal lines.
   Every async block holds its place (skeleton → real, no reflow).
   ========================================================================== */
.paysheet .field input.big { font-size: var(--f-xl); }
.feebox { margin-top: 6px; min-height: 44px; }
.feeline { margin: 8px 2px 0; font-size: var(--f-md); font-weight: 700; color: var(--muted); overflow-wrap: break-word; }
.fees { display: flex; gap: 8px; margin-top: 8px; }
.fc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 76px; padding: 12px; border: 0; border-radius: 16px;
  cursor: pointer; text-align: left; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.fc[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--ink); }
.fees .fcs-skel { flex: 1 1 0; min-width: 0; height: 76px; border-radius: 16px; }
.fc .fct { font-size: var(--f-md); font-weight: 800; line-height: 1.2; overflow-wrap: break-word; }
.fc .fcs { font-size: var(--f-sm); font-weight: 700; color: var(--muted); line-height: 1.3; overflow-wrap: break-word; }
.pewrap { position: relative; margin-top: 16px; min-height: 176px; }
.pewrap .peskel { position: absolute; inset: 0; }
.pewrap.on .peskel { display: none; }
.pewrap .pe { position: relative; }
.paygo { margin-top: 16px; }
.perr { margin-top: 14px; padding: 16px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.perr .perl { margin: 0; font-size: var(--f-lg); font-weight: 800; line-height: 1.3; overflow-wrap: break-word; }
.perr .cta { margin-top: 14px; }
.perr .lbl:first-of-type { margin-top: 14px; }
.legal { margin-top: 14px; }
.legal p { margin: 6px 2px 0; font-size: var(--f-sm); font-weight: 700; color: var(--muted); line-height: 1.4; overflow-wrap: break-word; }
.legal p b { color: var(--ink); font-weight: 800; }
.inl { display: inline; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font: inherit; font-weight: 800; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; min-height: 0; }
.agreetext { margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.agreetext h3 { margin: 0 0 6px; font-size: var(--f-md); font-weight: 800; }
.agreetext p, .agreetext li { margin: 8px 0 0; font-size: var(--f-sm); font-weight: 600; color: var(--muted); line-height: 1.45; }
.agreetext b { color: var(--ink); font-weight: 800; }
.agreetext ul { margin: 6px 0 0; padding-left: 18px; }
.agreetext .ver { font-size: var(--f-xs); color: var(--dim); }
.phone { margin-top: 14px; }
.phone > p { margin: 0 2px; font-size: var(--f-sm); font-weight: 700; color: var(--muted); }
.qr { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.qr img { flex-shrink: 0; width: 168px; height: 168px; }
.qr p { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--f-md); font-weight: 700; color: var(--muted); }
.opt.another { min-height: 64px; margin-top: 18px; }
/* the part card while a card payment is on its way: the Pay button's footprint */
.onway { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; min-height: 52px; padding: 0 14px; border-radius: 16px;
  background: #F0EBE1; color: #16150F; font-size: var(--f-md); font-weight: 800; }
.onway .ow { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; line-height: 1.25; padding: 6px 0; }
.onway .dotp { flex-shrink: 0; width: 10px; height: 10px; border-radius: 999px; background: #16150F; animation: owpulse 1.2s ease-in-out 12; }
@keyframes owpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.apay { margin-top: 10px; }
@media (max-width: 330px) { .fees { flex-direction: column; } .qr { flex-direction: column; align-items: flex-start; } }
/* ============================================================================
   /b Promise (§3n, board-promise.js): Promise big + one small line, the promise
   that's yours (a row that opens it), locked after the fill, a card to fix.
   The bar: solid = paid, outlined = promised (PAY_NOW R2).
   ========================================================================== */
.prog i.pr { background: repeating-linear-gradient(135deg, #16150F 0 2px, #FFFFFF 2px 6px); box-shadow: inset 0 0 0 1.5px #16150F; border-radius: 999px; }
.prom-small { margin-top: 10px; font-size: var(--f-sm); }
.prom-instead { margin-top: 2px; }
.prom-row { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 16px;
  cursor: pointer; text-align: left; background: #F6F2EA; color: #16150F; }
.prom-row:disabled { cursor: default; }
.prom-row:disabled svg { display: none; }
.prom-row .pr-t { flex: 1 1 auto; min-width: 0; }
.prom-row .pr-t b { display: block; font-size: var(--f-md); font-weight: 800; line-height: 1.3; overflow-wrap: break-word; }
.prom-row .pr-t small { display: block; margin-top: 2px; font-size: var(--f-sm); font-weight: 700; color: #5A544A; overflow-wrap: break-word; }
.prom-row svg { flex-shrink: 0; }
.prom-lock { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: #F6F2EA;
  font-size: var(--f-sm); font-weight: 700; color: #5A544A; }
.prom-lock svg { flex-shrink: 0; margin-top: 1px; }
.prom-lock span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.prom-lock b { display: block; color: #16150F; font-size: var(--f-md); font-weight: 800; margin-bottom: 2px; }
.prom-today { margin-top: 14px; padding: 2px 16px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.prom-today .pt-row { display: flex; align-items: center; gap: 12px; min-height: 46px; font-size: var(--f-md); font-weight: 700; color: var(--muted); }
.prom-today .pt-row + .pt-row { border-top: 1px solid var(--inline); }
.prom-today .pt-row span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.prom-today .pt-row b { flex-shrink: 0; color: var(--ink); font-size: var(--f-lg); font-weight: 800; }
.prom-add { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  text-align: left; font-size: var(--f-sm); font-weight: 700; color: var(--muted); }
.prom-add .pa-box { flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--dim); display: flex; align-items: center; justify-content: center; }
.prom-add[aria-checked="true"] { color: var(--ink); }
.prom-add[aria-checked="true"] .pa-box { background: var(--ink); box-shadow: none; }
.prom-add .pa-t { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.prom-sep { height: 0; margin: 24px 0 0; border-top: 2px dashed var(--dashed); }
.prom-hold { position: relative; overflow: hidden; width: 100%; min-height: 52px; margin-top: 20px; border: 0; border-radius: 18px; cursor: pointer;
  background: var(--card); color: var(--neg); box-shadow: inset 0 0 0 2px var(--neg); font-size: var(--f-lg); font-weight: 800;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.prom-hold i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #F6D8D3; transition: width 0s; }
.prom-hold.on i { width: 100%; transition: width 1.6s linear; }
.prom-hold b { position: relative; font-weight: 800; }
.prom-hold.done i { width: 100%; background: var(--neg); }
.prom-hold.done b { color: #FFFFFF; }
.prom-hold:disabled { cursor: default; }
.legal-line { margin: 10px 2px 0; font-size: var(--f-sm); font-weight: 700; color: var(--muted); overflow-wrap: break-word; }

/* ---- the dashboard: one board, two shapes ------------------------------------------
   Phone: d1 your money → d2 the house → d3 info → d4 the record, top to bottom.
   Wide: the same four groups side by side, nothing hidden, nothing moved between groups. */
@media (min-width: 760px) {
  .wrap:has(.dash) { max-width: 1000px; padding-left: 24px; padding-right: 24px; }
  .dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "c b" "d b"; grid-template-rows: auto auto 1fr;
    column-gap: 28px; align-items: start; margin-top: 18px; }
  .d1 { grid-area: a; } .d2 { grid-area: b; } .d3 { grid-area: c; } .d4 { grid-area: d; }
  .d1 > :first-child, .d2 > :first-child { margin-top: 0; }
  /* the money card has its label inside it: start it where the other columns' first card starts */
  .d1 { padding-top: calc(var(--f-xs) * 1.4 + 10px); }
}
@media (min-width: 1100px) {
  .wrap:has(.dash) { max-width: 1240px; padding-left: 32px; padding-right: 32px; }
  .dash { grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 320px); grid-template-areas: "a b c" "d b c"; grid-template-rows: auto 1fr; column-gap: 32px; }
  .d3 > :first-child { margin-top: 0; }
  /* the side column is narrow: a long line wraps to two instead of losing its end */
  .d3 .row .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* "To do now" view (board.js renderNext): bills / to do / coming up. A phone stacks
   them; 760+ puts bills with coming up under it on the left, the notes on the right;
   1100+ is three across. A column with nothing in it isn't drawn (.nob / .noc). */
.ndash .pins { margin-top: 22px; }
.ndash .bsec + .pins { margin-top: 8px; }
.nall { max-width: 420px; margin: 8px auto 0; }
.allset h2 { margin-bottom: 0; }
.ncoming .row .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (min-width: 760px) {
  .wrap:has(.ndash) { max-width: 1000px; padding-left: 24px; padding-right: 24px; }
  .ndash { display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: "bills todo" "coming todo"; grid-template-rows: auto 1fr; column-gap: 28px; align-items: start; }
  .ndash > .nc { min-width: 0; }
  .nbills { grid-area: bills; } .ntodo { grid-area: todo; } .ncoming { grid-area: coming; }
  .ndash.nob { grid-template-areas: "coming todo"; grid-template-rows: auto; }
  .ndash.noc { grid-template-areas: "bills todo"; grid-template-rows: auto; }
  .ndash.nob.noc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "todo"; }
}
@media (min-width: 1100px) {
  .wrap:has(.ndash) { max-width: 1240px; padding-left: 32px; padding-right: 32px; }
  .ndash { grid-template-columns: 340px minmax(0, 1fr) 320px; grid-template-areas: "bills todo coming"; grid-template-rows: auto; column-gap: 32px; }
  .ndash.nob { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "todo coming"; }
  .ndash.noc { grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "bills todo"; }
}