/* Tasks in the agenda and the type control in the proposal dialog. Every rule here is
   new: the agenda's task row borrows the event row's own measures -- same padding,
   sizes and radii -- so both row kinds read as one list, with the checkbox alone
   telling them apart in the timeline. */

/* One shared card (the reference's own gp-panel), not a stack of per-row ones: today's own
   untimed/section tasks are a single group, unlike a timed task inside the day's ordered
   timeline (.agenda-task-timed), which keeps its own card because it is one entry among
   events there, not a member of this list. */
.agenda-tasks {
  margin-bottom: var(--card-gap);
}

.agenda-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: 7px;
}

.agenda-tasks-label {
  margin: 0;
}

/* Rows separated by a hairline inside the one shared card, the same idiom
   .today-card-rows already composes .app-divider-list onto. */
.agenda-tasks-rows > .agenda-task {
  padding: var(--space-lg) 0;
}

.agenda-tasks-rows > .agenda-task:first-child {
  padding-top: var(--space-2xs);
}

.agenda-tasks-rows > .agenda-task:last-child {
  padding-bottom: var(--space-2xs);
}

/* Wraps rather than scrolls sideways: the checkbox and the toggle share the first
   line, and the expanded detail or an inline error takes a full-width line of its own
   below, exactly where the event row's detail sits. */
.agenda-task {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

/* The checkbox and its zero-cost touch target are the shared .app-check and
   .app-check-target now -- agenda.js composes both. The measures those primitives carry
   are this row's own, promoted: --check-size is the 24px a checkbox has always been here
   (and deliberately not a pixel more, because a checkbox is a replaced element and any
   width past its own box stretches the control rather than padding it), and the target's
   padding-and-negative-margin pair is what keeps a 44px hit area from adding 20px to a
   single-line timed task card. What is left below is only where this row PUTS them. */

/* Every task's checkbox sits at the row's own start, the same shape Today's own task row
   gives it (see .today-row > .agenda-task-checkbox) -- timed and untimed alike now: a timed
   task in the day's timeline used to keep a time rail of its own with the checkbox pushed to
   the trailing edge instead, which read as a different row kind rather than the same task the
   Tasks card renders (its time moved to a plain meta line, .agenda-task-time-meta, in
   agenda.js). --list-lead-gap is the one gap either row uses; the negative touch slack on the
   other three sides is folded in so the hit area still costs no layout space. */
.agenda-task > .agenda-task-checkbox {
  align-self: flex-start;
  margin: calc(3px - var(--touch-slack))
    calc(var(--list-lead-gap) - var(--touch-slack))
    calc(var(--touch-slack) * -1)
    calc(var(--touch-slack) * -1);
}

/* The focus ring belongs on the control the keyboard is actually on, not on the label around it. */
.agenda-task-checkbox:focus-within {
  outline: none;
}

/* The Later button sits at a row's trailing edge in both layouts -- right before the
   checkbox in a timed row, at the far end of the growing title in an untimed one -- so it
   never grows or shrinks with the row and stays vertically centred. */
.agenda-task-later {
  flex: none;
  align-self: center;
  min-height: var(--touch-min);
  margin-left: var(--list-lead-gap);
}

/* A kitchen task's claim buttons (or, once claimed, its reply and Undo) sit at the row's
   trailing edge like Later does. */
.agenda-task-kitchen-actions {
  flex: none;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-r2);
  margin-left: var(--list-lead-gap);
}

.agenda-task-kitchen-done {
  color: var(--muted);
  font-size: var(--text-detail-meta);
}

/* At Large, and on a very narrow phone, Later drops below the title (the row already wraps)
   instead of taking width from it. No extra indent: it keeps the one margin above whether it
   sits beside the title or beneath it. */
:root[data-text-size="large"] .agenda-task > .agenda-task-toggle {
  flex: 1 1 12rem;
}

@media (max-width: 374px) {
  .agenda-task > .agenda-task-toggle {
    flex: 1 1 12rem;
  }
}

/* Placement only; the row look is .app-row's. Grown from a zero basis rather than .app-row's
   own width: 100%, because the checkbox shares this line -- and a zero basis is what makes a
   long title shrink the toggle instead of wrapping it onto a line of its own below. */
.agenda-task-toggle {
  flex: 1 1 0;
  width: auto;
  min-height: var(--touch-min);
  align-items: center;
}

