/* The Well — painted by the block.
   Deep AfriCOBRA jewel pigment (brick, marigold, garden, cobalt, grape, raspberry)
   knocked back to live on warm cream paper, anchored by soft charcoal, all of it
   floating on a Takuma navy night ground. Geometry is intentional, never confetti:
   it marks function — category, picked, rank, the funded line, a section's edge. */

@font-face { font-family: 'Ciscela';
  src: url("/assets/Ciscela-Regular-21d9af5f.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* the night ground */
  --navy:    #0A152B;
  --navy-2:  #102545;
  --onnavy:  #F4ECD8;   /* cream text on navy */
  --slate:   #9CADC2;   /* muted text on navy */

  /* paper + charcoal — the warm register */
  --cream:   #FAF5E9;
  --cream-2: #F0E7D2;   /* recessed / picked face */
  --sand:    #E4D6B4;
  --black:   #1C1714;   /* soft charcoal — lines, type, anchor */
  --ink:     #241C14;   /* body text on paper */
  --stone:   #6E635A;   /* secondary text on paper */
  --line:    rgba(28, 23, 20, .26);
  --hairline: rgba(244, 236, 216, .18);   /* ruled lines on navy */

  /* grounded AfriCOBRA — each hue has a job */
  --violet:  #553781;   /* grape — payoff, shapes */
  --cobalt:  #245C8C;   /* civic, water */
  --teal:    #2A7268;   /* backers */
  --green:   #2E6649;   /* garden — picked, services */
  --yellow:  #DB972A;   /* marigold — events, totals, new */
  --orange:  #BE5328;   /* burnt orange — warm accent */
  --magenta: #9A3354;   /* raspberry — other, eyebrows */
  --red:     #A93F2B;   /* brick — places, the well's own color */

  /* water, light to deep — the funded layers */
  --water-1: #3E84B0; --water-2: #2A6699; --water-3: #1C4B73;
  --water-4: #163D5E; --water-5: #102E48;

  --soft:      0 14px 30px -16px rgba(22, 17, 13, .5), 0 5px 12px -8px rgba(22, 17, 13, .3);
  --soft-lift: 0 24px 46px -18px rgba(22, 17, 13, .56), 0 8px 16px -10px rgba(22, 17, 13, .34);

  --display: 'Ciscela', Georgia, 'Times New Roman', serif;
  --body: Helvetica, Arial, sans-serif;

  /* surface-aware text: navy ground by default, flipped on paper */
  --t-text:    var(--onnavy);
  --t-muted:   var(--slate);
  --t-head:    var(--onnavy);
  --t-eyebrow: var(--yellow);
}

/* paper surfaces — anything cream flips the text register to charcoal */
.deck__face, .flatcard, .card, .budget, dialog.sheet, .desktop {
  --t-text:    var(--ink);
  --t-muted:   var(--stone);
  --t-head:    var(--black);
  --t-eyebrow: var(--magenta);
  color: var(--t-text);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { color: var(--t-text); font-family: var(--body); line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
  background:
    url("/assets/fabric-dark-fdd85efc.png") repeat,
    radial-gradient(110% 70% at -10% 108%, rgba(42, 114, 104, .26), transparent 55%),
    var(--navy);
  background-size: 220px auto, auto, auto; }
img { max-width: 100%; }
a { color: inherit; }

/* a breath of night over the tippy top — content scrolls clean off the screen
   through a slight fade instead of a hard edge */
body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 58;
  height: calc(22px + env(safe-area-inset-top)); pointer-events: none;
  background: linear-gradient(to bottom, var(--navy) calc(20% + env(safe-area-inset-top)), transparent); }

/* faint paper tooth over everything */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; }

/* ---- the app shell ----
   A phone-first product: one column, full width on mobile, centered on desktop. */
.app { max-width: 480px; margin: 0 auto;
  padding: calc(42px + env(safe-area-inset-top)) 20px 44px;
  min-height: 100dvh; display: flex; flex-direction: column; }
.app--tabbed { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

/* flash messages — a marigold stamp that rises, says its piece, and goes */
#flash { position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  width: calc(100% - 24px); max-width: 440px; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; bottom: calc(12px + env(safe-area-inset-bottom)); }
#flash.is-docked { bottom: calc(104px + env(safe-area-inset-bottom)); }
.flash { background: var(--yellow); color: var(--black); font-size: 14px; font-weight: 700;
  padding: 12px 14px; text-align: center; pointer-events: auto; cursor: pointer;
  border: 2px solid var(--black); box-shadow: 3px 3px 0 var(--black);
  animation: flash-in .28s ease-out; transition: opacity .35s ease, transform .35s ease; }
.flash--alert { background: var(--red); color: #fff; }
.flash.is-leaving { opacity: 0; transform: translateY(10px); }
@keyframes flash-in { from { opacity: 0; transform: translateY(14px); } }

/* the bottom tab bar, pinned to the viewport */
.apptabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  border-top: 1px solid var(--hairline); background: rgba(13, 26, 51, .96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding-bottom: env(safe-area-inset-bottom); }
.apptabs__inner { max-width: 480px; margin: 0 auto; display: flex; }
.apptab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 0 13px; text-decoration: none; color: var(--slate); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; transition: color .12s ease; }
.apptab__icon { width: 23px; height: 23px; }
.apptab__ava { width: 23px; height: 23px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; }
.apptab__ava--txt { font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.apptab:hover { color: var(--onnavy); }
.apptab.is-on { color: var(--yellow); }

/* admin runs desktop-wide, on its own sheet of paper */
.desktop { max-width: 1020px; margin: 26px auto 40px; padding: 26px 30px 34px;
  background: var(--cream); border-radius: 2px; box-shadow: var(--soft-lift); }

/* ---- type ---- */
h1 { font-family: var(--display); font-size: 32px; line-height: 1.04; font-weight: 400;
  letter-spacing: -.01em; color: var(--t-head); margin-bottom: 10px; }
h2 { font-size: 19px; font-weight: 700; color: var(--t-head); }
h3 { font-size: 15px; font-weight: 700; color: var(--t-head); }
p  { margin-bottom: 10px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--t-eyebrow); margin-bottom: 6px; }
.muted { color: var(--t-muted); }
.small { font-size: 12px; }
.lede  { font-size: 17px; }
.big   { font-size: 22px; font-weight: 800; }

/* ---- layout helpers ---- */
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }
.spacer { flex: 1; }
.divider { border-top: 1px solid var(--hairline); margin: 26px 0; }
.desktop .divider { border-top-color: var(--line); }
.cap { font-size: 11px; color: var(--slate); text-align: center; margin-top: 8px;
  letter-spacing: .04em; }

/* ---- buttons — the punchy control: charcoal line, hard offset shadow ---- */
.btn { display: block; width: 100%; text-align: center; border: 2px solid var(--black);
  background: var(--cream-2); color: var(--black); font-family: var(--body); font-size: 15px;
  font-weight: 700; line-height: 1.2; padding: 13px 18px; text-decoration: none; cursor: pointer;
  position: relative; -webkit-appearance: none; appearance: none; /* same height as <a>, <button>, <input> */
  box-shadow: 3px 3px 0 var(--black);
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, color .12s ease; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--black); }
.btn:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--black); }
.btn--solid { background: var(--magenta); color: var(--cream); }
.btn--solid:hover { background: var(--black); }
.btn--rasp { background: var(--magenta); color: var(--cream); }
.btn--white { background: var(--cream); color: var(--black); }
.btn--gold { background: var(--yellow); color: var(--navy); }
.btn--gold:hover { background: var(--black); color: var(--yellow); }
.btn--ghost { background: transparent; border-color: var(--slate); color: var(--onnavy); box-shadow: none; }
.btn--ghost:hover { transform: none; box-shadow: none; background: rgba(244, 236, 216, .06); }
/* out of play: greyed, not tappable-looking */
.btn:disabled, .btn[disabled] { border-color: #b9b29f; color: #8f887a; background: #ece5d2;
  box-shadow: none; cursor: default; transform: none; }
.btn:focus-visible, .tap:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--yellow); outline-offset: 2px; }

/* text taps — the underline draws in, raspberry */
.tap { font-family: var(--body); font-size: 14px; font-weight: 700; color: inherit;
  background: none; border: 0; cursor: pointer; position: relative; text-decoration: none;
  display: inline-block; }
/* inside running text, a tap is the same size as its sentence */
.small .tap, p .tap { font-size: inherit; }
/* the underline is always there, so a tap reads as a link at rest — not plain
   text; hover just thickens it. */
.tap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--magenta); transition: height .12s ease, bottom .12s ease; }
.tap:hover::after { height: 3.5px; bottom: -4px; }

/* tap-open disclosures (the receipts behind the amount) — our caret, not the browser's */
details > summary.tap { cursor: pointer; list-style: none; }
details > summary.tap::-webkit-details-marker { display: none; }
details > summary.tap::before { content: "▸ "; }
details[open] > summary.tap::before { content: "▾ "; }
details > summary.tap::after { display: none; }
.back { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; margin-bottom: 14px;
  text-decoration: none; color: var(--t-text); }
/* the chevron rides bigger than its label so the back tap reads at a glance and is easy to hit */
.back::before, .pitchbar__back::before, .introback::before {
  content: "‹"; font-size: 1.9em; font-weight: 400; line-height: 0; }
/* a chevron that scales up inside a label without dragging the line-height (e.g. the gold CTA back) */
.bigchev { font-size: 1.5em; line-height: 0; vertical-align: -.08em; }

/* ---- pills / chips — squared, charcoal line, hard offset ---- */
.pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px;
  background: var(--sand); color: var(--black);
  border: 2px solid var(--black); }   /* a status label, not an action — no raised shadow */
.pill--miss { background: transparent; border-color: var(--slate); color: var(--slate);
  box-shadow: none; }   /* a season that's over, not an action item */
