:root {
  color-scheme: light;
  --meadow: #dcefc6;
  --meadow-deep: #b9dea1;
  --sun: #fff3b8;
  --cream: #fff7c9;
  --cream-new: #fff07a;
  --orange: #f3a43b;
  --text-outline: var(--orange); /* outline around the white header and note text */
  --accent: var(--orange);       /* every border and outline, icons, NEW tag; brown in high contrast */
  --ink: #4a3b2c;
  --ink-soft: #7a6450;
  --white: #fffdf6;

  --gutter: 16px;
  --radius: 22px;
  --edge: 3px;
}

/* High contrast theme: turned on by the toggle at the top of the page, or
   automatically when the device asks for more contrast. The header and note
   text turn solid dark brown (no white fill or outline), the same brown as the
   rest of the page's text. */
:root[data-contrast="more"] {
  --hc: var(--ink);
  --text-outline: var(--hc);
  --accent: var(--hc);
}

:root[data-contrast="more"] :is(.title, .subtitle, .credit, .notes li, .section-heading) {
  color: var(--text-outline);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* The category pill and clear button turn near-black too, with white text
   and icon on them. */
:root[data-contrast="more"] .tabs::before,
:root[data-contrast="more"] .picker-clear { background: var(--accent); }

:root[data-contrast="more"] :is(.tab[aria-selected="true"], .picker-clear) { color: var(--white); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  color: var(--ink);
  background-color: var(--meadow);
  background-image:
    radial-gradient(60vmax 40vmax at 85% 8%, rgba(255, 246, 196, .9), transparent 70%),
    radial-gradient(45vmax 35vmax at 0% 40%, rgba(185, 222, 161, .8), transparent 70%),
    radial-gradient(50vmax 40vmax at 100% 70%, rgba(255, 228, 190, .7), transparent 70%),
    radial-gradient(40vmax 30vmax at 20% 100%, rgba(255, 214, 214, .55), transparent 70%);
  background-attachment: fixed;
}

img { display: block; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 10px;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px var(--gutter) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

/* ---------- High contrast toggle ---------- */

/* Subtitle on the left, contrast toggle on the right. The subtitle wraps
   onto two lines when the row gets tight; the button never shrinks. */
.masthead-top {
  /* The big title below is pulled up with a negative margin, so its line box
     overlaps this row. Stay on top so the whole button can be tapped. */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.masthead-top .subtitle { min-width: 0; }

/* Below 620px the full label would push the subtitle onto a second line, so
   show just the icon; the subtitle then fits on one line down to ~330px.
   The label stays readable to screen readers. */
@media (max-width: 619px) {
  .contrast-toggle { padding: 6px 10px; }
  .contrast-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.contrast-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  background: var(--cream);
  border: var(--edge) solid var(--accent); /* same outline as the other controls */
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.contrast-toggle[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* ---------- Masthead ---------- */

.masthead { text-align: left; }

.title {
  /* The tall line height below adds space above the word too; pull it back up. */
  margin: -.2em 0 0;
  font-size: clamp(64px, 21vw, 150px);
  font-weight: 700;
  line-height: 1.3; /* tall enough that the y in Curry (with outline and shadow) clears the credit */
  letter-spacing: -.01em;
  color: var(--white);
  -webkit-text-stroke: .1em var(--text-outline);
  paint-order: stroke fill;
  text-shadow:
    0 .05em 0 var(--text-outline),
    0 .1em .12em rgba(185, 120, 30, .25);
  transform-origin: 20% 80%;
}

.title.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }

@keyframes pop {
  0% { transform: scale(.92, 1.06); }
  60% { transform: scale(1.03, .97); }
  100% { transform: none; }
}

/* Subtitle, credit and notes share one outline thickness, sized off the
   subtitle so smaller text gets an equally thick outline. */
:root {
  --subtitle-size: clamp(20px, 6vw, 34px);
  --outline: calc(var(--subtitle-size) * .22);
}

.subtitle,
.credit,
.notes li,
.section-heading {
  color: var(--white);
  font-weight: 700;
  -webkit-text-stroke: var(--outline) var(--text-outline); /* the title's orange */
  paint-order: stroke fill;
}

.subtitle,
.credit { margin: 0; }

.subtitle {
  margin-bottom: 4px;
  font-size: var(--subtitle-size);
  line-height: 1.15;
}

.credit {
  margin-top: 6px;
  font-size: clamp(14px, 4vw, 20px);
  line-height: 1.25;
}

/* The site link keeps the credit's outlined look; it sits on its own line,
   so it doesn't need an underline to stand out from the text around it.
   The outline color is set on the link itself: inherited, Chrome draws a
   visited link's outline in the text color, turning it all white. */
.credit a {
  color: inherit;
  -webkit-text-stroke-color: var(--text-outline);
  text-decoration: none;
  border-radius: 4px;
}

.credit a:hover { text-decoration: underline; }

/* ---------- Category tabs ---------- */

.tabs {
  --tab-pad: 6px;
  --tab-gap: 8px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tab-gap);
  padding: var(--tab-pad);
  background: var(--cream);
  border: var(--edge) solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(120, 140, 60, .18);
}

/* One orange pill behind the tabs that slides to the selected one.
   app.js sets --i to the selected tab's position (0, 1 or 2). */
.tabs::before {
  content: "";
  position: absolute;
  top: var(--tab-pad);
  bottom: var(--tab-pad);
  left: var(--tab-pad);
  width: calc((100% - 2 * var(--tab-pad) - 2 * var(--tab-gap)) / 3);
  border-radius: 999px;
  background: var(--orange);
  box-shadow: inset 0 -3px 0 rgba(150, 80, 10, .25);
  transform: translateX(calc(var(--i, 0) * (100% + var(--tab-gap))));
  transition: transform .35s cubic-bezier(.3, 1.25, .5, 1);
}

/* Tabs and the ingredient dropdown stay at the top while scrolling. */
.controls {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 5;
  display: grid;
  gap: 8px;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: clamp(16px, 4.6vw, 20px);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tab img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: none;
}

/* Tabs sit above the sliding pill. The selected tab's text is white and fades
   in as the pill arrives. On the light orange pill that's 2.03:1, below WCAG;
   the high contrast theme covers it with a dark brown pill (10.56:1). */
.tab {
  position: relative;
  z-index: 1;
  transition: color .25s ease .08s;
}

.tab[aria-selected="true"] { color: var(--white); }

.tab[aria-selected="true"] img { filter: drop-shadow(0 1px 0 rgba(120, 60, 0, .35)); }

@media (max-width: 379px) {
  .tabs { --tab-gap: 4px; --tab-pad: 4px; }
  .tab { gap: 3px; padding: 4px; font-size: 15px; }
  .tab img { width: 22px; height: 22px; }
  .notes { font-size: 15px; gap: 6px; }
}

/* ---------- Ingredient dropdown ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Ingredient picker on the left, pot size on the right. */
.filter-row {
  display: flex;
  gap: 8px;
}

.picker {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
}

/* ---------- Pot size ---------- */

.pot {
  flex: none;
  width: 84px;
  min-height: 56px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 4px 8px;
  background: var(--cream);
  border: var(--edge) solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(120, 140, 60, .18);
  cursor: text;
}

.pot:focus-within {
  border-color: var(--accent);
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.pot-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink-soft);
  white-space: nowrap;
}

.pot-input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Narrow phones: a slimmer pot field and smaller picker text, so
   "All ingredients" still fits on one line beside it. */
/* Narrow phones: smaller picker text so ingredient names fit. */
@media (max-width: 379px) {
  .picker-btn .picker-name { font-size: 15px; }
  .picker-btn .picker-count { font-size: 12px; }
}

/* The field's border shows focus, so the input itself doesn't need a ring. */
.pot-input:focus { outline: none; }

.pot-input::-webkit-outer-spin-button,
.pot-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.picker-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 14px 6px 8px;
  background: var(--cream);
  border: var(--edge) solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(120, 140, 60, .18);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


.picker-btn > img,
.picker-option > img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: none;
}

.picker-all-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 2px dashed var(--accent);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.picker-name {
  flex: 1;
  min-width: 0;
  display: grid;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.picker-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

.picker-chevron {
  flex: none;
  color: var(--accent);
  transition: transform .2s;
}

.picker-btn[aria-expanded="true"] { border-color: var(--accent); }

.picker-btn[aria-expanded="true"] .picker-chevron { transform: rotate(180deg); }

/* The ✕ sits inside the right end of the picker, in place of the chevron,
   so the filter row has room for the pot size and NEW buttons. */
.picker-clear {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink); /* brown icon on the light orange: 5.21:1 */
  cursor: pointer;
}

.picker.has-value .picker-btn { padding-right: 52px; }

/* Keep the count under the ingredient name to one line in the narrow button. */
.picker-btn .picker-count {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker.has-value .picker-chevron { display: none; }

/* ---------- NEW filter ---------- */

.new-filter {
  flex: none;
  width: 60px;
  min-height: 56px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 4px;
  background: var(--cream);
  border: var(--edge) solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(120, 140, 60, .18);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s;
}

.new-filter svg { color: var(--accent); transition: color .2s; }

/* On: filled like the selected category pill. */
.new-filter[aria-pressed="true"] {
  background: var(--accent);
  color: var(--white);
}

.new-filter[aria-pressed="true"] svg { color: var(--white); }

/* Pot size and NEW side by side... */
.side-filters {
  flex: none;
  display: flex;
  gap: 8px;
}

/* ...or, on phones, stacked as two short pills in one column, so the
   ingredient picker keeps enough width and the sticky bar stays one row tall. */
@media (max-width: 479px) {
  .side-filters {
    flex-direction: column;
    gap: 4px;
    width: 86px;
  }

  .pot,
  .new-filter {
    width: auto;
    min-height: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    box-shadow: 0 3px 10px rgba(120, 140, 60, .16);
  }

  .pot-label { font-size: 11px; }

  .pot-input {
    width: 3.2ch;
    font-size: 15px;
    text-align: left;
  }

  .new-filter svg { width: 14px; height: 14px; }
}

.picker-clear[hidden] { display: none; }

.picker-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(62vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cream);
  border: var(--edge) solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(90, 110, 40, .28);
  transform-origin: top center;
  animation: drop .16s ease-out;
}

.picker-list:focus { outline: none; }

.picker-list[hidden] { display: none; }

@keyframes drop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
}

.picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 10px 6px 8px;
  border-radius: 14px;
  cursor: pointer;
}

.picker-option.is-active { background: var(--white); }

.picker-option[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--accent); }

.picker-option.is-unused > img,
.picker-option.is-unused .picker-name { opacity: .5; }

.picker-strength {
  flex: none;
  min-width: 46px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--rank);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.filter-empty {
  margin: 0;
  padding: 20px;
  background: var(--cream);
  border: var(--edge) solid var(--accent);
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}

.filter-empty[hidden] { display: none; }

/* ---------- Notes ---------- */

.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--white);
}

/* The notes' outline is set with the header text above. */

/* ---------- Recipe staircase ---------- */

/* The list holds one or more sections (the release view has one per new
   ingredient); each section has its own staircase. */
.recipe-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
}

.recipe-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.recipes {
  filter: drop-shadow(0 8px 14px rgba(120, 140, 60, .2));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;

  /* Row sizes come from the staircase's own width (cqw), so a row with four
     ingredients exactly fills it and every narrower step is one slot in. */
  container-type: inline-size;
  --pad: clamp(6px, 2cqw, 14px);   /* step side padding */
  --gap: clamp(2px, 1cqw, 8px);    /* space between count, ingredients, = and dish */
  --badge: clamp(22px, 6.5cqw, 34px);
  --eq: clamp(10px, 3cqw, 22px);
  --dish: clamp(44px, 13cqw, 84px);
  /* 4 edges: the step's side borders and the count badge's border. */
  --slot: calc((100cqw - 2 * var(--pad) - 8px - 4 * var(--edge) - 3 * var(--gap) - var(--badge) - var(--eq) - var(--dish) - 1px) / 4);
  --icon: min(calc(var(--slot) * .54), 64px);
  --qty: calc(var(--icon) * .5);
}

