/* Shared styles for the YM App's own pages (home, join, admin). The tools keep their own styles. */
/* Buttons and form fields don't pick up the page font on their own */
button, input, select, textarea { font-family: inherit; }
:root {
  --pink: #f84079; --pink-dark: #d42e60; --pink-soft: #ffd9e5; --burgundy: #53152a;
  --ink: #282828; --cream: #fffafa; --stone: #e9e5e3; --muted: #7a7270; --faint: #b5adab;
  /* Premium look (22 Oct 2026): a pink gradient on the header (lighter top-left, deeper bottom-right, as in the preview) and softer, deeper card shadows */
  --header-bg: radial-gradient(120% 140% at 0% 0%, #ff6a99 0%, #f84079 45%, #d42e60 100%);
  --shadow-card: 0 1px 2px rgba(83,21,42,.04), 0 6px 20px rgba(83,21,42,.07);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { background: var(--cream); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; min-height: 100vh; }

/* The extra 30px at the top keeps the header clear of the blurred strip Safari draws under the status bar on iPhone */
/* THE header. Every page uses exactly these sizes (the Meal Plan Builder and Takeaway match them in sync-tools.mjs):
   44px above the label (clear of Safari's blurred strip), label 0.7rem, 6px gap (so the Y's swash doesn't touch the label), logo 2.8rem at line-height 1.3, 34px below (26px of it under the page's rounded sheet). */
.app-header { position: relative; background: var(--pink); background: var(--header-bg); padding: calc(66px + env(safe-area-inset-top)) 22px 34px; }
/* The page rises over the bottom of the header on a cream sheet with rounded top corners (Home's photo card overlaps
   the pink too). overflow: clip rounds the corners of anything at the top (e.g. Recipe Books' sticky search bar)
   without breaking position: sticky. The tool pages get the same in sync-tools.mjs. */
.app-header ~ main.container { position: relative; margin-top: -26px; border-radius: 26px 26px 0 0; background: var(--cream); overflow: clip; }
/* Home has no sheet: its photo card is what overlaps the header (so the card's top isn't sitting on the sheet's edge) */
.app-header ~ main.container.no-sheet { margin-top: 0; border-radius: 0; background: none; overflow: visible; }
.app-header .inner { max-width: 480px; margin: 0 auto; }
.eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 2.5px; line-height: 1.3; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: -4px; }
/* Lower case "young muscle" (Brooke, 22 Oct 2026, option B). Lower-case letters sit lower in the line, so the label is
   10px closer to it (-4px gap instead of 6). 66px above the label (was 54) so the label and Home button sit clear of
   Safari's blurred strip at the top of the iPhone screen (Brooke, 22 Oct 2026): same header height, logo in the same place. */
.wordmark { font-family: 'Brittany', cursive; font-size: 2.8rem; font-weight: 400; color: #fff; line-height: 1.3; padding: 0; text-transform: lowercase; }
/* Opened from the home screen there's no Safari strip at the top, so no extra gap */
@media (display-mode: standalone) {
  .app-header { padding-top: calc(28px + env(safe-area-inset-top)); }
  /* The Home button stays at calc(50px + env(safe-area-inset-top)) here too, beside the wordmark (Brooke, 23 Oct 2026). A rule that moved it up never
     worked on these pages (the main .home-link rule comes later), but did on the tool pages, so it jumped around. */
}

.container { max-width: 480px; margin: 0 auto; padding: 18px 14px 40px; }
.greeting { font-size: 1.15rem; font-weight: 800; margin: 4px 2px 2px; }
.sub { font-size: 0.85rem; color: var(--muted); margin: 0 2px 16px; }

.tool {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: #fff; border-radius: 16px; padding: 18px 16px; margin-bottom: 12px; min-height: 88px;
  box-shadow: var(--shadow-card);
  -webkit-tap-highlight-color: transparent; transition: transform .12s;
}
.tool:active { transform: scale(0.985); }
.tool-icon { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tool-icon.meal { background: var(--pink-soft); color: var(--burgundy); }
.tool-icon.take { background: #f3e8eb; color: var(--burgundy); }
.tool-text { flex: 1; min-width: 0; }
.tool-name { font-size: 1.06rem; font-weight: 700; }
.tool-desc { font-size: 0.8rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.chev { color: var(--faint); flex-shrink: 0; }

.note { margin-top: 18px; font-size: 0.72rem; color: var(--muted); text-align: center; line-height: 1.5; }

[hidden] { display: none !important; }
.state-loading { padding: 60px 0; text-align: center; color: var(--muted); font-size: 0.88rem; }
.spinner { width: 26px; height: 26px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--pink-soft); border-top-color: var(--pink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.clerk-slot { display: flex; justify-content: center; margin-top: 4px; }
.intro { text-align: center; margin: 6px 0 14px; }
.intro h1 { font-size: 1.15rem; font-weight: 800; }
.intro p { font-size: 0.85rem; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.panel { background: #fff; border-radius: 16px; padding: 22px 18px; box-shadow: var(--shadow-card); text-align: center; }
.panel h1 { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
.panel p { font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 16px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--pink); background: #fff; color: var(--pink-dark); font: 700 0.88rem Inter, sans-serif; cursor: pointer; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--stone); }
.account-who { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--muted); min-width: 0; }
/* A long email is shortened with … but the role label always shows */
.account-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-who .role-pill { flex-shrink: 0; }
.link-btn { background: none; border: none; color: var(--pink-dark); font: 700 0.8rem Inter, sans-serif; cursor: pointer; padding: 8px 0 8px 8px; flex-shrink: 0; }
.role-pill { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--pink-soft); color: var(--burgundy); margin-left: 6px; vertical-align: 2px; }

/* Back link in the header of the app's own pages */
.home-link { position: absolute; min-height: 36px; top: calc(50px + env(safe-area-inset-top)); right: 14px; display: inline-flex; align-items: center; gap: 3px; padding: 6px 11px 6px 8px; border-radius: 999px; background: rgba(255,255,255,0.2); color: #fff; font: 600 0.78rem Inter, sans-serif; text-decoration: none; }
.home-link:active { background: rgba(255,255,255,0.32); }
.tool-icon.admin { background: var(--stone); color: var(--ink); }

.tool-icon.plans { background: #fee3eb; color: #c81e5b; }
.view-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border-radius: 16px; padding: 14px 16px; margin-top: 4px; box-shadow: var(--shadow-card); }
.view-toggle-title { font-size: 0.92rem; font-weight: 700; }
.view-toggle-sub { font-size: 0.74rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
/* Same size and colours as the switches in the Meal Plan Builder and Takeaway Finder */
.switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; border-radius: 999px; border: none; background: #d9d2cf; cursor: pointer; transition: background .25s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .25s; }
.switch.on { background: var(--pink); }
.switch.on::after { transform: translateX(20px); }
.tool-icon.books { background: #f3e8eb; color: var(--burgundy); }

/* Photos: a slow one gets a soft shimmer box, then fades in; one already on the phone just shows (see the photo
   watcher in auth.js, which adds .pending / .instant to the image and .waiting / .done to its box) */
.ph-load.waiting { background: linear-gradient(100deg, #f3efed 30%, #fbf8f7 50%, #f3efed 70%) #f3efed; background-size: 220% 100%; animation: ph-shimmer 1.3s linear infinite; }
@keyframes ph-shimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }
img.fade { transition: opacity .3s ease; }
img.fade.pending { opacity: 0; }
img.fade.instant { transition: none; }
@media (prefers-reduced-motion: reduce) { .ph-load.waiting { animation: none; } img.fade { transition: none; } }

/* Empty pages: an icon in a soft circle, a title and one line */
.empty-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--pink-soft); color: var(--burgundy); display: flex; align-items: center; justify-content: center; margin: 4px auto 14px; }
.empty-state { text-align: center; padding: 34px 20px 30px; }
.empty-state h2 { font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 5px; }
.empty-state p { font-size: 0.84rem; color: var(--muted); line-height: 1.5; }

/* No page cross-fade (@view-transition), on purpose: during the fade the browser draws pictures of the old and new
   page, and those lose the frosted glass blur (tab bar, Home's photo panel), so the glass glitched; it also put the
   header above the page's rounded top. Pages are kept on the phone (sw.js), so they switch fast without it. */

/* ════════════════════════════════════════════════════════════════════════════════════════════════════
   New look (25 Oct 2026, Brooke approved the mock-ups in Meal planner/design_*.png). These rules come last, so they
   win over the older ones above.
   - No pink header bar: a big bold page title on the cream page, the Home button a small white pill above it.
     The "young muscle" script only on Home (and the sign-in screen).
   - Buttons: flat solid pink (no gradient, no glow), one main button per screen; glass only on photos.
   - Normal-case headings instead of tiny spaced-out capitals; soft fills instead of grey outlines; slightly bigger,
     darker small text; grey placeholder shapes instead of a spinner; small motion (cards ease in, taps press).
   ════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --muted: #6c6361; --fill: #f8eff2; --fill-pink: #ffe6ee; --radius-card: 22px;
  --shadow-card: 0 1px 2px rgba(83,21,42,.03), 0 8px 24px rgba(83,21,42,.06); }
.app-header { background: none !important; padding: calc(64px + env(safe-area-inset-top)) 20px 4px; }
@media (display-mode: standalone) { .app-header { padding-top: calc(60px + env(safe-area-inset-top)); } }
.app-header ~ main.container { margin-top: 0; border-radius: 0; background: none; overflow: visible; }
.app-header .eyebrow { font-size: 2.15rem; font-weight: 900; letter-spacing: -1.1px; line-height: 1.05; text-transform: none; color: var(--burgundy); margin: 0; }
.app-header .wordmark { display: none; }
/* The sign-in screen keeps the brand script, in pink */
.app-header.brand .wordmark { display: block; color: var(--pink); font-size: 2.6rem; }
.app-header.brand .eyebrow { display: none; }
.home-link { top: calc(14px + env(safe-area-inset-top)); left: 14px; right: auto; background: #fff; color: var(--burgundy); font-weight: 700;
  box-shadow: 0 1px 2px rgba(83,21,42,.05), 0 4px 14px rgba(83,21,42,.08); }
.home-link:active { background: #fff; transform: scale(.96); }
.container { padding-top: 12px; }
.sub { color: var(--muted); }

/* Buttons and fields */
.btn-outline { border: none; background: var(--fill-pink); color: var(--pink-dark); }
input[type=text], input[type=search], input[type=email], input[type=number], input[type=time], textarea, select { -webkit-appearance: none; appearance: none; }
.chip { border: none !important; background: var(--fill) !important; color: var(--ink); }
.chip.on { background: var(--pink) !important; color: #fff !important; }
button:active, a.tool:active { transition: transform .08s; }

/* Loading: the page's shape in soft grey instead of a spinner */
.state-loading { padding: 14px 2px; font-size: 0; color: transparent; }
.state-loading .spinner { display: none; }
.state-loading::before, .state-loading::after { content: ''; display: block; border-radius: var(--radius-card);
  background: linear-gradient(100deg, #f6eef0 30%, #fcf7f8 50%, #f6eef0 70%) #f6eef0; background-size: 220% 100%; animation: ph-shimmer 1.3s linear infinite; }
.state-loading::before { height: 52px; margin-bottom: 14px; border-radius: 16px; }
.state-loading::after { height: 360px; }

/* Motion: cards ease in when a list appears; things press in when tapped */
@keyframes ym-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rcard, .recipe, .book, .plan, .hrow, .guide, .order, .shop-item { animation: ym-rise .32s ease both; }
.rcard:active, .book:active, .plan:active, .recipe:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .rcard, .recipe, .book, .plan, .hrow, .guide, .order, .shop-item { animation: none; } }

/* Inputs: soft fill instead of an outline */
.input { border-color: transparent !important; background: var(--fill) !important; }
.input:focus { border-color: var(--pink) !important; background: #fff !important; }
.segmented button { border-color: transparent !important; background: var(--fill) !important; }
.segmented button.selected, .segmented button.on, .segmented button[aria-pressed="true"] { background: var(--fill-pink) !important; color: #c0275a !important; }

/* Less beige (25 Oct 2026): near-white page with a blush behind the title, pink right up to the top edge */
body { background: linear-gradient(180deg, #ffdce7 0, rgba(255,220,231,.6) 160px, rgba(255,250,250,0) 380px) no-repeat, radial-gradient(140% 340px at 10% -60px, #ffd3e1 0%, rgba(255,211,225,.55) 42%, rgba(255,250,250,0) 82%) no-repeat, var(--cream); }

/* No double-tap zoom (25 Oct 2026, Brooke: tapping + / − quickly zoomed the page). Pinch-zoom still works. */
html { touch-action: manipulation; }