/* One pane of the display band (see .chat-lower): it fills the space between the header
   band and the command bar, rather than sizing itself as a standalone page. */
/* Transparent, not the old page-sized panel: the wallpaper (.app-wallpaper, fixed behind
   everything) shows straight through, the same idiom .app-scroller-field/-page's own
   comment states for every other pane. A card still draws its own surface (.app-card); it
   is only the FIELD around them, and the header/strip/day-heading text directly on the
   wallpaper, that stopped drawing one of its own -- see the on-wall ink rules below. */
.agenda {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  background: transparent;
}

.agenda[hidden] {
  display: none;
}

/* Another pane of the same display band, sized identically to .agenda beside it, but --
   unlike .agenda -- simple enough to be its own single content scroller directly, with no
   inner scrolling region of its own. */
/* Five panes -- Household, Meals, Settings, Groceries and the Library -- each declared
   the same eight-line scroller here. They compose .app-scroller and .app-scroller-page in
   the markup now and have no rule of their own at all; the five that were left behind are
   deleted rather than kept empty, because an empty rule is somewhere for a declaration to
   creep back into. */
.household-facts[hidden] {
  display: none;
}

/* The gold-and-blue card round drops the per-destination accent this subtitle used to
   read (SURFACES: "cards are equal"), the same move Meals'/Podcasts'/Music's own headers
   and section markers made -- the shared subtitle rule's on-wall ink pair is enough. */

/* Using as: two quiet buttons, so the selected person is stated by the same
   vocabulary every other small control in the app already uses. The selected
   state is deliberately NOT colour alone -- the role="radio"/aria-checked pair
   carries it for a screen reader, and an inset ring plus a heavier weight
   carries it visually, with no layout shift between the two states because the
   ring is a box-shadow rather than a thicker border. */
/* No bottom margin of its own now: it is always the whole and only content of
   .person-selector-card, so the card's own padding is the space below it, not a second
   margin stacked inside that boundary. */
.person-selector {
  margin: 0;
}

.person-selector-label {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: var(--text-detail-body);
  font-weight: var(--w-meta);
}

.person-selector-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-r2);
}

/* 44px, not the quiet button's own 32px: this is a touch target on a phone. In the
   Household selector each option also carries its person's key (data-person-key), the one
   attribute the [data-person-key] table above needs to set --person-color on it, so the
   shared .person-dot beside the name says whose tasks, mail and conversation the option
   selects -- the same colour the calendar washes that person's events with. */
.person-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--touch-min);
  /* A long name wraps inside its option rather than being cut. */
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: left;
}

/* The checked half of the Household radiogroup reads as "this is the active person"
   through one deliberate step more than the shared selected wash: the SAME person colour
   that option's own dot already draws (--person-color, set by the [data-person-key] table
   above) mixed into the card, not the generic blue --accent every other selected control
   uses -- the brief's own "give the active person a clear identity surface using existing
   person colour." Scoped to the selector's own options so the calendar proposal's
   identically-classed assign rows keep the plain shared treatment. */
.person-selector-options .person-option[aria-checked="true"] {
  background: color-mix(in srgb, var(--person-color, var(--accent)) 22%, var(--panel-subtle));
  border-color: color-mix(in srgb, var(--person-color, var(--accent)) 45%, var(--line));
}

/* The indent the Household facts list is read at. It used to match a rule in the agent
   inspector's dialog; that dialog is gone, so this is now the only statement of it. */
#household-list ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* A compact row per fact; the hairline between rows is .app-divider-list's own. */
#household-list li {
  padding-block: var(--space-lg);
  font-size: var(--text-detail-body);
  line-height: 1.4;
}

#household-list li:first-child {
  padding-top: 0;
}

#household-list li:last-child {
  padding-bottom: 0;
}

#household-person-facts ul,
#household-person-habits ul,
#household-person-learned ul,
#household-person-devices ul,
#household-changes {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

#household-person .app-section:has(> .app-section-label[hidden]) {
  display: none;
}

/* Fact rows share the app-row geometry while keeping the list's content edge and rhythm. */
#household-list .household-fact {
  padding-block: var(--space-lg);
  padding-inline: 0;
}

#household-person-facts .household-fact,
#household-person-habits .household-fact,
#household-person-learned .household-fact,
#household-changes .household-fact {
  padding-block: var(--space-lg);
  padding-inline: 0;
}

#household-list .household-fact:first-child {
  padding-top: 0;
}

