/* Same palette as the build plan, so the project reads as one thing. */

/* `hidden` means hidden. Without this, any rule that sets `display` — the
   panels are all `display: flex` — quietly wins over the attribute, and the
   Account, Basket and Who-lives-here panels sat permanently open at the foot
   of the page while their buttons appeared to do nothing. */
[hidden] { display: none !important; }

:root {
  --ground:      #F3F4F1;
  --surface:     #FBFBFA;
  --surface-alt: #EAECE7;
  --ink:         #161C19;
  --ink-soft:    #56605A;
  --ink-faint:   #7C857F;
  --rule:        #D6DAD4;
  --rule-strong: #B9BFB8;

  --accent:      #1F6B57;
  --accent-soft: #DCEAE4;
  --open:        #9A5A16;
  --open-soft:   #F3E6D4;
  --blocked:     #9E3B2B;
  --blocked-soft:#F5DFDA;

  --shadow: 0 1px 2px rgba(22, 28, 25, .06);

  --sans: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #101513;
    --surface:     #161C19;
    --surface-alt: #1C2320;
    --ink:         #E3E8E4;
    --ink-soft:    #99A39C;
    --ink-faint:   #78827B;
    --rule:        #29312C;
    --rule-strong: #3A443E;
    --accent:      #63C1A5;
    --accent-soft: #17302A;
    --open:        #DFA45E;
    --open-soft:   #302517;
    --blocked:     #E28372;
    --blocked-soft:#33201C;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  --ground:      #101513;
  --surface:     #161C19;
  --surface-alt: #1C2320;
  --ink:         #E3E8E4;
  --ink-soft:    #99A39C;
  --ink-faint:   #78827B;
  --rule:        #29312C;
  --rule-strong: #3A443E;
  --accent:      #63C1A5;
  --accent-soft: #17302A;
  --open:        #DFA45E;
  --open-soft:   #302517;
  --blocked:     #E28372;
  --blocked-soft:#33201C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; letter-spacing: -.012em; }
h1 { font-size: 1.15rem; font-weight: 700; }
h2 { font-size: .95rem; font-weight: 680; }
h3 { font-size: .8rem; font-weight: 650; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--rule-strong);
}
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: .85rem 1.25rem;
  max-width: 96rem;
  margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1 1 14rem; }
.brand-mark {
  width: 10px; height: 26px; border-radius: 2px;
  background: var(--accent); flex: none;
}
.brand-sub {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .05em;
  color: var(--ink-faint);
}

.summary { display: flex; gap: 1.6rem; flex: 0 1 auto; }
.stat { display: flex; flex-direction: column; gap: .05rem; }
.stat-figure {
  font-size: 1.25rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.stat-label {
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.stat.attention .stat-figure { color: var(--open); }

.actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.toggle {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--ink-soft); cursor: pointer;
}
.btn {
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: .42rem .8rem;
  border-radius: 4px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); color: var(--surface); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.status {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--accent);
  padding: 0 1.25rem .6rem;
  max-width: 96rem;
  margin: 0 auto;
  min-height: 1rem;
}
.status.error { color: var(--blocked); }

/* ---------- the intro screen ---------- */

