/* The catalogue: /styles, /outfits, /themes, and the four wizard steps that
   pick from them (style, outfit, occasion, game).

   Direction A (docs/design/DIRECTION.md): the indigo night, brass as a
   material, pictures never floating bare, the gilt spent only where it means
   something. Nothing here is global: every rule is scoped to a class this
   lane owns, or to `.page` where it has to out-rank the light-theme rules the
   shared `order/_steps.blade.php` still prints inline in the body (a `<style>`
   in the body wins over a stylesheet in the head at equal specificity, so the
   wizard overrides below carry one extra class on purpose). */

/* ================================================================ shared */

/* the honest line under a catalogue heading: who the people in the pictures
   are, and what is still being drawn */
.cat-note {
  max-width: 62ch;
  margin: 0 0 40px;
  padding-left: 16px;
  border-left: 1px solid var(--hair);
  font: 400 15px/1.55 var(--sans);
  color: var(--muted);
}

/* a group heading inside a long catalogue: a name on a brass hairline with
   the count sitting quietly at the other end */
.cat-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.cat-band h2, .cat-band h3 {
  margin: 0;
  font: 600 20px/1.3 var(--sans);
  color: var(--champagne);
}
.cat-band .count { font: 400 14px/1.4 var(--sans); color: var(--caption); white-space: nowrap; }

/* a keylined well standing in for a picture that has not been drawn yet */
.cat-soon {
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: var(--r-pic);
  background: var(--night-deep);
  box-shadow: inset 0 0 0 1px var(--hair);
  text-align: center;
  font: 400 13px/1.4 var(--sans);
  color: var(--caption);
}

/* ============================================================ /styles */

.cat-styles .style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 32px;
}

.style-entry { min-width: 0; display: flex; flex-direction: column; }

/* the man and the woman side by side, the same size, so the only difference
   the eye can find is the drawing */
.style-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.style-pair .keyed { aspect-ratio: 1 / 1; }
.style-pair .keyed img { transition: none; }

.style-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.style-name { font: 600 17px/1.3 var(--sans); color: var(--champagne); }
.style-head .pill { margin-right: 0; }

.style-blurb {
  margin: 6px 0 0;
  font: 400 15px/1.5 var(--sans);
  color: var(--muted);
  max-width: 44ch;
}

/* the in-game figure, at the size the game draws it, standing on a brass line
   the way the cast stand on the home page */
.style-floor {
  position: relative;
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.style-floor::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hair);
}
.style-floor img {
  position: relative;
  display: block;
  height: 150px;
  width: auto;
  filter: drop-shadow(0 12px 14px rgba(4, 7, 26, .65));
}
.style-floor .stand-line {
  padding-bottom: 8px;
  font: 400 14px/1.4 var(--sans);
  color: var(--caption);
}
/* a style with no figure yet keeps the same floor, so the row still lines up */
.style-floor.empty { min-height: 150px; }

/* the pair: the same two people whose portraits are above, standing on the same
   rail. The pipeline draws every figure facing RIGHT (the facing gate says so),
   so the one on the right is turned in CSS - the file is never mirrored. */