.desktop .pill--miss, .flatcard .pill--miss { border-color: var(--stone); color: var(--stone); }
.pill--ok   { background: var(--green); color: #08210f; }   /* geocoded inside the block */
.pill--now  { background: #fff; color: var(--magenta); }   /* the current cycle — white, pops */
.pill--flag { background: var(--yellow); color: var(--black); }   /* needs a human look */
.stamp { font-weight: 800; font-size: 10px; letter-spacing: .09em; color: var(--yellow); }

/* the season tag + the how-a-season-works popup */
.seasontag { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.seasontag .pill { background: var(--yellow); }
.infobtn { width: 22px; height: 22px; border: 2px solid var(--onnavy); border-radius: 50%;
  background: none; color: var(--onnavy); font: inherit; font-size: 12px; font-weight: 800;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; opacity: .75; transition: opacity .12s ease, color .12s ease,
  border-color .12s ease; }
.infobtn:hover { opacity: 1; color: var(--yellow); border-color: var(--yellow); }
dialog.sheet { border: 2.5px solid var(--black); border-radius: 2px; background: var(--cream);
  padding: 20px; width: calc(100% - 32px); max-width: 400px; box-shadow: var(--soft-lift);
  margin: auto; }  /* the global reset zeroes margins; auto restores native modal centering */
dialog.sheet::backdrop { background: rgba(10, 21, 43, .62); }
/* opening a sheet shouldn't stamp a focus ring on its first button */
dialog.sheet:focus-visible, dialog.sheet:focus { outline: none; }
/* chips ride together as one bounded, segmented switch — a control, not loose squares */
.chip { display: inline-block; font-family: var(--body); font-size: 13px; font-weight: 700;
  line-height: 1.2; padding: 8px 16px; text-decoration: none; color: var(--black);
  background: var(--cream-2); border: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .12s ease, color .12s ease; }
.chip + .chip { border-left: 2px solid var(--black); }
.chip:hover { background: var(--magenta); color: #fff; }
.chip.is-on { background: var(--black); color: var(--cream); }
.chips { display: inline-flex; align-self: flex-start; margin-bottom: 16px;
  border: 2px solid var(--black); box-shadow: 3px 3px 0 var(--black); background: var(--cream-2); }

/* ---- forms ---- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  margin-bottom: 6px; }
.input { width: 100%; border: 2px solid var(--black); padding: 12px 13px; font: inherit;
  font-size: 16px; background: var(--cream); color: var(--ink); border-radius: 2px; /* 16px floor so iOS doesn't zoom on focus */
  transition: box-shadow .12s ease; }
.input:focus { outline: none; box-shadow: 3px 3px 0 var(--yellow); }
textarea.input { resize: none; }

/* ===== THE WELL (core element) =====
   A yellow vessel holding clean blue water. Funded = water layers, deepest at the
   bottom; below the cut the vessel sits dry and empty. */

/* the home panel the well lives in — a deeper pool of night, cut from the page */
.wellpanel { position: relative; margin: 4px -20px 0; padding: 24px 20px 16px;
  background: transparent; }   /* the well sits straight on the navy night ground */
.wellpanel__what { display: flex; align-items: center; gap: 9px; margin: 18px -20px -16px;
  padding: 13px 20px; border-top: 1px solid var(--hairline);
  font-size: 13px; font-weight: 700; color: var(--onnavy); text-decoration: none;
  transition: color .12s ease; }
.wellpanel__what:hover { color: var(--yellow); }
.wellpanel__q { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 auto; border: 2px solid currentColor; border-radius: 50%;
  font-size: 11px; font-weight: 800; color: var(--yellow); }
.wellpanel__go { margin-left: auto; font-size: 15px; color: var(--magenta); }

/* header: how much, by when — the one thing a resident needs */
.wellhead { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.wellhead__lede { font-family: var(--display); font-size: 31px; font-weight: 400;
  line-height: 1.08; letter-spacing: -.01em; margin: 0; color: var(--onnavy); }
.wellhead__lede strong { font-weight: 400; color: var(--yellow); }
.wellhead__when { font-size: 15px; color: var(--slate); margin: 10px 0 0; }
.wellhead__when strong { font-weight: 800; color: var(--onnavy); }
.wellhead__amt { font-family: var(--display); font-size: 56px; font-weight: 400; line-height: .95;
  letter-spacing: -.01em; color: var(--yellow); }
.wellhead__sub { font-size: 16px; font-weight: 700; color: var(--onnavy); }
.wellhead__sub strong { color: var(--yellow); }

.well { display: block; }
.well__section { display: flex; gap: 34px; align-items: stretch; }   /* room for the list */
.well__col { width: 62px; flex: 0 0 auto; }                          /* skinny vessel */
/* the vessel: flat water in front of the brick wall — no marigold, no outline */
.well__bar { position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--yellow); border: 2.5px solid var(--black); border-radius: 2px;
  box-shadow: var(--soft); }
.well__bar:not(.well__bar--dry) { background: transparent; border: 0; box-shadow: var(--soft); }
.band { position: relative; background: var(--water-1); }
.band + .band { border-top: 0; }
/* each funded idea is its own pigment, poured in front of the brick */
.band:not(.band--dry):nth-child(5n+1) { background: var(--magenta); }
.band:not(.band--dry):nth-child(5n+2) { background: var(--teal); }
.band:not(.band--dry):nth-child(5n+3) { background: var(--violet); }
.band:not(.band--dry):nth-child(5n+4) { background: var(--green); }
.band:not(.band--dry):nth-child(5n+5) { background: var(--orange); }
/* the undivided pot, before any idea claims it (pitch phase): one blue body of water */
.band.band--pot:not(.band--dry) { background: var(--water-1); }
/* below the cut: a flat grey block, not funded */
.band.band--next:not(.band--dry) { background: #565c66; }
/* TENTATIVE (still voting) — the pigment is poured in stripes; the off-stripes drop to
   low opacity so the brick shows faintly through. Confirmed/closed = solid (no mask). */
.band.band--tentative {
  -webkit-mask: repeating-linear-gradient(-45deg, #000 0 9px, rgba(0,0,0,.4) 9px 18px);
          mask: repeating-linear-gradient(-45deg, #000 0 9px, rgba(0,0,0,.4) 9px 18px); }
/* dry: the empty placeholder vessel (used by the intro's waiting state) */
.well__bar--dry { background: var(--yellow); }
.band--dry { background: transparent; }
.band--dry + .band--dry { border-top: 2px dashed rgba(28, 23, 20, .35); }

/* the well stands against a real brick wall, knocked back to B&W; the panel is cut
   a touch larger than the vessel and nudged so its left edge meets the content margin */
.wellbrick { position: relative; }
.wellbrick::before { content: ""; position: absolute; z-index: 0;
  top: -11px; left: -11px; right: -11px; bottom: -11px;
  background: url("/assets/brick-wall-964b78fd.jpg") top left / 200px auto repeat;
  filter: grayscale(1) contrast(1.05) brightness(.82); box-shadow: var(--soft); }
.wellbrick > * { position: relative; z-index: 1; }

/* the funding cut — full width, greyed: below it is hope, not failure */
.well__cut { display: flex; align-items: center; gap: 12px; margin: 14px 0;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate); }
.well__cut::before, .well__cut::after { content: ""; flex: 1; height: 2px;
  background: rgba(156, 173, 194, .3); }

/* the running tally that sits just above the cut */
.well__subtotal { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 14px 0 0; font-size: 12px; color: var(--slate); }
.well__subtotal strong { font-size: 14px; font-weight: 800; color: var(--onnavy); }
.well__subtotal .of { color: var(--slate); }

/* the standings list — the vote-tab voice without the cards: Ciscela serif titles,
   a tilted charcoal price tag, the vote count, and a right chevron */
.well__labels { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.well__label { position: relative; display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding: 3px 24px 3px 0; border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: var(--onnavy); }
.well__label:last-child { border-bottom: 0; }
.well__label .nm { font-family: var(--display); font-size: 19px; font-weight: 500;
  letter-spacing: 0; line-height: 1.08; color: var(--onnavy); transition: color .1s ease; }
.well__label.is-dry .nm { font-size: 15.5px; color: var(--slate); }
.well__label:hover .nm { color: var(--yellow); }
.wl__meta { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.wl__price { display: inline-block; background: var(--black); color: #fff; font-weight: 800;
  font-size: 12px; padding: 2px 8px; border: 2px solid var(--black);
  box-shadow: 2px 2px 0 var(--black); transform: rotate(-2.5deg); }
/* below the cut: the cost stays quiet — no tag, no pop */
.wl__price--next { background: transparent; color: var(--slate); border: 0; box-shadow: none;
  transform: none; padding: 0; font-weight: 700; }
.wl__votes { font-size: 12.5px; color: var(--slate); }
.wl__chev { position: absolute; right: 2px; top: calc(50% - 6px); width: 9px; height: 9px;
  border-right: 2.5px solid var(--slate); border-top: 2.5px solid var(--slate); transform: rotate(45deg); }

/* pitch: the explainer text beside the well (well on the left, like the other phases) */
.pitchexplain { flex: 1; align-self: center; }
.pitchexplain p { font-size: 21px; line-height: 1.35; color: var(--onnavy); margin-bottom: 14px; }
.pitchexplain p:last-child { margin-bottom: 0; }
.pitchexplain strong { color: var(--yellow); font-weight: 700; }
.well__label .amt { font-size: 11.5px; color: var(--slate); }
.well__label.is-dry .nm { font-weight: 600; color: var(--slate); }
.well__label.is-dry .amt { color: rgba(156, 173, 194, .7); }

/* ===== THE PROPOSAL CARD (core element) =====
   front = story, back = cost. Cream paper, charcoal line, soft drop into the page. */
.card { background: var(--cream); border-radius: 2px; box-shadow: var(--soft); }
.card__face { padding: 20px; }
.card__seam { border-top: 1.5px dashed var(--line); }
.card__title { font-family: var(--display); font-size: 24px; font-weight: 500; line-height: 1.06;
  letter-spacing: 0; margin: 2px 0 9px; color: var(--black); }
/* the review step: name it in place on the card, highlighted as the thing to do */
/* edit-in-place fields look exactly like the card text — click to edit, no boxes,
   no highlight. A faint underline on hover hints it's editable; focus firms it. */
.card__title--edit { display: block; width: 100%; margin: 2px 0 9px; padding: 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; -webkit-appearance: none; cursor: text; }
.cardedit { font: inherit; color: inherit; flex: 1; min-width: 0; padding: 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; -webkit-appearance: none; cursor: text; }
.cardedit--big { font-size: 16px; }
/* the review's editable state: a labelled frame around the card + a greyed placeholder
   cover, so attention falls on the fields rather than a bright colour band */
.editframe { position: relative; border: 2px solid var(--yellow); border-radius: 4px;
  padding: 16px; margin-top: 20px; }
.editframe__tag { position: absolute; top: -10px; left: 14px; padding: 2px 9px;
  background: var(--navy); color: var(--yellow); font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; }
.deck__cover--ph { background: #ada79c; }
.cardedit--why { display: block; width: 100%; flex: none; margin: 0 0 9px; resize: none;
  color: var(--t-muted); }
.card__title--edit:hover, .cardedit:hover { border-bottom-color: var(--line); }
.card__title--edit:focus, .cardedit:focus { outline: none; border-bottom-color: var(--black); }
.card__title--edit::placeholder, .cardedit::placeholder { color: var(--stone); }
.card__story dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--magenta); margin-top: 12px; }
.card__story dd { font-size: 14px; margin: 2px 0 0; }
.card__champion { margin-top: 16px; font-size: 12px; font-weight: 700;
  border-top: 1.5px solid var(--line); padding-top: 10px; }

/* budget (lives inside the card back, and on the vote screen) */
.budget { background: var(--cream-2); border: 2px solid var(--black); border-radius: 2px;
  margin-top: 4px; overflow: hidden; }
.lineitem { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px;
  border-bottom: 1.5px solid var(--line); font-size: 14px; }
.lineitem:last-child { border-bottom: 0; }
.lineitem .amt { font-variant-numeric: tabular-nums; font-weight: 700; }
.lineitem--total { background: var(--black); color: var(--cream); border-bottom: 0; font-weight: 700; }
.lineitem--total .amt { color: var(--yellow); }
/* pitch-stage honesty under the numbers */
.budget__note { margin: 7px 0 0; font-size: 11.5px; color: var(--t-muted); }
/* rough numbers look rough: pencil-grey, dashed, no ink committed yet */
.budget--rough { filter: grayscale(1); background: #EDEAE2; border-style: dashed; }
.budget--rough .lineitem { border-bottom-style: dashed; }
.budget--rough .lineitem--total { background: #57514A; }

/* ---- card feed: full-screen cards, swipe up for the next (TikTok style) ----
   The feed runs full bleed to the top of the screen; the bar floats over it and
   content fades out toward the tippy top instead of clipping on a hard edge. */
.feed { height: 100dvh; margin: -42px -20px -44px; position: relative;
  display: flex; flex-direction: column; }
.feed__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; gap: 10px; padding: 18px 14px 8px; }
.feed__scroll { flex: 1; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: none; padding: 68px 20px 0; scroll-padding-top: 68px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 58px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 58px); }
.feed__scroll::-webkit-scrollbar { display: none; }
.feed__page { height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; padding-bottom: 54px; }   /* the cue's reserved band */
.feed__cardwrap { position: relative; flex: 1; min-height: 0; }
.feed__cardwrap .deck__card { position: absolute; inset: 0; }
/* minimize (zoom out to the list) — a bare glyph on the night, no plate */
.minmax { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; background: none; color: var(--onnavy); border: 0;
  cursor: pointer; transition: color .12s ease; }
.minmax:hover { color: var(--yellow); }
/* the scroll cue: one plain statement, chevron pointing the way down. It holds
   the foot of the screen and steps aside while you're actually scrolling. */
.feed__cue { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 4;
  pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 0;
  text-align: center; font-size: 13.5px; font-weight: 700; color: var(--onnavy);
  transition: opacity .3s ease; }
.feed__cue.is-quiet { opacity: 0; }
.feed__cue-chev { color: var(--yellow); animation: cuebounce 1.4s ease-in-out infinite; }
@keyframes cuebounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---- your pick budget, top-right ---- */
.picks:empty { display: none; }   /* the no-votes placeholder keeps its id, not its box */
.picks { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--black); background: var(--cream-2); border: 2px solid var(--black);
  box-shadow: 2px 2px 0 var(--black); padding: 6px 10px; white-space: nowrap; }
.picks__dots { display: inline-flex; gap: 4px; }
.picks__dots span { width: 11px; height: 11px; border: 2px solid var(--black); border-radius: 50%; }
.picks__dots span.is-on { background: var(--magenta); border-color: var(--magenta); }
.picks__label { font-size: 12px; font-weight: 700; }
.picks.picks-over { background: var(--black); color: var(--cream); }
.picks.picks-over .picks__dots span { border-color: var(--cream); }
.picks.picks-over .picks__dots span.is-on { background: var(--magenta); border-color: var(--magenta); }

/* ---- deck (one card at a time; flip for cost) ---- */
.deck__card { position: absolute; inset: 0; perspective: 2600px; }
.deck__flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s ease; }
.deck__card.is-flipped .deck__flip { transform: rotateY(180deg); }
.deck__face { position: absolute; inset: 0; backface-visibility: hidden;
  -webkit-backface-visibility: hidden; background: var(--cream); border-radius: 2px;
  box-shadow: var(--soft); padding: 18px; display: flex; flex-direction: column; overflow: hidden; }
.deck__face--back { transform: rotateY(180deg); }
/* webkit promotes positioned children (price, rank, ✓) to their own compositing
   layers, which ignore the face's backface culling and bleed through mirrored —
   each layer needs the flag itself… */
.deck__face .deck__price, .deck__face .deck__tag, .deck__face .deck__check,
.deck__face .gcard__new, .deck__face .deck__cover, .deck__face img, .deck__face video {
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* …and belt-and-suspenders: the turned-away face fades out and goes invisible,
   while the arriving face fades in over the flip's second half — so nothing
   bleeds through and nothing pops in abruptly */
.deck__face { transition: opacity .24s ease .21s, visibility 0s linear .21s; }
.deck__card.is-flipped .deck__face--front,
.deck__card:not(.is-flipped) .deck__face--back { visibility: hidden; opacity: 0;
  transition: opacity .2s ease .05s, visibility 0s linear .25s; }
/* cover image + price, full-bleed at the top of the front */
/* the feed card holds a fixed shape: clamp a long pitch so the actions stay put */
.deck__face--front p.muted { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden; }
.deck__cover { position: relative; margin: -18px -18px 16px; height: 156px; overflow: hidden;
  border-bottom: 2.5px solid var(--black); background: var(--sand); }
.deck__cover img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.flatcard:hover .deck__cover img, .deck__card:hover .deck__cover img { transform: scale(1.04); }
.deck__tag { position: absolute; top: 12px; left: 12px; z-index: 3; }
/* the cover seal — a starburst sticker (NEW, else rank) so it pops and never collides */
.seal { position: absolute; top: 10px; left: 10px; z-index: 4; width: 78px; height: 78px;
  border-radius: 50%; background: var(--black); color: var(--cream); border: 2px solid var(--black);
  box-shadow: inset 0 0 0 3px rgba(244, 236, 216, .92), 2px 4px 11px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: 5px; font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: .02em;
  text-transform: uppercase; transform: rotate(-8deg); }
.seal small { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; margin-bottom: 2px; opacity: .92; }
.seal b { color: var(--yellow); }
.deck__price { position: absolute; right: 0; bottom: 0; z-index: 3; background: var(--magenta);
  color: #fff; font-weight: 800; font-size: 17px; padding: 6px 13px;
  border: 2px solid var(--black); border-right: 0; border-bottom: 0; }
.deck__backers { margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--teal); }

/* no photo → the category is the color: one quiet field, cut by planes of its
   own light and shadow — never a second pigment */
.deck__cover--bare { height: 104px; }
.deck__cover--place   { background: var(--red); }
.deck__cover--event   { background: var(--yellow); }
.deck__cover--service { background: var(--green); }
.deck__cover--other   { background: var(--magenta); }
.deck__cover--bare::before { content: ""; position: absolute; left: -28px; top: -38px;
  width: 140px; height: 140px; background: rgba(250, 245, 233, .16); transform: rotate(-4deg);
  clip-path: polygon(0 14%, 100% 0, 88% 100%, 8% 86%); }
.deck__cover--bare::after { content: ""; position: absolute; right: -24px; bottom: -44px;
  width: 118px; height: 118px; background: rgba(28, 23, 20, .16); transform: rotate(3deg);
  clip-path: polygon(14% 4%, 100% 0, 90% 92%, 0 100%); }
.deck__cover--bare .deck__tag { top: auto; bottom: 12px; }

/* who's behind it — overlapping circles, photo or initials */
.avatarstack { display: flex; align-items: center; }
.avatar--sm { flex: 0 0 auto; width: 22px; height: 22px; border: 1.5px solid var(--black);
  border-radius: 50%; background: var(--cream-2); color: var(--black); font-size: 8px;
  font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  object-fit: cover; }
.avatarstack .avatar--sm:not(:first-child) { margin-left: -7px; }
.avatar--more { background: var(--black); color: var(--cream); }
.avatar--img { object-fit: cover; }

/* a file picker that sits inside its row — the label is the control, the input hides */
.filebtn { font-size: 13px; font-weight: 700; text-decoration: underline;
  text-decoration-color: var(--magenta); text-decoration-thickness: 2px; cursor: pointer; }
.filebtn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.deck__actions { margin-top: 12px; }
.deck__share { text-align: center; margin: 12px 0 0; font-size: 13px; }
.sharebtn { display: inline-flex; align-items: center; justify-content: center; width: 42px;
  height: 42px; border: 2px solid var(--black); color: var(--black); background: var(--cream-2);
  box-shadow: 2px 2px 0 var(--black); transition: transform .08s ease, box-shadow .12s ease; }
.sharebtn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--black); }
button.tap { border: 0; background: none; padding: 0; cursor: pointer; }
/* the flip button says what it does — one stable spot on both faces */
.flipbtn { display: inline-flex; align-items: center; justify-content: center; flex: 1;
  gap: 8px; height: 42px; padding: 0 13px;
  border: 2px solid var(--black); color: var(--black); background: var(--cream-2);
  font-family: var(--body); font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 2px 2px 0 var(--black); transition: transform .08s ease, box-shadow .12s ease; }
.flipbtn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--black); }
.flipbtn--share { background: var(--yellow); text-decoration: none; }

/* PICKED — the recessed face, dimmed cover, and corner check mark the state */
.deck__check { position: absolute; top: 13px; right: 13px; z-index: 3; width: 30px; height: 30px;
  background: var(--green); color: #fff; font-weight: 800; display: none;
  align-items: center; justify-content: center; border: 2px solid var(--black); }
.deck__card.is-backed .deck__check { display: flex; }
.deck__card.is-backed .deck__face { background: #E5EDDC; }   /* a light green wash = voted */
.deck__card.is-backed .deck__cover img { filter: grayscale(.45); opacity: .78; }
.deck__card.is-backed .deck__backbtn { background: var(--green); color: #fff; }

/* the list — the full ranked set of cards, tappable, pickable in place */
.flatcard { display: block; position: relative; background: var(--cream); border-radius: 2px;
  padding: 18px; text-decoration: none; overflow: hidden; box-shadow: var(--soft);
  transition: transform .14s ease, box-shadow .18s ease; }
a.flatcard:hover, .gcard:hover > a.gcard__open { text-decoration: none; }
.gcard { margin-bottom: 24px; }
.gcard:hover { transform: translateY(-3px); box-shadow: var(--soft-lift); }
/* NEW rides the top-left corner as a sash — the card's overflow clips its ends */
.gcard__new { position: absolute; top: 9px; left: -42px; z-index: 4; width: 132px;
  transform: rotate(-45deg); text-align: center; padding: 4px 0;
  background: var(--magenta); color: #fff; font-weight: 800; font-size: 11px;
  letter-spacing: .1em; }
.gcard__open { display: block; text-decoration: none; color: inherit; }
.gcard__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; }
.gcard__actions .tap { white-space: nowrap; }
/* the pick button carries a long label — keep it on one line, sized to fit the card */
.deck__backbtn { white-space: nowrap; font-size: 13.5px; padding: 11px 14px; }
/* picked in the list: the slanted shade + recessed face are the signal */
.gcard .deck__check { display: none; }
.gcard.is-backed { background: #E5EDDC; }   /* a light green wash = voted */
.gcard.is-backed .deck__cover img { filter: grayscale(.45); opacity: .78; }
.gcard.is-backed .deck__backbtn { background: var(--green); color: #fff; }

/* ---- next steps: a timeline, sharing last ---- */
.timeline { list-style: none; }
.tl { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: -2px; width: 2px;
  background: var(--black); }
.tl:last-child::before { display: none; }
.tl__dot { flex: 0 0 auto; width: 30px; height: 30px; border: 2px solid var(--black);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; background: var(--cream); z-index: 1; }
.tl--done .tl__dot { background: var(--green); color: #fff; }
.tl--now .tl__dot::after { content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--yellow); border: 2px solid var(--black); }
.tl--next .tl__dot { border-style: dashed; }
.tl__body { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }

/* Pitch tab's two-beat rail — simpler than the shared timeline: two connected dots,
   a grey connector. The current beat is a solid yellow dot; in the vote phase the
   past beat becomes a hollow yellow ring (both yellow, only "now" filled); anything
   still ahead is solid grey. */
.phaserail .tl::before { background: var(--slate); }
.phaserail .tl__dot { border: 0; background: var(--slate); }
.phaserail .tl__dot::after { display: none; }
.phaserail .tl--now .tl__dot { background: var(--yellow); }
.phaserail .tl--done .tl__dot { background: transparent; box-shadow: inset 0 0 0 3px var(--yellow); }
.phaserail .tl__body > strong { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.08; }
.phaserail__date { align-self: flex-start; margin-top: 7px; padding: 4px 10px;
  font-family: var(--display); font-size: 16px; line-height: 1; color: var(--cream);
  background: var(--black); border: 2px solid var(--black); }

/* Fresh Pitch tab fills the screen so the browse fallback sits at the very bottom,
   well clear of the pitch CTA up in the rail. */
.minefresh { flex: 1; display: flex; flex-direction: column; }
.minefresh__browse { margin-top: auto; align-self: center; padding-top: 20px; }

/* in the list, truncate the body so cards stay compact (full text in the feed) */
.gcard .gcard__open p.muted { display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }

/* ---- propose: one question per screen, full height, speak or type ---- */
.qstep { display: flex; flex-direction: column; flex: 1; min-height: calc(100dvh - 64px); }
.pitchbar { display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--hairline); }
.pitchbar__back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1; font-weight: 300; text-decoration: none;
  text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
.pitchbar__back:hover { color: var(--onnavy); }
.pitchbar__x { background: none; border: 0; padding: 0; cursor: pointer; line-height: 1;
  font-size: 26px; font-weight: 300; color: var(--slate); }
.pitchbar__x:hover { color: var(--onnavy); }
.qstep__dots { display: inline-flex; gap: 6px; }
.qstep__dots span { width: 12px; height: 12px; border: 2px solid var(--onnavy);
  border-radius: 50%; opacity: .55; }
.qstep__dots span.is-on { background: var(--magenta); border-color: var(--magenta); opacity: 1; }
.qstep__body { display: flex; flex-direction: column; flex: 1; margin-top: 24px; }
.qstep__q { font-family: var(--display); font-size: 30px; font-weight: 400; line-height: 1.08;
  margin-bottom: 10px; }
.qstep__input { flex: 1; width: 100%; border: 0; margin-top: 18px; padding: 14px;
  font: inherit; font-size: 18px; resize: none; color: var(--onnavy);
  background: rgba(244, 236, 216, .05); border-radius: 3px; transition: background .12s ease; }
.qstep__input::placeholder { color: rgba(156, 173, 194, .75); }
.qstep__input:focus { outline: none; background: rgba(244, 236, 216, .12); }
.qstep__foot { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

/* the character floor's live counter, sitting just above the Next button */
.charcount { align-self: flex-end; min-height: 16px; }

/* the video / photo capture step — a big tap-target that opens the camera, swapped
   for a live preview once something's recorded or chosen */
.capture__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.capture { margin-top: 22px; }
.capture__btn { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; width: 100%; min-height: 200px; border: 2px dashed var(--slate); background: none;
  color: var(--onnavy); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.capture__icon { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--onnavy);
  display: flex; align-items: center; justify-content: center; }
.capture__icon--video::after { content: ""; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); }
.capture__icon--photo::after { content: "+"; font-size: 30px; line-height: 1; }
.capture__preview { display: none; }
.capture--has .capture__btn { display: none; }
.capture--has .capture__preview { display: block; }
/* foot: skip (outline) until a photo's added, then the prominent continue */
.capture__continue { display: none; }
.capture--has .capture__continue { display: block; }
.capture--has .capture__skip { display: none; }
.capture__preview video, .capture__preview img { width: 100%; border: 2px solid var(--black);
  box-shadow: 3px 3px 0 var(--black); background: var(--navy-2); aspect-ratio: 1 / 1; object-fit: cover; }
.capture__redo { display: block; margin: 10px auto 0; }

/* the pitch video — a mini photo booth: live camera, one record button, playback */
.booth { position: relative; margin-top: 16px; width: 100%; aspect-ratio: 3 / 4;
  border: 2px solid var(--onnavy); background: #05060B; overflow: hidden; }
.booth__live, .booth__play { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #05060B; }
.booth__play { display: none; }
.cam--done .booth__live { display: none; }
.cam--done .booth__play { display: block; }
/* Mirror the live selfie preview so recording feels like a mirror. The saved file is
   flipped server-side (VideoNormalizeJob) to match, so attached playback is NOT mirrored
   here — only a freshly-recorded local clip is, via .booth__play--mirror set in JS. */
.booth__live { transform: scaleX(-1); }
.booth__play--mirror { transform: scaleX(-1); }
.booth__timer { position: absolute; top: 12px; left: 12px; z-index: 3; opacity: 0;
  font-weight: 700; font-size: 13px; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 9px; }
.cam--recording .booth__timer { opacity: 1; }
.booth__rec { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 66px; height: 66px; border-radius: 50%; border: 3px solid #fff; background: rgba(0, 0, 0, .15);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.booth__rec::after { content: ""; width: 46px; height: 46px; border-radius: 50%; background: var(--red);
  transition: width .15s ease, height .15s ease, border-radius .15s ease; }
.cam--recording .booth__rec::after { width: 26px; height: 26px; border-radius: 5px; }
.booth__rec { display: none; }                       /* hidden until the curtains open */
.cam--open .booth__rec { display: flex; }
.cam--done .booth__rec, .cam--denied .booth__rec { display: none; }
.booth__denied { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 22px; text-align: center;
  color: var(--onnavy); background: var(--navy-2); }
.cam--denied .booth__denied { display: flex; }
.booth__redo { display: none; margin: 12px auto 0; }
.cam--done .booth__redo { display: block; }
.booth__continue { display: none; }
.cam--done .booth__continue { display: block; }
.cam--done .booth__skip { display: none; }
/* remove rides under the clip — only offered once there's one to take down */
.booth__remove { display: none; margin: 12px auto 0; color: var(--red); }
.cam--done .booth__remove { display: block; }
/* the booth starts closed — red velvet curtains drawn until the user opens it */
.booth__curtains { position: absolute; inset: 0; z-index: 5; display: flex; pointer-events: none; }
.booth__panel { flex: 1; height: 100%; box-shadow: inset 0 0 36px rgba(0, 0, 0, .45);
  background: repeating-linear-gradient(90deg, #6f2418 0 11px, #93331f 11px 23px, #b14025 23px 31px);
  transition: transform .55s cubic-bezier(.7, 0, .25, 1); }
.booth__panel--l { border-right: 2px solid rgba(0, 0, 0, .35); }
.cam--open .booth__panel--l { transform: translateX(-101%); }
.cam--open .booth__panel--r { transform: translateX(101%); }
.booth__open { position: absolute; z-index: 6; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; padding: 13px 20px; cursor: pointer;
  background: var(--cream); color: var(--black); border: 2px solid var(--black);
  box-shadow: 3px 3px 0 var(--black); font: inherit; font-weight: 700; font-size: 15px; }
.booth__opendot { width: 16px; height: 16px; border-radius: 50%; background: var(--red); }
.cam--open .booth__open, .cam--done .booth__open, .cam--denied .booth__open { display: none; }

/* the champion picker — multi-select of you + neighbors already in */
.peoplepick { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.peoplepick__opt { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 2px solid var(--hairline); color: var(--onnavy); cursor: pointer;
  transition: border-color .12s ease, background .12s ease; }
.peoplepick__opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.peoplepick__opt:has(input:checked) { border-color: var(--yellow); background: rgba(219, 151, 42, .12); }
.peoplepick__name { font-weight: 700; }
.peoplepick__check { margin-left: auto; color: var(--yellow); font-weight: 800; opacity: 0; }
.peoplepick__opt:has(input:checked) .peoplepick__check { opacity: 1; }

/* the wizard page header + the four-step map of how a pitch gets made */
/* one bounded header section: the page label, then the step row, then a divider */
.pitchhead { margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.pitchhead__title { font-family: var(--body); font-size: 14px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--onnavy); margin: 0 0 14px; }
.steps { display: flex; flex-wrap: wrap; list-style: none; gap: 7px 16px; }
.step { display: flex; align-items: center; gap: 7px; color: var(--slate); opacity: .55; }
.step__num { width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; }
.step__label { font-size: 12px; font-weight: 700; }
.step.is-done { opacity: 1; }
.step.is-on { opacity: 1; color: var(--yellow); }
.step.is-on .step__num { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }

/* a marigold tail on the adaptive question */
.qhl { color: var(--yellow); }

/* the budget table — one box live (yellow), the rest greyed out */
.budgettable { margin-top: 2px; }
.budgettable__q { margin-bottom: 18px; }
.bt { width: 100%; border-collapse: collapse; border-top: 1px solid var(--hairline); }
.bt__row { border-bottom: 1px solid var(--hairline); }
.bt__name, .bt__amt { padding: 11px 12px; color: var(--onnavy); vertical-align: middle; }
.bt__name { border-right: 1px solid var(--hairline); }   /* the column divider — reads as a table */
.bt__amt { text-align: right; width: 36%; font-variant-numeric: tabular-nums; }
.bt__row.is-done { color: var(--slate); opacity: .5; }
.bt__total { border-bottom: 0; font-weight: 700; }
.bt__total .bt__amt { color: var(--yellow); }
/* cells holding a live input give up their padding so the input fills the whole cell */
.bt__name:has(.bt__in), .bt__amt:has(.bt__in) { padding: 0; }
.bt__in { width: 100%; display: block; font: inherit; font-size: 17px; color: var(--onnavy);
  background: none; border: 0; padding: 11px 12px; -webkit-appearance: none; }
.bt__in--amt { text-align: right; }
.bt__in::placeholder { color: rgba(156, 173, 194, .55); }
.bt__in:disabled { opacity: .3; }
.bt__in:focus { outline: none; }
/* the live box: the whole cell lights up, its own grid lines turned marigold */
.bt__name:has(.bt__in.is-active), .bt__amt:has(.bt__in.is-active) {
  background: rgba(219, 151, 42, .18); box-shadow: inset 0 0 0 2px var(--yellow); }
/* paper variant — the same table on the cream review card (dark lines + ink) */
.bt--paper { border-top-color: var(--line); }
.bt--paper .bt__row { border-bottom-color: var(--line); }
.bt--paper .bt__name { border-right-color: var(--line); }
.bt--paper .bt__name, .bt--paper .bt__amt, .bt--paper .bt__in { color: var(--ink); }
.bt--paper .bt__in::placeholder { color: var(--stone); }
.bt--paper .bt__in:focus { background: rgba(28, 23, 20, .05); }
/* the "add another" row: the way forward, sitting right under the line you just
   filled. It exists only once a line is ready (the controller unhides it), so its
   arrival is itself the cue — "this line's done, here's the next." Tapping anywhere
   on it banks the line; a one-time nudge draws the eye the first moment it appears. */
.bt__row--next { cursor: pointer; animation: bt-nudge .42s ease-out; }
.bt__row--next .bt__name, .bt__row--next .bt__amt { color: var(--yellow); font-weight: 600; }
.bt__next { letter-spacing: .01em; }
.bt__row--next .bt__amt { font-size: 18px; }            /* the ↵ glyph, sized to read as a key */
.bt__row--next:active { background: rgba(219, 151, 42, .14); }   /* press feedback on tap */
@keyframes bt-nudge { from { opacity: 0; transform: translateY(-6px); } }

/* the budget builder — one line at a time, on the navy step (no boxed panel) */
.budgetbuild { margin-top: 20px; }
.budget__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--hairline); color: var(--onnavy); }
.budget__row .amt { font-variant-numeric: tabular-nums; font-weight: 700; }
.budget__row--total { border-bottom: 0; color: var(--slate); font-weight: 700; }
.budget__row--total .amt { color: var(--yellow); font-size: 18px; }
.budgetbuild__prompt { margin: 22px 0 0; font-family: var(--display); font-size: 21px;
  line-height: 1.12; color: var(--onnavy); }
/* the one live field reuses the question input's single underline, full width */
.budgetbuild .qstep__input { margin-top: 8px; }

/* the page label slides in at the top once the real header scrolls away */
.pagebar { position: fixed; top: 0; left: 0; right: 0; z-index: 59; /* above the top fade-scrim (58) */
  background: var(--navy); padding-top: env(safe-area-inset-top);
  opacity: 0; transform: translateY(-100%); transition: opacity .22s ease, transform .22s ease;
  pointer-events: none; }
.pagebar.is-shown { opacity: 1; transform: none; }
.pagebar__inner { max-width: 480px; margin: 0 auto; padding: 7px 20px 6px;
  display: flex; align-items: center;
  font-family: var(--display); font-size: 20px; line-height: 1.2; color: var(--onnavy); }
.pagebar .soundtoggle { pointer-events: auto; }

/* the working controls (filters, the vote budget, sound) ride sticky flush
   beneath the slide-in label while the page scrolls. ~34px tucks it a hair
   under the pagebar's real height (7+6 padding + 24px line ≈ 37px) so the two
   navy bars overlap by a few px — no sub-pixel gap can show between them. The
   safe-area inset is added on top of both, in step. */
.stickyrow { position: sticky; top: calc(34px + env(safe-area-inset-top)); z-index: 44; display: flex; align-items: center;
  gap: 10px; margin: 0 -20px; padding: 10px 20px;
  background: var(--navy); }
.stickyrow .chips { margin-bottom: 0; }
/* At a desk the cards lie landscape and wide, so a sticky opaque strip scrolling
   over them reads as a gap splitting a card. Let it scroll with the page instead. */
@media (min-width: 900px) {
  .stickyrow { position: static; margin: 6px 0 4px; padding: 0; background: none; }
}

/* ---- utility row: profile (and picks) top-right ---- */
.utilrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.profile { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; border: 2px solid var(--onnavy); border-radius: 50%;
  color: var(--onnavy); }
.profile.is-on { background: var(--onnavy); color: var(--navy); }

/* settings rows on the night ground — ruled by hairlines, no paper box */
.darklist { margin-top: 6px; }
.darkrow { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 14px;
  color: var(--onnavy); }
.darkrow .muted { color: var(--slate); }

/* ---- profile (account) page ---- */
.avatar { flex: 0 0 auto; width: 56px; height: 56px; border: 2px solid var(--onnavy);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; color: var(--onnavy); }
.profile__row { text-decoration: none; color: inherit; }
.profile__toggle { cursor: pointer; }
.profile__toggle input { width: 18px; height: 18px; accent-color: var(--green); }

/* ---- card meta: who it's for, who's behind it ---- */
.card__meta { margin-top: 13px; display: flex; flex-direction: column; gap: 13px;
  border-top: 1.5px solid var(--line); padding-top: 12px; }
.card__metaline { font-size: 16px; display: flex; align-items: center; flex-wrap: wrap;
  gap: 2px 8px; }
.card__metakey { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--magenta); }
/* the standing badge — a round seal at the card's top-left, poking slightly past it */
.rallywrap { position: relative; }
.standing { position: absolute; z-index: 6; top: 10px; left: 10px;
  width: 78px; height: 78px; border-radius: 50%; padding: 8px; text-align: center;
  background: var(--black); color: var(--cream); border: 2px solid var(--black);
  box-shadow: inset 0 0 0 3px rgba(244, 236, 216, .92), 2px 4px 11px rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; line-height: 1.1; letter-spacing: .01em;
  text-transform: uppercase; transform: rotate(-8deg); }

/* the proposer's face rides the Pitched by line */
.metava { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--black);
  background: var(--violet); color: #fff; font-size: 8px; font-weight: 800;
  object-fit: cover; }

/* the payoff line after you pick — grape, the earned color */
.payoff { font-size: 14px; font-weight: 700; margin-top: 11px; color: var(--violet); }
/* on the cream cards (rally, etc.) drop the teal/violet so it isn't a rainbow */
.flatcard .payoff { color: var(--ink); }
.flatcard .deck__backers { color: var(--stone); }

/* the vote gets its own full-width row — the most important thing on the card */
.cardvote { margin-top: 10px; }
.cardvote .inlineform { display: block; }
.cardvote .btn { display: block; width: 100%; }

/* button_to plumbing: keep forms inline so buttons sit in rows */
.inlineform { display: inline-block; }
.inlineform .tap { font: inherit; font-size: 13px; font-weight: 700; }
.btn--auto { width: auto; display: inline-block; padding: 13px 18px; } /* same height as a full-width btn */

/* budget rows that edit in place (the cost step) */
.lineitem--edit { gap: 8px; }
.lineitem--edit input { border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink);
  min-width: 0; padding: 2px 0; }   /* 16px floor so iOS doesn't zoom on focus */
.lineitem--edit input::placeholder { color: var(--stone); }
.lineitem--edit input:focus { outline: none; border-bottom: 2px solid var(--yellow); }
.lineitem--edit input.nm { flex: 1; }
.lineitem--edit input.amt { width: 90px; text-align: right; font-weight: 700; }

/* rally: your pitch is the card, and its next steps ride inside it */
.rallycard { margin-bottom: 22px; }
/* the in-review card is a status glance, not the whole pitch — clamp the case so the
   Edit button stays in view; the full text lives behind it */
.mine-review p.muted { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rallycard__status { position: absolute; top: 12px; right: 12px; z-index: 4; }
.rallyblock__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.rallyblock__title { font-size: 18px; flex: 1; min-width: 0; }
.rallyblock__head .pill { flex: 0 0 auto; }

/* home: the propose door — a paper invitation with a folded marigold corner */
.homecta { position: relative; background: var(--cream); color: var(--ink); border-radius: 2px;
  box-shadow: var(--soft); padding: 18px; overflow: hidden;
  --t-text: var(--ink); --t-muted: var(--stone); --t-head: var(--black); }
.homecta::after { content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px;
  background: var(--yellow); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.homecta strong { font-family: var(--display); font-size: 21px; font-weight: 500; }

/* ---- staged entrance: sections rise into place on load ---- */
.rise { animation: rise .7s cubic-bezier(.22, .8, .3, 1) both; }
.rise-2 { animation-delay: .14s; }
.rise-3 { animation-delay: .28s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ===== INTRO (Act 0) — a four-phase picture book in cut paper =====
   One stage per beat; its pieces are carried in and out, stop-motion, as the
   beat arrives and leaves, and the highlighter marks the word that matters.
   Desktop sets the stage beside the words; mobile stacks stage over words. */
.beat { min-height: 86dvh; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0; }
.beat:first-child { padding-top: 24px; }
.beat--cta { min-height: 80dvh; text-align: center; }
.beat--cta .small { text-align: center; }
.beat__big { font-family: var(--display); font-size: 38px; font-weight: 400; line-height: 1.02;
  letter-spacing: -.01em; color: var(--onnavy); margin-bottom: 14px; text-wrap: balance; }
.beat .lede, .act__step .lede { color: #C3CFDC; font-size: 18px; }
.beat .lede strong { color: var(--yellow); font-weight: 700; }
.beat__cue { margin-top: 22px; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
  animation: cuebounce 1.6s ease-in-out infinite; }


@media (min-width: 860px) {
  /* the intro breaks out of the app's phone column and plays full and grand */
  .app--wide { max-width: none; padding-left: 0; padding-right: 0; }
  .beat { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    gap: 6vw; max-width: 1180px; margin: 0 auto; padding: 8vh 48px; }
  .beat .say { max-width: 32rem; }
  .beat__big { font-size: clamp(46px, 5vw, 70px); }
  .beat .lede, .act__step .lede { font-size: 20px; }
  .beat--cta { display: flex; max-width: 560px; }   /* the live widget reads better in one narrow column */
  .beat--cta .say, .beat--cta .well, .beat--cta .wellhead { width: 100%; }
}
@media (min-width: 1200px) { .beat { max-width: 1320px; } }

/* the text: each line rises in turn as the beat settles */
.is-armed .say > * { opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease; }
.is-armed .say > *:nth-child(2) { transition-delay: .12s; }
.is-armed .say > *:nth-child(3) { transition-delay: .24s; }
.is-armed.is-seen .say > * { opacity: 1; transform: none; }

/* the highlighter: a marker swipe paints across the word as the beat lands */
.hl { background-image: linear-gradient(transparent 56%, var(--hl, rgba(219,151,42,.6)) 56%);
  background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .05em; transition: background-size .55s cubic-bezier(.6, 0, .2, 1) .35s; }
.is-armed.is-seen .hl { background-size: 100% 100%; }
.hl--teal    { --hl: rgba(42, 114, 104, .62); }
.hl--green   { --hl: rgba(46, 102, 73, .6); }
.hl--magenta { --hl: rgba(154, 51, 84, .62); }

/* ---- the stage: a photographic cut-out plays here, paper shapes around it ---- */
.stage { position: relative; margin: 0 auto 26px; max-width: 380px; }
@media (min-width: 860px) { .stage { margin-bottom: 0; max-width: 100%; } }

/* the hero: a paper-edged photo cut-out that pops in and breathes, Vox-style */
.cut { display: block; width: 100%; height: auto; position: relative; z-index: 1;
  transition: opacity .5s ease, transform .55s cubic-bezier(.34, 1.45, .5, 1); will-change: transform; }
.cut--building  { rotate: -1.5deg; }
.cut--open      { rotate: 2deg; max-width: 74%; margin: 0 auto; }
.cut--neighbors { rotate: -1deg; }
.cut--seedlings { rotate: 1.5deg; }
.is-armed .cut { opacity: 0; transform: translateY(34px) scale(.9); }
.is-armed.is-seen .cut { opacity: 1; transform: none; }
.is-seen .cut { animation: cutbob 5.5s ease-in-out 1.2s infinite; }
@keyframes cutbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* the paper accents: construction-paper shapes that pop in behind the cut-out */
.paper { position: absolute; z-index: 0;
  transition: opacity .45s ease, transform .55s cubic-bezier(.34, 1.5, .5, 1); }
.is-armed .paper { opacity: 0; transform: scale(.2); }
.is-armed.is-seen .paper { opacity: 1; transform: none; }
.is-armed.is-seen .paper--1 { transition-delay: .2s; }
.is-armed.is-seen .paper--2 { transition-delay: .34s; }
.paper.sun { width: 17%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow);
  right: 3%; top: 0; border: 2.5px solid var(--black); box-shadow: 3px 3px 0 var(--black); }
.paper.tri { width: 26%; aspect-ratio: 1; background: var(--magenta); left: -3%; bottom: 6%;
  clip-path: polygon(0 100%, 0 0, 100% 100%); rotate: -4deg;
  filter: drop-shadow(3px 4px 0 rgba(28, 23, 20, .5)); }
.paper.coin { width: 15%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow);
  border: 2.5px solid var(--black); box-shadow: 3px 3px 0 var(--black); }
.paper.coin::after { content: ""; position: absolute; inset: 22%; border-radius: 50%;
  border: 2px solid var(--black); }
.paper.coin--a { left: 1%; top: 12%; }
.paper.coin--b { right: 2%; bottom: 12%; rotate: 10deg; }
/* ===== the building act — a self-contained, viewport-height story. The image panel
   stays put and morphs; the text panel scrolls on its own and fades at its edges.
   State lives in [data-active] on the section; the page itself doesn't scroll. ===== */
.app--intro { height: 100dvh; max-width: none; overflow: hidden; padding: 0; }

.act { position: relative; height: 100dvh; display: grid; gap: 4vw; align-items: center;
  grid-template-columns: 1fr 1fr; max-width: 1320px; margin: 0 auto; padding: 0 48px; }
.act__stage { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }

/* the text panel: its own free scroll, gradient-faded top and bottom */
.act__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent 0, #000 17%, #000 83%, transparent 100%);
          mask-image: linear-gradient(transparent 0, #000 17%, #000 83%, transparent 100%); }
.act__scroll::-webkit-scrollbar { display: none; }
.act__step { min-height: 100%; display: flex; flex-direction: column;
  justify-content: center; max-width: 32rem; }

/* mobile: the same thing stacked — image on top, text scrolling beneath it */
@media (max-width: 859px) {
  .act { grid-template-columns: 1fr; grid-template-rows: 40dvh 54dvh; gap: 0; padding: 6dvh 22px 0; }
  .act__stage { height: 40dvh; }
  .act__scroll { height: 54dvh;
    -webkit-mask-image: linear-gradient(transparent 0, #000 12%, #000 82%, transparent 100%);
            mask-image: linear-gradient(transparent 0, #000 12%, #000 82%, transparent 100%); }
  .act__step { min-height: 56dvh; }
  /* shrink the well graphic so it fits inside the (shorter) image panel.
     extra .act prefix beats the base .actwell rules that come later in the file. */
  .act .actwell .well__col { width: 80px; }
  .act .actwell .well__section { gap: 18px; }
  .act .actwell .well__bar, .act .actwell .aw-proj .well__labels { height: 26dvh; }
  /* sit the graphics around the middle of the (short) image panel — the building
     reads a touch lower since its image carries a ground base. */
  .act .actwell { top: 48%; height: 26dvh; }
  .act .bldg { top: 52%; }
}

/* the stage carries the building, the coins, and the morphing Well — kept square */
.stage--act { position: relative; aspect-ratio: 1 / 1; height: 100%; max-height: 540px;
  width: auto; max-width: 100%; margin: auto; }

/* the building: empty → lit, then it slides left (making room for the coins) and goes */
.bldg { position: absolute; left: 50%; top: 50%; width: 96%; transform: translate(-50%, -50%);
  z-index: 1; transition: opacity .8s ease, transform .9s cubic-bezier(.5, 0, .25, 1); }
.bldg__img { display: block; width: 100%; height: auto; }
.bldg__after { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.bldg__before { transition: opacity .9s ease; }
.act[data-active="1"] .bldg__after { opacity: 1; }
.act[data-active="1"] .bldg { transform: translate(-80%, -50%); }   /* slide left, coins spill right */
.act[data-active="2"] .bldg, .act[data-active="3"] .bldg {
  opacity: 0; transform: translate(-94%, -50%); }

/* coins: spill out to the right of the building (step 1), then drop into the well (step 2) */
.coin { position: absolute; left: 50%; top: 34%; width: 11%; height: auto; z-index: 3;
  opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.4, 0, .2, 1); }
.act[data-active="1"] .coin { opacity: 1; }
.act[data-active="1"] .k1 { transform: translate(150%, -10%) rotate(-12deg); }
.act[data-active="1"] .k2 { transform: translate(250%, -70%) rotate(10deg); }
.act[data-active="1"] .k3 { transform: translate(330%, 30%) rotate(16deg); }
.act[data-active="1"] .k4 { transform: translate(210%, 70%) rotate(-6deg); }
.act[data-active="1"] .k5 { transform: translate(320%, -40%) rotate(20deg); }
.act[data-active="2"] .coin { opacity: 0;
  transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .3s ease .6s; }
.act[data-active="2"] .k1 { transform: translate(-230%, 150%) rotate(180deg); }
.act[data-active="2"] .k2 { transform: translate(-180%, 178%) rotate(220deg); transition-delay: .08s; }
.act[data-active="2"] .k3 { transform: translate(-260%, 165%) rotate(-200deg); transition-delay: .16s; }
.act[data-active="2"] .k4 { transform: translate(-200%, 188%) rotate(240deg); transition-delay: .24s; }
.act[data-active="2"] .k5 { transform: translate(-250%, 172%) rotate(160deg); transition-delay: .32s; }

/* the Well: ONE graphic, two states crossfading in place — a big vessel + label
   column, identical in both, so nothing shifts when the spots arrive */
.actwell { position: absolute; left: 50%; top: 46%; width: 92%; height: 320px;
  transform: translate(-50%, -50%); z-index: 2; }
/* a big chunky vessel for the story (the app's is a skinny 62px) */
.actwell .well__col { width: 132px; }
.actwell .well__section { gap: 28px; }
.actwell .well__bar { height: 320px; }
.actwell .aw-proj .well__labels { height: 320px; }
/* no drop-shadows on the navy ground — they muddy up. keep the brick frame flat. */
.actwell .well__bar, .actwell .wellbrick::before { box-shadow: none; }
/* the story labels are illustrative, not links — no hover lift, no link cursor */
.actwell .well__label { cursor: default; }
.actwell .well__label:hover .nm { color: var(--onnavy); }
.aw { position: absolute; inset: 0; opacity: 0;
  transition: opacity .6s ease; pointer-events: none; }
.act[data-active="2"] .aw-simple { opacity: 1; }
.act[data-active="3"] .aw-proj   { opacity: 1; pointer-events: auto; }

/* the simple pot: a blue fill that rises in the vessel as the coins drop in */
.awfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .28) 0 9px, transparent 9px 18px),
    linear-gradient(to top, var(--water-5), var(--water-1));
  transition: height 1.1s cubic-bezier(.3, .8, .3, 1) .15s; }
.act[data-active="2"] .awfill { height: 100%; }

/* the wordmark, top-left, fixed while the story scrolls — all caps, like the app */
.wellmark { position: fixed; top: calc(18px + env(safe-area-inset-top)); left: 24px; z-index: 50; font-family: var(--body);
  font-size: 14px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--onnavy); }

/* the "THE WELL" pointer on the simple pot — an arrow pointing back at the vessel,
   not a legend. Lives in the label column and fades out with the simple state. */
.aw-simple .well__labels { justify-content: center; }
.wellptr { display: inline-flex; align-items: center; gap: 10px; }
.wellptr__arrow { position: relative; flex: 0 0 auto; width: 40px; height: 2px;
  background: var(--onnavy); }
.wellptr__arrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px;
  border-left: 2px solid var(--onnavy); border-bottom: 2px solid var(--onnavy);
  transform: translateY(-50%) rotate(45deg); }
.wellptr__txt { font-family: var(--body); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; font-size: 15px; color: var(--onnavy); }

/* a sticky way back to the app while you read the story (signed-in only) */
.introback { position: fixed; left: calc(18px + env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 50;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--yellow); color: var(--navy); font-weight: 700; font-size: 14px; padding: 12px 22px;
  border: 2.5px solid var(--black); border-radius: 999px; box-shadow: 3px 3px 0 var(--black); text-decoration: none;
  transition: opacity .5s ease, transform .5s ease; }
.introback:hover { background: var(--black); color: var(--yellow); }
/* fades out at the last beat, where the in-beat CTA takes over */
.act[data-active="3"] .introback { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* the visitor's gate — the front-runner reads clear, the rest waits */
.gate .well__label { filter: blur(6px); pointer-events: none; user-select: none; }
.gate .well__section:first-child .well__label:first-child { filter: none; pointer-events: auto; }
.gate__note { text-align: center; font-size: 13px; margin-top: 12px; }

/* ---- admin desktop, on its paper sheet ---- */
.reviewrow { border: 2px solid var(--black); border-radius: 2px; background: var(--cream-2);
  margin-top: 12px; }
.reviewrow summary { padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 700; }
.reviewrow summary .pill { margin-left: 10px; }
.reviewrow__body { padding: 16px 14px; border-top: 2px solid var(--black); background: var(--cream); }
.adminnav { display: flex; gap: 28px; border-bottom: 2px solid var(--black);
  padding-bottom: 12px; margin: 16px 0 22px; font-size: 17px; }
.adminnav a { text-decoration: none; color: var(--stone); font-weight: 800; position: relative;
  letter-spacing: -.01em; }
.adminnav a:hover { color: var(--black); }
.adminnav a.is-on { color: var(--magenta); }
.adminnav a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px;
  height: 4px; background: var(--magenta); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.table th, .table td { border: 1.5px solid var(--line); padding: 8px 10px; text-align: left;
  vertical-align: top; }
.table th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  background: var(--sand); }
.cols { display: flex; gap: 20px; align-items: flex-start; }
.cols > * { flex: 1; }

/* ---- the cycle hero: the pot as a well, the season as a timeline ---- */
.cyclehero { display: flex; gap: 26px; align-items: center; margin: 16px 0 6px;
  padding: 20px 24px; background: var(--cream); border: 2px solid var(--black);
  border-radius: 2px; box-shadow: 3px 3px 0 var(--black); }
.cyclewell { width: 104px; flex: 0 0 auto; text-align: center; }
.cyclewell__vessel { position: relative; height: 128px; display: flex; align-items: center;
  justify-content: center; background: var(--cream-2); border: 2.5px solid var(--black);
  border-radius: 2px; overflow: hidden; }
.cyclewell__fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--water-1);
  border-top: 2px solid var(--black); }
.cyclewell__amt { position: relative; z-index: 1; font-weight: 800; font-size: 15px;
  color: var(--black); background: var(--cream); border: 2px solid var(--black);
  border-radius: 2px; padding: 3px 7px; box-shadow: 2px 2px 0 var(--black); }
.cyclewell__cap { margin-top: 8px; font-size: 11px; line-height: 1.3; color: var(--stone); }

.cyclehero__tl { flex: 1; min-width: 0; }
.cyclehero__phase { font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--magenta); margin-bottom: 14px; }
.cycletl__track { position: relative; display: flex; height: 30px; border: 2px solid var(--black);
  border-radius: 2px; }
