/* The Account area (SOUS-349): a sidebar card of grouped sections beside a
   white pane on a computer; below 768px the grouped list the app's Account
   tab shows, and a back link on every section page. Colours are the brand
   tokens from application.css (--primary sage, --info deep teal) plus the
   mobile theme's tints the cook view and shopping list already use. */

:root {
  --account-ink: #233a36;
  --account-muted: #6b7a76;
  --account-tint: #dde8e6;
  --account-line: #efeadc;
  --account-danger: #b3261e;
  --account-shadow: 0 2px 10px rgba(35, 58, 54, 0.08);
}

.account-shell {
  color: var(--account-ink);
}

@media (min-width: 768px) {
  .account-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .account-side {
    position: sticky;
    top: 16px;
  }
}

/* Sidebar */
.account-sidebar {
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--account-shadow);
}

.account-me {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  color: var(--account-ink);
  text-decoration: none;
}

.account-me-text {
  display: grid;
  min-width: 0;
}

.account-me-text strong {
  font-size: 14.5px;
}

.account-me-text small {
  font-size: 12.5px;
  color: var(--account-muted);
}

.account-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--account-muted);
  padding: 12px 10px 4px;
}

.account-link {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-size: 14px;
  text-align: left;
  color: var(--account-ink);
  text-decoration: none;
}

.account-link i {
  color: var(--info);
}

.account-me:hover,
.account-link:hover {
  background: #f3f6f5;
  color: var(--account-ink);
}

.account-me.is-active,
.account-link.is-active {
  background: var(--account-tint);
  font-weight: 600;
}

.account-link.is-danger,
.account-link.is-danger i {
  color: var(--account-danger);
}

.account-sidebar hr {
  margin: 8px 4px;
  border-top: 1px solid var(--account-line);
  opacity: 1;
}

/* The pane every section renders into */
.account-pane {
  max-width: 760px;
  padding: 26px 30px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--account-shadow);
}

@media (max-width: 767.98px) {
  .account-pane {
    padding: 20px 16px;
  }
}

/* Pages that moved here keep their Bootstrap column wrappers; inside the
   pane they take its whole width. */
.account-pane .row.justify-content-center > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}

.account-back {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--info);
  text-decoration: none;
}

.account-section-head {
  margin-bottom: 20px;
}

.account-title {
  margin: 0 0 4px;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--account-ink);
}

.account-lead {
  font-size: 13.5px;
  color: var(--account-muted);
}

.account-subhead {
  margin: 8px 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--account-muted);
}

.account-form .form-control {
  border-radius: 12px;
}

/* Bordered rows inside a section: share links, help, legal, notifications */
.account-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--account-line);
  border-radius: 12px;
  background: #fff;
}

.account-rows-item {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--account-line);
  color: var(--account-ink);
}

/* The text takes the row; on a phone the buttons drop beneath it. */
.account-rows-item > .flex-grow-1 {
  flex: 1 1 220px;
  max-width: 100%;
}

.account-rows-item:last-child {
  border-bottom: 0;
}

.account-rows-link {
  text-decoration: none;
}

.account-rows-link:hover {
  background: #f8f6f0;
  color: var(--account-ink);
}

.min-w-0 {
  min-width: 0;
}

/* /account on a phone: the grouped list */
.account-header-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(35, 58, 54, 0.06);
  color: var(--account-ink);
  text-decoration: none;
}

.account-header-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.account-header-text strong {
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
}

.account-header-text small {
  font-size: 12.5px;
  color: var(--account-muted);
}

.account-edit {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--info);
}

.account-list-label {
  margin: 0;
  padding: 18px 12px 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--account-muted);
}

.account-list {
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(35, 58, 54, 0.06);
}

.account-row {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 54px;
  padding: 12px 16px;
  border-bottom: 1px solid #f3efe4;
  color: var(--account-ink);
  text-decoration: none;
}

.account-row:last-child {
  border-bottom: 0;
}

.account-row-icon {
  color: var(--info);
}

.account-row-label {
  flex: 1;
}

.account-row .fa-chevron-right,
.account-header-card .fa-chevron-right {
  font-size: 12px;
  color: var(--account-muted);
}

.account-row.is-danger,
.account-row.is-danger .account-row-icon {
  color: var(--account-danger);
}

.account-signout {
  width: 100%;
  margin-top: 24px;
  border-radius: 999px;
}
/* The cook view (SOUS-261; docs/cook_view.md).
 *
 * Read from a counter: a laptop at arm's length or a phone propped against
 * the backsplash, in either orientation, at whatever text size the cook has
 * set. So: everything is sized in rem / clamp(), the view is one flex column
 * that fills the window (100dvh, so mobile browser bars don't cover the
 * buttons), and the ONLY thing that scrolls is the step. Previous / Next and
 * the timer tray are always on screen; the tray is capped at a third of the
 * window and scrolls inside itself.
 */

/* The cook view takes the whole window; the site chrome under it is removed
   rather than covered, so it is out of the tab order too. */
body:has(.cook-view) {
  overflow: hidden;
}

body:has(.cook-view) > header,
body:has(.cook-view) > footer {
  display: none;
}

.cook-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-light);
}

/* The step is the thing to read, and it follows the cook's text size all the
   way up. The chrome around it -- the bar, Previous / Next, the tray -- stops
   growing at 1.5x, or at large text sizes on a small phone it would leave no
   room for the step at all (mobile clamps its chrome the same way). Its
   buttons are sized in em off this, not in Bootstrap's rem. */
.cook-bar,
.cook-nav,
.cook-tray {
  font-size: min(1rem, 24px);
}

.cook-bar .btn,
.cook-nav .btn,
.cook-tray .btn {
  --bs-btn-font-size: 0.875em;
  --bs-btn-padding-x: 0.6em;
  --bs-btn-padding-y: 0.25em;
}

.cook-nav .btn {
  --bs-btn-font-size: 1.15em;
  --bs-btn-padding-y: 0.45em;
}

.cook-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25em 0.75em;
  padding: 0.5em 1em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cook-title {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  font-size: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cook-position {
  font-weight: 600;
  white-space: nowrap;
}

.cook-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: min(1rem, 4vw);
}

.cook-step-number {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.cook-step-text {
  margin: 0 0 1rem;
  /* Large, growing with the window and with the cook's text size, but never
     so large that a phone fits fewer than a dozen characters on a line. */
  font-size: min(clamp(1.5rem, 1rem + 2.5vw, 2.75rem), 11vw);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Without JavaScript every step shows, so they need telling apart. */
.cook-step + .cook-step {
  margin-top: 2rem;
}

.cook-step-after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* A chip sits inside the step's text, so it is sized off that text (em) and
   never wider than the line it is on. Each state has its own shape, not just
   its own colour (SOUS-317): idle is outlined with a play glyph, running
   fills with sage over steel as time passes, paused is hatched and says
   "paused", done is orange. */
.cook-chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  max-width: 100%;
  margin: 0 0.2em;
  padding: 0.2em 0.75em 0.2em 0.3em;
  border: 0;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--primary);
  color: var(--info);
  font-size: max(1rem, 0.65em);
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cook-step-after .cook-chip,
.cook-prep .cook-chip {
  font-size: 1rem;
  margin: 0;
  min-height: 44px;
}

.cook-chip:disabled {
  opacity: 0.6;
}

.cook-chip:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: 2px;
}

.cook-chip-fill {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s linear;
}

.cook-chip-glyph {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background-color: var(--timer-tint);
}

.cook-chip-glyph i {
  display: none;
  font-size: 0.55em;
}

.cook-chip .cook-glyph-play,
.cook-chip-running .cook-glyph-pause,
.cook-chip-done .cook-glyph-check {
  display: block;
}

.cook-chip-running .cook-glyph-play,
.cook-chip-done .cook-glyph-play {
  display: none;
}

.cook-chip-running {
  background-color: var(--info);
  box-shadow: none;
  color: #fff;
}

.cook-chip-running .cook-chip-fill {
  display: block;
}

.cook-chip-running .cook-chip-glyph {
  background-color: rgba(255, 255, 255, 0.22);
}

.cook-chip-paused {
  background: repeating-linear-gradient(135deg, var(--timer-tint) 0 6px, var(--timer-hatch) 6px 12px);
  box-shadow: none;
  color: var(--info);
}

.cook-chip-paused .cook-chip-glyph {
  background-color: #fff;
}

.cook-chip-done {
  background-color: var(--timer-orange);
  box-shadow: none;
  color: var(--timer-deep);
}

.cook-chip-done .cook-chip-glyph {
  background-color: rgba(255, 255, 255, 0.55);
}

/* "Before you start" (SOUS-342): a calm card, not a warning. A soft warm
   tint, the waits as quiet lines (task first, then length and step), and its
   actions on one row: Start as the one filled button, "Not now" as text. Clear
   of the step below it, whatever the text size. */
.cook-prep {
  margin: 0.5rem 0 1.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid color-mix(in srgb, var(--secondary) 28%, transparent);
  border-radius: 16px;
  background-color: color-mix(in srgb, var(--secondary) 12%, #fff);
  color: var(--timer-deep);
  overflow-wrap: anywhere;
}

.cook-prep-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.cook-prep-heading i {
  font-size: 0.875em;
  color: color-mix(in srgb, var(--secondary) 70%, var(--timer-deep));
}

.cook-prep-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cook-prep-wait {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.cook-prep-wait + .cook-prep-wait {
  margin-top: 0.5rem;
}

.cook-prep-text {
  flex: 1 1 12rem;
  min-width: 0;
}

.cook-prep-task {
  font-weight: 600;
}

.cook-prep-meta {
  color: var(--timer-muted);
}

.cook-prep-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
}

/* Idle, Start is the card's primary; once started it wears the chip states
   like the one in its step. */
.cook-prep-start {
  padding-right: 1rem;
}

.cook-prep-start:not(.cook-chip-running, .cook-chip-paused, .cook-chip-done) {
  background-color: var(--primary);
  box-shadow: none;
  color: #fff;
}

.cook-prep-start:not(.cook-chip-running, .cook-chip-paused, .cook-chip-done) .cook-chip-glyph {
  background-color: rgba(255, 255, 255, 0.22);
}

.cook-prep-dismiss {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--info);
  font-weight: 600;
}

.cook-prep-dismiss:hover:not(:disabled) {
  text-decoration: underline;
}

.cook-prep-dismiss:disabled {
  opacity: 0.6;
}

.cook-prep-dismiss:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: 2px;
}

.cook-limit {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  color: #6c757d;
}

.cook-nav {
  display: flex;
  gap: 0.75em;
  padding: 0.5em 1em;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* If a label cannot fit (huge text on a small phone) it is the WORD that is
   cut short, never the chevron. */
.cook-nav .btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  white-space: nowrap;
}

