/* ===========================================================================
   card.css — THE EVENT CARD
   ---------------------------------------------------------------------------
   Authored at 952x427, the deciding viewport, inside shell2's own .s2 stage
   box — so it scales with --s2-scale and never reflows, exactly like every
   other screen in the set.

   Every class here is ec*-prefixed and every rule is scoped under .ecMode, so
   nothing in this file can reach a screen card.js does not draw.

   The specificity trick is map.css's and it is load-bearing: shell2.css's
   `.s2 :where(*)` reset weighs (0,1,0) and zeroes position, display, padding
   and font on everything inside the stage. A bare `.ecCard` weighs the same
   and wins on source order alone, because this file is linked after
   shell2.css. Do not "strengthen" these selectors — they are already right.
   =========================================================================== */

/* --- the world moves right ------------------------------------------------
   §2 fixes TRUCK-WIDE at x284 because it clears the SIGN at 646 and the
   BILLBOARD at 272. This screen has neither: the sign is off the frame and the
   card takes the whole left column. So the truck goes to the RIGHT half, which
   is the one departure from §2 this file makes and it is declared rather than
   drifted into. The crew keeps its authored offset from the cab (+40, +22).   */
.ecMode .truck.ecTruck   {left:566px;top:172px;width:352px;height:176px}
.ecMode .s2-crew.ecCrew  {left:606px;top:194px;width:126px;height:44px}

/* --- the card ------------------------------------------------------------
   Left column, top to just above the action row. 498px wide against the old
   slab's 250, and auto-height under a cap, so a forty-word card is four lines
   and a nine-word card is one — instead of every card being poured into the
   same 168px box.                                                            */
.ecCard{
  position:absolute;left:22px;top:56px;width:498px;max-height:268px;z-index:5;
  padding:15px 18px 17px;border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,rgba(15,20,28,.93) 0,rgba(7,10,16,.94) 100%);
  box-shadow:0 12px 28px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.07);
}

/* THE CROWN. §T9's corrected rule, applied to the event: the largest type on
   the frame answers what you are doing here, and on this frame that is the
   question being asked. T-GOAL, the same step the goal line used to hold. */
.ecCard .ecT{
  display:block;font-size:var(--s2-t-goal);line-height:1.03;letter-spacing:.02em;
  text-transform:uppercase;color:var(--s2-ivory);
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}
/* one ramp step down, T-GOAL to T-SIGN, for the long titles in the deck */
.ecCard .ecT.sm{font-size:var(--s2-t-sign);line-height:1.08;letter-spacing:.03em}

/* THE BODY, in the VOICE serif — one of only three places in the game set in
   it. 16px over 462px of measure is roughly 62 characters a line, so the
   deck's 240-character worst case is four lines and the 12px floor that
   s2FitSlab() spends most of its logic defending is never reached. */
.ecCard .ecB{
  display:block;margin-top:12px;
  font-family:var(--s2-voice);font-weight:400;font-size:16px;line-height:1.38;
  letter-spacing:0;color:#e2ddd1;
}

/* a hairline under the crown, so the title and the prose read as two things
   rather than one paragraph that starts in caps */
.ecCard .ecB::before{
  content:"";display:block;width:52px;height:2px;margin:0 0 11px;border-radius:1px;
  background:linear-gradient(90deg,rgba(242,238,228,.55),rgba(242,238,228,0));
}

/* An outcome is the consequence, not another dashboard. The changed stocks
   live beside the prose; the persistent six-cell rail returns on the road. */
.ecResult .s2-rail{display:none}
.ecResult .ecCard{width:540px}
.ecResult .ecChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.ecResult .ecDelta{padding:5px 7px;border:1px solid rgba(230,222,207,.28);border-radius:2px;font-family:var(--s2-hwy);font-size:11px;line-height:1;letter-spacing:.07em}
.ecResult .ecDelta.gain{color:#73e8a7;border-color:rgba(70,212,135,.42)}
.ecResult .ecDelta.loss{color:#ff947d;border-color:rgba(255,111,82,.42)}

/* --- the choices ----------------------------------------------------------
   shell2.css already owns .s2-act1 and .s2-verb.ev — a row at y352, 62px tall,
   labels centred and allowed to wrap. Nothing to add except the reminder that
   `.choice` arrives from styles.css carrying flex-direction:column, and that
   `.s2 :where(*)` has already neutralised it. This has shipped broken twice;
   it is stated here so the next reader does not have to rediscover it.        */
.ecMode .s2-act1 .s2-verb.ev{flex-direction:row}
.ecMode .s2-act1 .s2-verb.ecMap{border-color:var(--s2-keyline);color:var(--s2-mute-hi)}

/* Same trap as kits.css: .s2-name is an absolutely-positioned frame slot in
   shell2.css, so adding it to the event title for the hierarchy crown check
   lifted the title out of the card and over the body. Keep the class, drop
   the geometry. */
.ecCard .ecT.s2-name{
  position:static; left:auto; top:auto; width:auto; height:auto; z-index:auto;
}

.ecChips{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
}
.ecChips .tag{
  display:inline-block;font-size:12px;padding:3px 8px;border-radius:3px;
  font-family:var(--s2-hwy);font-weight:700;letter-spacing:.04em;line-height:1;
}