/* Dietitian program, recipes, blog, studio and review console. Uses site.css tokens. */

.plate-ph {
  --h: 150;
  width: 100%; height: 100%; display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 20%, hsl(var(--h) 60% 92% / .9), transparent 60%),
    linear-gradient(135deg, hsl(var(--h) 45% 88%), hsl(calc(var(--h) + 30) 40% 80%));
}
.plate-ph::before {
  content: ""; width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 54%, rgba(0,0,0,.05) 55% 57%, #fbfaf6 58% 100%);
  box-shadow: 0 18px 30px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plate-ph { background: linear-gradient(135deg, hsl(var(--h) 25% 22%), hsl(calc(var(--h) + 30) 20% 16%)); }
}

.status-card { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; }
@media (max-width: 720px) { .status-card { grid-template-columns: 1fr; } }
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 6px var(--amber-soft); }
.status-dot.approved { background: var(--green); box-shadow: 0 0 0 6px var(--mint-soft); }
.status-dot.rejected, .status-dot.suspended { background: var(--tomato); box-shadow: 0 0 0 6px var(--tomato-soft); }
.status-dot.needs_info { background: var(--violet); box-shadow: 0 0 0 6px var(--violet-soft); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; }
.stat strong { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.stat span { color: var(--ink-3); font-size: .86rem; }

.studio-shell > *, .editor-grid > *, .review-grid > *, .stack > *, .card, .form, .field { min-width: 0; }
.field input[type="file"] { max-width: 100%; }
.ing-row > * { min-width: 0; }
@media (max-width: 640px) {
  .table th:nth-child(3), .table td:nth-child(3) { display: none; }
  .table td, .table th { padding: 12px 10px; }
  .kv { grid-template-columns: 1fr !important; }
}
.studio-shell { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
.studio-nav { position: sticky; top: 90px; display: grid; gap: 4px; }
.studio-nav a { padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.studio-nav a:hover, .studio-nav a[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
@media (max-width: 900px) {
  .studio-shell { grid-template-columns: 1fr; }
  .studio-nav { position: static; display: flex; overflow-x: auto; gap: 6px; }
  .studio-nav a { white-space: nowrap; background: var(--surface-2); }
}

.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.editor-aside { position: sticky; top: 90px; display: grid; gap: 16px; }
@media (max-width: 1000px) { .editor-grid { grid-template-columns: 1fr; } .editor-aside { position: static; } }

.ing-rows { display: grid; gap: 8px; }
.ing-row { display: grid; grid-template-columns: 76px 110px minmax(0, 1fr) minmax(0, .8fr) auto auto; gap: 8px; align-items: center; }
.ing-row input, .ing-row select { min-height: 42px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); width: 100%; }
.ing-row .map { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.ing-row .map.ok { background: var(--mint-soft); color: var(--green-deep); }
.ing-row .map.bad { background: var(--amber-soft); color: #9a5b10; }
.ing-row .map.wait { background: var(--surface-2); color: var(--ink-3); }
.ing-row .opt { display: inline-flex; gap: 4px; align-items: center; font-size: .8rem; color: var(--ink-3); }
.ing-row button { border: 0; background: none; color: var(--ink-3); cursor: pointer; width: 34px; height: 34px; border-radius: 8px; font-size: 1.2rem; }
.ing-row button:hover { background: var(--tomato-soft); color: var(--tomato); }
@media (max-width: 720px) {
  .ing-row { grid-template-columns: 64px 96px 1fr auto; }
  .ing-row .note, .ing-row .opt { grid-column: 1 / -2; }
}
.ing-head { display: grid; grid-template-columns: 76px 110px minmax(0,1fr) minmax(0,.8fr) auto auto; gap: 8px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: 0 2px; }
@media (max-width: 720px) { .ing-head { display: none; } }

.md-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.md-tabs button { border: 1px solid var(--line-strong); background: var(--surface); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .88rem; }
.md-tabs button[aria-selected="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.md-preview { min-height: 300px; padding: 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }

.preview-banner { background: var(--amber-soft); color: #8a4f0b; padding: 10px 0; font-weight: 600; font-size: .92rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .preview-banner { color: #f2c07a; } }

.recipe-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.recipe-hero .media { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.recipe-hero .media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .recipe-hero { grid-template-columns: 1fr; } }
.facts { display: flex; flex-wrap: wrap; gap: 10px; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; min-width: 96px; }
.fact small { display: block; color: var(--ink-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.fact strong { font-size: 1.05rem; }
.recipe-body { display: grid; grid-template-columns: 340px 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 860px) { .recipe-body { grid-template-columns: 1fr; } }
.ingredients { position: sticky; top: 90px; }
.ingredients ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.ingredients li { padding: 10px 0; border-bottom: 1px dashed var(--line-strong); display: flex; gap: 10px; }
.ingredients li label { display: flex; gap: 10px; cursor: pointer; }
.ingredients input { accent-color: var(--green); width: 18px; height: 18px; margin-top: 4px; }
.ingredients li:has(input:checked) span { text-decoration: line-through; color: var(--ink-3); }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 14px; font-size: 1.06rem; line-height: 1.7; }
.steps li::before { content: counter(step); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--green-deep); font-weight: 750; font-family: var(--font-display); }
.tip-card { background: var(--mint-soft); border-radius: var(--radius-lg); padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }

.post-hero { max-width: 820px; margin: 0 auto; text-align: center; }
.post-hero h1 { margin-inline: auto; font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 22ch; }
.post-cover { max-width: 1040px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16 / 8; box-shadow: var(--shadow-lg); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-body { max-width: 70ch; margin: 0 auto; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters a { text-decoration: none; }
.filters .chip[aria-current="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.review-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .review-grid { grid-template-columns: 1fr; } }
.decision { position: sticky; top: 90px; }
.decision .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; margin: 0; }
.kv dt { color: var(--ink-3); font-size: .9rem; }
.kv dd { margin: 0; font-weight: 550; word-break: break-word; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: 8px; } }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.timeline li { display: grid; grid-template-columns: 12px 1fr; gap: 12px; font-size: .92rem; }
.timeline li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); margin-top: 7px; }
.queue-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.queue-item:last-child { border-bottom: 0; }
.queue-item:hover { background: var(--surface-2); color: inherit; }

.program-steps { counter-reset: ps; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.program-steps li { counter-increment: ps; list-style: none; }
.program-steps li::before { content: counter(ps); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gold); color: var(--green-900); font-weight: 800; margin-bottom: 14px; }
@media (max-width: 900px) { .program-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .program-steps { grid-template-columns: 1fr; } }

.google-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 24px 12px 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 650; font-size: 1.02rem; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.google-btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.google-btn svg { width: 22px; height: 22px; }
.auth-card { max-width: 480px; margin: 0 auto; text-align: center; padding: clamp(28px, 5vw, 48px); }
.auth-card img.logo { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 18px; box-shadow: var(--shadow-md); }