/* Steps and rows collapse by animating their grid row from 1fr to 0fr. */
.step,
.row {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows .32s cubic-bezier(.3, .7, .3, 1),
    opacity .22s ease;
}

.step.is-collapsed,
.row.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
}

.step-clip,
.row > .recipe {
  min-height: 0;
  overflow: hidden;
}

/* One outline around the whole staircase, drawn with real borders so the
   rounded corners keep an even thickness. Each step has side and bottom
   borders, and the next step slides up over the bottom border, hiding it
   except where the wider step above sticks out. */
.step {
  margin: calc(var(--edge) * -1) 0 0;
  background: var(--cream);
  border: var(--edge) solid var(--accent);
  border-top-width: 0;
  /* Steps get narrower going down, so each one's bottom-left corner sticks out. */
  border-bottom-left-radius: var(--radius);
  transition-property: grid-template-rows, opacity, border-radius;
}

.step.is-top {
  margin-top: 0;
  border-top-width: var(--edge);
}

/* Only the top and bottom of the whole staircase get vertical padding, so the
   gap between rows is the same within a step and where two steps meet. */
.step-pad { padding: 0 var(--pad); }

.step.is-top .step-pad { padding-top: 6px; }

.step.is-bottom .step-pad { padding-bottom: 6px; }