.setup {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  min-width: 0;
}
.setup-head { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 2rem; }
.setup-mark {
  width: 10px; height: 34px; border-radius: 2px;
  background: var(--accent); flex: none; margin-top: .2rem;
}
.setup-step {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.setup h1 { font-size: 1.5rem; margin: .2rem 0 .35rem; letter-spacing: -.02em; }
.setup-lede { font-size: .92rem; color: var(--ink-soft); }
.setup-body { display: flex; flex-direction: column; gap: 1.1rem; }
.setup-hint { font-size: .8rem; color: var(--ink-faint); }

.setup-problems {
  background: var(--blocked-soft); color: var(--blocked);
  border-radius: 5px; padding: .7rem .85rem; font-size: .84rem;
}
.setup-problems ul {
  display: flex; flex-direction: column; gap: .2rem;
  padding-top: .3rem; padding-left: 1rem; list-style: disc;
}

/* step one: how many of you */
.setup-counts { display: flex; gap: 1rem; flex-wrap: wrap; }
.counter {
  display: flex; align-items: center; gap: .6rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 6px; padding: .7rem .9rem; flex: 1 1 12rem;
  box-shadow: var(--shadow);
}
.counter-label { flex: 1; font-weight: 600; font-size: .9rem; }
.counter-btn {
  font: inherit; font-size: 1.1rem; line-height: 1;
  width: 2rem; height: 2rem; flex: none;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--ground); color: var(--ink); cursor: pointer;
}
.counter-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.counter-btn:disabled { opacity: .35; cursor: not-allowed; }
.counter-value {
  font-size: 1.15rem; font-weight: 700; min-width: 1.4rem; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* step two: names */
.setup-people { display: flex; flex-direction: column; gap: .5rem; }
.setup-person {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 5px; padding: .55rem .7rem;
}
.setup-person input[type="text"] { flex: 2 1 8rem; min-width: 0; }
.setup-person select { flex: 1 1 9rem; min-width: 0; }
.setup-person input[type="text"], .setup-person select {
  font: inherit; font-size: .85rem; padding: .3rem .45rem;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--ground); color: var(--ink);
}

/* step three: the details */
.setup-details { display: flex; flex-direction: column; gap: .9rem; }
.setup-detail {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 6px; padding: .8rem .9rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .5rem .7rem;
}
.setup-detail h2 {
  grid-column: 1 / -1; font-size: .95rem; letter-spacing: -.01em;
}
.setup-field { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.setup-field-label {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* an allergy is not a preference and should not look like one */
.setup-field.danger .setup-field-label { color: var(--blocked); }
.setup-field input,
.setup-field select,
.setup-field textarea {
  font: inherit; font-size: .85rem; padding: .32rem .45rem; width: 100%;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--ground); color: var(--ink);
}
.setup-field textarea { resize: vertical; line-height: 1.45; }
/* the household's own rules span the row rather than sitting in a column */
.setup-house .setup-field:last-child { grid-column: 1 / -1; }
.setup-field.danger input { border-color: var(--blocked); }
.setup-household-name input { font-size: .95rem; padding: .45rem .55rem; }

.setup-actions {
  display: flex; gap: .6rem; flex-wrap: wrap;
  padding-top: .6rem; border-top: 1px solid var(--rule); margin-top: .4rem;
}
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-quiet:hover:not(:disabled) { color: var(--accent); border-color: var(--rule-strong); }

/* ---------- the week's table, and profiles ---------- */

.grid-panel {
  max-width: 96rem;
  margin: 1.1rem auto 0;
  padding: 1rem 1.05rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-width: 0;
}
/* Not yet looked at: worth noticing, not worth shouting about. */
.grid-panel.needs-review { border-color: var(--accent); }

.grid-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .55rem; border-bottom: 1px solid var(--rule);
}
.grid-sub { font-size: .78rem; color: var(--ink-soft); max-width: 46rem; }
.grid-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.scroller { overflow-x: auto; min-width: 0; }