#household-person-facts .household-fact:first-child,
#household-person-habits .household-fact:first-child,
#household-person-learned .household-fact:first-child,
#household-changes .household-fact:first-child {
  padding-top: 0;
}

#household-list .household-fact:last-child {
  padding-bottom: 0;
}

#household-person-facts .household-fact:last-child,
#household-person-habits .household-fact:last-child,
#household-person-learned .household-fact:last-child,
#household-changes .household-fact:last-child {
  padding-bottom: 0;
}

#household-list .household-fact > .household-fact-main,
#household-person-facts .household-fact > .household-fact-main,
#household-changes .household-fact > .household-fact-main {
  flex: 1 1 auto;
  min-width: 0;
}

#household-person-habits .household-fact > .app-row-title,
#household-person-learned .household-fact > .app-row-title {
  flex: 1 1 auto;
  min-width: 0;
}

#household-list .household-fact > .household-fact-main,
#household-person-facts .household-fact > .household-fact-main,
#household-changes .household-fact > .household-fact-main,
#household-person-habits .household-fact > .app-row-title,
#household-person-learned .household-fact > .app-row-title {
  padding-inline: 0;
}

.household-fact-text.app-quiet-button {
  color: var(--ink);
  padding-inline: 0;
  text-align: start;
  justify-content: flex-start;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  height: auto;
}

.household-fact-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1 1 auto;
  min-width: 0;
}

.household-fact-main > .household-fact-text {
  overflow-wrap: anywhere;
}

.household-fact-main > .app-row-meta {
  display: block;
}

.household-profile-label {
  margin-block-start: var(--space-lg);
}

#household-list > .household-profile-label:first-child,
#household-person-facts > .household-profile-label:first-child {
  margin-block-start: 0;
}

/* A fact's text and its quiet Forget share a row when they fit; the worded action wraps below
   the text when the row has no room. */
.household-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-r2);
}

.household-fact > .household-fact-text {
  flex: 1 1 auto;
  min-width: 0;
}

.household-fact > .household-fact-actions {
  flex: none;
  margin: 0;
}

/* What Rundell knows is a document list inside one card: the browser list inset must not
   create a second gutter, and each fact's title, source and actions get their own line. */
#settings-detail-knows .app-divider-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#settings-detail-knows .knows-row {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
  padding-inline: 0;
}

#settings-detail-knows .knows-row > .settings-row-main {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

#settings-detail-knows .knows-row .app-row-title,
#settings-detail-knows .knows-row .app-row-meta {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

#settings-detail-knows .knows-row > .app-row-actions {
  width: 100%;
}

/* A third pane of the same display band, sized identically to .household-facts beside
   it: a scrollable column owning the band's single content scroller while it shows.
   The pane itself reads in the shared neutral vocabulary now -- its section labels
   inherit .app-section-label's muted tone and its preference rule uses --line -- and it
   sets no --pane-accent of its own: the one accented datum the feature has, the servings
   slider, lives in the two dialogs, .recipe-dialog and .meals-proposal-dialog, which set
   their scopes from --accent-meals. */
.meals-plan[hidden] {
  display: none;
}

/* The gold-and-blue card round: Meals' toolbar used to be a featured pale-peach band and
   its Saved recipes section marker the pane's own terracotta -- both obsolete now that
   cards are equal (SURFACES: "no per-destination tint") and every
   recipe is its own opaque card rather than a line in a divider list. The toolbar sits
   directly on the wallpaper instead (zeroing the shared primitive's ground and rule, the
   same way Calendar's own page header does), so its title and Add groceries need the
   on-wall ink pair every other caption between cards reads through -- Add groceries reads
   as .app-top-button, not the quiet card-button, for the same reason Calendar's Today
   control does. Saved recipes gets the same pair below, scoped to its disclosure body,
   since it
   disclosure sits on a card of its own. The headings themselves are the shared
   .app-disclosure-section, already in the on-wall ink; the scroller's own gutter
   places them, so no inset is restated here. */
.meals-plan .app-toolbar {
  background: transparent;
  border-bottom: 0;
}

/* Each recipe is its own card now (.meal-row composes .app-card), so the empty-plan
   sentence is the one thing left directly on the wallpaper in #meals-list. */
/* Saved recipes is one card: a 44px summary row and, when open, the content inside the same
   surface (the container composes .app-card in the markup). The card's vertical padding is
   zeroed so the toggle's own 44px is the row height; the body carries the bottom inset. The
   toggle reads in the card's ink, not the on-wall pair. */
