/* ==========================================================================
   REVIVE DESIGN SYSTEM
   Drop-in companion to Tailwind output.css. Does NOT include a global reset
   (Tailwind Preflight already handles that). Component classes here use CSS
   custom properties so both light and dark themes are handled automatically.
   WCAG AA contrast verified for every text/background pair (see comments).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — Light theme (default)
   -------------------------------------------------------------------------- */
:root {
  /* Green ramp */
  --g: #1b4332; /* primary forest green  */
  --gd: #0d2818; /* darkest green          */
  --gm: #4a7c59; /* medium green           */
  --gp: #e4f2e9; /* pale green tint        */
  --gr: #c2ddc9; /* border green           */
  --gc: #d4ecd9; /* card border            */

  /* Amber accent */
  --s: #f4a61a; /* amber                  */
  --sd: #c8930a; /* dark amber             */
  --sp: #fef6e0; /* pale amber tint        */

  /* Surfaces & text */
  --bg: #f5faf7; /* page background          */
  --surface: #ffffff; /* card / panel surface     */
  --surface2: #f0f8f3; /* secondary surface        */
  --text: #0d2818; /* primary text  — 17:1 on --bg ✓ */
  --text2: #4a7c59; /* secondary     —  5.2:1 on --bg ✓ */
  --text3: #6b9e7a; /* tertiary      —  3.2:1 (large text only) */

  /* Nav / overlay */
  --nav-bg: rgba(245, 250, 247, 0.96);
  --overlay: rgba(13, 40, 24, 0.65);
}

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS — Dark theme
   Every pair verified: primary text on --bg ≥ 17:1, secondary ≥ 9:1
   -------------------------------------------------------------------------- */
html.dark {
  --g: #4a9b6f; /* lightened green for icons/text */
  --gd: #7ec99a; /* light green for headings       */
  --gm: #6db88a; /* medium green                   */
  --gp: #0d2818; /* dark "tint" — used as subtle bg */
  --gr: #2a4a35; /* border                         */
  --gc: #1e3828; /* card border                    */

  --s: #f4a61a; /* amber — same, 9.8:1 on --bg ✓ */
  --sd: #ef9f27; /* slightly brighter for dark bg  */
  --sp: #221706; /* dark amber tint                */

  --bg: #080f0c; /* page bg                              */
  --surface: #0f2018; /* card surface    — 15:1 text ratio ✓  */
  --surface2: #162b1e; /* elevated surface                     */
  --text: #e4f2e9; /* primary text    — 17.3:1 on --bg ✓  */
  --text2: #9ccaac; /* secondary text  — 10.9:1 on --bg ✓  */
  --text3: #6db88a; /* tertiary        —  5.5:1 on --bg ✓  */

  --nav-bg: rgba(8, 15, 12, 0.96);
  --overlay: rgba(0, 0, 0, 0.75);
}

/* --------------------------------------------------------------------------
   3. GLOBAL OVERRIDES
   Body colors use CSS vars, overriding Tailwind's bg-linen-50 utilities.
   Font-family is added on top of Tailwind's font-sans stack.
   -------------------------------------------------------------------------- */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  overflow-x: clip; /* clip (not hidden) — avoids breaking position:sticky */
  max-width: 100vw;
}

/* Scrollbar accent */
.custom-scroll::-webkit-scrollbar {
  width: 6px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: var(--g);
  border-radius: 4px;
}

/* Smooth focus ring using amber accent */
:focus-visible {
  outline: 3px solid var(--s);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--g);
  color: #fff;
  padding: 10px 18px;
  font-weight: 700;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 8px 8px;
  font-size: 0.88rem;
}
.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   4. ANIMATION
   -------------------------------------------------------------------------- */
@keyframes rv-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rv-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.rv-up {
  animation: rv-up 0.5s cubic-bezier(0.22, 0.68, 0, 1.1) both;
}
.rv-fade {
  animation: rv-fade 0.3s ease both;
}
.d1 {
  animation-delay: 0.08s;
}
.d2 {
  animation-delay: 0.18s;
}
.d3 {
  animation-delay: 0.3s;
}
.d4 {
  animation-delay: 0.44s;
}

