/* ══════════════ Canteen menu (views/canteen.js) ══════════════
   Only drawn for a school that has a canteen menu. Two things: a card on
   the dashboard that is read in a glance — one line of soups, one line per
   dish — and a page with the whole day. Everything is prefixed canteen-.

   The marks after a dish (vegan, gluten-free…) are small pills in three
   quiet tones; they wrap under the dish name on a narrow screen rather than
   squeeze it. A sold-out dish is struck through, as on the canteen's own
   page. */

/* ── pieces shared by the card and the page ── */
.canteen-tag {
  display: inline-flex; align-items: center;
  padding: .05rem .45rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 500; line-height: 1.45; white-space: nowrap;
}
.canteen-tag.is-green { background: #ecfdf5; color: #047857; }
.canteen-tag.is-amber { background: #fffbeb; color: #b45309; }
.canteen-tag.is-grey  { background: #f3f4f6; color: #4b5563; }
.canteen-tag.is-red   { background: #fef2f2; color: #b91c1c; }
.canteen-price { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: #111827; }
/* The little "opens elsewhere" arrow after a link. Spelt out a second time
   for the link under "the menu could not be loaded": every icon inside an
   .empty-state is otherwise drawn 48px and faint (app.css). */
.canteen-ext,
.empty-state .canteen-ext { display: inline-block; width: .75em; height: .75em; margin: 0 0 0 .25em; vertical-align: -.05em; opacity: 1; }
.is-soldout .canteen-row-name,
.is-soldout .canteen-dish-name { text-decoration: line-through; color: #9ca3af; }

/* ── the card on the dashboard ── */
.canteen-card { padding: .75rem 1rem; }
.canteen-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; }
/* The canteen's name is the picker: a native select dressed as a heading, so
   a phone shows its own wheel and a keyboard its own list. */
.canteen-pick {
  appearance: none; -webkit-appearance: none;
  min-width: 0; max-width: 100%;
  padding: .125rem 1.25rem .125rem 0; border: 0; border-radius: 6px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .1rem center / .8rem;
  font: inherit; font-size: .8125rem; font-weight: 600; color: #374151;
  text-overflow: ellipsis; cursor: pointer;
}
.canteen-pick:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.canteen-asof { flex-shrink: 0; font-size: .6875rem; color: #9ca3af; white-space: nowrap; }
.canteen-soups { margin-bottom: .125rem; font-size: .8125rem; color: #6b7280; }
.canteen-list { margin: 0; padding: 0; list-style: none; }
.canteen-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .5rem;
  padding: .3rem 0; border-top: 1px solid #f3f4f6; font-size: .875rem; line-height: 1.35;
}
.canteen-row-name { flex: 1 1 13rem; min-width: 0; }
.canteen-row-side { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.canteen-more { display: inline-block; margin-top: .25rem; font-size: .75rem; color: #4f46e5; }
.canteen-fine { margin-top: .5rem; font-size: .75rem; color: #9ca3af; }
.canteen-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.canteen-fine a:hover { color: #4f46e5; }
.canteen-quiet { padding: .25rem 0; font-size: .875rem; color: #6b7280; }

/* ── the page ── */
.canteen-page { max-width: 44rem; margin: 0 auto; }
/* Six canteens fit as chips on a wide screen; a phone gets one select. */
.canteen-chips { display: none; flex-wrap: wrap; gap: .375rem; }
.canteen-chips .chip { background: #fff; font: inherit; font-size: .75rem; color: #374151; }
.canteen-chips .chip.selected { background: #eef2ff; color: #4f46e5; font-weight: 600; }
.canteen-chips .chip:focus-visible,
.canteen-day:focus-visible,
.canteen-days-step:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
@media (min-width: 640px) {
  .canteen-chips { display: flex; }
  .canteen-select { display: none; }
}

/* The week, Monday to Sunday: seven equal cells, so it never scrolls
   sideways, with a step to the week before and after. */
.canteen-days { display: flex; align-items: stretch; gap: .25rem; margin: .875rem 0 1rem; }
.canteen-days-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; flex: 1; min-width: 0; }
.canteen-day,
.canteen-days-step {
  border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
  font: inherit; color: #374151; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.canteen-day { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .375rem 0 .45rem; min-width: 0; }
.canteen-day-name { font-size: .6875rem; color: #6b7280; }
.canteen-day-num { position: relative; font-size: .9375rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.canteen-day:hover:not(:disabled),
.canteen-days-step:hover:not(:disabled) { background: #f9fafb; }
/* A day the canteen does not serve: still there to click, visibly quieter. */
.canteen-day.is-off { background: #f9fafb; border-style: dashed; }
.canteen-day.is-off .canteen-day-num,
.canteen-day.is-off .canteen-day-name { color: #9ca3af; }
.canteen-day.is-today .canteen-day-num::after {
  content: ''; position: absolute; left: 50%; bottom: -.3rem;
  width: .25rem; height: .25rem; margin-left: -.125rem; border-radius: 50%; background: #6366f1;
}
.canteen-day.is-selected { border-style: solid; border-color: #6366f1; background: #eef2ff; }
.canteen-day.is-selected .canteen-day-num,
.canteen-day.is-selected .canteen-day-name { color: #4338ca; }
.canteen-day:disabled,
.canteen-days-step:disabled { opacity: .4; cursor: default; }
.canteen-days-step { display: grid; place-items: center; flex: 0 0 2rem; padding: 0; color: #6b7280; }

.canteen-date { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.canteen-date::first-letter { text-transform: uppercase; }
.canteen-date-when {
  margin-left: .375rem; padding: .1rem .5rem; border-radius: 999px;
  background: #eef2ff; color: #4f46e5; font-size: .6875rem; font-weight: 600; vertical-align: .15em;
}
.canteen-stale {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .75rem; padding: .625rem .875rem; border-radius: 12px;
  background: #fffbeb; color: #92400e; font-size: .8125rem;
}

.canteen-group { margin-top: 1rem; }
.canteen-group-name {
  display: flex; align-items: center; gap: .375rem; margin-bottom: .375rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7280;
}
.canteen-dishes { margin: 0; padding: 0 1rem; list-style: none; }
/* A list to read, not a card to open: no lift under the pointer. */
.canteen-dishes:hover,
.dark .canteen-dishes:hover,
.canteen-card:hover,
.dark .canteen-card:hover { box-shadow: none; }
.canteen-dish {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .3rem .75rem;
  padding: .7rem 0; border-top: 1px solid #f3f4f6;
}
.canteen-dish:first-child,
.canteen-row:first-child { border-top: 0; }
.canteen-dish-text { flex: 1 1 16rem; min-width: 0; }
.canteen-dish-name { font-size: .9375rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.canteen-dish-small { margin-top: .15rem; font-size: .75rem; line-height: 1.4; color: #6b7280; overflow-wrap: anywhere; }
.canteen-dish-side { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding-top: .1rem; }

.canteen-foot { margin-top: 1.25rem; font-size: .75rem; line-height: 1.5; color: #9ca3af; }
.canteen-foot p + p { margin-top: .25rem; }
.canteen-foot-link { color: #4f46e5; font-weight: 500; }
.canteen-foot-link:hover { text-decoration: underline; }

/* Touch screens: iOS zooms in on a field whose text is under 16px (see
   .input in app.css); the card's picker is such a field. */
@media (pointer: coarse) {
  .canteen-pick { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .canteen-day,
  .canteen-days-step { transition: none; }
}
@media (forced-colors: active) {
  .canteen-day.is-selected { outline: 2px solid Highlight; }
  .canteen-day.is-off { border-style: dotted; }
}

/* ── dark ── */
.dark .canteen-tag.is-green { background: rgba(16, 185, 129, .15); color: #6ee7b7; }
.dark .canteen-tag.is-amber { background: rgba(245, 158, 11, .15); color: #fcd34d; }
.dark .canteen-tag.is-grey  { background: var(--d-surface3); color: var(--d-text2); }
.dark .canteen-tag.is-red   { background: rgba(239, 68, 68, .15); color: #fca5a5; }
.dark .canteen-price { color: var(--d-text); }
.dark .is-soldout .canteen-row-name,
.dark .is-soldout .canteen-dish-name { color: var(--d-text3); }
.dark .canteen-pick {
  color: var(--d-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9db3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* The open list of a native select is drawn by the browser on its own
   surface; without a colour of its own it would be dark text on dark. */
.dark .canteen-pick option { background: var(--d-surface2); color: var(--d-text); }
.dark .canteen-asof,
.dark .canteen-fine,
.dark .canteen-foot { color: var(--d-text3); }
.dark .canteen-soups,
.dark .canteen-quiet,
.dark .canteen-dish-small,
.dark .canteen-group-name { color: var(--d-text2); }
.dark .canteen-row,
.dark .canteen-dish { border-top-color: var(--d-border-l); }
.dark .canteen-more,
.dark .canteen-fine a:hover,
.dark .canteen-foot-link { color: var(--d-brand); }
.dark .canteen-chips .chip { background: var(--d-surface); color: var(--d-text2); }
.dark .canteen-chips .chip.selected { background: var(--d-brand-bg); color: var(--d-brand); }
.dark .canteen-day,
.dark .canteen-days-step { background: var(--d-surface); border-color: var(--d-border); color: var(--d-text); }
.dark .canteen-day-name,
.dark .canteen-days-step { color: var(--d-text3); }
.dark .canteen-day:hover:not(:disabled),
.dark .canteen-days-step:hover:not(:disabled) { background: var(--d-surface3); }
.dark .canteen-day.is-off { background: transparent; }
.dark .canteen-day.is-off .canteen-day-num,
.dark .canteen-day.is-off .canteen-day-name { color: #6f7389; }
.dark .canteen-day.is-today .canteen-day-num::after { background: var(--d-brand); }
.dark .canteen-day.is-selected { background: var(--d-brand-bg); border-color: #6366f1; }
.dark .canteen-day.is-selected .canteen-day-num,
.dark .canteen-day.is-selected .canteen-day-name { color: var(--d-brand); }
.dark .canteen-date-when { background: var(--d-brand-bg); color: var(--d-brand); }
.dark .canteen-stale { background: rgba(245, 158, 11, .12); color: #fcd34d; }