/* The Today pane: the same scroller shape as .household-facts and .meals-plan, but on the
   card-list field rather than the white one, because its entries are things in their own
   right -- a calendar row, an email -- not lines inside one document. The field belongs to
   the scroller, not to the list inside it, which is why --panel is set here. */
.today {
  /* The shared scroller on the card field, with no top inset of its own: this pane's
     own toolbar is the first thing in the scroll, and a gutter above it would read as
     the band having two edges. */
  padding-top: 0;
}

.today[hidden] {
  display: none;
}

/* The header: a centred block sitting directly on the wallpaper, above the card stack --
   the live clock is the pane's visible identity now (see index.html's own comment on why
   the h1 is visually hidden), with the server's own day underneath it. */
.today-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-xl);
  row-gap: var(--space-xs);
  align-items: flex-start;
  padding: 0;
}

.today-header-main {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  text-align: left;
}

/* The date never breaks (no orphaned day number). */
.today-header .today-date-line {
  white-space: nowrap;
}

/* The weather block keeps its own 11.5rem measure on the right. */
.today-header .today-weather-slot {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 11.5rem;
  margin: 0 0 0 auto;
  padding: 0;
}

/* Tabular-nums so the digits do not shift width minute to minute; the AM/PM suffix (a
   separate element, never baked into this string) is the one thing distinguishing a
   12-hour locale's clock from a 24-hour one's -- see todayClockParts() in chat.js. The
   size is its own custom property, not a literal on font-size, purely so the narrow-
   width media query below can override just that one value. */
.today-clock {
  --today-clock-size: 2.75rem;
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--today-clock-size);
  line-height: 1;
  margin-bottom: var(--space-md);
  letter-spacing: 0;
  color: var(--ink-heading);
  text-shadow: var(--text-shadow-on-wall);
  font-variant-numeric: tabular-nums;
}

.today-clock-suffix {
  margin-left: 7px;
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: var(--text-detail-meta);
  letter-spacing: 0;
  vertical-align: middle;
}

.today-clock-suffix[hidden] {
  display: none;
}

@media (max-width: 374px) {
  .today-clock {
    --today-clock-size: 2.625rem;
  }
}

/* At 320px the clock's digits and the 11.5rem weather block share one row without overlap. */
@media (max-width: 22rem) {
  .today-clock {
    --today-clock-size: 2.25rem;
  }
}

/* (This block used to narrow .today's side padding to 15px, which put Today's cards 2px off
   the 17px --list-gutter every other pane's cards keep at every phone width; the measured
   inset at 320 and 360 was 15 against 17 everywhere else. Only the clock size steps down.) */

.today-date-line {
  margin: 0;
  color: var(--ink-on-wall-muted);
  text-shadow: var(--text-shadow-on-wall);
  font-size: var(--text-caption);
  line-height: 1.3;
}

/* The logo's colours as a short rule under the date. */
.today-date-line::after {
  content: '';
  display: block;
  width: 132px;
  height: var(--space-xs);
  margin-top: var(--space-md);
  border-radius: var(--radius-nested);
  background: var(--logo-rainbow);
}

/* One card per kind, separated by one rhythm the body itself owns. It is a gap rather than
   the adjacent-sibling margin it used to be because the cards are no longer all siblings:
   they sit inside two column wrappers now (see today.js). Below the desktop width those
   wrappers are display: contents, which promotes the cards back to direct flex items of
   this box, so the gap applies between all three exactly as the margin did and the phone's
   stack is unchanged. */
.today-body {
  display: flex;
  flex-direction: column;
  gap: var(--rhythm-card-card);
  /* No inset of its own: .today is already .app-scroller-field, whose 17px list-gutter
     is the card stack's one gutter. A second inset here doubled it up. */
}

.today-column {
  display: contents;
}

/* The Rundell OS card is drawn by chat.js into this slot, a flex item of the same gap as
   the cards around it, so an empty one must not add a gap. */
.today-agent-slot:empty {
  display: none;
}

/* The collapsed "Needs you ..." row repeats the Agent card on Today and the Agent page, so it
   steps aside. An expanded drawer, a reply thread, a drawer listing queued requests and the
   status rail still show. */
.command-bar.agent-surface .activity-drawer[data-mode="collapsed"]:not([data-queued]) {
  display: none;
}

