/* Plan your week (week-plan.js). One accent for the task: evergreen for a planned meal, ochre for the prep
   day, the same roles the Plan page and Setup v2's day grid already use. Each meal type's name carries a short
   pencil highlight so the page is not only green on cream. */
/* taste-gate: allow T7 because the meal-type names use Frank's hard-stop pencil highlight under a word, not a gradient wash on a surface. */
/* taste-gate: allow T12 because the 12px Today and Prep flags are labels inside the grid's column heads, not controls; every control here is at least 44px. */
.week-plan { display: grid; gap: 30px; min-width: 0; }
.wp-body { display: grid; gap: 30px; min-width: 0; }
.week-plan .wp-q { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.week-plan legend, #app .week-plan h2.wp-legend { margin: 0 0 2px; padding: 0; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: 0; color: var(--ink); }
.wp-ask { display: inline; padding: 3px 8px; margin-left: -8px; border-radius: 6px; background: var(--blue); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.wp-prep .wp-ask { background: var(--ochre); }
.wp-times .wp-ask { background: var(--wheat); }
.wp-explain { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 60ch; }

/* Meal types: four full-size checkbox cards. */
/* Columns come from the room the cards really have, not the window: beside the sidebar at tablet width four cards
   broke Breakfast and Snacks mid-word (Chief's review, November 9). Four across only where each has 150px; then two. */
.wp-body { container-type: inline-size; }
.wp-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@container (max-width: 39.9375em) { .wp-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wp-type-name { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.wp-type { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 60px; margin: 0; padding: 8px 26px 8px 10px; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--white); cursor: pointer; }
#app .wp-type > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.wp-type-patch { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wheat); color: var(--ink); }
.wp-type[data-meal="lunch"] .wp-type-patch { background: var(--blue); }
.wp-type[data-meal="dinner"] .wp-type-patch { background: var(--ochre); }
.wp-type[data-meal="snacks"] .wp-type-patch { background: color-mix(in srgb, var(--clay) 34%, var(--white)); }
.wp-type-art { width: 28px; height: 28px; }
.wp-type-name { font-weight: 700; font-size: 16px; }
.wp-type-tick { position: absolute; top: 6px; right: 6px; line-height: 0; }
.wp-type-tick .wp-tick, .wp-day .wp-tick { width: 20px; height: 20px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.wp-type:has(input:checked) { background: var(--sage); border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.wp-type:has(input:checked) .wp-tick { visibility: visible; }
.wp-type:has(:focus-visible), .wp-day:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The dated grid. */
.wp-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
#app .wp-shortcuts .secondary { min-height: 44px; }
.wp-weekbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin-top: 4px; }
#app .wp-week { margin: 0; text-align: center; font: normal 20px/1.25 Georgia, serif; color: var(--green); outline: none; }
#app .wp-nav { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); color: var(--green); cursor: pointer; }
#app .wp-nav svg { width: 22px; height: 22px; }
#app .wp-nav:hover:not(:disabled) { background: var(--sage); }
#app .wp-nav:disabled { opacity: .4; cursor: default; }
#app .wp-nav:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wp-grid { --wp-gap: 6px; display: grid; grid-template-columns: minmax(92px, max-content) repeat(7, minmax(44px, 1fr)); gap: var(--wp-gap); align-items: center; }
.wp-head, .wp-row { display: contents; }
.wp-colhead { display: grid; justify-items: center; gap: 0; padding-bottom: 2px; color: var(--ink); }
.wp-date { font: normal 20px/1.1 Georgia, serif; }
.wp-dow { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.wp-flag { min-height: 16px; font-size: 12px; font-weight: 700; line-height: 16px; color: var(--red); }
.wp-flag.is-prep { padding: 0 5px; border-radius: 4px; background: var(--ochre); color: var(--ink); }
.wp-colhead.is-past { color: var(--muted); }
.wp-colhead.is-today .wp-date { box-shadow: 0 2px 0 var(--red); }
.wp-rowhead { font-weight: 700; font-size: 16px; padding-right: 8px; }
.wp-mark { background: linear-gradient(transparent 66%, var(--wheat) 66%); padding: 0 2px; }
.wp-mark[data-meal="lunch"] { background-image: linear-gradient(transparent 66%, var(--blue) 66%); }
.wp-mark[data-meal="dinner"] { background-image: linear-gradient(transparent 66%, var(--ochre) 66%); }
.wp-mark[data-meal="snacks"] { background-image: linear-gradient(transparent 66%, color-mix(in srgb, var(--clay) 40%, var(--white)) 66%); }
#app .wp-cell { position: relative; display: grid; place-items: center; align-content: center; gap: 1px; box-sizing: border-box; width: 100%; min-width: 44px; height: 48px; min-height: 48px; padding: 2px; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); color: var(--ink); cursor: pointer; }
#app .wp-cell .wp-tick { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.wp-cell-label { display: none; font-size: 13px; font-weight: 700; line-height: 1.1; }
#app .wp-cell:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--green); background: var(--sage); }
#app .wp-cell[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
#app .wp-cell[aria-pressed="true"] .wp-tick { visibility: visible; }
#app .wp-cell:disabled { background: transparent; border-style: dashed; color: var(--muted); cursor: default; opacity: .6; }
#app .wp-cell.is-past[aria-pressed="true"] { background: var(--white); border: 2px solid var(--red); color: var(--red); }
#app .wp-cell.is-past[aria-pressed="true"] .wp-tick { stroke: var(--red); }
#app .wp-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wp-limit { margin: 2px 0 0; padding: 10px 12px; border-left: 4px solid var(--red); background: var(--white); color: var(--ink); font: italic 16px/1.45 Georgia, serif; }
.wp-limit[hidden] { display: none; }
.wp-past { margin: 2px 0 0; color: var(--red); font-size: 15px; }
.wp-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.wp-summary { margin: 0; font-size: 15px; font-weight: 600; }
.wp-others { font-weight: 400; color: var(--muted); }
.wp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
#app .wp-month { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
#app .wp-month input { width: auto; min-height: 44px; padding: 6px 10px; font-size: 16px; }
#app .week-plan .text-button { min-height: 44px; }
.wp-empty { margin: 0; padding: 18px 14px; border: 1px dashed var(--line); border-radius: var(--panel-radius); color: var(--muted); }
.wp-reassure { margin: 4px 0 0; font: italic 16px/1.45 Georgia, serif; color: var(--ink); }
.wp-zone { margin: 0; color: var(--muted); font-size: 13px; }

/* Planning again from Plan: one compact wheat note, the same role the Account fact has. */
.plan-again { display: grid; gap: 8px; justify-items: start; max-width: 720px; margin: 0 0 22px; padding: 16px 18px; border-radius: var(--panel-radius); background: var(--wheat); }
#app .plan-again h2 { margin: 0; font: normal 22px/1.2 Georgia, serif; color: var(--green); }
.plan-again p { margin: 0; max-width: 60ch; }
#app .plan-again a.primary { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: var(--button-radius); background: var(--green); color: #fff; font-weight: 700; text-decoration: none; }
.plan-week-note { max-width: 60ch; margin: 0 0 16px; padding: 10px 12px; border-left: 4px solid var(--wheat-line); background: var(--wheat); }

/* Prep day. */
.wp-yesno { display: grid; grid-template-columns: 1fr 1fr; max-width: 260px; }
.wp-prep-more { display: grid; gap: 18px; margin-top: 6px; }
.week-plan .wp-sub { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.week-plan .wp-sub > legend { font-size: 16px; font-weight: 700; line-height: 1.35; }
.wp-daypick { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 6px; max-width: 460px; }
.wp-day { position: relative; display: grid; justify-items: center; align-content: center; gap: 0; height: 56px; min-width: 44px; margin: 0; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); font-weight: 700; font-size: 15px; cursor: pointer; }
#app .wp-day > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.wp-day:has(input:checked) { background: var(--ochre); border-color: var(--wheat-line); }
.wp-day .wp-tick { width: 18px; height: 18px; stroke: var(--ink); }
.wp-day:has(input:checked) .wp-tick { visibility: visible; }
.wp-firstdates { max-width: 420px; }

/* Times. */
.wp-time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px 16px; max-width: 620px; min-width: 0; }
#app .wp-time { display: grid; gap: 6px; margin: 0; font-weight: 700; }
.wp-time-box { position: relative; display: block; }
#app .wp-time input { width: 100%; padding-right: 52px; font-size: 16px; }
.wp-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 400; pointer-events: none; }

@media (max-width: 700px) {
  .wp-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone: the meal's name sits over its own row of seven, so every box keeps 44px. */
@media (max-width: 560px) {
  .wp-grid { --wp-gap: 4px; grid-template-columns: repeat(7, minmax(44px, 1fr)); }
  .wp-corner { display: none; }
  .wp-rowhead { grid-column: 1 / -1; margin-top: 8px; padding: 0; }
  .wp-daypick { gap: 4px; }
}
/* Under 364px seven 44px boxes no longer fit: four across, three under them, and each box names its own day. */
@media (max-width: 363px) {
  .wp-grid { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
  .wp-head { display: none; }
  .wp-cell-label { display: block; }
  #app .wp-cell { height: 56px; min-height: 56px; }
  #app .wp-cell .wp-tick { width: 16px; height: 16px; }
  #app .wp-cell:not([aria-pressed="true"]) .wp-tick { display: block; }
  .wp-daypick { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
  .wp-type-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  #app .wp-cell[aria-pressed="true"], .wp-type:has(input:checked), .wp-day:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  #app .wp-cell[aria-pressed="true"] .wp-tick, .wp-type:has(input:checked) .wp-tick, .wp-day:has(input:checked) .wp-tick { stroke: HighlightText; }
  .wp-ask, .wp-mark, .wp-flag.is-prep { background: none; text-decoration: underline; }
}

/* Lane B: a dated form must size its tracks from the space beside the sidebar,
   including when text is enlarged at the same viewport width. No answer is hidden. */
.week-plan .wp-q { grid-template-columns: minmax(0, 1fr); }
.wp-weekbar, .wp-grid, .wp-under, .wp-tools { min-width: 0; }
/* Whole-pixel equal tracks avoid distributing a fractional remainder to only some cells. */
.wp-grid { --wp-label-width: max(92px, 7em); grid-template-columns: var(--wp-label-width) repeat(7, minmax(44px, round(down, calc((100% - var(--wp-label-width) - 7 * var(--wp-gap)) / 7), 1px))); }
/* Prep dates share one raw width too, including intermediate container sizes. */
.wp-daypick { --wp-prep-gap: 6px; gap: var(--wp-prep-gap); grid-template-columns: repeat(7, minmax(44px, round(down, calc((100% - 6 * var(--wp-prep-gap)) / 7), 1px))); }
@media (max-width: 560px) { .wp-daypick { --wp-prep-gap: 4px; } }
#app .wp-week { min-width: 0; }
#app .wp-month { flex-wrap: wrap; min-width: 0; max-width: 100%; }
#app .wp-month input { box-sizing: border-box; min-width: 0; width: 100%; max-width: 100%; }
.wp-tools { max-width: 100%; }
.wp-long-day { display: none; }
@container (max-width: 35em) {
  .wp-grid { --wp-gap: 4px; grid-template-columns: repeat(7, minmax(44px, round(down, calc((100% - 6 * var(--wp-gap)) / 7), 1px))); }
  .wp-corner { display: none; }
  .wp-rowhead { grid-column: 1 / -1; margin-top: 8px; padding: 0; }
}
@container (max-width: 20.75em) {
  .wp-grid { grid-template-columns: repeat(4, minmax(44px, round(down, calc((100% - 3 * var(--wp-gap)) / 4), 1px))); }
  .wp-daypick { grid-template-columns: repeat(4, minmax(44px, round(down, calc((100% - 3 * var(--wp-prep-gap)) / 4), 1px))); }
  .wp-head { display: none; }
  .wp-cell-label { display: block; }
  #app .wp-cell { height: auto; min-height: 56px; }
  .wp-type-grid { grid-template-columns: minmax(0, 1fr); }
  .wp-weekbar { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  #app .wp-week { grid-column: 1 / -1; grid-row: 1; }
  #app .wp-nav { grid-row: 2; }
  #app .wp-nav[data-week="1"] { grid-column: 3; }
}
/* At enlarged type, give whole weekday names a row instead of squeezing text
   into a phone-size box. Em queries follow the container's computed text size. */
@container (max-width: 14em) {
  .wp-grid, .wp-daypick { grid-template-columns: minmax(44px, 1fr); }
  #app .wp-cell, .wp-day { height: auto; min-height: 56px; padding-block: 8px; }
  .wp-short-day { display: none; }
  .wp-long-day { display: inline; }
}
/* The phone navigation's wrapping and the room it reserves for Frank are shared by every
   page: pencil.css and navigation-clearance.js own them, dated Settings included. */
@container (max-width: 14em) {
  /* Keep the native month picker, with its complete month and year on two lines
     when enlarged text cannot fit beside its calendar button. */
  #app .wp-month input { min-height: 3.5em; }
  #app .wp-month input::-webkit-datetime-edit-fields-wrapper { display: block; white-space: normal; }
}