/* 👕 THE DRESSING ROOM — the clothes shop's card (Trym, 20 Sep 2026).
 *
 * ⚠️ 261 × 440 CSS px is the whole budget. That is the measured content box of a town card at 360×640,
 * the narrowest phone the house supports — not the 380 max-width, which is desktop. Everything below is
 * sized against 261, and nothing may assume more.
 *
 * ⭐ TWO ZONES, PINNED AND SCROLLING. Every other card in the town is one block-flow column inside an
 * `overflow: auto` box, so a tall one simply scrolls — which for a dressing room is fatal: the whole
 * point is watching the banana change while you pick, and the mirror is the first thing to scroll away.
 * The card becomes a grid here, the mirror is `auto` and the rails are `1fr` with their own scroller.
 *
 * ⚠️ NO BOX INSIDE A BOX INSIDE A BOX (design library §2: "a card inside a modal may not [keep its
 * edges]"). The card already has its border and its hard shadow. The mirror is separated by LIGHT — a
 * warm wash and a floor — and the rails by air and a label, not by more frames.
 * ⚠️ Motion is transform and opacity only (§21.4), and this file is read by the design gate now.
 */

/* the card itself stops scrolling and becomes the frame for two zones.
   ⚠️ min-height: 0 ON EVERY LINK OF THE CHAIN. A grid item's default min-height is `auto`, which means
   "as tall as my content" — so one un-zeroed link anywhere between the card and the rails makes the
   whole column grow instead of the rails scrolling, and the card goes back to being one long scroller
   with the mirror at the top of it. Measured: 59px of card scroll before this line existed. */