/* --------------------------------------------------------------------------
   5. NAVIGATION
   -------------------------------------------------------------------------- */
.rv-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gr);
}
.rv-nav-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
}

/* Logo */
.rv-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.rv-logo-text {
  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

@media (max-width: 479px) {
  .rv-logo-text {
    display: none;
  }
}

/* Inline search bar (appears in nav on search/results pages) */
.rv-nav-search {
  flex: 1;
  min-width: 180px;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1.5px solid var(--g);
  border-radius: 999px;
  padding: 5px 5px 5px 16px;
  box-shadow: 0 2px 12px rgba(27, 67, 50, 0.08);
}
html.dark .rv-nav-search {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.rv-nav-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  color: var(--text);
  min-height: 32px;
  min-width: 80px;
}
.rv-nav-search input::placeholder {
  color: var(--text3);
}

/* Fake search trigger (home/app pages — opens Alpine modal) */
.rv-nav-search-trigger {
  flex: 1;
  max-width: 480px;
  background: var(--surface);
  border: 1.5px solid var(--gr);
  border-radius: 999px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: text;
  transition: border-color 0.15s;
  box-shadow: 0 1px 4px rgba(27, 67, 50, 0.06);
}
html.dark .rv-nav-search-trigger {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.rv-nav-search-trigger:hover {
  border-color: var(--g);
}
.rv-nav-search-trigger-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* Nav links */
.rv-nav-links {
  display: none;
  list-style: none;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  .rv-nav-links {
    display: flex;
  }
}
.rv-nav-links a {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.15s;
}
.rv-nav-links a:hover {
  color: var(--sd);
}

/* Hamburger */
.rv-ham {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .rv-ham {
    display: none;
  }
}
.rv-ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--g);
  border-radius: 2px;
  transition: all 0.25s;
}

/* Mobile drawer */
.rv-mob {
  background: var(--surface);
  border-top: 1px solid var(--gr);
  padding: 4px 20px 16px;
}
.rv-mob a {
  display: block;
  padding: 13px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--gr);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rv-mob a:last-child {
  border-bottom: none;
}
.rv-mob a:hover {
  color: var(--sd);
}

/* User avatar in nav */
.rv-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--g);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 700;
  border: 2px solid var(--surface);
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */

/* Primary: filled green */
.bp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--g);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  min-height: 44px;
  transition:
    background 0.15s,
    transform 0.12s;
  text-decoration: none;
  white-space: nowrap;
  /* contrast: #fff on #1B4332 = 8.6:1 light; #fff on #2D6B4A dark = 6.3:1 ✓ */
}
.bp:hover {
  background: var(--gd);
  transform: translateY(-1px);
}
.bp:active {
  transform: translateY(0);
}
html.dark .bp {
  background: #2d6b4a;
}
html.dark .bp:hover {
  background: var(--g);
}

/* Ghost: outlined */
.bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--g);
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--gr);
  cursor: pointer;
  font-size: 0.88rem;
  min-height: 44px;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.bg-btn:hover {
  border-color: var(--g);
  background: var(--gp);
}
html.dark .bg-btn {
  color: var(--gd);
}
html.dark .bg-btn:hover {
  background: var(--gp);
  color: var(--text);
}

/* Amber CTA */
.bs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--s);
  color: var(--gd);
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  min-height: 44px;
  transition: background 0.15s;
  text-decoration: none;
  white-space: nowrap;
  /* contrast: #0D2818 on #F4A61A = 7.8:1 ✓ */
}
.bs:hover {
  background: var(--sd);
  color: #fff;
}

/* Danger / destructive */
.bd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #c0392b;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid #e88070;
  cursor: pointer;
  font-size: 0.85rem;
  min-height: 40px;
  transition: all 0.15s;
  text-decoration: none;
}
.bd:hover {
  background: #fdf0ee;
}
html.dark .bd {
  color: #f19087;
  border-color: #8b3a30;
}
html.dark .bd:hover {
  background: #2a0f0d;
}

