/* Where Are My Snacks: what recipes need beyond the shared TBR stylesheet.
   Every colour, radius and shadow reads a style.css token, so all four themes
   carry over untouched. */

/* ---- Editor rows ------------------------------------------------------- */
.ing-list, .step-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.step-list { padding-left: 22px; }
.ing-row {
  display: grid;
  grid-template-columns: 64px 64px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 6px; align-items: center;
}
.ing-row input, .step-row textarea {
  width: 100%; min-width: 0; box-sizing: border-box;
  font: inherit; font-size: 14px; color: var(--md-on-surface);
  padding: 8px 10px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: var(--r-lg);
}
.ing-row input:focus, .step-row textarea:focus {
  outline: none; border-color: var(--md-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 22%, transparent);
}
.ing-head { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.ing-head input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--md-on-surface); padding: 8px 10px;
  background: transparent; border: 1px dashed var(--input-border); border-radius: var(--r-lg);
}
.ing-head input:focus { outline: none; border-style: solid; border-color: var(--md-primary); }
.add-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.recipe-view .ing-group-title { font-size: 15px; margin: 14px 0 4px; }
.recipe-view .ing-group-title:first-child { margin-top: 0; }
.step-row { display: flex; gap: 6px; align-items: flex-start; }
.step-row textarea { resize: vertical; }
.row-tools { display: flex; gap: 0; }
.icon-btn.mini { width: 30px; height: 30px; }
.icon-btn.mini .material-symbols-outlined { font-size: 18px; }
.add-row { margin-top: 0; }
/* Sized by the column the editor sits in (the sheet's is narrow even on a
   wide window), not by the viewport. */
.ing-list { container-type: inline-size; }
@container (max-width: 480px) {
  .ing-row { grid-template-columns: 56px 56px minmax(0, 1fr); }
  .ing-row .ing-note { grid-column: 1 / 3; }
  .ing-row .row-tools { grid-column: 3; justify-content: flex-end; }
}

/* ---- Recipe cards ------------------------------------------------------ */
.book .cover { aspect-ratio: 3 / 4; object-fit: cover; }
.book .card-marks {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
}
.card-mark {
  width: 32px; height: 32px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--md-surface) 88%, transparent);
  color: var(--md-on-surface-variant);
  box-shadow: var(--md-elev-1);
}
.card-mark .material-symbols-outlined { font-size: 18px; }
.card-mark[aria-pressed="true"] { color: var(--md-primary); }
.card-mark[aria-pressed="true"] .material-symbols-outlined { font-variation-settings: "FILL" 1; }
.card-mark.fav[aria-pressed="true"] { color: #d6336c; }
.book { position: relative; }
.fake-cover .material-symbols-outlined.fc-icon { font-size: 40px; opacity: .55; }

/* ---- Search row -------------------------------------------------------- */
.search-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; }
.search-row .search-box { flex: 1 1 220px; }
.search-box.ing { flex: 1 1 200px; }

/* ---- Recipe view in the detail sheet ---------------------------------- */
.recipe-view h2 { margin: 0 0 4px; }
.recipe-view .meta-line { color: var(--md-on-surface-variant); font-size: 14px; margin: 0 0 8px; }
.recipe-view .desc { margin: 8px 0 0; }
.recipe-view ul.ings { margin: 0; padding-left: 18px; }
.recipe-view ul.ings li { margin: 3px 0; }
.recipe-view ul.ings .q { font-weight: 600; }
.recipe-view ul.ings .n { color: var(--md-on-surface-variant); }
.recipe-view ol.steps { margin: 0; padding-left: 20px; }
.recipe-view ol.steps li { margin: 0 0 10px; line-height: 1.5; }
.recipe-view .notes { white-space: pre-wrap; margin: 0; }
.chips-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips-line .chip-s {
  font-size: 12px; padding: 3px 10px; border-radius: var(--r-full);
  background: var(--md-surface-container-high); color: var(--md-on-surface-variant);
}
.mark-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mark-btns button[aria-pressed="true"] .material-symbols-outlined { font-variation-settings: "FILL" 1; }
.mark-btns button[aria-pressed="true"] { border-color: var(--md-primary); color: var(--md-primary); }
.photo-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.photo-strip .thumb { position: relative; margin: 0; flex: 0 0 auto; }
.photo-strip img {
  height: 96px; width: 72px; object-fit: cover; object-position: top; display: block;
  border-radius: var(--r-lg); cursor: zoom-in;
  box-shadow: var(--cover-shadow, var(--md-elev-1));
  outline: 2px solid transparent; outline-offset: 2px;
}
.photo-strip .thumb.is-main img { outline-color: var(--md-primary); }
.thumb-btn {
  position: absolute; width: 26px; height: 26px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--md-surface) 90%, transparent);
  color: var(--md-on-surface-variant); box-shadow: var(--md-elev-1);
}
.thumb-btn .material-symbols-outlined { font-size: 16px; }
.thumb-btn.star { left: 4px; bottom: 4px; }
.thumb-btn.del { right: 4px; top: 4px; }
.thumb-btn.star[aria-pressed="true"] { color: var(--md-primary); }
.thumb-btn.star[aria-pressed="true"] .material-symbols-outlined { font-variation-settings: "FILL" 1; }
@media (pointer: coarse) {
  .thumb-btn { width: 32px; height: 32px; }
}
.cover-col img#m_cover { cursor: zoom-in; }
.zoom {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.86);
  display: grid; place-items: center; cursor: zoom-out; padding: 16px;
}
.zoom img { max-width: 100%; max-height: 100%; border-radius: var(--r-sm); }

