/* SICK ASS FOO'S — the board, as a component.
   ------------------------------------------------------------------------
   THIS FILE IS LOADED BY TWO PAGES: /foos/ (the standalone module) and
   /drive/ (the pledge drive, which shows the board inline). One
   implementation, two hosts — the whole reason it was extracted rather than
   copied. A copy would have drifted the first time a skin changed.

   EVERYTHING IS SCOPED TO .pw-foos, including the custom properties. The
   drive page is cream-and-chocolate 1970s local television; this is a dark
   studio. Left on :root the two palettes would have overwritten each other,
   and the direction of the damage would depend on stylesheet order — the
   kind of bug that looks like a caching problem. Nothing here styles `body`,
   `html` or bare element selectors for the same reason.

   The markup this expects is built by board.js. Keep the two in step. */
.pw-foos{
  --gs-ink:#fff3d0; --gs-bg:#140a24; --gs-bg2:#241041;
  --gs-gold:#ffd447; --gs-hot:#ff4d6d; --gs-cyan:#3fe0d0; --gs-violet:#8a5cf6;
  --gs-panel:#1d0f36; --gs-line:rgba(255,212,71,.35);
  --font-disp:"Futura","Avant Garde","Century Gothic",'Trebuchet MS',sans-serif;
  --font-head:"Franklin Gothic Condensed","Haettenschweiler","Impact","Arial Narrow",sans-serif;
  --font-ui:"OCR A Extended",ui-monospace,"Courier New",monospace;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--gs-ink); font-family:var(--font-body);
}
.pw-foos *{box-sizing:border-box}
.pw-foos a{color:var(--gs-cyan)}