.grid { border-collapse: collapse; width: 100%; min-width: 40rem; }
.grid th, .grid td {
  border-bottom: 1px solid var(--rule);
  padding: .4rem .5rem;
  text-align: center;
  vertical-align: middle;
}
.grid thead th { border-bottom: 1px solid var(--rule-strong); }
.grid-corner { border-bottom: 1px solid var(--rule-strong) !important; }
.grid thead th span { display: block; }
.grid-day {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .06em; color: var(--ink);
}
.grid-date { font-family: var(--mono); font-size: .6rem; color: var(--ink-faint); }
.grid-portions {
  font-family: var(--mono); font-size: .6rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.grid thead th.nobody .grid-portions { color: var(--blocked); }

.grid-person { text-align: left !important; white-space: nowrap; }
.grid-name { display: block; font-weight: 600; font-size: .84rem; }
.grid-portion {
  display: block; font-family: var(--mono); font-size: .6rem;
  color: var(--ink-faint);
}

/* every cell says where its value came from */
.grid-cell.calendar { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.grid-cell.override { background: var(--open-soft); }
.grid-cell.assumed  { background: transparent; }
.grid-cell.out      { background: var(--blocked-soft); }
.grid-cell input[type="checkbox"] { width: 1.05rem; height: 1.05rem; cursor: pointer; }

.grid-cook-row, .grid-time-row { background: var(--surface-alt); }
.grid-cell select {
  font: inherit; font-size: .74rem;
  padding: .12rem .25rem; max-width: 100%;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--surface); color: var(--ink);
}
.grid-cell input[type="range"] { width: 100%; min-width: 4.5rem; cursor: pointer; }
.grid-minutes {
  display: block;
  font-family: var(--mono); font-size: .62rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.grid-nocook { color: var(--ink-faint); font-family: var(--mono); }

.chip.calendar { background: var(--accent-soft); color: var(--accent); }
.chip.assumed  { background: var(--surface-alt); color: var(--ink-soft); }
.chip.override { background: var(--open-soft); color: var(--open); }
.chip.usual {
  background: transparent; color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* the usual week: an outline rather than a fill, so it reads as "the default"
   next to the calendar's evidence and a person's correction */
.grid-cell.usual { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }

.usual-week { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.usual-line { flex: 1 1 100%; font-size: .8rem; color: var(--ink-soft); max-width: 52rem; }
.chip.portion  { background: var(--surface-alt); color: var(--ink-soft); }

/* account */
.account-body { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.account-note { font-size: .84rem; color: var(--ink-soft); max-width: 44rem; }
.account-household {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  width: 100%; padding: .55rem .7rem;
  background: var(--surface-alt); border-radius: 5px;
}
.account-household strong { flex: 1 1 8rem; font-size: .9rem; }
.invite-code {
  font-family: var(--mono); font-size: 1rem; letter-spacing: .22em;
  padding: .2rem .5rem; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent);
  user-select: all;
}
.account-join { display: flex; gap: .5rem; flex-wrap: wrap; }
.account-join input {
  font: inherit; font-family: var(--mono); font-size: .9rem;
  letter-spacing: .18em; text-transform: uppercase; width: 8.5rem;
  padding: .35rem .5rem;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--ground); color: var(--ink);
}

/* profiles */
.people { display: flex; flex-direction: column; }
.person {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) 1fr auto;
  gap: .3rem .8rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.person:last-child { border-bottom: none; }
.person-name { font-weight: 600; }
.person-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.person-meta select {
  font: inherit; font-size: .76rem;
  padding: .15rem .3rem;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--ground); color: var(--ink);
}
.person-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .4rem .7rem;
}
.person-field { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.person-field-label {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
/* allergies are not a preference, and should not look like one */
.person-field.danger .person-field-label { color: var(--blocked); }
.person-field input {
  font: inherit; font-size: .78rem;
  padding: .22rem .35rem; width: 100%;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--ground); color: var(--ink);
}
.person-field.danger input { border-color: var(--blocked); }

.add-person { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .3rem; }
.add-person input, .add-person select {
  font: inherit; font-size: .8rem;
  padding: .35rem .5rem;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--ground); color: var(--ink);
}

/* ---------- columns ---------- */

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.1rem;
  padding: 1.1rem 1.25rem 4rem;
  max-width: 96rem;
  margin: 0 auto;
  align-items: start;
}
.column {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.05rem 1.15rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.column-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; padding-bottom: .55rem; border-bottom: 1px solid var(--rule);
}
.tag {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .06em; color: var(--ink-faint);
}
.subhead {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-top: .35rem;
}

/* ---------- the week ---------- */