.tw-card--dress { overflow: hidden; display: flex; flex-direction: column; }
.tw-card--dress > div { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.tw-dress { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0.35rem; min-height: 0; flex: 1 1 auto; }
.tw-dress h2 { margin: 0; }

/* ---- the mirror: a lit changing room, built out of light rather than out of more boxes ---------- */
.tw-dress__stage {
  /* 🪞 THE MIRROR IS THE POINT OF THE ROOM, so it gets its height back — but it TAKES WHAT THE SCREEN
     HAS, which a fixed number cannot. It was 108, then 92 when the room went from three rails to five
     and 440 px of card would not hold them all; Trym, 20 Sep: "make the banana preview bigger".
     ⚠️ 132 FLAT WAS THE WRONG ANSWER and the walk showed it: on a tall window it was right, and on a
     360×640 phone it left room for two rails and half of a third — worse than what it replaced. So it
     is a clamp against the VIEWPORT: about 100 px on the shortest phone the house supports, 140 on a
     tall one, and everything in the stage sized as a share of it rather than in pixels of its own.
     What pays for the rest is the scrollbars below: the rails wore the browser's own chrome on every
     one of five rows, and a 6 px bar gives most of that back. */
  /* ⚠️ A CUSTOM PROPERTY, NOT A PERCENTAGE. `height: calc(100% - 8px)` on the canvas silently did
     nothing: the stage is a grid, its single row is `auto`, and a grid item's percentage height
     against an auto row is indefinite — so the rule resolved to `auto` and the canvas sat at its own
     176 px inside a 102 px box, clipped. Measured, not guessed. One variable, read by everything in
     the room that has to scale with it. */
  --stage: clamp(100px, 16vh, 140px);
  position: relative; height: var(--stage); display: grid; place-items: end center;
  /* the room: a warm lamp above, a cool wall, and a floor the banana stands on. No art, no new file —
     three gradients, which is also why it costs nothing and never loads late. */
  background:
    radial-gradient(ellipse 70% 42% at 50% 6%, rgba(255, 228, 150, 0.5) 0 40%, rgba(255, 228, 150, 0) 72%),
    linear-gradient(#2e2740 0 62%, #4a3a2e 62% 66%, #3a2c22 66%);
  border-bottom: 3px solid #000;
  overflow: hidden;
}
/* two tall mirrors either side, as light on a wall — the one flourish, and it is flat colour */
  /* the two tall mirrors are a SHARE of the room, so they grow and shrink with it */
.tw-dress__stage::before,
.tw-dress__stage::after {
  content: ''; position: absolute; top: 8%; width: 22%; max-width: 30px; height: calc(var(--stage) * 0.62);
  background: linear-gradient(160deg, rgba(226, 240, 255, 0.34) 0 42%, rgba(160, 190, 220, 0.22) 42% 58%, rgba(226, 240, 255, 0.3) 58%);
  border: 3px solid #241c2e; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
}
.tw-dress__stage::before { left: 10px; }
.tw-dress__stage::after { right: 10px; }
.tw-dress__stage canvas {
  position: relative; display: block; width: auto; height: calc(var(--stage) - 12px);
  image-rendering: pixelated;
  /* the banana stands ON the floor band, not in the middle of the room */
  margin-bottom: 4px;
}

/* ---- the rails: one per slot, each its own horizontal scroller --------------------------------- */
/* ⚠️ A RAIL, NOT A GRID. 261px holds five 44px targets across and the extras alone run past forty — a
   grid of forty is a wall of thumbnails that pushes the mirror off the top of the card on the first
   scroll. A rail keeps every slot one thumb-flick deep and the mirror always on screen. */
/* ⚠️ THE RAILS SNAP. If a third rail does not quite fit — and on the shortest phone it is close — what
   must never happen is a row of chips sliced in half along the bottom edge, which reads as a broken
   card rather than as something to scroll. Snapping means a scroll lands on a whole rail or none. */
.tw-dress__rails { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 0.4rem; align-content: start; min-height: 0; scroll-snap-type: y proximity; }
.tw-dress__rail { scroll-snap-align: start; }
.tw-dress__rail { display: grid; gap: 0.25rem; }
.tw-dress__of { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; font-weight: 800; }
.tw-dress__row {
  display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 4px; scrollbar-width: thin;
}

/* ⚠️ 44px, AND THAT IS THE FLOOR. The town's existing in-card buttons are 34-38px tall and that is the
   grammar for one button on a row, not for a rail of forty small targets a thumb flicks along. */
.tw-dress__chip {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; padding: 0;
  appearance: none; cursor: pointer; display: grid; place-items: center;
  background: #2a2119; color: #fffdf5; border: 3px solid #000; box-shadow: 2px 2px 0 #000;
  touch-action: manipulation;
}
.tw-dress__chip.is-on { background: linear-gradient(#ffe14d, #f2c012); color: #241c00; }
.tw-dress__chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.tw-dress__art { width: 30px; height: 30px; background: center/contain no-repeat; image-rendering: pixelated; }
/* "none" has no picture, so it gets a mark rather than an empty square that reads as a missing image */
.tw-dress__art.is-none { background: none; box-shadow: inset 0 0 0 2px rgba(255, 253, 245, 0.34); width: 22px; height: 22px; border-radius: 50%; }
.tw-dress__chip.is-on .tw-dress__art.is-none { box-shadow: inset 0 0 0 2px rgba(36, 28, 0, 0.5); }

/* a locked chip is a DOOR: dimmed, with a padlock, and a tap takes you where it is caught */
.tw-dress__chip.is-locked { opacity: 0.5; }
.tw-dress__lock {
  position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px;
  background: #ffe135; border: 2px solid #000;
  /* a padlock in eight pixels: a body with a shackle notched out of its top */
  clip-path: polygon(0 40%, 22% 40%, 22% 16%, 78% 16%, 78% 40%, 100% 40%, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .tw-dress__chip:active { transform: none; }
}

/* ---- the foot: one button, and it is the only thing that dresses the banana -------------------- */
/* ⭐ A CHANGING ROOM COMMITS ON THE WAY OUT. Trym, 20 Sep: "theres no Confirm button at the end of the
   popup for UX? Its not logical that the user can click outside the window and then the attire is
   saved." Every pick before this button changes the MIRROR and nothing else — see town-dress.js. */
.tw-dress__ok { margin: 0; padding-block: 0.45rem; }

/* ⚠️ THE RAILS GO ON PAST THE BOTTOM AND HAVE TO LOOK LIKE IT. Five rails is 367 px of scroller in a
   171 px window, and a row sliced flat along the edge reads as a broken card rather than as more to
   come. The box fades into the card's own ink at its foot, which is the only thing on screen that says
   "keep going" without a word or an arrow. A mask, so it costs no element and tints nothing. */
.tw-dress__rails {
  -webkit-mask-image: linear-gradient(#000 0 calc(100% - 18px), rgba(0, 0, 0, 0.15) 100%);
  mask-image: linear-gradient(#000 0 calc(100% - 18px), rgba(0, 0, 0, 0.15) 100%);
}

/* ---- 🍌 THE SCROLLBARS ARE THE GAME'S, not the browser's ---------------------------------------- */
/* Trym, 20 Sep 2026: "use custom banana CSS for scrollbars here". A pixel changing room with two
   platform-grey rails down it reads as a web page with a game in it. This is the house idiom — the
   homestead phone's yellow bar (homestead.astro) — at the size a 44 px chip rail can spare.
   ⚠️ AND IT BUYS THE MIRROR ITS HEIGHT BACK. The browser's own bar is about 15 px on every one of the
   five rows; six is 45 px returned, which is where the preview's 40 came from. */
.tw-dress__rails::-webkit-scrollbar { width: 8px; }
.tw-dress__row::-webkit-scrollbar { height: 6px; }
.tw-dress__rails::-webkit-scrollbar-track,
.tw-dress__row::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.34); border-radius: 999px; }
.tw-dress__rails::-webkit-scrollbar-thumb,
.tw-dress__row::-webkit-scrollbar-thumb {
  background: #ffd21f; border: 1px solid #1a1408; border-radius: 999px;
}
.tw-dress__rails::-webkit-scrollbar-thumb:hover,
.tw-dress__row::-webkit-scrollbar-thumb:hover { background: #ffe135; }
/* ⚠️ THE STANDARD PROPERTIES ARE NOT A FIREFOX FALLBACK. They were inside an @supports for Gecko
   until 20 Sep 2026, which left every Chromium that has shipped `scrollbar-color` (121+) painting a
   platform-grey bar down a pixel changing room — and the ::-webkit- rules above do nothing at all in a
   browser using overlay scrollbars, which is what this walk runs in. Both, unconditionally: the modern
   pair for every engine that understands it, the pseudo-elements for the older Chromium and Safari. */
.tw-dress__rails, .tw-dress__row { scrollbar-width: thin; scrollbar-color: #ffd21f rgba(0, 0, 0, 0.34); }