.cycletl__seg { display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  border-right: 2px solid var(--black); }
.cycletl__seg:last-child { border-right: 0; }
.cycletl__seg--pitch { background: var(--water-1); }
.cycletl__seg--vote  { background: var(--water-3); }
.cycletl__today { position: absolute; top: -7px; bottom: -7px; width: 3px; background: var(--magenta); }
.cycletl__today span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--cream);
  background: var(--magenta); padding: 1px 5px; border-radius: 2px; white-space: nowrap; }
.cycletl__dates { position: relative; height: 34px; margin-top: 8px; }
.cycletl__dates span { position: absolute; top: 0; font-size: 11px; line-height: 1.25;
  color: var(--stone); white-space: nowrap; transform: translateX(-50%); }
.cycletl__dates span:first-child { transform: translateX(0); text-align: left; }
.cycletl__dates span:last-child  { transform: translateX(-100%); text-align: right; }

/* a cycle card in the Cycle tab: editable pot + timeline + dates */
.cyclecard { border: 2px solid var(--black); border-radius: 2px; background: var(--cream);
  box-shadow: 3px 3px 0 var(--black); padding: 16px 18px; margin: 16px 0; }
.cyclecard--now { border-color: var(--magenta); box-shadow: 3px 3px 0 var(--magenta); }
.cyclecard__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cyclepot { display: block; }
.cyclepot__label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--stone); }
.cyclepot__big { font-family: var(--display); font-size: 42px; font-weight: 400; line-height: 1;
  color: var(--black); display: inline-flex; align-items: baseline; }
