/* ==========================================================================
   COCAMOO — EXPLORE (round 7, step 3)
   app/views/pages/explore.php, drawn by explore.js. Boards: K-Explore
   (phone), D-Explore (desktop), O-Explore (signed out).
   The diet strip and sheet, chips and cards come from browse.css and
   base.css.

   SECTIONS
     1. Page and the title row (phones)
     2. Search as you type
     3. The finder
     4. Sections, New on Cocamoo rows, moment rows, Browse
     5. Signed out: welcome (Two ways in is base.css PLAN CARDS)
     6. The left rail, Pick up where you left off
   ========================================================================== */

/* ==========================================================================
   1. PAGE AND SHELVES
   ========================================================================== */
/* Two columns from 1200px (Your diet and Browse | Explore); one column
   below that, where the diet strip and the Browse grid take the left
   rail's place. Under both columns, .explore-wide holds the moment
   carousels (and Browse below 1200px) at the full width, so the left rail
   never leaves a long empty strip beside them. Nothing sticks: the left
   rail scrolls with the page, so nothing in it is ever cut off.
   Everything stacks with grid gaps, not margins, so a box that's hidden at
   this width (the phone shelves, the search box) leaves no gap behind and
   the main column's first card lines up with the top of Your diet.
   --out: how far the page's content sits from the window's edges, so the
   carousels can run out to the window (section 4). */
.explore { --out: calc(max(0px, (100vw - var(--page-max)) / 2) + var(--gutter)); row-gap: 36px; }
@media (max-width: 699px) { .explore { --out: 16px; } }
.explore-main, .explore [data-explore-body], .explore-wide, .explore [data-moments] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 36px;
  min-width: 0;
}
.explore [data-explore-body][hidden], .explore-wide[hidden] { display: none; }
.explore [data-moments]:empty { display: none; }
.explore [data-explore-body] > .diet-strip { margin-bottom: -18px; }
.explore.shell.has-left .shell-left { position: static; }
.explore.shell.has-left .explore-wide { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 1199px) {
  .explore.shell.has-left { grid-template-columns: minmax(0, 1fr); }
  .explore.shell.has-left .shell-main { grid-column: 1; grid-row: 1; }
  .explore .explore-left { display: none; }
}
@media (min-width: 1200px) {
  .explore.shell.has-left { grid-template-columns: 230px minmax(0, 1fr); column-gap: 32px; }
  .explore [data-diet-strip] { display: none; }
}
/* R8-U-Desk: the right rail (Up next, then the Shopping list) from 900px,
   only while explore.js finds something for it (.has-right). The Up next
   row in the main column steps aside while the rail shows it. */
.explore-right[hidden] { display: none; }
@media (max-width: 899px) { .explore-right { display: none; } }
@media (min-width: 900px) {
  .explore.shell.has-left.has-right { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; }
  .explore.shell.has-left.has-right .shell-main { grid-column: 1; grid-row: 1; }
  .explore.shell.has-left.has-right .explore-right { grid-column: 2; grid-row: 1; }
  .explore.has-right [data-upnext] { display: none; }
}
@media (min-width: 1200px) {
  .explore.shell.has-left.has-right { grid-template-columns: 230px minmax(0, 1fr) 300px; }
  .explore.shell.has-left.has-right .shell-main { grid-column: 2; }
  .explore.shell.has-left.has-right .explore-right { grid-column: 3; }
}
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.side-all { font-size: 14px; font-weight: 700; color: var(--plum-text); }
.side-all[hidden] { display: none; }
.side-sub { font-size: 15px; color: var(--muted); }
.un-rail { display: grid; gap: 12px; margin-top: 4px; }
.un-rail-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
.un-rail-row .un-photo { width: 56px; aspect-ratio: 1; border-radius: var(--r-4); }
.un-rail-text { display: grid; gap: 2px; min-width: 0; }
.un-rail-text .un-name { font-weight: 700; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.un-rail-text .un-name:hover { color: var(--plum-text); }
.un-rail-text .un-sub { font-size: 14px; color: var(--muted); }
.un-rail-ask { justify-self: start; padding: 0; border: 0; background: none; font: 700 14px var(--font-body); color: var(--plum-text); cursor: pointer; text-align: left; }
.un-rail-ask:hover { text-decoration: underline; text-underline-offset: 3px; }
.rail-shop-open { margin-top: 6px; color: var(--plum-text); }

/* (Explore / Library, the two big words, were here until round 11: the
   title row, partials/tab-head.php, does their job now) */

/* Round 11 (Nov 12, board P1-Explore): signed in, the curated rows only, no
   left rail; the title and a line under it (phones: the title row has the
   word, so only the line shows), and Browse as a grid at every width */
.explore-intro { display: grid; gap: 4px; margin: -6px 4px -12px; }
.explore-title { display: none; font: 700 40px/1.1 var(--font-display); letter-spacing: -.02em; }
.explore-lead { color: var(--muted); font-size: 15px; }
@media (min-width: 700px) {
  .explore-intro { margin: 0 0 -8px; }
  .explore-title { display: block; }
  .explore-lead { font-size: 17px; }
}
@media (min-width: 1200px) { .explore.is-curated .browse-section { display: block; } }

/* ==========================================================================
   2. SEARCH AS YOU TYPE
   ========================================================================== */
.explore-search { position: relative; display: flex; align-items: center; }
.explore-search[hidden] { display: none; }
.explore-search-icon { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.explore-search input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--well-bg);
  box-shadow: var(--well);
  color: var(--ink);
  font: 400 16px var(--font-body);
  -webkit-appearance: none;
  appearance: none;
}
.explore-search input:focus { outline: none; box-shadow: var(--well), 0 0 0 2px var(--plum-icon); }
.explore-search input::-webkit-search-cancel-button { display: none; }
@media (min-width: 700px) { .explore-search { display: none !important; } } /* the top bar has search */