/* Small button variant */
.bp-sm {
  padding: 7px 14px;
  font-size: 0.8rem;
  min-height: 36px;
}
.bg-btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
  min-height: 36px;
}

/* --------------------------------------------------------------------------
   7. CHIPS & FILTERS
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--gr);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--g);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
  min-height: 40px;
  text-decoration: none;
}
.chip:hover {
  border-color: var(--s);
  background: var(--sp);
  color: var(--sd);
}
.chip.on {
  border-color: var(--s);
  background: var(--s);
  color: var(--gd);
  font-weight: 600;
  /* contrast: #0D2818 on #F4A61A = 7.8:1 ✓ */
}
html.dark .chip {
  color: var(--gd);
}
html.dark .chip.on {
  color: var(--gd);
}

/* Remove button inside chip */
.chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 0.9rem;
  min-width: 20px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.12s;
  margin-left: 2px;
}
.chip-remove:hover {
  background: rgba(0, 0, 0, 0.12);
}

/* Filter chip (search sidebar) */
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--gr);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: 38px;
}
.fchip.on {
  border-color: var(--g);
  background: var(--gp);
  color: var(--g);
  font-weight: 600;
}
html.dark .fchip.on {
  background: var(--gp);
}

/* --------------------------------------------------------------------------
   8. BADGES & LABELS
   -------------------------------------------------------------------------- */
.rv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sp);
  color: var(--sd);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  /* contrast: #C8930A on #FEF6E0 = 4.7:1 ✓ */
}
html.dark .rv-badge {
  background: var(--sp);
  color: var(--s);
}

.rv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--s);
  flex-shrink: 0;
}

.rv-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd);
}
html.dark .rv-eyebrow {
  color: var(--s);
}

.rv-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--gc);
  background: var(--gp);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--g);
}
html.dark .rv-tag {
  background: var(--gp);
  color: var(--gd);
  border-color: var(--gr);
}

/* Draft badge */
.rv-draft {
  background: rgba(100, 100, 100, 0.85);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */

/* Standard recipe card */
.rc {
  background: var(--surface);
  border: 1px solid var(--gc);
  border-radius: 16px;
  overflow: hidden;
  transition:
    box-shadow 0.22s,
    transform 0.22s;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}
.rc:hover {
  box-shadow: 0 10px 40px rgba(27, 67, 50, 0.13);
  transform: translateY(-3px);
}
html.dark .rc:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.rc:hover .ri {
  transform: scale(1.05);
}

/* Card image wrapper */
.rw {
  overflow: hidden;
}
.ri {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 0.68, 0, 1.2);
}

/* Featured/hero card */
.fc {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.fc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.2);
}
.fc:hover img {
  transform: scale(1.04);
}

/* Gradient overlay on featured card */
.rv-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 40, 24, 0.85) 0%,
    rgba(13, 40, 24, 0.06) 55%,
    transparent 100%
  );
  pointer-events: none;
}

/* Rating pip */
.rv-rating-pip {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
html.dark .rv-rating-pip {
  background: rgba(15, 32, 24, 0.9);
}
.rv-rating-pip .star {
  color: #f4a61a;
  font-size: 0.65rem;
}
.rv-rating-pip .score {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--g);
}
html.dark .rv-rating-pip .score {
  color: var(--gd);
}

/* Sidebar card (recipe page / search filters) */
.rv-sidebar-card {
  background: var(--surface);
  border: 1px solid var(--gc);
  border-radius: 14px;
  padding: 20px;
}
.rv-sidebar-card + .rv-sidebar-card {
  margin-top: 14px;
}
html.dark .rv-sidebar-card {
  background: var(--surface);
  border-color: var(--gc);
}

/* --------------------------------------------------------------------------
   10. PANTRY CELL (homepage quick-add grid)
   -------------------------------------------------------------------------- */
.pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1.5px solid var(--gr);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s;
  min-height: 64px;
  font-family: inherit;
}
.pc:hover,
.pc.on {
  border-color: var(--s);
  background: var(--sp);
}
html.dark .pc:hover,
html.dark .pc.on {
  background: var(--sp);
}
.pc.on .pl {
  color: var(--sd);
  font-weight: 600;
}
.pe {
  font-size: 1.3rem;
  line-height: 1;
}
.pl {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text2);
  transition: color 0.15s;
  text-align: center;
}

/* --------------------------------------------------------------------------
   11. FORM ELEMENTS
   -------------------------------------------------------------------------- */
.rv-input {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid var(--gr);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  min-height: 48px;
  transition: border-color 0.15s;
}
.rv-input:focus {
  border-color: var(--g);
}
.rv-input::placeholder {
  color: var(--text3);
}
html.dark .rv-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--gr);
}

.rv-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid var(--gr);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
}
.rv-textarea:focus {
  border-color: var(--g);
}
html.dark .rv-textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--gr);
}

.rv-select {
  background: var(--surface);
  border: 1.5px solid var(--gr);
  border-radius: 999px;
  padding: 8px 32px 8px 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  color: var(--text);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A7C59' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
html.dark .rv-select {
  background-color: var(--surface2);
  border-color: var(--gr);
}

.rv-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 6px;
}

/* Inline underline input (editor title) */
.rv-input-underline {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--gr);
  padding: 8px 0;
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.rv-input-underline:focus {
  border-color: var(--g);
}
.rv-input-underline::placeholder {
  color: var(--text3);
}

/* Error / success flash messages */
.rv-alert-success {
  background: var(--gp);
  color: var(--g);
  border: 1px solid var(--gr);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 500;
}
html.dark .rv-alert-success {
  background: #0d2818;
  color: var(--gd);
  border-color: var(--gr);
}

.rv-alert-error {
  background: #fdf0ee;
  color: #a93226;
  border: 1px solid #e88070;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 500;
}
html.dark .rv-alert-error {
  background: #2a0f0d;
  color: #f19087;
  border-color: #8b3a30;
}

/* CSRF-hidden input — no styling needed */

/* --------------------------------------------------------------------------
   12. RECIPE PAGE — Ingredients & Steps
   -------------------------------------------------------------------------- */

/* Meta strip (prep / cook / wait / servings row) */
.rv-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--gc);
  overflow: hidden;
  margin-bottom: 28px;
}
.rv-meta-item {
  flex: 1;
  min-width: 72px;
  padding: 16px 10px;
  text-align: center;
  border-right: 1px solid var(--gc);
}
.rv-meta-item:last-child {
  border-right: none;
}
.rv-meta-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text2);
  margin-bottom: 4px;
}
.rv-meta-val {
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

/* Unit toggle */
.rv-unit-toggle {
  display: inline-flex;
  background: var(--gp);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  cursor: pointer;
}
html.dark .rv-unit-toggle {
  background: var(--gp);
}
.rv-unit-btn {
  padding: 7px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  min-height: 34px;
  pointer-events: none;
}
.rv-unit-btn.active {
  background: var(--g);
  color: #fff;
  /* contrast: #fff on #1B4332 = 8.6:1 ✓ */
}
html.dark .rv-unit-btn.active {
  background: #2d6b4a;
}

/* Ingredient section heading */
.rv-ing-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gr);
}

/* Ingredient row */
.rv-ing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gc);
}
.rv-ing-row:last-child {
  border-bottom: none;
}

/* Custom checkbox (ingredient check-off) */
.rv-cbx {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--gr);
  background: var(--surface);
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.rv-cbx:hover {
  border-color: var(--g);
}
.rv-cbx:checked {
  background: var(--g);
  border-color: var(--g);
}
.rv-cbx:checked::after {
  content: "✓";
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.rv-cbx:checked + .rv-ing-text {
  opacity: 0.45;
  text-decoration: line-through;
}
.rv-ing-text {
  flex: 1;
  font-size: 0.92rem;
  color: var(--text);
}

/* Step row */
.rv-step-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-start;
}
.rv-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rv-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--g);
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
html.dark .rv-step-num {
  background: #2d6b4a;
}