.cook-nav .btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The dock (SOUS-317): a white sheet along the bottom with the hero timer
   and the others as mini cards beside it (under it, on a phone), the minis
   scrolling sideways. Like the tray before it, at most a third of the window,
   scrolling inside itself -- which is why its ⋯ menu opens in place, in the
   row of actions, rather than floating where the scroll would clip it. */
.cook-tray {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  max-height: 33dvh;
  overflow-y: auto;
  padding: 0.75em 1em 0.25em;
  border-radius: 22px 22px 0 0;
  background-color: #fff;
  box-shadow: 0 -6px 18px rgba(35, 58, 54, 0.1);
}

.cook-tray [hidden] {
  display: none !important;
}

.cook-dock {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.cook-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75em;
  align-items: center;
}

.cook-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.75em;
  height: 4.75em;
}

.cook-ring svg,
.cook-mini-ring {
  transform: rotate(-90deg);
}

.cook-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cook-ring-track,
.cook-ring-progress {
  fill: none;
  stroke-width: 7;
}

.cook-mini-ring circle {
  stroke-width: 4;
}

.cook-ring-track {
  stroke: var(--timer-tint);
}

.cook-ring-progress {
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-dasharray: 100;
  transition: stroke-dashoffset 0.5s linear, stroke 0.4s;
}

.cook-timer-hot .cook-ring-progress {
  stroke: var(--timer-orange);
}

.cook-timer-paused .cook-ring-progress {
  stroke: var(--timer-muted);
}

/* A paused hero's ring is hatched inside, as its chip is. */
.cook-hero.cook-timer-paused .cook-ring::before {
  content: "";
  position: absolute;
  inset: 0.6em;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--bg-light) 0 6px, #eae4d4 6px 12px);
}

.cook-timer-remaining {
  position: relative;
  color: var(--timer-deep);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cook-hero .cook-timer-remaining {
  font-size: 1.05em;
}

.cook-hero-body {
  min-width: 0;
}

.cook-hero .cook-timer-name {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--timer-deep);
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cook-hero .cook-timer-name:hover {
  text-decoration: underline;
}

.cook-hero-sub {
  margin: 0.1em 0 0;
  color: var(--timer-muted);
  font-size: 0.8125em;
  overflow-wrap: anywhere;
}

.cook-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.5em;
}

.cook-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-width: 44px;
  min-height: 44px;
  padding: 0 1em;
  border: 0;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--timer-tint);
  color: var(--info);
  font-size: 0.875em;
  font-weight: 600;
}

.cook-pill-primary {
  background-color: var(--primary);
  box-shadow: none;
  color: #fff;
}

.cook-more {
  display: contents;
}

.cook-more-button {
  padding: 0;
  box-shadow: none;
  color: var(--timer-muted);
}

.cook-more-button[aria-expanded="true"] {
  background-color: var(--timer-tint);
  color: var(--timer-deep);
}

.cook-more-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  padding: 0.2em;
  border-radius: 999px;
  background-color: var(--bg-light);
}

.cook-more-menu button {
  min-height: 44px;
  padding: 0 1em;
  border: 0;
  border-radius: 999px;
  background-color: #fff;
  color: var(--timer-deep);
  font-size: 0.875em;
  font-weight: 600;
  white-space: nowrap;
}

.cook-more-menu button:hover {
  background-color: var(--timer-tint);
}

.cook-more-menu .cook-more-danger {
  color: var(--accent);
}

.cook-dock-minis {
  display: flex;
  gap: 0.5em;
  margin: 0;
  padding: 0 0 0.35em;
  overflow-x: auto;
  list-style: none;
}

.cook-mini {
  flex: 0 0 auto;
}