.style-floor .figures {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.style-floor .figures img.face-left { transform: scaleX(-1); }

/* ============================================================ /outfits */

.of-filter { margin: 0 0 4px; }
.of-filter .label {
  margin: 0 0 12px;
  font: 400 15px/1.4 var(--sans);
  color: var(--muted);
}
.of-filter .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.of-filter a.pill {
  margin-right: 0;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.of-filter a.pill:hover { border-color: var(--brass-2); color: var(--champagne); }
.of-filter a.pill.on { border-color: var(--brass); color: var(--champagne); background: rgba(192, 164, 92, .12); }

.of-group { margin: 0 0 56px; }
.of-group:last-child { margin-bottom: 0; }

.of-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
/* the first group is the one that answers the question the page asks, so it
   is given the bigger pictures and the rest follow smaller */
.of-grid.wide { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }

.of-card { min-width: 0; display: block; }
.of-card .keyed, .of-card .cat-soon { aspect-ratio: 3 / 4; }
.of-card .name { display: block; margin-top: 12px; font: 600 15px/1.35 var(--sans); color: var(--champagne); }
.of-card .line { display: block; margin-top: 2px; font: 400 14px/1.4 var(--sans); color: var(--caption); }

.cat-outfits .tabbox { padding-top: 40px; }
.cat-outfits .tabs { margin-top: 32px; }

/* ============================================================= /themes */

.cat-games .world {
  padding: 64px 0;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.cat-games .world:first-of-type { border-top: 0; padding-top: 24px; }
/* the worlds alternate sides so seven of them never read as seven rows of the
   same card */
.cat-games .world:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.cat-games .world:nth-of-type(even) .world-reels { order: 2; }

.world-reels { display: grid; gap: 16px; min-width: 0; }
.world-reels.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.world-reels .reel-figure { margin: 0; min-width: 0; }
.world-reels a { display: block; text-decoration: none; }
.world-reels a .reel-stage { transition: transform .2s ease, box-shadow .2s ease; }
.world-reels a:hover .reel-stage, .world-reels a:focus-visible .reel-stage {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--brass-2), var(--shadow-pic);
}
.world-reels .reel-caption { margin-top: 12px; font: 400 14px/1.45 var(--sans); color: var(--caption); }
.world-reels .reel-caption .rname { display: block; font-weight: 600; color: var(--champagne); font-size: 15px; }
.world-reels .reel-caption .racts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 14px; }
.world-reels.two .reel-caption .racts { font-size: 13px; gap: 4px 12px; }

.world-words { min-width: 0; }
.world-words h2 { font-size: 34px; line-height: 1.1; }
.world-line { margin: 6px 0 0; font: 400 15px/1.4 var(--sans); color: var(--caption); }
.world-blurb { margin: 18px 0 0; font: 400 17px/1.6 var(--sans); color: var(--muted); max-width: 46ch; }
.world-links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; margin-top: 24px; }
.world-links .sep { color: var(--hair); }

.cat-games .how {
  margin-top: 8px;
  padding-top: 40px;
  border-top: 1px solid var(--hair);
}
.cat-games .how p { max-width: 60ch; }

/* ====================================================== the wizard steps */

/* The step indicator, the validation notice and the fields belong to the
   shared `order/_steps.blade.php` and to `css/pages/flow.css`, which that
   partial pushes onto the head stack for every wizard page. Nothing is
   restyled here: these four steps take the flow's furniture as it is and add
   only the picking. `.page` appears below where a rule has to out-rank a
   `.choice`-era selector of the same weight. */

.page .actions { margin-top: 40px; gap: 28px; }

/* --- the choice cards -------------------------------------------------
   One option in a wizard step: a keylined picture, the control beside the
   name, and the recommendation said in words rather than shouted. Every
   option is the same size and the same one click away; a recommended one is
   marked, never enlarged. */

.pick-grid { display: grid; gap: 32px 24px; }
.pick-grid.g-style { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pick-grid.g-outfit { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 20px; }
.pick-grid.g-world { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick-grid.g-plain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.pick-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: pointer;
  border-radius: var(--r-pic);
}
.pick-card .pick-pic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick-card .pick-pic.one { grid-template-columns: minmax(0, 1fr); }
.pick-card .pick-pic .keyed { aspect-ratio: 1 / 1; }
.pick-card .pick-pic.tall .keyed, .pick-card .pick-pic.tall .cat-soon { aspect-ratio: 3 / 4; }
.pick-card .pick-pic.wide .keyed, .pick-card .pick-pic.wide .cat-soon { aspect-ratio: 5 / 3; }
.pick-card .pick-pic.card .keyed, .pick-card .pick-pic.card .cat-soon { aspect-ratio: 4 / 5; }

/* the in-game figure repeated inside a wizard card, a size down; the rail is
   pushed to the foot of the card so the whole row stands on one line */
.pick-card .style-floor { margin-top: auto; padding-top: 22px; }
.pick-card .style-floor img { height: 118px; }

.pick-card .pick-body { padding: 14px 0 0; display: flex; flex-direction: column; flex: 1; }
.pick-card .pick-head { display: flex; align-items: baseline; gap: 10px; }
.pick-card .pick-head b { font: 600 17px/1.35 var(--sans); color: var(--champagne); }
.pick-card small, .pick-card .pick-line {
  display: block;
  margin-top: 6px;
  font: 400 15px/1.5 var(--sans);
  color: var(--muted);
}
.pick-card .pick-marks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pick-card .pick-marks .pill { margin-right: 0; }

/* the control itself: an 18px brass radio on the name's line, so choosing
   any option is the same single click */
.page .pick-card input[type=radio] {
  position: static;
  transform: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brass-2);
  align-self: center;
}