.explore-results { min-height: 60vh; }
.explore-results[hidden] { display: none; }
.explore-results > .results-h:first-child { margin-top: 0; }
.results-h { margin: 18px 4px 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.result-list { overflow: hidden; }
.result-row, .pickup-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; color: var(--ink); }
.result-row + .result-row { border-top: 1px solid var(--sep); }
.result-row:hover { background: var(--well-bg); color: var(--ink); }
.results-empty { padding: 8px 4px; color: var(--muted); }
.results-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin: 12px 4px 0; font-size: 14px; color: var(--muted); }

/* ==========================================================================
   3. THE FINDER
   "Planning for [dinner]?" on phones, with Ready by / Using as two boxes;
   the whole sentence from 700px. The choices are plum with a dashed line
   under them: tap to change.
   ========================================================================== */
.finder { padding: 20px 20px 18px; }
@media (min-width: 700px) { .finder { padding: 26px 30px 24px; border-radius: var(--r-5); } }
.finder-hello { font-size: 15px; color: var(--muted); }
.finder-q { margin-top: 6px; font: 700 28px/1.2 var(--font-display); letter-spacing: -.015em; }
@media (min-width: 700px) { .finder-q { font-size: 34px; } }
@media (min-width: 1200px) { .finder-q { font-size: 40px; } }
.pick { position: relative; display: inline-block; }
/* the real <select> stays for its value, out of sight (explore.js draws the menu) */
.pick select { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pick-btn {
  font: inherit;
  letter-spacing: inherit;
  color: var(--plum-text);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-bottom: 2px dashed var(--plum-icon);
  cursor: pointer;
}
.pick-btn:hover, .pick-btn[aria-expanded="true"] { border-bottom-style: solid; }
.pick-btn { position: relative; }
.pick-btn::after { content: ""; position: absolute; inset: -6px -4px; } /* 44px to tap on phones */
.pick-btn:focus-visible { outline: 2px solid var(--plum-icon); outline-offset: 3px; border-radius: var(--r-1); }
/* the menu: white glass, grey hover, the chosen row solid plum with a check */
.pick-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: -8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  padding: 6px;
  border-radius: var(--r-4);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--shadow-menu);
  font: 500 16px/1.2 var(--font-body);
  letter-spacing: 0;
  animation: panel-in .16s var(--ease);
}
.pick-menu[hidden] { display: none; }
.pick-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-3);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.pick-opt:hover, .pick-opt:focus-visible { background: var(--well-bg); outline: none; }
.pick-opt[aria-selected="true"] { background: var(--well-bg); color: var(--plum-text); font-weight: 700; } /* Nov 10: grey, plum words */
.pick-opt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* round 8 (R8-U-Explore): the whole sentence on phones too, four clauses;
   the two boxes under it are retired */
.finder-more { display: inline; }
.finder-wells { display: none !important; }
.finder-wells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.finder-well {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 34px 8px 14px;
  border-radius: var(--r-4);
  background: var(--well-bg);
  box-shadow: var(--well);
  font-size: 12px;
  color: var(--muted);
}
.finder-well::after { content: ""; position: absolute; right: 14px; top: 50%; margin-top: -3px; border: 5px solid transparent; border-top-color: var(--plum-icon); }
.finder-well select { border: 0; padding: 0; background: none; color: var(--ink); font: 500 16px var(--font-body); -webkit-appearance: none; appearance: none; cursor: pointer; }
/* the whole well opens the menu (the select alone was 20px tall): it grows
   over the label and the padding, and its text stays where it was (harden, Oct 26) */