/* ---- Add page --------------------------------------------------------- */
.shots { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.shot { position: relative; }
.shot img { width: 96px; height: 128px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--md-elev-1); }
.shot .shot-n {
  position: absolute; left: 6px; bottom: 6px; font-size: 12px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
}
.shot button {
  position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; padding: 0;
  border-radius: var(--r-full); display: grid; place-items: center;
}
.book-mode .subtitle { margin: 8px 0 0; }
.bm-banner { display: flex; gap: 12px; align-items: center; }
.bm-banner > .material-symbols-outlined { font-size: 32px; color: var(--md-primary); }
.bm-title { font-weight: 700; font-size: 17px; }
.bm-sub { font-size: 13px; color: var(--md-on-surface-variant); }
.book-mode:has(#bmOn:not(.hidden)) { border-color: var(--md-primary); }
.capture-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.scan-note {
  padding: 10px 14px; border-radius: var(--r-lg); margin: 0 0 12px;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.scan-note.warn { background: var(--md-error-container); color: var(--md-on-error-container); }
.review-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 20px; align-items: start; }
.review-grid .pages img { width: 100%; border-radius: var(--r-lg); margin-bottom: 10px; cursor: zoom-in; }
@media (max-width: 800px) {
  .review-grid { grid-template-columns: 1fr; }
  .review-grid .pages { display: flex; gap: 8px; overflow-x: auto; }
  .review-grid .pages img { width: auto; height: 160px; }
}

/* ---- Week page -------------------------------------------------------- */
.share-box { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.share-box input {
  flex: 1 1 260px; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px;
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--r-lg);
  color: var(--md-on-surface);
}
.extra-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.extra-row .field { flex: 1 1 220px; margin: 0; }
.orders { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.orders li { padding: 12px 14px; border-radius: var(--r-lg); background: var(--md-surface-container); }
.orders .who { font-weight: 700; }
.orders .when { color: var(--md-on-surface-variant); font-size: 13px; margin-left: 6px; }
.orders .msg { font-style: italic; margin: 6px 0 0; white-space: pre-wrap; }
.orders .dishes { margin: 6px 0 0; padding-left: 18px; }
.orders .tally { font-weight: 600; }

/* ---- Public menu ------------------------------------------------------ */
body.public { padding-left: 0 !important; }
body.public main { max-width: 760px; margin: 0 auto; padding-bottom: 40px; }
.dish-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.dish {
  display: grid; grid-template-columns: auto 72px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px 14px; cursor: pointer;
  background: var(--sec-bg); border: 1px solid var(--sec-border); border-radius: var(--r-card);
  box-shadow: var(--sec-shadow);
}
.dish:has(input:checked) { border-color: var(--md-primary); box-shadow: 0 0 0 2px var(--md-primary); }
.dish input { width: 24px; height: 24px; accent-color: var(--md-primary); cursor: pointer; }
.dish img, .dish .noimg {
  width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-lg);
  background: var(--md-surface-container-high); display: grid; place-items: center;
}
.dish .c, .dish .t, .dish .d { display: block; }
.dish .t { font-weight: 700; }
.dish .c { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--md-on-surface-variant); }
.dish .d { font-size: 14px; color: var(--md-on-surface-variant); margin-top: 2px; }
.order-done { text-align: center; padding: 40px 16px; }
.order-done .material-symbols-outlined { font-size: 56px; color: var(--md-primary); }

/* A recipe photo is a page: its title is at the top, so crop from there. */
.book .cover, .dish img { object-position: top; }

/* Phone: TBR folds its one search box behind an icon. Here search is the
   point of the library (and the ingredient box has no other home), so both
   boxes stay on screen as a full-width row under the title. */
@media (max-width: 899px) {
  .page-head > .filter-bar .search-row { order: 6; flex-basis: 100%; }
  .page-head .search-row .search-box { display: flex; order: 0; flex: 1 1 100%; }
  .page-head .search-row .facets { order: 1; }
}
@media (max-width: 899px) {
  /* The title gets its own line; the grouping pills follow under it. */
  .page-head h1#pageTitle { flex: 1 1 100%; }
  .page-head .search-row .search-box.ing { flex: 1 1 0; min-width: 0; }
}