/* plan.css — planning the week (js/plan.js; MEAL-PLANNING-SPEC §6.3, §6.5,
 * §6.8): the draft week and the plan week, a day, the swap and change sheet,
 * Your week and its choosers. Every class starts with `plan-`.
 *
 * The rows, the segments, the steppers, the chips, the sheet and the meal
 * lines are the kit's (base.css) and Food's (food.css); this file lays them
 * out. Tokens only; nothing under 13 px; every control 44 px to the finger
 * (steppers 48). The accent is the person: a diner's row is drawn in THAT
 * diner's accent (js/recipes.js dinerAttrs sets the variables on the row),
 * and red is only for a day past its ceiling. A width rule answers to its
 * column (`@container`), never to the viewport (§3.3). */

/* --------------------------------------------------------------- shared */

.plan-corner { display: contents; }
.plan-tag { vertical-align: 1px; }
.plan-group-title {
  padding: var(--s-4) 0 2px;
  font: 600 var(--t-sub-size)/1.2 var(--font);
  color: var(--ink-2);
}
.plan-note { font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }
.plan-problem { font: 560 var(--t-sub-size)/1.35 var(--font); color: var(--ink); text-wrap: pretty; }
.plan-problem:empty { display: none; }
.plan-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--accent-mark);
  vertical-align: 1px;
}
.plan-loading { display: grid; gap: var(--s-2); }
.plan-skel {
  display: block;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  animation: skel-breathe 1.4s var(--ease) infinite alternate;
}

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

.plan-week { display: grid; gap: var(--s-3); }
.plan-phone,
.plan-wide { display: grid; gap: var(--s-3); }
.plan-wide { display: none; }
.plan-weekline { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.plan-weekline b { color: var(--ink); font-weight: 560; }
.plan-days { margin-top: var(--s-1); border-top: 1px solid var(--line); }
/* A home day still to do something about is bold ink ("102 to go"); a
 * dinner out's room is ink-2 at regular weight, never a shortfall (§6.3). */
.plan-day-row .nav-row-value.is-need { color: var(--ink); font-weight: 560; }
.plan-day-row .nav-row-value.is-over { color: var(--red); font-weight: 560; }
.plan-day-row .nav-row-value.is-room,
.plan-day-row .nav-row-value.is-quiet { color: var(--ink-2); font-weight: 450; }
.plan-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-2); }
.plan-week .callout { margin-top: 0; }
.plan-offline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: var(--t-sub); color: var(--ink-2); }

/* A notice that asks the person something (a protocol word the planner did
 * not know, a target that moved): its words, then its chips. */