.agenda-task-main {
  flex: 1 1 0;
  min-width: 0;
}

.agenda-task-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: var(--space-xs) 0 0;
  font-size: var(--text-detail-body);
}

.agenda-task-detail {
  flex: 1 1 100%;
  margin-top: var(--space-md);
}

.agenda-task-detail[hidden] {
  display: none;
}

.agenda-task-detail p {
  margin: 0 0 0.3rem;
}

.agenda-task-detail p:last-child {
  margin-bottom: 0;
}

/* The "Assigned to" radiogroup in a task row's tap-expanded detail. Its label is a
   .calendar-event-field paragraph like the Planned and Repeats fields around it, and the
   options are .person-option buttons, so neither is restated here: the class below is
   only the row the two names sit in. */
.agenda-task-assign {
  display: flex;
  gap: var(--space-r2);
  margin: 0 0 0.3rem;
}

.agenda-task-error {
  flex: 1 1 100%;
  margin: var(--space-sm) 0 0;
  color: var(--error);
  font-size: var(--text-detail-body);
  overflow-wrap: anywhere;
}

.agenda-task-error[hidden] {
  display: none;
}

/* Visibly finished without leaning on colour: the whole row goes quiet and the title
   itself carries the strike. */
.agenda-task-done .agenda-task-toggle {
  color: var(--muted);
}

.agenda-task-done .agenda-task-title,
.grocery-row-pending .grocery-title {
  color: var(--faint);
  text-decoration: line-through;
}

/* A completed card recedes but stays readable, rather than matching the white of an
   open row. */
.agenda-task-done {
  background: var(--panel);
  border-color: var(--line);
}

.agenda-completed {
  margin-top: var(--card-gap);
}

.agenda-completed-toggle {
  color: var(--ink-on-wall-muted);
  text-shadow: var(--text-shadow-on-wall);
}

.agenda-completed-list {
  margin-top: var(--card-gap);
}

.agenda-completed-list[hidden] {
  display: none;
}

/* A task proposal row is the proposal row: it carries .calendar-proposal-event with
   the .calendar-proposal-task modifier, and the type label below is what tells the
   kinds apart -- so the modifier itself needs no rules of its own. */

/* The word Event or Task is the signal, so the quiet pill the transcript's markers
   already use is enough; colour alone never carries it. */
.calendar-type-label {
  margin: 0 0.35rem 0.35rem 0;
  padding: 0.05rem 0.35rem;
}

.calendar-type-control,
.calendar-reminder-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-r1);
}

/* The reminder group sits on the same row as the type switch; at phone width the row
   wraps and both groups drop below the event's own text (see .calendar-proposal-event).
   The group itself must NOT wrap: a bell and two short toggles belong on one line, and
   letting them stack was what made them unreadable in a narrow column. */
.calendar-reminder-control {
  flex: none;
  flex-wrap: nowrap;
}

.calendar-reminder-bell {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  fill: none;
}

/* The shared quiet button, one step quieter at rest: these are options in a row, so
   the unchosen ones recede and .app-selected brings the chosen one forward. */
.calendar-type-option,
.calendar-reminder-option {
  padding: var(--space-r1) 0.6rem;
  color: var(--muted);
}

/* Reaches the 44px touch target the same way the agenda's task checkbox does (see
   --touch-slack above): padding grows the hit area and an equal negative margin hands
   the row's own height straight back. */
.calendar-reminder-option {
  padding-top: calc(0.25rem + var(--touch-slack));
  padding-bottom: calc(0.25rem + var(--touch-slack));
  margin-top: calc(var(--touch-slack) * -1);
  margin-bottom: calc(var(--touch-slack) * -1);
}

/* Selected shows in its own shape, not just another colour: an accent ring plus ink
   text, both of which survive greyscale. */
