/* ===========================================================================
   kits.css — the outfitting counter
   ---------------------------------------------------------------------------
   Four cards and one panel. Every class kt*-prefixed. Same steel-and-go
   grammar as the route screen, and the same 44px touch floor.
   =========================================================================== */

.ktWrap{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:radial-gradient(120% 90% at 30% 40%, rgba(18, 26, 35, 0.82) 0%, rgba(8, 12, 17, 0.90) 70%, rgba(4, 7, 13, 0.94) 100%);
  color:var(--s2-ivory); font-family:var(--s2-hwy); overflow:hidden;
}

.ktHead{
  flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:0 14px; height:40px;
  background:linear-gradient(180deg,var(--s2-steel-a),var(--s2-steel-b));
  border-bottom:1px solid var(--s2-keyline);
}
.ktTitle{ font-size:var(--s2-t-label); font-weight:700; letter-spacing:.1em; }
.ktWhere{ font-size:var(--s2-t-key); color:var(--s2-mute); letter-spacing:.14em;
          text-transform:uppercase; }
.ktCash{ margin-left:auto; font-size:var(--s2-t-label); font-weight:700; color:var(--s2-amber); }

.ktBody{ flex:1 1 auto; display:flex; min-height:0; gap:12px; padding:12px;
  width:100%; max-width:1560px; max-height:760px; margin:auto; }

/* ---- the four kits ------------------------------------------------------ */
.ktRack{
  flex:1 1 auto; display:grid; gap:10px; min-width:0;
  grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr);
}
.ktCard{
  min-height:44px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:14px 16px;
  background:linear-gradient(180deg,rgba(17,22,31,.96),rgba(8,11,17,.96));
  border:1px solid var(--s2-keyline); border-radius:4px;
  color:var(--s2-ivory); font-family:var(--s2-hwy);
}
.ktCard:hover{ border-color:var(--s2-mute); }
.ktTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ktNm{ font-size:var(--s2-t-label); letter-spacing:.08em; font-weight:700; line-height:1.15; }
.ktCost{ flex:0 0 auto; font-size:var(--s2-t-label); color:var(--s2-amber); font-weight:700; }
.ktCargoRow{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:70px; }
.ktCargo{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:54px; border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.26); border-radius:3px; font-family:var(--s2-hwy);
}
.ktCargoIc{ font-size:30px; line-height:1; filter:saturate(.88); }
.ktCargo b{
  position:absolute; right:-4px; bottom:-5px; min-width:15px; height:15px;
  padding:0 3px; border-radius:8px; background:var(--s2-go); color:var(--s2-go-ink);
  min-width:18px; height:18px; font-size:12px; line-height:18px; text-align:center;
}
.ktSummary{ font-size:12px; line-height:1.1; letter-spacing:.11em; color:var(--s2-mute); text-align:center; }
.ktOn{ border-color:var(--s2-go); background:linear-gradient(180deg,rgba(14,111,60,.5),rgba(10,79,43,.35)); }
.ktOn .ktNm{ color:var(--s2-go-key); }
.ktOn .ktSummary{ color:var(--s2-go-key); }
/* Priced out is shown, not hidden — knowing what you cannot afford is
   information, and the panel says so in words as well. */
.ktPoor .ktCost{ color:var(--s2-alarm); }
.ktPoor{ opacity:.72; }

/* ---- the one panel that explains ---------------------------------------- */
.ktPanel{
  flex:0 0 40%; max-width:360px; min-width:220px;
  display:flex; flex-direction:column; gap:6px;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(17,22,31,.96),rgba(8,11,17,.96));
  border:1px solid var(--s2-keyline); border-radius:4px;
}
.ktPnNm{ font-size:var(--s2-t-sign); font-weight:700; line-height:1.05; }
.ktPnBlurb{ font-family:var(--s2-voice); font-size:var(--s2-t-key); color:var(--s2-mute); }
.ktPnList{ margin:2px 0 0; padding:0 0 0 14px; list-style:none; }
.ktPnList li{
  font-size:var(--s2-t-key); color:var(--s2-mute-hi); line-height:1.5;
  position:relative;
}
.ktPnList li::before{ content:'–'; position:absolute; left:-13px; color:var(--s2-off-tx); }
.ktPnList b{ color:var(--s2-go-key); }
.ktPnCost{ margin-top:auto; font-size:var(--s2-t-label); font-weight:700; color:var(--s2-amber); }
.ktPnCost i{ font-style:normal; font-size:var(--s2-t-key); color:var(--s2-alarm); font-weight:400; }