.step.is-top {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.step.is-bottom { border-bottom-right-radius: var(--radius); }

#recipes.instant .step,
#recipes.instant .row { transition: none; }

.recipe { position: relative; }

.recipe > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap);
  padding: 6px 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s;
}

.recipe > summary::-webkit-details-marker { display: none; }

/* Rows clip their overflow for the collapse animation, so a focus ring drawn
   outside the row would be cut off. Draw it just inside instead. */
.recipe > summary:focus-visible { outline-offset: -3px; }

.recipe.is-new > summary { background: var(--cream-new); }

/* Its own stacking layer, so the pot icon can tuck behind the count badge
   without dropping behind the row's background too. */
.recipe > summary { isolation: isolate; }

/* The count badge, pot icon and power pill all use the staircase's own
   outline width (--edge). The border sits outside the badge's size here, so
   the number keeps its room; --slot allows for it. */
.count {
  position: relative;
  flex: none;
  box-sizing: content-box;
  width: var(--badge);
  height: var(--badge);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: var(--edge) solid var(--accent); /* orange; brown in high contrast */
  font-size: calc(var(--badge) * .5);
  font-weight: 700;
  line-height: 1;
}

/* The game's pot icon with a +, on the count of a dish too big for the pot.
   A white circle with the same orange ring as the badge (brown in high
   contrast). */
.pot-mark {
  display: none;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--white);
  border: var(--edge) solid var(--accent);
}

.count.is-over .pot-mark {
  display: block;
  position: absolute;
  z-index: -1; /* behind the badge, peeking out from its top right */
  top: 0;
  right: 0;
  transform: translate(62%, -48%);
  width: max(22px, calc(var(--badge) * .62 + 2 * var(--edge)));
  height: max(22px, calc(var(--badge) * .62 + 2 * var(--edge)));
}

/* Pot sizes in the note, shown as small white pills like the count badges so
   they stand out from the outlined sentence around them. */
.pot-num {
  display: inline-block;
  padding: 0 .4em;
  border-radius: 999px;
  background: var(--white);
  border: var(--edge) solid var(--accent); /* orange; brown in high contrast */
  color: var(--ink);
  -webkit-text-stroke: 0;
  font-weight: 700;
  line-height: 1.15;
}

/* The same icon, inline in the note that explains it. */
.pot-mark.is-legend {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -.35em;
}