.calendar-type-option[aria-pressed="true"],
.calendar-reminder-option[aria-pressed="true"] {
  color: var(--ink);
  font-weight: var(--w-title);
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* A refused switch says so in its border, not only in the shared disabled opacity:
   dashed is the house's not-available outline. */
.calendar-type-option:disabled {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
  border-style: dashed;
  cursor: not-allowed;
}

/* The refusal is expected behaviour, not a failure, so its reason takes the row's
   quiet field treatment rather than the error colour. */
.calendar-type-blocked {
  margin: var(--space-r1) 0 0;
  color: var(--muted);
  font-size: var(--text-detail-body);
  overflow-wrap: anywhere;
}

/* Another pane of the same display band, measured from .groceries beside it: a scrollable
   column that owns the band's single content scroller while it is showing. */
.settings[hidden] {
  display: none;
}

.settings-body {
  padding-top: 0.35rem;
}

/* The test-copy tag stands alone above the card list; it carries the air below it
   itself because a normal server keeps the tag hidden (display: none takes the
   margin with it, leaving the pane's rhythm untouched). */
.settings-body > .app-tag {
  margin-bottom: var(--space-md);
}

/* One small heading over each run of cards. Each group is an .app-card-list, so the cards keep
   its gap; the extra top margin only separates one group's last card from the next group's heading. */
.settings-group + .settings-group {
  margin-top: 0.9rem;
}

.settings-group .app-section-label {
  margin-bottom: 0;
}

/* Settings is a card list now, one subsection per .app-card -- .app-row's own shape inside
   each card, a title and its description on the leading side with the control at the
   trailing edge -- rather than the wallpaper divider list of loose rows the gold-and-blue
   card round retires (SURFACES: "cards are equal"). What this pane rule adds is only the
   wrap (a row must fold its control under its description on a phone, which .app-row
   leaves to the caller) and a tighter row rhythm for the fold. */
.settings-row {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.3rem;
}

.page-settings-dialog .settings-card {
  background: var(--panel-inset);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.settings-row-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 7rem;
  min-width: 0;
  gap: 0.15rem;
}

/* The trailing edge: the row's control, and whatever live state belongs to it stacked
   under it. Wraps, unlike the Calendar bar this control came from -- #notifications-status
   holds one word normally and a whole sentence when the server has no key pair; in a bar
   that sentence had to be capped at 45% of the row or it overran the viewport, but a pane
   can simply give it its own line, so the cap is lifted here and the wrap does the work.
   flex: none means this column never shrinks, which is exactly what let its own natural,
   unwrapped width (a long status sentence spelled out on one
   line) run past the card's right edge instead of following it once that natural width
   passed the row's own -- max-width holds it to the row's actual width regardless, so a
   child can still refuse to shrink below its content while never rendering wider than the
   card allows; every child stops there too, so a button or the Appearance segments wrap
   their own label rather than pushing the column past that same edge. */
.settings-row-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  gap: 0.3rem;
}

.settings-row-control > * {
  max-width: 100%;
}

/* The row's worded actions take their own line at the content edge on every screen and at
   every text size -- one placement, rather than a trailing pair at Medium that folds under
   the title only on a Large phone. Wrapping keeps Copy and Change a group that stacks instead
   of overlapping, and the gap, not a negative margin, sets them apart now that each button
   has a visible edge. */
.settings-row-control.settings-row-actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-r2);
  flex-basis: 100%;
  margin-left: 0;
}

/* The column is as wide as the label's margin box, which app-check-target's negative
   margin shrinks to the checkbox; max-width: 100% would clamp the padded label to it. */
.settings-row-control > .app-check-target {
  max-width: none;
}

/* A row with only a checkbox keeps the full touch height and reserves the checkbox's
   padded box beside the label, so the target does not overlap its own row text or its
   neighbour. */
.settings-row:has(> .settings-row-control > .app-check-target):not(:has(> .settings-row-control > :not(.app-check-target))) {
  min-height: var(--touch-min);
}

.settings-row:has(> .settings-row-control > .app-check-target):not(:has(> .settings-row-control > :not(.app-check-target))) .settings-row-control {
  min-width: var(--touch-min);
}

/* Every trailing action in a settings row (Notifications)
   is one height and one type size, whichever older rule styled the button first. */
.settings-row-control > button,
.settings-row-field > button {
  min-height: var(--touch-min);
  font-size: var(--text-support);
}

/* A row that is only a field: the input takes the remaining width beside its button. */
.settings-row-field > .app-field {
  flex: 1 1 0;
  min-width: 0;
}

.settings-row #notifications-status {
  max-width: 100%;
}

/* Long-value rows use the same single-column geometry at every text size, keeping the
   control below the value instead of making the value compete with it for inline space. */