.finder-well select { position: relative; z-index: 1; width: calc(100% + 48px); margin: -27px -34px -8px -14px; padding: 27px 34px 8px 14px; }

.finder-picks { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 700px) {
  .finder-picks { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; margin-top: 20px; }
  .finder-picks .pick-lead { grid-row: 1 / span 2; }
}
@media (min-width: 700px) {
  /* the lead's photo grows to the height of the two picks beside it */
  .pick-lead .lead-photo { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
}
@media (max-width: 699px) { .finder-picks .pick-card:not(.pick-lead) { display: none; } }
.pick-card { display: flex; flex-direction: column; gap: 8px; color: var(--ink); min-width: 0; }
.pick-card:hover { color: var(--ink); }
.lead-photo { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-4); overflow: hidden; background: var(--band); box-shadow: 0 10px 24px -10px rgba(24, 24, 27, .3); }
.pick-card:not(.pick-lead) .lead-photo { aspect-ratio: 16 / 11; border-radius: var(--r-4); }
.lead-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.pick-card:hover .lead-photo img, .welcome-lead-pick:hover .lead-photo img { transform: scale(1.03); }
.lead-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--photo); pointer-events: none; }
.photo-chip {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  color: var(--plum-text);
  font-size: 13px;
  font-weight: 700;
}
.pick-text { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lead-name { font: 700 20px/1.25 var(--font-display); }
.pick-lead .lead-name { font-size: 24px; }
.pick-card:not(.pick-lead) .pick-text { flex-direction: column; gap: 2px; }
.pick-card:not(.pick-lead) .lead-name { font-size: 16px; font-family: var(--font-body); font-weight: 600; }
.lead-meta { flex: 0 0 auto; font-size: 14px; color: var(--muted); }
.finder-empty { padding: 20px 4px; color: var(--muted); }
.finder-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.finder-foot .text-link[hidden] { display: none; }

/* ==========================================================================
   4. SECTIONS, NEW ON COCAMOO, MOMENT ROWS, BROWSE
   ========================================================================== */
.explore-section[hidden] { display: none; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 12px; }
.section-h { font: 700 24px/1.2 var(--font-display); letter-spacing: -.01em; }
@media (min-width: 700px) { .section-h { font-size: 28px; } }
.section-aside { font-size: 14px; color: var(--muted); white-space: nowrap; }
.section-sub { margin: -6px 4px 12px; font-size: 15px; color: var(--muted); }
/* "See all": a full 44px to tap, without pushing the heading around */
.section-head .text-link { margin: -12px 0; }

/* rows: New on Cocamoo, search results, pick up where you left off */
.new-list { overflow: hidden; border-radius: var(--r-5); background: var(--card); box-shadow: var(--raise); }
.new-row { display: flex; align-items: center; gap: 12px; padding-right: 14px; }
.new-row + .new-row { border-top: 1px solid var(--sep); }
.new-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 12px; color: var(--ink); }
.new-link:hover { color: var(--ink); }
.new-link:hover .row-name { color: var(--plum-text); }
.row-save {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--raise), 0 0 0 1px var(--line);
  color: var(--plum-icon);
  cursor: pointer;
}
.row-save svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.row-save .i-tick { display: none; }
.row-save.is-saved { background: var(--plum-button); box-shadow: var(--plum-shadow); color: var(--white); }
.row-save.is-saved .i-plus { display: none; }
.row-save.is-saved .i-tick { display: block; }
.row-lock { flex: 0 0 auto; color: var(--muted); }
.row-lock svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* from 700px: New on Cocamoo as a 3-up grid of cards */
@media (min-width: 700px) {
  .new-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .new-row { position: relative; flex-direction: column; align-items: stretch; padding: 10px 10px 14px; border-radius: var(--r-5); background: var(--card); box-shadow: var(--raise); }
  .new-row + .new-row { border-top: 0; }
  .new-link { flex-direction: column; align-items: stretch; padding: 0; gap: 10px; }
  .new-link .row-thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--r-4); }
  .new-link .row-text { padding: 0 6px; }
  /* + Save (or the padlock) sits on the photo's corner */
  .new-row .row-save, .new-row .row-lock { position: absolute; top: 20px; right: 20px; }
  .new-row .row-lock { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
}