.cook-mini-button {
  display: flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  padding: 0.35em 0.75em 0.35em 0.4em;
  border: 0;
  border-radius: 14px;
  background-color: var(--bg-light);
  color: var(--timer-muted);
  font-size: 0.8125em;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.cook-mini-ring {
  flex: none;
  width: 2.15em;
  height: 2.15em;
}

.cook-mini .cook-timer-remaining {
  display: block;
  font-size: 1.15em;
}

.cook-mini.cook-timer-paused .cook-mini-button {
  background: repeating-linear-gradient(135deg, var(--bg-light) 0 6px, #eae4d4 6px 12px);
}

.cook-mini.cook-timer-paused .cook-timer-remaining {
  color: var(--timer-muted);
}

.cook-pill:focus-visible,
.cook-mini-button:focus-visible,
.cook-hero .cook-timer-name:focus-visible,
.cook-more-menu button:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: 2px;
}

/* A wide window has room for the minis beside the hero. */
@media (min-width: 768px) {
  .cook-dock {
    flex-direction: row;
    align-items: center;
    gap: 1.25em;
  }

  .cook-dock-hero {
    flex: 0 1 26em;
    min-width: 0;
  }

  .cook-dock-minis {
    flex: 1 1 0;
    min-width: 0;
  }
}

.cook-tray-notes {
  margin: 0.35em 0 0;
  font-size: 0.8125em;
  color: #6c757d;
}

/* The Done state covers everything, and scrolls if it must: its buttons can
   always be reached. A modal <dialog>: the browser's own box (inset, capped
   size, border, padding, colours) is undone here, and `display` is set only
   while it is open -- a closed dialog must stay display: none.
   Deep green with a pulsing orange ring (SOUS-317), so it reads from across
   the kitchen; the pulse holds still under reduced motion. */
.cook-done {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  overflow-y: auto;
  padding: 1rem;
  background-color: var(--timer-deep);
  color: #fff;
}

.cook-done[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cook-done [hidden] {
  display: none !important;
}

.cook-done-rows {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 40rem;
  text-align: center;
}

.cook-done-row + .cook-done-row {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.cook-done-burst {
  position: relative;
  display: grid;
  place-items: center;
  /* At its widest the pulse is 1.35x this; at large text on a narrow phone
     the window, not the rem, is the limit. */
  width: min(8.25rem, 60vw);
  height: min(8.25rem, 60vw);
  margin: 0 auto 0.75rem;
}

.cook-done-burst::before,
.cook-done-burst::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--timer-orange);
  border-radius: 50%;
  animation: cook-done-pulse 1.8s ease-out infinite;
}

.cook-done-burst::after {
  animation-delay: 0.9s;
}

.cook-done-word {
  display: grid;
  place-items: center;
  width: min(6rem, 44vw);
  height: min(6rem, 44vw);
  margin: 0;
  border-radius: 50%;
  background-color: var(--timer-orange);
  color: var(--timer-deep);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cook-done-row + .cook-done-row .cook-done-burst {
  width: 5rem;
  height: 5rem;
}

.cook-done-row + .cook-done-row .cook-done-word {
  width: 3.75rem;
  height: 3.75rem;
  font-size: 0.8rem;
}

.cook-done-name {
  margin: 0.25rem 0 0;
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cook-done-cue {
  max-width: 26rem;
  margin: 0.75rem auto 0;
  padding: 0.6rem 1rem;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.08);
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.5rem);
  overflow-wrap: anywhere;
}

.cook-done-cue small {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--timer-orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cook-done-note {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
}

.cook-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: min(100%, 26rem);
  margin: 1rem auto 0;
}

.cook-done-button {
  flex: 1 1 7rem;
  min-height: 48px;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 600;
}

.cook-done-next {
  flex-basis: 100%;
  background-color: var(--timer-orange);
  box-shadow: none;
  color: var(--timer-deep);
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cook-done-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.cook-done-nextup {
  margin: 1rem 0 auto;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

@keyframes cook-done-pulse {
  from { transform: scale(0.75); opacity: 0.9; }
  to { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cook-done-burst::before,
  .cook-done-burst::after {
    animation: none;
    opacity: 0.5;
  }

  .cook-chip-fill,
  .cook-ring-progress {
    transition: none;
  }
}

.cook-manual {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  border: 0;
  border-radius: var(--hp-radius);
  padding: 1.25rem;
}

.cook-manual::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.cook-manual-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cook-manual-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.cook-manual-custom legend {
  float: none;
  width: 100%;
  font-size: 1rem;
}

.cook-manual-custom label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.cook-manual-custom input {
  width: 5.5rem;
}

/* A phone on its side: the window is wide and very short. Give the step the
   height -- the title goes (it is the tab's title too), the chrome tightens. */
@media (max-height: 480px) {
  .cook-title {
    display: none;
  }

  .cook-bar,
  .cook-nav,
  .cook-tray {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }

  .cook-stage {
    padding: 0.5rem 1rem;
  }

  .cook-step-text {
    font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  }

  .cook-nav .btn {
    --bs-btn-padding-y: 0.2em;
  }
}

/* SOUS-294: a bounded reading area, with navigation alongside longer recipes. */
.cook-bar { width: 100%; max-width: 1120px; margin-inline: auto; padding: 1rem; gap: .75rem; }
.cook-title { flex: 1; order: initial; font-size: 1rem; }
.cook-position { font-size: .875rem; color: #62665e; }
.cook-workspace { display: flex; width: 100%; max-width: 1120px; margin-inline: auto; flex: 1; min-height: 0; }
.cook-reading { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cook-stage { max-width: 740px; padding: 2rem 2rem 1rem; }
.cook-details-status { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-bottom: .75rem; font-size: .875rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.cook-details-status:empty { display: none; }
.cook-details-status form { margin: 0; }
.cook-details-status .btn { max-width: 100%; white-space: normal; }
.cook-step-text { font-size: 1.6rem; line-height: 1.65; color: #252d26; }
.cook-step-title { font-size: clamp(1.65rem, 2.5vw, 2.15rem); line-height: 1.2; letter-spacing: -.025em; margin: 0 0 1.5rem; }
.cook-step-number { font-size: .8rem; letter-spacing: .04em; margin-bottom: .75rem; }
.cook-view-stepping .cook-step + .cook-step { margin-top: 0; }
.cook-nav { width: 100%; max-width: 740px; margin-inline: auto; padding: 1rem 2rem; border: 0; }
.cook-nav .btn { min-height: 48px; }
.cook-step-rail { flex: 0 0 240px; overflow-y: auto; padding: 1.5rem 1rem; border-right: 1px solid #dfe3db; }
.cook-rail-heading { display: flex; justify-content: space-between; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #62665e; }
.cook-step-list { list-style: none; padding: 0; margin: 0; }
.cook-step-list button { display: flex; align-items: baseline; gap: .65rem; width: 100%; padding: .75rem .5rem; text-align: left; border: 0; border-radius: .6rem; background: transparent; color: #4c574f; font-size: .9rem; line-height: 1.4; }
.cook-step-list button[aria-current="step"] { background: #e5ecdf; color: #24452d; font-weight: 650; }
.cook-step-list button:hover { background: #edf0e9; }
.cook-step-count { min-width: 1.3rem; font-variant-numeric: tabular-nums; opacity: .75; }
.cook-section-label { margin: 1rem .5rem .3rem; color: #69736c; font-size: .75rem; font-weight: 650; }
.cook-steps-toggle { display: none; }
/* SOUS-316 / SOUS-338: an ingredient mention stands out by a soft sage tint
   behind it and the steel-teal colour, never by weight alone -- with bold
   text forced everywhere a weight cue vanishes -- and without the bold +
   underline that made a step read like a page of links. Identical to
   mobile's: steel teal at 500, primary at 15%, 4px radius, 4px padding. */
.cook-ingredient-link { display: inline; padding: 0 4px; border: 0; border-radius: 4px; background: var(--mention-tint); color: var(--info); font: inherit; font-weight: 500; text-align: inherit; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cook-ingredient-link:hover { background: var(--mention-tint-strong); color: var(--rc-heading); }
.cook-ingredient-link:focus-visible, .cook-step-list button:focus-visible { outline: 3px solid #75966c; outline-offset: 3px; }
.cook-ingredient-link:focus-visible { outline-offset: 2px; }
.cook-step-ingredients { margin: 1.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid #dfe3db; }
.cook-step-ingredients-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #62665e; margin: 0 0 .5rem; }
.cook-step-ingredients .ingredient-line { --ingredient-amount-width: 8.5rem; padding: .3rem 0; font-size: 1rem; line-height: 1.45; }
.cook-sheet { width: min(500px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); border: 1px solid #dfe3db; border-radius: 1.2rem; padding: 1.5rem; overflow-y: auto; background: #fafbf7; color: #252d26; }
.cook-sheet::backdrop { background: #17231dcc; }
.cook-sheet-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.cook-sheet-bar h2 { font-size: 1.35rem; margin: 0; }
.cook-sheet-bar .btn { flex-shrink: 0; min-height: 44px; }
.cook-ingredient-list { list-style: none; padding: 0; margin: 0; }
.cook-ingredient-list li { padding: .8rem 1rem; background: #eef1e9; border-radius: .75rem; margin-bottom: .5rem; }
.cook-ingredient-list small { display: block; color: #647060; margin-top: .2rem; }
.cook-part-header { font-size: 1rem; margin: 1rem 0 .5rem; padding-bottom: .25rem; border-bottom: 2px solid var(--primary); display: flex; justify-content: space-between; gap: .5rem; scroll-margin-top: 1rem; }
.cook-part-header span, .cook-ingredient-reference span { font-size: .8rem; font-weight: 400; color: #647060; }
.cook-ingredient-list li.cook-ingredient-reference { background: transparent; border: 1px dashed #cfdcd9; }
.cook-ingredient-reference a { color: var(--info); text-decoration: none; }
.cook-quantity-sheet { max-width: 340px; }
.cook-quantity-value { margin: 1rem 0 .25rem; font-size: 1.6rem; }
.cook-scale-note { font-size: .875rem; color: #647060; }
.cook-tray { padding-inline: max(1rem, calc((100vw - 1056px) / 2)); }
.cook-limit { font-size: .8rem; line-height: 1.5; margin-top: 2rem; }
@media (max-width: 767px) {
  .cook-step-rail { display: none; }
  .cook-steps-toggle { display: inline-block; }
  .cook-bar { padding: .75rem 1rem; gap: .5rem; }
  .cook-title { flex: 1 1 100%; order: 5; margin-top: .25rem; }
  .cook-position { margin-left: auto; }
  .cook-stage { padding: 1.5rem 1.25rem 1rem; }
  .cook-step-text { font-size: 1.4rem; line-height: 1.6; }
  .cook-step-title { font-size: 1.8rem; margin-bottom: 1rem; }
  .cook-nav { padding: .75rem 1.25rem max(.75rem, env(safe-area-inset-bottom)); }
  .cook-chip { white-space: normal; }
  .cook-step-ingredients .ingredient-line { --ingredient-amount-width: 6.5rem; column-gap: .625rem; }
  .cook-step-ingredients .ingredient-line-amount { font-size: .875rem; }
}
@media (max-height: 480px) {
  .cook-stage { padding-top: .75rem; }
  .cook-step-text { font-size: 1.25rem; }
  .cook-nav { padding-block: .35rem; }
  .cook-bar { padding-block: .35rem; }
}
/* SOUS-317 in a short window (a phone on its side): the ring and the Done
   burst shrink so the step keeps the height. */
@media (max-height: 480px) {
  .cook-tray { padding-top: 0.4em; }
  .cook-ring { width: 3.5em; height: 3.5em; }
  .cook-hero .cook-timer-remaining { font-size: 0.875em; }
  .cook-hero-actions { margin-top: 0.25em; }
  .cook-done-burst { width: 4.5rem; height: 4.5rem; margin-bottom: 0.25rem; }
  .cook-done-word { width: 3.5rem; height: 3.5rem; font-size: 0.8rem; }
  .cook-done-cue { margin-top: 0.35rem; padding: 0.35rem 0.75rem; }
  .cook-done-actions { margin-top: 0.5rem; }
}
/* =========================================================================
   Homepage redesign prototype  (/homepage_options)
   Everything is namespaced under `.hp-body` / `.hp` so it can live in the
   sprockets require_tree bundle without leaking onto production pages.
   ========================================================================= */

.hp-body {
  margin: 0;
  background: #0e1311;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hp, .hp *, .hp *::before, .hp *::after { box-sizing: border-box; }

.hp {
  --hp-sage: #5c8d89;
  --hp-sage-deep: #2d5362;
  --hp-orange: #f4a259;
  --hp-cream: #f7f4ec;
  --hp-ink: #1f2724;
  --hp-gold: #d9bd7a;
  --hp-radius: 18px;
  --hp-switcher-h: 64px;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--hp-ink);
  line-height: 1.6;
}

.hp a { text-decoration: none; }
.hp img { display: block; max-width: 100%; }
.hp h1, .hp h2, .hp h3 { margin: 0; line-height: 1.08; }
.hp p { margin: 0; }
.hp section { scroll-margin-top: calc(var(--hp-switcher-h) + 12px); }

/* ----- Prototype ribbon -------------------------------------------------- */
.hp-ribbon {
  display: flex; gap: .6rem; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #2d5362, #5c8d89);
  color: #fff; font-size: .82rem; padding: .5rem 1rem; text-align: center;
}
.hp-ribbon .fa-flask { color: var(--hp-gold); }

/* ----- Sticky concept switcher ------------------------------------------ */
.hp-switcher {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 19, 17, .82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
}
.hp-switcher__inner {
  min-height: var(--hp-switcher-h);
  display: flex; align-items: center; gap: 1rem;
  max-width: 1240px; margin: 0 auto; padding: .55rem 1.1rem;
}
.hp-switcher__brand {
  display: flex; align-items: baseline; gap: .4rem; font-weight: 700;
  font-family: 'Montserrat', sans-serif; letter-spacing: -.3px; white-space: nowrap;
}
.hp-switcher__brand i { color: var(--hp-orange); }
.hp-switcher__brand em { font-style: normal; font-weight: 400; opacity: .55; font-size: .85rem; }

.hp-switcher__tabs {
  display: flex; gap: .4rem; margin: 0 auto; flex: 1 1 auto;
  justify-content: center; overflow-x: auto; scrollbar-width: none;
}
.hp-switcher__tabs::-webkit-scrollbar { display: none; }

.hp-tab {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: .4rem .9rem; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; background: transparent; color: #fff; cursor: pointer;
  white-space: nowrap; transition: background .25s, border-color .25s, transform .25s;
}
.hp-tab:hover { background: rgba(255, 255, 255, .08); }
.hp-tab__name { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: .92rem; }
.hp-tab__kind { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.hp-tab.is-active {
  background: linear-gradient(120deg, var(--hp-orange), #e8895f);
  border-color: transparent; color: #20140b;
}
.hp-tab.is-active .hp-tab__kind { opacity: .8; }

.hp-switcher__notes-toggle {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: .45rem .8rem; cursor: pointer; font-size: .82rem;
  transition: background .25s;
}
.hp-switcher__notes-toggle:hover { background: rgba(255, 255, 255, .08); }
.hp-switcher__notes-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.hp-switcher__notes-toggle i { color: var(--hp-gold); }

.hp-notes {
  max-width: 1240px; margin: 0 auto; padding: 0 1.1rem 1rem;
  color: rgba(255, 255, 255, .82);
}
.hp-notes__tagline { font-weight: 600; color: #fff; margin-bottom: .25rem; }
.hp-notes__rationale { font-size: .9rem; line-height: 1.55; }

/* ----- Concept stage ----------------------------------------------------- */
.hp-stage { background: var(--hp-cream); }
.hp-concept[hidden] { display: none; }

/* ----- Motion primitives (shared) --------------------------------------- */
.hp-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--hp-delay, 0s);
  will-change: opacity, transform;
}
.hp-reveal.is-revealed { opacity: 1; transform: none; }

/* Elements that are also parallax targets own `transform` via inline style on
   every scroll frame, so they must NOT transition transform (that would make
   parallax lag by .7s). They reveal with opacity only. */
.hp-reveal[data-hp-parallax] { transform: none; transition: opacity .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--hp-delay, 0s); }
.hp-reveal[data-hp-parallax].is-revealed { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hp [data-hp-parallax] { transform: none !important; }
  .dg-marquee__track { animation: none !important; }
  .hp * { scroll-behavior: auto !important; }
}

/* shared section width helper */
.rc-features, .rc-showcase, .rc-stats, .rc-cta,
.cs-trust, .cs-story, .cs-steps, .cs-stats, .cs-app, .cs-loved,
.dg-gallery, .dg-craft, .dg-features, .dg-final {
  padding-left: clamp(1.1rem, 5vw, 5rem);
  padding-right: clamp(1.1rem, 5vw, 5rem);
}

/* =========================================================================
   CONCEPT A — Refined Classic
   ========================================================================= */
.rc { background: var(--hp-cream); color: var(--hp-ink); }
.rc-h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -.02em; color: #233a36; }
.rc-h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: #233a36; }
.rc-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--hp-sage); margin-bottom: .8rem; }
.rc-lead { font-size: clamp(1rem, 1.5vw, 1.18rem); color: #4a5751; max-width: 42ch; }

.rc-nav {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 5vw, 5rem);
  max-width: 1240px; margin: 0 auto;
}
.rc-nav__brand { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.3rem; color: #233a36; }
.rc-nav__brand i { color: var(--hp-orange); }
.rc-nav__links { display: flex; gap: 1.4rem; margin-left: auto; }
.rc-nav__links a { color: #51605a; font-weight: 500; }
.rc-nav__links a:hover { color: var(--hp-sage); }
.rc-nav__actions { display: flex; align-items: center; gap: .9rem; }
.rc-link { color: #233a36; font-weight: 600; }

.rc-btn {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
  padding: .6rem 1.2rem; font-weight: 600; transition: transform .2s, box-shadow .2s, background .2s; cursor: pointer; border: 1.5px solid transparent;
}
.rc-btn--lg { padding: .85rem 1.6rem; font-size: 1.02rem; }
.rc-btn--solid { background: var(--hp-sage); color: #fff; box-shadow: 0 10px 24px -12px rgba(45, 83, 98, .8); }
.rc-btn--solid:hover { background: #4e7b77; transform: translateY(-2px); }
.rc-btn--ghost { background: transparent; color: #233a36; border-color: rgba(45, 83, 98, .35); }
.rc-btn--ghost:hover { border-color: var(--hp-sage); transform: translateY(-2px); }

.rc-hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; max-width: 1240px; margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.1rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem);
}
.rc-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0; }
.rc-hero__cta--center { justify-content: center; }
.rc-definition { font-size: .92rem; color: #6a766f; border-left: 3px solid var(--hp-orange); padding-left: .8rem; }
.rc-hero__art { position: relative; }
.rc-hero__img { width: 100%; border-radius: var(--hp-radius); box-shadow: 0 40px 80px -40px rgba(31, 39, 36, .7); }
.rc-hero__badge {
  position: absolute; bottom: 1rem; left: 1rem; background: #fff; color: #233a36;
  border-radius: 999px; padding: .5rem .9rem; font-weight: 600; font-size: .85rem;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .5);
}
.rc-hero__badge i { color: var(--hp-orange); }

.rc-features { max-width: 1240px; margin: 0 auto; padding-top: clamp(2rem, 5vw, 4rem); text-align: center; }
.rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; text-align: left; }
.rc-card { background: #fff; border-radius: var(--hp-radius); padding: 1.8rem; border: 1px solid #ece7dc; transition: transform .3s, box-shadow .3s; }
.rc-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(45, 83, 98, .45); }
.rc-card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(92, 141, 137, .12); color: var(--hp-sage); font-size: 1.3rem; margin-bottom: 1rem; }
.rc-card h3 { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; margin-bottom: .5rem; color: #233a36; }
.rc-card p { color: #5a665f; }

.rc-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 1240px; margin: 0 auto; padding-top: clamp(3rem, 6vw, 5rem); }
.rc-showcase__img { width: 100%; border-radius: var(--hp-radius); box-shadow: 0 40px 80px -45px rgba(31, 39, 36, .7); }
.rc-checks { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: .6rem; }
.rc-checks li { display: flex; align-items: center; gap: .6rem; font-weight: 500; color: #3c4742; }
.rc-checks i { color: var(--hp-sage); }

.rc-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 8vw, 5rem); max-width: 1240px; margin: clamp(3rem, 6vw, 5rem) auto 0; text-align: center; }
.rc-stats strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 2.4rem; color: var(--hp-sage); }
.rc-stats span { color: #6a766f; font-size: .9rem; }

.rc-cta { margin-top: clamp(3rem, 6vw, 5rem); }
.rc-cta__inner {
  max-width: 1240px; margin: 0 auto; text-align: center;
  background: linear-gradient(120deg, #5c8d89, #2d5362); color: #fff;
  border-radius: 28px; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
}
.rc-cta__inner .rc-h2, .rc-cta__inner .rc-lead { color: #fff; }
.rc-cta__inner .rc-lead { margin: .8rem auto 0; }
.rc-cta__inner .rc-btn--solid { background: #fff; color: #233a36; }
.rc-cta__inner .rc-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }

.rc-footer { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; max-width: 1240px; margin: 0 auto; padding: 2.5rem clamp(1.1rem, 5vw, 5rem); color: #6a766f; font-size: .9rem; }
.rc-footer i { color: var(--hp-orange); }

/* =========================================================================
   CONCEPT B — Culinary Studio (flagship)
   ========================================================================= */
.cs { background: #fbfaf6; color: #1f2724; }
.cs-h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(2.6rem, 7vw, 5.4rem); letter-spacing: -.02em; }
.cs-h1 span { color: var(--hp-orange); font-style: italic; }
.cs-h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.01em; color: #20302b; }
.cs-h2--center { text-align: center; max-width: 18ch; margin: 0 auto; }
.cs-eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; font-weight: 600; color: var(--hp-gold); }
.cs-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 700; color: var(--hp-sage); margin-bottom: .7rem; }
.cs-lead { font-size: clamp(1.05rem, 1.6vw, 1.32rem); color: #4a5751; max-width: 52ch; }
.cs-body { font-size: 1.06rem; color: #4a5751; margin-top: .8rem; max-width: 46ch; }

.cs-nav {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem clamp(1.1rem, 5vw, 5rem); color: #fff;
}
.cs-nav__brand { display: inline-flex; align-items: center; gap: .55rem; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.35rem; color: #fff; }
.cs-nav__mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hp-orange); color: #20140b; font-size: .9rem; }
.cs-nav__links { display: flex; gap: 1.5rem; margin-left: auto; }
.cs-nav__links a { color: rgba(255, 255, 255, .85); font-weight: 500; }
.cs-nav__links a:hover { color: #fff; }
.cs-nav__actions { display: flex; align-items: center; gap: 1rem; }
.cs-link { color: #fff; font-weight: 600; }

.cs-btn { display: inline-flex; align-items: center; gap: .55rem; border-radius: 999px; padding: .65rem 1.3rem; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; }
.cs-btn--lg { padding: .95rem 1.8rem; font-size: 1.05rem; }
.cs-btn--solid { background: var(--hp-orange); color: #20140b; box-shadow: 0 16px 34px -16px rgba(244, 162, 89, .9); }
.cs-btn--solid:hover { transform: translateY(-2px); background: #f7b06f; }
.cs-btn--glass { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .4); backdrop-filter: blur(6px); }
.cs-btn--glass:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.cs-btn--light { background: #fff; color: #20302b; }
.cs-btn--light:hover { transform: translateY(-2px); }

.cs-hero { position: relative; min-height: min(92vh, 820px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; }
.cs-hero__bg { position: absolute; inset: -12% 0; z-index: 0; }
.cs-hero__img { width: 100%; height: 100%; object-fit: cover; }
.cs-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 19, 17, .55) 0%, rgba(14, 19, 17, .35) 40%, rgba(14, 19, 17, .82) 100%); }
.cs-hero__inner { position: relative; z-index: 2; max-width: 1240px; width: 100%; margin: 0 auto; padding: 6rem clamp(1.1rem, 5vw, 5rem) 4rem; }
.cs-hero__inner .cs-lead { color: rgba(255, 255, 255, .9); margin-top: 1.2rem; }
.cs-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.cs-hero__cta--center { justify-content: center; }
.cs-hero__cue { position: absolute; z-index: 2; bottom: 1.6rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.cs-hero__cue span { width: 1px; height: 34px; background: rgba(255, 255, 255, .6); animation: cs-cue 1.8s ease-in-out infinite; }
@keyframes cs-cue { 0%, 100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

.cs-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem clamp(1.5rem, 5vw, 3.5rem); padding-top: 2.2rem; padding-bottom: 2.2rem; color: #51605a; font-weight: 600; border-bottom: 1px solid #eee6d8; }
.cs-trust .fa-star { color: var(--hp-gold); font-size: .8rem; }
.cs-trust div { display: inline-flex; align-items: center; gap: .5rem; }
.cs-trust .fa-bolt, .cs-trust .fa-leaf, .cs-trust .fa-ad { color: var(--hp-sage); }

.cs-story { max-width: 1240px; margin: 0 auto; padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(2rem, 5vw, 4rem); display: grid; gap: clamp(3rem, 7vw, 6rem); }
.cs-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.cs-row--reverse .cs-row__art { order: 2; }
.cs-row__img { width: 100%; border-radius: 22px; box-shadow: 0 50px 90px -50px rgba(31, 39, 36, .75); }
.cs-textlink { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; color: var(--hp-sage); font-weight: 700; }
.cs-textlink::after { content: "→"; transition: transform .2s; }
.cs-textlink:hover::after { transform: translateX(4px); }

.cs-steps { max-width: 1240px; margin: 0 auto; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.cs-steps__grid { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.cs-steps__grid li { background: #fff; border: 1px solid #eee6d8; border-radius: 20px; padding: 2rem; }
.cs-steps__grid span { font-family: 'Fraunces', serif; font-size: 1rem; color: var(--hp-orange); font-weight: 700; }
.cs-steps__grid h3 { font-family: 'Fraunces', serif; font-size: 1.5rem; margin: .4rem 0 .5rem; }
.cs-steps__grid p { color: #5a665f; }

.cs-stats { background: linear-gradient(120deg, #233a36, #2d5362); color: #fff; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 8vw, 5rem); padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.cs-stats strong { display: block; font-family: 'Fraunces', serif; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--hp-orange); }
.cs-stats span { opacity: .85; font-size: .92rem; }

.cs-app { max-width: 1240px; margin: 0 auto; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cs-app__list { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: .7rem; }
.cs-app__list li { display: flex; align-items: center; gap: .6rem; font-weight: 500; color: #3c4742; }
.cs-app__list i { color: var(--hp-sage); }
.cs-app__device { display: flex; justify-content: center; }
.cs-phone { width: min(330px, 78vw); aspect-ratio: 9 / 17; border-radius: 38px; padding: 12px; background: #1f2724; box-shadow: 0 50px 90px -40px rgba(31, 39, 36, .8); }
.cs-phone__img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; }

.cs-loved { max-width: 1240px; margin: 0 auto; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.cs-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.4rem; }
.cs-quotes figure { margin: 0; background: #fff; border: 1px solid #eee6d8; border-radius: 20px; padding: 1.8rem; }
.cs-quotes blockquote { margin: 0 0 1rem; font-family: 'Fraunces', serif; font-size: 1.2rem; line-height: 1.4; color: #20302b; }
.cs-quotes figcaption { color: var(--hp-sage); font-weight: 600; font-size: .9rem; }

.cs-final { background: linear-gradient(120deg, var(--hp-orange), #e8895f); color: #20140b; padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; text-align: center; }
.cs-final__inner { max-width: 760px; margin: 0 auto; }
.cs-final__h { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -.02em; }
.cs-final .cs-lead { color: #3a2614; margin: 1rem auto 0; }

.cs-footer { background: #1f2724; color: rgba(255, 255, 255, .75); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; padding: 2.4rem clamp(1.1rem, 5vw, 5rem); font-size: .9rem; }
.cs-footer .cs-nav__brand { color: #fff; }

/* =========================================================================
   CONCEPT C — Dark Gourmet (divergent)
   ========================================================================= */
.dg { background: #0e1311; color: #ece7da; }
.dg-h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(2.6rem, 6.5vw, 5rem); letter-spacing: -.01em; color: #fbf4e6; }
.dg-h1 em { color: var(--hp-gold); font-style: italic; }
.dg-h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(1.8rem, 4vw, 3rem); color: #fbf4e6; }
.dg-eyebrow { display: inline-flex; align-items: center; gap: .7rem; text-transform: uppercase; letter-spacing: .22em; font-size: .76rem; font-weight: 600; color: var(--hp-gold); }
.dg-eyebrow--center { justify-content: center; }
.dg-rule { width: 34px; height: 1px; background: var(--hp-gold); opacity: .6; }
.dg-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: #b9b3a4; max-width: 50ch; }
.dg-muted { color: #908a7c; }

.dg-nav { display: flex; align-items: center; gap: 1rem; padding: 1.4rem clamp(1.1rem, 5vw, 5rem); max-width: 1320px; margin: 0 auto; }
.dg-nav__brand { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.35rem; color: #fbf4e6; }
.dg-nav__brand i { color: var(--hp-gold); }
.dg-nav__links { display: flex; gap: 1.5rem; margin-left: auto; margin-right: 1.2rem; }
.dg-nav__links a { color: #b9b3a4; font-weight: 500; }
.dg-nav__links a:hover { color: var(--hp-gold); }

.dg-btn { display: inline-flex; align-items: center; gap: .55rem; border-radius: 999px; padding: .65rem 1.3rem; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s, background .2s, box-shadow .2s; }
.dg-btn--lg { padding: .95rem 1.8rem; font-size: 1.04rem; }
.dg-btn--gold { background: linear-gradient(120deg, #e7cf93, #cbaa63); color: #221b09; box-shadow: 0 16px 36px -16px rgba(217, 189, 122, .7); }
.dg-btn--gold:hover { transform: translateY(-2px); }
.dg-btn--outline { background: transparent; color: #ece7da; border-color: rgba(236, 231, 218, .3); }
.dg-btn--outline:hover { border-color: var(--hp-gold); color: var(--hp-gold); transform: translateY(-2px); }

.dg-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; max-width: 1320px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem); }
.dg-hero__art { overflow: hidden; border-radius: 24px; }
.dg-hero__img { width: 100%; border-radius: 24px; box-shadow: 0 60px 110px -50px rgba(0, 0, 0, .9); }
.dg-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.dg-hero__copy .dg-lead { margin-top: 1.2rem; }
.dg-hero__copy .dg-eyebrow { margin-bottom: 1rem; }

.dg-marquee { overflow: hidden; border-top: 1px solid rgba(217, 189, 122, .18); border-bottom: 1px solid rgba(217, 189, 122, .18); padding: .9rem 0; }
.dg-marquee__track { display: inline-flex; gap: 1.6rem; white-space: nowrap; font-family: 'Fraunces', serif; font-size: 1.5rem; color: #6f6957; animation: dg-marquee 22s linear infinite; }
.dg-marquee__track span { letter-spacing: .04em; }
.dg-dot { color: var(--hp-gold); }
@keyframes dg-marquee { to { transform: translateX(-50%); } }

.dg-gallery { max-width: 1320px; margin: 0 auto; padding-top: clamp(3rem, 6vw, 5rem); }
.dg-gallery__head { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.8rem; }
.dg-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 78vw); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.dg-rail__item { scroll-snap-align: start; margin: 0; }
.dg-rail__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; box-shadow: 0 40px 80px -45px rgba(0, 0, 0, .9); }
.dg-rail__item figcaption { margin-top: .8rem; color: #b9b3a4; font-family: 'Fraunces', serif; font-style: italic; }

.dg-craft { max-width: 1100px; margin: 0 auto; padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.dg-statement { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.3; color: #d9d3c4; }
.dg-statement em { color: var(--hp-gold); font-style: italic; }
.dg-statement span { color: #fbf4e6; }

.dg-features { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.dg-glass { background: rgba(255, 255, 255, .04); border: 1px solid rgba(217, 189, 122, .2); border-radius: 20px; padding: 2rem; backdrop-filter: blur(6px); }
.dg-glass i { font-size: 1.5rem; color: var(--hp-gold); }
.dg-glass h3 { font-family: 'Fraunces', serif; font-size: 1.5rem; margin: 1rem 0 .5rem; color: #fbf4e6; }
.dg-glass p { color: #b9b3a4; }

.dg-feature-image { position: relative; overflow: hidden; }
.dg-feature-image__img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.dg-feature-image__overlay { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, rgba(14, 19, 17, .35), rgba(14, 19, 17, .72)); padding: 1.5rem; }
.dg-feature-image__overlay p { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.4rem, 3.5vw, 2.6rem); color: #fbf4e6; max-width: 22ch; }

.dg-final { text-align: center; padding-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: clamp(4rem, 8vw, 6.5rem); }
.dg-final__h { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(2.2rem, 5.5vw, 4rem); color: #fbf4e6; margin: 1.2rem 0 2rem; }

.dg-footer { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; max-width: 1320px; margin: 0 auto; padding: 2.4rem clamp(1.1rem, 5vw, 5rem); color: #908a7c; font-size: .9rem; border-top: 1px solid rgba(217, 189, 122, .15); }
.dg-footer .dg-nav__brand { font-size: 1.1rem; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
  .hp-switcher__inner { flex-wrap: wrap; gap: .6rem; }
  .hp-switcher__brand { width: 100%; justify-content: center; }
  .hp-switcher__tabs { order: 3; width: 100%; justify-content: flex-start; }
  .hp-tab__kind { display: none; }
  .hp-switcher__notes-toggle { margin-left: auto; }

  .rc-nav__links, .cs-nav__links, .dg-nav__links { display: none; }

  .rc-hero, .rc-showcase, .cs-row, .cs-row--reverse, .cs-app, .dg-hero {
    grid-template-columns: 1fr;
  }
  .rc-showcase .rc-showcase__art { order: 2; }
  .cs-row--reverse .cs-row__art { order: 0; }
  .dg-hero { direction: ltr; }
  .dg-hero__art { order: 2; }

  .rc-grid, .cs-steps__grid, .cs-quotes, .dg-features { grid-template-columns: 1fr; }
  .cs-hero { min-height: 78vh; }
  .cs-hero__inner { padding-top: 7rem; }
}

@media (max-width: 520px) {
  .rc-hero__cta .rc-btn, .cs-hero__cta .cs-btn, .dg-hero__cta .dg-btn { width: 100%; justify-content: center; }
  .rc-stats { gap: 1.5rem 2.5rem; }
}
/* The site chrome (SOUS-351). A computer gets the header: brand and the
   main places on the left (an orange underline on the current one), Add
   recipe and the photo menu on the right; 768-1023px is the compact form,
   icons over smaller labels, and it never collapses into a menu. Below
   768px a signed-in page (body.has-app-chrome) wears the app's chrome: a
   teal title bar, bottom tabs with a sage pill on the current one, and on
   Recipes a floating Add recipe button. Colours are the brand tokens in
   application.css (--info deep teal, --primary sage, --secondary orange). */

:root {
  --chrome-bg: var(--info);
  --chrome-ink: #fff;
  --chrome-ink-muted: rgba(255, 255, 255, 0.78);
  --chrome-menu-ink: #233a36;
  --chrome-menu-muted: #6b7a76;
  --chrome-menu-hover: #f3efe4;
  --chrome-tabbar-height: 70px;
  /* The phone title bar is exactly this tall (plus the top safe area), so
     anything else that sticks to the top can sit just under it. */
  --chrome-titlebar-height: 56px;
  --chrome-titlebar-bottom: calc(var(--chrome-titlebar-height) + env(safe-area-inset-top));
  /* The env(safe-area-inset-*) terms here are 0 today: the layout keeps
     the default viewport (no viewport-fit=cover), so Safari insets every
     page itself, cook mode and the computer header included. */
  --chrome-shadow: 0 14px 40px rgba(20, 40, 38, 0.22);
}

/* Header (computers, and every width when signed out) */
.site-header {
  background: var(--chrome-bg);
  color: var(--chrome-ink);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 1320px;
  min-height: 62px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.5px;
  white-space: nowrap;
  color: var(--chrome-ink);
}

.site-brand:hover,
.site-brand:focus {
  color: var(--chrome-ink);
}

.site-places {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Never squeezed: a header too full to fit overflows (which the layout
     spec catches) rather than drawing one label over another. */
  flex-shrink: 0;
}

.site-places > li {
  display: flex;
}

.site-place {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 0;
  background: none;
  font-size: 15px;
  white-space: nowrap;
  color: var(--chrome-ink-muted);
}

.site-place:hover,
.site-place:focus-visible,
.site-place.is-active {
  color: var(--chrome-ink);
}

.site-place.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--secondary);
}

.site-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.site-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 8px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--chrome-menu-ink);
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
}

.site-add:hover,
.site-add:focus-visible {
  background: #f6b273;
}

.site-avatar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--chrome-ink);
  font-size: 12px;
}

.site-avatar .avatar-placeholder {
  background: var(--primary);
  color: #fff;
}

.site-signin {
  white-space: nowrap;
}

/* The header's menus */
.site-menu {
  min-width: 250px;
  padding: 6px;
  border: 0;
  border-radius: 12px;
  box-shadow: var(--chrome-shadow);
  color: var(--chrome-menu-ink);
}

.site-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--chrome-menu-ink);
}

.site-menu .dropdown-item i {
  color: var(--info);
}

.site-menu .dropdown-item:hover,
.site-menu .dropdown-item:focus {
  background: var(--chrome-menu-hover);
  color: var(--chrome-menu-ink);
}

.site-menu .dropdown-divider {
  margin: 6px 4px;
  border-top-color: #efeadc;
  opacity: 1;
}

.site-menu-who {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 280px;
  padding: 10px 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid #efeadc;
}

.site-menu-who > span {
  display: grid;
  min-width: 0;
}

.site-menu-who small {
  color: var(--chrome-menu-muted);
}

/* The import modal's header is the brand sage; its title reads in white. */
.import-recipe-modal .modal-title {
  color: #fff;
}

/* An Add recipe option: a label with an optional line under it. */
.add-recipe-option small {
  display: block;
  font-size: 12.5px;
  color: var(--chrome-menu-muted);
}

/* 1024-1199px: full labels, packed closer, and Admin (admins only) as
   its icon, so even every place plus Admin fits. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .site-header-inner {
    padding: 0 16px;
  }

  .site-brand {
    margin-right: 8px;
  }

  .site-place {
    gap: 6px;
    padding: 8px 9px;
    font-size: 14.5px;
  }

  .site-place.is-active::after {
    left: 9px;
    right: 9px;
  }

  .site-admin .site-place-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* 768-1023px: the same items made smaller, icon over label. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-header-inner {
    padding: 0 12px;
  }

  .site-brand {
    margin-right: 6px;
    font-size: 1.1rem;
  }

  .site-brand-text {
    display: none;
  }

  .site-place {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    font-size: 11.5px;
  }

  .site-place i {
    font-size: 16px;
  }

  .site-place.is-active::after {
    left: 8px;
    right: 8px;
  }

  .site-add {
    padding: 7px 12px 7px 10px;
    font-size: 13px;
  }
}

/* The slimmer computer footer */
.site-footer .footer-links a {
  white-space: nowrap;
}

/* Below 768px, signed in: the app's chrome. */
.app-titlebar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  height: var(--chrome-titlebar-bottom);
  padding: env(safe-area-inset-top) 16px 0;
  background: var(--chrome-bg);
  color: var(--chrome-ink);
}

.app-titlebar-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
}

.app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  height: calc(var(--chrome-tabbar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--chrome-bg);
}

.app-tab {
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--chrome-ink-muted);
}

.app-tab:hover,
.app-tab:focus-visible,
.app-tab.is-active {
  color: var(--chrome-ink);
}

.app-tab-pill {
  display: grid;
  place-items: center;
  width: 58px;
  height: 30px;
  border-radius: 999px;
  font-size: 18px;
}

.app-tab.is-active .app-tab-pill {
  background: var(--primary);
}

.app-tab-pill .avatar-placeholder {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.8);
}

.app-tab-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--chrome-tabbar-height) + env(safe-area-inset-bottom) + 16px);
  z-index: 1025;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 14px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(35, 58, 54, 0.3);
}

.app-sheet.offcanvas-bottom {
  height: auto;
  padding: 10px 0 calc(18px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--bg-light);
}

.app-sheet-grab {
  width: 36px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 4px;
  background: #b9b3a4;
}

.app-sheet-title {
  padding: 0 20px 8px;
  font-size: 18px;
}

.app-sheet-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-sheet-list .dropdown-divider {
  margin: 0;
  border-top: 1px solid #efeadc;
}

.app-sheet-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 10px 20px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 15px;
  color: var(--chrome-menu-ink);
}

.app-sheet-item i {
  font-size: 18px;
  color: var(--info);
}

.app-sheet-item:hover,
.app-sheet-item:focus-visible {
  background: var(--chrome-menu-hover);
  color: var(--chrome-menu-ink);
}

@media (max-width: 767.98px) {
  /* The title bar sticks to the top of body, so body must grow with the
     page: application.css fixes it at height: 100% for the computer's
     sticky footer, and the bar would scroll away with it after one screen.
     There is no footer here to keep at the bottom. */
  body.has-app-chrome {
    height: auto;
    min-height: 100%;
  }

  /* Room under the page for the tab bar, and on Recipes for the button
     floating above it. On main, not body: body is a fixed-height flex
     column (the sticky footer), so its own padding sits at the bottom of
     the window rather than under the content. */
  body.has-app-chrome > main {
    padding-bottom: calc(var(--chrome-tabbar-height) + env(safe-area-inset-bottom) + 1.5rem);
  }

  body.has-app-chrome.has-fab > main {
    padding-bottom: calc(var(--chrome-tabbar-height) + env(safe-area-inset-bottom) + 88px);
  }

  /* Every other fixed overlay keeps clear of the chrome, with the same
     spacing the floating Add recipe button uses: the shopping list's undo
     toast and the meal plan's shopping banner (shopping_list.css, bottom:
     24px) sit above the tab bar, and the "someone else changed the list"
     pill (top: 16px) below the title bar. :has(), so a page without the
     tab bar (the cook view) keeps the overlays' own placement. */
  body:has(.app-tabbar) .sl-toast,
  body:has(.app-tabbar) .sl-banner {
    bottom: calc(var(--chrome-tabbar-height) + env(safe-area-inset-bottom) + 16px);
  }

  body:has(.app-titlebar) .sl-pill {
    top: calc(var(--chrome-titlebar-bottom) + 8px);
  }

  /* Sticky things stick under the sticky title bar, not behind it: the
     shopping list's aisle and recipe headings and its Checked toggle
     (.sl-section-head, shopping_list.css, top: 0). */
  body:has(.app-titlebar) .sl-section-head {
    top: var(--chrome-titlebar-bottom);
  }

  /* An in-page anchor jump lands under the bar too: the recipe page's
     ingredient part headings (recipe_parts.css, scroll-margin-top: 1rem).
     The cook view's part headings have no title bar above them. */
  body:has(.app-titlebar) .ingredient-part-header {
    scroll-margin-top: calc(var(--chrome-titlebar-bottom) + 1rem);
  }

  /* The title bar carries the page's title, so the page's own h1 is not
     shown twice. The cook view is a full-window screen with its own bar,
     and the welcome page's h1 is its pitch, not a title. */
  body.has-app-chrome main h1:not(.cook-title):not(.rc-h1) {
    display: none;
  }

  body.has-app-chrome main {
    margin-top: 1rem !important;
  }

  .site-header-inner {
    padding: 0 16px;
  }

  /* The import modal as a bottom sheet. */
  .import-recipe-modal .modal-header {
    border-radius: 24px 24px 0 0;
  }

  .import-recipe-modal .modal-dialog {
    display: flex;
    align-items: flex-end;
    min-height: 100%;
    margin: 0;
  }

  .import-recipe-modal .modal-content {
    border: 0;
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
/* The recipe page's reading layout (SOUS-338): ingredients as two columns
   (amount + unit, then the name) and numbered steps with the number in its
   own gutter. The ingredient columns are shared with the cook view's
   "Ingredients for this step". */
:root {
  --ingredient-amount-width: 7.5rem;
  --mention-tint: rgb(92 141 137 / 0.15);        /* --primary at 15% */
  --mention-tint-strong: rgb(92 141 137 / 0.28);
}

/* The list is the container its rows measure: the stacking rule below is
   in em, so it follows the text size as well as the width. */
.ingredient-lines {
  container-type: inline-size;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Amount right-aligned in a column so the names line up; a long name wraps
   under itself, never under the amount. The column gives way (40% at
   most) before it can squeeze the name. */
.ingredient-line {
  align-items: baseline;
  column-gap: 0.875rem;
  display: grid;
  grid-template-columns: min(var(--ingredient-amount-width), 40%) minmax(0, 1fr) auto;
}

.ingredient-line-amount {
  color: var(--rc-heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  text-align: right;
}

/* Too narrow for two columns (a small phone at 200% text): the amount sits
   above its name, both full width. Two triggers: 17em follows text that
   scales (the cook view), 16rem follows the root size the amount column is
   measured in -- the recipe page's own text is px, so at 200% only the rem
   condition moves (512px, far past a 320px phone's list), while a 390px
   phone at 100% (a ~330px list) keeps both columns. */
@container (max-width: 17em) or (max-width: 16rem) {
  .ingredient-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ingredient-line-amount {
    grid-column: 1;
    text-align: left;
  }

  .ingredient-line-amount:empty {
    display: none;
  }

  .ingredient-line-name {
    grid-column: 1;
  }

  .ingredient-line > .badge {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.ingredient-line-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ingredient-line-note,
.ingredient-line-notice {
  color: var(--bs-secondary-color);
  font-weight: 400;
}

.ingredient-line-notice {
  display: block;
}

.recipe-ingredients .ingredient-line {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.recipe-ingredients .ingredient-line-name strong {
  font-weight: 600;
}

/* Steps: the number in a small round badge in its own gutter, the text in
   its own column, light separators rather than a box per row. */
.recipe-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recipe-step {
  column-gap: 1rem;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  padding: 1rem 0;
}

.recipe-step + .recipe-step {
  border-top: 1px solid var(--bs-border-color-translucent);
}

.recipe-step:first-child {
  padding-top: 0.25rem;
}

.recipe-step:last-child {
  padding-bottom: 0.25rem;
}

.recipe-step-number {
  align-items: center;
  background: var(--timer-tint);
  border-radius: 50%;
  color: var(--rc-heading);
  display: inline-flex;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.recipe-step-part {
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
}

.recipe-step-text {
  line-height: 1.75;
  margin: 0;
  overflow-wrap: anywhere;
}

.recipe-source-credit a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.recipe-source-credit a:hover,
.recipe-source-credit a:focus {
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  :root {
    --ingredient-amount-width: 6.25rem;
  }

  .ingredient-line {
    column-gap: 0.625rem;
  }

  .ingredient-line-amount {
    font-size: 0.875rem;
  }

  .recipe-step {
    column-gap: 0.75rem;
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }

  .recipe-step-number {
    font-size: 0.8rem;
    height: 1.75rem;
    width: 1.75rem;
  }
}
/* Recipe parts (SOUS-93): the ingredient list's part chips, part headers
   and "from above" reference rows on the recipe page. */
.ingredient-part-chip {
  background: var(--timer-tint);
  border-radius: 999px;
  color: var(--rc-heading);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
}

.ingredient-part-chip:hover,
.ingredient-part-chip:focus {
  background: var(--timer-hatch);
  color: var(--rc-heading);
}

.ingredient-part-header {
  align-items: baseline;
  border-bottom: 2px solid var(--primary);
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0.25rem 0;
  scroll-margin-top: 1rem;
}

.ingredient-part-header:first-of-type {
  margin-top: 0;
}

.ingredient-reference a {
  color: var(--info);
  text-decoration: none;
}

.ingredient-reference a:hover,
.ingredient-reference a:focus {
  text-decoration: underline;
}
/* Shopping list v2 (SOUS-305): quiet rows, store-walk sections, a checked
   group at the bottom, one undo toast. Brand palette from the mobile theme
   (sage, deep green, steel teal, cream); member colours come in as
   --member / --flash from the markup. */

:root {
  --sl-ink: #233a36;
  --sl-muted: #6b7a76;
  --sl-faint: #8a9692;
  --sl-sage: #5c8d89;
  --sl-sage-tint: #dde8e6;
  --sl-line: rgba(35, 58, 54, 0.08);
  --sl-radius: 12px;
}

.sl-page {
  color: var(--sl-ink);
  font-family: "Poppins", system-ui, sans-serif;
}

.sl-page h1,
.sl-page h2,
.sl-page h3,
.sl-fragment h1 {
  font-family: "Montserrat", system-ui, sans-serif;
}

.sl-title {
  font-weight: 700;
}

/* Round icon buttons (the "…" menus, ×). */
.sl-icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--sl-muted);
  border: 0;
  background: transparent;
}

.sl-icon-btn:hover {
  background: var(--sl-sage-tint);
  color: var(--sl-ink);
}

.sl-menu .sl-icon-btn {
  background: #fff;
  box-shadow: 0 1px 2px rgba(35, 58, 54, 0.12);
}

/* Aisle | Recipe */
.sl-segment {
  background: #ece7dc;
  border-radius: 999px;
  padding: 3px;
}

.sl-segment .btn {
  border: 0;
  border-radius: 999px !important;
  padding: 0.25rem 1.1rem;
  color: var(--sl-muted);
  font-weight: 500;
}

.sl-segment .btn.active {
  background: #fff;
  color: var(--sl-ink);
  box-shadow: 0 1px 3px rgba(35, 58, 54, 0.15);
}

/* Store chips */
.sl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--sl-line);
  color: var(--sl-ink);
  font-size: 0.875rem;
  text-decoration: none;
}

.sl-chip.active {
  background: var(--sl-sage);
  border-color: var(--sl-sage);
  color: #fff;
}

.sl-chip-count {
  font-size: 0.75rem;
  opacity: 0.75;
}

/* Add bar */
.sl-add-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1.5px solid var(--sl-sage);
  border-radius: var(--sl-radius);
  padding: 0.35rem 0.4rem 0.35rem 0.9rem;
  color: var(--sl-sage);
}

.sl-add-bar:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(92, 141, 137, 0.25);
}

.sl-add-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sl-ink);
  padding: 0.3rem 0;
}

/* Sections */
.sl-group {
  margin-bottom: 1.1rem;
}

.sl-section-head {
  min-height: 1.9rem;
  margin-bottom: 0.3rem;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-light, #f7f4ec);
}

.sl-section-head h2,
.sl-checked summary {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sl-muted);
  font-family: "Poppins", system-ui, sans-serif;
}

.sl-count {
  font-weight: 500;
}

.sl-group-action {
  font-size: 0.8rem;
  color: var(--sl-muted);
  text-decoration: none;
  padding: 0 0.25rem;
}

.sl-unplanned h2 {
  font-style: italic;
}

/* Rows */
.sl-rows {
  margin: 0;
  background: #fff;
  border-radius: var(--sl-radius);
  box-shadow: 0 1px 2px rgba(35, 58, 54, 0.06);
}

.sl-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.4rem 0.45rem 0.85rem;
  border-bottom: 1px solid var(--sl-line);
  transition: background-color 0.15s ease;
}

.sl-row:last-child {
  border-bottom: 0;
}

.sl-row:hover {
  background: #fbfaf6;
}

.sl-check {
  display: flex;
  align-items: center;
  margin: 0;
}

.sl-checkbox {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  border-radius: 50% !important;
  border: 1.5px solid #b9b3a4;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.sl-checkbox:checked {
  background-color: var(--sl-sage);
  border-color: var(--sl-sage);
}

.sl-checkbox:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(92, 141, 137, 0.35);
}

.sl-row-main {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  padding: 0.1rem 0;
  border-radius: 6px;
}

.sl-row-main:hover {
  color: inherit;
}

.sl-row-main:focus-visible {
  outline: 2px solid var(--sl-sage);
  outline-offset: 2px;
}

.sl-name strong {
  font-weight: 500;
}

.sl-sub {
  font-size: 0.78rem;
  color: var(--sl-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-unplanned-note {
  color: #a39d8f;
}

.sl-qty {
  color: var(--sl-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-row-menu .sl-icon-btn {
  width: 28px;
  height: 28px;
}

.sl-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--member);
  margin-right: 0.35rem;
  vertical-align: 0.15em;
}

.sl-sorting {
  font-size: 0.7rem;
  color: var(--sl-muted);
  background: linear-gradient(90deg, #ece7dc 0%, #f7f4ec 50%, #ece7dc 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.3rem;
  animation: sl-shimmer 1.2s linear infinite;
}

.sl-row.checked .sl-name,
.sl-row.checked .sl-qty {
  text-decoration: line-through;
  color: #9aa39f;
  transition: color 0.15s ease;
}

.sl-row.sl-flash {
  animation: sl-flash 1.5s ease-out both;
}

/* Checked (n) */
.sl-checked-wrap {
  position: relative;
  margin-top: 1.4rem;
}

.sl-checked summary {
  list-style: none;
  cursor: pointer;
  padding-right: 4rem;
}

.sl-checked summary::-webkit-details-marker {
  display: none;
}

.sl-chevron {
  transition: transform 0.15s ease;
}

.sl-checked[open] .sl-chevron {
  transform: rotate(90deg);
}

.sl-clear-checked-form {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}

.sl-clear-checked {
  font-size: 0.8rem;
  color: var(--sl-sage);
  text-decoration: none;
  padding-top: 0.15rem;
}

.sl-empty {
  background: #fff;
  border-radius: var(--sl-radius);
  padding: 2rem 1rem;
}

.sl-card {
  border: 0;
  border-radius: var(--sl-radius);
  box-shadow: 0 1px 2px rgba(35, 58, 54, 0.06);
}

.sl-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7a76;
}

.sl-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: var(--member);
}

.sl-panel {
  --bs-offcanvas-width: 380px;
}

.sl-panel .offcanvas-title,
.sl-dialog .modal-title {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
}

.sl-dialog .modal-content {
  border-radius: 16px;
}

/* The toast: one at a time, bottom centre, deep green pill. */
.sl-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1090;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 32px);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: #233a36;
  color: #fff;
  box-shadow: 0 10px 30px rgba(20, 30, 28, 0.3);
  overflow: hidden;
  font-size: 0.92rem;
}

.sl-toast[hidden] {
  display: none;
}

.sl-toast-error {
  background: #8a2f22;
}

.sl-toast-undo {
  border: 0;
  background: transparent;
  color: #f4a259;
  font-weight: 600;
  padding: 0;
}

.sl-toast-undo:focus-visible {
  outline: 2px solid #f4a259;
  outline-offset: 3px;
}

.sl-toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: rgba(244, 162, 89, 0.8);
  transform-origin: left;
}

.sl-toast-live .sl-toast-progress {
  animation: sl-progress 6s linear forwards;
}

/* Someone else's change, named for a moment. */
.sl-pill {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  max-width: calc(100vw - 32px);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #233a36;
  font-size: 0.85rem;
  box-shadow: 0 6px 20px rgba(20, 30, 28, 0.18);
}

.sl-pill[hidden] {
  display: none;
}

/* The selective add sheet */
.sl-add-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(35, 58, 54, 0.08);
}

.sl-add-line:last-child {
  border-bottom: 0;
}

.sl-add-line label {
  flex: 1;
  margin: 0;
}

.sl-tag {
  font-size: 0.72rem;
  background: #ece7dc;
  color: #6b7a76;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}

.sl-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sl-stepper output {
  min-width: 2ch;
  text-align: center;
  font-weight: 600;
}

/* Recipe page "On your list" row; meal plan banner */
.sl-on-list {
  font-size: 0.85rem;
}

.sl-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1085;
  width: min(480px, calc(100vw - 32px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(20, 30, 28, 0.28);
  padding: 1rem 1.1rem;
}

@keyframes sl-flash {
  0% { background-color: color-mix(in srgb, var(--flash, #e08a3c) 28%, #fff); }
  100% { background-color: #fff; }
}

@keyframes sl-shimmer {
  to { background-position: -200% 0; }
}

@keyframes sl-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 575.98px) {
  .sl-row {
    padding-left: 0.6rem;
  }

  .sl-qty {
    max-width: 30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-row,
  .sl-checkbox,
  .sl-chevron,
  .sl-row.checked .sl-name {
    transition: none;
  }

  .sl-row.sl-flash,
  .sl-sorting,
  .sl-toast-live .sl-toast-progress {
    animation: none;
  }
}

/* The detail panel saves as you go; its Save button is the no-JS path. */
.sl-panel .sl-detail-save {
  display: none;
}

.sl-panel .offcanvas-body,
.sl-dialog .modal-body {
  font-size: 0.92rem;
}

.sl-panel .form-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.sl-sources .fw-medium {
  white-space: nowrap;
}

.sl-title .badge {
  font-size: 0.75rem;
  font-weight: 500;
  vertical-align: middle;
}

/* Brand text buttons and badges for v2 screens -- no Bootstrap blue or
   underlined links (the prototype's txt-btn). */
.sl-txt-btn {
  color: var(--sl-sage);
  font-weight: 500;
  text-decoration: none;
  border: 0;
  background: transparent;
}

.sl-txt-btn:hover,
.sl-txt-btn:focus-visible {
  color: var(--sl-ink);
  text-decoration: none;
}

.sl-txt-btn:focus-visible {
  outline: 2px solid var(--sl-sage);
  outline-offset: 2px;
}

.sl-txt-btn.sl-txt-danger {
  color: #c0392b;
}

.sl-txt-btn.sl-txt-danger:hover {
  color: #8a2f22;
}

.sl-pill-outline {
  border: 1px solid var(--sl-sage);
  color: var(--sl-sage);
  background: #fff;
}

.sl-pill-outline:hover {
  background: var(--sl-sage);
  color: #fff;
}

.sl-accent {
  color: var(--sl-sage);
}

.badge.sl-badge {
  background: var(--sl-sage-tint);
  color: var(--sl-ink);
  font-weight: 500;
}

.badge.sl-badge-quiet {
  background: #ece7dc;
}

.sl-fragment a:not(.btn),
.sl-panel a:not(.btn),
.sl-dialog a:not(.btn),
.sl-card a:not(.btn) {
  color: #2d5362;
}

/* The list's "…" menu is a <details> (works without JS). */
.sl-menu {
  position: relative;
}

.sl-menu > summary {
  list-style: none;
}

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

.sl-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 1000;
}

/* A recipe part's header in the add sheet (SOUS-93) */
.sl-part-header {
  border-bottom: 2px solid var(--primary);
  font-weight: 600;
  margin-top: 0.4rem;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Sticky footer styles */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
  background-color: #fcfcfc;
}

footer a.text-muted {
  color: #9aa0a6 !important;
  font-weight: 300;
  transition: color 0.2s ease;
}

footer a.text-muted:hover {
  color: #747a80 !important;
  text-decoration: none;
}

footer .text-muted {
  color: #9aa0a6 !important;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

/* Authentication pages styling */
.auth-links {
  margin-top: 1rem;
}

.auth-links a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s;
}

.auth-links a:hover {
  color: var(--secondary);
  text-decoration: underline;
}

/* "or" divider between the password form and social sign-in buttons */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #9aa0a6;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ece7dc;
}

.auth-divider span {
  padding: 0 1rem;
}

/* Google/Apple sign-in buttons */
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 600;
}

.btn-social--google {
  background-color: #fff;
  color: #343a40;
}

.btn-social--google:hover,
.btn-social--google:focus {
  background-color: #f7f4ec;
  color: #343a40;
}

.btn-social .fa-google {
  color: #ea4335;
}

:root {
  --primary: #5c8d89;       /* Sage green */
  --secondary: #f4a259;     /* Warm orange */
  --success: #68b684;       /* Fresh green */
  --info: #2d5362;          /* Deep teal */
  --warning: #f4e285;       /* Soft yellow */
  --danger: #e45641;        /* Rustic red */
  --light: #f8f9fa;         /* Off white */
  --dark: #343a40;          /* Deep charcoal */
  --bg-light: #f7f4ec;      /* Refined Classic cream background */
  --accent: #bc4749;        /* Accent red */

  /* Refined Classic design tokens (selected live design). Promoted to :root
     so the shared .rc-* components also render on the live homepage. */
  --hp-sage: #5c8d89;
  --hp-sage-deep: #2d5362;
  --hp-orange: #f4a259;
  --hp-cream: #f7f4ec;
  --hp-ink: #1f2724;
  --hp-gold: #d9bd7a;
  --hp-radius: 18px;
  --rc-heading: #233a36;    /* Deep green headings */

  /* Cook timers (SOUS-317), the same tokens as mobile's cook timer:
     orange is the alert colour (done, the last minute), deep the Done screen. */
  --timer-orange: #f4a259;
  --timer-deep: #233a36;
  --timer-tint: #dde8e6;    /* sage tint, mobile's primaryContainer */
  --timer-hatch: #cfdcd9;
  --timer-muted: #6b7a76;

  /* Filter chips (SOUS-350), the app's FilterChip: white pill on a warm
     border, sage tint when selected. */
  --chip-border: #e2dccc;
  --chip-selected: #dde8e6;
  --chip-muted: #6b7a76;
}

/* Typography */
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #343a40;
  margin: 0;
  padding: 0;
  background-color: var(--bg-light);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--rc-heading);
}

.navbar-brand {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.card-title {
  font-weight: 600;
}

/* Profile avatars (SOUS-133): one square derivative, rendered at any size. */
.avatar {
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e9ecef;
  color: #495057;
  font-weight: 600;
  line-height: 1;
}

.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

.text-info {
  color: var(--info) !important;
}

.fw-medium {
  font-weight: 500;
}

/* Better link styling */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: darken(var(--primary), 10%);
}

.welcome-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.header {
  margin-bottom: 2rem;
}

.title-with-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  gap: 0;
  padding: 0;
}

.logo-img {
  width: 70px;
  height: auto;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.05));
  mix-blend-mode: multiply;
}

.logo-img-mobile {
  width: 60px;
  height: auto;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.05));
  mix-blend-mode: multiply;
  margin: 0;
  padding: 0;
}

.mobile-title {
  margin: 0 0 0.5rem 0;
  padding: 0;
  width: 100%;
  white-space: nowrap;
}

.mobile-title h1 {
  font-size: 2rem !important;
}

.welcome-container h1 {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.welcome-container p {
  font-size: 1.2rem;
  color: var(--dark);
  margin-bottom: 2rem;
}

.definition {
  font-size: 1rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.0128em; /* reduced by another 20% from 0.016em */
  font-style: normal;
  line-height: 1.4;
}

.break-opportunity {
  display: inline;
}

@media (max-width: 576px) {
  .break-opportunity {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

.extra-bold {
  font-weight: 900;
  letter-spacing: 0.01em;
}

.hero-banner {
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--secondary), var(--accent));
  color: white;
  padding: 3rem 2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.banner-content h2 {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
}

.banner-content p {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.95);
  max-width: 600px;
  margin: 0 auto;
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
}

.feature {
  flex: 1;
  min-width: 250px;
  background-color: #fff;
  border-radius: 12px;
  padding: 1.8rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  border-top: 4px solid var(--secondary);
}

.feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.feature h3 {
  color: var(--primary);
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
}

.feature p {
  font-size: 1rem;
  color: var(--dark);
  opacity: 0.8;
}

/* Bootstrap overrides */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #4b7a76;
  border-color: #4b7a76;
}

.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-dark {
  background-color: var(--info) !important;
}

.card {
  border-radius: var(--hp-radius);
  border: 1px solid #ece7dc;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.2s ease-in-out;
}

.card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.card-header {
  border-bottom: none;
  padding: 1rem 1.25rem;
}

/* Recipe Cards */
.recipe-card {
  transition: all 0.3s ease;
  border: none;
  overflow: hidden;
}

.recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

.card-img-container {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.card-img-top {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.recipe-card:hover .card-img-top {
  transform: scale(1.05);
}

/* Fills the image area so the whole picture is a click target (SOUS-61) */
.recipe-card-image-link {
  display: block;
  height: 100%;
}

.recipe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Sits above the image link even while invisible — let clicks fall
     through to the link, except on the View Recipe button itself */
  pointer-events: none;
}

.recipe-overlay .btn {
  pointer-events: auto;
}

.recipe-card:hover .recipe-overlay {
  opacity: 1;
}

.recipe-time-badge {
  display: inline-block;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  background-color: var(--bg-light);
  color: var(--info);
  font-weight: 500;
}

.recipe-description {
  font-size: 0.9rem;
  color: var(--dark);
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 2.8rem;
}

/* Clamp card titles to two lines so cards in a row stay aligned */
.recipe-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6rem;
}

.recipe-card-title a:hover {
  text-decoration: underline;
}

/* Recipe Placeholder */
.recipe-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: linear-gradient(135deg, #e8f1f0, #dae5e3);
  color: var(--primary);
  overflow: hidden;
  position: relative;
}

.recipe-placeholder::before {
  content: "🍳";
  font-size: 3.5rem;
  margin-bottom: 10px;
  opacity: 0.8;
}

.recipe-placeholder span {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.7;
}

/* Related recipes ("More Recipes" sidebar on the recipe show page) */
.related-recipe {
  color: var(--dark);
}

.related-recipe-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
}

.related-recipe-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8f1f0, #dae5e3);
}

.related-recipe-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9rem;
}

/* Tag styling */
.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
  border-radius: 4px;
  font-size: 0.75em;
  text-transform: capitalize;
}

.badge-tag {
  background-color: var(--light);
  color: var(--primary);
  border: 1px solid rgba(92, 141, 137, 0.2);
  transition: all 0.2s ease;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  display: inline-block;
}

.badge-tag:hover {
  background-color: var(--primary);
  color: white;
}

/* Retag action sitting alongside the tag chips on the recipe show page.
   Deliberately quiet -- the chips are the content, this is the tool. */
.recipe-tag-chips .badge-tag:last-child {
  margin-right: 0;
}

.recipe-retag-link {
  font-size: 0.8rem;
  border: 0;
  vertical-align: baseline;
}

.recipe-retag-link:hover {
  color: var(--primary) !important;
}

/* Recipes page toolbar (SOUS-350): search as you type + the chip row. */
.recipe-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.recipe-search {
  position: relative;
  flex: 0 1 380px;
  min-width: 0;
}

.recipe-search .form-control {
  padding-left: 2.25rem;
  border-radius: 10px;
  border-color: var(--chip-border);
}

.recipe-search-icon {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  color: var(--chip-muted);
  pointer-events: none;
}

.recipe-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.recipe-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  border: 1px solid var(--chip-border);
  background: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  color: var(--rc-heading);
  text-decoration: none;
}

.recipe-chip:hover {
  border-color: var(--primary);
  color: var(--rc-heading);
}

.recipe-chip.is-active {
  background: var(--chip-selected);
  border-color: var(--primary);
  font-weight: 600;
}

.recipe-chip-count {
  color: var(--chip-muted);
  font-weight: 400;
}

.recipe-chips-manage {
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--chip-muted);
}

/* On a phone the chips stay on one line and scroll sideways, like the app. */
@media (max-width: 767.98px) {
  .recipe-search {
    flex-basis: 100%;
  }

  .recipe-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
}

/* Tag selection in form */
.tag-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.tag-selection .form-check-inline {
  margin-right: 0;
  margin-bottom: 0.5rem;
}

.tag-selection .form-check-input {
  margin-right: 0.3rem;
}

.tag-selection .form-check-label.badge-tag {
  cursor: pointer;
  margin-right: 0;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  padding: 0.4em 0.8em;
  border-radius: 20px;
}

.tag-selection .form-check-input:checked + .badge-tag {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

.tag-selection .badge-tag {
  padding: 0.4em 0.8em;
  transition: all 0.2s ease;
}

/* Copy URL button styling */
.copy-url-btn {
  transition: all 0.2s ease;
}

.copy-url-btn:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: white;
}

/* Category tags styling */
.list-group-item.border-primary {
  border-left: 3px solid var(--primary) !important;
  background-color: rgba(92, 141, 137, 0.08) !important;
}

/* Better table styling */
.table-responsive {
  border-radius: 12px;
  overflow: hidden;
}

.table th {
  font-weight: 600;
  background-color: rgba(92, 141, 137, 0.1);
}

.table-hover tbody tr:hover {
  background-color: rgba(92, 141, 137, 0.05);
}

/* Form placeholder styling */
::placeholder {
  color: rgba(128, 128, 128, 0.65) !important;
  opacity: 0.85 !important;
}

/* For older browsers */
::-webkit-input-placeholder {
  color: rgba(128, 128, 128, 0.65) !important;
  opacity: 0.85 !important;
}

::-moz-placeholder {
  color: rgba(128, 128, 128, 0.65) !important;
  opacity: 0.85 !important;
}

/* Barcode scanner - QuaggaJS video/canvas sizing */
#barcode-scanner-viewport {
  position: relative;
}

#barcode-scanner-viewport video,
#barcode-scanner-viewport canvas,
#barcode-scanner-viewport canvas.drawingBuffer {
  width: 100%;
  height: auto;
}

/* =========================================================================
   Refined Classic alignment — production-wide chrome
   Brings buttons and forms in line with the selected live design. Cards,
   background and headings are aligned via the tokens/rules above. The full
   set of homepage concepts remains reviewable at /homepage_options.
   ========================================================================= */

/* Pill buttons with a gentle lift, matching Refined Classic */
.btn {
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, border-color 0.2s ease;
}

.btn-lg {
  padding: 0.7rem 1.5rem;
}

.btn-primary {
  box-shadow: 0 10px 24px -12px rgba(45, 83, 98, 0.8);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover {
  transform: translateY(-2px);
}

/* Forms: sage focus ring */
.form-control:focus,
.form-select:focus {
  border-color: var(--hp-sage);
  box-shadow: 0 0 0 0.2rem rgba(92, 141, 137, 0.2);
}

/* Live homepage (home#welcome) reuses the shared .rc-* components but sits
   inside the layout's .container, so the concept's full-bleed horizontal
   padding is dropped in favour of the container gutters. */
.rc-live .rc-hero,
.rc-live .rc-features,
.rc-live .rc-showcase,
.rc-live .rc-cta {
  padding-left: 0;
  padding-right: 0;
}