/* TripAgenda — the weather deck (IA §4b, BRAND_v1 §4/§5/§7). Token-driven.
   Docs: IA_v1.md, BRAND_v1.md
   The founding feature: top-rounded overlapping day cards, each a morning→evening
   weather gradient. Header readout is morning-left (10:00 @ start) / evening-right
   (16:00 @ end) — NEVER a high–low. Gradient stop sets live in JS (DECK_PALETTES);
   the deck axis carries no colour here. Text on gradient always wears --scrim-text. */

.deck{ padding:0 0 6px; }

/* The overlap deck — top corners only, negative margin so the previous day's
   colour peeks at the corners. Descendant selector so pill-nested past cards
   (inside .earlier-group) get the same treatment. */
.deck .day{
  position:relative;
  background:transparent;
  border:0;
  border-radius:var(--r-deck) var(--r-deck) 0 0;
  margin:0 0 calc(var(--r-deck) * -1);
  overflow:hidden;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.18);
  transition:box-shadow .15s;
}
.deck .day:last-child{ margin-bottom:0; }
/* Collapsed cards take extra bottom padding to clear the overlap. */
.deck .day:not(.expanded) .day-hero{ padding-bottom:26px; }

/* hero: MORNING weather (left, 10:00, start) · day identity (centre) ·
   EVENING weather (right, 16:00, end) · chevron. */
.day-hero{
  padding:13px 14px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  text-shadow:var(--scrim-text);
  border-radius:var(--r-deck) var(--r-deck) 0 0;
  transition:filter .2s;
}
.day-hero:hover{ filter:brightness(1.04); }

.day-hero .lead{ display:flex; align-items:center; gap:9px; }
.day-hero .date{ text-align:center; line-height:1; }
.day-hero .date .d{ font-size:21px; font-weight:800; }
.day-hero .date .w{ font-size:10px; font-weight:700; opacity:.95; letter-spacing:.5px; }

.day-hero .wend{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:none; }
.day-hero .wend .tw{ display:flex; align-items:center; gap:5px; }
.day-hero .wend .ic{ font-size:17px; line-height:1; display:inline-flex; }
/* The shared weatherSVG markup carries .weather-illustration (56px); inside the
   deck readout it must render at the compact 17px icon size. */
.day-hero .wend .ic .weather-illustration{ width:20px; height:20px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.day-hero .wend .tp{ font-size:17px; font-weight:800; }
.day-hero .wend .mt{ font-size:8.5px; font-weight:700; opacity:.82; letter-spacing:.4px; }

.day-hero .mid{ flex:1; min-width:0; }
.day-hero .mid .todaypill{
  display:inline-block; background:rgba(0,0,0,.3); border-radius:var(--r-pill);
  padding:1px 7px; font-size:8.5px; font-weight:800; letter-spacing:.5px; margin-bottom:2px;
}
.day-hero .mid .t{
  font-size:15px; font-weight:700; letter-spacing:-.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.day-hero .mid .s{
  font-size:11px; opacity:.92;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.day-hero .chev{ opacity:.85; margin-left:2px; flex:none; font-size:11px; transition:transform .2s ease; }
.deck .day.expanded .day-hero .chev{ transform:rotate(180deg); }

/* Past days grey out and tuck (revealable, not gone). */
.deck .day.past .day-hero{ filter:grayscale(.85) brightness(.95); }
.deck .day.past .day-hero:hover{ filter:grayscale(.7) brightness(1.0); }

/* The expanded body sits below the hero on a token surface (so dark theme adapts).
   The board/agenda styling itself is owned elsewhere; this just sets the ground
   and squares the bottom — the deck card is a single overflow-clipped unit. */
.deck .day .day-body{ background:var(--card); }