:root {
  --bg: #12100e;
  --card: #1e1b18;
  --line: #332e29;
  --text: #f3efe9;
  --muted: #a49a8d;
  --accent: #e8743c;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 88px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 620px; margin: 0 auto; padding: 12px; }

/* --- chrome --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-top));
  padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line); background: var(--card);
  position: sticky; top: 0; z-index: 10;
}
/* Wordmark. The stack is deliberately all system fonts — a web font would have
   to load from an outside host, contradicting the privacy promise on /info.
   Avenir Next / Optima on Apple devices, sensible fallbacks elsewhere. */
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text); min-width: 0;
}
/* Both parts of the logo. Sized in CSS as well as in the width/height
   attributes so the header reserves the right space before the images load
   and nothing jumps. */
.brand-mark { flex: none; display: block; height: 46px; width: auto; }
.brand-name {
  font-family: "Avenir Next", "Optima", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 25px; font-weight: 700; letter-spacing: .015em;
  white-space: nowrap;
}
/* Picks up the red "MY" from the emblem's own wordmark, which is the only
   thing tying the text to the artwork beside it. The logo red exactly, rather
   than the site's orange accent -- this is branding, not UI. */
.brand-accent { color: #f80008; }

/* Below ~380px the emblem and a long display name compete for the bar. */
@media (max-width: 379px) {
  .brand-mark { height: 38px; }
  .brand-name { font-size: 21px; }
}
/* Never let a long name push the wordmark around. */
.whoami {
  color: var(--muted); font-size: 14px;
  max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: none;
}

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; gap: 10px; justify-content: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line);
}
.tabbar a {
  flex: 1; max-width: 220px; text-align: center; padding: 12px;
  border-radius: var(--radius); text-decoration: none;
  font-weight: 600;
  color: var(--text); border: 1px solid var(--line);
}
/* Filled rather than transparent: an outline-only button next to a solid one
   reads as disabled, which is exactly how "Feed" was being interpreted. */
.tabbar a.secondary {
  background: #2f2a25; border-color: #453e37; color: var(--text);
}
.tabbar a.secondary:active { background: #3a342d; }
/* The page you're already on stays legible but visibly not a destination. */
.tabbar a.current { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); }

.tabbar a.primary, .primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tabbar a.primary:active { background: #d0632f; }

/* --- blocks --- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.centered { text-align: center; }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: #ff8f7a; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.gap { margin-top: 14px; }

/* Inline links in prose (e.g. the contact address on /info). Scoped so it
   doesn't touch .button links, which style themselves. */
.card p a, .card li a { color: var(--accent); }

/* Step-by-step guide: sized for someone who finds phones difficult, so the
   type is larger than the rest of the app and steps are widely spaced. */
.guide { font-size: 19px; line-height: 1.65; }
.guide h1 { font-size: 26px; margin-bottom: 14px; }
.guide h2 { font-size: 21px; margin: 0 0 10px; color: var(--accent); }
.guide .lead { font-size: 20px; }
.guide p { margin: 0 0 14px; }

.guide .steps { list-style: none; counter-reset: step; padding: 0; margin: 24px 0 0; }
.guide .steps > li {
  border-top: 1px solid var(--line);
  padding: 22px 0 6px;
}
.guide .big-icon { text-align: center; margin: 18px 0; }
.inline-icon { display: inline-block; vertical-align: middle; }
.inline-icon.large {
  background: #16130f; border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 18px;
}

.guide .note {
  background: rgba(232, 116, 60, .12);
  border: 1px solid rgba(232, 116, 60, .45);
  border-radius: var(--radius);
  padding: 16px; margin: 22px 0;
}

/* Full-width call-to-action link, e.g. on the info page */
.button.block { display: block; width: 100%; box-sizing: border-box; }

.feature-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(232, 116, 60, .16);
  border: 1px solid rgba(232, 116, 60, .55);
  border-radius: var(--radius); padding: 13px 14px; margin: 4px 0 12px;
  font-size: 15px; line-height: 1.5;
}
.feature-banner a { color: var(--accent); text-decoration: none; font-weight: 600; }
.banner-dismiss {
  flex: none; font-size: 22px; line-height: 1; padding: 0 2px;
  color: var(--muted) !important; text-decoration: none;
}

/* Recipe text keeps the line breaks the cook typed, and never renders HTML. */
.recipe-text {
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: #16130f; border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; margin-bottom: 6px;
  font-size: 16px; line-height: 1.6;
}
.recipe-blurb { margin: 2px 0 0; font-size: 15px; }
.page-title { font-size: 22px; margin: 4px 0 10px; }

