/* Layout of the rebuilt pages: home, the book, search, the recipe page, shopping, settings' profile head and the welcome screen. Tokens come from theme.css. */
/* The book's home: greeting, search with its filter button, the tools as labelled circles, folder tiles and recipe rows. */
.rc-home-head { flex: none; display: flex; align-items: center; gap: 4px; padding: 18px 16px 12px; }
.rc-hello { font-size: 24px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-hello-sub { margin-top: 2px; font-size: 14px; color: var(--muted); }
.rc-icon-btn { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rc-filter-btn { position: relative; flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.rc-filter-count { position: absolute; top: -4px; left: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.rc-tools { display: flex; justify-content: space-between; gap: 4px; padding: 14px 14px 12px; }
.rc-tool { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.rc-tool-dot { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center;
  transition: background-color 160ms ease-out, color 160ms ease-out; }
.rc-tool[aria-pressed="true"] .rc-tool-dot { background: var(--accent); color: var(--on-accent); }
.rc-tool-label { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.rc-sec-head { margin: 14px 16px 10px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.rc-sec-count { display: inline-block; min-width: 24px; padding: 1px 8px; margin-inline-start: 6px; border-radius: 999px; background: var(--accent-soft);
  font-size: 13px; font-weight: 700; color: var(--accent-text); letter-spacing: 0; text-align: center; vertical-align: 2px; }
.rc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 6px; }
.rc-tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-m); overflow: hidden; background: var(--accent-soft); cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: var(--shadow-card); transition: transform 160ms var(--ease-out); }
.rc-tile:active { transform: scale(.98); }
.rc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-tile-mark { position: absolute; inset: 0 0 30%; display: flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--accent-text) 45%, transparent); }
.rc-tile-info { position: absolute; inset: auto 0 0; padding: 26px 10px 8px; background: linear-gradient(to top, rgba(18,24,17,.72), transparent); color: #fff; }
.rc-tile:not(:has(img)) .rc-tile-info { background: none; color: var(--ink); }
.rc-tile-name { font-size: 15px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-tile-meta { font-size: 12px; opacity: .85; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-tile-more { position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #252b24; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.rc-row-like { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rc-row-star { color: var(--warm); font-weight: 700; }

/* Chips, as in the search screen's filters and the active-filter row. */
.rc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-chip { flex: none; min-height: 36px; padding: 6px 14px; border: 1px solid transparent; border-radius: 999px; background: var(--accent-soft); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color 160ms ease-out, color 160ms ease-out; }
.rc-chip[data-active="yes"] { background: var(--accent); color: var(--on-accent); }
.rc-filter-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 10px; font-size: 16px; font-weight: 800; color: var(--ink); }
.rc-filter-head button { border: 0; background: none; color: var(--accent-text); font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 2px; }

/* Recipe page: round buttons floating on the photo, the meta row, section tabs, numbered steps and the cook bar. */
.rc-float { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.rc-star { width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--warm); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rc-star:disabled { cursor: default; }
.rc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 14px; padding: 12px 0; border-block: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.rc-meta > span { display: inline-flex; align-items: center; gap: 6px; padding-inline: 12px; }
.rc-meta > span:first-child { padding-inline-start: 0; }
.rc-meta > span + span { border-inline-start: 1px solid var(--line); }
.rc-meta svg { flex: none; color: var(--accent-text); }
.rc-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.rc-tab { flex: 1; min-height: 46px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out; }
.rc-tab[data-active="yes"] { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 700; }
.rc-sec { scroll-margin-top: 58px; margin-bottom: 28px; }
.rc-stepper { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 14px; color: var(--muted); }
.rc-stepper b { color: var(--accent-text); font-weight: 800; }
.rc-stepper button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 19px; line-height: 1; cursor: pointer; }
.rc-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; }
.rc-step + .rc-step { border-top: 1px solid var(--line); }
.rc-step-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px; }
/* The estimated nutrition card in the recipe's information: calories large, the rest as a list with sugars and fibre
   tucked under carbohydrate, and the reminder that it is all approximate. */
.rc-nutri { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-card); padding: 16px; margin-bottom: 18px; }
.rc-nutri-head { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.rc-nutri-approx { margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 700; }
.rc-nutri-kcal { font-size: 15px; color: var(--muted); }
.rc-nutri-kcal-n { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.rc-nutri-basis { font-size: 13px; color: var(--muted); margin: 2px 0 10px; }
.rc-nutri-rows { margin: 0; }
.rc-nutri-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.rc-nutri-row dt, .rc-nutri-row dd { margin: 0; }
.rc-nutri-row dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-nutri-row[data-sub="true"] { padding-inline-start: 14px; font-size: 14px; color: var(--muted); border-top-style: dashed; }
.rc-nutri-row[data-sub="true"] dd { font-weight: 600; }
.rc-nutri-note { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.rc-nutri-ask { margin-top: 12px; padding: 11px 18px; border: 0; border-radius: var(--radius-m); background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 700; cursor: pointer; }
.rc-nutri-ask:disabled { opacity: .7; cursor: default; }
.rc-nutri-cost { margin-top: 6px; font-size: 12px; color: var(--muted); }
.rc-nutri-err { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--danger); }
/* The recipe's photo stays where it is while the page slides up over it, rounded at the top. */
.rc-detail-photo { position: sticky; top: 0; }
.rc-detail-body { position: relative; z-index: 1; margin-top: -24px; border-radius: 24px 24px 0 0; background: var(--bg); }
/* The search screen's filters in one row once a search is on: they scroll sideways, past the margins. */
.rc-search-row { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 4px; scrollbar-width: none; }
.rc-search-row > .rc-chip { flex: none; }
.rc-add-fab { position: absolute; bottom: calc(80px + var(--bottom-room, 0px)); right: 16px; z-index: 5; width: 56px; height: 56px;
  border-radius: 18px; border: 0; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-pop); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
/* The book's tools over its list (quick return): sticky at the top of the list, slid out of view while scrolling down. */
.rc-quick { position: sticky; top: 0; z-index: 4; background: var(--bg); box-shadow: 0 1px 0 var(--line); transition: transform .28s cubic-bezier(.23,1,.32,1); }
.rc-quick[data-hidden="yes"] { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .rc-quick { transition: none; } }
.rc-cook-bar { flex: none; padding: 10px 16px calc(12px + var(--bottom-room, 0px)); background: var(--bg); box-shadow: 0 -1px 0 var(--line); }
/* Settings opens with a profile head: avatar, name and the book in numbers. */
.rc-profile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 4px 8px; }
.rc-avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 800; box-shadow: 0 0 0 4px var(--surface), var(--shadow-card); }
.rc-profile-name { margin-top: 12px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.rc-profile-sub { margin-top: 2px; font-size: 14px; color: var(--muted); direction: ltr; overflow-wrap: anywhere; }
.rc-stats { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin-top: 16px; padding: 14px 4px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-card); }
.rc-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rc-stats > div + div { border-inline-start: 1px solid var(--line); }
.rc-stats b { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-stats > div > span { font-size: 12px; color: var(--muted); }
/* Home: greeting, a search button shaped as a field, four coloured shortcuts, folder photos and a row of picked recipes. */
.rc-home-top { display: flex; align-items: flex-start; gap: 8px; padding: 20px 16px 14px; }
h1.rc-hello { margin: 0; }
.rc-home-search { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); height: 50px; margin: 0 16px; padding: 0 6px 0 16px; border: 1px solid var(--line);
  border-radius: var(--radius-m); background: var(--surface); color: var(--muted); font: inherit; font-size: 15px; text-align: start; cursor: pointer; box-shadow: var(--shadow-card); }
.rc-home-search > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-home-search-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; }
.rc-shortcuts { display: flex; justify-content: space-around; padding: 18px 10px 0; }
.rc-shortcut { --tint: var(--accent); flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; }
.rc-shortcut[data-tint="warm"] { --tint: var(--warm); }
.rc-shortcut[data-tint="rose"] { --tint: var(--tab-red); }
.rc-shortcut[data-tint="sage"] { --tint: var(--tab-green); }
.rc-shortcut[data-tint="gold"] { --tint: var(--gold); }
.rc-shortcut-dot { width: 58px; height: 58px; border-radius: 50%; background: color-mix(in srgb, var(--tint) 18%, var(--surface)); color: var(--tint);
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 22%, transparent); }
.rc-shortcut-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.rc-home-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 16px 10px; }
.rc-home-sec h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.rc-home-sec button { border: 0; background: none; padding: 6px 2px; color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rc-home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
.rc-home-tile { display: block; width: 100%; aspect-ratio: 1 / .82; padding: 0; border: 0; border-radius: 18px; font: inherit; text-align: start; }
.rc-home-tile .rc-tile-info { display: block; padding: 34px 12px 10px; }
.rc-home-tile .rc-tile-name, .rc-home-tile .rc-tile-meta { display: block; }
.rc-home-tile .rc-tile-name { font-size: 16px; }
.rc-picks { display: flex; gap: 12px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rc-pick { position: relative; flex: none; width: 74%; max-width: 300px; scroll-snap-align: start; cursor: pointer; }
.rc-pick-photo { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--accent-soft); box-shadow: var(--shadow-card); }
.rc-pick-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-pick-initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 800; color: color-mix(in srgb, var(--accent-text) 50%, transparent); }
.rc-pick-like { position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface); cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.rc-pick-title { display: block; width: 100%; padding: 0; border: 0; background: none; font-family: inherit; text-align: start; cursor: pointer; margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
/* The name is the card's button; it stretches over the whole card, and the like button sits above it. */
.rc-pick-title::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.rc-pick-like { z-index: 1; }
.rc-pick-meta { margin-top: 2px; font-size: 13px; color: var(--muted); }
.rc-home-empty { margin: 26px 16px 0; padding: 22px 18px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-card); text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; }
/* Shopping: one card per recipe the items came from, typed items last. */
.rc-shop-group { margin-bottom: 14px; padding: 4px 14px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-card); }
.rc-shop-head { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rc-shop-thumb { flex: none; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--accent-soft); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.rc-shop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rc-shop-title { font-size: 16px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-shop-meta { font-size: 13px; color: var(--muted); }
.rc-shop-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.rc-shop-item + .rc-shop-item { border-top: 1px solid var(--line); }
/* The welcome art is drawn for a tall phone (852x1846) with the logo printed at 55% of its height. It is the screen's
   background, covering it and centred, so it never adds to what scrolls; --art-w and --art-h repeat that cover size
   so the buttons can sit just under the logo on any screen. The art is light, so the screen keeps the light palette
   in dark mode too. */
/* The welcome, the terms step (.rc-terms) and finishing sign-up (social.css) fill the whole screen, under the notch and
   the home indicator too, which the shell keeps clear with its padding. Fixed, so that padding and the shell's
   clipping do not apply; on a wide screen they keep the shell's width, centred. Each pads its own content. */
.rc-welcome { position: fixed; inset: 0; width: 100%; max-width: 440px; margin: 0 auto; z-index: 90; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;
  container-type: size; color-scheme: light; background: #efe9df url("../images/welcome.webp") center / cover no-repeat; color: var(--ink);
  --bg: #faf8f3; --surface: #fff; --ink: #252b24; --muted: #6e746a; --line: #e7e8e1; --accent: #344e35; --on-accent: #fff; --accent-text: #344e35;
  --shadow-card: 0 1px 2px rgba(37,43,36,.05), 0 4px 14px rgba(37,43,36,.06);
  --accent-soft: color-mix(in srgb, var(--sage) 24%, #fff); --danger: #b3392b;
  --art-w: max(100cqw, 100cqh * 852 / 1846); --art-h: calc(var(--art-w) * 1846 / 852); }
.rc-welcome-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: calc(50cqh + var(--art-h) * .085) 24px calc(24px + var(--safe-bottom, 0px)); text-align: center; }
/* The art already shows the name and tagline; these stay for screen readers. */
.rc-welcome-name, .rc-welcome-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.rc-welcome-actions { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.rc-welcome-primary, .rc-welcome-secondary { width: 100%; min-height: 54px; border-radius: 16px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.rc-welcome-primary { border: 0; background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); }
.rc-welcome-secondary { border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.rc-welcome-link { margin-top: 6px; padding: 12px; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.rc-welcome-note { margin: auto 0 0; padding-top: 22px; max-width: 320px; font-size: 13px; line-height: 1.6; color: var(--muted); }
/* It sits over the herbs at the bottom of the art, so it gets a cream backing to stay readable. */
.rc-welcome-legal { margin: 10px 0 0; max-width: 320px; padding: 6px 12px; border-radius: 12px; background: rgba(246, 241, 231, .88);
  font-size: 13px; line-height: 1.6; color: var(--muted); }
.rc-welcome-legal a { color: var(--accent-text); font-weight: 600; }
/* A short phone (an iPhone SE) still fits the welcome without scrolling: the buttons and the lines under them close up. */
@container (max-height: 700px) {
  .rc-welcome-actions { gap: 8px; }
  .rc-welcome-primary, .rc-welcome-secondary { min-height: 48px; }
  .rc-welcome-link { margin-top: 0; padding: 8px; }
  .rc-welcome-note { padding-top: 10px; }
  .rc-welcome-legal { margin-top: 6px; }
}
.rc-welcome-card { width: 100%; max-width: 380px; margin-top: 0; padding: 8px 18px 20px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-card); text-align: start; }
.rc-welcome-card-head { display: flex; align-items: center; gap: 4px; margin-inline-start: -8px; }
.rc-welcome-card-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.rc-welcome-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
/* Recipee Plus: this month's use, free beside Plus, and the monthly or yearly choice. */
.rc-plan { width: 100%; max-width: 440px; max-height: 92%; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px calc(18px + var(--bottom-room, 0px));
  background: var(--surface); color: var(--ink); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-sheet); animation: rc-up .28s var(--ease-out); }
.rc-plan-title { margin: 14px 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.rc-plan-usage { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-m); background: var(--bg); font-size: 14px; }
.rc-plan-usage > div:not(.rc-plan-meter) { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.rc-plan-usage b { color: var(--ink); font-weight: 700; }
.rc-plan-meter { height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--muted) 22%, var(--surface)); }
.rc-plan-meter > div { height: 100%; }
.rc-plan-table { width: 100%; margin: 16px 0 6px; border-collapse: collapse; font-size: 14px; }
.rc-plan-table th, .rc-plan-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.rc-plan-table th[scope="row"] { text-align: start; font-weight: 600; }
.rc-plan-table thead th { font-size: 13px; color: var(--muted); font-weight: 700; }
.rc-plan-table thead th:last-child, .rc-plan-table td:last-child { color: var(--accent-text); font-weight: 700; }
.rc-plan-intervals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.rc-plan-interval { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border: 2px solid var(--line);
  border-radius: var(--radius-m); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color 160ms ease-out, background-color 160ms ease-out; }
.rc-plan-interval[data-active="yes"] { border-color: var(--accent); background: var(--accent-soft); }
.rc-plan-interval-name { font-size: 15px; font-weight: 800; }
.rc-plan-interval-price { font-size: 14px; color: var(--muted); }
.rc-plan-saving { position: absolute; top: -10px; padding: 2px 10px; border-radius: 999px; background: var(--warm); color: #2b1d14; font-size: 12px; font-weight: 700; }
.rc-plan-price { margin: 12px 0 10px; font-size: 22px; font-weight: 800; text-align: center; }
.rc-plan-fine { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
/* The chef character, standing in empty states, the loader, the welcome screen and the Plus sheet. */
.rc-chef { display: block; width: 150px; height: auto; margin: 0 auto 12px; }
.rc-chef-small { width: 110px; }
.rc-chef-large { width: 190px; }

/* Agreeing to the terms: a page of its own over everything, the profile page that finishes signing up included. */
.rc-terms { position: fixed; inset: 0; width: 100%; max-width: 440px; margin: 0 auto; z-index: 96; display: flex; overflow-y: auto; background: var(--bg); color: var(--ink); }
.rc-terms-body { width: 100%; max-width: 440px; margin: auto; padding: calc(24px + var(--safe-top, 0px)) 20px calc(24px + var(--safe-bottom, 0px)); text-align: start; }
.rc-terms-body .rc-chef { margin: 0 auto 4px; }
.rc-terms-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.rc-terms-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--accent-text); font-weight: 700; text-decoration: none; }
.rc-terms-check { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--radius-m); background: var(--surface);
  box-shadow: var(--shadow-card); font-size: 15px; line-height: 1.6; cursor: pointer; }
.rc-terms-check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.rc-terms-error { min-height: 1.6em; margin: 8px 0; color: var(--danger); font-size: 14px; }