.meals-saved {
  padding-block: 0;
}

.meals-collapsible-body {
  padding-bottom: var(--card-pad-y);
}

/* A recipe card inside the open card steps one tone up rather than stacking a second shadow. */
.meals-collapsible-body .meal-row {
  background: var(--panel);
  box-shadow: none;
}

/* A section note (the cap and the saved-recipes notice), not the page's status line: it keeps
   the status line's look without being a second .app-status slot. */
.meals-cap-notice {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-detail-body);
}

/* Anything inside a card sits on the card's own surface, so it keeps the card's ink. */
.meals-collapsible-body .app-row-meta:not(.app-card *),
.meals-collapsible-body .meals-cap-notice:not(.app-card *) {
  color: var(--ink-on-wall-muted);
  text-shadow: var(--text-shadow-on-wall);
}

.meals-collapsible-body[hidden],
.meals-collapsible-body [hidden] {
  display: none;
}

/* The one search field (app-parts.js wires it): the input grows, the Clear button sits beside
   it while there is text. The ID-less > selector outranks a page's own .library-search or
   .add-app-search sizing, so the field never overflows the row once Clear appears. */
.app-search {
  display: flex;
  align-items: center;
  gap: var(--stack-gap);
  min-width: 0;
}

.app-search > .app-field {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.app-search > .app-search-clear[hidden] {
  display: none;
}

/* The Clear button already does this; WebKit's own cancel x would be a second one. */
.app-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.meals-saved-search-row,
.books-search-row {
  margin-bottom: var(--space-r2);
}

.meals-saved-search-status {
  margin: 0;
  padding: 0.375rem 0;
}

.meals-saved-search-status:empty {
  display: none;
}

/* The page body owns the phone rhythm, so the two-column layout wrapper and its columns pass
   through there. The desktop block below turns the wrapper and columns into real grid boxes. */
.meals-body {
  display: contents;
}

.meals-column {
  display: contents;
}

/* One card per recipe (.meal-row composes .app-card): its opener and Save/Unsave (plus
   Mark eaten, in the plan list) wrap onto their own line inside the card rather than
   crushing against a narrow one. */
.meal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-r2);
}

.meal-saved-item {
  align-items: center;
}

.meal-saved-item > .meal-open {
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  font: inherit;
}

/* The row's clickable title: an .app-row like an agenda event row, plus only what is
   genuinely Meals-specific -- it shares its line with the Save/Unsave button, so it
   grows into the space that button leaves, at the house tap height. */
.meal-open {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--touch-min);
  cursor: pointer;
}

/* The opener's single column: Meals has no leading time column to lay out beside, so
   the title and meta stack instead, like the agenda row's own main column. */
.meal-open-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* The meal name now reads at the same step and weight as an event title -- level with the
   rest of the restrained hierarchy, not a step above it. */
.meal-title {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--text-detail-body);
  font-weight: var(--w-title);
  line-height: 1.3;
}

/* Its own line under the title (.app-row-meta's measures), not trailing it: a recipe
   title long enough to wrap otherwise leaves "Serves 4 · 9 ingredients" stranded
   mid-line, which is exactly the case at phone width. */
.meal-meta {
  display: block;
}

/* The pane's only control, an .app-quiet-button plus its own placement in the row. */
.meal-save {
  flex: none;
  font-weight: var(--w-meta);
}

/* The row's second action, beside Save/Unsave: same placement, same weight, so the two
   read as one family of quiet row controls rather than one styled differently from the
   other. .meal-row's own flex-wrap is what keeps a narrow row from crushing three items
   onto one line -- the buttons wrap below the opener rather than truncating it. */
.meal-eaten {
  flex: none;
  font-weight: var(--w-meta);
}

/* The Meals review dialog (#meals-proposal-dialog) on the shared .app-dialog frame: one
   section per proposed meal. Meals' own accent scope, like .recipe-dialog above it, so
   the one accented line a recipe detail carries -- the servings slider -- uses the Meals
   accent inside this dialog too. */
.meals-proposal-dialog {
  --pane-accent: var(--accent-meals);
}

/* One proposed meal per section, the same hairline-and-gap rhythm .grocery-meal uses in
   the Add Meals dialog; nothing before the first. */
.meals-proposal-meal + .meals-proposal-meal {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
}

/* The meal's title as its own disclosure: the shared quiet button carrying the shared
   arrow, full width and left aligned like the calendar dialog's group toggle. */