.new-banner {
  background: rgba(232, 116, 60, .14);
  border: 1px solid rgba(232, 116, 60, .5);
  color: var(--text);
  border-radius: var(--radius); padding: 13px 15px; margin: 4px 0 12px;
  font-weight: 600; font-size: 16px;
}
.tag.new {
  background: var(--accent); color: #fff;
  font-weight: 700; letter-spacing: .04em; font-size: 12px;
}

.posted-banner {
  background: #1f3d24; border: 1px solid #2f6b3a; color: #b6f0c2;
  border-radius: var(--radius); padding: 14px 16px; margin: 4px 0 14px;
  font-weight: 600; font-size: 17px;
}

.feed-top { display: flex; align-items: stretch; gap: 8px; padding: 2px 0 12px; }
/* A proper row rather than a stray coloured link: bordered, full width, with a
   chevron so it reads as somewhere to go. */
.info-link {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text); text-decoration: none;
  font-size: 16px; font-weight: 600; letter-spacing: .01em;
}
.info-link { flex: 1; min-width: 0; }
.info-link .info-glyph { color: var(--accent); flex: none; }
.info-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
.info-link .info-chevron { color: var(--muted); flex: none; }
.info-link:active { background: #262220; }

.refresh-link {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 13px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text); text-decoration: none;
  font-size: 16px; font-weight: 600; white-space: nowrap;
}
.refresh-link svg { color: var(--accent); flex: none; }
.refresh-link:active { background: #262220; }

.uploader-filter {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.uploader-filter label {
  margin: 0; white-space: nowrap;
  font-size: 16px; font-weight: 600; color: var(--text);
}
.uploader-filter select {
  flex: 1; padding: 12px 14px; font-size: 17px; font-weight: 600;
  background: #16130f; color: var(--text);
  border: 1px solid #453e37; border-radius: 10px;
}

/* Wraps rather than scrolls sideways: with four meal types the last chip fell
   off the edge of a phone, hiding an option behind a gesture nobody knows to make. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.feed { display: grid; gap: 14px; }
.meal-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.meal-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.meal-card-body { padding: 12px; display: grid; gap: 8px; }
img.hero { width: 100%; border-radius: 10px; margin-bottom: 12px; display: block; }

.tag {
  font-size: 13px; padding: 4px 10px; border-radius: 999px;
  background: rgba(232, 116, 60, .16); color: var(--accent);
}
.tag.alt { background: rgba(255, 255, 255, .07); color: var(--muted); }
.score { font-size: 18px; font-weight: 700; }

/* Label/value summary table */
.kv-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.kv-table th, .kv-table td { padding: 9px 4px; font-size: 15px; }
.kv-table th {
  text-align: left; font-weight: 500; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.kv-table td {
  text-align: right; font-weight: 700; font-size: 17px;
  color: var(--text); white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.kv-table td .muted { font-weight: 400; font-size: 14px; }
/* Starts a new group of related rows */
.kv-table tr.divide th, .kv-table tr.divide td { border-top: 2px solid var(--line); }

/* Dense per-user table; scrolls sideways inside its own box */
/* Scrolls in both directions inside its own box, so the header can stay pinned
   while you scan down a long list — otherwise the numbers lose their labels. */
.table-wrap {
  overflow: auto; -webkit-overflow-scrolling: touch; margin-top: 12px;
  max-height: 65vh;
  border: 1px solid var(--line); border-radius: 10px;
}
.data-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.data-table th, .data-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  text-align: left; white-space: nowrap; vertical-align: top;
}
.data-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #16130f;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid #453e37;
}
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody td.num { font-weight: 700; }
.data-table .when { color: var(--muted); font-size: 13px; }
.u-name { display: block; font-weight: 600; }
.u-email { display: block; font-size: 12px; color: var(--muted); }
.tag.mini { font-size: 10px; padding: 2px 6px; vertical-align: middle; }

.rating-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.rating-list li { border-top: 1px solid var(--line); padding-top: 12px; }
.rating-list p { margin: 4px 0 0; }

/* --- forms --- */
form { display: grid; gap: 6px; text-align: left; }
label { font-size: 14px; color: var(--muted); margin-top: 8px; }
input[type="text"], input[type="email"], textarea, input[type="file"] {
  width: 100%; padding: 12px; font-size: 16px;
  background: #16130f; color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
}
textarea { resize: vertical; }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 32px; }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 10px 0 0; }
legend { color: var(--muted); font-size: 14px; padding: 0 6px; }
label.radio { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 2px; color: var(--text); }
label.radio input { width: 20px; height: 20px; accent-color: var(--accent); }