.settings-row-stacked {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.settings-row-stacked[hidden] {
  display: none;
}

.settings-row-stacked .settings-row-main {
  flex: none;
}

.settings-row-stacked .settings-row-control {
  flex: none;
  justify-self: stretch;
  width: auto;
  align-items: flex-start;
  margin-left: 0;
}

.settings-row-stacked .settings-row-control > .app-check-target {
  margin-inline-start: calc(var(--touch-slack) * -1);
}

.settings-row-stacked .settings-row-control:has(.app-segmented) {
  align-items: stretch;
}

.settings-row-stacked .settings-row-main .app-row-meta {
  overflow-wrap: break-word;
  word-break: normal;
}

.settings-row-stacked #mail-address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Device names, codes, domains and update failures are identifiers a person must read whole:
   they break anywhere rather than overflowing the card or being cut. */
#devices-list .devices-row,
#devices-status,
#devices-failure,
#devices-code-failure {
  overflow-wrap: anywhere;
}

/* The note under a control is the caption for it, so it reads at the shared row-meta
   step .app-row-meta gives every other caption in the app. It used to read a step above
   the notifications status line beside it, which put the explanation louder than the
   thing it explains. */
.settings-note {
  margin: 0;
  display: block;
  overflow: visible;
}

.settings-note[hidden] {
  display: none;
}

.settings-version-icon {
  width: 1.5rem;
  height: auto;
  vertical-align: middle;
}

.settings-version-icon[hidden] {
  display: none;
}

.app-card-list > * .settings-note {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.mail-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mail-suggestions:empty {
  display: none;
}

/* The chevron sits at the trailing edge like a control would, but names no state -- it only
   says the row opens something. */
.settings-nav-row {
  align-items: center;
  min-height: 3.5rem;
}

.settings-nav-row:has(.settings-note:not([hidden])) {
  min-height: 4.5rem;
}

/* One height whether a row carries one, two or three lines, so the three lists read alike. */
.settings-detail[data-settings-detail="devices-group"] .settings-nav-row,
.settings-detail[data-settings-detail="backup"] .settings-nav-row,
.settings-detail[data-settings-detail="people-home"] .settings-nav-row {
  min-height: 5.25rem;
}

.settings-group-icon {
  flex: none;
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted);
}

.settings-group-icon svg {
  width: 100%;
  height: 100%;
}

.settings-group-icon + .settings-row-main {
  margin-left: var(--space-r2);
}

/* No font-size of its own -- the detail type scale's own guard counts every declared size,
   and the row's inherited 1rem reads the glyph clearly enough. */
.settings-nav-chevron {
  margin-left: auto;
  color: var(--muted);
  line-height: 1;
}

/* A drill-down row's control column is empty, so it takes no line of its own. */
.settings-nav-row .settings-row-control {
  display: none;
}

/* The Appearance control: three adjoining segments in one bordered group, not three
   separate buttons, so the choice reads as one control with three states. The group's own
   name (#theme-control-label, which the radiogroup is aria-labelledby'd to) is the row's
   .app-row-title on the leading side now -- .app-row-title's own muted-title treatment,
   the same as the Notifications row's title beside it -- so this wrapper holds only the
   segmented bar itself. */