.meals-proposal-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-r2);
  width: 100%;
  min-height: var(--touch-min);
  padding: 0.3rem 0.55rem;
  text-align: left;
  font-weight: var(--w-title);
}

.meals-proposal-toggle-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The recipe itself, set in under its own title far enough to read as that meal's. */
.meals-proposal-recipe {
  margin: 0.45rem 0 0.55rem;
  padding-left: 0.55rem;
}

/* The meal's two choices side by side, wrapping rather than squeezing at a phone
   width. */
.meals-proposal-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

/* The whole label is the touch target at the house 44px, so the 24px box keeps its own
   size and is padded rather than stretched -- a checkbox is a replaced element, the same
   rule .grocery-ingredient follows. */
.meals-proposal-choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--touch-min);
  cursor: pointer;
}

/* Same ringed-circle pattern .grocery-check-input already draws (appearance reset, a
   ::before dot that scales in on :checked, an accent focus ring) -- copied rather than
   left on bare accent-color, so the three checkboxes still on the browser's own control
   read consistently with the one the app already got right. */
/* The dialog's checkbox is the shared .app-check (chat.js composes it onto the input
   this label wraps) -- the last of the copies of that circle to go. */

/* The Music review dialog (#music-proposal-dialog) on the shared .app-dialog frame: one
   row per proposed candidate. No accent scope of its own -- Music has no dedicated accent
   token, so the dialog keeps the app's plain default accent, the same way the Calendar
   proposal dialog does. */
.music-proposal-summary {
  margin: 0 0 0.55rem;
}

/* One proposed candidate per row, the same hairline-and-gap rhythm .meals-proposal-meal
   uses above; nothing before the first. */
.music-proposal-choice + .music-proposal-choice {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
}

/* The whole label is the touch target at the house 44px, so the 24px box keeps its own
   size and is padded rather than stretched -- the same rule .meals-proposal-choice
   follows. */
.music-proposal-choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--touch-min);
  cursor: pointer;
}

.music-proposal-choice-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The choice dialog (#choice-dialog): one tappable row per candidate, the shape the
   retired chat modal drew -- podcast artwork beside the title at 48px, a publisher or
   date under it. Every choice opens this dialog (a chat clarifying question, any domain's
   ambiguity, a background browser job's question), over its inline thread or row. */
.choice-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.choice-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.7rem;
  min-height: 56px;
  padding: 0.4rem 0.6rem;
  color: var(--ink);
  text-align: left;
  background: var(--panel-subtle);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
}

.choice-row:hover,
.choice-row:focus-visible {
  background: var(--panel);
}

/* Bounded like .thread-option-art above, one step larger for the dialog's own room. */
.choice-art {
  width: 48px;
  height: 48px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-control);
}

.choice-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.choice-row-label,
.choice-row-detail,
.choice-row-note {
  overflow-wrap: anywhere;
}

.choice-row-label {
  font-size: var(--text-detail-body);
}

.choice-row-detail,
.choice-row-note {
  color: var(--muted);
  font-size: var(--text-detail-meta);
}

/* The phone bottom-sheet rules for this dialog live in the first max-width: 30rem block
   below (grep .choice-dialog): that block must stay the first in the file. */

.meals-confirmation,
.music-confirmation {
  margin-top: 0.55rem;
}

.meals-confirmation p,
.music-confirmation p {
  margin: 0 0 0.3rem;
  font-size: var(--text-detail-body);
}

.meals-confirmation p:last-child,
.music-confirmation p:last-child {
  margin-bottom: 0;
}

/* Programmatic only: focused on every open so screen readers announce the new pane, but
   it is visually hidden and never in the tab order, so a visible ring here would carry no
   information. */
.agenda-title:focus,
#household-person-title:focus,
.meals-plan-title:focus {
  outline: none;
}

/* Household page: the list drops its markers, the row gaps its person dot from the
   name block, and the edit dialog's labels stack their caption over the field. */
#household-people-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#household-people-list .settings-nav-row {
  gap: var(--space-r2);
}

.household-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.household-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

.household-field > .app-field {
  min-width: 0;
  width: 100%;
}

.household-field > p {
  margin: 0;
}

.household-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* The swatch is the touch target; the fill is the themed token, so it follows light and dark. */
.household-swatch {
  box-sizing: border-box;
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-clip: padding-box;
}

.household-swatch[aria-checked="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--surface-raised);
}