/* A zone holding only that hidden drawer is an empty surface: its fill, highlight and
   hairline would draw a seam across the pill's top, so the zone steps aside with it. */
.command-bar.agent-surface .thread-zone:has(> .activity-drawer[data-mode="collapsed"]:not([data-queued]):only-child) {
  display: none;
}

.command-bar.agent-surface .thread-zone:has(> .activity-drawer[data-mode="collapsed"]:not([data-queued]):only-child) + .composer-row {
  border-top-left-radius: var(--radius-surface);
  border-top-right-radius: var(--radius-surface);
  box-shadow: var(--shadow-inset-highlight);
}

/* The card's own heading: an icon, a title and an optional right-aligned fragment (a
   count, a "View N" link, a duration) -- what the pane's old .app-section-label groups
   became once every card stood on the shared surface rather than the wallpaper. */
.today-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  margin-bottom: var(--space-xs);
}

.today-card-icon {
  display: flex;
  flex: none;
  color: var(--accent);
}

.today-card-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

/* Each card's icon takes its destination's strong colour. Drive has no class of its own, so
   it keeps the default accent. */
.today-card-agenda .today-card-icon { color: var(--accent-calendar); }
.today-card-inbox .today-card-icon { color: var(--accent-email); }
.today-card-meal .today-card-icon { color: var(--accent-meals); }
.today-card-now-playing .today-card-icon { color: var(--accent-music); }
.agent-card .today-card-icon { color: var(--agent-gold-ink); }

.today-card-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  font-size: var(--text-detail-meta);
  font-weight: var(--w-title);
}

.today-card-right {
  flex: none;
  color: var(--muted);
  font-size: var(--text-detail-meta);
}

/* Rundell OS's work grid (agent-home.js): two equal columns, one on a very narrow
   screen. On the Today card the grid is one tinted inset panel and an item is one line:
   a state dot, the subject (ellipsized) and a fixed suffix naming the state. The detailed
   variant (the Agent page) shows the subject over the state label. Only the buttons are
   tappable, so only they carry the 44px target; a working item is a plain div. */
/* The Agent card pads nothing itself: its heading takes the card's 17px sides and the work
   grid and suggestion row sit 11px from the card's edge, like the mock. The heading row is
   the header link's own touch target, with no extra gap above it (the Today card drops its
   top padding the same way). */
.agent-card {
  padding: 0;
}

.agent-card > .today-card-header {
  min-height: var(--touch-min);
  margin-bottom: 0;
  padding: 0 var(--card-pad-x);
}

.today-card-agenda {
  padding-top: 0;
}

.agent-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-md);
  margin: 0 11px 9px;
  padding: 5px 7px;
  background: var(--agent-panel);
  border-radius: var(--radius-control);
}

.agent-work-grid.agent-work-grid-detailed {
  margin: var(--space-xs) 0 0;
  padding: 0;
  background: transparent;
  gap: var(--space-xs) var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}

.agent-work-dismiss-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--touch-min);
  align-items: center;
  min-width: 0;
}

.agent-undo {
  display: flex;
  justify-content: flex-end;
  min-height: var(--touch-min);
  align-items: center;
}

.agent-undo .app-quiet-button {
  flex: none;
  min-height: var(--touch-min);
}

@media (min-width: 48rem) {
  .agent-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.agent-work-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: calc(0.8125rem * var(--text-scale));
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
}

button.agent-work-item {
  cursor: pointer;
}

.agent-work-item-detailed {
  align-items: center; /* the 9px dot sits at the vertical centre of the two lines */
}

.agent-work-item .app-run-line {
  font-size: calc(0.6875rem * var(--text-scale));
}

.agent-work-item-detailed .app-run {
  gap: var(--space-2xs);
}

.agent-work-item-detailed .app-run-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xs);
}

.agent-work-pin {
  flex: none;
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.agent-work-pin svg {
  width: 100%;
  height: 100%;
}

.agent-work-grid-earlier .app-run-title {
  color: var(--muted);
}

.agent-suggestion-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Only a slot with nothing to show (everything dismissed) holds the height one row would
   take, so the card does not jump; a slot with a suggestion is exactly its rows. */
.agent-suggestion-slot-reserved {
  min-height: 53px;
}

/* The Today row: one Try button (badge, one line of copy) and a separate small dismiss
   button at the far right. */
.agent-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--touch-min);
  align-items: center;
  min-width: 0;
  min-height: 53px;
  margin: 0 11px 11px;
  padding: var(--space-md) 0 var(--space-md) 9px;
  background: var(--agent-gold-tint);
  border-radius: var(--radius-control);
}