.cyclepot__input { font: inherit; width: 7ch; padding: 0 0 2px; color: var(--black);
  border: 0; border-bottom: 2px solid var(--black); background: none; -webkit-appearance: none; appearance: none; }
.cyclepot__input::-webkit-inner-spin-button, .cyclepot__input::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0; } /* drop the spinner that was eating the width */
.cyclecard__foot { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-top: 18px; }
.cycleterm { flex: 1; min-width: 170px; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--stone); display: flex; flex-direction: column; gap: 5px; }
.cycledates { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cycledates label { flex: 1; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--stone); display: flex; flex-direction: column; gap: 4px; }
.cycledates input { width: 100%; font: inherit; font-size: 16px; font-weight: 700; padding: 5px 2px; /* 16px floor so iOS doesn't zoom on focus */
  color: var(--black); border: 0; border-bottom: 2px solid var(--black); border-radius: 0;
  background: none; -webkit-appearance: none; appearance: none; }
.cycledates input:focus { outline: none; border-bottom-color: var(--magenta); }
.cyclecard__close { margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--line); }
.addcycle > summary { list-style: none; cursor: pointer; }
.addcycle > summary::-webkit-details-marker { display: none; }

/* ---- the ideas pipeline: clean stacked lanes ---- */
.lane { margin-top: 24px; }
.lane__head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px;
  border-bottom: 2px solid var(--black); padding-bottom: 6px; }
