/* ============================================================================
   Schedule (§7 — "what updates when"). Tokens only — see tokens.css.
   Firm vs. approximate reuses the same dashed-border convention as
   .fig--nonnominal elsewhere on this page: solid means measured/scheduled,
   dashed means estimated/approximate.

   Markup (fixed, from app.js renderScheduleItem — do not assume more or
   less structure than this):
     <li class="schedule-item schedule-item--firm|--approximate">
       <div class="schedule-item-main">
         <span class="schedule-badge">Scheduled|Estimated</span>
         <span class="schedule-label">…</span>
         <div class="schedule-when">
           <!-- firm, has a time: -->
           <span class="schedule-date num">…</span>
           <span class="schedule-countdown num">…</span>
           <span class="schedule-time num">…</span>
           <!-- firm, no time published: date + countdown only -->
           <!-- firm, stale build: one wrapping sentence instead -->
           <span class="schedule-countdown schedule-countdown--stale">…</span>
           <!-- approximate: one imprecise span, no countdown -->
           <span class="schedule-wording num">…</span>
         </div>
       </div>
       <p class="schedule-moves">…</p>
     </li>

   .schedule-item-main is the flex row (badge, label, when); .schedule-item
   itself just stacks that row over .schedule-moves and owns the hairline.
   ========================================================================= */

@layer schedule {

.schedule-list { list-style: none; margin: 0; padding: 0; }

.schedule-item {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.schedule-item:first-child { border-top: 1px solid var(--rule); }

.schedule-item--approximate {
  border-left: 2px dashed var(--warn-ink);
  padding-left: var(--s3);
}

.schedule-item-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s4);
  row-gap: var(--s1);
}

.schedule-badge {
  flex: none;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 1px var(--s2); color: var(--ink-3);
}
.schedule-item--approximate .schedule-badge {
  border-style: dashed; border-color: var(--warn-ink); color: var(--warn-ink);
}

.schedule-label {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
  flex: 1 1 220px;
  min-width: 180px;
}

/* Right-hand column: date/countdown/time (or the stale sentence, or the
   approximate wording) always flush to the same right edge, so the dates
   line up down the page even though label lengths vary. */
.schedule-when {
  flex: none;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--s1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.schedule-date {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
}
.schedule-countdown { font-size: var(--fs-small); color: var(--ink-2); }
.schedule-countdown--stale {
  color: var(--warn-ink);
  font-family: var(--font-sans);
  font-variant-numeric: normal;
  font-size: var(--fs-small);
  max-width: 32ch;
  white-space: normal;
  text-align: right;
}
.schedule-time {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* Approximate rows have no countdown — a single imprecise span stands in
   for .schedule-date, so give it the same visual weight, tinted to match
   the dashed/warn-ink "estimated" convention. */
.schedule-wording {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--warn-ink);
}

.schedule-moves {
  margin: var(--s1) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

@media (max-width: 560px) {
  .schedule-item--approximate { padding-left: var(--s2); }
  .schedule-when {
    margin-left: 0;
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
  .schedule-countdown--stale { text-align: left; max-width: none; }
}

} /* @layer schedule */