/* =============================================================================
 * periodization.css — the Periodization page (#/periodization, js/periodization.js)
 * =============================================================================
 * Loaded after styles.css and built from its tokens. A toolbar and the legend, then a row of day cards
 * that scrolls sideways and snaps, today in the middle; the card in the middle is full size, the others a
 * little smaller and quieter. The row runs edge to edge (wider than the page column).
 *
 * Every card in the row has the same height (--card-h) and its parts in the same places: head, focus (two
 * lines at most), the match slot (match days only), then the menu, which scrolls inside the card when it is long.
 *
 * Fixed colours, whatever site.theme is:
 *   day types  gold = match day and the day before, green = day off, gray = training
 *   dishes     gold = carbohydrate, light red = protein, green = vegetables and salad,
 *              pink = dessert and fruit, grey = the rest
 * Card text is sized in em, so Present and the month view scale a whole card with one font-size.
 *
 *   1. Page: note, toolbar, legend
 *   2. The row
 *   3. A day: head with plate, body, dishes
 *   4. Edit periodization: banner and menu list, dish photo and recipe buttons, text editing, drag and drop, dialogs,
 *      messages; orders (a dish ordered with a double-click) and the Kitchen dashboard
 *   5. Present
 *   6. The month view: compact days, their blocks in time order, a block opened in place; the two weeks (whole cards)
 *   7. The plan: a day's blocks, + and Off / Recovery, the block palette (Edit periodization), the block and module dialogs
 *   8. Phones, Arabic, print
 *
 * The plan's blocks have their own colours, kept apart from the day colours: amber = meals, blue = prep,
 * training and gym, violet = travel, ink = the match, grey = the staff's own activities. The colour is a bar
 * at the block's start; its text stays ink, so the kind is also always written.
 * ========================================================================== */