.theme-control {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.app-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  min-width: min(100%, 24rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
}

@media (max-width: 47.99rem) {
  /* The two segmented controls (Appearance, Read aloud) have no room to
     share a line with their row title at this width. .settings-row-control is flex: none
     everywhere else because its usual contents (a short status word, a toggle) are already
     narrower than the row -- that same refusal to shrink would let the segments' single-line
     width run past the card's edge. Full row width here, so the segmented control divides
     the row evenly; min-height on .app-segmented-option floors the touch
     target at 44px whether a label takes one line or two. */
  .settings-row-control:has(.app-segmented) {
    flex: 1 1 100%;
    align-items: stretch;
  }
}

/* Large text on a phone: every settings row stacks, so its control sits BELOW the title and
   description at the card's full width instead of stealing width from them. */
@media (max-width: 47.99rem) {
  /* A single-column grid, not a column flexbox: Chrome sizes a column flexbox's block-size
     from the wrapping segmented group at a narrower width than the final layout, which left
     an empty band under it. The row's own row-gap carries over. */
  :root[data-text-size="large"] .settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  :root[data-text-size="large"] .settings-row[hidden] {
    display: none;
  }

  /* A field row (input + its button) stays one line, as Kroger's zip and Search do. */
  :root[data-text-size="large"] .settings-row-field {
    display: flex;
    align-items: center;
  }

  :root[data-text-size="large"] .settings-row-main {
    flex: none;
  }

  :root[data-text-size="large"] .settings-nav-row .settings-row-main {
    flex: 1 1 7rem;
    min-width: 0;
  }

  /* A drill-down row keeps its title and chevron on one line at Large text. */
  :root[data-text-size="large"] .settings-nav-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  :root[data-text-size="large"] .settings-row-control {
    flex: none;
    justify-self: stretch;
    width: auto;
    align-items: flex-start;
    margin-left: 0;
  }

  :root[data-text-size="large"] .settings-row-control.settings-row-actions {
    justify-content: flex-start;
  }

  :root[data-text-size="large"] .settings-row-control > .app-check-target {
    margin-inline-start: calc(var(--touch-slack) * -1);
  }

  /* :has() cannot nest, so the switch is matched by class alone. */
  :root[data-text-size="large"] .settings-row:has(> .settings-row-control > :is(.app-check-target, .timers-switch, .app-icon-button)):not(:has(> .settings-row-control > :not(:is(.app-check-target, .timers-switch, .app-icon-button)))) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  :root[data-text-size="large"] .settings-row:has(> .settings-row-control > :is(.app-check-target, .timers-switch, .app-icon-button)):not(:has(> .settings-row-control > :not(:is(.app-check-target, .timers-switch, .app-icon-button)))) .settings-row-main {
    flex: 1 1 7rem;
    min-width: 0;
  }

  :root[data-text-size="large"] .settings-row:has(> .settings-row-control > :is(.app-check-target, .timers-switch, .app-icon-button)):not(:has(> .settings-row-control > :not(:is(.app-check-target, .timers-switch, .app-icon-button)))) .settings-row-control {
    margin-left: auto;
    align-items: flex-end;
    justify-self: auto;
  }

  :root[data-text-size="large"] .settings-row:has(> .settings-row-control > :is(.app-check-target, .app-icon-button)):not(:has(> .settings-row-control > :not(:is(.app-check-target, .app-icon-button)))) .settings-row-control > .app-check-target {
    margin-inline-start: 0;
  }

  :root[data-text-size="large"] .settings-row-control:has(.app-segmented) {
    align-items: stretch;
  }
}

.app-segmented-option {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0.35rem 0.45rem;
  color: var(--muted);
  font-size: var(--text-support);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  /* The bar (.app-segmented) draws the outline and the hairlines between segments, so a
     segment draws neither -- it is the shared quiet button with its own box removed. */
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

/* Preserve native hidden behavior when these primitives set display. */
.app-segmented[hidden],
.app-segmented-option[hidden] {
  display: none;
}

.app-segmented-option + .app-segmented-option {
  border-left: 1px solid var(--line-strong);
}

/* Hidden the same way the file already hides text a screen reader still needs
   (.visually-hidden) -- never display: none, so the radio stays in the tab order and keeps
   a real focus target. */
.app-segmented-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* This rule is the shared .app-selected now -- its --accent-soft ground and --accent ink
   are what that primitive was built from, because this was the one of the three older
   selected treatments that degrades correctly in both a standalone control and a joined
   segmented bar. What stays here is only the segment's own box. */
.app-segmented-option:has(.app-segmented-input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Appearance is the one segmented control the brief asks to read as a proper chooser
   rather than the shared quiet accent-soft wash every other selected state in the app
   uses a solid gold ground with dark ink (--on-accent),
   the one place selection takes a fill rather than a tint. A deliberate, scoped departure
   from .app-selected -- the same kind the person switcher's own person-colour mix already
   is -- not a restatement of it, since .app-segmented-option still composes app-selected for its
   focus-visible ring and reduced-motion behaviour. */
.app-segmented-option.app-selected:has(.app-segmented-input:checked) {
  color: var(--on-accent);
  background: var(--accent);
}

@media (max-width: 47.99rem) {
  :root[data-text-size="large"] .app-segmented {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: minmax(0, 1fr);
    width: 100%;
  }

  :root[data-text-size="large"] .app-segmented-option + .app-segmented-option {
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }
}