.ingredients {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ing {
  width: var(--slot);
  display: flex;
  align-items: center;
  gap: 0;
}

.ing img {
  width: var(--icon);
  height: var(--icon);
  object-fit: contain;
  flex: none;
}

.ing b {
  font-size: var(--qty);
  font-weight: 700;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.ing.is-match img {
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 2px var(--accent);
}

.equals {
  flex: none;
  width: var(--eq);
  text-align: center;
  color: var(--accent);
  font-size: calc(var(--qty) * 1.1);
  font-weight: 700;
}

.dish {
  flex: none;
  position: relative;
  width: var(--dish);
  height: var(--dish);
}

.dish img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.power {
  position: absolute;
  left: 50%;
  bottom: -4px; /* hangs a little below the image so it overlaps the bottom of the plate */
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--white);
  border: var(--edge) solid var(--accent); /* orange; brown in high contrast */
  font-size: clamp(12px, calc(var(--dish) * .25), 18px);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

/* NEW pill hanging off the bottom center of the count badge, the way the
   power pill hangs off the dish. */
.new-tag {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  transform: translate(-50%, 60%);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--accent); /* a touch lighter than the 3px outlines, to suit the small tag */
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Release view: the same pill, naming the dish's category instead. */
.cat-tag {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Release view ---------- */

/* Ingredient names are longer than category names: size the title so a
   10-letter word like "Greengrass" still fits a 320px phone. */
.title.is-release { font-size: clamp(40px, 14vw, 100px); }

/* No category is selected, so the sliding pill behind the tabs hides. */
.tabs.no-selection::before { opacity: 0; }

/* Like the release graphic: the ingredient in a big circle, with its shard
   sell price and base power in smaller circles overlapping its lower edges. */
.spotlight {
  --spot: min(52vw, 220px);
  --stat: calc(var(--spot) * .46);
  position: relative;
  display: grid;
  justify-items: center;
  padding-bottom: 4px;
}

.spot-icon,
.spot-stat {
  border-radius: 50%;
  background: var(--white);
  border: var(--edge) solid var(--accent); /* orange; brown in high contrast */
  box-shadow: 0 8px 14px rgba(120, 140, 60, .2);
}

.spot-icon {
  width: var(--spot);
  height: var(--spot);
  display: grid;
  place-items: center;
}

.spot-icon img {
  width: 64%;
  height: 64%;
  object-fit: contain;
}

.spot-stat {
  position: absolute;
  bottom: 4px;
  width: var(--stat);
  height: var(--stat);
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 6px;
  text-align: center;
  line-height: 1.05;
}

/* Overlapping the big circle's lower left and right edges. */
.spot-stat.is-sell { left: calc(50% - var(--spot) / 2 - var(--stat) * .45); }

.spot-stat.is-power { right: calc(50% - var(--spot) / 2 - var(--stat) * .45); }

.spot-stat strong {
  font-size: calc(var(--stat) * .36);
  font-weight: 700;
}

.spot-caption {
  font-size: clamp(9px, calc(var(--stat) * .11), 13px);
  font-weight: 700;
}

/* "Other new recipes", in the outlined style of the page's other headings. */
.section-heading {
  margin: 0;
  font-size: var(--subtitle-size);
  line-height: 1.15;
}

.recipe-section.is-empty .section-heading { display: none; }

/* Dish name and ingredients, opened by tapping a row. Spans the full width
   of whichever step the row is on. */
.details {
  position: relative;
  isolation: isolate; /* lets the pointer sit over our border but under the text */
  margin: 10px 0 8px; /* room above for the pointer */
  /* Fill the step's width without widening it: long ingredient lists wrap
     instead of pushing the step out of the staircase. */
  width: 0;
  min-width: 100%;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--white);
  border: var(--edge) solid var(--accent); /* orange; brown in high contrast */
  font-size: 15px;
  line-height: 1.4;
}

/* Pointer up at the dish: a square turned 45° with only its top and left
   borders, half poking above the popup. Its white lower half covers the
   popup's top border, so the outline runs around the pointer. Centered under
   the dish image (summary padding + half the dish, inside our border). */
.details::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc(4px + var(--dish) / 2 - var(--edge) - 7px);
  width: 14px;
  height: 14px;
  background: var(--white);
  border: solid var(--accent);
  border-width: var(--edge) 0 0 var(--edge);
  border-top-left-radius: 3px;
  transform: translateY(calc(-50% - var(--edge) / 2)) rotate(45deg);
}

.details strong { display: block; font-weight: 700; font-size: 17px; }

.details span { color: var(--ink-soft); }

/* "Needs N more ingredients than…", shown only for dishes with the pot icon. */
.details .details-pot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--ink);
  font-weight: 600;
}

.details .details-pot[hidden] { display: none; }

.details .details-pot span { color: inherit; }

.details-pot .pot-mark { flex: none; }

.empty {
  padding: 24px;
  font-size: 18px;
  font-weight: 600;
}

/* ---------- Footer ---------- */

.footer {
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}

.footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .title.pop { animation: none; }
  .step, .row { transition: none; }
  .picker-list { animation: none; }
  .picker-chevron { transition: none; }
  .tabs::before, .tab { transition: none; }
}