/* Meal Planner feature page. Tokens from /tokens.css. */
.mp-hero { padding-top: var(--sk-space-10); }
.mp-hero .back { font-size: var(--sk-text-sm); color: var(--sk-text-muted); text-decoration: none; display: inline-block; margin-bottom: var(--sk-space-4); }
.mp-hero .back::before { content: "\2190  "; }
.mp-hero .row { display: flex; align-items: center; gap: var(--sk-space-4); flex-wrap: wrap; }
.group, .compare, .soon { border-top: 1px solid var(--sk-border); padding: var(--sk-space-10) 0; }
.group h2, .compare h2, .soon h2 { font-size: var(--sk-text-2xl); margin: var(--sk-space-2) 0 var(--sk-space-6); }
@media (min-width: 720px) { .group h2, .compare h2, .soon h2 { font-size: var(--sk-text-3xl); } }
.compare .intro { max-width: 60ch; margin: calc(-1 * var(--sk-space-3)) 0 var(--sk-space-6); color: var(--sk-text-muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); background: var(--sk-surface); }
.compare table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--sk-text-sm); }
.compare th, .compare td { padding: var(--sk-space-3) var(--sk-space-4); border-bottom: 1px solid var(--sk-border); text-align: left; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font: var(--sk-weight-semibold) var(--sk-text-sm) var(--sk-font-body); color: var(--sk-text-muted); }
.compare thead th.us { color: var(--sk-text); }
.compare tbody th { font-weight: var(--sk-weight-medium); }
.compare td:nth-child(2) { background: var(--sk-accent-bg); }
.v { display: inline-block; font-weight: var(--sk-weight-semibold); font-size: var(--sk-text-xs); padding: 2px 10px; border-radius: var(--sk-radius-full); white-space: nowrap; }
.v.yes { background: var(--sk-success); color: var(--sk-on-primary); }
@media (prefers-color-scheme: dark) { .v.yes { color: var(--sk-bg); } }
.v.common { background: var(--sk-success-bg); color: var(--sk-text); }
.v.some { background: var(--sk-warning-bg); color: var(--sk-text); }
.v.rare { background: transparent; color: var(--sk-text-muted); border: 1px solid var(--sk-border-strong); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.compare .note, .soon .note { margin-top: var(--sk-space-4); }
.soon-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--sk-space-4); }
@media (min-width: 720px) { .soon-list { grid-template-columns: 1fr 1fr; } }
.soon-list li { border: 1px dashed var(--sk-border-strong); border-radius: var(--sk-radius-md); padding: var(--sk-space-5); background: var(--sk-surface); }
.soon-list h3 { font-size: var(--sk-text-lg); margin-bottom: var(--sk-space-1); }
.soon-list p { margin: 0; color: var(--sk-text-muted); }
.cta { border-top: 1px solid var(--sk-border); padding: var(--sk-space-12) 0 var(--sk-space-16); }
.cta h2 { font-size: var(--sk-text-3xl); margin-bottom: var(--sk-space-3); }
.cta p { max-width: 52ch; margin: 0 0 var(--sk-space-6); }