.agent-suggestion-try {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.agent-suggestion-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  color: var(--agent-gold-ink);
  background: var(--agent-gold-badge);
  border-radius: var(--radius-control);
}

.agent-suggestion-badge svg {
  width: 16px;
  height: 16px;
}

.agent-suggestion-text {
  min-width: 0;
  color: var(--ink);
  font-size: calc(0.75rem * var(--text-scale));
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.agent-suggestion-dismiss {
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.agent-suggestion-dismiss {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  font-size: calc(0.75rem * var(--text-scale));
}

/* Every card heading's trailing open-this-page link -- "N remaining", "View N", "N more" --
   is the one piece built by window.appCardLink: a quiet button, not .app-row, so it never
   reads as one more item row (see .today-card-rows below). The touch target is the shared
   minimum, and margin-left keeps the link at the header's right edge when Large text wraps
   it onto a line of its own. */
.today-card-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  margin-left: auto;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--text-detail-meta);
  cursor: pointer;
}

.today-card-link-icon {
  display: flex;
}

.today-card-link-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* Rows separated by a hairline, no boxes -- the same idiom a list of lines inside one
   document already uses (.app-divider-list), reused rather than reinvented because a
   card's own rows are exactly that: lines in the one card, not bounded entries of their
   own. */
.today-card-rows > .today-row {
  padding: var(--space-lg) 0;
}

.today-card-rows > .today-row:first-child {
  padding-top: var(--space-2xs);
}

.today-card-rows > .today-row:last-child {
  padding-bottom: var(--space-2xs);
}

/* Placement only; the row's look is .app-row's. The row wrapper gives it its padding, so
   the row inside one does not add a second inset of its own. */
.today-open-row {
  min-height: var(--touch-min);
  align-items: center;
  padding: 0;
  cursor: pointer;
}

/* Today has no leading time column, and a card here says as little as the day allows: the
   title and the one thing still worth saying beside it share a single line rather than
   taking a row each, so more of the day fits on the screen. They are laid out as a wrapping
   run, not truncated -- a long address moves to a second line rather than losing its tail,
   because nothing on this pane offers the full value anywhere else. A failed item's error
   always takes a line of its own, which is what the 100% basis below is for. */
.today-row-main {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.45rem;
  /* The one rhythm a wrapped run needs, replacing the top margins the stacked column used to
     carry: it applies only between lines, so a context that fits beside the title costs
     nothing, and one that does not sits under it exactly where it used to. */
  row-gap: 0.1rem;
  min-width: 0;
}

.today-row-title,
.today-row-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* .app-row-meta's own top margin is what stacked it; a baseline-aligned run does not want it. */
.today-row-meta {
  margin-top: 0;
}

.today-row-error {
  flex: 1 1 100%;
  overflow-wrap: anywhere;
}

/* The two lines (show/artist, then title) each stay on one line. */
.today-card-now-playing .today-row-main {
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
}

.today-card-now-playing .today-row-title,
.today-card-now-playing .today-row-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* A row that carries a quick action lays the control and the opener out on one line, and lets an
   inline failure take a full-width line of its own below -- the same shape .agenda-task uses, for
   the same reason. A row with no control has one child and is unaffected. */
.today-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

/* The display: flex above outranks the browser's [hidden] rule at equal specificity, so a row
   the driving view hides to fit its agenda card to the pane needs this to disappear. */
.today-row[hidden] {
  display: none;
}

/* Every card sits on the same plain ground now (see the shared .app-card rule) -- no
   card on this pane is emphasised over another, the Next Meal card included, unlike the
   single featured surface earlier rounds gave it. */

/* A task row has no 64px lead rail (see .today-row-main), so its checkbox sits at the
   row's own start with the rail's gap after it. The negative touch slack on the other three sides
   hands back the space .agenda-task-checkbox's 44px hit area borrows, so the control still occupies
   exactly the 24px the bare checkbox does. */