.plan-ask {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) 14px;
  border-radius: var(--r-tile);
  background: var(--surface-2);
}
.plan-ask-words { font: var(--t-sub); color: var(--ink); text-wrap: pretty; }
/* The wide pane's one question: a row per word, its days, Home and Out. */
.plan-word { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.plan-word-said { font: var(--t-sub); color: var(--ink-2); }
.plan-word-said b { color: var(--ink); font-weight: 560; }
/* A day row that asks (§2.1): the day opens from its words, the chips
 * answer the word. A div of two targets, never a button in a button. */
.plan-day-row.is-asking { cursor: default; }
.plan-day-row.is-asking:active::before { background: transparent; }
.plan-ask-main {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.plan-ask-main .nav-row-sub { color: var(--ink); }
.plan-ask-chips { flex: none; display: flex; gap: 6px; }

/* ---------------------------------------------------- the wide table --
 * §6.5: one row per day, about 64 px; the dinner and its portion on one
 * line, the verdict beside it at the caption size; the cooked-once caption
 * in the Day column. A cell is a button that opens the swap sheet. */

.plan-table {
  display: grid;
  grid-template-columns: 112px repeat(2, minmax(0, 1fr));
  column-gap: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.plan-th {
  padding: 0 0 var(--s-2);
  font: 600 var(--t-sub-size)/1.2 var(--font);
  color: var(--ink-2);
}
.plan-th-who { display: flex; align-items: center; min-width: 0; }
.plan-td {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 64px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.plan-td-day { font: 560 var(--t-body-size)/1.3 var(--font); }
.plan-td-cap { font: var(--t-cap); color: var(--ink-2); }
.plan-td-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.plan-td-cell:hover { background: var(--surface-2); }
.plan-td-cell:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-field); }
.plan-td-dinner {
  min-width: 0;
  font: 450 var(--t-sub-size)/1.3 var(--font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-td-verdict { flex: none; white-space: nowrap; font: 560 var(--t-cap-size)/1.3 var(--font); color: var(--ink); }
.plan-td-verdict.is-quiet,
.plan-td-verdict.is-room { font-weight: 450; color: var(--ink-2); }
.plan-td-verdict.is-over { color: var(--red); }
/* Three people or more: rows per person under each day. */
.plan-table.is-many { grid-template-columns: minmax(0, 1fr); }
.plan-table.is-one { grid-template-columns: 112px minmax(0, 1fr); }
.plan-tr-many { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--s-3); }
.plan-tr-many > .plan-td-dayc { grid-row: span 8; align-content: start; }
.plan-tr-many > .plan-td-cell { grid-column: 2; min-height: 52px; }
.plan-tr-many > .plan-td-cell + .plan-td-cell { border-top-style: dashed; }
.plan-td-who { display: inline-flex; align-items: center; flex: none; font: 560 var(--t-sub-size)/1.3 var(--font); }

/* The draft week's column: the rows on a phone, the table from 520 of
 * column (the pane at 1280, a tablet). */
@container (min-width: 520px) {
  .plan-phone { display: none; }
  .plan-wide { display: grid; }
}

/* ----------------------------------------------------------- a draft day */

.plan-day { display: grid; gap: var(--s-2); }
.plan-cooked-line {
  margin: 0 0 var(--s-1);
  padding: var(--s-2) 12px;
  border-radius: var(--r-field);
  background: var(--surface-2);
  font: var(--t-sub);
  color: var(--ink-2);
  text-wrap: pretty;
}
.plan-cooked-line b { color: var(--ink); font-weight: 560; }
.plan-person { display: grid; }
.plan-person .sec-head { padding-top: var(--s-4); }
.plan-day > .plan-person:first-child .sec-head,
.plan-day > .plan-cooked-line + .plan-person .sec-head { padding-top: var(--s-2); }
.plan-meals { margin-top: 0; }
.plan-held-k { font: 450 var(--t-body-size)/1.25 var(--font); color: var(--ink-2); }
.plan-dayline {
  padding: var(--s-2) 0 2px;
  border-top: 1px solid var(--line);
  font: var(--t-sub);
  color: var(--ink-2);
  text-wrap: pretty;
}
.plan-dayline b { color: var(--ink); font-weight: 560; }
.plan-over { color: var(--red); font-weight: 560; }
.plan-fix { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) 0 0; }
.plan-person .plan-note { padding-top: 6px; }
.plan-person .plan-ask { margin-top: var(--s-2); }
.plan-person-folded { border-top: 1px solid var(--line); }

/* ------------------------------------------------------- the swap sheet */

.plan-swap { display: grid; gap: 2px; }
.plan-scope { display: grid; gap: 6px; padding-bottom: var(--s-2); }
.plan-portions { display: grid; }
.plan-portion-group { display: grid; }
.plan-portion-group + .plan-portion-group { border-top: 1px solid var(--line); }
.plan-portion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  padding: 6px 0;
}
.plan-portion.is-side { min-height: 56px; padding-top: 0; }
.plan-portion-who { display: grid; gap: 2px; min-width: 0; }
.plan-portion-name { display: flex; align-items: center; font: var(--t-row); }
.plan-portion-name.is-side { padding-left: 16px; font: 450 var(--t-body-size)/1.3 var(--font); color: var(--ink-2); }
.plan-portion-sub { font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }
.plan-portion .stepper { width: 176px; }
.plan-alts { display: grid; }
.plan-alt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 60px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.plan-alt[disabled] { cursor: default; color: var(--ink-2); }
/* Selected: a 2 px accent-ink ring round the row (§6.3), the hairlines
 * either side giving way. Nothing is sent until Done. */
.plan-alt.is-selected { border-top-color: transparent; }
.plan-alt.is-selected::before {
  content: "";
  position: absolute;
  inset: 2px -10px;
  border-radius: var(--r-field);
  box-shadow: inset 0 0 0 2px var(--accent-ink);
  pointer-events: none;
}
.plan-alt.is-selected + .plan-alt,
.plan-alt.is-selected + .plan-move-days + .plan-alt,
.plan-alt.is-selected + .plan-orders + .plan-alt { border-top-color: transparent; }
.plan-alt:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-field); }
.plan-alt-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.plan-alt-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: var(--t-row); overflow-wrap: anywhere; }
.plan-alt-sub { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.plan-alt-left {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 2px;
  max-width: 46%;
  font: var(--t-cap);
  color: var(--ink-2);
  text-align: right;
}
.plan-alt-left b { font: 560 var(--t-sub-size)/1.25 var(--font); color: var(--ink); }
.plan-alt-chev { flex: none; width: 20px; height: 20px; color: var(--ink-3); transition: transform .2s var(--ease); }
.plan-alt-chev.is-open { transform: rotate(90deg); }
.plan-move-days,
.plan-orders { display: grid; gap: 6px; padding: 2px 0 var(--s-3); }
.plan-swap-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }

/* ----------------------------------------------- your week, the choosers */

.plan-rot { display: grid; gap: var(--s-1); }
.plan-rot-row .nav-row-sub { text-wrap: pretty; }
.plan-rot-choice-wrap { display: flex; align-items: center; gap: var(--s-3); border-top: 1px solid var(--line); }
.plan-rot-choice-wrap > .plan-rot-choice { flex: 1 1 auto; border-top: 0; }
.plan-rot-choice-wrap > .stepper,
.plan-rot-choice-wrap > .segmented { flex: none; }
.plan-rot-choice-wrap > .stepper { width: 168px; }
.plan-rot-choice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.plan-rot > .plan-rot-choice:first-child { border-top: 0; }
.plan-rot-choice[disabled] { cursor: default; }
.plan-rot-choice:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-field); }
.plan-rot-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--edge);
  color: transparent;
  transition: background .14s var(--ease), box-shadow .14s var(--ease);
}
.plan-rot-choice.is-check .plan-rot-mark { border-radius: 7px; }
.plan-rot-choice.is-on .plan-rot-mark { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.plan-rot-mark svg { width: 15px; height: 15px; stroke-width: 2.5; }
.plan-rot-choice-main { display: grid; gap: 2px; min-width: 0; }
.plan-rot-choice-name { font: var(--t-row); overflow-wrap: anywhere; }
.plan-rot-choice-sub { font: var(--t-cap); color: var(--ink-2); }
.plan-rot-add { gap: var(--s-3); }
.plan-rot-q { font: var(--t-head); }
.plan-rot-next { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-2); }
.plan-rot .nav-list + .plan-group-title { padding-top: var(--s-5); }
.plan-portion-range { gap: var(--s-4); }
.plan-portion-range .stepper { max-width: 240px; }
.plan-time-input { max-width: 160px; }

/* A staple's slot, beside its row: the segments keep their own width and
 * wrap under the row in a narrow column. */
@container (max-width: 376px) {
  .plan-rot-choice-wrap:has(> .segmented) { flex-wrap: wrap; padding-bottom: var(--s-2); }
  .plan-rot-choice-wrap > .segmented { flex: 1 1 100%; }
}

/* The pane (§6.5): a list's rows are capped at 640, so a name and its figure
 * stay within reach of each other; the week's table takes the whole pane. */
.pane .plan-day,
.pane .plan-rot { max-width: 640px; }