button, .button {
  margin-top: 12px; padding: 14px; font-size: 16px; font-weight: 600;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: transparent; color: var(--text);
  text-decoration: none; text-align: center; cursor: pointer;
}
.row.gap .button { flex: 1; }
/* Must come after the generic .button rule above, which would otherwise reset
   the accent fill back to transparent. */
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* One-time critics intro. Scrolls rather than clipping on a short screen, so
   the dismiss button is always reachable. */
.intro-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.intro-card {
  background: var(--card); border: 1px solid #4a4660;
  border-radius: var(--radius); padding: 20px;
  max-width: 420px; width: 100%; max-height: 88vh; overflow-y: auto;
}
.intro-card h2 { margin: 0 0 12px; font-size: 20px; }
.intro-card p { margin: 0 0 12px; line-height: 1.55; }
.intro-card .button { margin-top: 10px; }

/* Settings */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }

.toggle {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 18px; padding: 14px;
  background: #16130f; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text);
}
.toggle input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin-top: 2px; }
.toggle > span { display: grid; gap: 4px; }
.toggle strong { font-size: 16px; }

a.whoami { text-decoration: none; }
a.whoami:active { opacity: .6; }

/* Chef's Take. Deliberately unlike a family comment: its own tint, a dashed
   edge and a spelled-out byline, so nobody mistakes a critic for a relative. */
.chefs-take {
  background: #1b1a22;
  border: 1px dashed #4a4660;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.chefs-take.pending { opacity: .85; }
.ct-head { display: flex; align-items: center; gap: 12px; }
.ct-head > div { flex: 1; min-width: 0; }
.ct-head strong { display: block; font-size: 16px; }
.ct-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: #2a2735; border: 1px solid #4a4660;
}
.ct-avatar.pending-dot { animation: ct-pulse 1.4s ease-in-out infinite; }
@keyframes ct-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.ct-byline {
  display: block; font-size: 12px; color: #a9a2c4;
  text-transform: uppercase; letter-spacing: .06em;
}
/* Visually distinct from the family score, which is large and orange. */
.ct-rating {
  flex: none; font-size: 20px; font-weight: 700; color: #cfc8f0;
  background: #2a2735; border: 1px solid #4a4660;
  border-radius: 10px; padding: 6px 10px;
}
.ct-rating-max { font-size: 13px; font-weight: 400; color: var(--muted); }
.ct-guest {
  margin: 12px 0 0; font-size: 13px; color: #a9a2c4; font-style: italic;
}
.ct-headline { margin: 12px 0 6px; font-weight: 700; font-size: 17px; }
.ct-body { margin: 0; line-height: 1.6; }

/* Cameo: indented and dimmed so it reads as an aside to the review above it
   rather than as a second, equally weighted opinion. */
.ct-cameo {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 8px 8px 0;
}
.ct-cameo-avatar { flex: 0 0 auto; line-height: 0; opacity: 0.85; }
.ct-cameo-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.78;
}
.ct-cameo-line strong { opacity: 0.9; }

/* Deliberately quiet: a real choice, not a headline. */
.skip-ai {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 0; padding: 10px 0;
  font-size: 14px; color: var(--muted);
}
.skip-ai input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

button.danger {
  background: #8c2f22; border-color: #8c2f22; color: #fff;
}
.delete-link {
  display: inline-block; margin-top: 10px;
  color: #ff8f7a; text-decoration: none; font-size: 14px;
}

button:disabled, button.primary:disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}
output { color: var(--accent); font-weight: 700; }

#share-box { display: grid; gap: 8px; }
#shareText {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
}

/* Critic avatars and bio cards */
.ct-avatar-link, .ct-name-link { text-decoration: none; color: inherit; }
.ct-avatar-link:active { opacity: .7; }
.ct-name-link { border-bottom: 1px dotted #6a6490; }
.critic-bio .ct-head { margin-bottom: 10px; }
.critic-bio p { margin: 0 0 8px; line-height: 1.6; }
.ct-disclosure {
  background: rgba(120, 110, 180, .14);
  border: 1px solid #4a4660;
  border-radius: 10px; padding: 12px 14px;
}

/* Owner-only actions on a Chef's Take card */
.ct-action {
  margin-top: 12px; width: 100%;
  background: #2a2735; border: 1px solid #4a4660; color: #cfc8f0;
  font-size: 15px; padding: 11px;
}
.ct-action:active { background: #332f42; }
.ct-nomore { margin-top: 12px; }