/* ------------------------------------------------------------- 1. PAGE */
/* --card-h: every card's height; as tall as the screen allows below the site header (so a whole card is in view), within limits */
.period { width: min(100%, var(--container)); margin-inline: auto; --card-w: clamp(16.5rem, 80vw, 20rem); --card-h: 46rem; }
@supports (height: 100svh) { .period { --card-h: clamp(38rem, 100svh - 8rem, 54rem); } }
.period-body { overflow-x: clip; }
.tone-gold  { --tone: #f2b705; --on-tone: #141413; --tone-soft: #fff4cc; --tone-text: #6b5000; }
.tone-green { --tone: #2f7d4a; --on-tone: #ffffff; --tone-soft: #e1f0e5; --tone-text: #23603a; }
.tone-gray  { --tone: #6b6960; --on-tone: #ffffff; --tone-soft: #efeee9; --tone-text: #4a4943; }
/* --food: the strong colour (legend swatch), --food-bg: the cell, --food-line: the cell's edge, --food-ink: its text */
.food-carb    { --food: #e9b300; --food-bg: #fff1c2; --food-line: #f1cf5e; --food-ink: #4f3c00; }
.food-protein { --food: #df6b65; --food-bg: #fde1df; --food-line: #eea6a2; --food-ink: #6e1f1b; }
.food-veg     { --food: #4f9c5c; --food-bg: #ddf0d9; --food-line: #96c69a; --food-ink: #1c4724; }
.food-sweet   { --food: #e07ba6; --food-bg: #fad2e1; --food-line: #eda6c3; --food-ink: #6b1f45; }
.food-other   { --food: #a29f95; --food-bg: #eeede8; --food-line: #c8c6be; --food-ink: #42413c; }

.period-note.is-example {
  display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 var(--s5); padding: .75rem 1rem;
  font-size: .9375rem; line-height: 1.45; color: #4d3b00; background: #fff6d6; border: 1px solid #e8c24a; border-radius: var(--radius-ctl);
}
.period-note .btn-icon { padding-top: .1rem; }
.period-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.period-nav, .period-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.period-erase-slot:empty { display: none; }
.period-erase-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: #b00020; border-color: #e7b3bc; }
.period-erase-btn:hover { border-color: #b00020; }
.period-arrow {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink); cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 50%; transition: border-color .15s;
}
.period-arrow:hover { border-color: var(--ink); }
.period-today {
  min-height: 44px; padding: .4rem 1.1rem; font: 600 .9375rem/1.2 var(--font-body); color: var(--ink); cursor: pointer;
  background: transparent; border: 1.5px solid var(--ink); border-radius: 999px; transition: background-color .15s, color .15s;
}
.period-today:hover { background: var(--ink); color: var(--paper); }
.cal-week { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; margin: 0; margin-inline-start: .5rem; }
.cal-week-no { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; }
.cal-week-range { color: var(--grey-700); }

/* The legend: one line (a chip per day colour in its own colours, the dish colours, "Legend"); the details open under it */
.period-legends { display: grid; gap: .6rem; }
.legend-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.legend-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.legend-chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem .25rem .3rem; font-size: .875rem; line-height: 1.2;
  color: var(--tone-text); background: var(--tone-soft); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius: 999px;
}
.legend-chip-plate { display: block; flex: none; width: 1.6rem; height: 1.6rem; }
.legend-chip-plate svg { width: 100%; height: 100%; }
.legend-chip .legend-title { font-size: 1rem; }
.legend-toggle {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; margin-inline-start: auto; padding: .25rem .4rem .25rem .75rem;
  font: 600 .8125rem/1.2 var(--font-body); color: var(--grey-700); cursor: pointer; background: transparent; border: 1px solid var(--line); border-radius: 999px;
}
.legend-toggle:hover { color: var(--ink); border-color: var(--grey-300); }
.legend-chevron { display: grid; }
.legend-chevron svg { width: 1rem; height: 1rem; transition: transform .2s var(--ease); }
.is-open .legend-chevron svg { transform: rotate(180deg); }
.period-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.period-legend[hidden] { display: none; }
.legend-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .8rem;
  padding: .7rem .95rem; background: var(--tone-soft); border-inline-start: 4px solid var(--tone); border-radius: var(--radius-ctl);
}
.legend-plate { display: block; flex: none; width: 2.75rem; height: 2.75rem; }
.legend-plate svg, .day-plate svg { width: 100%; height: 100%; }
.legend-text { display: grid; gap: .2rem; min-width: 0; }
.legend-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0; }
.legend-title { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.15; color: var(--ink); }
.legend-days, .food-legend-label {
  font-size: .6875rem; font-weight: 700; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.legend-days { color: var(--tone-text); white-space: nowrap; }
.legend-points { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--tone-text); }
.legend-points li { display: inline-flex; align-items: center; gap: .45rem; }
.legend-points li:not(:last-child)::after { content: ""; flex: none; width: .3rem; height: .3rem; background: var(--tone); border-radius: 50%; }
.legend-parts { margin: 0; font-size: .75rem; line-height: 1.3; color: var(--grey-500); }
.food-keys { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; line-height: 1.3; color: var(--grey-700); }
.food-key { display: inline-flex; align-items: center; gap: .4rem; }
.food-key::before { content: ""; flex: none; width: .85rem; height: .85rem; background: var(--food-bg); border: 2px solid var(--food); border-radius: .25rem; }
.period-below { display: flex; flex-direction: column; align-items: center; gap: var(--s3); margin-top: var(--s2); text-align: center; }
.period-below-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.period-cal-link { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.period-cal-link[hidden] { display: none; }
.period-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin: 0; font-size: .8125rem; color: var(--grey-500); }
/* Kitchen login: small and quiet at the bottom of the page and of the month view, for the kitchen only */
.period-kitchen-btn {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .3rem .75rem;
  font: 500 .8125rem/1.2 var(--font-body); color: var(--grey-700); cursor: pointer;
  background: transparent; border: 0; border-radius: 999px; transition: background-color .15s, color .15s;
}
.period-kitchen-btn .btn-icon { display: grid; }
.period-kitchen-btn .btn-icon svg { width: 1rem; height: 1rem; }
.period-kitchen-btn:hover, .period-kitchen-btn:focus-visible { color: var(--ink); background: var(--mist); }
.period-kitchen-btn.is-on { color: var(--ink); font-weight: 600; background: var(--mist); }
.month-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); max-width: 1700px; margin: var(--s5) auto 0; }
.period-dash-btn { display: inline-flex; align-items: center; gap: .5rem; }

/* -------------------------------------------------------------- 2. THE ROW */
.cal-track {
  display: flex; align-items: stretch; gap: var(--s4);
  width: 100vw; margin-inline: calc(50% - 50vw); padding: var(--s5) calc(50vw - var(--card-w) / 2);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.cal-track::-webkit-scrollbar { display: none; }
.cal-track:focus-visible { outline-offset: -4px; }
.cal-slot { flex: 0 0 var(--card-w); display: flex; scroll-snap-align: center; container-type: inline-size; }
.cal-slot .day-card { opacity: .7; transform: scale(.93); transition: transform .35s var(--ease), opacity .35s var(--ease), box-shadow .35s var(--ease); }
.cal-slot.is-centred .day-card { opacity: 1; transform: none; box-shadow: 0 20px 44px -24px rgb(20 20 19 / .4); }

/* ---------------------------------------------------------------- 3. A DAY */
.day-card {
  flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.day-card.is-card { height: var(--card-h); }
.day-card.is-today { outline: 3px solid var(--ink); outline-offset: 4px; }
.day-head {
  display: grid; grid-template: "when plate" auto "tags plate" 1fr / minmax(0, 1fr) auto; gap: .45em .75em;
  padding: 1em 1em 1em 1.25em; color: var(--on-tone); background: var(--tone);
}
.day-when { grid-area: when; min-width: 0; }
.day-weekday { display: block; font-size: .8125em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.day-date { display: block; font-family: var(--font-display); font-size: 1.75em; line-height: 1.1; }
.cal-slot .day-weekday, .cal-slot .day-date { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-slot .day-date { font-size: min(1.75em, 8.6cqi); }
.day-tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .35em; }
.is-card .day-tags { min-height: 1.3em; }
.day-code, .day-today, .day-edited { padding: .2em .6em; font-size: .75em; font-weight: 700; line-height: 1.3; white-space: nowrap; border-radius: 999px; }
.day-code { background: rgb(255 255 255 / .22); font-variant-numeric: tabular-nums; }
.tone-gold .day-code { background: rgb(20 20 19 / .12); }
.day-today { color: var(--ink); background: var(--white); }
.day-edited { color: var(--paper); background: var(--ink); }
.day-plate { grid-area: plate; display: block; width: 3.75em; height: 3.75em; align-self: start; filter: drop-shadow(0 2px 4px rgb(20 20 19 / .2)); }
.day-body { flex: 1; display: flex; flex-direction: column; gap: .75em; min-height: 0; padding: 1em 1.25em 1.25em; }
.day-body > * { flex: none; }
.day-type { display: flex; align-items: center; gap: .4em; margin: 0; font-size: .8125em; font-weight: 600; color: var(--tone-text); }
.day-type > :last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.day-type-icon { display: grid; }
.day-type-icon svg { width: 1.3em; height: 1.3em; }
.day-focus { margin: 0; font-size: 1.3em; line-height: 1.2; }
.is-card .day-focus { min-height: 2.4em; }
.day-focus-short { margin: 0; font-size: .85em; line-height: 1.3; color: var(--grey-700); }
/* Text that keeps to its lines (the full text is in the title tooltip where it can be cut) */
.is-card .day-focus, .is-card .day-menu-theme { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.day-slot .day-event-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* The match slot (match days only): one compact block of two lines (title, details), centred in it */
.day-slot { display: grid; gap: .3em; min-height: 3em; }
.day-event { display: grid; align-content: center; gap: .25em; padding: .7em .85em; background: var(--tone-soft); border-radius: var(--radius-ctl); }
.day-slot .day-event { gap: .1em; padding: .4em .7em; font-size: .875em; border-radius: 10px; }
.day-slot .day-event-meta { font-size: .9em; line-height: 1.35; }
.day-event-title { margin: 0; font-weight: 600; line-height: 1.3; }
.day-event-meta { display: flex; flex-wrap: wrap; gap: .2em .9em; margin: 0; font-size: .875em; line-height: 1.4; color: var(--grey-700); }
.day-event-meta > span { display: inline-flex; align-items: center; gap: .3em; }
.day-event-meta > .day-event-cal { margin: 0; font-size: .8em; }
/* In the slot the details keep to one line: the kick-off in full, the place cut short if need be */
.day-slot .day-event-meta { flex-wrap: nowrap; }
.day-slot .day-event-meta > span { flex: none; min-width: 0; white-space: nowrap; }
.day-slot .day-event-meta > span:last-child:not(:first-child) { flex: 0 1 auto; }
.day-slot .day-event-meta > span > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.day-meta-icon { display: grid; }
.day-meta-icon svg { width: 1.1em; height: 1.1em; }
.day-tips { display: grid; gap: .5em; font-size: .9em; line-height: 1.45; }
.day-tips li { position: relative; padding-inline-start: 1.1em; }
.day-tips li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: .45em; height: .45em; background: var(--tone); border-radius: 50%; }
.day-menu { padding-top: .75em; border-top: 1px solid var(--line); }
/* A rest or recovery day with nothing on it: the player's own plan */
.day-empty {
  flex: 1 1 auto; display: grid; place-content: center; justify-items: center; gap: .6em; padding: 1.25em .75em;
  text-align: center; color: var(--tone-text); background: var(--tone-soft); border-radius: var(--radius-ctl);
}
.day-empty p { margin: 0; max-width: 22ch; font-size: .9em; line-height: 1.45; }
.day-empty-icon { display: grid; opacity: .8; }
.day-empty-icon svg { width: 2em; height: 2em; }
.day-empty.is-erased { color: var(--grey-700); background: transparent; border: 1.5px dashed var(--line); }
.day-empty-add { display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .3rem .8rem; font-size: .8125rem; background: var(--white); }
/* On a card the menu (or the suggestions) takes the rest of the height and scrolls inside it when long */
.is-card .day-menu { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
.is-card .day-menu > * { flex: none; }
.is-card .day-dishes, .is-card .day-tips { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
.is-card .day-dishes::-webkit-scrollbar, .is-card .day-tips::-webkit-scrollbar { display: none; }
.is-card .day-dishes { align-content: flex-start; }
.is-card .day-tips { align-content: start; }
.is-clipped:not(.is-end) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75em), transparent);
}
.is-clipped:focus-visible { outline-offset: 2px; }
.day-menu-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25em .75em; margin: 0; font-weight: 700; }
/* In Edit periodization a day's menu is one block: a frame, and a grip that drags it whole to another day */
.day-menu.is-grouped { padding: .55em .6em .6em; border: 1.5px solid var(--line); border-radius: .85em; background: var(--paper); }
.day-menu.is-grouped .day-menu-head { justify-content: flex-start; align-items: center; }
.day-menu.is-grouped .day-menu-name { margin-inline-start: auto; }
.menu-grip {
  display: grid; place-items: center; flex: none; width: 1.8em; height: 1.8em; color: var(--grey-500); cursor: grab;
  border-radius: .45em; touch-action: none; -webkit-user-select: none; user-select: none;
}
.menu-grip:hover { color: var(--ink); background: var(--mist); }
.menu-grip svg { width: 1.1em; height: 1.1em; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none; box-shadow: 0 14px 30px -10px rgb(20 20 19 / .45); rotate: -2deg; }
.day-menu.drag-ghost, .mrow.drag-ghost { max-width: 18rem; max-height: 14rem; overflow: hidden; background: var(--white); border-radius: .85em; opacity: .95; }
.day-menu.is-lifted, .mrow.is-lifted, .palette-menu.is-lifted { opacity: .35; }
.day-menu-name { font-weight: 500; color: var(--grey-700); }
.day-menu-theme { margin: .1em 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.05em; line-height: 1.3; color: var(--grey-700); }

/* Dishes: rounded cells in their food colour, text centred both ways; on a card the cells of a row
   share its whole width, so every row ends flush with the card */
.day-dishes { display: flex; flex-wrap: wrap; gap: .3em; margin: .6em 0 0; padding: 0; list-style: none; }
.dish {
  display: inline-flex; align-items: center; justify-content: center; gap: .25em; max-width: 100%; min-height: 1.9em; margin: 0; padding: .22em .7em;
  font-size: .8125em; font-weight: 500; line-height: 1.3; text-align: center; color: var(--food-ink); overflow-wrap: anywhere;
  background: var(--food-bg); border: 1px solid var(--food-line); border-radius: .6em;
}
.day-dishes > .dish { flex: 1 1 auto; }
.dish-text { min-width: 0; }
.dish-empty { font-size: .8em; font-style: italic; color: var(--grey-500); }
/* A dish's photo (a thumbnail that opens it large) and the mark for its recipe; for everyone */
.dish.has-photo { padding-inline-start: .22em; }
.dish-photo {
  flex: none; display: block; width: 2.1em; height: 2.1em; padding: 0; overflow: hidden; cursor: zoom-in;
  background: var(--white); border: 0; border-radius: .45em;
}
.dish-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dish-recipe {
  flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; padding: 0; color: inherit; cursor: pointer;
  background: rgb(255 255 255 / .65); border: 0; border-radius: 50%;
}
.dish-recipe:hover { background: var(--white); }
.dish-recipe svg { width: 1em; height: 1em; }
/* Orders: a carbohydrate or protein dish a member can order with a double-click; ordered, it has a check mark */
.dish.is-orderable { position: relative; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: box-shadow .15s, background-color .15s; }
.dish.is-orderable:hover { box-shadow: inset 0 0 0 1.5px var(--food); }
.dish.is-orderable:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dish-check { display: none; }
.dish.is-ordered { color: var(--white); background: var(--food); border-color: var(--food); font-weight: 600; }
.food-carb.is-ordered { color: var(--ink); }
.dish.is-ordered .dish-check {
  display: grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; margin-inline-start: .15em;
  color: var(--ink); background: var(--white); border-radius: 50%;
}
.dish-check svg { width: .85em; height: .85em; }

/* -------------------------------------------------------- 4. KITCHEN MODE */
/* The menu list, new menus from the plan, the calendar link: light controls on the dark banner */
.kitchen-manage { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .7rem; border-top: 1px solid rgb(250 249 245 / .18); }
.kitchen-manage label { font-weight: 600; font-size: .875rem; }
.kitchen-manage .kitchen-swap { flex: 0 1 22rem; width: 100%; min-width: 0; text-overflow: ellipsis; }
.kitchen-light { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .3rem .8rem; font-size: .8125rem; color: var(--paper); background: transparent; border-color: rgb(250 249 245 / .4); }
.kitchen-light:hover { border-color: var(--paper); }
.kitchen-light.is-strong { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.kitchen-light .btn-icon svg { width: 1rem; height: 1rem; }
/* In kitchen mode a card grows with its menu (the row still keeps every card the same height) */
.day-card.is-card.is-editing { height: auto; min-height: var(--card-h); }
.day-card.is-editing .day-dishes { min-height: 2.75em; padding: .4em; border: 1.5px dashed var(--grey-300); border-radius: .75em; }
.is-card.is-editing .day-menu { flex: 1 0 auto; }
.is-card.is-editing .day-dishes { flex: none; overflow: visible; }
.dish.is-editable { position: relative; padding-inline: 2em; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.dish-x {
  position: absolute; inset-inline-end: .15em; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; padding: 0; color: inherit; cursor: pointer;
  background: transparent; border: 0; border-radius: 50%; transition: background-color .15s;
}
.dish-x:hover { background: rgb(20 20 19 / .1); }
.dish-x svg { width: .85em; height: .85em; }
/* Over a dish (pointer on it, or keyboard focus in it): add a photo, add a recipe or note */
.dish-tools {
  position: absolute; inset-inline-start: .35em; top: 0; z-index: 2; translate: 0 -60%;
  display: flex; gap: .25em; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.dish.is-editable:hover .dish-tools, .dish.is-editable:focus-within .dish-tools { opacity: 1; pointer-events: auto; }
.dish-tool {
  display: grid; place-items: center; width: 2em; height: 2em; padding: 0; color: var(--ink); cursor: pointer;
  background: var(--white); border: 1px solid var(--grey-300); border-radius: 50%; box-shadow: 0 6px 14px -6px rgb(20 20 19 / .4);
}
.dish-tool:hover { border-color: var(--ink); }
.dish-tool svg { width: 1.05em; height: 1.05em; }
/* A text the kitchen can change: a tap starts typing in place */
.is-editable-text { cursor: text; border-radius: .3em; }
.is-editable-text:hover:not(.is-typing) { text-decoration: underline dotted; text-underline-offset: .2em; }
.dish-text.is-typing { flex: 1 1 auto; }
.day-menu-theme.is-typing { display: block; }
.inline-input {
  width: 100%; min-width: 7em; min-height: 0; margin: 0; padding: .15em .4em; font: inherit; color: var(--ink); text-align: start;
  background: var(--white); border: 1.5px solid var(--ink); border-radius: .4em; -webkit-user-select: text; user-select: text; touch-action: auto;
}
.dish.is-lifted { opacity: .3; }
.dish.dish-ghost {
  position: fixed; inset-inline-start: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none;
  box-shadow: 0 14px 30px -10px rgb(20 20 19 / .45); rotate: -2deg;
}
[dir="rtl"] .dish.dish-ghost { inset-inline-start: auto; left: 0; }
.palette-item.dish-ghost { position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none; box-shadow: 0 14px 30px -10px rgb(20 20 19 / .45); rotate: -2deg; }
.palette-item.is-lifted { opacity: .4; }
.is-dragging, .is-dragging * { cursor: grabbing !important; }
.is-dragging .cal-track { scroll-snap-type: none; }
.day-card.is-drop-target, .mcell.is-drop-target { outline: 3px dashed var(--ink); outline-offset: 3px; }
.day-card.is-drop-target .day-dishes { background: rgb(20 20 19 / .04); border-color: var(--ink); }

.kitchen-tools { display: grid; gap: .6em; margin-top: auto; padding-top: .75em; border-top: 1px dashed var(--line); }
.kitchen-row, .kitchen-form-actions, .kitchen-foods { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.kitchen-tools .btn-ghost, .kitchen-tools .btn-primary { min-height: 38px; padding: .3rem .75rem; font-size: .8125rem; }
.kitchen-swap {
  min-height: 38px; max-width: 100%; padding: .3rem .5rem; font: 500 .8125rem/1.2 var(--font-body); color: var(--ink);
  background: var(--white); border: 1.5px solid var(--grey-300); border-radius: var(--radius-ctl); cursor: pointer;
}
.kitchen-form { display: grid; gap: .55em; }
.kitchen-food { position: relative; cursor: pointer; }
.kitchen-food input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.kitchen-food:has(input:checked) { outline: 2px solid var(--ink); outline-offset: 1px; }
.kitchen-food:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

.kitchen-dialog { width: min(92vw, 26rem); padding: 1.5rem; color: var(--ink); background: var(--white); border: 0; border-radius: var(--radius-card); box-shadow: 0 30px 60px -20px rgb(20 20 19 / .4); }
.kitchen-dialog::backdrop { background: rgb(20 20 19 / .45); }
.kitchen-dialog h2 { margin: 0; font-size: var(--step-2); }
.kitchen-dialog p { margin: 0; }
.kitchen-dialog label { font-weight: 600; font-size: .875rem; }
.kitchen-offline { padding: .75rem 1rem; color: #4d3b00; background: #fff6d6; border: 1px solid #e8c24a; border-radius: var(--radius-ctl); }
.kitchen-dialog { max-height: min(90vh, 46rem); overflow-y: auto; overscroll-behavior: contain; }
.kitchen-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.kitchen-dialog-sub { margin: .2rem 0 0; color: var(--grey-700); overflow-wrap: anywhere; }
.kitchen-dialog-x {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -.4rem; padding: 0; color: var(--ink); cursor: pointer;
  background: transparent; border: 0; border-radius: 50%;
}
.kitchen-dialog-x:hover { background: var(--mist); }
.kitchen-dialog-x svg { width: 1.2rem; height: 1.2rem; }
.kitchen-dialog-body { display: grid; gap: .75rem; }
.kitchen-dialog-body[hidden], .kitchen-form[hidden] { display: none; }
.kitchen-dialog input[type="email"], .kitchen-dialog input[type="file"], .kitchen-dialog textarea {
  width: 100%; min-height: 44px; padding: .55rem .8rem; font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-ctl);
}
.kitchen-dialog textarea { min-height: 7rem; resize: vertical; line-height: 1.45; }
.kitchen-dialog input[type="file"] { padding: .45rem .6rem; cursor: pointer; }
.kitchen-dialog textarea:focus, .kitchen-dialog input[type="email"]:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgb(29 29 29 / .08); }
.kitchen-dialog .field-error { margin: 0; }
.kitchen-dialog .field-error:empty { display: none; }
.kitchen-dialog .btn-primary, .kitchen-dialog .btn-ghost { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
/* Two (or more) big choices: overwrite / save as new, overwrite / add as supplementary, overwrite / keep */
.kitchen-choices { display: grid; gap: .5rem; }
.kitchen-choices[hidden] { display: none; }
.kitchen-choice {
  display: grid; gap: .2rem; padding: .8rem 1rem; font: inherit; font-size: .9375rem; line-height: 1.4; color: var(--ink); text-align: start; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-ctl); transition: border-color .15s, background-color .15s;
}
.kitchen-choice:hover, .kitchen-choice:focus-visible { border-color: var(--ink); background: var(--paper); }
.kitchen-choice span { color: var(--grey-700); font-size: .875rem; }
.edit-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; padding: .6rem .8rem; background: var(--mist); border-radius: .6rem; overflow-wrap: anywhere; }
.edit-change del { color: var(--grey-700); }
.edit-change ins { font-weight: 600; text-decoration: none; }
[dir="rtl"] .edit-arrow { display: inline-block; transform: scaleX(-1); }
.photo-dialog { width: min(94vw, 44rem); }
.photo-large { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: var(--mist); border-radius: .75rem; }
.recipe-dialog { width: min(94vw, 34rem); }
.recipe-list { display: grid; gap: .6rem; }
.recipe { display: grid; gap: .4rem; padding: .8rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.recipe.is-main { border-color: var(--grey-300); }
.recipe-kind { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-700); }
.recipe-title { margin: 0; font-size: 1.05rem; }
.recipe-note { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.recipe-type { padding: .05rem .4rem; font-size: .75rem; font-weight: 700; background: var(--mist); border-radius: .35rem; }
.recipe-none { color: var(--grey-700); }
.recipe-form { padding-top: .9rem; border-top: 1px solid var(--line); }
.recipe-form-title { margin: 0; font-size: 1.05rem; }
.kitchen-cal-current { padding: .6rem .8rem; background: var(--mist); border-radius: .6rem; overflow-wrap: anywhere; }
.kitchen-cal-current a { color: var(--ink); }
.kitchen-cal-status { color: var(--grey-700); font-size: .875rem; }
.kitchen-cal-sync { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; }
[lang="ar"] .recipe-kind { letter-spacing: 0; text-transform: none; }

.period-toast {
  position: fixed; inset-inline: 0; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1100;
  width: max-content; max-width: calc(100% - 2rem); margin: 0 auto; padding: .6rem 1.1rem;
  font: 600 .875rem/1.3 var(--font-body); color: var(--paper); background: var(--ink); border-radius: 999px;
  box-shadow: 0 12px 30px -12px rgb(20 20 19 / .5);
}
.period-toast.is-error { background: #9c0f06; }

/* The Kitchen dashboard: one day's carbohydrate and protein dishes with their number of orders */
.kitchen-dialog.dash-dialog { width: min(96vw, 54rem); }
.dash-body { gap: 1rem; }
.dash-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dash-nav input[type="date"] {
  min-height: 44px; padding: .35rem .6rem; font: inherit; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--radius-ctl);
}
.dash-print { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin-inline-start: auto; }
.dash-spans { display: inline-flex; padding: 3px; background: var(--mist); border-radius: 999px; }
.dash-span { min-height: 38px; padding: .3rem .9rem; font: 600 .875rem/1.2 var(--font-body); color: var(--grey-700); cursor: pointer; background: transparent; border: 0; border-radius: 999px; }
.dash-span[aria-pressed="true"] { color: var(--ink); background: var(--white); box-shadow: 0 1px 3px rgb(20 20 19 / .15); }
.dash-day {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date total" "tags total"; gap: .25rem 1rem;
  padding: .8rem 1rem; color: var(--tone-text); background: var(--tone-soft); border-inline-start: 5px solid var(--tone); border-radius: var(--radius-ctl);
}
.dash-date { grid-area: date; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; color: var(--ink); }
.dash-date::first-letter { text-transform: uppercase; }
.dash-tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .875rem; font-weight: 600; }
.dash-tags .day-code { color: var(--ink); background: var(--white); }
.dash-menu { font-weight: 500; color: var(--grey-700); }
.dash-total { grid-area: total; display: grid; justify-items: end; align-content: center; text-align: end; }
.dash-total strong { font-size: 2.25rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-total span { font-size: .8125rem; }
.dash-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dash-group { display: grid; align-content: start; gap: .5rem; }
.dash-group-title { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.05rem; }
.dash-group-title::before { content: ""; flex: none; width: .85rem; height: .85rem; background: var(--food-bg, var(--mist)); border: 2px solid var(--food, var(--grey-300)); border-radius: .25rem; }
.dash-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.dash-row {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .45rem .45rem .8rem; color: var(--food-ink);
  background: linear-gradient(to right, color-mix(in srgb, var(--food) 26%, var(--food-bg)) var(--share, 0%), var(--food-bg) var(--share, 0%));
  border: 1px solid var(--food-line); border-radius: .7rem;
}
[dir="rtl"] .dash-row { background: linear-gradient(to left, color-mix(in srgb, var(--food) 26%, var(--food-bg)) var(--share, 0%), var(--food-bg) var(--share, 0%)); }
.dash-share { flex: none; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-gone { display: block; font-size: .75rem; font-weight: 500; color: var(--grey-700); }
.dash-group-sum { margin-inline-start: auto; font-size: .875rem; color: var(--grey-700); font-variant-numeric: tabular-nums; }
.dash-grocery { display: grid; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.dash-grocery-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.dash-grocery .dash-group-title .btn-icon svg { width: 1.15rem; height: 1.15rem; }
.dash-grocery .dash-group-title::before { display: none; }
.dash-copy { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.dash-table th, .dash-table td { padding: .45rem .5rem; text-align: end; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.dash-table th:first-child { text-align: start; }
.dash-table thead th { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-500); }
.dash-table tbody th { font-weight: 600; }
.dash-ing { display: inline-flex; align-items: center; gap: .45rem; }
.dash-ing::before { content: ""; flex: none; width: .7rem; height: .7rem; background: var(--food-bg); border: 2px solid var(--food); border-radius: .2rem; }
.dash-buy { font-weight: 700; font-size: 1.05rem; }
.dash-row.is-zero { opacity: .55; }
.dash-name { flex: 1; min-width: 0; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.dash-count { flex: none; min-width: 2.6rem; padding: .2rem .5rem; font-size: 1.25rem; font-weight: 700; text-align: center; color: var(--ink); background: var(--white); border-radius: .5rem; font-variant-numeric: tabular-nums; }
.dash-others { padding-top: .75rem; border-top: 1px solid var(--line); }
.dash-none { color: var(--grey-700); }
.dash-stamp { font-size: .75rem; color: var(--grey-500); }

/* The recipe book: a recipe with its amounts (the recipe dialog), the dashboard's cooking amounts, dish suggestions */
.dish-recipe.is-book { color: var(--food-ink); background: var(--white); box-shadow: 0 0 0 1.5px var(--food-line); }
.recipe-dialog:has(.recipe-book) { width: min(96vw, 46rem); }
.recipe-book { display: grid; gap: .65rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.recipe-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.recipe-chip { padding: .1rem .55rem; font-size: .75rem; font-weight: 600; color: var(--grey-700); background: var(--mist); border-radius: 999px; }
.recipe-chip[class*="food-"] { color: var(--food-ink); background: var(--food-bg); box-shadow: inset 0 0 0 1px var(--food-line); }
.recipe-book-name { margin: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 500; }
.recipe-focus { margin: 0; color: var(--grey-700); line-height: 1.5; }
.recipe-portion { margin: 0; font-size: .9375rem; }
.recipe-people { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem .8rem; background: var(--paper); border-radius: var(--radius-ctl); }
.recipe-people > label { font-weight: 700; }
.recipe-stepper { display: inline-flex; align-items: center; gap: .25rem; }
.recipe-step {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  font: 700 1.25rem/1 var(--font-body); color: var(--ink); background: var(--white); border: 1.5px solid var(--line); border-radius: 50%;
}
.recipe-step:hover { border-color: var(--ink); }
.recipe-people-input, .dash-people-input {
  width: 4.5rem; min-height: 40px; padding: .3rem .4rem; font: 700 1.05rem var(--font-body); text-align: center; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-ctl); font-variant-numeric: tabular-nums;
}
.recipe-presets { display: flex; flex-wrap: wrap; gap: .25rem; }
.recipe-preset {
  min-width: 2.4rem; min-height: 34px; padding: .2rem .5rem; cursor: pointer; font: 600 .8125rem/1 var(--font-body);
  color: var(--grey-700); background: var(--white); border: 1px solid var(--line); border-radius: 999px; font-variant-numeric: tabular-nums;
}
.recipe-preset[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.recipe-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.recipe-table th { padding: .3rem .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: start; color: var(--grey-500); border-bottom: 1px solid var(--line); }
.recipe-table td { padding: .4rem .5rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.recipe-table tr:last-child td { border-bottom: 0; }
.recipe-qty { width: 1%; font-weight: 700; white-space: nowrap; text-align: end; font-variant-numeric: tabular-nums; }
.recipe-ing { overflow-wrap: anywhere; }
.recipe-h { margin: .4rem 0 0; font-size: 1rem; }
.recipe-steps { display: grid; gap: .45rem; margin: 0; padding-inline-start: 1.4rem; line-height: 1.5; }
.recipe-steps li::marker { font-weight: 700; color: var(--grey-700); }
.recipe-plating, .recipe-allergens { margin: 0; line-height: 1.5; }
[lang="ar"] .recipe-table th { letter-spacing: 0; text-transform: none; }

.dash-people { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; color: var(--grey-700); }
.dash-prep { display: grid; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.dash-prep .dash-group-title::before { display: none; }
.dash-prep .dash-group-title .btn-icon svg { width: 1.15rem; height: 1.15rem; }
.dash-prep-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.dash-prep-item { border-radius: .7rem; }
.dash-prep-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; padding: .5rem .8rem; color: var(--food-ink);
  background: var(--food-bg); border: 1px solid var(--food-line); border-radius: .7rem; list-style: none;
}
summary.dash-prep-row { cursor: pointer; }
summary.dash-prep-row::-webkit-details-marker { display: none; }
summary.dash-prep-row::after {
  content: ""; flex: none; width: .45rem; height: .45rem; margin: 0 .2rem .2rem .25rem;
  border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s;
}
.dash-prep-item[open] > summary.dash-prep-row::after { margin-bottom: -.2rem; transform: rotate(225deg); }
.dash-portions { margin-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-norecipe { font-size: .75rem; font-weight: 600; color: var(--grey-700); }
.dash-prep-item[open] { padding-bottom: .5rem; background: var(--paper); }
.dash-prep-table { margin: .3rem 0 .4rem; }
.dash-recipe { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; margin-inline-start: .5rem; }
.dash-used { max-width: 18rem; font-size: .8125rem; color: var(--grey-700); text-align: start !important; }
.dash-table tbody tr:not([class*="food-"]) .dash-ing::before { display: none; }
.dash-estimate { padding: .05rem .4rem; font-size: .6875rem; font-weight: 700; color: var(--grey-700); background: var(--mist); border-radius: .35rem; }

.dish-suggest {
  position: fixed; inset: auto; z-index: 1200; margin: 0; padding: .3rem; max-height: min(18rem, 50vh); overflow-y: auto;
  list-style: none; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-ctl);
  box-shadow: 0 18px 40px -16px rgb(20 20 19 / .35);
}
.dish-suggest[hidden] { display: none; }
.dish-suggest-item { display: flex; align-items: center; gap: .55rem; min-height: 40px; padding: .35rem .6rem; cursor: pointer; border-radius: .55rem; }
.dish-suggest-item:hover, .dish-suggest-item[aria-selected="true"] { background: var(--food-bg); }
.dish-suggest-dot { flex: none; width: .7rem; height: .7rem; background: var(--food-bg); border: 2px solid var(--food); border-radius: .2rem; }
.dish-suggest-name { flex: 1; min-width: 0; font-size: .9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.dish-suggest-book { flex: none; display: grid; color: var(--food-ink); }
.dish-suggest-book svg { width: 1rem; height: 1rem; }
.book-summary { display: grid; gap: .25rem; margin: 0; padding-inline-start: 1.2rem; font-weight: 600; }

/* ------------------------------------------------------------- 5. PRESENT */
:root:has(.period-present), :root:has(.period-month) { overflow: hidden; }
.period-present {
  position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto 1fr auto; gap: .5rem;
  padding: max(1rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));
  color: var(--paper); background: var(--stage); overflow: hidden;
  --card-w: calc(50vw - var(--s4));        /* today in the middle, wide; half of the day before and after beside it */
}
.present-head, .present-foot { padding-inline: max(clamp(1rem, 3vw, 2.5rem), env(safe-area-inset-left)) max(clamp(1rem, 3vw, 2.5rem), env(safe-area-inset-right)); }
.present-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem 1.25rem; }
.present-logo { width: 44px; height: 44px; object-fit: contain; }
.present-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, .9rem + 1.2vw, 2rem); line-height: 1.1; }
.period-present .cal-week { margin: 0; color: rgb(250 249 245 / .75); }
.period-present .cal-week-range { color: inherit; }
.present-now { text-align: end; }
.present-clock { margin: 0; font-size: clamp(1.25rem, .9rem + 1.4vw, 2.25rem); font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.present-date { margin: 0; color: rgb(250 249 245 / .7); }
.present-actions { display: flex; gap: .5rem; }
.present-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 44px; min-height: 44px; padding: .4rem .9rem;
  font: 600 .9375rem/1.2 var(--font-body); color: var(--paper); cursor: pointer;
  background: rgb(250 249 245 / .08); border: 1px solid rgb(250 249 245 / .22); border-radius: 999px; transition: background-color .15s;
}
.present-btn:hover { background: rgb(250 249 245 / .18); }
.period-present :focus-visible { outline-color: var(--paper); }
.period-present.is-fullscreen .present-expand { display: none; }
.period-present .cal-track { width: 100%; margin: 0; align-self: stretch; min-height: 0; padding-block: .5rem; }
.period-present .day-card { font-size: clamp(.8rem, min(.45rem + .75vw, 1.9vh), 1.45rem); border-color: transparent; }
.period-present .day-card.is-card { height: auto; }              /* every card fills the screen's height */
.period-present .day-body { gap: .6em; padding-block: .85em 1em; }
.period-present .day-dishes { gap: .28em; margin-top: .5em; }
.period-present .dish { min-height: 0; padding: .2em .55em; }
.period-present .cal-slot:not(.is-centred) .day-card { opacity: .55; }
.period-present .day-card.is-today { outline-color: var(--paper); }
.present-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; }
/* The legend in Present: the compact line, in the same day colours as on the page */
.present-foot .legend-chip { font-size: clamp(.75rem, .65rem + .25vw, .9375rem); }
.present-foot .legend-chip-plate { width: 1.5em; height: 1.5em; }
.present-foot .food-keys { gap: .25rem .9rem; font-size: clamp(.7rem, .6rem + .2vw, .8125rem); color: rgb(250 249 245 / .8); }
/* Today's card is wide: its program and its match on the left, the menu on the right */
@container (min-width: 34rem) {
  .period-present .day-body {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "type menu" "focus menu" "slot menu" "agenda menu"; gap: .6em 1.75em; align-content: start;
  }
  .period-present .day-type { grid-area: type; }
  .period-present .day-focus { grid-area: focus; }
  .period-present .day-slot { grid-area: slot; }
  .period-present .day-agenda { grid-area: agenda; align-self: start; }
  .period-present .is-card .day-agenda { max-height: 100%; }
  .period-present .day-menu, .period-present .day-tips, .period-present .day-empty { grid-area: menu; min-height: 0; }
  .period-present .day-menu { padding: 0 0 0 1.75em; border-top: 0; border-inline-start: 1px solid var(--line); }
  [dir="rtl"] .period-present .day-menu { padding: 0 1.75em 0 0; }
}
.present-status { margin: 0; font-weight: 600; }

/* ------------------------------------------------------- 6. THE MONTH VIEW */
.period-month {
  position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  color: var(--ink); background: var(--paper);
}
.month-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: max(.75rem, env(safe-area-inset-top)) var(--gutter) .75rem; border-bottom: 1px solid var(--line);
}
.month-nav, .month-actions { display: flex; align-items: center; gap: .5rem; }
.month-title { min-width: 10ch; margin: 0; font-size: var(--step-2); text-align: center; }
.month-title::first-letter { text-transform: uppercase; }
.month-print { min-height: 44px; }
.month-legend { padding: .6rem var(--gutter); border-bottom: 1px solid var(--line); }
/* The palette (Edit periodization) on the left, the month on the right; each scrolls on its own */
.month-body { display: grid; min-height: 0; }
.month-body.has-palette { grid-template-columns: 16rem minmax(0, 1fr); }
.month-palette { min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--white); border-inline-end: 1px solid var(--line); }
.month-palette:empty { display: none; }
.month-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 1rem var(--gutter) max(2rem, env(safe-area-inset-bottom)); }
/* Every week as tall as its fullest day (a day grows when one of its blocks is opened) */
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: minmax(7.5rem, auto); gap: .4rem; max-width: 1700px; margin-inline: auto; }
.month-weekday { margin: 0; padding-inline: .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-500); }
.month-cell { display: flex; min-width: 0; }

/* A day: its date and code, then its blocks in time order */
.mcell {
  flex: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: .3rem .35rem .4rem; font-size: .8125rem;
  background: color-mix(in srgb, var(--tone-soft) 45%, var(--white)); border: 1px solid var(--line); border-top: 4px solid var(--tone); border-radius: 10px;
}
.mcell.is-outside { opacity: .5; }
.mcell.is-today { box-shadow: 0 0 0 2px var(--ink); }
.mcell-head { display: flex; align-items: center; gap: .3rem; min-height: 1.85rem; }
.mcell-date {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 1.75rem; padding: 0 .3rem; font: inherit; color: var(--ink);
  cursor: pointer; background: none; border: 0; border-radius: 999px;
}
.mcell-date:hover .mcell-day { text-decoration: underline; text-underline-offset: .15em; }
.mcell-day { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mcell.is-today .mcell-day { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; color: var(--paper); background: var(--ink); border-radius: 50%; }
.mcell-weekday { display: none; font-weight: 600; color: var(--grey-700); }
.mcell-weekday::first-letter { text-transform: uppercase; }
.mcell-code { padding: .1rem .45rem; font-size: .6875rem; font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--tone-text); background: var(--tone-soft); border-radius: 999px; font-variant-numeric: tabular-nums; }
.mcell-tools { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
.mcell .day-add { width: 1.75rem; height: 1.75rem; box-shadow: 0 0 0 1px var(--line); }
.mcell .day-mark { padding: .2rem .35rem; color: var(--tone-text); background: var(--white); border-color: color-mix(in srgb, var(--tone) 45%, transparent); }
.mcell .day-mark[aria-pressed="true"] { color: #fff; background: #2f7d4a; border-color: #2f7d4a; }
.mcell .day-mark-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mcell-focus { display: flex; align-items: center; gap: .3rem; margin: 0; padding-inline: .25rem; font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--tone-text); }
.mcell-focus.is-erased { color: var(--grey-500); font-weight: 500; font-style: italic; }
.mcell-focus-icon { display: grid; flex: none; }
.mcell-focus-icon svg { width: 1rem; height: 1rem; }

/* A row: time, name and a chevron; pressed, it opens under itself */
.mcell-rows { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.mrow { min-width: 0; background: var(--block-soft); border-radius: .45rem; }
.mrow-line { display: flex; align-items: stretch; min-width: 0; }
.mrow-line > .mrow-toggle { flex: 1; min-width: 0; }
.mrow.is-menu { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.mrow.is-menu .mrow-toggle { border-inline-start-style: dotted; }
.mrow .menu-grip { width: 1.4rem; height: auto; border-radius: .45rem 0 0 .45rem; }
.mrow.block-match { color: var(--paper); }
.mrow-toggle {
  display: flex; align-items: center; gap: .3rem; width: 100%; min-height: 1.75rem; padding: .15rem .3rem .15rem .35rem;
  font: inherit; font-size: .75rem; line-height: 1.25; color: inherit; text-align: start; cursor: pointer;
  background: none; border: 0; border-inline-start: 3px solid var(--block); border-radius: inherit;
}
.mrow-toggle:hover { background: rgb(20 20 19 / .05); }
.block-match .mrow-toggle { border-inline-start-color: #f2b705; }
.block-match .mrow-toggle:hover { background: rgb(250 249 245 / .1); }
.mrow-time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.mrow-time:empty { display: none; }
.mrow-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mrow-icon, .mrow-chevron, .mrow .block-note { display: grid; flex: none; }
.mrow-icon svg { width: .95rem; height: .95rem; }
.mrow .block-note svg { width: .8rem; height: .8rem; }
.mrow-chevron svg { width: .85rem; height: .85rem; opacity: .6; transition: transform .2s var(--ease); }
.mrow.is-open { box-shadow: 0 6px 16px -10px rgb(20 20 19 / .45); }
.mrow.is-open .mrow-chevron svg { transform: rotate(180deg); }
.mrow.is-open .mrow-toggle { border-end-start-radius: 0; border-end-end-radius: 0; }
.mrow-detail {
  display: grid; gap: .45rem; padding: .45rem .5rem .55rem; font-size: .8125rem; color: var(--ink);
  background: var(--white); border: 1px solid color-mix(in srgb, var(--block) 30%, var(--line)); border-top: 0; border-radius: 0 0 .45rem .45rem;
}
.mrow-detail[hidden] { display: none; }
/* On a wide screen an opened row is a dropdown over the days around it, wide enough for a menu (Saturday and
   Sunday open towards the middle); on a phone (one day per line) it opens in the line itself */
@media (min-width: 761px) {
  .mrow.is-open { position: relative; z-index: 6; }
  .mrow-detail {
    position: absolute; top: 100%; inset-inline-start: 0; width: max(100%, 20rem); max-height: min(60vh, 34rem); overflow-y: auto;
    overscroll-behavior: contain; border-radius: 0 .6rem .6rem .6rem; box-shadow: 0 22px 44px -18px rgb(20 20 19 / .5);
  }
  .month-cell:nth-child(7n + 6) .mrow-detail, .month-cell:nth-child(7n) .mrow-detail { inset-inline: auto 0; border-radius: .6rem 0 .6rem .6rem; }
}
.mrow-when { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.mrow-kind { font-weight: 500; color: var(--grey-700); }
.mrow-notes { margin: 0; white-space: pre-line; line-height: 1.45; overflow-wrap: anywhere; }
.mrow-detail .day-event { padding: .4em .55em; }
.mrow-detail .day-event-title { font-size: .9em; }
.mrow-detail .day-menu { padding-top: 0; border-top: 0; }
.mrow-detail .day-menu-head { font-size: .85em; }
.mrow-detail .day-menu-theme { font-size: .9em; }
.mrow-detail .day-dishes { gap: .25em; margin-top: .35em; }
.mrow-detail .dish { font-size: .75rem; min-height: 0; padding: .18em .45em; }
.mrow-detail .dish.is-editable { padding-inline: 1.75rem; }      /* room for the × (its size is in rem) on both sides */
.mrow-detail .kitchen-tools { margin-top: 0; padding-top: .45rem; }
.mrow-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.mrow-detail :is(.btn-ghost, .btn-primary) { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: .2rem .6rem; font-size: .75rem; }
.mrow-detail .kitchen-swap { min-height: 32px; width: 100%; font-size: .75rem; }
.mrow-form { gap: .45rem; }
.mrow-form .plan-fields { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.mrow-form .plan-field label { font-size: .75rem; }
.mrow-form .plan-field :is(input, textarea) { min-height: 32px; padding: .25rem .45rem; font-size: .8125rem; }
.mrow-form .plan-field textarea { min-height: 3.5rem; }

/* Month or two weeks (Edit periodization): a switch in the head */
.month-views { display: inline-flex; gap: 2px; padding: 3px; background: var(--mist); border-radius: 999px; }
.month-views[hidden], .month-title[hidden] { display: none; }
.month-view-btn {
  min-height: 38px; padding: .3rem .95rem; font: 600 .8125rem/1.1 var(--font-body); color: var(--grey-700); white-space: nowrap;
  cursor: pointer; background: none; border: 0; border-radius: 999px;
}
.month-view-btn:hover { color: var(--ink); }
.month-view-btn[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.month-view-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.month-title.is-fortnight { display: grid; min-width: 14ch; font-size: var(--step-1); line-height: 1.15; }
.month-title-weeks { font-family: var(--font-body); font-size: .55em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--grey-500); }
.month-title .cal-week-range { color: inherit; }

/* The two weeks: every day as a whole card (its blocks and its menu's dishes in view), as tall as it needs; the
   view scrolls down. Where seven columns get too narrow, the cards flow in as many columns as fit. */
.period-month.is-fortnight .month-scroll { container: fortnight / inline-size; }
.month-grid.is-fortnight { grid-auto-rows: auto; gap: .5rem; }
.month-grid.is-fortnight > .month-cell { align-items: stretch; }
@container fortnight (max-width: 64rem) {
  .month-grid.is-fortnight { grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); }
  .month-grid.is-fortnight > .month-weekday { display: none; }
}
.day-card.is-fit { font-size: .8125rem; border-radius: 12px; }
.day-card.is-fit.is-today { outline-width: 2px; outline-offset: 2px; }
.is-fit .day-head, .is-fit .day-head.has-add { grid-template: "when add" auto "tags tags" auto / minmax(0, 1fr) auto; gap: .35em .4em; padding: .55em .55em .55em .7em; }
.is-fit .day-weekday { font-size: .75em; }
.is-fit .day-date { font-size: 1.3em; }
.is-fit .day-tools { gap: .25em; }
.is-fit .day-add { width: 1.9em; height: 1.9em; }
.is-fit .day-body { gap: .5em; padding: .55em .55em .7em; }
.is-fit .day-type { font-size: .75em; }
.is-fit .day-menu.is-grouped { padding: .4em .4em .45em; border-radius: .7em; }
.is-fit .day-menu-head { font-size: .875em; }
.is-fit .day-menu-theme { font-size: .9em; }
/* One dish per line, its name from the start: the whole width of a narrow day for the name, the × at the end */
.is-fit .day-dishes { flex-direction: column; flex-wrap: nowrap; gap: .25em; margin-top: .4em; }
.is-fit .day-dishes > .dish { flex: none; justify-content: flex-start; text-align: start; }
.is-fit .dish { min-height: 0; padding: .25em .5em; font-size: .75rem; line-height: 1.25; }
.is-fit .dish.is-editable { padding-inline: .5em 1.6rem; }
.is-fit .dish-recipe { width: 1.35em; height: 1.35em; margin-inline-start: auto; }
.is-fit .dish-photo { width: 1.7em; height: 1.7em; }
@media (min-width: 901px) {
  .period-month.is-fortnight .month-body.has-palette { grid-template-columns: 14.5rem minmax(0, 1fr); }
  .period-month.is-fortnight .month-scroll { padding-inline: .75rem; }
}
.is-fit .block-open { flex-wrap: wrap; gap: 0 .4em; font-size: .8125em; min-height: 1.9em; }
.is-fit .block-title { flex-basis: 6em; white-space: normal; }
.is-fit .kitchen-row { gap: .3em; }
.is-fit .kitchen-row :is(.btn-ghost, .kitchen-swap) { min-height: 32px; padding: .2rem .55rem; font-size: .75rem; }
.is-fit .kitchen-swap { width: 100%; }
.is-fit .day-empty { padding: .9em .5em; }
/* A menu served on more than one of the days in view: an amber frame and how often, here and in the list above */
.day-menu.is-repeat { border-color: #e0a526; box-shadow: inset 0 0 0 1px #e0a526; background: #fff8e6; }
.menu-repeat {
  flex: none; padding: .05em .45em; font-size: .75em; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums;
  color: #5c3d00; background: #ffd770; border-radius: 999px;
}
.day-menu-head .menu-repeat { margin-inline-start: .3em; }
.fortnight-summary-slot:empty { display: none; }
.fortnight-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; max-width: 1700px; margin: 0 auto .7rem; padding: .5rem .8rem;
  font-size: .8125rem; line-height: 1.35; border-radius: var(--radius-ctl);
}
.fortnight-summary.is-warn { color: #4d3b00; background: #fff6d6; border: 1px solid #e8c24a; }
.fortnight-summary.is-clear { color: var(--grey-700); background: var(--white); border: 1px solid var(--line); }
.fortnight-summary-label { font-weight: 700; }
.fortnight-repeat { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .2rem .1rem .55rem; background: var(--white); border-radius: 999px; }

/* ------------------------------------------------------------ 7. THE PLAN */
/* The colours, as custom properties: a block, a module button and a dialog take them from .block-<family> */
.block-meal   { --block: #d9822b; --block-soft: #fdf1e4; }
.block-train  { --block: #3567c6; --block-soft: #e9effb; }
.block-travel { --block: #7d5bbe; --block-soft: #f1ecfa; }
.block-match  { --block: #141413; --block-soft: #141413; }
.block-other  { --block: #8a877c; --block-soft: #efeee9; }

/* A day's blocks, in time order */
.day-agenda { display: grid; gap: .3em; margin: 0; padding: 0; list-style: none; }
.is-card .day-agenda { max-height: 9.75em; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
.is-card .day-agenda::-webkit-scrollbar { display: none; }
.is-card .day-agenda.is-clipped:not(.is-end) { mask-image: linear-gradient(#000 calc(100% - 1.5em), transparent); }
.block { position: relative; display: flex; align-items: stretch; min-width: 0; background: var(--block-soft); border-radius: .55em; }
.block.block-match { color: var(--paper); }
.block-open {
  flex: 1; display: flex; align-items: baseline; gap: .5em; min-width: 0; min-height: 2.1em; padding: .3em .6em .3em .5em;
  font: inherit; font-size: .875em; line-height: 1.3; color: inherit; text-align: start; cursor: pointer;
  background: none; border: 0; border-inline-start: .3em solid var(--block); border-radius: inherit;
}
.block-open:hover { background: rgb(20 20 19 / .05); }
.block-match .block-open:hover { background: rgb(250 249 245 / .1); }
.block-match .block-open { border-inline-start-color: var(--tone, #f2b705); }
.block-time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.block-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.block-note { flex: none; display: grid; align-self: center; opacity: .6; }
.block-note svg { width: 1em; height: 1em; }
.block-x {
  flex: none; display: grid; place-items: center; width: 2em; padding: 0; color: inherit; cursor: pointer;
  background: none; border: 0; border-start-end-radius: .55em; border-end-end-radius: .55em; opacity: .6;
}
.block-x:hover, .block-x:focus-visible { opacity: 1; background: rgb(20 20 19 / .07); }
.block-x svg { width: .95em; height: .95em; }

/* Planning: the + at the top right of a card, Off / Recovery among its tags */
.day-card.is-card.is-planning { height: auto; min-height: var(--card-h); }
.day-head.has-add { grid-template: "when add plate" auto "tags tags plate" 1fr / minmax(0, 1fr) auto auto; }
.day-tools { grid-area: add; align-self: start; display: flex; gap: .35em; }
.day-add {
  grid-area: add; align-self: start; display: grid; place-items: center; width: 2.1em; height: 2.1em; padding: 0; cursor: pointer;
  color: var(--ink); background: var(--white); border: 0; border-radius: 50%; box-shadow: 0 1px 3px rgb(20 20 19 / .3);
}
.day-add:hover { background: var(--paper); box-shadow: 0 0 0 2px var(--ink); }
.day-add svg { width: 1.15em; height: 1.15em; }
.day-erase:hover { box-shadow: 0 0 0 2px #b00020; color: #b00020; }
.day-mark {
  display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em; cursor: pointer;
  font: 700 .75em/1.3 var(--font-body); white-space: nowrap; color: inherit;
  background: rgb(255 255 255 / .16); border: 1.5px solid rgb(255 255 255 / .6); border-radius: 999px;
}
.day-mark:hover { background: rgb(255 255 255 / .3); }
.day-mark[aria-pressed="true"] { color: #23603a; background: #fff; border-color: #fff; }
.day-mark-icon { display: grid; }
.day-mark-icon svg { width: 1.05em; height: 1.05em; }
/* Edit periodization: the block palette, on the left of the row (sticky) and of the month view */
.period-stage.has-palette {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr); align-items: start; gap: var(--s4);
  width: 100vw; margin-inline: calc(50% - 50vw); padding-inline-start: var(--gutter);
}
.period-stage.has-palette .cal-track { width: 100%; margin-inline: 0; padding-inline: calc(50% - var(--card-w) / 2); }
.period-stage.has-palette .period-palette { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); margin-top: var(--s5); overflow-y: auto; overscroll-behavior: contain; }
.period-palette:empty { display: none; }
.block-palette { display: grid; gap: .9rem; padding: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); }
.month-palette .block-palette { padding: 1rem var(--s4) 2rem; border: 0; border-radius: 0; }
.palette-part { display: grid; gap: .6rem; }
.palette-part + .palette-part { padding-top: .9rem; border-top: 1px solid var(--line); }
.palette-title {
  display: flex; align-items: center; gap: .45rem; margin: 0; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.2;
  cursor: pointer; list-style: none;
}
.palette-title::-webkit-details-marker { display: none; }
.palette-title .btn-icon svg { width: 1.2rem; height: 1.2rem; }
.palette-fold { display: grid; margin-inline-start: auto; color: var(--grey-500); }
.palette-fold svg { width: 1rem; height: 1rem; transition: transform .2s var(--ease); }
.palette-part:not([open]) .palette-fold svg { transform: rotate(-90deg); }
.palette-body { display: grid; gap: .8rem; }
.fill-check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; cursor: pointer; }
.fill-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--ink); }
.fill-kinds { display: grid; gap: .3rem; }
.fill-kind {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .3rem .4rem; padding: .25rem .35rem .25rem .4rem;
  font-size: .8125rem; font-weight: 600; background: var(--block-soft); border-inline-start: 3px solid var(--block); border-radius: 8px;
}
.fill-kind-name { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; cursor: pointer; }
.fill-kind input[type="checkbox"] { width: .95rem; height: .95rem; margin: 0; accent-color: var(--block); }
.fill-kind:has(input[type="checkbox"]:not(:checked)) { opacity: .6; }
.fill-times { display: inline-flex; align-items: center; gap: .15rem; }
.fill-time {
  width: 4.6rem; min-height: 30px; padding: .1rem .25rem; font: 600 .75rem var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums;
  background: var(--white); border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.fill-time:hover, .fill-time:focus { border-color: var(--block); outline: none; }
.fill-kind.is-invalid .fill-time { border-color: #b00020; }
.fill-dash { color: var(--grey-500); }
.fill-home {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; cursor: pointer; color: var(--grey-700);
  background: var(--white); border: 1px solid var(--line); border-radius: 50%;
}
.fill-home svg { width: .95rem; height: .95rem; }
.fill-home[aria-pressed="true"] { color: var(--white); background: #5b7a99; border-color: #5b7a99; }
.fill-kind:not(:has(.fill-home)) { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 1100px) { .fill-kind { grid-template-columns: minmax(0, 1fr) auto; } .fill-times { grid-column: 1; } }
/* Fill out: the menus and the standard day, each with its own button */
.fill-part { display: grid; gap: .45rem; padding-top: .65rem; border-top: 1px dashed var(--line); }
.fill-types { display: grid; gap: .3rem; }
.fill-type-dot { flex: none; width: .7rem; height: .7rem; background: var(--tone); border-radius: 50%; }
.fill-check.is-light { font-weight: 500; }
.plan-hint.is-note { color: #8a5a00; }
.plan-hint[hidden] { display: none; }
.fill-dialog .is-warn { color: #b00020; font-weight: 600; }
.fill-counts { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.fill-counts .fill-type { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; font-size: .875rem; background: var(--tone-soft); border-radius: 999px; }
.plan-erase { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 38px; color: #b00020; border-color: #e7b3bc; }
.plan-erase:hover { border-color: #b00020; }
.palette-create { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 40px; }
.palette-search { width: 100%; min-height: 36px; padding: .3rem .6rem; font: inherit; font-size: .875rem; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-ctl); }
.palette-menus { display: grid; gap: .3rem; }
.palette-menus > summary { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey-700); cursor: pointer; }
.palette-count { padding: 0 .4rem; font-size: .6875rem; color: var(--grey-700); background: var(--mist); border-radius: 999px; }
.palette-menu {
  display: flex; align-items: center; gap: .4rem; width: 100%; min-height: 40px; padding: .35rem .55rem .35rem .4rem; font: inherit; color: var(--ink);
  text-align: start; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 10px;
}
.palette-menu:hover { border-color: var(--grey-300); background: var(--paper); }
.palette-menu-text { flex: 1; display: grid; min-width: 0; }
.palette-menu .palette-name { font-size: .8125rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.palette-theme { font-size: .75rem; color: var(--grey-700); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.palette-dots { display: flex; gap: 2px; flex: none; }
.palette-dot { width: .5rem; height: .5rem; background: var(--food); border-radius: 50%; }
.palette-menu.drag-ghost { width: 15rem; }
.palette-group { display: grid; gap: .4rem; }
.palette-list { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.palette-item { width: 100%; gap: .45rem; padding-inline: .45rem .7rem; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.palette-item:active { cursor: grabbing; }
.palette-grip { display: grid; flex: none; opacity: .4; }
.palette-grip svg { width: 1rem; height: 1rem; }
.palette-name { flex: 1; min-width: 0; text-align: start; }
.palette-time { flex: none; font-weight: 500; font-size: .75rem; color: var(--grey-700); font-variant-numeric: tabular-nums; }
.block-palette .plan-regen-row { display: grid; gap: .4rem; }
.block-palette .plan-regen .plan-field.is-date input { width: 100%; }
.block-palette .plan-regenerate { justify-content: center; width: 100%; }
.plan-group { display: grid; gap: .45rem; min-width: 0; }
.plan-label { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--grey-500); }
.plan-modules { display: flex; flex-wrap: wrap; gap: .4rem; }
.plan-module {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .3rem .85rem .3rem .65rem; cursor: pointer;
  font: 600 .8125rem/1.2 var(--font-body); color: var(--ink); background: var(--block-soft);
  border: 0; border-inline-start: 4px solid var(--block); border-radius: 10px;
}
.plan-module:hover { box-shadow: inset 0 0 0 1.5px var(--block); }
.plan-module .btn-icon svg { width: 1rem; height: 1rem; }
.plan-help, .plan-hint { margin: 0; max-width: 52ch; font-size: .8125rem; line-height: 1.4; color: var(--grey-700); }
.plan-regenerate { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding-block: .35rem; }
/* Not ready (a date missing, or a wrong range): greyed out, and the browser ignores clicks on a disabled button */
.plan-regenerate:disabled, .plan-regenerate:disabled:hover { color: var(--grey-500); background: var(--mist); border-color: var(--line); cursor: not-allowed; }
.plan-regenerate:disabled .btn-icon svg { transform: none; }

/* Fields of the planning bar and the dialogs */
.plan-field { display: grid; align-content: start; gap: .25rem; min-width: 0; }
.plan-field label { font-size: .8125rem; font-weight: 600; }
.plan-field :is(input, select, textarea) {
  width: 100%; min-height: 40px; padding: .4rem .6rem; font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-ctl);
}
.plan-field textarea { min-height: 5rem; resize: vertical; line-height: 1.45; }
.plan-field :is(input, select, textarea):focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgb(29 29 29 / .08); }
.plan-field input:invalid:not(:focus):not(:placeholder-shown) { border-color: #b00020; }

/* Erase: what and when */
.erase-period, .erase-what { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; }
.erase-dialog .erase-go { background: #b00020; border-color: #b00020; }
.erase-dialog .erase-go:hover { background: #8a0019; border-color: #8a0019; }
.erase-dialog .erase-go:disabled { color: var(--grey-500); background: var(--mist); border-color: var(--line); }
/* A menu opened from the palette, and Create menu */
.kitchen-dialog.menu-dialog { width: min(94vw, 34rem); }
.menu-foods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.menu-food label { display: flex; align-items: center; gap: .4rem; }
.menu-food label::before { content: ""; flex: none; width: .75rem; height: .75rem; background: var(--food-bg); border: 2px solid var(--food); border-radius: .2rem; }
.menu-food textarea { min-height: 4.5rem; font-size: .875rem; }
.menu-dialog .day-menu { padding-top: 0; border-top: 0; }
@media (max-width: 520px) { .menu-foods { grid-template-columns: minmax(0, 1fr); } }

/* The block and module dialogs: the kind's colour on the heading */
.block-dialog { width: min(94vw, 31rem); }
.block-dialog .kitchen-dialog-head { padding-inline-start: .8rem; border-inline-start: 5px solid var(--block, var(--grey-300)); }
.plan-form { gap: .85rem; }
.plan-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.block-when { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.block-notes { white-space: pre-line; line-height: 1.5; overflow-wrap: anywhere; }
.block-menu, .plan-menu { padding-top: .75rem; border-top: 1px solid var(--line); }
.block-menu .day-menu { padding-top: 0; border-top: 0; }
.plan-menu { display: grid; gap: .5rem; }
.plan-summary { display: grid; gap: .25rem; padding: .7rem .85rem; font-size: .875rem; line-height: 1.4; background: var(--mist); border-radius: var(--radius-ctl); }
.plan-summary p { margin: 0; }
.plan-summary .is-warn { color: #b00020; font-weight: 600; }
.plan-delete { color: #b00020; border-color: #e7b3bc; }
.plan-delete:hover { border-color: #b00020; }
.kitchen-warn-light { padding: .6rem .8rem; color: #4d3b00; background: #fff6d6; border: 1px solid #e8c24a; border-radius: var(--radius-ctl); }

/* Present: the day's program large enough to read across the canteen */
.period-present .day-agenda { gap: .35em; }
.period-present .is-card .day-agenda { max-height: 12em; }
.period-present .block-open { font-size: .95em; min-height: 2.2em; }

/* --------------------------------------------- 8. PHONES, ARABIC, PRINT */
@media (max-width: 900px) {
  /* The palette above the row and the month, its blocks in a line that scrolls sideways */
  .period-stage.has-palette { grid-template-columns: minmax(0, 1fr); padding-inline-end: var(--gutter); }
  .period-stage.has-palette .period-palette { position: static; max-height: none; margin-top: var(--s3); }
  .period-stage.has-palette .cal-track { width: 100vw; margin-inline: calc(0px - var(--gutter)); padding-inline: calc(50vw - var(--card-w) / 2); }
  .month-body.has-palette { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .month-palette { max-height: 38vh; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .month-palette .block-palette { padding-block: .75rem 1rem; }
  .palette-list { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; }
  .palette-list > li { flex: none; }
  .palette-item { width: auto; touch-action: pan-x; }
  .palette-menu { width: 14rem; touch-action: pan-x; }
}
@media (max-width: 760px) {
  .month-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; }
  .month-weekday, .month-cell:has(.is-outside) { display: none; }
  .mcell-weekday { display: inline; }
  .mcell { font-size: .875rem; }
  .mrow-toggle { min-height: 2.25rem; font-size: .8125rem; }
}
@media (max-width: 640px) {
  .legend-chip { padding-inline-end: .55rem; font-size: .8125rem; }
  .legend-chip .legend-title { font-size: .9375rem; }
  .legend-chip .legend-days { display: none; }
  .legend-toggle { margin-inline-start: 0; }
  .period-legend { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .legend-item { gap: .7rem; padding: .5rem .75rem; }
  .legend-plate { width: 2.25rem; height: 2.25rem; }
  .legend-points { gap: 0 .4rem; font-size: .8125rem; }
  .food-keys { gap: .3rem .9rem; font-size: .75rem; }
  .dash-groups { grid-template-columns: minmax(0, 1fr); }
  .dash-print span:not(.btn-icon) { display: none; }
  /* The month view on a phone: the legend in one short line, the palette low, so the days get the room */
  .month-legend { padding-block: .4rem; }
  .month-legend .food-keys { display: none; }
  .month-legend .legend-chip { padding-block: .1rem; }
  .month-legend .legend-chip-plate { width: 1.25rem; height: 1.25rem; }
  .month-palette { max-height: 26vh; }
  .month-palette .plan-help { display: none; }
  .period-bar { align-items: stretch; }
  .period-nav { width: 100%; }
  .cal-week { width: 100%; margin-inline-start: 0; }
  .period-actions { width: 100%; }
  .period-actions > * { flex: 1; }
  .present-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .present-now { display: none; }
  .present-logo { width: 44px; height: 44px; }
  .present-btn span:not(.btn-icon) { display: none; }
  .present-btn { padding: .4rem; }
  .month-head { padding-inline: 1rem; }
  .month-print span:not(.btn-icon) { display: none; }
  .month-actions .period-kitchen-btn span:not(.btn-icon), .period-erase-btn span:not(.btn-icon) { display: none; }
  .plan-field :is(input, select, textarea) { font-size: 16px; }           /* no zoom on focus (iOS) */
}
@media (max-width: 380px) {
  .plan-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .dish-x { width: 2.2em; height: 2.2em; }
  .dish.is-editable, .mrow-detail .dish.is-editable { padding-inline: 2.1rem; }   /* the bigger × */
  .period-kitchen-btn { min-height: 44px; }
  .inline-input { font-size: 16px; }                                        /* no zoom on focus (iOS) */
  .plan-module, .plan-field :is(input, select), .plan-regenerate { min-height: 44px; }
  .day-add { width: 2.6em; height: 2.6em; }
  .block-x { width: 2.6em; opacity: .7; }
  .mrow-toggle { min-height: 2.5rem; }
  .mcell .day-add { width: 2.25rem; height: 2.25rem; }
}
/* No hover on a touch screen: the photo and recipe buttons sit in the cell, after the dish's name */
@media (hover: none) {
  .dish-tools { position: static; translate: none; opacity: 1; pointer-events: auto; }
  .dish-tool { width: 2.2em; height: 2.2em; box-shadow: none; }
  .dish.is-editable, .mrow-detail .dish.is-editable { padding-inline-start: .3em; }
}
[lang="ar"] .day-weekday, [lang="ar"] .month-weekday, [lang="ar"] .legend-days, [lang="ar"] .food-legend-label,
[lang="ar"] .plan-label { letter-spacing: 0; text-transform: none; }
[lang="ar"] .day-menu-theme { font-style: normal; }

@media print {
  .period-bar, .period-present, .period-below, .period-kitchen-slot, .period-toast { display: none !important; }
  /* Printing from the month view: just the month, landscape, colours kept */
  :root:has(.period-month) .site-header, :root:has(.period-month) .site-footer, :root:has(.period-month) .page-hero,
  :root:has(.period-month) .period > :not(.period-month) { display: none !important; }
  :root:has(.period-month) { overflow: visible; }
  .period-month { position: static; display: block; background: #fff; }
  .month-scroll { overflow: visible; padding: 0; }
  .month-actions, .month-nav .period-arrow, .month-banner, .month-foot, .dish-x, .dish-tools { display: none !important; }
  .month-palette, .day-add, .day-mark, .block-x, .legend-toggle, .mrow-chevron, .mrow-actions, .kitchen-tools, .menu-grip, .period-erase-slot { display: none !important; }
  .month-body { display: block; }
  .month-head { padding: 0 0 4mm; border: 0; }
  .month-legend { padding: 0 0 4mm; border: 0; }
  .month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; grid-template-rows: auto; grid-auto-rows: auto; gap: 2mm; }
  .month-weekday { display: block !important; }
  .month-cell { break-inside: avoid; }
  .day-card, .mcell { box-shadow: none !important; outline: none !important; }
  /* Printing from the Kitchen dashboard: just the dashboard */
  :root:has(.dash-dialog[open]) body > :not(.dash-dialog) { display: none !important; }
  .dash-dialog { position: static; width: auto; max-height: none; box-shadow: none; }
  .dash-dialog .dash-nav, .dash-dialog .kitchen-dialog-x, .dash-copy, .dash-recipe { display: none !important; }
  /* Printing a recipe (for the kitchen wall): just the recipe, for the portions chosen */
  :root:has(.recipe-dialog[open]) body > :not(.recipe-dialog) { display: none !important; }
  .recipe-dialog { position: static; width: auto; max-height: none; box-shadow: none; }
  .recipe-dialog .kitchen-dialog-x, .recipe-dialog .recipe-step, .recipe-dialog .recipe-presets, .recipe-dialog .recipe-form { display: none !important; }
  .dish-suggest { display: none !important; }
  .dash-dialog, .dash-dialog * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .period-month, .period-month * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4 landscape; margin: 8mm; }
}

/* ---------------------------------------------------------- Edit periodization: calendars, home meals, repetition, the menu editor */
/* Meals at home: a house, a cooler colour, a dashed edge */
.block.is-home .block-open, .mrow.is-home .mrow-toggle { border-inline-start-style: dashed; background: #eef3f8; }
.block-home, .mrow-icon.is-home { display: grid; flex: none; color: #4a6680; }
.block-home svg { width: 1em; height: 1em; }
.block-place.is-home { display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: .6rem; font-weight: 600; color: #4a6680; }
.meal-place { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0; padding: 0; border: 0; }
.meal-place legend { margin-bottom: .3rem; }
.meal-place-choice { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .25rem .75rem; font-weight: 600; cursor: pointer; border: 1.5px solid var(--line); border-radius: 999px; }
.meal-place-choice:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.meal-place-choice input { accent-color: var(--ink); }
.meal-planner-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; justify-self: start; }

/* Repetition */
.repeat { display: grid; gap: .5rem; padding: .7rem .8rem; background: var(--paper); border-radius: var(--radius-ctl); }
.repeat-days { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; border: 0; }
.repeat-day { display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; padding: .2rem .6rem; font-size: .8125rem; font-weight: 600; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; }
.repeat-day:has(input:checked) { color: var(--white); background: var(--ink); border-color: var(--ink); }
.repeat-day input { position: absolute; opacity: 0; pointer-events: none; }
.repeat-day:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.repeat-day span::first-letter { text-transform: uppercase; }

/* A menu inside its meal block (the month view), and where a dragged menu can go */
.mrow-menu { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; max-width: 45%; font-size: .9em; font-weight: 500; color: var(--grey-700); }
.mrow-menu > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.is-dragging [data-meal-drop] { outline: 2px dashed var(--block, var(--ink)); outline-offset: 1px; border-radius: .55em; }
[data-meal-drop].is-drop-target { outline: 3px solid var(--ink) !important; background: rgb(20 20 19 / .05); }

/* The palette: the first import, light buttons, own menus, the match calendars */
.palette-import { display: grid; gap: .5rem; padding: .8rem; font-size: .875rem; background: #fff6d6; border: 1px solid #e8c24a; border-radius: var(--radius-ctl); }
.palette-import p { margin: 0; }
.palette-light { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .3rem .75rem; font-size: .8125rem; }
.palette-own { justify-self: start; margin-top: .1rem; padding: 0 .4rem; font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-700); background: var(--mist); border-radius: .3rem; }
.cal-part { display: grid; gap: .5rem; }
.cal-rows { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.cal-row { display: flex; align-items: center; gap: .4rem; padding: .35rem .2rem .35rem .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.cal-row-icon { display: grid; flex: none; color: var(--grey-700); }
.cal-row-icon svg { width: 1rem; height: 1rem; }
.cal-row-text { flex: 1; display: grid; min-width: 0; }
.cal-row-name { font-size: .8125rem; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-row-url { font-size: .6875rem; color: var(--grey-700); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-row .block-x { min-height: 32px; border-radius: 6px; }
.cal-add, .cal-sync, .cal-zone { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 38px; font-size: .8125rem; }
.cal-zone { justify-content: flex-start; border-color: transparent; color: var(--grey-700); }
.period-cal-links { display: contents; }
.day-event-cal { margin: 0 0 .1rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
[lang="ar"] .day-event-cal, [lang="ar"] .palette-own { letter-spacing: 0; text-transform: none; }
.menu-category { margin: 0; font-size: .875rem; color: var(--grey-700); }

/* The menu editor */
.kitchen-dialog.menu-editor-dialog { width: min(96vw, 52rem); }
.me-items { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.me-item { display: grid; gap: .5rem; padding: .45rem; background: var(--food-bg); border: 1px solid var(--food-line); border-radius: .8rem; }
.me-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.me-group { flex: none; width: 9.5rem; min-height: 38px; padding: .2rem .4rem; font: 600 .8125rem var(--font-body); color: var(--food-ink); background: var(--white); border: 1px solid var(--food-line); border-radius: .55rem; }
.me-name { flex: 1 1 14rem; min-width: 0; min-height: 38px; padding: .3rem .6rem; font: inherit; font-size: .9375rem; background: var(--white); border: 1px solid var(--food-line); border-radius: .55rem; }
.me-name:focus, .me-group:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.me-tool {
  position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer; overflow: hidden;
  color: var(--food-ink); background: var(--white); border: 1px solid var(--food-line); border-radius: .55rem;
}
.me-tool svg { width: 1.05rem; height: 1.05rem; }
.me-tool.is-on { color: var(--white); background: var(--food-ink); border-color: var(--food-ink); }
.me-tool.is-danger:hover { color: #b00020; border-color: #b00020; }
.me-photo.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.me-count { position: absolute; top: 1px; inset-inline-end: 2px; min-width: 1rem; padding: 0 .2rem; font: 700 .625rem/1rem var(--font-body); color: var(--white); background: var(--ink); border-radius: 999px; }
.me-panel { display: grid; gap: .5rem; padding: .7rem; background: var(--white); border-radius: .6rem; }
.me-recipes { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.me-recipe { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; background: var(--paper); border-radius: .45rem; }
.me-recipe-text { flex: 1; min-width: 0; font-size: .875rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.me-recipe-add { display: grid; gap: .4rem; }
.me-recipe-add textarea, .me-recipe-add input[type="text"], .me-ing-table input, .me-ing-table select, .me-portions {
  width: 100%; min-height: 36px; padding: .25rem .5rem; font: inherit; font-size: .875rem; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--radius-ctl);
}
.me-recipe-add .btn-ghost { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; }
.me-portions-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; }
.me-portions { width: 5rem; text-align: center; }
.me-ing-table { width: 100%; border-collapse: collapse; }
.me-ing-table th { padding: .2rem .3rem; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: start; color: var(--grey-500); }
.me-ing-table td { padding: .15rem .2rem; }
.me-ing-table td.me-qty { width: 6rem; }
.me-ing-table td:nth-child(3) { width: 7rem; }
.me-ing-table td:last-child { width: 2.2rem; }
.me-add { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; }
.menu-editor .kitchen-form-actions { flex-wrap: wrap; }
[lang="ar"] .me-ing-table th { letter-spacing: 0; text-transform: none; }
@media (max-width: 560px) {
  .me-group { width: 100%; }
  .me-ing-table td.me-qty { width: 4.5rem; }
  .me-ing-table td:nth-child(3) { width: 5.5rem; }
}

/* A player's meal photos (js/periodization.js › MealPhoto, PhotoDialog): the camera on a meal block, the light on it */
.block-light { flex: none; align-self: center; font-size: .9em; line-height: 1; }
.block-light.is-new, .block-photo.is-new { position: relative; }
.block-light.is-new::after, .block-photo.is-new::after {
  content: ""; position: absolute; top: -.1em; inset-inline-end: -.15em; width: .45em; height: .45em; background: #b00020; border-radius: 50%;
}
.block-photo {
  flex: none; display: grid; place-items: center; width: 2.1em; padding: 0; color: inherit; cursor: pointer;
  background: rgb(20 20 19 / .04); border: 0; border-inline-start: 1px solid rgb(20 20 19 / .08); opacity: .8;
}
.block-photo:last-child { border-start-end-radius: .55em; border-end-end-radius: .55em; }
.block-photo:hover, .block-photo:focus-visible { opacity: 1; background: rgb(20 20 19 / .09); }
.block-photo svg { width: 1.05em; height: 1.05em; }
.block-photo.has-photo { color: var(--block); opacity: 1; }
.mrow .block-light { font-size: .75rem; }
.mrow-photo { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .25rem .7rem; font-size: .8125rem; }

.mealpic-dialog { width: min(94vw, 30rem); }
.mealpic-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.mealpic-list-wrap, .mealpic-pick-wrap { min-width: 0; }
.mealpic-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.mealpic-entry {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .6rem;
  background: var(--paper); border-inline-start: 4px solid var(--lamp, #a9a69b); border-radius: 14px;
}
.mealpic-entry.is-new { box-shadow: 0 0 0 2px var(--lamp, #a9a69b); }
.mealpic-entry.is-green  { --lamp: #2f9e4f; --light: #1d6b2f; }
.mealpic-entry.is-yellow { --lamp: #e9b100; --light: #6e4f00; }
.mealpic-entry.is-red    { --lamp: #d7263d; --light: #a3001b; }
.mealpic-entry.is-pending { --lamp: #a9a69b; --light: #5c5a53; }
.mealpic-shot { display: block; aspect-ratio: 1; overflow: hidden; background: var(--mist); border-radius: 10px; }
.mealpic-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mealpic-shot.is-missing img { visibility: hidden; }
.mealpic-entry-body { display: grid; align-content: start; gap: .3rem; min-width: 0; font-size: .875rem; }
.mealpic-entry-body p { margin: 0; }
.mealpic-light { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--light); }
.mealpic-wait, .mealpic-by { color: var(--grey-700); }
.mealpic-feedback { font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.mealpic-note { font-style: italic; color: var(--grey-700); overflow-wrap: anywhere; }
.mealpic-delete { justify-self: start; min-height: 36px; padding: .25rem .7rem; font-size: .8125rem; }
.mealpic-pick { display: grid; gap: .75rem; padding: 1rem; background: var(--paper); border: 1.5px dashed var(--grey-300); border-radius: 16px; }
.mealpic-pick-hint { margin: 0; color: var(--grey-700); }
.mealpic-pick-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; }
.mealpic-btn { justify-content: center; min-height: 48px; cursor: pointer; }
.mealpic-btn:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.mealpic-send { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.mealpic-preview { display: block; width: 100%; max-width: 100%; max-height: 18rem; object-fit: cover; border-radius: 14px; background: var(--mist); }
.mealpic-send textarea { width: 100%; min-height: 3.5rem; padding: .55rem .8rem; font: inherit; font-size: 16px; border: 1.5px solid var(--line); border-radius: var(--radius-ctl); resize: vertical; }
.mealpic-late { margin: 0; color: var(--grey-700); }
@media (max-width: 480px) {
  .mealpic-entry { grid-template-columns: 5rem minmax(0, 1fr); }
}
@media print { .block-photo, .mrow-photo { display: none !important; } }