/* Mode cards: a darker banner across the top of each card carries the number, name and
   subtitle; the description sits in its own bordered frame below.  Loaded after app.css. */
.modecard{ padding:0; overflow:hidden; gap:0; }
.modecard__band{
  display:flex; flex-direction:column; gap:4px; padding:18px 22px 16px;
  background:var(--rail); color:var(--cream);
}
.modecard__band .modecard__n{ color:var(--green); }
.modecard__band .modecard__name{ color:var(--cream); }
.modecard__band .modecard__sub{ color:var(--green); }
.modecard__desc{
  display:block; margin:16px; padding:14px 16px; flex:1;
  border:2px solid rgba(29,42,21,.35); border-radius:12px; background:rgba(255,255,255,.35);
}
.modecard__desc .modecard__blurb{ color:var(--ink); }
/* each heat card gets a deeper shade of its own colour on the banner */
.modecard.modecard--yellow .modecard__band{ background:#8A6A00; }
.modecard.modecard--yellow .modecard__band .modecard__n,
.modecard.modecard--yellow .modecard__band .modecard__sub{ color:#FFE680; }
.modecard.modecard--yellow .modecard__desc{ border-color:rgba(138,106,0,.45); }
.modecard.modecard--orange .modecard__band{ background:#9A4A0A; }
.modecard.modecard--orange .modecard__band .modecard__n,
.modecard.modecard--orange .modecard__band .modecard__sub{ color:#FFC58A; }
.modecard.modecard--orange .modecard__desc{ border-color:rgba(154,74,10,.45); }
.modecard.modecard--red .modecard__band{ background:#7A241B; }
.modecard.modecard--red .modecard__band .modecard__n,
.modecard.modecard--red .modecard__band .modecard__sub{ color:#FFB3AA; }
.modecard.modecard--red .modecard__desc{ border-color:rgba(122,36,27,.45); }
/* the (i) button now sits on the banner, so it wants a light face */
.modecard__i{ background:var(--cream); border-color:var(--cream); }