/* moment rows: the carousel runs out to the window's edges (the window
   cuts the cards off, not the page), with its first card on the page's
   edge. Four cards and a peek from 1200px, three and a peek from 700px,
   two and a peek on phones. It glides rather than snapping hard; its
   arrows sit on the page's edges, centred on the photos. */
.explore-wide .rail {
  grid-auto-columns: calc((100% - 32px) / 3.2);
  gap: 16px;
  margin: 0 calc(-1 * var(--out));
  padding: 4px var(--out) 14px;
  scroll-padding-left: var(--out);
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
}
@media (min-width: 1200px) { .explore-wide .rail { grid-auto-columns: calc((100% - 48px) / 4.2); } }
@media (max-width: 699px) { .explore-wide .rail { grid-auto-columns: 42%; gap: 12px; } }
/* (Nov 11: New on Cocamoo is one of these rows now, in .explore-wide, so
   its phone-only bleed rule went) */
.explore-wide .rail-wrap .rail-prev { left: -22px; }
.explore-wide .rail-wrap .rail-next { right: -22px; }
@media (prefers-reduced-motion: reduce) { .explore-wide .rail { scroll-behavior: auto; } }

/* Browse: phones only (the left rail has it from 1200px) */
.browse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 560px) { .browse-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 3 × 3, no course left alone */
.browse-grid a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: var(--r-4); color: var(--ink); font-weight: 600; }
.browse-grid a:hover { color: var(--plum-text); }
@media (min-width: 1200px) { .browse-section { display: none; } }

/* ==========================================================================
   5. SIGNED OUT: WELCOME, TWO WAYS IN
   ========================================================================== */
.welcome { padding: 24px 22px 20px; }
@media (min-width: 700px) { .welcome { padding: 30px 32px 26px; border-radius: var(--r-5); } }
.welcome-h { font: 700 30px/1.15 var(--font-display); letter-spacing: -.02em; }
@media (min-width: 700px) { .welcome-h { font-size: 40px; } }
.welcome-lead { max-width: 520px; margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--muted); }
.welcome-lead-pick { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; color: var(--ink); }
.welcome-lead-pick:hover { color: var(--ink); }
.welcome-lead-pick .lead-name { font-size: 24px; }
/* Nov 11 (Dave): the words on top, then the two free recipes side by side
   as a matching pair (the week's one was a small row under the words, beside
   the big photo, and looked stray). Phones: two small cards, so both show
   without a long scroll. */
.welcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
.welcome-h, .welcome-lead { grid-column: 1 / -1; }
.welcome-lead-pick .lead-photo { aspect-ratio: 4 / 3; }
.welcome-lead-pick:hover .lead-name { color: var(--plum-text); }
@media (max-width: 699px) {
  .welcome-lead-pick { gap: 8px; }
  .welcome-lead-pick .lead-name { font-size: 17px; line-height: 1.25; }
  .welcome-lead-pick .lead-meta { font-size: 14px; }
  .welcome-lead-pick .photo-chip { font-size: 12px; }
}
@media (min-width: 700px) {
  .welcome { column-gap: 24px; }
  .welcome-lead-pick { margin-top: 24px; }
  .welcome-lead-pick .lead-photo { aspect-ratio: 16 / 10; }
}
.welcome-lead-pick:only-of-type { grid-column: 1 / -1; }



/* ==========================================================================
   6. THE LEFT RAIL, PICK UP WHERE YOU LEFT OFF
   ========================================================================== */
.explore-left { display: flex; flex-direction: column; gap: 14px; }

/* Your diet: one-tap checkboxes, pressed in until ticked plum */
.diet-list { display: flex; flex-direction: column; gap: 2px; }

.browse-list { display: flex; flex-direction: column; }
.browse-list a { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--ink); font-size: 15px; font-weight: 600; }
.browse-list a:hover { color: var(--plum-text); }
.browse-name { flex: 1 1 auto; }
.browse-n { font-size: 13px; font-weight: 500; color: var(--soft); }

/* Pick up where you left off (under the finder): rows in one raised card
   on phones, three small cards side by side from 700px */