.ktGo{
  /* nowrap on both axes: the arrow wrapped onto its own line under the label
     because the button stretches tall and the flex line was allowed to break */
  min-height:44px; max-height:56px;
  /* flex-direction:row EXPLICITLY. styles.css .choice sets
     `flex-direction:column`, and this button needs that class because
     tools/playtest.js advances screens by clicking the first .choice.
     Without the override the arrow stacked under the label. */
  display:flex; flex-direction:row; align-items:center;
  justify-content:center; gap:8px;
  flex-wrap:nowrap; white-space:nowrap;
  background:var(--s2-go); color:var(--s2-go-ink); border:0; border-radius:3px;
  cursor:pointer; font-family:var(--s2-hwy); font-size:var(--s2-t-label);
  font-weight:700; letter-spacing:.1em;
}
.ktGo i{ font-style:normal; }
.ktGo:hover{ filter:brightness(1.08); }
.ktDim{ background:var(--s2-off-key); color:var(--s2-mute); }

.ktAlt{
  min-height:44px; background:none; border:0; cursor:pointer;
  color:var(--s2-mute); font-family:var(--s2-hwy); font-size:var(--s2-t-key);
  text-decoration:underline; text-underline-offset:3px;
}
.ktAlt:hover{ color:var(--s2-ivory); }

/* ---- portrait and short landscape --------------------------------------- */
@media (max-aspect-ratio:1/1){
  .ktBody{ flex-direction:column; }
  .ktRack{ grid-template-columns:repeat(2,1fr); grid-template-rows:auto; }
  .ktPanel{ flex:0 0 auto; max-width:none; }
}
@media (max-height:400px){
  .ktHead{ height:34px; }
  .ktPnNm{ font-size:var(--s2-t-label); }
  .ktPnBlurb{ display:none; }   /* the kit names already say it at this size */
  .ktCard{ gap:4px; padding:7px 9px; }
  .ktCargo{ width:25px; height:23px; }
  .ktCargoIc{ font-size:14px; }
  .ktCargoRow{justify-content:flex-start;min-height:23px;gap:7px}
  .ktNm{font-size:var(--s2-t-key)}
  .ktSummary{text-align:left;font-size:var(--s2-t-key)}
}

/* ---- the goal line, present but not the crown --------------------------- */
/* §J2 (amended) requires the goal on an allocation screen; §8.3's outfitting
   rule requires the CROWN to be the thing you are choosing. Both hold only if
   the goal is scaled down here — at its default 34px it outsized the kit name
   and took the crown, which is the store telling you about the referendum
   instead of about the kit. */
.ktWrap .s2-goal{
  position:static; margin:0 14px; padding:6px 0 0;
  transform:none; pointer-events:none;
}
.ktWrap .s2-goal .v{ font-size:19px; line-height:1.1; }
/* r2 (the "THE REFERENDUM · AND HOLDING" caption) is absolutely positioned by
   the shell and landed on top of r1 once the block was taken out of the frame
   grid. Put it back in flow under the numbers. */
.ktWrap .s2-goal .r1{ height:auto; }
.ktWrap .s2-goal .r2{ position:static; margin-top:2px; }
.ktWrap .s2-goal .s2-scrim{ display:none; }   /* the panel has its own ground */
.ktWrap .s2-goal .k,
.ktWrap .s2-goal .t{ font-size:var(--s2-t-key); }
/* The selected kit is the decision this screen is asking the player to make.
   Give it the actual crown token: at 26px the 30px cargo emoji became the
   largest mark on the frame, so the screen visually announced an icon before
   it announced the chosen strategy. Short landscape still uses the compact
   override above, where cargo icons are 14px. */
.ktPnNm{ font-size:var(--s2-t-goal); }

/* .s2-name carries the shell's absolute frame position (left:22 top:60 412x40).
   Borrowing the class for the lint's crown check dragged the kit name out of
   its panel and on top of the goal line. The class stays — it is how the
   design system identifies a screen's name — and its POSITIONING is undone. */
.ktPanel .ktPnNm.s2-name{
  position:static; left:auto; top:auto; width:auto; height:auto; z-index:auto;
}
/* This must follow the crown rule above. The earlier short-height declaration
   was correct in value but lost on source order, leaving the iPhone landscape
   panel three pixels outside the stage. At 26px the name remains the largest
   type on the compact frame while the selected panel fits again. */
@media (max-height:400px){
  .ktPanel .ktPnNm.s2-name{ font-size:var(--s2-t-sign); }
}