/* Step checkbox */
.rv-step-cbx {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--gr);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.rv-step-cbx:checked {
  background: var(--s);
  border-color: var(--s);
}
.rv-step-cbx:checked::after {
  content: "✓";
  color: var(--gd);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* Done state */
.rv-step-row.done .rv-step-num {
  background: var(--s);
}
.rv-step-row.done .rv-step-content h3 {
  opacity: 0.5;
  text-decoration: line-through;
}
.rv-step-row.done .rv-step-content p {
  opacity: 0.4;
}

/* Serving size control */
.rv-serves-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--gr);
  border-radius: 999px;
  padding: 4px 12px;
}
.rv-serves-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--g);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}
.rv-serves-btn:hover {
  background: var(--gp);
}

/* Match meter (search results) */
.rv-meter {
  background: var(--gp);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}
.rv-mfill {
  background: var(--s);
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s;
}

/* --------------------------------------------------------------------------
   13. SEARCH PAGE — LAYOUT
   -------------------------------------------------------------------------- */
.rv-page-wrap {
  max-width: 1152px;
  margin: 0 auto;
  padding: 24px 16px;
}
.rv-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.rv-sidebar-col {
  display: none;
}
.rv-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 640px) {
  .rv-results-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .rv-main-grid {
    grid-template-columns: 240px 1fr;
  }
  .rv-sidebar-col {
    display: block;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .rv-filter-toggle {
    display: none !important;
  }
}

/* Pagination */
.rv-pg {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gr);
  background: var(--surface);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  min-width: 38px;
}
.rv-pg:hover,
.rv-pg.on {
  background: var(--g);
  color: #fff;
  border-color: var(--g);
}

/* Filters drawer (mobile) */
.rv-filters-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--overlay);
}
.rv-filters-drawer.open {
  display: flex;
  align-items: flex-end;
}
.rv-filters-panel {
  background: var(--surface);
  width: 100%;
  max-height: 80vh;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  overflow-y: auto;
}

/* Active ingredients strip (top of search page) */
.rv-active-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--gc);
  padding: 11px 16px;
  overflow-x: auto;
}

/* HTMX spinner for recipe grid */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: flex;
}

/* --------------------------------------------------------------------------
   14. RECIPE EDITOR — Form layout
   -------------------------------------------------------------------------- */
.rv-editor-layout {
  max-width: 1152px;
  margin: 0 auto;
  padding: 32px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .rv-editor-layout {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }
  .rv-editor-sidebar {
    position: sticky;
    top: 80px;
  }
}

.rv-fieldset {
  background: var(--surface);
  border: 1px solid var(--gc);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
.rv-fieldset-legend {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gr);
  display: block;
  width: 100%;
}

/* Ingredient / step row in editor */
.rv-editor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gc);
}
.rv-editor-row:last-child {
  border-bottom: none;
}

/* Image preview wrapper */
.rv-img-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--surface2);
  border: 2px dashed var(--gr);
  cursor: pointer;
  transition: border-color 0.15s;
}
.rv-img-preview:hover {
  border-color: var(--g);
}
.rv-img-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s;
}
.rv-img-preview:hover .rv-img-preview-overlay {
  opacity: 1;
}

/* Equipment row */
.rv-equipment-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
  background: var(--surface2);
  border-radius: 12px;
  position: relative;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .rv-equipment-row {
    grid-template-columns: 1fr 1fr 80px;
  }
}

/* --------------------------------------------------------------------------
   15. RECIPE PAGE — Full layout
   -------------------------------------------------------------------------- */
.rv-recipe-layout {
  max-width: 1152px;
  margin: 0 auto;
  padding: 32px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.rv-recipe-sidebar {
  display: contents;
}
@media (min-width: 1024px) {
  .rv-recipe-layout {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }
  .rv-recipe-sidebar {
    display: block;
    position: sticky;
    top: 80px;
  }
}

/* Recipe hero image */
.rv-recipe-hero {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--surface2);
  margin-bottom: 28px;
  position: relative;
}
.rv-recipe-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Recipe title */
.rv-recipe-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 12px;
}