.lane__head h3 { margin: 0; font-size: 15px; }
.lane__count { font-weight: 800; font-size: 13px; color: var(--black);
  background: var(--sand); border: 1.5px solid var(--black); border-radius: 2px; padding: 0 7px; }
.lane--now .lane__head { border-bottom-color: var(--yellow); border-bottom-width: 3px; }
.lane--now .lane__count { background: var(--yellow); }
.lane__empty { padding: 12px 4px; }
.lane--muted { margin-top: 22px; }
.lane--muted > summary { cursor: pointer; list-style: none; }
.lane--muted > summary::-webkit-details-marker { display: none; }
.lane--muted[open] > summary { margin-bottom: 4px; }

.idea { display: flex; align-items: center; gap: 13px; padding: 10px 6px;
  border-bottom: 1.5px solid var(--line); }
.idea:hover { background: var(--cream-2); }
.idea__thumb { flex: 0 0 auto; position: relative; width: 60px; height: 60px; overflow: hidden;
  border: 2px solid var(--black); border-radius: 2px; background: var(--cream-2); }
.idea__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idea__thumb--place   { background: var(--red); }
.idea__thumb--event   { background: var(--yellow); }
.idea__thumb--service { background: var(--green); }
.idea__thumb--other   { background: var(--magenta); }
/* no photo: decorative blobs like the resident card's bare cover, not a flat square */
.idea__thumb--bare::before { content: ""; position: absolute; left: -14px; top: -18px;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .17); }
.idea__thumb--bare::after { content: ""; position: absolute; right: -12px; bottom: -16px;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(28, 23, 20, .14); }
.idea__rankbadge { position: absolute; left: -1px; bottom: -1px; z-index: 1; background: var(--black);
  color: var(--cream); font-size: 11px; font-weight: 800; padding: 1px 5px; }