.today-row > .agenda-task-checkbox {
  margin: calc(var(--touch-slack) * -1)
    calc(var(--list-lead-gap) - var(--touch-slack))
    calc(var(--touch-slack) * -1)
    calc(var(--touch-slack) * -1);
}

/* Grown from a zero basis rather than .app-row's own width: 100%, for the reason
   .agenda-task-toggle is -- a control shares this line, and a long title must shrink the opener
   rather than wrap it onto a line of its own below. */
.today-row > .today-open-row {
  flex: 1 1 0;
  width: auto;
  /* Without this the opener's automatic minimum is its nowrap content, so a long sender or
     subject pushes the 44px actions onto a second line and past the card's edge. */
  min-width: 0;
  overflow: hidden;
}

/* Every box on a Today row that clips its own text (the opener above, the Inbox text column
   and its two lines, the meal title's line clamp) has padding 0, so its clip edge fell exactly
   on the first glyph's origin and shaved the left overhang off a W, an R, a P or a 5 (found at
   4x: "Water the plants", "Planned ...", "Refill", "Sheet-pan", "5:00 PM"). A 2px lead inside
   the clip, given back by an equal negative margin, moves the edge clear without moving a
   single glyph. The opener is also an .app-row with a rounded corner, and overflow: hidden
   clips to that curve, which cut the first line's top-left and the last line's bottom-left
   corner of the same glyphs (a P's stem foot at 10x); a row of hairline-separated text has no
   visible corner to keep, so the opener's own radius goes. */
.today-row > .today-open-row {
  border-radius: 0;
}

.today-row > .today-open-row,
.today-card-inbox .today-open-row > .today-row-main,
.today-card-inbox .today-row-title,
.today-card-inbox .today-row-meta,
.today-meal-row .today-row-title {
  padding-inline-start: var(--space-2xs);
  margin-inline-start: -2px;
}

/* The Inbox row stays one line at 320-430px: avatar | text column | chevron inside the
   opener, then the check and overflow buttons, none of which may shrink or wrap. Only a
   failed item's error line (flex-basis 100%) is allowed a second line, so the row wraps
   for that alone. */
.today-card-inbox .today-open-row > .today-row-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.today-card-inbox .today-row-title,
.today-card-inbox .today-row-meta {
  max-width: 100%;
}

/* The same task must read the same weight wherever it appears, and the agenda's
   .agenda-task-title puts it at 500. A task row is told apart here by the one thing only a
   task has: its completion checkbox. :has() is already this stylesheet's idiom for that
   kind of question (see .agenda-day). */
.today-row:has(> .agenda-task-checkbox) .today-row-title {
  font-weight: var(--w-meta);
}

/* The agenda card's rows (events and tasks alike): one compact line, a 28px leading slot
   (an event's gold badge, a task's checkbox), the title with its context as a second
   small muted line under it, and the time at the right. Scoped to .today-card-agenda so
   the Inbox and Next meal rows keep their own shapes. */
.today-card-agenda .today-card-header {
  min-height: var(--touch-min);
  margin-bottom: 0;
}

.today-card-agenda .today-card-rows > .today-row,
.today-card-agenda .today-card-rows > .today-row:first-child,
.today-card-agenda .today-card-rows > .today-row:last-child {
  min-height: 50px;
  padding: 0;
  border-top: 1px solid var(--line);
}

.today-card-agenda .today-row > .today-open-row {
  align-items: center;
  gap: var(--space-xl);
}

.today-card-agenda .today-row-main {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  row-gap: 1px;
}

.today-card-agenda .today-row-title {
  font-size: calc(0.9375rem * var(--text-scale));
  font-weight: var(--w-title);
  line-height: 1.3;
}

.today-card-agenda .today-row-meta {
  color: var(--muted);
  font-size: calc(0.8125rem * var(--text-scale));
  line-height: 1.3;
}

/* The checkbox keeps its 44px hit area but takes the 28px slot a badge does: the 24px
   box, 4px more, and the 12px gap the badge's own row uses. */
.today-card-agenda .today-row > .agenda-task-checkbox {
  margin-right: calc(16px - var(--touch-slack));
}