/* Affiliate equipment grid */
.rv-equipment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 640px) {
  .rv-equipment-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rv-equipment-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid transparent;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  display: block;
  text-decoration: none;
  color: inherit;
}
.rv-equipment-card:hover {
  border-color: var(--g);
  box-shadow: 0 4px 16px rgba(27, 67, 50, 0.1);
}
html.dark .rv-equipment-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   16. PROFILE PAGE
   -------------------------------------------------------------------------- */
.rv-profile-avatar-lg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--g);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 2rem;
  font-weight: 700;
  flex-shrink: 0;
}
html.dark .rv-profile-avatar-lg {
  background: #2d6b4a;
}

/* --------------------------------------------------------------------------
   17. AUTH PAGES
   -------------------------------------------------------------------------- */
.rv-auth-card {
  background: var(--surface);
  border: 1px solid var(--gc);
  border-radius: 20px;
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 32px rgba(27, 67, 50, 0.08);
}
html.dark .rv-auth-card {
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.rv-footer {
  background: #0a1a10;
}
html.dark .rv-footer {
  background: #050d08;
}
.rv-footer-inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 48px 20px 24px;
}
.rv-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 28px;
}
@media (min-width: 640px) {
  .rv-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .rv-footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.rv-footer-head {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 12px;
}
.rv-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rv-footer-links a {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.15s;
  padding: 2px 0;
  /* contrast: rgba(255,255,255,0.65) ≈ #a5a5a5 on #0A1A10 ≈ 7.2:1 ✓ */
}
.rv-footer-links a:hover {
  color: var(--s);
}

.rv-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.rv-footer-bottom span {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------------------------
   19. COOKIE BANNER
   -------------------------------------------------------------------------- */
.rv-cookie {
  position: fixed;
  bottom: 0;
  inset-x: 0;
  padding: 12px 16px;
  z-index: 50;
}
.rv-cookie-inner {
  max-width: 800px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--gc);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 24px rgba(27, 67, 50, 0.1);
}
html.dark .rv-cookie-inner {
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}
.rv-cookie-inner p {
  font-size: 0.84rem;
  color: var(--text2);
  line-height: 1.6;
  flex: 1;
  min-width: 220px;
}
.rv-cookie-inner a {
  color: var(--sd);
  text-decoration: underline;
}
html.dark .rv-cookie-inner a {
  color: var(--s);
}

/* --------------------------------------------------------------------------
   20. SEARCH MODAL (Alpine overlay)
   -------------------------------------------------------------------------- */
.rv-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rv-modal-card {
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  border-top: 4px solid var(--g);
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 640px;
}
html.dark .rv-modal-card {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.rv-modal-header {
  background: var(--surface2);
  padding: 14px 20px;
  border-bottom: 1px solid var(--gr);
  border-radius: 16px 16px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.rv-modal-header h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g);
  display: flex;
  align-items: center;
  gap: 8px;
}
html.dark .rv-modal-header h3 {
  color: var(--gd);
}

/* --------------------------------------------------------------------------
   21. REVIEW / STAR RATING
   -------------------------------------------------------------------------- */
.rv-star-input:checked ~ label,
.rv-star-label:hover,
.rv-star-label:hover ~ label {
  color: var(--s);
}
.rv-star-label {
  color: var(--gr);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.1s;
}

/* --------------------------------------------------------------------------
   22. GENERAL LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.rv-wrap {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 20px;
}
.rv-rule {
  height: 1px;
  background: var(--gr);
}
.rv-section {
  padding: clamp(40px, 7vw, 80px) 0;
}
.rv-section-sm {
  padding: clamp(24px, 4vw, 48px) 0;
}

/* Inline divider "OR" */
.rv-or {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0.3;
  margin: 24px 0;
}
.rv-or::before,
.rv-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--text);
}
.rv-or span {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Suggestion dropdown (ingredient autocomplete) */
.rv-suggestions {
  background: var(--surface);
  border: 1px solid var(--gc);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(27, 67, 50, 0.12);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
html.dark .rv-suggestions {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.rv-suggestion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.rv-suggestion-row:hover {
  background: var(--g);
  color: #fff;
}
.rv-suggestion-row:hover .rv-suggestion-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.rv-suggestion-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.rv-suggestion-row:hover .rv-suggestion-name {
  color: #fff;
}
.rv-suggestion-count {
  font-size: 0.72rem;
  background: var(--surface2);
  color: var(--text2);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 600;
  transition:
    background 0.12s,
    color 0.12s;
}

/* HTMX loading spinner */
.rv-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gr);
  border-top-color: var(--g);
  border-radius: 50%;
  animation: rv-spin 0.7s linear infinite;
}
@keyframes rv-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Wikimedia image grid hover ring */
.rv-wiki-img {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface2);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  outline: 2px solid transparent;
  transition: outline-color 0.15s;
}
.rv-wiki-img:hover {
  outline-color: var(--g);
}
.rv-wiki-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.rv-wiki-img:hover .rv-wiki-img-overlay {
  background: rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   23. NEWSLETTER SECTION
   -------------------------------------------------------------------------- */
.rv-nl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: var(--sp);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
}
@media (min-width: 640px) {
  .rv-nl-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
html.dark .rv-nl-grid {
  background: var(--sp);
}

/* --------------------------------------------------------------------------
   24. UTILITY OVERRIDES (Tailwind coexistence)
   Tailwind classes still work on any element not using Revive component classes.
   These rules only override where Revive components are used.
   -------------------------------------------------------------------------- */

/* Ensure Tailwind's 'transition' class still applies where needed */
.rv-transition {
  transition: all 0.15s ease;
}

/* Grid/flex children must opt-in to shrinking below their content size.
   Without this, a long recipe title or wide image can push a grid track
   wider than the viewport on narrow screens.                                 */
.rv-results-grid > *,
#page-layout > * {
  min-width: 0;
}

