/* THE MORNING RUNDOWN'S LOOK (Chase, 27 Oct: "a morning round up where you
   explain their day"). It is The rundown's card (rundown.css: .rd-card, the dark
   band with the amber hairline, .rd-big, .rd-tiles, .rd-means, the foot with its
   orange Next) with a thin progress line on top and the names a card lists.
   Only .mr-* classes are new; the page root carries BOTH .rd-page and .mr-page,
   so every --rd-* colour resolves. No inline style anywhere (CSP): the progress
   segments are classes. With no script all the cards stack; with it one shows
   (.mr-deck). */

.mr-page { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }

/* ---- the thin progress line: one short segment per card ---- */
.mr-progress { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.mr-seg { flex: 1; height: 3px; border-radius: 999px; background: var(--color-line-strong, #d3ccc0); }
.mr-seg.is-done { background: var(--color-accent, #b45309); }
.mr-seg.is-now { background: var(--rd-amber, #f59e0b); box-shadow: 0 0 0 1px rgb(245 158 11 / 0.35); }

/* ---- the deck: one card at a time (the script adds .mr-deck) ---- */
.mr-deck [data-morning-card][hidden] { display: none; }
.mr-card + .mr-card { margin-top: 0.5rem; }
.mr-deck .mr-card + .mr-card { margin-top: 0; }

/* ---- inside a card ---- */
.mr-lead { margin: 0; max-width: 60ch; font-size: 1.1875rem; line-height: 1.45; font-weight: 500; text-wrap: pretty; color: var(--rd-ink); }
.mr-kicker { margin: 0; font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-muted); }
.mr-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; min-width: 0; }
.mr-row { min-width: 0; padding: 0.4375rem 0; border-top: 1px solid var(--color-line, #e6e1d8); font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.mr-row:first-child { border-top: 0; }
.mr-lead-word { font-weight: 700; color: var(--rd-ink); }
.mr-rest { margin-left: 0.25rem; color: var(--rd-muted); }
.mr-row-link { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; min-height: 2.75rem; margin: -0.4375rem 0; padding: 0.4375rem 0; color: inherit; text-decoration: none; }
.mr-row-link:hover .mr-lead-word { text-decoration: underline; text-underline-offset: 3px; }
.mr-row-link .mr-rest { margin-left: 0; }
.mr-row.is-bad { padding-left: 0.625rem; border-left: 3px solid var(--rd-bad-ink, #991b1b); }
.mr-row.is-bad + .mr-row.is-bad { border-top: 1px solid var(--color-line, #e6e1d8); }
.mr-more { margin: 0; font-size: 0.875rem; color: var(--rd-muted); }
.mr-weather { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--rd-muted); }

/* ---- the one quiet link on Home (dashboard/_greeting): its own line under the start buttons ---- */
.mr-home-link { flex-basis: 100%; display: flex; align-items: center; min-height: 2.75rem; margin: -0.625rem 0 -0.5rem; }
/* The tap is the link itself, 44px tall: the line's own height is not a tap (phones first). */
.mr-home-link a { display: inline-flex; align-items: center; min-height: 2.75rem; }

@media (max-width: 640px) {
  .mr-lead { font-size: 1.0625rem; }
  .mr-rest { display: block; margin-left: 0; }
  .mr-row-link .mr-rest { display: block; flex-basis: 100%; }
}