.week { display: flex; flex-direction: column; }
.day {
  display: grid;
  grid-template-columns: 3.1rem 1fr auto;
  gap: .2rem .7rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.day:last-child { border-bottom: none; }
.day-name {
  font-family: var(--mono); font-size: .68rem;
  color: var(--ink-faint); letter-spacing: .04em;
}
.day-title { font-weight: 600; min-width: 0; }
.day-meta {
  font-family: var(--mono); font-size: .66rem;
  color: var(--ink-faint); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.day.leftover .day-title { color: var(--ink-soft); font-weight: 500; font-style: italic; }
.day-protein {
  grid-column: 2 / -1;
  font-family: var(--mono); font-size: .62rem;
  color: var(--ink-faint); letter-spacing: .05em;
}

/* what the calendar says about that evening */
.day-agenda {
  grid-column: 2 / -1;
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  font-size: .74rem; color: var(--ink-soft);
  margin-top: .12rem;
}
.day-agenda .budget {
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .08rem .3rem; border-radius: 2px; white-space: nowrap;
}
.day-agenda.clear .budget { background: var(--surface-alt); color: var(--ink-faint); }
.day-agenda.tight .budget { background: var(--open-soft);    color: var(--open); }
.day-agenda.out   .budget { background: var(--blocked-soft); color: var(--blocked); }
.day-agenda.out .what, .day-agenda.tight .what { color: var(--ink); }
.day.over-budget .day-meta { color: var(--blocked); font-weight: 600; }

/* jobs the scheduler put on this evening, under the meal they fit around */
.day-jobs {
  grid-column: 2 / -1;
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin-top: .2rem;
}
.job-chip {
  display: inline-flex; align-items: baseline; gap: .3rem;
  font-size: .68rem;
  padding: .1rem .38rem;
  border-radius: 3px;
  background: var(--surface-alt);
  color: var(--ink-soft);
}
.job-chip.late { background: var(--open-soft); color: var(--open); }
.job-who {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .06em; text-transform: uppercase; opacity: .8;
}

.validation {
  font-size: .78rem;
  border-radius: 4px;
  padding: .6rem .7rem;
  background: var(--accent-soft);
  color: var(--accent);
}
.validation.fail { background: var(--blocked-soft); color: var(--blocked); }
.validation ul { display: flex; flex-direction: column; gap: .3rem; padding-top: .3rem; }

/* ---------- shopping list ---------- */

.list { display: flex; flex-direction: column; gap: .8rem; }
.aisle-name {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: .3rem; border-bottom: 1px solid var(--rule);
}
.line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 .7rem;
  padding: .42rem 0;
  border-bottom: 1px solid var(--rule);
}
.line:last-child { border-bottom: none; }
.line-name { font-weight: 600; min-width: 0; }
.line-cost {
  font-family: var(--mono); font-size: .78rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.line-packs {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: .66rem; color: var(--ink-faint);
}
.line-surplus { color: var(--open); }
.footnotes {
  font-size: .74rem; color: var(--ink-faint);
  display: flex; flex-direction: column; gap: .35rem;
  border-top: 1px solid var(--rule); padding-top: .6rem;
}

/* ---------- larder ---------- */

.useup, .offers {
  border-radius: 5px;
  padding: .7rem .8rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.useup { background: var(--open-soft); }
.useup h3 { color: var(--open); }
.offers { background: var(--accent-soft); }
.offers h3 { color: var(--accent); }
.useup ul, .offers ul { display: flex; flex-direction: column; gap: .35rem; }
.useup li, .offers li {
  font-size: .78rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.useup li { color: var(--open); }
.offers li { color: var(--accent); }
.mini {
  font: inherit; font-size: .7rem; font-weight: 600;
  border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: 3px; padding: .12rem .4rem; cursor: pointer; white-space: nowrap;
}
.mini:hover { background: var(--surface); }

.stock, .freezer { display: flex; flex-direction: column; }
.stock-item, .freezer-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.stock-item:last-child, .freezer-item:last-child { border-bottom: none; }
.stock-name { font-weight: 600; font-size: .85rem; min-width: 0; }
.stock-amount {
  font-family: var(--mono); font-size: .76rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stock-meta {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .62rem; color: var(--ink-faint);
}
.stock-edit { display: flex; gap: .3rem; align-items: center; }
.stock-edit input {
  font: inherit; font-family: var(--mono); font-size: .72rem;
  width: 5rem; padding: .15rem .3rem;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--ground); color: var(--ink);
}

.chip {
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .1rem .32rem; border-radius: 2px; white-space: nowrap;
}
.chip.confirmed { background: var(--accent-soft); color: var(--accent); }
.chip.predicted { background: var(--surface-alt); color: var(--ink-soft); }
.chip.stale     { background: var(--blocked-soft); color: var(--blocked); }
.chip.risk      { background: var(--open-soft); color: var(--open); }

.legend {
  font-family: var(--mono); font-size: .62rem;
  color: var(--ink-faint); line-height: 1.9;
  border-top: 1px solid var(--rule); padding-top: .6rem;
}

.empty { font-size: .78rem; color: var(--ink-faint); padding: .4rem 0; }

/* ---------- jobs ---------- */

.wont-fit {
  border-radius: 5px;
  padding: .7rem .8rem;
  display: flex; flex-direction: column; gap: .45rem;
  background: var(--blocked-soft);
}
.wont-fit h3 { color: var(--blocked); }
.wont-fit ul { display: flex; flex-direction: column; gap: .35rem; }
.wont-fit li {
  font-size: .78rem; color: var(--blocked);
  display: flex; flex-direction: column; gap: .1rem;
}
.reminder-why {
  font-family: var(--mono); font-size: .64rem;
  opacity: .85; text-align: right;
}
.wont-fit .reminder-why { text-align: left; }
#reminder-list li { flex-wrap: wrap; }

.jobs { display: flex; flex-direction: column; }
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.job:last-child { border-bottom: none; }
.job-title { font-weight: 600; font-size: .88rem; min-width: 0; }
.job-when { white-space: nowrap; }
.job-meta {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .62rem; color: var(--ink-faint);
}
.job-note {
  grid-column: 1 / -1;
  font-size: .72rem; color: var(--ink-faint); font-style: italic;
}
/* where the scheduler actually put it */
.job-planned {
  padding: .08rem .3rem; border-radius: 2px;
  background: var(--surface-alt); color: var(--ink-soft);
}
.job-planned.unplanned { background: var(--blocked-soft); color: var(--blocked); }

.chip.overdue { background: var(--blocked-soft); color: var(--blocked); }
.chip.today   { background: var(--open-soft);    color: var(--open); }
.chip.soon    { background: var(--accent-soft);  color: var(--accent); }
.chip.later   { background: var(--surface-alt);  color: var(--ink-soft); }
.chip.someday { background: transparent; color: var(--ink-faint); border: 1px solid var(--rule); }
/* fires off the diary rather than a date */
.chip.cued { background: transparent; color: var(--accent); border: 1px solid var(--accent); }

.capture { display: flex; flex-direction: column; gap: .5rem; }
.capture textarea {
  font: inherit; font-size: .82rem;
  width: 100%; resize: vertical;
  padding: .5rem .6rem;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--ground); color: var(--ink);
}
.capture-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* one click from the right aisle, since no supermarket offers a basket API */
.line-shop {
  grid-column: 1 / -1;
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-top: .1rem;
}
.line-shop a {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.line-shop a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- the basket ---------- */

.basket-summary { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.basket-count {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  padding: .15rem .45rem; border-radius: 3px;
  background: var(--surface-alt); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.basket-count.attention { background: var(--open-soft); color: var(--open); }

.basket-cmd {
  font-family: var(--mono); font-size: .78rem;
  background: var(--surface-alt); color: var(--ink);
  padding: .45rem .6rem; border-radius: 4px; margin: 0;
  overflow-x: auto; max-width: 100%;
}

.basket-result {
  font-size: .84rem; padding: .6rem .75rem; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent);
}
.basket-result.partial { background: var(--open-soft); color: var(--open); }
.basket-result ul { padding: .3rem 0 0 1rem; list-style: disc; }

.basket-progress { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); }

/* One grid shared by both lists and every row in them, so names, sizes,
   prices and buttons line up all the way down, and each button sits beside the
   line it belongs to rather than out at the far edge of a wide screen. */
.basket-lines {
  display: grid;
  grid-template-columns: minmax(0, 24rem) max-content max-content max-content;
  justify-content: start;
  column-gap: 1rem;
  width: 100%;
}
.basket-lines > .subhead { grid-column: 1 / -1; }
.basket-list { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.basket-row {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  row-gap: .4rem; align-items: center;
  padding: .55rem 0; border-bottom: 1px solid var(--rule);
}
.basket-row:last-child { border-bottom: none; }
.basket-name {
  display: flex; flex-direction: column; min-width: 0;
  font-weight: 600; font-size: .86rem;
}
.basket-for { font-weight: 400; font-size: .74rem; color: var(--ink-faint); }
.basket-auto {
  font-family: var(--mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.basket-qty {
  font-family: var(--mono); font-size: .7rem; color: var(--ink-faint);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.basket-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.basket-loading { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); }

.basket-price {
  display: flex; flex-direction: column; align-items: flex-end;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.basket-price-each { font-family: var(--mono); font-size: .78rem; color: var(--ink); }
.basket-price-unit { font-family: var(--mono); font-size: .6rem; color: var(--ink-faint); }

.basket-link {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-faint); text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.basket-link:hover, .basket-link:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* the ranked choices for one line */
.basket-candidates {
  grid-column: 1 / -1;
  /* Sized by the columns above and never the other way round: a long product
     title must not widen the price column for every row in the list. */
  contain: inline-size; min-width: 0;
  display: flex; flex-direction: column; gap: .3rem;
  padding: .45rem .55rem; border-radius: 5px;
  background: var(--surface-alt);
}
.basket-cand {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .3rem .7rem; align-items: start;
  padding: .3rem .4rem; border-radius: 4px;
  border: 1px solid transparent;
}
.basket-cand:hover { border-color: var(--rule-strong); }
/* the app's suggestion — say so visibly */
.basket-cand.confident { border-color: var(--accent); }
.basket-cand-pick {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem; align-items: start; cursor: pointer;
}
.basket-cand input { margin-top: .2rem; accent-color: var(--accent); }
.basket-cand-text { display: flex; flex-direction: column; min-width: 0; }
.basket-cand-title { font-size: .84rem; }
.basket-cand-why { font-family: var(--mono); font-size: .6rem; color: var(--ink-faint); }
.basket-cand-offer { font-size: .72rem; color: var(--accent); }
.basket-cand.unavailable .basket-cand-title,
.basket-cand.unavailable .basket-price-each { color: var(--ink-faint); }
.basket-cand .basket-link { margin-top: .3rem; }
.basket-more { align-self: flex-start; }

@media (max-width: 600px) {
  .basket-lines { grid-template-columns: minmax(0, 1fr) max-content; }
  .basket-name, .basket-actions { grid-column: 1 / -1; }
}
.basket-cand-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding-top: .3rem; }
.basket-retry { display: flex; gap: .35rem; flex-wrap: wrap; }
.basket-retry input {
  font: inherit; font-size: .78rem; padding: .2rem .4rem;
  width: 11rem; max-width: 100%;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--ground); color: var(--ink);
}
.basket-error { font-size: .78rem; color: var(--blocked); }

/* ---------- the week's start, and the family's own words ---------- */

.week-start {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .45rem;
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.week-start input {
  font: inherit; font-family: var(--mono); font-size: .8rem;
  letter-spacing: normal; text-transform: none;
  padding: .2rem .4rem; border-radius: 3px;
  border: 1px solid var(--rule-strong);
  background: var(--ground); color: var(--ink);
  color-scheme: light dark;
}

.note-box { display: flex; flex-direction: column; gap: .3rem; margin-top: .9rem; }
.note-label {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.note-box textarea {
  font: inherit; font-size: .88rem; line-height: 1.45;
  width: 100%; max-width: 46rem; min-height: 3.2rem; resize: vertical;
  padding: .45rem .55rem; border-radius: 4px;
  border: 1px solid var(--rule-strong);
  background: var(--ground); color: var(--ink);
}
.note-box textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.standing-line { font-size: .78rem; color: var(--ink-faint); margin-top: .35rem; max-width: 46rem; }
.standing-line button {
  font: inherit; color: var(--accent); background: none; border: none;
  padding: 0; cursor: pointer; text-decoration: underline;
}

/* ---------- the method, and sending it on ---------- */

.btn-small { font-size: .74rem; padding: .25rem .6rem; }
/* the heading takes the slack, so the tags and buttons sit together on the right */
.column-head { flex-wrap: wrap; }
.column-head > h2 { margin-right: auto; }

.day-method { grid-column: 2 / -1; font-size: .84rem; }
.day-method summary {
  cursor: pointer; width: fit-content;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.day-method summary:hover, .day-method summary:focus-visible { color: var(--accent); }
.method-ingredients { list-style: disc; padding-left: 1.2rem; margin: .45rem 0; columns: 2 14rem; }
.method-steps { padding-left: 1.3rem; margin: .45rem 0 .2rem; display: grid; gap: .3rem; max-width: 42rem; }
.method-ingredients li, .method-steps li { line-height: 1.45; }

.day-share {
  grid-column: 2 / -1; justify-self: start;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); background: none; border: none; padding: 0; cursor: pointer;
  border-bottom: 1px solid var(--rule-strong);
}
.day-share:hover, .day-share:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

.share-dialog {
  width: min(36rem, calc(100vw - 2rem)); padding: 1rem;
  border: 1px solid var(--rule-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink);
}
.share-dialog::backdrop { background: rgb(0 0 0 / .45); }
.share-dialog h2 { font-size: 1rem; margin-bottom: .6rem; }
.share-dialog textarea {
  width: 100%; font-family: var(--mono); font-size: .78rem; line-height: 1.45;
  padding: .5rem; border-radius: 4px; border: 1px solid var(--rule-strong);
  background: var(--ground); color: var(--ink); resize: vertical;
}
.share-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.share-parts { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .6rem; }
.share-hint { font-size: .84rem; color: var(--ink-soft); margin-bottom: .2rem; }
.share-part { justify-content: flex-start; text-align: left; }
.share-part.sent { color: var(--ink-faint); border-color: var(--rule); }

/* ---------- agreeing, revising, rating ---------- */

.tag.agreed { color: var(--accent); }
.note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .45rem; }
.note-hint { font-size: .74rem; color: var(--ink-faint); }

.day-rate { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: .35rem; }
.day-rate-label {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-right: .15rem;
}
.rate-btn {
  font-size: .95rem; line-height: 1; padding: .2rem .4rem; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: transparent; filter: grayscale(1); opacity: .65;
}
.rate-btn:hover, .rate-btn:focus-visible { filter: none; opacity: 1; }
.rate-btn.chosen { filter: none; opacity: 1; border-color: var(--accent); background: var(--accent-soft); }

/* ---------- history ---------- */

.history-body { display: flex; flex-direction: column; gap: .5rem; }
.history-rate { display: flex; flex-direction: column; }
.history-rate-row {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--rule);
}
.history-rate-row .day-rate { grid-column: auto; }
.history-when { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); }
.history-title { font-size: .86rem; }
.history-lines { list-style: disc; padding-left: 1.2rem; font-size: .84rem; display: grid; gap: .25rem; max-width: 52rem; }
.history-table { border-collapse: collapse; font-size: .84rem; min-width: 26rem; }
.history-table th {
  text-align: left; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); padding: .3rem .6rem .3rem 0;
  border-bottom: 1px solid var(--rule-strong);
}
.history-table td { padding: .35rem .6rem .35rem 0; border-bottom: 1px solid var(--rule); }
.history-table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.history-table tr.liked .history-title { color: var(--accent); }
.history-table tr.disliked .history-title { color: var(--ink-faint); text-decoration: line-through; }

/* ---------- where this family is kept ---------- */

/* Small, and only on screen when it has something to say — "saved to your
   account" only reassures if its absence would be noticed. */
.sync-chip {
  font: inherit; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: .2rem .5rem; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: transparent;
  color: var(--ink-faint); cursor: pointer;
}
.sync-chip:hover, .sync-chip:focus-visible { color: var(--ink); border-color: var(--ink-faint); }
.sync-chip.sync-saved { color: var(--accent); border-color: var(--accent); }
.sync-chip.sync-saving, .sync-chip.sync-syncing { color: var(--ink-soft); }
.sync-chip.sync-clash { color: var(--open); border-color: var(--open); }
.sync-chip.sync-offline { color: var(--open); border-color: var(--open); }
.sync-chip.sync-error { color: var(--blocked); border-color: var(--blocked); }

.account-rescue {
  display: flex; flex-direction: column; gap: .4rem; align-items: flex-start;
  padding: .6rem .75rem; border-radius: 5px;
  background: var(--open-soft); color: var(--open);
}

/* ---------- the week, step by step ---------- */

.steps { border-top: 1px solid var(--rule); }
.steps ol {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 96rem; margin: 0 auto; padding: 0 1.25rem;
}
.step-tab {
  font: inherit; width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .5rem .55rem; background: none; color: var(--ink-soft);
  border: 0; border-bottom: 3px solid transparent;
}
.step-tab:hover { color: var(--ink); }
.step-num {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--rule-strong); color: var(--ink-soft);
}
.step-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.step-name { font-weight: 650; font-size: .88rem; }
.step-state { font-size: .72rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-tab.done .step-num { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }
.step-tab.done .step-state { color: var(--accent); }
.step-tab.next .step-num { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.step-tab.next .step-state { color: var(--ink-soft); font-weight: 600; }
.step-tab[aria-current="step"] { color: var(--ink); border-bottom-color: var(--accent); }

.panels { padding: 0 1.25rem; }
.panels:not(:has(> section:not([hidden]))) { display: none; }

.step-page {
  max-width: 96rem; margin: 0 auto; padding: 1.25rem 1.25rem 4rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.step-page > .grid-panel { margin: 0; }
.step-page .columns { padding: 0; max-width: none; margin: 0; width: 100%; }
.step-intro { display: flex; flex-direction: column; gap: .3rem; max-width: 46rem; }
.step-intro h2 { font-size: 1.35rem; font-weight: 700; text-wrap: balance; }
.step-intro p { color: var(--ink-soft); font-size: .9rem; }
.step-eyebrow {
  font-family: var(--mono); font-size: .66rem !important; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent) !important;
}
.step-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .4rem; }
.slot { min-width: 0; display: flex; flex-direction: column; }
.step-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .8rem;
  padding-top: 1rem; border-top: 1px solid var(--rule);
}
.btn-big { font-size: .95rem; padding: .65rem 1.2rem; }
.step-done-line { font-size: .88rem; color: var(--accent); font-weight: 600; }
.link-btn {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.plan-panel .note-box { margin: 0; }

@media (max-width: 640px) {
  .steps ol { padding: 0 .5rem; }
  .step-tab { flex-direction: column; align-items: flex-start; gap: .3rem; padding: .5rem .3rem; }
  .step-name { font-size: .8rem; }
  .step-state { font-size: .66rem; white-space: normal; }
  .topbar { position: static; }
  .topbar-inner { gap: .6rem; }
  .actions { gap: .2rem; }
  .actions .btn-quiet { padding: .3rem .45rem; font-size: .78rem; }
  .topbar-inner, .step-page, .panels { padding-left: 1rem; padding-right: 1rem; }
  .step-next { justify-content: stretch; }
  .step-next .btn-big { width: 100%; }
}

/* Shopping gets the room: the list flows into columns on a wide screen, the
   larder sits narrower beside it. */
@media (min-width: 900px) {
  .shop-columns { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }
  .cook-columns { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); }
}
.shop-columns .list { display: block; columns: 3 15rem; column-gap: 1.75rem; }
.shop-columns .list > div { margin-bottom: .9rem; }
.shop-columns .aisle-name { break-after: avoid; }
.shop-columns .line { break-inside: avoid; }