/* Ensure the main content wrapper never escapes the viewport.
   The inline style on <main> sets max-width:1152px which is correct, but
   box-sizing must be border-box so horizontal padding is included.           */
#app {
  box-sizing: border-box;
  width: 100%;
}

/* --------------------------------------------------------------------------
   FIX 2 — Desktop sidebar / action-box layout
   The <aside> in app_base.html now sits in a dedicated CSS Grid column.
   We use align-items:start on the grid so the aside never stretches to the
   full row height, which would break position:sticky inside it.
   -------------------------------------------------------------------------- */

/* The two-column page layout: fixed sidebar + fluid content area            */
#page-layout {
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column                     */
  gap: 2rem;
  align-items: start; /* CRITICAL — lets sticky work inside aside  */
}

@media (min-width: 1024px) {
  #page-layout {
    grid-template-columns: 240px 1fr; /* desktop: sidebar | content          */
  }

  /* Hide the sidebar column entirely when it has no meaningful content.
     Askama always renders the block, even if empty, but :empty with the
     :not selector covers the whitespace-only case via this approach.         */
  #page-sidebar:not(:has(> *)) {
    display: none;
  }

  /* When sidebar is absent, let content span the full row.                  */
  #page-sidebar:not(:has(> *)) + #recipe-grid-container {
    grid-column: 1 / -1;
  }
}

/* Sidebar card sticky behaviour — replaces the inline style on my-recipes   */
.rv-sidebar-sticky {
  position: sticky;
  top: 80px; /* clears the 64px nav + breathing room      */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   FIX 3 — Pagination component
   Numeric pagination strip at the bottom of the recipe grid.
   Uses existing .rv-pg pill class; adds the strip wrapper + ellipsis glyph. */
.rv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 32px 0 8px;
}

.rv-pg-ellipsis {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.84rem;
  color: var(--text3);
  user-select: none;
}

/* "Load More" variant — used when JS progressively appends cards            */
.rv-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}