/* ---- the tote board ------------------------------------------------------ */
.pw-foos .pwf-tote{
  display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0 0;
}
.pw-foos .pwf-tote .pwf-cell{
  background:#0b0416;border:2px solid var(--gs-line);border-radius:8px;
  padding:.55rem .9rem;min-width:104px;
}
.pw-foos .pwf-tote .pwf-n{
  display:block;font-family:var(--font-ui);font-size:1.45rem;color:var(--gs-gold);
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.pw-foos .pwf-tote .pwf-l{
  display:block;font-family:var(--font-ui);font-size:.52rem;letter-spacing:2px;
  text-transform:uppercase;color:#9d8bbd;margin-top:.25rem;
}

/* ---- the skin switcher --------------------------------------------------- */
.pw-foos .pwf-sets{
  display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;
  margin:1.15rem auto 0;
}
.pw-foos .pwf-sets button{
  font-family:var(--font-ui);font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;
  background:transparent;color:#c3b0e4;border:1.5px solid var(--gs-line);
  border-radius:999px;padding:.45rem .8rem;cursor:pointer;
}
.pw-foos .pwf-sets button[aria-pressed="true"]{
  background:var(--gs-gold);color:#20102f;border-color:var(--gs-gold);font-weight:700;
}

/* ---- SET 1: THE GAME SHOW ------------------------------------------------ */
/* Trilon cards on a squares grid. Tap flips to the shoutout, the way the
   panels on a 70s board rotated to show the prize behind them. */
.pw-foos .pwf-board{display:grid;gap:.7rem;margin-top:1.5rem}
/* align-items:start, not the grid default of stretch. Without it every card
   in a row is stretched to match its TALLEST sibling -- so the one donor
   whose tier line happens to wrap (a long name, "· ×N gifts", a font that
   measures a hair wider in one browser than another) silently inflates the
   three shorter cards next to it, which is the mismatched-row-height bug D
   caught live on Safari (not reproducible in every engine, since it only
   shows up once something in that ROW actually wraps). The face-height
   comment below already describes "the card is always exactly as tall as
   its content" as the intent; align-items:start is what actually delivers
   that instead of only being true when nothing in the row wraps. */
.pw-foos[data-skin="gameshow"] .pwf-board{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-items:start;
}

.pw-foos[data-skin="gameshow"] .pwf-foo{
  perspective:900px;background:none;border:0;padding:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;
}
.pw-foos[data-skin="gameshow"] .pwf-foo .pwf-card{
  /* display:block is LOAD-BEARING and it is the third time this trap has bitten
     today. `.pwf-card` is a <span>. The two faces inside it are position:absolute
     with inset:0, and an INLINE box is not a containing block with a usable
     width -- so the faces collapsed to about one character wide, the text ran
     vertically, and the cards stacked on top of the footer because absolute
     children left the span with no height either. Nothing errored. */
  display:block;
  position:relative;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.3,.9,.3,1);
  /* FIXED, not min. D asked for every card on the board to be the same size --
     a real game-show grid, not a ragged one where the tallest donor's content
     sets each row. 150px comfortably fits the tallest realistic content today
     (name, amount, tier + the "x N gifts" flourish, a date, the tap hint) with
     room to spare. See .pwf-who / .pwf-tier below for how a name or tier long
     enough to actually threaten that budget is handled -- clamped, not left to
     blow the box open the way the min-height floor used to allow. */
  height:150px;
}
.pw-foos[data-skin="gameshow"] .pwf-foo[aria-expanded="true"] .pwf-card{transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){
  .pw-foos[data-skin="gameshow"] .pwf-foo .pwf-card{transition:none}
}
.pw-foos[data-skin="gameshow"] .pwf-face{
  display:flex;position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:10px;padding:.85rem .9rem;flex-direction:column;overflow:hidden;
  border:2px solid var(--gs-gold);
  background:linear-gradient(160deg,var(--gs-panel),#120829);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35), 0 6px 0 rgba(0,0,0,.4);
}
/* THE FRONT FACE FILLS THE FIXED-HEIGHT CARD AND CLIPS (overflow:hidden,
   inherited from .pwf-face above) RATHER THAN GROWING TO FIT CONTENT.
   That used to be backwards on purpose: a long name blew straight through the
   border because the front face was left to size itself and the outer card
   had only a min-height floor under it, so a taller-than-expected face was
   never stopped and never noticed ("Ramona Q. Verylongnamegoeshere" ran two
   lines through the bottom, silently). Now the card is the fixed size D
   wants, the front face is pinned to fill exactly that (height:100%), and
   the two lines that could realistically overrun it -- the name and the
   tier/gift-count line -- are clamped to one line each below instead of
   being left to overflow into a face that no longer grows for them. The back
   is still absolute (it has to be, to sit behind) and still scrolls if a
   long shoutout outgrows it, unchanged. */
.pw-foos[data-skin="gameshow"] .pwf-face.pwf-front{position:relative;inset:auto;width:100%;height:100%}
.pw-foos[data-skin="gameshow"] .pwf-face.pwf-back{overflow:auto}
.pw-foos[data-skin="gameshow"] .pwf-face.pwf-back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,#3a1250,#1b0733);
  border-color:var(--gs-hot);justify-content:center;
}
.pw-foos[data-skin="gameshow"] .pwf-num{
  font-family:var(--font-ui);font-size:.55rem;letter-spacing:2px;color:#9d8bbd;
  display:block;
}
.pw-foos[data-skin="gameshow"] .pwf-who{
  display:block;font-family:var(--font-disp);font-weight:800;letter-spacing:-.01em;
  font-size:1.15rem;line-height:1.15;margin-top:.3rem;color:var(--gs-ink);
  /* ONE LINE, ELLIPSIZED. A fixed-height card can no longer grow for a name
     that wraps to two lines -- clamping here is what stands in for the room
     a taller card used to make for it. white-space:nowrap does the clamping;
     overflow-wrap is meaningless on a line that is never allowed to wrap, but
     stays harmless if this rule is ever lifted. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;
}
.pw-foos[data-skin="gameshow"] .pwf-foo.pwf-anon .pwf-who{color:var(--gs-cyan);font-style:italic}
.pw-foos[data-skin="gameshow"] .pwf-amt{
  display:block;margin-top:auto;font-family:var(--font-ui);font-size:1.35rem;
  color:var(--gs-gold);font-variant-numeric:tabular-nums;
}
/* Goods, not money. The amount slot is a big tabular monospace number; a
   phrase like "food and clothing" set in it looks like a serial number and
   overruns a narrow card. Smaller, wrapped, and in the body face. */
.pw-foos[data-skin="gameshow"] .pwf-amt.pwf-goods{
  font-family:var(--font-disp);font-size:.95rem;line-height:1.25;
  font-variant-numeric:normal;text-transform:none;overflow-wrap:anywhere;
}
.pw-foos[data-skin="marquee"] .pwf-amt.pwf-goods,
.pw-foos[data-skin="credits"] .pwf-amt.pwf-goods{
  font-family:var(--font-disp);font-size:.82rem;white-space:normal;
}
.pw-foos[data-skin="gameshow"] .pwf-tier{
  display:block;font-family:var(--font-ui);font-size:.52rem;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gs-hot);margin-top:.15rem;
  /* This is the line that started the whole fixed-height problem: "SOLID
     CITIZEN · x2 GIFTS" wrapping to two lines (font metrics differ enough
     between engines that it wrapped in Safari and not elsewhere) was what
     inflated a card past its neighbors before the grid even had a fixed
     height to clip against. One line, ellipsized, same reasoning as .pwf-who. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pw-foos[data-skin="gameshow"] .pwf-when{
  display:block;font-family:var(--font-ui);font-size:.52rem;letter-spacing:1.4px;
  color:#8d7bad;margin-top:.35rem;
}
/* THE LEDGER, on the back — a receipt-tape list of every gift on file, date
   left, amount right, newest on top. Only drawn for a donor who has given
   more than once (see board.js): a single gift already has its date and
   amount on the FRONT, and printing it again here would just be the same
   number twice. Same OCR-A monospace the rest of the card's fine print
   uses, so it reads as one more line of terminal output, not a table
   dropped in from somewhere else. */
.pw-foos[data-skin="gameshow"] .pwf-ledger{
  display:block;width:100%;margin-bottom:.65rem;padding-bottom:.55rem;
  border-bottom:1px solid rgba(255,212,71,.25);
}
.pw-foos[data-skin="gameshow"] .pwf-ledger-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;
  font-family:var(--font-ui);font-size:.66rem;letter-spacing:.4px;padding:.14rem 0;
}
.pw-foos[data-skin="gameshow"] .pwf-ledger-date{color:#9d8bbd;white-space:nowrap}
.pw-foos[data-skin="gameshow"] .pwf-ledger-amt{
  color:var(--gs-gold);font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right;
}
.pw-foos[data-skin="gameshow"] .pwf-shout{
  display:block;font-size:.92rem;line-height:1.5;color:var(--gs-ink);font-style:italic;
}
.pw-foos[data-skin="gameshow"] .pwf-shout.pwf-none{color:#b9a6d8;font-style:normal;font-family:var(--font-ui);font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase}
.pw-foos[data-skin="gameshow"] .pwf-flip{
  display:block;font-family:var(--font-ui);font-size:.5rem;letter-spacing:1.6px;
  text-transform:uppercase;color:#9d8bbd;margin-top:.55rem;
}

/* ---- SET 2: THE MARQUEE -------------------------------------------------- */
/* Names up in lights on a theater marquee: one long strip per donor. */
.pw-foos[data-skin="marquee"] .pwf-board{gap:.45rem}
.pw-foos[data-skin="marquee"] .pwf-foo{
  display:flex;align-items:baseline;gap:.7rem;width:100%;text-align:left;
  background:#0b0416;border:2px solid var(--gs-line);border-left:6px solid var(--gs-gold);
  border-radius:6px;padding:.7rem .9rem;color:inherit;font:inherit;cursor:pointer;
}
.pw-foos[data-skin="marquee"] .pwf-card{display:contents}
.pw-foos[data-skin="marquee"] .pwf-face.pwf-back{display:none}
.pw-foos[data-skin="marquee"] .pwf-num{display:none}
.pw-foos[data-skin="marquee"] .pwf-face{display:contents}
.pw-foos[data-skin="marquee"] .pwf-who{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;
  font-size:1.1rem;color:var(--gs-gold);overflow-wrap:anywhere;
}
.pw-foos[data-skin="marquee"] .pwf-foo.pwf-anon .pwf-who{color:var(--gs-cyan)}
.pw-foos[data-skin="marquee"] .pwf-amt{
  margin-left:auto;font-family:var(--font-ui);font-size:1rem;color:var(--gs-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pw-foos[data-skin="marquee"] .pwf-tier,.pw-foos[data-skin="marquee"] .pwf-when,.pw-foos[data-skin="marquee"] .pwf-flip{display:none}
.pw-foos[data-skin="marquee"] .pwf-shout{
  flex-basis:100%;font-size:.82rem;color:#c3b0e4;font-style:italic;line-height:1.5;
}
.pw-foos[data-skin="marquee"] .pwf-shout.pwf-none{display:none}

/* ---- SET 3: THE CREDIT ROLL ---------------------------------------------- */
/* End-of-broadcast credits: centered, quiet, everybody the same size. The
   deliberate opposite of the game show — some people would rather be thanked
   than ranked. */
.pw-foos[data-skin="credits"] .pwf-board{gap:0;text-align:center;max-width:520px;margin-inline:auto}
.pw-foos[data-skin="credits"] .pwf-foo{
  display:block;width:100%;background:none;border:0;color:inherit;font:inherit;
  padding:.75rem 0;border-bottom:1px solid rgba(255,212,71,.14);cursor:pointer;
}
.pw-foos[data-skin="credits"] .pwf-card,.pw-foos[data-skin="credits"] .pwf-face{display:contents}
.pw-foos[data-skin="credits"] .pwf-face.pwf-back{display:none}
.pw-foos[data-skin="credits"] .pwf-num,.pw-foos[data-skin="credits"] .pwf-tier,.pw-foos[data-skin="credits"] .pwf-flip{display:none}
.pw-foos[data-skin="credits"] .pwf-who{
  display:block;font-family:var(--font-disp);font-weight:700;font-size:1.05rem;
  color:var(--gs-ink);letter-spacing:.01em;
}
.pw-foos[data-skin="credits"] .pwf-foo.pwf-anon .pwf-who{color:#c3b0e4}
.pw-foos[data-skin="credits"] .pwf-amt{
  display:block;font-family:var(--font-ui);font-size:.72rem;color:var(--gs-gold);
  margin-top:.2rem;
}
.pw-foos[data-skin="credits"] .pwf-when{
  display:block;font-family:var(--font-ui);font-size:.52rem;letter-spacing:1.4px;
  color:#8d7bad;margin-top:.15rem;
}
.pw-foos[data-skin="credits"] .pwf-shout{
  display:block;font-size:.85rem;color:#d9c8f2;font-style:italic;margin-top:.3rem;line-height:1.5;
}
.pw-foos[data-skin="credits"] .pwf-shout.pwf-none{display:none}

/* ---- states -------------------------------------------------------------- */
.pw-foos .pwf-msg{
  margin:2rem auto;max-width:34rem;text-align:center;
  border:2px dashed var(--gs-line);border-radius:12px;padding:1.5rem 1.2rem;
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:1.4px;line-height:2;
  text-transform:uppercase;color:#c3b0e4;
}
.pw-foos .pwf-msg b{display:block;font-family:var(--font-disp);font-size:1.2rem;letter-spacing:0;
  text-transform:none;color:var(--gs-gold);margin-bottom:.6rem}
.pw-foos .pwf-msg a{color:var(--gs-cyan)}