.today-action {
  flex: none;
  color: var(--muted);
  font-size: calc(0.8125rem * var(--text-scale));
  font-weight: var(--w-body);
}

.today-row > .today-action {
  margin-top: 0;
  font-weight: var(--w-body);
}

/* An event's 28px leading badge: the accent's own quiet wash behind a 15px calendar icon. */
.today-row-badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: var(--radius-control);
}

.today-row-badge svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

/* The right-hand time: muted, tabular, never wrapped. */
.today-row-time {
  flex: none;
  color: var(--muted);
  font-size: calc(0.8125rem * var(--text-scale));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The Inbox row's own 32px avatar, the sender's initial over the shared .app-media
   ground (see today.js's itemRow()) -- sits in the same leading slot an event's time
   rail does, but draws its own ground rather than that rail's plain gold text. */
.today-row-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--ink-heading);
  font-size: var(--text-detail-meta);
  font-weight: var(--w-title);
}

.today-row-chevron {
  display: flex;
  flex: none;
  align-items: center;
  color: var(--muted);
  margin-left: var(--space-xs);
}

/* The opener's chevron sits on the row's title line, not the row's vertical middle: exactly
   one .app-row-title line box tall, with the svg centred inside that box. */
.today-open-row > .today-row-chevron {
  align-self: flex-start;
  height: calc(var(--text-detail-body) * var(--leading-detail-tight));
  margin-top: 0;
}

/* A one-line row has no meta line below the title, so its chevron centres on the row. */
.today-open-row:not(:has(.today-row-meta)) > .today-row-chevron {
  align-self: center;
  height: auto;
}

.today-row-chevron svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* The Inbox card's own visual weight, reversed from every other card's: the sender is
   the name a person actually scans for, so it reads at the title's own size and weight,
   while the subject beneath it is the muted, secondary line -- without renaming which
   element is which, since .today-row-title is still what the row's own accessible name
   and every existing lookup by subject are built on (see today.js's itemRow()). */
.today-card-inbox .today-row-main {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  row-gap: 1px;
}

/* The reference's own row: sender (14px, ink) on line 1, subject (12px, muted) on line 2,
   each a single ellipsised line. The sender is the row's second child in the DOM (the
   title is what every accessible name and lookup keys on), so it is ordered first. */
.today-card-inbox .today-row-title {
  order: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--w-body);
  line-height: 1.35;
  overflow-wrap: break-word;
  text-align: left;
  white-space: normal;
}

.today-card-inbox .today-row-meta {
  order: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--text-detail-meta);
  font-weight: var(--w-title);
  line-height: 1.35;
  overflow-wrap: break-word;
  text-align: left;
  white-space: normal;
}

/* A row whose read failed still shows it, but as a footnote under the sender and subject,
   not an alarm: quiet like the subject line, and last -- an unordered child of the column
   layout lands first. Two classes, so it overrides .app-failure's error colour. */
.today-card-inbox .today-row-error {
  order: 3;
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.35;
}

/* Dismiss is a real action but not the row's point: one icon-sized 44px target, so the
   text column keeps the width. */
.today-item-row .dismiss-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  min-width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
}

.today-item-row .dismiss-item svg {
  width: 16px;
  height: 16px;
}

/* The meal card's own row: no lead rail, so its title starts at the row's own edge like
   every other single-line opener. */
.today-meal-row .today-row-title {
  overflow-wrap: break-word;
  white-space: normal;
}

/* At Large, and on a very narrow phone, a text action (Later, Eaten) must not take width from
   the title: the opener asks for a readable measure and the row (already flex-wrap: wrap)
   drops the action onto its own line below it. The action stays, at its full size. */
:root[data-text-size="large"] .today-row:has(> .task-later, > .meal-eaten) > .today-open-row {
  flex: 1 1 12rem;
}

@media (max-width: 374px) {
  .today-row:has(> .task-later, > .meal-eaten) > .today-open-row {
    flex: 1 1 12rem;
  }
}

/* The card's own failure line, below both, exactly where .agenda-task-error sits on a task row. */
.today-action-error {
  flex: 1 1 100%;
  margin-top: var(--space-sm);
  overflow-wrap: anywhere;
}

.today-action-error[hidden] {
  display: none;
}

.agenda-strip {
  display: flex;
  flex: none;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem 0.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}