.idea__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; color: var(--black); }
.idea__main:hover .idea__title { color: var(--magenta); }
.idea__title { font-weight: 700; font-size: 16px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea__cost { font-weight: 800; color: var(--black); }
.idea__meta { font-size: 12.5px; color: var(--stone); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.idea__tel { color: var(--magenta); text-decoration: none; }
.idea__wait { color: var(--green); font-weight: 700; }
.idea__actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.idea__actions .inlineform { display: inline; }

/* ---- the edit drawer ---- */
body.drawer-open { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end;
  background: rgba(28, 23, 20, .38); opacity: 0; transition: opacity .18s ease; }
.drawer.is-open { opacity: 1; }
.drawer__panel { width: min(540px, 94vw); height: 100%; overflow-y: auto;
  background: var(--yellow); border-left: 2px solid var(--black);
  box-shadow: -8px 0 0 rgba(28, 23, 20, .18); display: flex; flex-direction: column;
  transform: translateX(24px); transition: transform .18s ease; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
/* yellow IS the "you're editing" signal — the card sits on it as plain paper */
.drawer__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 15px 20px; background: var(--yellow);
  border-bottom: 2px solid var(--black); }
.drawer__head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__x { flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--black); }
.drawer__x:hover { opacity: .6; }
.drawer__body { padding: 18px 20px 36px; }
.drawer__body .flatcard { border: 2px solid var(--black); box-shadow: 3px 3px 0 var(--black); }
.drawer__knobs { margin: 18px 0; padding-top: 4px; }
.drawer__knobs .field label { color: var(--black); }
.drawer__stage { margin-top: 18px; }

/* the boundary map editor */
.boundarymap__canvas { height: 440px; border: 2px solid var(--black); border-radius: 2px; }
.boundarymap__canvas .leaflet-container { font-family: var(--body); }
.vtx { background: var(--magenta); border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(28, 23, 20, .5); cursor: grab; }
.vtx:active { cursor: grabbing; }

/* WYSIWYG cover: click the band/photo to set the cover image */
.coveredit { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center;
  justify-content: center; cursor: pointer; background: rgba(28, 23, 20, .28);
  opacity: 0; transition: opacity .14s ease; }
.deck__cover:hover .coveredit, .coveredit:focus-within { opacity: 1; }
.coveredit__hint { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: rgba(28, 23, 20, .55); border-radius: 3px; padding: 5px 10px; }
.coveredit__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---- desktop: same content, desk furniture ----
   Wide screens trade the bottom tab bar for a left sidebar ruled off by one thin
   line. Sidebar and content travel together as one 820px shell, centered:
   220px sidebar + 120px gutter + 480px content column. */
/* the feed's sidebar is desk furniture only — a phone keeps the feed immersive */
.apptabs--desk { display: none; }
@media (min-width: 900px) {
  /* the content column breathes wider at a desk: 220 sidebar + 120 gutter + 560 */
  .app:not(.app--wide) { max-width: 560px; }
  .apptabs { top: 0; right: auto; left: calc((100% - 900px) / 2); width: 220px;
    padding-bottom: 0; border-top: 0; border-right: 1px solid var(--hairline);
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .apptabs--desk { display: block; }
  .apptabs__inner { flex-direction: column; max-width: none; padding-top: 34px; }
  .apptab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 12px 14px; margin: 0 12px 2px; font-size: 14px; }
  .apptab__icon { width: 20px; height: 20px; }
  /* where you are, said with a block of light, not just a color */
  .apptab.is-on { background: rgba(219, 151, 42, .14); }
  .app--tabbed, .app--desktabs { margin-left: calc((100% - 900px) / 2 + 340px); margin-right: 0;
    padding-bottom: 44px; }
  /* the sticky label is confined to the content column — its bar never crosses the sidebar */
  .pagebar { left: calc((100% - 900px) / 2 + 340px); }
  .pagebar__inner { max-width: 560px; margin: 0; }
  /* with no tab bar below, toasts follow the content column to the bottom edge */
  body:has(.apptabs) #flash { left: calc(50% + 170px);
    bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ===== TWO-PHASE: the reel-in-a-card =====
   When an idea has a video, the front face IS the video — bounded by the card
   frame, not the screen. Title bar up top with the proposer's face, caption
   collapsed at the bottom, exactly the reel grammar. Flip still shows the cost:
   the video is the heart, the numbers are the proof. */
/* the whole face is raspberry underneath — the video lies over it and the red
   peeks out at the top, around the video's rounded shoulders */
.deck__face--reel { padding: 0; background: var(--magenta); }
.deck__card.is-backed .deck__face--reel { background: var(--magenta); }
.reel__top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 9px; color: #fff; }
.reel__ava { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--cream); background: var(--violet); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; }
.reel__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.reel__name { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  opacity: .8; }
.reel__title { font-family: var(--display); font-size: 20px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel__price { flex: 0 0 auto; background: var(--black); color: var(--yellow); font-weight: 800;
  font-size: 14px; padding: 5px 11px; }
/* the video: full bleed for the rest of the card, rounded shoulders up top
   so the red shows from under */
.reel__frame { position: relative; flex: 1; min-height: 0; margin: 0;
  border-radius: 18px 18px 0 0; overflow: hidden; background: var(--black);
  transform: translateZ(0); }   /* webkit: make the radius clip the video layer */
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 14px 14px;
  background: linear-gradient(to top, rgba(28, 23, 20, .85), transparent); color: #fff; }
.reel__bottom .tap { color: #fff; }
.reel__caption { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 0; color: #fff; font: inherit; cursor: pointer; }
.reel__caption p { margin: 0; font-size: 14px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 8px rgba(28, 23, 20, .6); }
.reel__caption.is-open p { display: block; max-height: 38dvh; overflow-y: auto; }
.reel__more { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  opacity: .75; }
.reel__caption.is-open .reel__more::after { content: " —"; }
.reel__payoff { color: #fff; text-shadow: 0 1px 8px rgba(28, 23, 20, .7); }
/* the picked ✓ drops below the reel's title band, inside the frame */
.deck__face--reel .deck__check { top: 70px; right: 14px; }
/* a video in the gallery cover slot plays the same way, smaller — aimed at the
   face, since neighbor videos are shot tall */
.deck__cover video { width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 50% 22%; }

/* every list card: a phone stacks the cover over the words (a video earns a
   taller cover, not the whole card); a desk puts the reel-shaped thumb on the
   left edge. Crops lead from the top, where the person is. */
.gcard { padding: 0; }
.gcard__thumb { position: relative; height: 158px; overflow: hidden;
  border-bottom: 2.5px solid var(--black); background: var(--sand); }
.gcard--video .gcard__thumb { height: 266px; }
.gcard__thumb video, .gcard__thumb img { position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: cover; object-position: 50% 0; }
.gcard__side { min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; }
.gcard__side .card__title { margin-top: 0; }
/* the price holds the card's own bottom-right corner */
.gcard .deck__price { font-size: 14px; padding: 5px 11px; }
.gcard .gcard__actions { padding-right: 88px; justify-content: flex-start; gap: 16px; }
.gcard.is-backed .gcard__thumb video, .gcard.is-backed .gcard__thumb img {
  filter: grayscale(.4); }
/* no photo → the category is the color, same cut-paper planes, stood upright */
.gcard__thumb--place   { background: var(--red); }
.gcard__thumb--event   { background: var(--yellow); }
.gcard__thumb--service { background: var(--green); }
.gcard__thumb--other   { background: var(--magenta); }
.gcard__thumb--noimg::before { content: ""; position: absolute; left: -28px; top: -38px;
  width: 140px; height: 140px; background: rgba(250, 245, 233, .16); transform: rotate(-4deg);
  clip-path: polygon(0 14%, 100% 0, 88% 100%, 8% 86%); }
.gcard__thumb--noimg::after { content: ""; position: absolute; right: -24px; bottom: -44px;
  width: 118px; height: 118px; background: rgba(28, 23, 20, .16); transform: rotate(3deg);
  clip-path: polygon(14% 4%, 100% 0, 90% 92%, 0 100%); }

/* the sound switch: one bare icon — the muted speaker turns into a sounding,
   marigold one when sound is on */
.soundtoggle .soundtoggle__on { display: none; }
.soundtoggle.is-on { color: var(--yellow); }
.soundtoggle.is-on .soundtoggle__on { display: block; }
.soundtoggle.is-on .soundtoggle__off { display: none; }

/* ===== TWO-PHASE: the Pitch tab ===== */
/* a full-screen ask, centered down the page like the wizard's question steps */
.lockup { display: flex; flex-direction: column; justify-content: center; flex: 1;
  min-height: calc(70dvh - 64px); }
/* the note from a person — feedback as a letter, not a system flag */
.notecard { background: var(--cream-2); border: 2px solid var(--black);
  border-left: 7px solid var(--magenta); padding: 13px 14px; font-size: 14px; }
.notecard__sig { margin: 8px 0 0; font-weight: 700; font-size: 12.5px; color: var(--stone); }
/* more than one idea: a short stack, each with its status and one next move */
.stackrow { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.stackrow__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stackrow__title { font-size: 16px; min-width: 0; }
.stackrow__top .pill { flex: 0 0 auto; }
.stackrow__status { margin: 0; }
.stackrow__actions { display: flex; align-items: center; gap: 16px; margin-top: 2px; }
.stackrow__remove { color: var(--slate); font-weight: 600; }
/* single-draft state: a full-width progress bar (anchored to the card) + actions */
.draftprog { margin: 4px 0 2px; }
.draftprog__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.draftprog__track { height: 9px; background: var(--cream-2); border: 2px solid var(--black);
  border-radius: 2px; overflow: hidden; }
.draftprog__track span { display: block; height: 100%; background: var(--magenta);
  transition: width .2s ease; }
.draftactions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.draftactions .btn { align-self: stretch; }          /* Finish: full width */
.draftactions .inlineform { align-self: center; }     /* Toss: a centered quiet link */
/* foot-of-the-deck invitation to pitch */
.pitchcta { text-align: center; margin-top: 24px; }
.pitchcta__q { display: block; font-size: 16px; margin-bottom: 4px; }
.pitchcta .btn { margin-top: 12px; }

/* ===== TWO-PHASE: the out-of-votes sheet ===== */
.ovrow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1.5px solid var(--line); font-size: 14px; }
.ovrow:last-child { border-bottom: 0; }
.ovrow__name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.ovrow.is-removed .ovrow__name { opacity: .4; }
.ovrow.is-removed .ovrow__act { font-weight: 800; }   /* "Undo" reads as the live action */

/* ===== TWO-PHASE: the Me card — literally a physical membership card =====
   CR80 proportions (85.6 × 54), rounded corners, the issuer band, an ID photo,
   dense labeled fields, a barcode strip with the member number, a faint seal. */
.idcard { position: relative; aspect-ratio: 54 / 85.6; max-width: 312px; margin: 0 auto;
  min-height: max-content;   /* the interim fine print may push past true card ratio */
  display: flex; flex-direction: column; --mx: 0.3; --my: 0.2;
  background: linear-gradient(155deg, #FFFBF0, var(--cream) 45%, #F1E8D2);
  color: var(--ink); border: 2px solid var(--black);
  border-radius: 14px; overflow: hidden; box-shadow: var(--soft-lift);
  transform: perspective(900px); transform-style: preserve-3d; will-change: transform;
  transition: transform .18s ease-out; touch-action: pan-y; cursor: pointer;
  --t-text: var(--ink); --t-muted: var(--stone); --t-head: var(--black); }
/* the faint print texture a real card carries */
.idcard::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-38deg, transparent 0 7px, rgba(28, 23, 20, .025) 7px 8px); }
/* the laminate sheen — a pool of light that follows your finger as it tilts */
.idcard::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(60% 50% at calc(var(--mx) * 100%) calc(var(--my) * 100%),
    rgba(255, 255, 255, .42), rgba(255, 255, 255, .07) 45%, transparent 70%);
  mix-blend-mode: soft-light; }
.idcard__band { flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; color: #fff; border-bottom: 2px solid var(--black);
  background: linear-gradient(115deg, #6A4699, var(--violet) 55%, #3D2766); }
.idcard__mark { width: 16px; height: 16px; flex: 0 0 auto; }
.idcard__org { font-family: var(--display); font-size: 15px; letter-spacing: .04em; }
.idcard__type { font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  opacity: .92; }
.idcard__body { position: relative; flex: 1; display: flex;
  flex-direction: column; gap: 11px; padding: 14px 16px; }
.idcard__seal { position: absolute; right: 8px; top: 6px; width: 88px; height: 88px;
  color: var(--black); opacity: .06; pointer-events: none; }
.idcard__row { display: flex; gap: 14px; align-items: stretch; }
.idcard__photo { flex: 0 0 46%; aspect-ratio: 3 / 4; border: 2px solid var(--black);
  background: var(--cream-2); color: var(--black); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; }
.idcard__photo img { width: 100%; height: 100%; object-fit: cover; }
/* the portrait doubles as the photo uploader — a tap-target with a label baked in */
.idcard__photoform { display: contents; }
.idcard__photo--edit { position: relative; cursor: pointer; }
.idcard__photofile { position: absolute; width: 1px; height: 1px; opacity: 0; }
.idcard__photoadd { position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 4px; background: rgba(10, 21, 43, .8); color: #fff; }
.idcard__sidefields { flex: 1; min-width: 0; display: flex; flex-direction: column;
  justify-content: space-between; padding: 2px 0; }
.idcard__field { min-width: 0; }
.idcard__label { display: block; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--magenta); margin-bottom: 1px; }
.idcard__value { font-size: 12.5px; font-weight: 700; line-height: 1.25; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idcard__name { font-family: var(--display); font-size: 26px; font-weight: 500; line-height: 1;
  margin: 0; color: var(--black); }
/* the fun numbers of your life on the block, ruled off like a ledger */
.idcard__stats { margin-top: auto; display: flex; border-top: 1.5px solid var(--line);
  padding-top: 9px; }
.idcard__stat { flex: 1; display: flex; flex-direction: column; gap: 0; }
.idcard__stat + .idcard__stat { border-left: 1.5px solid var(--line); padding-left: 12px; }
.idcard__statnum { font-family: var(--display); font-size: 24px; line-height: 1;
  color: var(--black); font-variant-numeric: tabular-nums; }
.idcard__strip { flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 7px 14px; background: var(--cream-2); border-top: 1.5px solid var(--line); }
.idcard__barcode { width: 86px; height: 20px; flex: 0 0 auto;
  background: repeating-linear-gradient(90deg,
    var(--black) 0 2px, transparent 2px 4px, var(--black) 4px 5px, transparent 5px 9px,
    var(--black) 9px 12px, transparent 12px 13px, var(--black) 13px 14px, transparent 14px 18px); }
.idcard__no { font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  font-variant-numeric: tabular-nums; }
.idcard__status { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone); }
.idcard__status.is-ok { color: var(--green); }
/* not confirmed yet: the WHOLE card wears it — an interim card, dashed edge,
   slate band, the fine print. Real once verified. */
.idcard--pending { border-style: dashed; }
.idcard--pending .idcard__band { background: linear-gradient(115deg, #5E6F86, #46566B 55%, #364457); }
.idcard__fineprint { margin: 7px 0 0; font-size: 8px; line-height: 1.5; letter-spacing: .05em;
  text-transform: uppercase; color: var(--stone);
  /* reserve two lines so pending and confirmed reserve identical space — the
     card is the same height either way no matter how the copy wraps */
  min-height: 24px; }
/* at a desk the card lies the other way — landscape, like it's on the table */
@media (min-width: 900px) {
  .idcard { aspect-ratio: 85.6 / 54; max-width: 470px; }
  .idcard__body { display: grid; grid-template-columns: 138px 1fr; gap: 7px 16px;
    align-content: start; }
  .idcard__row { display: contents; }
  .idcard__photo { grid-column: 1; grid-row: 1 / span 4; aspect-ratio: auto;
    align-self: stretch; }
  .idcard__sidefields { grid-column: 2; flex-direction: row; flex-wrap: wrap;
    justify-content: flex-start; gap: 6px 18px; padding: 0; }
  .idcard__body > .idcard__field, .idcard__stats, .idcard__fineprint { grid-column: 2; }
  .idcard__stats { margin-top: 2px; }
  .idcard__seal { top: auto; bottom: 6px; }
}

/* the notify control — a labelled pill that names its own state and reads as a
   button: it shows On (filled) or Off (outline), and a tap flips it. No guessing
   which way a bare switch points. */
.optpill { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.optpill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.optpill__face { min-width: 60px; text-align: center; padding: 9px 18px; border-radius: 999px;
  font-weight: 800; font-size: 13px; letter-spacing: .02em; transition: background .15s ease; }
.optpill__face--on  { display: none; background: var(--green); color: #08210f; }
.optpill__face--off { display: inline-block; background: transparent; color: var(--slate);
  box-shadow: inset 0 0 0 2px rgba(156, 173, 194, .4); }
.optpill input:checked ~ .optpill__face--on  { display: inline-block; }
.optpill input:checked ~ .optpill__face--off { display: none; }
.optpill input:focus-visible ~ .optpill__face { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* the bottom-of-profile info sits in its own deeper pool of blue */
.profilepanel { margin: 26px -20px 0; padding: 20px; background: var(--navy-2);
  border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); }


/* gesture words track the pointer, not the window: a mouse clicks and scrolls */
.g-desk { display: none; }
@media (hover: hover) and (pointer: fine) {
  .g-touch { display: none; }
  .g-desk { display: inline; }
}

/* stillness for those who ask for it */
@media (prefers-reduced-motion: reduce) {
  .is-armed .say > *, .is-armed .cut, .is-armed .paper {
    opacity: 1 !important; transform: none !important; transition: none !important; }
  .bldg, .bldg__after, .coin, .aw, .awfill { transition: none !important; }
  .hl { background-size: 100% 100% !important; }
  .rise, .beat__cue, .cut, .bt__row--next { animation: none !important; }
  .btn, .chip, .gcard, .deck__cover img { transition: none !important; }
}