.pickup-list { overflow: hidden; border-radius: var(--r-5); background: var(--card); box-shadow: var(--raise); }
/* Nov 10: each row in its own .pickup-item (swipe-row) so a swipe can take it out; ✕ on desktop */
.pickup-item { background: var(--card); }
.pickup-item + .pickup-item { border-top: 1px solid var(--sep); }
.pickup-item .swipe-face { display: flex; align-items: center; }
.pickup-item .pickup-row { flex: 1 1 auto; min-width: 0; }
.pickup-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 8px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.pickup-x svg { width: 16px; height: 16px; }
.pickup-x:hover, .pickup-x:focus-visible { background: var(--well-bg); color: var(--ink); outline: none; }
@media (pointer: coarse) and (max-width: 699px) { .pickup-x { display: none; } } /* phones swipe instead */
.pickup-row .row-thumb { width: 52px; height: 52px; border-radius: var(--r-3); }
.pickup-row .row-name { font-size: 16px; }
.pickup-row:hover { color: var(--ink); }
.pickup-row:hover .row-name { color: var(--plum-text); }
@media (min-width: 700px) {
  .pickup-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .pickup-item { overflow: hidden; border-radius: var(--r-4); background: var(--card); box-shadow: var(--raise); }
  .pickup-item + .pickup-item { border-top: 0; }
  /* the ✕ takes no room in the small cards: in the corner, on hover or focus */
  .pickup-item { position: relative; }
  .pickup-x { position: absolute; top: 6px; right: 6px; z-index: 2; width: 32px; height: 32px; margin: 0; background: var(--card); box-shadow: var(--raise); opacity: 0; }
  .pickup-item:hover .pickup-x, .pickup-x:focus-visible { opacity: 1; }
  @media (hover: none) { .pickup-x { opacity: 1; } }
}

/* the "?" stays with the last choice ("…using anything?" never leaves "?"
   alone on a line): on phones the short question ends with the meal */
/* (walkthrough, Oct 29: round 8 shows the whole sentence on phones too, so
   phones read "dinner?, ready by…" until the end mark went everywhere) */
.finder-q-mark { display: none; }
.q-nw { white-space: nowrap; }

/* "All preferences" in the left rail: a full 44px to tap */
.side-link { min-height: 44px; display: inline-flex; align-items: center; }

/* profiles review, Oct 26 */
.diet-hidden { margin: -4px 4px 0; font-size: 14px; color: var(--muted); }
.diet-hidden[hidden] { display: none; }
.diet-hidden .text-link { min-height: 0; padding: 12px 0; margin: -12px 0; font-size: 14px; }
.explore [data-explore-body] > .diet-strip + .diet-hidden { margin-top: 0; }
.row-unfit { display: block; font-size: 13px; color: var(--muted); } /* its own line, so no leading "·" */
.occasions { display: flex; flex-wrap: wrap; gap: 8px; }
.explore-end-search { display: grid; gap: 12px; }
.explore-end-search .explore-search { display: flex !important; }
@media (min-width: 700px) { .explore-end-search .explore-search { max-width: 560px; } }
.photo-chip-lock { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.photo-chip-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* inside Explore's grid the row gap spaces them; their own margin doubled it (R8-U-Desk) */
.explore [data-explore-body] > .sorted, .explore [data-explore-body] > .diet-ask { margin-bottom: 0; }

/* ==========================================================================
   ROUND 10 (Nov 12, Dave, 1.5): ONE UP NEXT RECIPE, ONE FULL-WIDTH CARD
   (the Library's rule): a raised card, the photo on the left, the name and
   its state beside it, Made it? still on the photo. No half-empty row.
   ========================================================================== */
.un-row.is-one .un-card { flex: 1 1 auto; width: auto; padding: 8px 48px 8px 8px; border-radius: var(--r-5); background: var(--card); box-shadow: var(--raise); }
.un-row.is-one .un-link { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 16px; align-items: center; }
.un-row.is-one .un-photo { grid-row: 1 / -1; box-shadow: none; border-radius: var(--r-4); }
.un-row.is-one .un-name { grid-row: 2; margin: 0; font-size: 18px; }
.un-row.is-one .un-sub { grid-row: 3; }
.un-row.is-one .un-ask { left: 18px; top: calc(8px + 150px / 1.5 - 44px); }
.un-row.is-one .un-x { top: 50%; right: 8px; transform: translateY(-50%); background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--soft); }
@media (max-width: 699px) {
  .un-row.is-one .un-link { grid-template-columns: 120px minmax(0, 1fr); }
  .un-row.is-one .un-ask { top: calc(8px + 120px / 1.5 - 44px); }
  .un-row.is-one .un-name { font-size: 16px; }
}

/* Round 11, part 1: the Community tab's placeholder (pages/community.php),
   until part 3 builds the page */
.community-soon { display: grid; gap: 12px; justify-items: start; padding: 24px; border-radius: var(--r-5); }
.community-soon-h { font: 700 24px/1.25 var(--font-display); letter-spacing: -.01em; }
.community-soon-p { color: var(--muted); }
.community-soon-tag { padding: 4px 12px; border-radius: var(--r-pill); background: var(--well-bg); box-shadow: var(--well); font-size: 14px; font-weight: 700; color: var(--muted); }