/* chosen: the whole card takes a brass keyline. No outline colour from the
   old paper page, and nothing grows or shrinks. */
.page .pick-card { outline: 0; box-shadow: none; transition: box-shadow .18s ease, background-color .18s ease; }
.page .pick-card:hover { box-shadow: 0 0 0 1px var(--hair); }
.page .pick-card:hover .keyed { box-shadow: 0 0 0 1px var(--brass-2), var(--shadow-pic); }
.page .pick-card:has(input:checked) {
  outline: 0;
  box-shadow: 0 0 0 1px var(--brass);
  background: rgba(192, 164, 92, .07);
}
.page .pick-card:focus-within { outline: 2px solid var(--brass-2); outline-offset: 3px; }
/* a card with a keyline needs air inside it, and the picture has to stay
   flush with the edge, so the padding lives on the parts */
.page .pick-card { padding: 10px; }
.page .pick-card .pick-body { padding: 14px 6px 4px; }

/* the plain, pictureless option (the clothes in the photo, describe it, and
   the occasions) */
/* an option with no picture has nothing to give it an edge, so it gets the
   hairline the keylined pictures already have */
.page .pick-card.plain { box-shadow: 0 0 0 1px var(--hair); }
.page .pick-card.plain:hover { box-shadow: 0 0 0 1px var(--brass-2); }
.pick-card.plain { min-height: 100%; }
.pick-card.plain .pick-body { padding: 14px 10px 12px; }
.pick-card .pick-input { display: block; margin-top: 12px; }
.page .pick-card input[type=text] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--hair);
  border-radius: var(--r-pic);
  background: var(--night);
  color: var(--champagne);
  font: 400 15px/1.4 var(--sans);
}
.page .pick-card input[type=text]::placeholder { color: var(--caption); }
.page .pick-card input[type=text]:focus-visible {
  outline: 2px solid var(--brass-2);
  outline-offset: 2px;
  border-color: var(--brass-2);
}
.pick-card small.hint { margin-top: 4px; color: var(--caption); font-size: 14px; }

/* the occasion with no occasion: a dashed keyline says "none of these" without
   making it look broken */
.page .pick-card.any { box-shadow: 0 0 0 1px transparent; border: 1px dashed var(--hair); padding: 9px; }
.page .pick-card.any:has(input:checked) { border-color: var(--brass); }

.pick-note { margin: 24px 0 0; max-width: 60ch; }

/* the suggested row of a step, set apart by a hairline rather than by size */
.pick-lead { margin: 0 0 40px; }

/* ============================================================== narrower */

@media (max-width: 1180px) {
  .cat-styles .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .of-grid.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick-grid.g-style { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick-grid.g-outfit { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  /* the alternation is a desktop idea; below this the reel always comes first.
     Both selectors carry the :nth-of-type so they out-rank the wide rules that
     set the two columns and swap them. */
  .cat-games .world,
  .cat-games .world:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 0; }
  .cat-games .world:nth-of-type(even) .world-reels { order: 0; }
  .world-words h2 { font-size: 30px; }
  .world-blurb { max-width: none; }
  .of-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pick-grid.g-world, .pick-grid.g-plain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .cat-styles .style-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .of-grid, .of-grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .world-reels.two { grid-template-columns: minmax(0, 1fr); }
  .pick-grid.g-style, .pick-grid.g-outfit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick-grid.g-world, .pick-grid.g-plain { grid-template-columns: minmax(0, 1fr); }
  .page .wsteps { gap: 0 18px; font-size: 13px; }
  .cat-band { flex-wrap: wrap; gap: 4px 16px; }
  .style-blurb { max-width: none; }
}